<!DOCTYPE html>
<html lang="de">
<head>
<title>Sub Factory</title>
<a id="focus" href="#focus"></a>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="./images/favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
<!-- Shaders -->
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4(position, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
// #extension GL_OES_standard_derivatives : enable
uniform float iTime;
uniform vec2 iMouse;
uniform vec2 iResolution;
uniform sampler2D iChannel0;
vec2 GetGradient(vec2 intPos, float t) {
float rand = texture(iChannel0, intPos / 64.0).r * 4.0;
float angle = 6.283185 * rand + 4.0 * t * rand;
return vec2(cos(angle), sin(angle));
}
float Pseudo3dNoise(vec3 pos) {
vec2 i = floor(pos.xy);
vec2 f = pos.xy - i;
vec2 blend = f * f * (3.0 -(2.0 * f));
float noiseVal =
mix(
mix(
dot(GetGradient(i + vec2(0, 0), pos.z), f - vec2(0, 0)),
dot(GetGradient(i + vec2(1, 0), pos.z), f - vec2(1, 0)),
blend.x),
mix(
dot(GetGradient(i + vec2(0, 1), pos.z), f - vec2(0, 1)),
dot(GetGradient(i + vec2(1, 1), pos.z), f - vec2(1, 1)),
blend.x),
blend.y
);
return noiseVal / 0.7;
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 uv = fragCoord.xy / iResolution.y;
vec2 uvm = iMouse.xy / iResolution.y;
float time = (80.-(1.*uvm.y)) * sin(iTime / 30000.);
float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/10.));
float val = sin(noiseVal * time + (sin(time) * time / 10.));
fragColor.rgba = vec4(vec3(val), 1.0);
}
void main() {
mainImage(gl_FragColor, gl_FragCoord.xy);
}
</script>
<style>
body {
background-color: #ffffff;
}
#hecksshader {
width: 100%;
height: 100%;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -9999;
opacity: 0.02;
}
h2 {
font-family: 'Lato black', sans-serif;
font-size: 2.0rem;
text-transform: uppercase;
color: #111111;
margin-top: 4vh;
margin-bottom: 4vh;
}
.card-title {
font-family: 'Lato black', sans-serif;
color: #222222;
font-size: 1.5rem;
}
p, li {
font-family: 'Lato', sans-serif;
letter-spacing: 0.05em;
font-size: 1.4em;
color: #333333;
hyphens: auto;
}
img {
width:100%;
}
a:link {
color: #b2c778;
}
a:visited {
color: #b2c778;
}
a:hover {
color: silver;
}
a:active {
color: #b2c778;
}
.card {
width: 100%;
background-color: #f4f4f4;
border: 0px solid #dee2e6!important;
}
.card-body {
border-style: solid;
border-top: 1px solid #dee2e6!important;
border-bottom: 1px solid #dee2e6!important;
border-left: 0;
border-right: 0;
}
.container {
background-color: #fefefe;
width: 100%;
border-left: 1px solid #dee2e6!important;
border-right: 1px solid #dee2e6!important;
margin-right: auto;
margin-left: auto;
padding: 0;
}
.row {
margin-left:0;
margin-right:0;
}
.col-12 {
padding-left:3vw;
padding-right:3vw;
}
.fas, .fab {
color: white;
font-size: 2em;
}
.section, .cardcontainer {
margin-bottom: 5vh;
border-top: 1px solid #dee2e6!important;
}
.logo {
margin-left: auto;
margin-right: auto;
padding-bottom: 2vh;
width: 40%;
display:block;
}
</style>
</head>
<body>
<canvas id="hecksshader"></canvas>
<div class="container">
<div class="row">
<div class="img">
<img src="images/Sub_Factory_2025.webp" alt="Subfactory Banner">
</div>
</div>
<div class="cardcontainer pt-2">
<h2 class="text-center">Präsentiert von</h2>
<div class="card-group">
<div class="card shadow-none">
<div class="card-body text-center">
<div class="fix_height">
<h5 class="card-title">Eulachbass</h5>
</div>
<img class="logo" src="images/eulachbass_logo.webp" alt="Eulachbass Logo">
<a href="https://eulachbass.ch/" target="_blank" class="card-link">
<i class="fas fa-globe mr-2"></i>
</a>
<a href="https://www.instagram.com/eulachbass" target="_blank" class="card-link">
<i class="fab fa-instagram mr-2"></i>
</a>
<a href="https://www.facebook.com/eulachbass/" target="_blank" class="card-link">
<i class="fab fa-facebook mr-2"></i>
</a>
<a href="https://soundcloud.com/eulachbass" target="_blank" class="card-link">
<i class="fab fa-soundcloud mr-2"></i>
</a>
</div>
</div>
<div class="card shadow-none">
<div class="card-body text-center">
<div class="fix_height">
<h5 class="card-title">Sector B</h5>
</div>
<img class="logo" src="images/sectorb_logo.svg" alt="Eulachbass Logo">
<a href="https://www.instagram.com/sectorbevents/" target="_blank" class="card-link">
<i class="fab fa-instagram mr-2"></i>
</a>
<a href="https://www.facebook.com/sectorbevents/" target="_blank" class="card-link">
<i class="fab fa-facebook mr-2"></i>
</a>
</div>
</div>
<div class="card shadow-none">
<div class="card-body text-center">
<div class="fix_height">
<h5 class="card-title">Subsanity Soundystem</h5>
</div>
<img class="logo" src="images/subsanity_logo.webp" alt="Eulachbass Logo">
<a href="https://www.instagram.com/subsanitysoundsystem" target="_blank" class="card-link">
<i class="fab fa-instagram mr-2"></i>
</a>
<a href="https://www.facebook.com/subsanitysound" target="_blank" class="card-link">
<i class="fab fa-facebook mr-2"></i>
</a>
<a href="https://soundcloud.com/user-937924022" target="_blank" class="card-link">
<i class="fab fa-soundcloud mr-2"></i>
</a>
</div>
</div>
</div>
</div>
<!-- INFO -->
<div class="row">
<div class="col-12 section">
<h2 class="text-center">Info</h2>
<p>
Streiche dir den 21. Juni 2025 im Kalender fett an! Von 14:00 bis 22:00 findet auf dem Areal der
Gleiserei in Winterthur zum dritten mal unser Drum & Bass Day Rave statt. Zu Gast sind FD (UK),
Namarone (Fribourg) und anotha90skid (St. Gallen). Unterstützt werden sie von DJs aus unseren eigenen Reihen
(Sector B und Eulachbass).
Eintritt frei – Spenden willkommen!
</p>
</div>
</div>
<!-- Zahlungsmethoden -->
<div class="row">
<div class="col-12 section">
<h2 class="text-center ">Zahlungsmöglichkeiten</h2>
<p>
Bei uns kann mit Bargeld oder Twint bezahlt werden.
</p>
</div>
</div>
<!-- Anreise -->
<div class="row">
<div class="col-12 section">
<h2 class="text-center ">Anreise</h2>
<p>
Einfach "Gleiserei" in dein navi of choice eingeben.
<iframe width="1000" height="350" src="https://www.openstreetmap.org/export/embed.html?bbox=8.723860681056978%2C47.505114930401085%2C8.72756212949753%2C47.507033694888854&layer=mapnik" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?#map=19/47.506074/8.725711">View Larger Map</a></small>
</p>
</div>
</div>
<!-- Rave Etiquette -->
<div class="row">
<div class="col-12 section">
<h2 class="text-center ">Rave Etiquette</h2>
<p>Mit der Teilnahme an der Sub Factory übernimmst du Verantwortung für dein Verhalten und
gestaltest den Anlass aktiv mit:</p>
<ul>
<li><h5 class="card-title">Konsens - nur ja heisst ja</h5></li>
<p>Respektiere physische und emotionale Grenzen. Die Grenzen aller Menschen sind individuell
und können sich jederzeit ändern. Frage immer nach Zustimmung. Das gilt auch beim
Fotografieren.</p>
<li><h5 class="card-title">Füreinander da</h5></li>
<p>Wir kümmern uns um unsere Freund:innen, die Menschen um uns herum und um uns selbst.
Siehst du eine Situation, in der du denkst, dass sich eine Person nicht wohl fühlt: Frag nach!
Jede Person definiert für sich selbst, wann eine Grenze überschritten ist. Falls du selbst mit der
Situation überfordert bist, kannst du Hilfe beim Ordnungsdienst holen.</p>
<li><h5 class="card-title">Keine Annahmen</h5></li>
<p>Vermeide Annahmen und daraus entstehende Fragen und Urteile über die Geschlechtsidentität,
sexuelle Orientierung, Herkunft oder soziale Zugehörigkeit einer Person.</p>
<li><h5 class="card-title">Kenne deine Grenzen</h5></li>
<p>Sei achtsam, wenn du Alkohol und ander Rauschmittel konsumierst. Stelle sicher, dass du
deine eigenen und die Grenzen anderer Personen noch wahrnehmen und respektieren kannst.
<br>
Fühlst du dich unwohl oder brauchst du Unterstützung? Wende dich an den Ordnungsdienst.
Sie können dir weiterhelfen oder einen ruhigen Ort anbieten.
</p>
</ul>
</div>
</div>
<!-- Partner -->
<div class="row">
<div class="col-12 section">
<h2 class="text-center ">Partner</h2>
<li><a href="https://www.gleiserei.ch/" target="_blank">Gleiserei</a></li>
<li><a href="https://www.hakogetraenke.ch/" target="_blank">Hako Getränke</a></li>
</ul>
</div>
</div>
</div>
<script>
document.getElementById("focus").focus();
</script>
<script type="module">
import * as THREE from 'https://unpkg.com/three/build/three.module.js';
let camera, scene, renderer;
let uniforms;
let texture;
let downsample_quality = 1.;
init();
render();
function init() {
camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
scene = new THREE.Scene();
const geometry = new THREE.PlaneGeometry( 2, 2 );
const loader = new THREE.TextureLoader();
const texture = loader.load('./images/noise.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
uniforms = {
iTime: { value: 1.0 },
iResolution: { value: new THREE.Vector2(1.0,1.0) },
iMouse: { value: new THREE.Vector2(0.0,0.0) },
iChannel0: { value: texture },
};
const material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
const canvas = document.querySelector('#hecksshader');
renderer = new THREE.WebGLRenderer({antialias: true, canvas});
document.addEventListener( 'pointermove', onPointerMove);
}
function onPointerMove(event) {
var clientX = event.clientX;
var clientY = event.clientY;
var mouseX = clientX;
var mouseY = 1 - clientY;
uniforms[ 'iMouse' ].value = new THREE.Vector2(mouseX, mouseY);
}
function rendererNeedsResize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
return true;
}
function render() {
requestAnimationFrame( render );
if (rendererNeedsResize(renderer)) {
const canvas = renderer.domElement;
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
uniforms['iResolution'].value = new THREE.Vector2( canvas.clientWidth / downsample_quality, canvas.clientHeight / downsample_quality );
}
uniforms[ 'iTime' ].value = performance.now();
renderer.render( scene, camera );
}
</script>
</body>
</html>