snaz++

datalab-industries · Sep 18, 2024 · 3fd6620 · 3fd6620
1 parent dbea6ee
commit 3fd6620
Showing 1 changed file with 129 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -10,6 +10,124 @@
 <style>
     @import url('https://cdnjs.cloudflare.com/ajax/libs/Iosevka/6.0.1/iosevka/iosevka.min.css');
 
+    :root {
+        --color-bg: #0a0a1a;
+        --color-indigo: rgba(75, 0, 130, 0.6);
+        --color-navy: rgba(0, 0, 128, 0.6);
+        --color-midnight-blue: rgba(25, 25, 112, 0.6);
+        --color-slate-blue: rgba(72, 61, 139, 0.6);
+        --color-medium-slate-blue: rgba(106, 90, 205, 0.6);
+        --color-blue-violet: #310E50;
+        --color-dodger-blue: #13487D;
+        --color-royal-blue: #4C3175;
+        --color-medium-purple: #554C86;
+        --color-dark-blue: rgba(0, 0, 139, 0.4);
+        --color-medium-orchid: #4B2E86;
+        --color-text: #e6e6fa;
+    }
+
+    .background {
+        position: fixed;
+        top: -50%;
+        left: -50%;
+        width: 200%;
+        height: 200%;
+        animation: backgroundShift 40s ease-in-out infinite alternate;
+        z-index: 1;
+    }
+
+    .background::before,
+    .background::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-image:
+            radial-gradient(circle at 10% 10%, var(--color-indigo) 0%, transparent 30%),
+            radial-gradient(circle at 90% 20%, var(--color-midnight-blue) 0%, transparent 30%),
+            radial-gradient(circle at 30% 40%, var(--color-navy) 0%, transparent 30%),
+            radial-gradient(circle at 70% 60%, var(--color-slate-blue) 0%, transparent 30%),
+            radial-gradient(circle at 50% 50%, var(--color-medium-slate-blue) 0%, transparent 30%),
+            radial-gradient(circle at 20% 80%, var(--color-blue-violet) 0%, transparent 30%),
+            radial-gradient(circle at 80% 90%, var(--color-dodger-blue) 0%, transparent 30%),
+            radial-gradient(circle at 40% 70%, var(--color-royal-blue) 0%, transparent 30%);
+        background-size: 200% 200%;
+        background-position: 0 0;
+        mix-blend-mode: screen;
+        opacity: 0.7;
+    }
+
+    .background::before {
+        filter: blur(30px);
+        animation: gradientShift1 25s ease-in-out infinite alternate;
+    }
+
+    .background::after {
+        filter: blur(40px);
+        animation: gradientShift2 35s ease-in-out infinite alternate;
+    }
+
+    .overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-image:
+            radial-gradient(circle at 60% 30%, var(--color-medium-purple) 0%, transparent 40%),
+            radial-gradient(circle at 20% 50%, var(--color-dark-blue) 0%, transparent 40%),
+            radial-gradient(circle at 80% 70%, var(--color-medium-orchid) 0%, transparent 40%);
+        background-size: 200% 200%;
+        mix-blend-mode: soft-light;
+        animation: gradientShift3 30s ease-in-out infinite alternate;
+    }
+
+    @keyframes backgroundShift {
+        0% {
+            transform: translateX(-5%) translateY(-5%) rotate(-3deg);
+        }
+
+        100% {
+            transform: translateX(5%) translateY(5%) rotate(3deg);
+        }
+    }
+
+    @keyframes gradientShift1 {
+        0% {
+            background-position: 0% 0%;
+        }
+
+        100% {
+            background-position: 100% 100%;
+        }
+    }
+
+    @keyframes gradientShift2 {
+        0% {
+            background-position: 100% 0%;
+        }
+
+        100% {
+            background-position: 0% 100%;
+        }
+    }
+
+    @keyframes gradientShift3 {
+        0% {
+            background-position: 50% 50%;
+        }
+
+        50% {
+            background-position: 100% 0%;
+        }
+
+        100% {
+            background-position: 0% 100%;
+        }
+    }
+
     body {
         margin: 10px;
         margin-left: 2rem;
@@ -19,11 +137,13 @@
     }
 
     .container {
+        position: relative;
         width: 50%;
         max-width: 600px;
         padding: 20px;
         margin-left: auto;
         margin-right: auto;
+        z-index: 2;
     }
 
     .logo {
@@ -34,18 +154,18 @@
 
     pre,
     body,
-    footer {
+    .my-footer {
         font-family: Iosevka Web, monospace;
     }
 
-    footer {
+    .my-footer {
         width: 100%;
         margin-top: 3rem;
         font-size: 0.8rem;
         color: dark grey;
     }
 
-    footer>p {
+    .my-footer>p {
         margin: 0;
         margin-left: auto;
         margin-right: auto;
@@ -98,6 +218,8 @@
 
 <body>
 
+    <div class="background"></div>
+    <div class="overlay"></div>
     <div class="container">
 
         <div class="logo">
@@ -114,12 +236,12 @@
             <li> Research: <a href="https://ml-evs.science">https://ml-evs.science</a>
         </ul>
 
-        <footer>
+        <div class="my-footer">
             <p>© 2024 datalab industries ltd.</p>
             <p>Company number: 15704476</p>
             <p>Cobwebs, Setch Road, Blackborough End</p>
             <p>King's Lynn, Norfolk, PE32 1SL, UK</p>
-        </footer>
+        </div>
 
     </div>
 
@@ -130,13 +252,13 @@
                 './img/blotting.svg',
                 './img/button.svg',
                 './img/fat-oil.svg',
-                './img/felt.svg',
+                // './img/felt.svg',
                 './img/glass.svg',
                 './img/glossy.svg',
                 './img/glowing-metal.svg',
                 './img/glow.svg',
                 './img/gouache.svg',
-                './img/metalised.svg',
+                //'./img/metalised.svg',
                 './img/metal.svg',
                 './img/neon.svg',
                 './img/pearl.svg',