@@ -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 = '
';
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 = '
';
vinyl.classList.add('spinning');
tonearm.classList.add('active');
+ visualizer.classList.add('playing');
} else {
alert('Please select a station first!');
return;
diff --git a/static/css/custom.css b/static/css/custom.css
index 4a0fd24..726cf00 100644
--- a/static/css/custom.css
+++ b/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 {
diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css
index 4a0fd24..726cf00 100644
--- a/staticfiles/css/custom.css
+++ b/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 {