From 241f0ccb072e3b05c063fa3f34b03b2dcf1e62b8 Mon Sep 17 00:00:00 2001
From: heck <heck@heck.live>
Date: Fri, 13 Jun 2025 23:43:52 +0200
Subject: [PATCH] design, design...

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

diff --git a/html/index.html b/html/index.html
index 0478c18..c8bda7e 100644
--- a/html/index.html
+++ b/html/index.html
@@ -82,7 +82,7 @@
 
     <style>
         body {
-            background-color: #121212;
+            background-color: #000000;
             opacity: 0.98;
         }
 
@@ -98,7 +98,7 @@
         }
 
         .aliasingdiv {
-            background-color: #040404;
+            background-color: #040000;
             width: 100%;
             height: 100%;
             display: block;
@@ -106,11 +106,11 @@
             top: 0;
             left: 0;
             z-index: -899;
-            opacity: 0.73;
+            opacity: 0.75;
         }
 
-        .masteringdiv {
-            background-color: #ff88ff;
+        .toningdiv {
+            background-color: #0000ff;
             width: 100%;
             height: 100%;
             display: block;
@@ -118,23 +118,45 @@
             top: 0;
             left: 0;
             z-index: 899;
+            opacity: 0.0;
+        }
+
+        .brightnessdiv {
+            background-color: #ffffff;
+            width: 100%;
+            height: 100%;
+            display: block;
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 999;
             opacity: 0.05;
         }
 
 
         .container {
-            background-color: #090909;
-            width: 59%;
+            background-color: transparent;
+            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;
+            opacity: 1.0;
         }
 
-        .section, .cardcontainer {
+        .cardcontainer {
             background-color: transparent;
+            width: 100%;
+            margin-top: 0vh;
+            margin-bottom: 4vh;
+            border-top: 0px none #ffffff !important;
+            opacity: 0.999;
+        }
+
+        .section {
+            background-color: transparent;
+            width: 100%;
             margin-top: 0vh;
             margin-bottom: 0vh;
             border-top: 0px none #ffffff !important;
@@ -142,25 +164,28 @@
         }
 
         .card {
+            background-color: transparent;
             width: 100%;
-            margin-top: 1vh;
-            margin-bottom: 1vh;
-            background-color: #101010;
+            margin-top: 0vh;
+            margin-bottom: 0vh;
             border: 0px solid #dee2e6 !important;
             opacity: 0.9999;
         }
 
         .card-body {
+            background-color: #030306;
+            margin-top: 0vh;
+            margin-bottom: 0vh;
             border-style: solid;
-            border-top: 1px solid #252525 !important;
-            border-bottom: 1px none #dee2e6 !important;
+            border-top: 1px solid #202020 !important;
+            border-bottom: 1px solid #202020 !important;
             border-left: 0;
             border-right: 0;
-            opacity: 0.999;
+            opacity: 0.8;
         }
 
         .flyer {
-            opacity: 0.97;
+            opacity: 0.8;
         }
 
         .logo {
@@ -178,32 +203,51 @@
         }
 
         .osmmap {
-            opacity: 0.68;
+            opacity: 0.5;
         }
 
-        h2 {
+        .presentedby {
             font-family: 'Lato black', sans-serif;
-            font-size: 1.32rem;
+            font-size: 1.42rem;
             letter-spacing: 0.14em;
             text-transform: uppercase;
             color: #9f1414;
-            margin-top: 3vh;
+            margin-top: 2vh;
             margin-bottom: 2vh;
         }
 
+        h2 {
+            font-family: 'Lato black', sans-serif;
+            font-size: 1.42rem;
+            letter-spacing: 0.14em;
+            text-transform: uppercase;
+            color: #901010;
+            margin-top: 1vh;
+            margin-bottom: 0vh;
+        }
+
         h5 {
             text-transform: uppercase;
             font-size: 0.1rem;
             color: #c00606;
         }
 
+        p {
+            font-family: 'trench', sans-serif;
+            letter-spacing: 0.06em;
+            font-size: 1.21em;
+            color: #c20606;
+            hyphens: none;
+            margin-top: 0.5em;
+            margin-bottom: 0.5em;
+        }
 
-        p, li {
-            font-family: 'Lato', sans-serif;
-            /*letter-spacing: x0.15em;*/
-            font-size: 1.13em;
+        li {
+            font-family: 'trench', sans-serif;
+            letter-spacing: 0.06em;
+            text-transform: capitalize;
+            font-size: 1.23em;
             color: #c20606;
-            hyphens: auto;
         }
 
         img {
@@ -251,18 +295,20 @@
 </head>
 
 <body>
-<div class="masteringdiv"></div>
+<div class="brightnessdiv"></div>
+<div class="toningdiv"></div>
 <canvas id="hecksshader"></canvas>
 <div class="aliasingdiv"></div>
+
 <div class="container">
 <br>
-
     <div class="img flyer">
         <img src="resources/Sub_Factory_2025.webp" alt="Subfactory Banner">
     </div>
 
+
     <div class="cardcontainer pt-2">
-        <h2 class="text-center">Präsentiert von</h2>
+        <h2 class="text-center presentedby">Präsentiert von</h2>
 
         <div class="card-group pt-2">
             <div class="card shadow-none">
@@ -316,6 +362,8 @@
                     <a href="https://soundcloud.com/user-937924022" target="_blank" class="card-link">
                         <i class="fab fa-soundcloud mr-2"></i>
                     </a>
+                    <br>
+                    <br>
                 </div>
             </div>
         </div>
@@ -339,18 +387,6 @@
         </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">
@@ -369,6 +405,18 @@
         </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>
+
     <!-- Rave Etiquette -->
     <div class="cardcontainer pt-2">
         <div class="card">
@@ -381,7 +429,7 @@
                     <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>Füreinander da</li>
+                    <li>Für einander da</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
@@ -408,18 +456,12 @@
             <div class="card-body col-12 section">
                 <h2 class="text-center ">Partner</h2>
                 <p class="text-center">
-                <a href="https://www.gleiserei.ch/" target="_blank">Gleiserei</a><br>
-                <a href="https://www.hakogetraenke.ch/" target="_blank">Hako Getränke</a>
+                    <a href="https://www.gleiserei.ch/" target="_blank">Gleiserei</a><br>
+                    <a href="https://www.hakogetraenke.ch/" target="_blank">Hako Getränke</a>
                 </p>
             </div>
         </div>
     </div>
-
-    <div class="cardcontainer pt-2">
-            <div class="card-body col-12 section">
-            </div>
-    </div>
-
 </div>
 <!--<script>-->
 <!--    document.getElementById("focus").focus();-->