ui/ux fixes

static/css/style.css

@@ -1,990 +1,843 @@
 :root {
     --primary-color: #4CAF50;
     --primary-hover: #45a049;
+    --primary-active: #3d8b40;
+    --accent-color: #FF4081;
+    --accent-hover: #f50057;
     --bg-color: #0a0a0a;
     --surface-color: rgba(15, 23, 42, 0.8);
+    --surface-light: rgba(255, 255, 255, 0.1);
     --text-primary: #ffffff;
     --text-secondary: rgba(255, 255, 255, 0.7);
     --error-color: #ff4444;
+    --success-color: #00C853;
+    --warning-color: #FFA000;
+    
+    /* Animation durations */
+    --transition-fast: 0.15s;
+    --transition-normal: 0.25s;
+    --transition-slow: 0.35s;
+    
+    /* Shadows */
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
+    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
+    
+    /* Border radius */
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
 }
 
 /* Light theme variables */
 [data-theme="light"] {
     --bg-color: #f5f5f5;
     --surface-color: rgba(255, 255, 255, 0.9);
+    --surface-light: rgba(0, 0, 0, 0.1);
     --text-primary: #1a1a1a;
     --text-secondary: rgba(0, 0, 0, 0.7);
 }
 
-.app-header {
+/* Loading screen */
+.loading-screen {
     position: fixed;
     top: 0;
     left: 0;
-    right: 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.75rem 1.5rem;
-    background: var(--surface-color);
-    backdrop-filter: blur(12px);
-    z-index: 100;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.logo {
+    width: 100%;
+    height: 100%;
+    background: var(--bg-color);
     display: flex;
+    justify-content: center;
     align-items: center;
-    gap: 0.5rem;
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--primary-color);
+    z-index: 1000;
+    opacity: 1;
+    transition: opacity var(--transition-normal);
 }
 
-.controls-container {
-    position: fixed;
-    bottom: 2rem;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 90%;
-    max-width: 800px;
-    z-index: 100;
-    background: var(--surface-color);
-    backdrop-filter: blur(12px);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-    padding: 1.5rem;
+.loading-screen.hidden {
+    opacity: 0;
+    pointer-events: none;
 }
 
-.upload-content {
+.loader {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1rem;
 }
 
-.upload-content i {
-    font-size: 3rem;
-    color: var(--primary-color);
-}
-
-.upload-text h3 {
-    margin: 0;
-    font-size: 1.2rem;
-    font-weight: 600;
-}
-
-.upload-text p {
-    margin: 0.5rem 0;
-    color: var(--text-secondary);
+.loader-circle {
+    width: 48px;
+    height: 48px;
+    border: 3px solid var(--surface-light);
+    border-top-color: var(--primary-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
 }
 
-.file-types {
-    font-size: 0.8rem;
+.loader-text {
     color: var(--text-secondary);
+    font-size: 0.9rem;
 }
 
-.error-toast {
+/* Header styles */
+.app-header {
     position: fixed;
-    top: 90px;
-    left: 50%;
-    transform: translateX(-50%) translateY(-150%);
-    background: rgba(255, 68, 68, 0.95);
-    color: white;
-    padding: 0.75rem 2rem;
-    border-radius: 8px;
-    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.2);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 1001;
-    text-align: center;
-    max-width: 90%;
-    pointer-events: none;
-    font-size: 0.9rem;
-    font-weight: 500;
-    backdrop-filter: blur(8px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    opacity: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.5rem;
+    background: var(--surface-color);
+    backdrop-filter: blur(12px);
+    z-index: 100;
+    box-shadow: var(--shadow-md);
+    border-bottom: 1px solid var(--surface-light);
 }
 
-.error-toast.visible {
-    transform: translateX(-50%) translateY(0);
-    opacity: 1;
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    transition: transform var(--transition-fast);
 }
 
-select {
-    padding: 8px 12px;
-    border-radius: 8px;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    color: white;
-    cursor: pointer;
-    font-size: 14px;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    padding-right: 30px;
-    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
-    background-repeat: no-repeat;
-    background-position: right 8px center;
-    background-size: 16px;
+.logo:hover {
+    transform: scale(1.05);
 }
 
-select:focus {
-    outline: none;
-    border-color: #4CAF50;
+/* Header controls */
+.header-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
-select option {
-    background-color: #1a1a1a;
-    color: white;
-    padding: 8px;
+.header-btn {
+    position: relative;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--surface-light);
+    color: var(--text-primary);
+    transition: all var(--transition-fast);
 }
 
-select::-ms-expand {
-    display: none;
+.header-btn:hover {
+    background: var(--surface-light);
+    transform: translateY(-2px);
 }
 
-input[type="range"] {
-    /* ... existing properties ... */
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;  /* Add standard property */
-    /* ... rest of properties ... */
+.header-btn.active {
+    background: var(--primary-color);
+    color: white;
 }
 
-.track-title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: 500;
+/* Tooltips */
+.tooltip {
+    position: absolute;
+    bottom: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--surface-color);
     color: var(--text-primary);
-    margin-bottom: 4px;
-}
-
-.track-duration {
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-    margin-left: 8px;
-}
-
-.track-metadata {
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-    overflow: hidden;
-    text-overflow: ellipsis;
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.8rem;
     white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transition: all var(--transition-fast);
+    box-shadow: var(--shadow-md);
 }
 
-.playlist-item {
-    padding: 8px 12px;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: background-color 0.2s;
-}
-
-.playlist-item:hover {
-    background: rgba(255, 255, 255, 0.1);
+.header-btn:hover .tooltip {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0);
 }
 
-.playlist-item.active {
-    background: rgba(76, 175, 80, 0.3);
+/* Main content area */
+.main-content {
+    position: fixed;
+    top: 80px;
+    right: -420px;
+    width: 400px;
+    max-height: calc(100vh - 180px);
+    z-index: 10;
+    transition: all var(--transition-normal);
+    padding: 1rem;
+    pointer-events: none;
 }
 
-.music-controls {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 16px;
-    margin-top: 12px;
+.main-content.visible {
+    right: 1rem;
+    pointer-events: all;
 }
 
-.control-btn {
-    background: transparent;
-    border: none;
-    color: white;
-    padding: 8px;
-    min-width: auto;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: all 0.2s ease;
+/* Upload area */
+.upload-area {
+    background: var(--surface-color);
+    border-radius: var(--radius-lg);
+    padding: 2rem;
+    text-align: center;
+    transition: all var(--transition-normal);
+    opacity: 0;
+    transform: translateY(-20px);
+    display: none;
 }
 
-.control-btn:hover {
-    background: rgba(255, 255, 255, 0.1);
-    transform: scale(1.1);
+.upload-area.visible {
+    opacity: 1;
+    transform: translateY(0);
+    display: block;
 }
 
-.control-btn:active {
-    transform: scale(0.95);
+.upload-area.dragover {
+    background: var(--surface-light);
+    border: 2px dashed var(--primary-color);
 }
 
-.play-pause-btn {
-    background: #4CAF50;
-    width: 40px;
-    height: 40px;
+.upload-content {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
-}
-
-.play-pause-btn:hover {
-    background: #45a049;
+    gap: 1.5rem;
 }
 
-.previous-btn,
-.next-btn {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.upload-content i {
+    font-size: 3rem;
+    color: var(--primary-color);
 }
 
-.control-btn i {
-    font-size: 1.2em;
+.upload-text h3 {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--text-primary);
 }
 
-.play-pause-btn i {
-    font-size: 1.4em;
+.upload-progress {
+    width: 100%;
+    display: none;
 }
 
-.control-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
+.upload-progress.visible {
+    display: block;
 }
 
-/* Update volume control styles */
-.volume-control {
+/* Progress bar container */
+.progress-container {
+    width: 100%;
+    margin: 1rem 0;
     position: relative;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-left: auto;
-    min-width: 120px;
 }
 
-.volume-btn {
-    background: transparent;
-    border: none;
-    padding: 8px;
-    min-width: auto;
-    color: var(--text-primary);
-}
-
-.volume-slider-container {
+/* Main progress bar */
+.progress-bar {
     position: relative;
-    width: 80px;
+    width: 100%;
     height: 4px;
-    background: rgba(255, 255, 255, 0.2);
+    background: var(--surface-light);
     border-radius: 2px;
+    cursor: pointer;
+    overflow: visible;
 }
 
-.volume-progress {
+/* Progress fill */
+.progress {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     background: var(--primary-color);
     border-radius: 2px;
+    transition: width 0.1s ease;
+}
+
+/* Progress handle */
+.progress-handle {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 12px;
+    height: 12px;
+    background: var(--primary-color);
+    border: 2px solid white;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: var(--shadow-sm);
     pointer-events: none;
-    width: 50%;
+    z-index: 2;
+    transition: transform 0.1s ease;
+}
+
+/* Progress handle hover effect */
+.progress-bar:hover .progress-handle {
+    transform: translate(-50%, -50%) scale(1.2);
 }
 
-#volume {
+/* Hide the default range input but keep it functional */
+.seek-slider {
     position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     cursor: pointer;
+    margin: 0;
+    z-index: 1;
 }
 
-/* Add tooltip styles */
-.tooltip {
-    position: fixed;
-    background: rgba(0, 0, 0, 0.8);
-    color: white;
-    padding: 0.5rem 1rem;
-    border-radius: 0.25rem;
-    font-size: 0.8rem;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.2s;
-    z-index: 1002;
+/* Active states for progress bar */
+.progress-bar:active .progress-handle,
+.progress-bar.dragging .progress-handle {
+    transform: translate(-50%, -50%) scale(1.3);
+    background: var(--primary-hover);
 }
 
-.tooltip.visible {
-    opacity: 1;
+/* Mobile optimization */
+@media (max-width: 768px) {
+    .progress-handle {
+        width: 16px;
+        height: 16px;
+    }
+    
+    .progress-bar {
+        height: 6px;
+    }
 }
 
+/* Playlist styles */
 .playlist-container {
     background: var(--surface-color);
-    border-radius: 1rem;
-    margin: 0;
-    max-height: 100%;
+    border-radius: var(--radius-lg);
     overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    opacity: 0;
+    transform: translateY(-20px);
+    display: none;
+    transition: all var(--transition-normal);
+}
+
+.playlist-container.visible {
+    opacity: 1;
+    transform: translateY(0);
+    display: block;
 }
 
 .playlist-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.playlist-header h3 {
-    margin: 0;
-    font-size: 1.2rem;
-    font-weight: 600;
-    color: var(--text-primary);
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--surface-light);
 }
 
-.tracks-list {
-    max-height: 300px;
-    overflow-y: auto;
-    padding: 0.5rem;
+.playlist-controls {
+    display: flex;
+    gap: 0.5rem;
 }
 
-.playlist-item {
-    padding: 0.75rem;
-    border-radius: 0.5rem;
+.playlist-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    color: var(--text-primary);
+    background: var(--surface-light);
+    border: 1px solid var(--surface-light);
+    transition: all var(--transition-fast);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.playlist-item:hover {
-    background: rgba(255, 255, 255, 0.1);
 }
 
-.playlist-item.active {
-    background: rgba(76, 175, 80, 0.2);
+.playlist-btn:hover {
+    background: var(--surface-light);
+    transform: translateY(-2px);
+    color: var(--primary-color);
 }
 
-.track-info {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-}
-
-.track-number {
-    color: var(--text-secondary);
-    min-width: 2rem;
-    text-align: right;
-}
-
-.track-content {
-    flex: 1;
-}
-
-.track-title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.25rem;
-}
-
-.track-duration {
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-}
-
-.track-metadata {
-    color: var(--text-secondary);
-    font-size: 0.9rem;
+.playlist-btn.active {
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+    color: white;
 }
 
-.track-controls {
-    opacity: 0;
-    transition: opacity 0.2s;
+/* Light theme adjustments */
+[data-theme="light"] .playlist-btn {
+    background: var(--surface-light);
+    border-color: var(--surface-light);
+    color: var(--text-primary);
 }
 
-.playlist-item:hover .track-controls,
-.playlist-item.active .track-controls {
-    opacity: 1;
+[data-theme="light"] .playlist-btn:hover {
+    background: var(--surface-light);
+    color: var(--primary-color);
 }
 
-/* Add custom scrollbar for the tracks list */
-.tracks-list::-webkit-scrollbar {
-    width: 6px;
+[data-theme="light"] .playlist-btn.active {
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+    color: white;
 }
 
-.tracks-list::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 3px;
+/* Track list */
+.tracks-list {
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 0.5rem;
 }
 
-.tracks-list::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 3px;
+.playlist-item {
+    padding: 0.75rem 1rem;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
 }
 
-.tracks-list::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.3);
+.playlist-item:hover {
+    background: var(--surface-light);
+    transform: translateX(4px);
 }
 
-@media screen and (max-width: 768px) {
-    .app-header {
-        padding: 0.75rem 1rem;
-    }
-
-    .logo span {
-        display: none; /* Hide logo text on mobile */
-    }
-
-    .main-content {
-        position: fixed;
-        top: auto;
-        right: 0;
-        bottom: 140px; /* Position above player controls */
-        width: 100%;
-        max-height: 40vh;
-        padding: 0 1rem;
-        z-index: 10;
-    }
-
-    .upload-area {
-        margin: 0.5rem 0;
-        padding: 1rem;
-    }
-
-    .controls-container {
-        bottom: 0;
-        width: 100%;
-        border-radius: 1rem 1rem 0 0;
-        padding: 1rem;
-    }
-
-    .music-controls {
-        gap: 12px;
-    }
-
-    .control-btn {
-        padding: 6px;
-    }
-
-    .volume-control {
-        display: none; /* Hide volume control on mobile */
-    }
-
-    .playlist-container {
-        border-radius: 1rem;
-        max-height: 100%;
-    }
-
-    .tracks-list {
-        max-height: calc(40vh - 60px); /* Adjust based on playlist header height */
-    }
-
-    .track-metadata {
-        max-width: 200px; /* Prevent long metadata from breaking layout */
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
+.playlist-item.active {
+    background: var(--primary-color);
+    color: white;
 }
 
-/* Add specific adjustments for very small screens */
-@media screen and (max-width: 380px) {
-    .music-controls {
-        gap: 8px;
-    }
-
-    .control-btn {
-        width: 28px;
-        height: 28px;
-    }
-
-    .play-pause-btn {
-        width: 36px;
-        height: 36px;
-    }
-
-    .track-title {
-        font-size: 0.9rem;
-    }
-
-    .track-metadata {
-        font-size: 0.8rem;
-        max-width: 150px;
-    }
+/* Player controls */
+.controls-container {
+    position: fixed;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
+    max-width: 800px;
+    background: var(--surface-color);
+    backdrop-filter: blur(12px);
+    border-radius: var(--radius-lg);
+    padding: 1.5rem;
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--surface-light);
+    z-index: 100;
 }
 
-/* Add these styles for the now playing info */
 .now-playing-info {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin-bottom: 8px;
+    gap: 1rem;
+    margin-bottom: 1rem;
 }
 
-.now-playing-text {
+.track-artwork {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--radius-md);
+    background: var(--surface-light);
     display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    flex: 1;
-    margin-right: 16px;
-}
-
-.now-playing-title {
-    font-size: 1rem;
-    font-weight: 500;
-    color: var(--text-primary);
-    margin-bottom: 4px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.now-playing-artist {
-    font-size: 0.9rem;
+    align-items: center;
+    justify-content: center;
     color: var(--text-secondary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
 }
 
-.time-display {
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-    white-space: nowrap;
+.music-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1rem;
 }
 
-/* Update mobile styles */
-@media screen and (max-width: 768px) {
-    .now-playing-info {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 4px;
-    }
-
-    .now-playing-text {
-        width: 100%;
-        margin-right: 0;
-    }
-
-    .time-display {
-        align-self: flex-end;
-    }
+.control-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    color: var(--text-primary);
+    transition: all var(--transition-fast);
 }
 
-/* Update very small screen styles */
-@media screen and (max-width: 380px) {
-    .now-playing-title {
-        font-size: 0.9rem;
-    }
-
-    .now-playing-artist {
-        font-size: 0.8rem;
-    }
+.control-btn:hover:not(:disabled) {
+    background: var(--surface-light);
+    transform: scale(1.1);
 }
 
-/* Add these styles at the appropriate location in your CSS file */
-
-/* Ensure the canvas container takes full viewport */
-body {
-    position: relative;
-    width: 100vw;
-    height: 100vh;
-    margin: 0;
-    overflow: hidden;
+.play-pause-btn {
+    width: 48px;
+    height: 48px;
+    background: var(--primary-color);
+    color: white;
 }
 
-/* Position the THREE.js canvas */
-canvas {
-    position: fixed !important;
-    top: 0;
-    left: 0;
-    z-index: 1;
+.play-pause-btn:hover:not(:disabled) {
+    background: var(--primary-hover);
 }
 
-/* Adjust the header positioning */
-.app-header {
-    /* ... existing styles ... */
-    z-index: 100;
+/* Volume control */
+.volume-control {
+    position: relative;
+    margin-left: auto;
 }
 
-/* Create a main content area for the playlist */
-.main-content {
-    position: fixed;
-    top: 80px; /* Adjust based on your header height */
-    right: 2rem;
-    width: 400px;
-    max-height: calc(100vh - 260px); /* Adjust based on your controls height */
-    z-index: 10;
-    overflow: visible;
+.volume-slider-container {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--surface-color);
+    padding: 0.75rem;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    opacity: 0;
+    visibility: hidden;
+    transition: all var(--transition-fast);
 }
 
-/* Adjust the playlist container */
-.playlist-container {
-    margin: 0;
-    max-height: 100%;
-    background: var(--surface-color);
-    backdrop-filter: blur(12px);
+.volume-control:hover .volume-slider-container {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(-8px);
 }
 
-/* Adjust the controls container */
-.controls-container {
+/* Keyboard shortcuts */
+.keyboard-shortcuts {
     position: fixed;
     bottom: 2rem;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 90%;
-    max-width: 800px;
-    z-index: 100;
+    left: 2rem;
     background: var(--surface-color);
     backdrop-filter: blur(12px);
+    border-radius: var(--radius-lg);
+    padding: 1.5rem;
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--surface-light);
+    z-index: 90;
 }
 
-/* Adjust the upload area to be inside the playlist */
-.upload-area {
-    margin: 1rem;
-}
-
-/* Add these styles for the progress bar */
-.progress-bar {
-    position: relative;
-    width: 100%;
-    height: 4px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 2px;
-    margin: 8px 0;
-    cursor: pointer;
-}
-
-.progress {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    background: var(--primary-color);
-    border-radius: 2px;
-    pointer-events: none;
-    width: 0;
+.shortcut-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-top: 1rem;
 }
 
-.seek-slider {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    cursor: pointer;
+.shortcut-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
 }
 
-/* Add styles for the playlist buttons */
-.playlist-btn {
-    background: transparent;
-    border: none;
-    color: var(--text-primary);
-    padding: 8px;
-    cursor: pointer;
-    border-radius: 50%;
-    transition: all 0.2s ease;
+.key {
+    background: var(--surface-light);
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.9rem;
+    min-width: 24px;
+    text-align: center;
 }
 
-.playlist-btn:hover {
-    background: rgba(255, 255, 255, 0.1);
-    transform: scale(1.1);
-}
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+    .main-content {
+        width: 100%;
+        right: -100%;
+        padding: 1rem;
+    }
 
-.playlist-btn.active {
-    color: var(--primary-color);
-}
+    .main-content.visible {
+        right: 0;
+    }
 
-/* Add loading spinner styles */
-.loading {
-    display: none;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    padding: 1rem;
-}
+    .controls-container {
+        bottom: 0;
+        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+        padding: 1rem;
+    }
 
-.loading.visible {
-    display: flex;
-}
+    .keyboard-shortcuts {
+        display: none;
+    }
 
-.spinner {
-    width: 20px;
-    height: 20px;
-    border: 2px solid rgba(255, 255, 255, 0.3);
-    border-top-color: var(--primary-color);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
+    .volume-control {
+        display: none;
+    }
 }
 
+/* Animations */
 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }
 
-/* Add styles for dragover state */
-.upload-area.dragover {
-    border-color: var(--primary-color);
-    background: rgba(76, 175, 80, 0.1);
-}
-
-/* Add styles for the main container */
-.container {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    padding: 80px 2rem 2rem;
-    max-width: 1200px;
-    margin: 0 auto;
-    box-sizing: border-box;
-}
-
-/* Update body styles */
-body {
-    margin: 0;
-    font-family: 'Inter', sans-serif;
-    background: var(--bg-color);
-    color: var(--text-primary);
-    overflow-x: hidden;
-    line-height: 1.5;
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.05);
+    }
+    100% {
+        transform: scale(1);
+    }
 }
 
-/* Add styles for buttons */
-button {
-    font-family: 'Inter', sans-serif;
-    border: none;
-    background: none;
-    cursor: pointer;
-    padding: 0;
-    color: inherit;
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
 }
 
-button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+::-webkit-scrollbar-track {
+    background: var(--surface-light);
+    border-radius: 4px;
 }
 
-/* Hide file input */
-input[type="file"] {
-    display: none;
+::-webkit-scrollbar-thumb {
+    background: var(--text-secondary);
+    border-radius: 4px;
 }
 
-/* Add transition for theme changes */
-* {
-    transition: background-color 0.3s, color 0.3s;
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-primary);
 }
 
-/* Add styles for mobile responsiveness */
-@media (max-width: 768px) {
-    .container {
-        padding: 60px 1rem 1rem;
-    }
-
-    .controls-container {
-        padding: 1rem;
-    }
-
-    .music-controls {
-        flex-wrap: wrap;
-        gap: 8px;
-    }
-
-    .volume-control {
-        width: 100%;
-        order: 3;
-    }
-
-    #visualization-type {
-        width: 100%;
-        order: 4;
-    }
+/* Fix visualization dropdown */
+.viz-type-dropdown {
+    position: fixed;
+    top: 70px;
+    right: 16px;
+    background: var(--surface-color);
+    backdrop-filter: blur(12px);
+    border-radius: var(--radius-lg);
+    padding: 1rem;
+    box-shadow: var(--shadow-lg);
+    z-index: 99;
+    width: 200px;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10px);
+    transition: all var(--transition-normal);
+    border: 1px solid var(--surface-light);
 }
 
-/* Add styles for the error message */
-#error-message {
-    color: var(--error-color);
-    text-align: center;
-    margin: 8px 0;
-    font-size: 0.9rem;
+.viz-type-dropdown.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
 }
 
-/* Add styles for file name display */
-#file-name {
-    margin-top: 8px;
-    font-size: 0.9rem;
-    color: var(--text-secondary);
-    text-align: center;
-    word-break: break-word;
+.viz-type-options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 }
 
-/* Add styles for header buttons */
-.header-controls {
+.viz-type-options button {
     display: flex;
     align-items: center;
-    gap: 8px;
-}
-
-.header-btn {
+    gap: 0.75rem;
     background: transparent;
     border: none;
     color: var(--text-primary);
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    padding: 0.75rem 1rem;
+    text-align: left;
+    border-radius: var(--radius-md);
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all var(--transition-fast);
+    width: 100%;
 }
 
-.header-btn:hover {
-    background: rgba(255, 255, 255, 0.1);
+.viz-type-options button:hover {
+    background: var(--surface-light);
 }
 
-.header-btn.active {
-    color: var(--primary-color);
-    background: rgba(76, 175, 80, 0.1);
+.viz-type-options button.active {
+    background: var(--primary-color);
+    color: white;
 }
 
-/* Update main content styles */
+.viz-type-options button i {
+    width: 20px;
+    text-align: center;
+}
+
+/* Fix main content area */
 .main-content {
     position: fixed;
     top: 80px;
-    right: -420px; /* Hide by default */
+    right: -420px;
     width: 400px;
-    max-height: calc(100vh - 260px);
+    max-height: calc(100vh - 180px);
     z-index: 10;
-    overflow: visible;
-    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all var(--transition-normal);
+    padding: 1rem;
+    pointer-events: none;
 }
 
 .main-content.visible {
-    right: 2rem;
+    right: 1rem;
+    pointer-events: all;
 }
 
-/* Update upload area styles */
-.upload-area {
-    display: none;
-    margin: 1rem;
-    opacity: 0;
-    transform: translateY(-20px);
-    transition: all 0.3s ease;
-}
-
-.upload-area.visible {
-    display: block;
-    opacity: 1;
-    transform: translateY(0);
-}
-
-/* Update playlist container styles */
+/* Fix upload area and playlist container */
+.upload-area,
 .playlist-container {
-    display: none;
-    opacity: 0;
-    transform: translateY(-20px);
-    transition: all 0.3s ease;
+    background: var(--surface-color);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--surface-light);
+    backdrop-filter: blur(12px);
+    margin-bottom: 1rem;
+    overflow: hidden;
 }
 
-.playlist-container.visible {
-    display: block;
-    opacity: 1;
-    transform: translateY(0);
+/* Fix controls container */
+.controls-container {
+    position: fixed;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
+    max-width: 800px;
+    background: var(--surface-color);
+    backdrop-filter: blur(12px);
+    border-radius: var(--radius-lg);
+    padding: 1.5rem;
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--surface-light);
+    z-index: 100;
 }
 
-/* Add these styles for the visualization type dropdown */
-.viz-type-dropdown {
+/* Fix header */
+.app-header {
     position: fixed;
-    top: 60px;
-    right: -220px;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.5rem;
     background: var(--surface-color);
     backdrop-filter: blur(12px);
-    border-radius: 8px;
-    padding: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    transition: right 0.3s ease;
-    z-index: 99;
-    width: 200px;
+    z-index: 100;
+    box-shadow: var(--shadow-md);
+    border-bottom: 1px solid var(--surface-light);
 }
 
-.viz-type-dropdown.visible {
-    right: 16px;
+/* Fix buttons and controls */
+.header-btn,
+.control-btn,
+.playlist-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--surface-light);
 }
 
-.viz-type-options {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
+/* Fix progress bars */
+.progress-bar {
+    background: var(--surface-light);
+    border: 1px solid var(--surface-light);
+    overflow: hidden;
 }
 
-.viz-type-options button {
-    background: transparent;
-    border: none;
-    color: var(--text-primary);
-    padding: 8px 16px;
-    text-align: left;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.2s;
-    width: 100%;
+.progress-handle {
+    width: 16px;
+    height: 16px;
+    background: var(--primary-color);
+    border: 2px solid white;
+    box-shadow: var(--shadow-md);
 }
 
-.viz-type-options button:hover {
-    background: rgba(255, 255, 255, 0.1);
+/* Fix volume control */
+.volume-slider-container {
+    width: 120px;
+    padding: 1rem;
+    background: var(--surface-color);
+    border: 1px solid var(--surface-light);
 }
 
-.viz-type-options button.active {
-    background: var(--primary-color);
-    color: white;
+/* Fix tooltips */
+.tooltip {
+    background: var(--surface-color);
+    border: 1px solid var(--surface-light);
+    padding: 0.5rem 0.75rem;
+    font-size: 0.85rem;
+    white-space: nowrap;
+    pointer-events: none;
 }
 
-/* Update mobile styles */
-@media screen and (max-width: 768px) {
-    .header-controls {
-        gap: 4px;
-    }
+/* Fix keyboard shortcuts panel */
+.keyboard-shortcuts {
+    position: fixed;
+    bottom: 2rem;
+    left: 2rem;
+    background: var(--surface-color);
+    backdrop-filter: blur(12px);
+    border-radius: var(--radius-lg);
+    padding: 1.5rem;
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--surface-light);
+    z-index: 90;
+}
 
-    .header-btn {
-        width: 32px;
-        height: 32px;
-    }
+/* Fix toast notifications */
+.error-toast {
+    position: fixed;
+    top: 90px;
+    left: 50%;
+    transform: translateX(-50%) translateY(-100%);
+    background: var(--surface-color);
+    backdrop-filter: blur(12px);
+    border-radius: var(--radius-md);
+    padding: 1rem 2rem;
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--surface-light);
+    z-index: 1000;
+    opacity: 0;
+    transition: all var(--transition-normal);
+}
 
-    .viz-type-dropdown {
-        top: 50px;
-        width: calc(100% - 32px);
-        right: -100%;
-    }
+.error-toast.visible {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+}
 
-    .viz-type-dropdown.visible {
-        right: 16px;
-    }
+.error-toast.error {
+    border-color: var(--error-color);
+    color: var(--error-color);
 }
 
-/* Fix the main content positioning */
-.main-content {
-    position: fixed;
-    top: 60px; /* Adjust based on header height */
-    right: -420px;
-    width: 400px;
-    max-height: calc(100vh - 180px); /* Adjust for header and player */
-    z-index: 10;
-    overflow: visible;
-    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    padding: 16px;
-    box-sizing: border-box;
+.error-toast.success {
+    border-color: var(--success-color);
+    color: var(--success-color);
 }
 
-/* Update the mobile layout */
-@media screen and (max-width: 768px) {
-    .main-content {
-        width: 100%;
-        right: -100%;
-        padding: 8px;
-    }
+/* Fix light theme colors */
+[data-theme="light"] {
+    --surface-light: rgba(0, 0, 0, 0.1);
+    --surface-color: rgba(255, 255, 255, 0.9);
+}
 
-    .main-content.visible {
-        right: 0;
-    }
+/* Prevent content shifting */
+body {
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    font-family: 'Inter', sans-serif;
+    background: var(--bg-color);
+    color: var(--text-primary);
+}
 
-    .playlist-container,
-    .upload-area {
-        margin: 0;
-        border-radius: 8px;
-    }
+canvas {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    z-index: 1;
 }

static/js/main.js

@@ -1,16 +1,28 @@
 // Initialize Three.js scene and renderer
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-const renderer = new THREE.WebGLRenderer({ antialias: true });
+const renderer = new THREE.WebGLRenderer({ 
+    antialias: true,
+    alpha: true,
+    powerPreference: "high-performance"
+});
+renderer.setPixelRatio(window.devicePixelRatio);
 renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.toneMappingExposure = 1;
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 
 // Set initial background color based on theme
 const savedTheme = localStorage.getItem('theme') || 'dark';
 document.documentElement.setAttribute('data-theme', savedTheme);
-renderer.setClearColor(savedTheme === 'light' ? 0xf5f5f5 : 0x000000);
+renderer.setClearColor(savedTheme === 'light' ? 0xf5f5f5 : 0x000000, 0.9);
 document.body.appendChild(renderer.domElement);
 
-// Initialize controls
+// Add fog to the scene for depth
+scene.fog = new THREE.FogExp2(savedTheme === 'light' ? 0xf5f5f5 : 0x000000, 0.02);
+
+// Initialize controls with enhanced settings
 const controls = new THREE.OrbitControls(camera, renderer.domElement);
 setupOrbitControls();
 
@@ -64,7 +76,7 @@ if (themeBtn) {
             '<i class="fas fa-moon"></i>' : 
             '<i class="fas fa-sun"></i>';
             
-        renderer.setClearColor(newTheme === 'light' ? 0xf5f5f5 : 0x000000);
+        renderer.setClearColor(newTheme === 'light' ? 0xf5f5f5 : 0x000000, 0.9);
     });
 }
 
@@ -81,45 +93,149 @@ function initAudio() {
 
 // Visualization creation functions
 function createBarsVisualization() {
-    const geometry = new THREE.BoxGeometry(0.1, 1, 0.1);
-    const numBars = 128;
-    const materials = [
-        new THREE.MeshPhongMaterial({ color: 0x4CAF50 }),
-        new THREE.MeshPhongMaterial({ color: 0x2196F3 }),
-        new THREE.MeshPhongMaterial({ color: 0xFF4081 })
-    ];
+    const numBars = 180;
+    const geometry = new THREE.CylinderGeometry(0.05, 0.05, 1, 8);
+    geometry.translate(0, 0.5, 0); // Move pivot to bottom
+    
+    // Create custom shader material for bars
+    const material = new THREE.ShaderMaterial({
+        uniforms: {
+            time: { value: 0 },
+            color1: { value: new THREE.Color(0x4CAF50) },
+            color2: { value: new THREE.Color(0x2196F3) },
+            color3: { value: new THREE.Color(0xFF4081) }
+        },
+        vertexShader: `
+            varying vec3 vPosition;
+            varying vec3 vNormal;
+            
+            void main() {
+                vPosition = position;
+                vNormal = normalize(normalMatrix * normal);
+                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+            }
+        `,
+        fragmentShader: `
+            uniform float time;
+            uniform vec3 color1;
+            uniform vec3 color2;
+            uniform vec3 color3;
+            varying vec3 vPosition;
+            varying vec3 vNormal;
+            
+            void main() {
+                float heightFactor = vPosition.y;
+                
+                // Create dynamic color gradient
+                vec3 baseColor = mix(
+                    mix(color1, color2, heightFactor),
+                    color3,
+                    sin(time * 0.5) * 0.5 + 0.5
+                );
+                
+                // Add fresnel effect for edge glow
+                float fresnel = pow(1.0 - abs(dot(vNormal, vec3(0, 0, 1.0))), 2.0);
+                vec3 finalColor = mix(baseColor, vec3(1.0), fresnel * 0.5);
+                
+                gl_FragColor = vec4(finalColor, 0.9);
+            }
+        `,
+        transparent: true,
+        side: THREE.DoubleSide
+    });
+    
+    const radius = 4;
+    const angleStep = (Math.PI * 2) / numBars;
     
     for (let i = 0; i < numBars; i++) {
-        const material = materials[i % materials.length];
-        const bar = new THREE.Mesh(geometry, material);
-        const angle = (i / numBars) * Math.PI * 2;
-        const radius = 2;
+        const angle = i * angleStep;
+        const bar = new THREE.Mesh(geometry, material.clone());
+        
+        // Position in a circle
         bar.position.x = Math.cos(angle) * radius;
         bar.position.z = Math.sin(angle) * radius;
+        
+        // Rotate to face center
+        bar.rotation.y = -angle;
+        
+        // Store initial properties
         bar.userData.initialY = bar.position.y;
-        bar.userData.phase = i * 0.1;
+        bar.userData.initialScale = 1;
+        bar.userData.angle = angle;
+        bar.userData.index = i;
+        
         scene.add(bar);
         visualizers.bars.push(bar);
     }
-
-    // Enhanced lighting
-    const light = new THREE.PointLight(0xffffff, 1.5, 100);
-    light.position.set(0, 5, 0);
-    scene.add(light);
     
+    // Add ambient light
     const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
     scene.add(ambientLight);
+    
+    // Add multiple point lights with different colors
+    const colors = [0xFF4081, 0x2196F3, 0x4CAF50];
+    colors.forEach((color, i) => {
+        const light = new THREE.PointLight(color, 1, 20);
+        const angle = (i / colors.length) * Math.PI * 2;
+        const lightRadius = radius * 1.5;
+        light.position.set(
+            Math.cos(angle) * lightRadius,
+            5,
+            Math.sin(angle) * lightRadius
+        );
+        scene.add(light);
+    });
 }
 
 function createSphereVisualization() {
     const geometry = new THREE.IcosahedronGeometry(1, 4);
-    const material = new THREE.MeshPhongMaterial({
-        color: 0x4CAF50,
-        wireframe: true,
-        emissive: 0x2196F3,
-        emissiveIntensity: 0.5,
-        shininess: 50
+    
+    // Create a more complex material with gradient and glow effects
+    const material = new THREE.ShaderMaterial({
+        uniforms: {
+            time: { value: 0 },
+            color1: { value: new THREE.Color(0x4CAF50) },
+            color2: { value: new THREE.Color(0x2196F3) },
+            color3: { value: new THREE.Color(0xFF4081) }
+        },
+        vertexShader: `
+            varying vec3 vNormal;
+            varying vec3 vPosition;
+            void main() {
+                vNormal = normalize(normalMatrix * normal);
+                vPosition = position;
+                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+            }
+        `,
+        fragmentShader: `
+            uniform float time;
+            uniform vec3 color1;
+            uniform vec3 color2;
+            uniform vec3 color3;
+            varying vec3 vNormal;
+            varying vec3 vPosition;
+            
+            void main() {
+                float noise = sin(vPosition.x * 10.0 + time) * 
+                             cos(vPosition.y * 10.0 + time) * 
+                             sin(vPosition.z * 10.0 + time);
+                             
+                vec3 color = mix(
+                    mix(color1, color2, noise * 0.5 + 0.5),
+                    color3,
+                    sin(time * 0.5) * 0.5 + 0.5
+                );
+                
+                float fresnel = pow(1.0 + dot(vNormal, vec3(0, 0, 1.0)), 3.0);
+                color = mix(color, vec3(1.0), fresnel * 0.7);
+                
+                gl_FragColor = vec4(color, 0.9);
+            }
+        `,
+        transparent: true,
+        side: THREE.DoubleSide
     });
+
     visualizers.sphere = new THREE.Mesh(geometry, material);
     
     // Store original vertex positions
@@ -128,60 +244,118 @@ function createSphereVisualization() {
     
     scene.add(visualizers.sphere);
 
-    // Enhanced lighting
-    const light1 = new THREE.PointLight(0xFF4081, 1, 100);
-    light1.position.set(5, 5, 5);
-    scene.add(light1);
+    // Add ambient light for base illumination
+    const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
+    scene.add(ambientLight);
 
-    const light2 = new THREE.PointLight(0x2196F3, 1, 100);
-    light2.position.set(-5, -5, -5);
-    scene.add(light2);
+    // Add multiple point lights with different colors
+    const colors = [0xFF4081, 0x2196F3, 0x4CAF50];
+    const radius = 5;
+    colors.forEach((color, i) => {
+        const light = new THREE.PointLight(color, 1, 20);
+        const angle = (i / colors.length) * Math.PI * 2;
+        light.position.set(
+            Math.cos(angle) * radius,
+            Math.sin(angle) * radius,
+            radius
+        );
+        scene.add(light);
+    });
 }
 
 function createParticlesVisualization() {
-    const particleCount = 2000;
+    const particleCount = 5000;
     const geometry = new THREE.BufferGeometry();
     const positions = new Float32Array(particleCount * 3);
+    const scales = new Float32Array(particleCount);
     const colors = new Float32Array(particleCount * 3);
-    const sizes = new Float32Array(particleCount);
     
     const color1 = new THREE.Color(0x4CAF50);
     const color2 = new THREE.Color(0x2196F3);
     const color3 = new THREE.Color(0xFF4081);
     
-    for (let i = 0; i < particleCount * 3; i += 3) {
-        // Create spiral pattern with larger radius
-        const angle = (i / particleCount) * Math.PI * 8;
-        const radius = (Math.random() * 4) + 2;
+    // Create a spiral galaxy formation
+    for (let i = 0; i < particleCount; i++) {
+        const i3 = i * 3;
+        const radius = (Math.random() * 3) + 2;
+        const spinAngle = (i / particleCount) * Math.PI * 24;
+        const heightRange = Math.random() * Math.PI * 2;
         
-        positions[i] = Math.cos(angle) * radius;
-        positions[i + 1] = (Math.random() - 0.5) * 6;
-        positions[i + 2] = Math.sin(angle) * radius;
+        // Create spiral arms
+        positions[i3] = Math.cos(spinAngle + radius) * radius;
+        positions[i3 + 1] = Math.sin(heightRange) * (radius * 0.2);
+        positions[i3 + 2] = Math.sin(spinAngle + radius) * radius;
         
-        // Interpolate between colors based on position
-        const colorMix = Math.abs(Math.sin(angle));
+        // Vary particle sizes
+        scales[i] = Math.random() * 0.5 + 0.5;
+        
+        // Create color gradient along the spiral
+        const colorMix = Math.abs(Math.sin(spinAngle));
         const finalColor = new THREE.Color().lerpColors(
             color1,
             colorMix > 0.5 ? color2 : color3,
             colorMix
         );
         
-        colors[i] = finalColor.r;
-        colors[i + 1] = finalColor.g;
-        colors[i + 2] = finalColor.b;
-        
-        sizes[i / 3] = Math.random() * 0.1 + 0.05;
+        colors[i3] = finalColor.r;
+        colors[i3 + 1] = finalColor.g;
+        colors[i3 + 2] = finalColor.b;
     }
     
     geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+    geometry.setAttribute('scale', new THREE.BufferAttribute(scales, 1));
     geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
-    geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
     
-    const material = new THREE.PointsMaterial({
-        size: 0.15,
-        vertexColors: true,
+    // Create custom shader material for particles
+    const material = new THREE.ShaderMaterial({
+        uniforms: {
+            time: { value: 0 },
+            size: { value: 15.0 },
+            pixelRatio: { value: window.devicePixelRatio }
+        },
+        vertexShader: `
+            attribute float scale;
+            attribute vec3 color;
+            uniform float time;
+            uniform float size;
+            uniform float pixelRatio;
+            varying vec3 vColor;
+            
+            void main() {
+                vColor = color;
+                vec3 pos = position;
+                
+                // Add some movement
+                float angle = time * 0.2;
+                pos.x = position.x * cos(angle) - position.z * sin(angle);
+                pos.z = position.x * sin(angle) + position.z * cos(angle);
+                pos.y += sin(time + position.x * 0.5) * 0.3;
+                
+                vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
+                gl_Position = projectionMatrix * mvPosition;
+                
+                // Size attenuation
+                gl_PointSize = size * scale * pixelRatio * (1.0 / -mvPosition.z);
+            }
+        `,
+        fragmentShader: `
+            varying vec3 vColor;
+            
+            void main() {
+                // Create circular particles
+                vec2 xy = gl_PointCoord.xy - vec2(0.5);
+                float radius = length(xy);
+                float alpha = 1.0 - smoothstep(0.45, 0.5, radius);
+                
+                // Add glow effect
+                vec3 glow = vColor * (1.0 - radius * 2.0);
+                vec3 finalColor = mix(vColor, glow, 0.5);
+                
+                gl_FragColor = vec4(finalColor, alpha);
+            }
+        `,
         transparent: true,
-        opacity: 0.8,
+        depthWrite: false,
         blending: THREE.AdditiveBlending
     });
     
@@ -192,21 +366,28 @@ function createParticlesVisualization() {
 // Visualization update functions
 function updateBarsVisualization(dataArray) {
     const time = Date.now() * 0.001;
-    const multiplier = 0.015;
+    const multiplier = 0.02;
     
     visualizers.bars.forEach((bar, i) => {
-        const value = dataArray[i] * multiplier;
-        // Add wave effect
-        const wave = Math.sin(time * 2 + bar.userData.phase) * 0.1;
-        bar.scale.y = value + 0.1;
-        bar.position.y = (value / 2) + wave;
-        
-        // Rotate bars based on audio
-        bar.rotation.y = time * 0.1 + (value * 0.1);
-        
-        // Update bar color based on frequency
-        const hue = (i / visualizers.bars.length) + (time * 0.1);
-        bar.material.color.setHSL(hue, 0.7, 0.5);
+        const value = dataArray[i % dataArray.length] * multiplier;
+        
+        // Update shader uniforms
+        bar.material.uniforms.time.value = time;
+        
+        // Calculate dynamic height
+        const baseHeight = value + 0.1;
+        const wave = Math.sin(time * 2 + bar.userData.angle) * 0.1;
+        const finalHeight = baseHeight + wave;
+        
+        // Update bar scale and position
+        bar.scale.y = finalHeight;
+        
+        // Add floating effect
+        bar.position.y = Math.sin(time + bar.userData.angle) * 0.1;
+        
+        // Add subtle rotation
+        bar.rotation.x = Math.sin(time * 0.5 + bar.userData.angle) * 0.1;
+        bar.rotation.z = Math.cos(time * 0.5 + bar.userData.angle) * 0.1;
     });
 }
 
@@ -217,65 +398,60 @@ function updateSphereVisualization(dataArray) {
     const originalPositions = visualizers.sphere.userData.originalPositions;
     const time = Date.now() * 0.001;
     
+    // Update shader uniforms
+    visualizers.sphere.material.uniforms.time.value = time;
+    
+    // Create more complex deformation based on audio data
     for (let i = 0; i < positions.length; i += 3) {
         const i3 = i / 3;
         const value = dataArray[i3 % dataArray.length] / 255;
         
-        // Create complex deformation
         const deform = value * 0.5;
-        positions[i] = originalPositions[i] * (1 + deform * Math.sin(time + i3));
-        positions[i + 1] = originalPositions[i + 1] * (1 + deform * Math.cos(time + i3));
-        positions[i + 2] = originalPositions[i + 2] * (1 + deform * Math.sin(time * 0.5 + i3));
+        const noise = Math.sin(time + i3 * 0.1) * 0.2;
+        
+        positions[i] = originalPositions[i] * (1 + deform * Math.sin(time + i3) + noise);
+        positions[i + 1] = originalPositions[i + 1] * (1 + deform * Math.cos(time + i3) + noise);
+        positions[i + 2] = originalPositions[i + 2] * (1 + deform * Math.sin(time * 0.5 + i3) + noise);
     }
     
     visualizers.sphere.geometry.attributes.position.needsUpdate = true;
-    visualizers.sphere.rotation.y += 0.01;
-    visualizers.sphere.rotation.x += 0.005;
     
-    // Update material colors
-    const hue = (Math.sin(time * 0.1) + 1) * 0.5;
-    visualizers.sphere.material.color.setHSL(hue, 0.7, 0.5);
-    visualizers.sphere.material.emissive.setHSL((hue + 0.5) % 1, 0.7, 0.3);
+    // Add smooth rotation
+    visualizers.sphere.rotation.y += 0.002;
+    visualizers.sphere.rotation.x += 0.001;
 }
 
 function updateParticlesVisualization(dataArray) {
     if (!visualizers.particles) return;
     
+    const time = Date.now() * 0.001;
     const positions = visualizers.particles.geometry.attributes.position.array;
+    const scales = visualizers.particles.geometry.attributes.scale.array;
     const colors = visualizers.particles.geometry.attributes.color.array;
-    const sizes = visualizers.particles.geometry.attributes.size.array;
-    const time = Date.now() * 0.001;
+    
+    // Update shader uniforms
+    visualizers.particles.material.uniforms.time.value = time;
     
     for (let i = 0; i < positions.length; i += 3) {
         const i3 = i / 3;
         const value = dataArray[i3 % dataArray.length] / 255;
         
-        // Keep consistent radius while rotating
-        const angle = (i3 / positions.length) * Math.PI * 8 + time;
-        const baseRadius = 8; // Fixed base radius
+        // Update particle scales based on audio
+        scales[i3] = (value * 0.5 + 0.5) * (Math.sin(time + i3) * 0.2 + 0.8);
         
-        positions[i] = Math.cos(angle) * baseRadius;
-        positions[i + 1] += (Math.random() - 0.5) * 0.15;
-        positions[i + 2] = Math.sin(angle) * baseRadius;
+        // Update colors with audio reactivity
+        const hue = (i3 / positions.length) + time * 0.1;
+        const saturation = 0.7 + value * 0.3;
+        const lightness = 0.4 + value * 0.2;
+        const color = new THREE.Color().setHSL(hue, saturation, lightness);
         
-        // Update colors based on audio and position
-        const hue = (angle / (Math.PI * 2)) + time * 0.1;
-        const color = new THREE.Color().setHSL(hue, 0.7, 0.5 + value * 0.5);
         colors[i] = color.r;
         colors[i + 1] = color.g;
         colors[i + 2] = color.b;
-        
-        // Update particle sizes with audio reactivity
-        sizes[i3] = (value * 0.3 + 0.08) * (1 + Math.sin(time + i3) * 0.2);
     }
     
-    visualizers.particles.geometry.attributes.position.needsUpdate = true;
+    visualizers.particles.geometry.attributes.scale.needsUpdate = true;
     visualizers.particles.geometry.attributes.color.needsUpdate = true;
-    visualizers.particles.geometry.attributes.size.needsUpdate = true;
-    
-    // Rotate the entire particle system
-    visualizers.particles.rotation.y += 0.001;
-    visualizers.particles.rotation.x += 0.0005;
 }
 
 // Animation loop
@@ -304,10 +480,34 @@ window.addEventListener('resize', () => {
 
 // Initialize the application
 document.addEventListener('DOMContentLoaded', () => {
+    // Initialize loading screen
+    const loadingScreen = document.querySelector('.loading-screen');
+    
+    function showLoading() {
+        if (loadingScreen) {
+            loadingScreen.classList.remove('hidden');
+        }
+    }
+    
+    function hideLoading() {
+        if (loadingScreen) {
+            loadingScreen.classList.add('hidden');
+        }
+    }
+
+    // Show loading screen immediately
+    showLoading();
+
+    // Initialize all components
     setupUploadHandlers();
     setupPlayerControls();
     setupToggleHandlers();
+    setupProgressBar();
+    setupPlaylistControls();
     createVisualization();
+    
+    // Hide loading screen after initialization
+    hideLoading();
 });
 
 // Export necessary functions and variables
@@ -325,12 +525,20 @@ function setupOrbitControls() {
     // Camera position is now set in createVisualization
 }
 
-// Handle file uploads
+// Enhanced file upload handling
 function setupUploadHandlers() {
     const uploadArea = document.getElementById('upload-area');
     const fileInput = document.getElementById('audio-upload');
+    const uploadProgress = document.querySelector('.upload-progress');
+    const progressFill = uploadProgress?.querySelector('.progress-fill');
+    const progressText = uploadProgress?.querySelector('.progress-text');
     const errorToast = document.querySelector('.error-toast');
 
+    if (!uploadArea || !fileInput) {
+        console.error('Upload elements not found');
+        return;
+    }
+
     uploadArea.addEventListener('dragover', (e) => {
         e.preventDefault();
         uploadArea.classList.add('dragover');
@@ -354,76 +562,256 @@ function setupUploadHandlers() {
         handleFiles(e.target.files);
     });
 
-    // Setup shuffle and repeat buttons
-    const shuffleBtn = document.querySelector('.shuffle-btn');
-    const repeatBtn = document.querySelector('.repeat-btn');
-
-    shuffleBtn?.addEventListener('click', () => {
-        isShuffleActive = !isShuffleActive;
-        shuffleBtn.classList.toggle('active');
-    });
-
-    repeatBtn?.addEventListener('click', () => {
-        isRepeatActive = !isRepeatActive;
-        repeatBtn.classList.toggle('active');
-    });
-}
-
-// Handle the uploaded files
-async function handleFiles(files) {
-    if (!audioContext) initAudio();
-    
-    const formData = new FormData();
-    Array.from(files).forEach(file => {
-        formData.append('files[]', file);
-    });
+    // Enhanced file upload with progress
+    async function handleFiles(files) {
+        if (!files || files.length === 0) {
+            showError('No files selected');
+            return;
+        }
 
-    try {
-        const response = await fetch('/upload', {
-            method: 'POST',
-            body: formData
+        if (!audioContext) {
+            try {
+                initAudio();
+            } catch (error) {
+                console.error('Failed to initialize audio:', error);
+                showError('Failed to initialize audio system');
+                return;
+            }
+        }
+        
+        const formData = new FormData();
+        Array.from(files).forEach(file => {
+            formData.append('files[]', file);
         });
 
-        const data = await response.json();
+        // Show upload progress if elements exist
+        if (uploadProgress && progressFill && progressText) {
+            uploadProgress.classList.add('visible');
+            progressFill.style.width = '0%';
+            progressText.textContent = '0%';
+        }
         
-        if (data.success) {
-            // Debug log to check the response
-            console.log('Upload response:', data);
-            
-            playlist = data.files.filter(file => file.success).map(file => ({
-                name: file.filename,
-                url: file.filepath,
-                metadata: file.metadata
-            }));
-            
-            // Debug log to check the playlist
-            console.log('Created playlist:', playlist);
+        try {
+            const response = await fetch('/upload', {
+                method: 'POST',
+                body: formData
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
             
-            createPlaylist();
-            if (playlist.length > 0 && playlist[0].url) {
-                playTrack(0);
+            if (data.success) {
+                showSuccess('Files uploaded successfully');
+                
+                // Filter successful uploads and create playlist
+                const successfulFiles = data.files.filter(file => file.success);
+                if (successfulFiles.length === 0) {
+                    showError('No files were uploaded successfully');
+                    return;
+                }
+
+                // Add originalIndex to each track
+                playlist = successfulFiles.map((file, index) => ({
+                    name: file.filename,
+                    url: file.filepath,
+                    metadata: file.metadata,
+                    originalIndex: index
+                }));
+                
+                createPlaylist();
+                if (playlist.length > 0) {
+                    playTrack(0);
+                }
             } else {
-                showError('No valid tracks were uploaded');
+                showError(data.error || 'Upload failed');
+            }
+        } catch (error) {
+            console.error('Upload error:', error);
+            showError('Error uploading files');
+        } finally {
+            // Hide upload progress if elements exist
+            if (uploadProgress && progressFill && progressText) {
+                uploadProgress.classList.remove('visible');
+                progressFill.style.width = '0%';
+                progressText.textContent = '0%';
             }
-        } else {
-            showError(data.error || 'Upload failed');
         }
-    } catch (error) {
-        console.error('Upload error:', error);
-        showError('Error uploading files');
     }
 }
 
-// Show error message
+// Enhanced toast notifications with null checks
 function showError(message) {
-    const errorToast = document.querySelector('.error-toast');
-    errorToast.textContent = message;
-    errorToast.classList.add('visible');
+    const toast = document.querySelector('.error-toast');
+    if (!toast) return;
+    
+    toast.textContent = message;
+    toast.className = 'error-toast error visible';
+    setTimeout(() => {
+        toast.classList.remove('visible');
+    }, 3000);
+}
+
+function showSuccess(message) {
+    const toast = document.querySelector('.error-toast');
+    if (!toast) return;
+    
+    toast.textContent = message;
+    toast.className = 'error-toast success visible';
     setTimeout(() => {
-        errorToast.classList.remove('visible');
+        toast.classList.remove('visible');
     }, 3000);
 }
 
+// Enhanced keyboard shortcuts
+document.addEventListener('keydown', (e) => {
+    if (e.code === 'Space' && !e.target.matches('input, textarea')) {
+        e.preventDefault();
+        togglePlayPause();
+    } else if (e.code === 'ArrowLeft') {
+        playPrevious();
+    } else if (e.code === 'ArrowRight') {
+        playNext();
+    } else if (e.code === 'KeyM') {
+        toggleMute();
+    }
+});
+
+// Volume control
+function toggleMute() {
+    if (!audioElement) return;
+    
+    const volumeBtn = document.querySelector('.volume-btn i');
+    if (audioElement.volume > 0) {
+        audioElement.volume = 0;
+        volumeBtn.className = 'fas fa-volume-mute';
+    } else {
+        audioElement.volume = 0.5;
+        volumeBtn.className = 'fas fa-volume-up';
+    }
+    
+    updateVolumeUI();
+}
+
+function updateVolumeUI() {
+    const volumeProgress = document.querySelector('.volume-progress');
+    const volumeHandle = document.querySelector('.volume-handle');
+    const volumeSlider = document.getElementById('volume');
+    
+    if (volumeProgress && volumeHandle && volumeSlider) {
+        const value = audioElement ? audioElement.volume : 0.5;
+        volumeProgress.style.width = `${value * 100}%`;
+        volumeHandle.style.left = `${value * 100}%`;
+        volumeSlider.value = value;
+    }
+}
+
+// Enhanced progress bar interaction
+function setupProgressBar() {
+    const progressContainer = document.querySelector('.progress-container');
+    const progressBar = document.querySelector('.progress-bar');
+    const progress = document.querySelector('.progress');
+    const progressHandle = document.querySelector('.progress-handle');
+    const seekSlider = document.querySelector('.seek-slider');
+    
+    // Return early if required elements are not found
+    if (!progressBar || !progress) {
+        console.error('Progress bar elements not found');
+        return;
+    }
+    
+    let isDragging = false;
+    
+    // Mouse events for desktop
+    progressBar.addEventListener('mousedown', startDragging);
+    document.addEventListener('mousemove', updateDragging);
+    document.addEventListener('mouseup', stopDragging);
+    
+    // Touch events for mobile
+    progressBar.addEventListener('touchstart', handleTouchStart);
+    document.addEventListener('touchmove', handleTouchMove);
+    document.addEventListener('touchend', handleTouchEnd);
+    
+    function handleTouchStart(e) {
+        e.preventDefault();
+        isDragging = true;
+        progressBar.classList.add('dragging');
+        updateProgress(e.touches[0]);
+    }
+    
+    function handleTouchMove(e) {
+        if (!isDragging) return;
+        e.preventDefault();
+        updateProgress(e.touches[0]);
+    }
+    
+    function handleTouchEnd() {
+        isDragging = false;
+        progressBar.classList.remove('dragging');
+    }
+    
+    function startDragging(e) {
+        isDragging = true;
+        progressBar.classList.add('dragging');
+        updateProgress(e);
+    }
+    
+    function updateDragging(e) {
+        if (!isDragging) return;
+        updateProgress(e);
+    }
+    
+    function stopDragging() {
+        isDragging = false;
+        progressBar.classList.remove('dragging');
+    }
+    
+    function updateProgress(e) {
+        if (!audioElement || !audioElement.duration) return;
+        
+        try {
+            const rect = progressBar.getBoundingClientRect();
+            const x = e.clientX || e.pageX;
+            const percent = Math.min(Math.max((x - rect.left) / rect.width, 0), 1);
+            
+            // Update progress bar and handle
+            progress.style.width = `${percent * 100}%`;
+            if (progressHandle) {
+                progressHandle.style.left = `${percent * 100}%`;
+            }
+            if (seekSlider) {
+                seekSlider.value = percent * 100;
+            }
+            
+            // Update audio time
+            audioElement.currentTime = percent * audioElement.duration;
+            
+            // Force time display update
+            updateTimeDisplay();
+        } catch (error) {
+            console.error('Error updating progress:', error);
+        }
+    }
+    
+    // Add seek slider input handler
+    if (seekSlider) {
+        seekSlider.addEventListener('input', (e) => {
+            if (!audioElement || !audioElement.duration) return;
+            
+            const percent = e.target.value;
+            progress.style.width = `${percent}%`;
+            if (progressHandle) {
+                progressHandle.style.left = `${percent}%`;
+            }
+            
+            audioElement.currentTime = (percent / 100) * audioElement.duration;
+            updateTimeDisplay();
+        });
+    }
+}
+
 // Setup player controls
 function setupPlayerControls() {
     const playPauseBtn = document.getElementById('play-pause');
@@ -512,27 +900,37 @@ function updateVolume(e) {
 
 // Seek to position
 function seekTo(e) {
-    if (audioElement && audioElement.duration) {
-        const seekSlider = document.querySelector('.seek-slider');
-        const progress = document.querySelector('.progress');
-        const time = (seekSlider.value / 100) * audioElement.duration;
-        
-        audioElement.currentTime = time;
+    if (!audioElement || !audioElement.duration) return;
+    
+    const seekSlider = e.target;
+    const progress = document.querySelector('.progress');
+    const progressHandle = document.querySelector('.progress-handle');
+    const time = (seekSlider.value / 100) * audioElement.duration;
+    
+    // Update audio time
+    audioElement.currentTime = time;
+    
+    // Update progress bar and handle
+    if (progress) {
         progress.style.width = `${seekSlider.value}%`;
-        
-        // Force time display update
-        updateTimeDisplay();
     }
+    if (progressHandle) {
+        progressHandle.style.left = `${seekSlider.value}%`;
+    }
+    
+    // Force time display update
+    updateTimeDisplay();
 }
 
 // Update time display
 function updateTimeDisplay() {
     if (!audioElement) return;
 
-    const currentTime = document.querySelector('.current-time');
-    const totalTime = document.querySelector('.total-time');
-    const seekSlider = document.querySelector('.seek-slider');
+    const currentTimeEl = document.querySelector('.current-time');
+    const totalTimeEl = document.querySelector('.total-time');
     const progress = document.querySelector('.progress');
+    const progressHandle = document.querySelector('.progress-handle');
+    const seekSlider = document.querySelector('.seek-slider');
 
     // Only update if duration is available and not NaN
     if (audioElement.duration && !isNaN(audioElement.duration)) {
@@ -540,26 +938,37 @@ function updateTimeDisplay() {
         const total = formatTime(audioElement.duration);
         const progressPercent = (audioElement.currentTime / audioElement.duration) * 100;
 
-        // Update current time display
-        if (currentTime) currentTime.textContent = current;
-        
-        // Update total time display
-        if (totalTime) totalTime.textContent = total;
+        // Update time displays
+        if (currentTimeEl) currentTimeEl.textContent = current;
+        if (totalTimeEl) totalTimeEl.textContent = total;
         
-        // Update slider and progress bar
-        if (seekSlider && !seekSlider.matches(':active')) { // Only update if user isn't dragging
-            seekSlider.value = progressPercent;
+        // Update progress bar and handle
+        if (progress) {
             progress.style.width = `${progressPercent}%`;
         }
+        if (progressHandle) {
+            progressHandle.style.left = `${progressPercent}%`;
+        }
+        if (seekSlider && !seekSlider.matches(':active')) {
+            seekSlider.value = progressPercent;
+        }
+    } else {
+        // Reset displays if no duration available
+        if (currentTimeEl) currentTimeEl.textContent = '0:00';
+        if (totalTimeEl) totalTimeEl.textContent = '0:00';
+        if (progress) progress.style.width = '0%';
+        if (progressHandle) progressHandle.style.left = '0%';
+        if (seekSlider) seekSlider.value = 0;
     }
 }
 
-// Format time in MM:SS
+// Format time helper function
 function formatTime(seconds) {
     if (!seconds || isNaN(seconds)) return '0:00';
+    
     const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
-    return `${mins}:${secs}`;
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
 }
 
 // Handle track end
@@ -672,64 +1081,72 @@ function updateNowPlayingInfo() {
     }
 }
 
-// Play selected track
-function playTrack(index) {
-    if (!playlist || index < 0 || index >= playlist.length) return;
+// Update playTrack function to properly set up time updates
+async function playTrack(index) {
+    if (index < 0 || index >= playlist.length) return;
     
-    currentTrackIndex = index;
-    const track = playlist[index];
-    
-    if (!audioElement) {
-        initAudio();
-    }
-
-    if (!track || !track.url) {
-        console.error('Invalid track or track URL');
-        showError('Invalid track data');
-        return;
-    }
-
-    // Update playlist UI
-    document.querySelectorAll('.playlist-item').forEach((item, i) => {
-        item.classList.toggle('active', i === index);
-    });
-
-    // Enable controls
-    const playPauseBtn = document.getElementById('play-pause');
-    const prevBtn = document.querySelector('.previous-btn');
-    const nextBtn = document.querySelector('.next-btn');
-
-    if (playPauseBtn) playPauseBtn.disabled = false;
-    if (prevBtn) prevBtn.disabled = false;
-    if (nextBtn) nextBtn.disabled = false;
-
-    // Remove any existing event listeners before adding new ones
-    audioElement.removeEventListener('loadedmetadata', updateTimeDisplay);
-    audioElement.removeEventListener('timeupdate', updateTimeDisplay);
-    
-    // Add event listeners
-    audioElement.addEventListener('loadedmetadata', updateTimeDisplay);
-    audioElement.addEventListener('timeupdate', updateTimeDisplay);
-    
-    // Update audio source and play
-    audioElement.src = track.url;
-    
-    // Force an initial time display update
-    setTimeout(updateTimeDisplay, 100);
-
-    audioElement.play()
-        .then(() => {
+    try {
+        // Stop current playback
+        if (audioElement) {
+            audioElement.pause();
+            audioElement.currentTime = 0;
+            
+            // Remove existing listeners
+            audioElement.removeEventListener('timeupdate', updateTimeDisplay);
+            audioElement.removeEventListener('loadedmetadata', updateTimeDisplay);
+            audioElement.removeEventListener('ended', handleTrackEnd);
+        }
+        
+        currentTrackIndex = index;
+        const track = playlist[currentTrackIndex];
+        
+        if (!audioElement) {
+            console.warn('Audio element not initialized');
+            return;
+        }
+        
+        // Update source and load new track
+        audioElement.src = track.url;
+        await audioElement.load();
+        
+        // Add event listeners for time updates
+        audioElement.addEventListener('timeupdate', updateTimeDisplay);
+        audioElement.addEventListener('loadedmetadata', updateTimeDisplay);
+        audioElement.addEventListener('ended', handleTrackEnd);
+        
+        // Update playlist UI
+        document.querySelectorAll('.playlist-item').forEach((item, i) => {
+            item.classList.toggle('active', i === index);
+        });
+        
+        // Force initial time display update
+        updateTimeDisplay();
+        
+        // Attempt to play with retry logic
+        try {
+            await audioElement.play();
             isPlaying = true;
-            if (playPauseBtn) {
-                playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
-            }
+            updatePlayPauseButton();
             updateNowPlayingInfo();
-            updateTimeDisplay(); // Update time display immediately after play starts
-        })
-        .catch(error => {
-            console.error('Error playing track:', error);
-            showError('Error playing track: ' + error.message);
-        });
+        } catch (playError) {
+            console.warn('Play interrupted, retrying...', playError);
+            // Add a small delay before retrying
+            setTimeout(async () => {
+                try {
+                    await audioElement.play();
+                    isPlaying = true;
+                    updatePlayPauseButton();
+                    updateNowPlayingInfo();
+                } catch (retryError) {
+                    console.error('Failed to play after retry:', retryError);
+                    showError('Failed to play track. Please try again.');
+                }
+            }, 100);
+        }
+    } catch (error) {
+        console.error('Error playing track:', error);
+        showError('Error playing track');
+    }
 }
 
 // Add these functions after the existing initialization code
@@ -741,60 +1158,70 @@ function setupToggleHandlers() {
     const playlistToggleBtn = document.querySelector('.playlist-toggle-btn');
     const vizTypeBtn = document.querySelector('.viz-type-btn');
     const vizTypeDropdown = document.querySelector('.viz-type-dropdown');
-    const vizTypeOptions = document.querySelectorAll('.viz-type-options button');
+    
+    if (!mainContent || !uploadArea || !playlistContainer) {
+        console.error('Required elements not found');
+        return;
+    }
 
     // Show playlist by default
-    mainContent?.classList.add('visible');
-    playlistContainer?.classList.add('visible');
-    playlistToggleBtn?.classList.add('active');
+    mainContent.classList.add('visible');
+    playlistContainer.classList.add('visible');
+    if (playlistToggleBtn) playlistToggleBtn.classList.add('active');
 
+    // Upload button handler
     uploadToggleBtn?.addEventListener('click', () => {
-        const isVisible = uploadArea?.classList.contains('visible');
+        const isVisible = uploadArea.classList.contains('visible');
         
         // Hide playlist if it's visible
-        playlistContainer?.classList.remove('visible');
+        playlistContainer.classList.remove('visible');
         playlistToggleBtn?.classList.remove('active');
         
         // Toggle upload area
-        uploadArea?.classList.toggle('visible');
-        uploadToggleBtn?.classList.toggle('active');
+        uploadArea.classList.toggle('visible');
+        uploadToggleBtn.classList.toggle('active');
         
         // Show/hide main content
-        mainContent?.classList.toggle('visible', !isVisible || playlistContainer?.classList.contains('visible'));
+        mainContent.classList.toggle('visible', !isVisible || playlistContainer.classList.contains('visible'));
     });
 
+    // Playlist button handler
     playlistToggleBtn?.addEventListener('click', () => {
-        const isVisible = playlistContainer?.classList.contains('visible');
+        const isVisible = playlistContainer.classList.contains('visible');
         
         // Hide upload area if it's visible
-        uploadArea?.classList.remove('visible');
+        uploadArea.classList.remove('visible');
         uploadToggleBtn?.classList.remove('active');
         
         // Toggle playlist
-        playlistContainer?.classList.toggle('visible');
-        playlistToggleBtn?.classList.toggle('active');
+        playlistContainer.classList.toggle('visible');
+        playlistToggleBtn.classList.toggle('active');
         
         // Show/hide main content
-        mainContent?.classList.toggle('visible', !isVisible || uploadArea?.classList.contains('visible'));
+        mainContent.classList.toggle('visible', !isVisible || uploadArea.classList.contains('visible'));
     });
 
-    // Handle visualization type button click
+    // Visualization type button handler
+    let isVizDropdownVisible = false;
+    
     vizTypeBtn?.addEventListener('click', (e) => {
-        e.stopPropagation(); // Prevent document click from immediately closing
-        vizTypeDropdown?.classList.toggle('visible');
-        vizTypeBtn?.classList.toggle('active');
+        e.stopPropagation();
+        isVizDropdownVisible = !isVizDropdownVisible;
         
-        // Close other dropdowns
-        uploadArea?.classList.remove('visible');
-        uploadToggleBtn?.classList.remove('active');
-        playlistContainer?.classList.remove('visible');
-        playlistToggleBtn?.classList.remove('active');
+        if (isVizDropdownVisible) {
+            vizTypeDropdown?.classList.add('visible');
+            vizTypeBtn.classList.add('active');
+        } else {
+            vizTypeDropdown?.classList.remove('visible');
+            vizTypeBtn.classList.remove('active');
+        }
     });
 
     // Handle visualization type selection
+    const vizTypeOptions = document.querySelectorAll('.viz-type-options button');
     vizTypeOptions?.forEach(button => {
         button.addEventListener('click', (e) => {
-            e.stopPropagation(); // Prevent document click from closing dropdown
+            e.stopPropagation();
             const type = button.dataset.type;
             
             // Update active state
@@ -806,18 +1233,74 @@ function setupToggleHandlers() {
             createVisualization();
             
             // Close dropdown
+            isVizDropdownVisible = false;
             vizTypeDropdown?.classList.remove('visible');
             vizTypeBtn?.classList.remove('active');
         });
     });
 
-    // Close dropdown when clicking outside
+    // Close dropdowns when clicking outside
     document.addEventListener('click', (e) => {
-        if (vizTypeBtn && vizTypeDropdown && 
-            !vizTypeBtn.contains(e.target) && 
-            !vizTypeDropdown.contains(e.target)) {
+        if (isVizDropdownVisible && 
+            vizTypeDropdown && 
+            !vizTypeDropdown.contains(e.target) && 
+            !vizTypeBtn?.contains(e.target)) {
+            isVizDropdownVisible = false;
             vizTypeDropdown.classList.remove('visible');
-            vizTypeBtn.classList.remove('active');
+            vizTypeBtn?.classList.remove('active');
+        }
+    });
+}
+
+// Add updatePlayPauseButton function
+function updatePlayPauseButton() {
+    const playPauseBtn = document.getElementById('play-pause');
+    if (!playPauseBtn) return;
+    
+    playPauseBtn.innerHTML = isPlaying ? 
+        '<i class="fas fa-pause"></i>' : 
+        '<i class="fas fa-play"></i>';
+    
+    // Update button state
+    playPauseBtn.disabled = !audioElement || !playlist.length;
+}
+
+// Setup shuffle and repeat buttons
+function setupPlaylistControls() {
+    const shuffleBtn = document.querySelector('.shuffle-btn');
+    const repeatBtn = document.querySelector('.repeat-btn');
+    
+    // Setup shuffle button
+    shuffleBtn?.addEventListener('click', () => {
+        isShuffleActive = !isShuffleActive;
+        shuffleBtn.classList.toggle('active', isShuffleActive);
+        
+        if (isShuffleActive) {
+            // Save current track index
+            const currentTrack = playlist[currentTrackIndex];
+            
+            // Shuffle playlist
+            for (let i = playlist.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [playlist[i], playlist[j]] = [playlist[j], playlist[i]];
+            }
+            
+            // Find new index of current track
+            currentTrackIndex = playlist.findIndex(track => track === currentTrack);
+            
+            // Update playlist UI
+            createPlaylist();
+            updateNowPlayingInfo();
+        } else {
+            // Restore original order if needed
+            playlist.sort((a, b) => a.originalIndex - b.originalIndex);
+            createPlaylist();
         }
     });
+    
+    // Setup repeat button
+    repeatBtn?.addEventListener('click', () => {
+        isRepeatActive = !isRepeatActive;
+        repeatBtn.classList.toggle('active', isRepeatActive);
+    });
 }

templates/index.html

@@ -1,32 +1,46 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>3D Music Visualizer</title>
+    <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='img/favicon.svg') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 </head>
 <body>
+    <div class="loading-screen">
+        <div class="loader">
+            <div class="loader-circle"></div>
+            <div class="loader-text">Loading...</div>
+        </div>
+    </div>
+
     <header class="app-header">
         <div class="logo">
             <i class="fas fa-music"></i>
             <span>Soundscape</span>
         </div>
         <div class="header-controls">
-            <button class="header-btn upload-toggle-btn" title="Show upload">
+            <button class="header-btn upload-toggle-btn" title="Upload Music">
                 <i class="fas fa-cloud-upload-alt"></i>
+                <span class="tooltip">Upload Music</span>
             </button>
-            <button class="header-btn playlist-toggle-btn" title="Show playlist">
+            <button class="header-btn playlist-toggle-btn" title="Show Playlist">
                 <i class="fas fa-list"></i>
+                <span class="tooltip">Playlist</span>
             </button>
-            <button class="header-btn viz-type-btn" title="Change visualization">
+            <button class="header-btn viz-type-btn" title="Change Visualization">
                 <i class="fas fa-cube"></i>
+                <span class="tooltip">Visualization Style</span>
             </button>
-            <button class="header-btn theme-btn" title="Toggle theme">
+            <button class="header-btn theme-btn" title="Toggle Theme">
                 <i class="fas fa-moon"></i>
+                <span class="tooltip">Toggle Theme</span>
             </button>
         </div>
     </header>
@@ -40,6 +54,12 @@
                     <p>or click to browse</p>
                     <span class="file-types">Supports MP3, WAV, OGG, FLAC</span>
                 </div>
+                <div class="upload-progress">
+                    <div class="progress-bar">
+                        <div class="progress-fill"></div>
+                    </div>
+                    <div class="progress-text">0%</div>
+                </div>
                 <div id="file-name"></div>
             </div>
             <input type="file" id="audio-upload" accept=".mp3,.wav,.ogg,.flac" multiple>
@@ -51,20 +71,30 @@
                 <div class="playlist-controls">
                     <button class="playlist-btn shuffle-btn" title="Shuffle">
                         <i class="fas fa-random"></i>
+                        <span class="tooltip">Shuffle</span>
                     </button>
                     <button class="playlist-btn repeat-btn" title="Repeat">
                         <i class="fas fa-redo"></i>
+                        <span class="tooltip">Repeat</span>
                     </button>
                 </div>
             </div>
             <div class="tracks-list">
                 <!-- Tracks will be dynamically added here -->
             </div>
+            <div class="no-tracks-message">
+                <i class="fas fa-music"></i>
+                <p>No tracks added yet</p>
+                <button class="upload-btn">Upload Music</button>
+            </div>
         </div>
     </div>
     
-    <div id="controls" class="controls-container">
+    <div class="controls-container">
         <div class="now-playing-info">
+            <div class="track-artwork">
+                <i class="fas fa-music"></i>
+            </div>
             <div class="now-playing-text">
                 <div class="now-playing-title">No track selected</div>
                 <div class="now-playing-artist">Upload some music to begin</div>
@@ -75,28 +105,32 @@
             </div>
         </div>
 
-        <div class="progress-bar">
-            <div class="progress"></div>
-            <input type="range" class="seek-slider" min="0" max="100" value="0">
+        <div class="progress-container">
+            <div class="progress-bar">
+                <div class="progress"></div>
+                <div class="progress-handle"></div>
+                <input type="range" class="seek-slider" min="0" max="100" value="0">
+            </div>
         </div>
 
         <div class="music-controls">
-            <button class="control-btn previous-btn" disabled>
+            <button class="control-btn previous-btn" disabled title="Previous">
                 <i class="fas fa-backward"></i>
             </button>
-            <button class="control-btn play-pause-btn" id="play-pause" disabled>
+            <button class="control-btn play-pause-btn" id="play-pause" disabled title="Play">
                 <i class="fas fa-play"></i>
             </button>
-            <button class="control-btn next-btn" disabled>
+            <button class="control-btn next-btn" disabled title="Next">
                 <i class="fas fa-forward"></i>
             </button>
             
             <div class="volume-control">
-                <button class="volume-btn">
+                <button class="volume-btn" title="Volume">
                     <i class="fas fa-volume-up"></i>
                 </button>
                 <div class="volume-slider-container">
                     <div class="volume-progress"></div>
+                    <div class="volume-handle"></div>
                     <input type="range" id="volume" min="0" max="1" step="0.1" value="0.5">
                 </div>
             </div>
@@ -108,9 +142,42 @@
 
     <div class="viz-type-dropdown">
         <div class="viz-type-options">
-            <button data-type="sphere" class="active">Sphere</button>
-            <button data-type="bars">Circular Bars</button>
-            <button data-type="particles">Particles</button>
+            <button data-type="sphere" class="active">
+                <i class="fas fa-globe"></i>
+                <span>Sphere</span>
+            </button>
+            <button data-type="bars">
+                <i class="fas fa-chart-bar"></i>
+                <span>Circular Bars</span>
+            </button>
+            <button data-type="particles">
+                <i class="fas fa-sparkles"></i>
+                <span>Particles</span>
+            </button>
+        </div>
+    </div>
+
+    <div class="keyboard-shortcuts">
+        <div class="shortcuts-content">
+            <h3>Keyboard Shortcuts</h3>
+            <div class="shortcut-list">
+                <div class="shortcut-item">
+                    <span class="key">Space</span>
+                    <span class="action">Play/Pause</span>
+                </div>
+                <div class="shortcut-item">
+                    <span class="key">←</span>
+                    <span class="action">Previous Track</span>
+                </div>
+                <div class="shortcut-item">
+                    <span class="key">→</span>
+                    <span class="action">Next Track</span>
+                </div>
+                <div class="shortcut-item">
+                    <span class="key">M</span>
+                    <span class="action">Mute/Unmute</span>
+                </div>
+            </div>
         </div>
     </div>