asd

2026-02-12 14:08:42 +01:00
parent 17002ad833
commit a8caee15f9
3 changed files with 102 additions and 1 deletions
--- a/WebSite/style/design.css
+++ b/WebSite/style/design.css
@@ -1,3 +1,48 @@
+/* Sound Visualization Animation */
+.sound-visualization {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    height: 100px;
+    margin-top: 80px;
+    margin-bottom: 30px;
+    opacity: 1;
+    transition: opacity 0.3s ease;
+}
+
+.sound-visualization.active {
+    opacity: 1;
+}
+
+.sound-bar {
+    width: 10px;
+    background: linear-gradient(to top, var(--accent-orange), var(--accent-teal));
+    border-radius: 5px;
+    animation: soundWave 1.2s ease-in-out infinite;
+    transform-origin: bottom;
+}
+
+.sound-bar:nth-child(1) { animation-delay: 0s; height: 25px; }
+.sound-bar:nth-child(2) { animation-delay: 0.1s; height: 40px; }
+.sound-bar:nth-child(3) { animation-delay: 0.2s; height: 32px; }
+.sound-bar:nth-child(4) { animation-delay: 0.3s; height: 50px; }
+.sound-bar:nth-child(5) { animation-delay: 0.4s; height: 40px; }
+.sound-bar:nth-child(6) { animation-delay: 0.5s; height: 28px; }
+.sound-bar:nth-child(7) { animation-delay: 0.6s; height: 45px; }
+.sound-bar:nth-child(8) { animation-delay: 0.7s; height: 35px; }
+
+@keyframes soundWave {
+    0%, 100% {
+        transform: scaleY(0.3);
+        opacity: 0.7;
+    }
+    50% {
+        transform: scaleY(1);
+        opacity: 1;
+    }
+}
+
 :root {
    --primary-dark: #5a5252;
    --primary-light: #EBEBDE;