From d271e35a256ceda5cbac1655b4851d6ae6abbb8c Mon Sep 17 00:00:00 2001
From: heck <heck@pep.foundation>
Date: Tue, 23 May 2023 01:13:06 +0200
Subject: [PATCH] cleanup index.html

---
 html/index.html | 144 ++++++++++++++++++------------------------------
 1 file changed, 53 insertions(+), 91 deletions(-)

diff --git a/html/index.html b/html/index.html
index 45f80a5..8ab0dbe 100644
--- a/html/index.html
+++ b/html/index.html
@@ -4,14 +4,12 @@
     <title>Sub Factory</title>
     <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">
 
-    <link rel="icon" type="image/png" href="./images/favicon.png">
-
 
     <!--    Shaders -->
     <script id="vertexShader" type="x-shader/x-vertex">
@@ -28,13 +26,11 @@
         #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;
@@ -47,15 +43,15 @@
             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;
         }
@@ -65,7 +61,6 @@
             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.));
@@ -93,51 +88,6 @@
             opacity: 0.15;
         }
 
-        .shadercontainer {
-            position: relative;
-        }
-
-        .shadertitle {
-            position: absolute;
-            display: block;
-            padding: 10rem 0;
-
-            margin-left: auto;
-            margin-right: auto;
-            width: 75%;
-            opacity: 0.98;
-            z-index: -1;
-        }
-
-        .hidden_desktop{
-            visibility: visible;
-            display: block;
-        }
-        .hidden_mobile {
-            visibility: hidden;
-            display: none;
-        }
-
-        @media (min-width: 1000px) {
-          .hidden_desktop{
-              visibility: hidden;
-              display: none;
-          }
-          .hidden_mobile {
-              visibility: visible;
-              display: block;
-          }
-        }
-
-        #shadersoundsystem {
-            left: 0px;
-            top: 0px;
-            z-index: -50;
-            width: 100%;
-            opacity: 0.01;
-        }
-
-
         h2 {
             font-family: 'Lato black', sans-serif;
             font-size: 2.0rem;
@@ -184,6 +134,7 @@
         .card {
             width: 100%;
             background-color: #5fa873;
+            border: 0px solid #dee2e6!important;
         }
 
         .card-body {
@@ -214,10 +165,6 @@
             padding-right:3vw;
         }
 
-        .card {
-            border: 0px solid #dee2e6!important;
-        }
-
         .fas, .fab {
             color: white;
             font-size: 2em;
@@ -260,13 +207,18 @@
                         <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>
+                    <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>
 
@@ -276,10 +228,12 @@
                         <h5 class="card-title">Sector B</h5>
                     </div>
                     <img class="logo" src="images/sectorb_logo.webp" 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>
+                    <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>
 
@@ -289,14 +243,16 @@
                         <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>
+                    <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>
@@ -364,8 +320,20 @@
                 Verfügung.
             </p>
 
-            <iframe style="border: 1px solid black" width="100%" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=8.732620775699617%2C47.49334170186654%2C8.736456334590914%2C47.49489482337585&amp;layer=mapnik&amp;marker=47.49411917450164%2C8.734538555145264"></iframe>
-            <br/><small><a href="https://www.openstreetmap.org/?mlat=47.49412&amp;mlon=8.73454#map=19/47.49412/8.73454">View Larger Map</a></small>
+            <iframe
+                    width="100%"
+                    height="350"
+                    frameborder="0"
+                    scrolling="no"
+                    marginheight="0"
+                    marginwidth="0"
+                    src="https://facilmap.org/mymap#q=w315995935%20to%2047.49364%2C8.7348%20by%20pedestrian%20details"
+                    style="border: 1px solid black">
+            </iframe>
+            <br/>
+            <small><a href="https://www.openstreetmap.org/#map=19/47.49401/8.73429" target="_blank">View Larger Map</a></small>
+<!--            <iframe style="border: 1px solid black" width="100%" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=8.732620775699617%2C47.49334170186654%2C8.736456334590914%2C47.49489482337585&amp;layer=mapnik&amp;marker=47.49411917450164%2C8.734538555145264"></iframe>-->
+<!--            <br/><small><a href="https://www.openstreetmap.org/?mlat=47.49412&amp;mlon=8.73454#map=19/47.49412/8.73454">View Larger Map</a></small>-->
         </div>
     </div>
 
@@ -417,14 +385,11 @@
         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) },
@@ -440,10 +405,8 @@
 
         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);
     }
 
@@ -466,7 +429,7 @@
     function render() {
         requestAnimationFrame( render );
 
-        if ( rendererNeedsResize(renderer)) {
+        if (rendererNeedsResize(renderer)) {
             const canvas = renderer.domElement;
             renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
             camera.aspect = canvas.clientWidth / canvas.clientHeight;
@@ -475,7 +438,6 @@
         }
 
         uniforms[ 'iTime' ].value = performance.now();
-
         renderer.render( scene, camera );
     }
 </script>