|
|
|
@ -7,7 +7,7 @@ |
|
|
|
<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="icon" type="image/png" href="./resources/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"> |
|
|
|
|
|
|
|
@ -44,28 +44,33 @@ |
|
|
|
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 |
|
|
|
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 time = 20.98 - (100000. * mod(pow(sin(iTime / 20000000.),2.),1.)); |
|
|
|
|
|
|
|
float noiseVal = Pseudo3dNoise(vec3(uv, time)); |
|
|
|
// float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/1.)); |
|
|
|
float time2 = 10000. - (20000. * pow(cos(iTime / noiseVal/32400.),2.)); |
|
|
|
|
|
|
|
|
|
|
|
float val = sin(noiseVal * time + (sin(time) * time / 10.)); |
|
|
|
fragColor.rgba = vec4(vec3(val), 1.0); |
|
|
|
fragColor.rgba = vec4(18./time2/val,0.,0.,1.0); |
|
|
|
} |
|
|
|
|
|
|
|
void main() { |
|
|
|
@ -75,7 +80,8 @@ |
|
|
|
|
|
|
|
<style> |
|
|
|
body { |
|
|
|
background-color: #ffffff; |
|
|
|
background-color: #030303; |
|
|
|
opacity: 0.93; |
|
|
|
} |
|
|
|
|
|
|
|
#hecksshader { |
|
|
|
@ -85,104 +91,123 @@ |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
z-index: -9999; |
|
|
|
opacity: 0.02; |
|
|
|
z-index: -999; |
|
|
|
opacity: 0.24999; |
|
|
|
} |
|
|
|
|
|
|
|
h2 { |
|
|
|
font-family: 'Lato black', sans-serif; |
|
|
|
font-size: 2.0rem; |
|
|
|
text-transform: uppercase; |
|
|
|
color: #111111; |
|
|
|
margin-top: 4vh; |
|
|
|
margin-bottom: 4vh; |
|
|
|
.container { |
|
|
|
background-color: #090909; |
|
|
|
width: 100%; |
|
|
|
border-left: 0px none #dee2e6 !important; |
|
|
|
border-right: 0px none #dee2e6 !important; |
|
|
|
margin-right: auto; |
|
|
|
margin-left: auto; |
|
|
|
padding: 0; |
|
|
|
opacity: 0.86; |
|
|
|
} |
|
|
|
|
|
|
|
.section, .cardcontainer { |
|
|
|
background-color: transparent; |
|
|
|
margin-top: 0vh; |
|
|
|
margin-bottom: 0vh; |
|
|
|
border-top: 0px none #ffffff !important; |
|
|
|
opacity: 0.9999; |
|
|
|
} |
|
|
|
|
|
|
|
.card { |
|
|
|
width: 100%; |
|
|
|
margin-top: 1vh; |
|
|
|
margin-bottom: 1vh; |
|
|
|
background-color: #080808; |
|
|
|
border: 0px solid #dee2e6 !important; |
|
|
|
opacity: 0.9999; |
|
|
|
} |
|
|
|
|
|
|
|
.card-body { |
|
|
|
border-style: solid; |
|
|
|
border-top: 1px solid #333333 !important; |
|
|
|
border-bottom: 1px none #dee2e6 !important; |
|
|
|
border-left: 0; |
|
|
|
border-right: 0; |
|
|
|
opacity: 0.74; |
|
|
|
} |
|
|
|
|
|
|
|
.flyer { |
|
|
|
opacity: 0.9; |
|
|
|
} |
|
|
|
|
|
|
|
.logo { |
|
|
|
margin-left: auto; |
|
|
|
margin-right: auto; |
|
|
|
padding-bottom: 0vh; |
|
|
|
width: 50%; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
.card-title { |
|
|
|
font-family: 'Lato black', sans-serif; |
|
|
|
color: #222222; |
|
|
|
color: #aa2222; |
|
|
|
font-size: 1.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
h2 { |
|
|
|
font-family: 'Lato black', sans-serif; |
|
|
|
font-size: 2.0rem; |
|
|
|
text-transform: uppercase; |
|
|
|
color: #dd2222; |
|
|
|
margin-top: 1vh; |
|
|
|
margin-bottom: 1vh; |
|
|
|
} |
|
|
|
|
|
|
|
p, li { |
|
|
|
font-family: 'Lato', sans-serif; |
|
|
|
letter-spacing: 0.05em; |
|
|
|
font-size: 1.4em; |
|
|
|
color: #333333; |
|
|
|
color: #aa2828; |
|
|
|
hyphens: auto; |
|
|
|
} |
|
|
|
|
|
|
|
img { |
|
|
|
width:100%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
a:link { |
|
|
|
color: #b2c778; |
|
|
|
color: grey; |
|
|
|
} |
|
|
|
|
|
|
|
a:visited { |
|
|
|
color: #b2c778; |
|
|
|
color: grey; |
|
|
|
} |
|
|
|
|
|
|
|
a:hover { |
|
|
|
color: silver; |
|
|
|
color: aliceblue; |
|
|
|
} |
|
|
|
|
|
|
|
a:active { |
|
|
|
color: #b2c778; |
|
|
|
} |
|
|
|
|
|
|
|
.card { |
|
|
|
width: 100%; |
|
|
|
background-color: #f4f4f4; |
|
|
|
border: 0px solid #dee2e6!important; |
|
|
|
color: grey; |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
margin-left: 0; |
|
|
|
margin-right: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.col-12 { |
|
|
|
padding-left:3vw; |
|
|
|
padding-right:3vw; |
|
|
|
padding-left: 3vw; |
|
|
|
padding-right: 3vw; |
|
|
|
} |
|
|
|
|
|
|
|
.fas, .fab { |
|
|
|
color: white; |
|
|
|
color: #aa2828; |
|
|
|
font-size: 2em; |
|
|
|
} |
|
|
|
|
|
|
|
.section, .cardcontainer { |
|
|
|
margin-bottom: 5vh; |
|
|
|
border-top: 1px solid #dee2e6!important; |
|
|
|
a, u { |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
|
|
|
|
.logo { |
|
|
|
margin-left: auto; |
|
|
|
margin-right: auto; |
|
|
|
padding-bottom: 2vh; |
|
|
|
width: 40%; |
|
|
|
display:block; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</head> |
|
|
|
|
|
|
|
@ -191,21 +216,24 @@ |
|
|
|
<canvas id="hecksshader"></canvas> |
|
|
|
|
|
|
|
<div class="container"> |
|
|
|
<div class="row"> |
|
|
|
<div class="img"> |
|
|
|
<img src="images/Sub_Factory_2025.webp" alt="Subfactory Banner"> |
|
|
|
<div class="cardcontainer pt-2"> |
|
|
|
<div class="card"> |
|
|
|
<div class="img flyer"> |
|
|
|
<img src="resources/Sub_Factory_2025.webp" alt="Subfactory Banner"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="cardcontainer pt-2"> |
|
|
|
<h2 class="text-center">Präsentiert von</h2> |
|
|
|
<div class="card-group"> |
|
|
|
|
|
|
|
<div class="card-group pt-2"> |
|
|
|
<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"> |
|
|
|
<img class="logo" src="resources/eulachbass_logo_white.webp" alt="Eulachbass Logo"> |
|
|
|
<a href="https://eulachbass.ch/" target="_blank" class="card-link"> |
|
|
|
<i class="fas fa-globe mr-2"></i> |
|
|
|
</a> |
|
|
|
@ -226,7 +254,7 @@ |
|
|
|
<div class="fix_height"> |
|
|
|
<h5 class="card-title">Sector B</h5> |
|
|
|
</div> |
|
|
|
<img class="logo" src="images/sectorb_logo.svg" alt="Eulachbass Logo"> |
|
|
|
<img class="logo" src="resources/sectorb_logo_white.webp" alt="Sector B Logo"> |
|
|
|
<a href="https://www.instagram.com/sectorbevents/" target="_blank" class="card-link"> |
|
|
|
<i class="fab fa-instagram mr-2"></i> |
|
|
|
</a> |
|
|
|
@ -241,7 +269,7 @@ |
|
|
|
<div class="fix_height"> |
|
|
|
<h5 class="card-title">Subsanity Soundystem</h5> |
|
|
|
</div> |
|
|
|
<img class="logo" src="images/subsanity_logo.webp" alt="Eulachbass Logo"> |
|
|
|
<img class="logo" src="resources/subsanity_logo.webp" alt="Subsanity Logo"> |
|
|
|
<a href="https://www.instagram.com/subsanitysoundsystem" target="_blank" class="card-link"> |
|
|
|
<i class="fab fa-instagram mr-2"></i> |
|
|
|
</a> |
|
|
|
@ -256,83 +284,101 @@ |
|
|
|
</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 class="cardcontainer pt-2"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-body 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> |
|
|
|
</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 class="cardcontainer pt-2"> |
|
|
|
<div class="card "> |
|
|
|
<div class="card-body col-12 section"> |
|
|
|
<h2 class="text-center ">Zahlungsmöglichkeiten</h2> |
|
|
|
<p> |
|
|
|
Bei uns kann mit Bargeld oder Twint bezahlt werden. |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</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 class="cardcontainer pt-2"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-body 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.723748028278353%2C47.50513122763665%2C8.727449476718904%2C47.507049991528696&layer=mapnik&marker=47.506090618350065%2C8.725598752498627" |
|
|
|
style="border: 1px solid black"></iframe> |
|
|
|
<br/><small><a |
|
|
|
href="https://www.openstreetmap.org/?mlat=47.506091&mlon=8.725599#map=19/47.506091/8.725599">View |
|
|
|
Larger Map</a></small> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</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 class="cardcontainer pt-2"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-body 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> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- Partner --> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-12 section"> |
|
|
|
<h2 class="text-center ">Partner</h2> |
|
|
|
<div class="cardcontainer pt-2"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-body 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> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<script> |
|
|
|
document.getElementById("focus").focus(); |
|
|
|
document.getElementById("focus").focus(); |
|
|
|
</script> |
|
|
|
|
|
|
|
<script type="module"> |
|
|
|
@ -350,7 +396,7 @@ document.getElementById("focus").focus(); |
|
|
|
scene = new THREE.Scene(); |
|
|
|
const geometry = new THREE.PlaneGeometry( 2, 2 ); |
|
|
|
const loader = new THREE.TextureLoader(); |
|
|
|
const texture = loader.load('./images/noise.png'); |
|
|
|
const texture = loader.load('./resources/noise.png'); |
|
|
|
texture.wrapS = THREE.RepeatWrapping; |
|
|
|
texture.wrapT = THREE.RepeatWrapping; |
|
|
|
|
|
|
|
|
heck
