subfactory
/
subfactory.ch
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

init 'index_new.html' from 'index18.html'

main
heck 3 weeks ago
parent
cfbc8983ad
commit
58ee8760d4
1 changed files with 446 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 446
      html/wip/index_new.html

446
html/wip/index_new.html
View File

@ -0,0 +1,446 @@
<!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="./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">
<!-- 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 = 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(18./time2/val,0.,0.,1.0);
}
void main() {
mainImage(gl_FragColor, gl_FragCoord.xy);
}
</script>
<style>
body {
background-color: black;
opacity: 0.9;
}
#hecksshader {
width: 100%;
height: 100%;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -999;
opacity: 0.24999;
}
.container {
background-color: #080808;
width: 100%;
border-left: 0px none #dee2e6 !important;
border-right: 0px none #dee2e6 !important;
margin-right: auto;
margin-left: auto;
padding: 0;
opacity: 0.96;
}
.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: #0c0c0c;
border: 0px solid #dee2e6 !important;
opacity: 0.9999;
}
.card-body {
border-style: solid;
border-top: 1px solid #dee2e6 !important;
border-bottom: 1px none #dee2e6 !important;
border-left: 0;
border-right: 0;
opacity: 0.5;
}
.logo {
margin-left: auto;
margin-right: auto;
padding-bottom: 0vh;
width: 50%;
display: block;
}
.card-title {
font-family: 'Lato black', sans-serif;
color: #aa2222;
font-size: 1.5rem;
}
h2 {
font-family: 'Lato black', sans-serif;
font-size: 2.0rem;
text-transform: uppercase;
color: #aa2222;
margin-top: 1vh;
margin-bottom: 1vh;
}
p, li {
font-family: 'Lato', sans-serif;
letter-spacing: 0.05em;
font-size: 1.4em;
color: #aa2828;
hyphens: auto;
}
img {
width: 100%;
}
a:link {
color: lightblue;
}
a:visited {
color: aliceblue;
}
a:hover {
color: silver;
}
a:active {
color: lightblue;
}
.row {
margin-left: 0;
margin-right: 0;
}
.col-12 {
padding-left: 3vw;
padding-right: 3vw;
}
.fas, .fab {
color: #aa2828;
font-size: 2em;
}
</style>
</head>
<body>
<canvas id="hecksshader"></canvas>
<div class="container">
<div class="cardcontainer pt-2">
<div class="card">
<div class="img">
<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 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="resources/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="resources/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="resources/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="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="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="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&amp;layer=mapnik&amp;marker=47.506090618350065%2C8.725598752498627"
style="border: 1px solid black"></iframe>
<br/><small><a
href="https://www.openstreetmap.org/?mlat=47.506091&amp;mlon=8.725599#map=19/47.506091/8.725599">View
Larger Map</a></small>
</p>
</div>
</div>
</div>
<!-- Rave Etiquette -->
<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="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>
</div>
</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('./resources/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>
Write Preview
Loading…
Cancel
Save