You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
409 lines
14 KiB
409 lines
14 KiB
<!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>
|
|
|