Lili Records V1.0.0

core/templates/core/index.html

@@ -26,6 +26,14 @@
                         <p class="text-secondary mb-0" id="current-track-info">Virtual Broadcast</p>
                     </div>
                 </div>
+
+                <!-- Visualizer Waves -->
+                <div class="visualizer-container my-4 d-flex align-items-end justify-content-center gap-1" id="visualizer">
+                    <div class="v-bar"></div><div class="v-bar"></div><div class="v-bar"></div><div class="v-bar"></div><div class="v-bar"></div>
+                    <div class="v-bar"></div><div class="v-bar"></div><div class="v-bar"></div><div class="v-bar"></div><div class="v-bar"></div>
+                    <div class="v-bar"></div><div class="v-bar"></div><div class="v-bar"></div><div class="v-bar"></div><div class="v-bar"></div>
+                    <div class="v-bar"></div><div class="v-bar"></div><div class="v-bar"></div><div class="v-bar"></div><div class="v-bar"></div>
+                </div>
                 
                 <div class="audio-controls mb-4 p-3 rounded-3 bg-dark bg-opacity-50 border border-secondary">
                     <audio id="audio-player"></audio>
@@ -123,6 +131,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const vinyl = document.getElementById('vinyl');
     const vinylLabel = document.getElementById('vinyl-label');
     const tonearm = document.getElementById('tonearm');
+    const visualizer = document.getElementById('visualizer');
     const stationItems = document.querySelectorAll('.station-item');
     const stationNameDisplay = document.getElementById('current-station-name');
     const volumeControl = document.getElementById('volume-control');
@@ -136,6 +145,7 @@ document.addEventListener('DOMContentLoaded', function() {
             playBtn.innerHTML = '<i class="fas fa-play fs-4"></i>';
             vinyl.classList.remove('spinning');
             tonearm.classList.remove('active');
+            visualizer.classList.remove('playing');
         } else {
             if (audio.src && audio.src !== window.location.href) {
                 audio.play().catch(e => {
@@ -145,6 +155,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 playBtn.innerHTML = '<i class="fas fa-pause fs-4"></i>';
                 vinyl.classList.add('spinning');
                 tonearm.classList.add('active');
+                visualizer.classList.add('playing');
             } else {
                 alert('Please select a station first!');
                 return;

static/css/custom.css

@@ -177,6 +177,59 @@ body {
     text-shadow: 0 0 10px rgba(37, 211, 102, 0.5);
 }
 
+/* Visualizer Waves */
+.visualizer-container {
+    height: 60px;
+    width: 100%;
+}
+
+.v-bar {
+    width: 6px;
+    height: 4px;
+    background: linear-gradient(to top, var(--secondary-neon), var(--primary-neon));
+    border-radius: 3px;
+    opacity: 0.5;
+    transition: all 0.3s ease;
+}
+
+.visualizer-container.playing .v-bar {
+    opacity: 1;
+    animation: wave 1.2s ease-in-out infinite;
+}
+
+.v-bar:nth-child(1) { animation-delay: 0.0s; }
+.v-bar:nth-child(2) { animation-delay: 0.1s; }
+.v-bar:nth-child(3) { animation-delay: 0.2s; }
+.v-bar:nth-child(4) { animation-delay: 0.3s; }
+.v-bar:nth-child(5) { animation-delay: 0.4s; }
+.v-bar:nth-child(6) { animation-delay: 0.5s; }
+.v-bar:nth-child(7) { animation-delay: 0.6s; }
+.v-bar:nth-child(8) { animation-delay: 0.7s; }
+.v-bar:nth-child(9) { animation-delay: 0.8s; }
+.v-bar:nth-child(10) { animation-delay: 0.9s; }
+.v-bar:nth-child(11) { animation-delay: 0.1s; }
+.v-bar:nth-child(12) { animation-delay: 0.2s; }
+.v-bar:nth-child(13) { animation-delay: 0.3s; }
+.v-bar:nth-child(14) { animation-delay: 0.4s; }
+.v-bar:nth-child(15) { animation-delay: 0.5s; }
+.v-bar:nth-child(16) { animation-delay: 0.6s; }
+.v-bar:nth-child(17) { animation-delay: 0.7s; }
+.v-bar:nth-child(18) { animation-delay: 0.8s; }
+.v-bar:nth-child(19) { animation-delay: 0.9s; }
+.v-bar:nth-child(20) { animation-delay: 0.0s; }
+
+@keyframes wave {
+    0%, 100% { 
+        height: 4px; 
+        filter: brightness(1);
+    }
+    50% { 
+        height: 50px; 
+        filter: brightness(1.5);
+        box-shadow: 0 0 15px var(--primary-neon);
+    }
+}
+
 /* Responsive adjustments */
 @media (max-width: 992px) {
     .player-container {

staticfiles/css/custom.css

@@ -177,6 +177,59 @@ body {
     text-shadow: 0 0 10px rgba(37, 211, 102, 0.5);
 }
 
+/* Visualizer Waves */
+.visualizer-container {
+    height: 60px;
+    width: 100%;
+}
+
+.v-bar {
+    width: 6px;
+    height: 4px;
+    background: linear-gradient(to top, var(--secondary-neon), var(--primary-neon));
+    border-radius: 3px;
+    opacity: 0.5;
+    transition: all 0.3s ease;
+}
+
+.visualizer-container.playing .v-bar {
+    opacity: 1;
+    animation: wave 1.2s ease-in-out infinite;
+}
+
+.v-bar:nth-child(1) { animation-delay: 0.0s; }
+.v-bar:nth-child(2) { animation-delay: 0.1s; }
+.v-bar:nth-child(3) { animation-delay: 0.2s; }
+.v-bar:nth-child(4) { animation-delay: 0.3s; }
+.v-bar:nth-child(5) { animation-delay: 0.4s; }
+.v-bar:nth-child(6) { animation-delay: 0.5s; }
+.v-bar:nth-child(7) { animation-delay: 0.6s; }
+.v-bar:nth-child(8) { animation-delay: 0.7s; }
+.v-bar:nth-child(9) { animation-delay: 0.8s; }
+.v-bar:nth-child(10) { animation-delay: 0.9s; }
+.v-bar:nth-child(11) { animation-delay: 0.1s; }
+.v-bar:nth-child(12) { animation-delay: 0.2s; }
+.v-bar:nth-child(13) { animation-delay: 0.3s; }
+.v-bar:nth-child(14) { animation-delay: 0.4s; }
+.v-bar:nth-child(15) { animation-delay: 0.5s; }
+.v-bar:nth-child(16) { animation-delay: 0.6s; }
+.v-bar:nth-child(17) { animation-delay: 0.7s; }
+.v-bar:nth-child(18) { animation-delay: 0.8s; }
+.v-bar:nth-child(19) { animation-delay: 0.9s; }
+.v-bar:nth-child(20) { animation-delay: 0.0s; }
+
+@keyframes wave {
+    0%, 100% { 
+        height: 4px; 
+        filter: brightness(1);
+    }
+    50% { 
+        height: 50px; 
+        filter: brightness(1.5);
+        box-shadow: 0 0 15px var(--primary-neon);
+    }
+}
+
 /* Responsive adjustments */
 @media (max-width: 992px) {
     .player-container {