design rework

static/player.js

@@ -971,4 +971,80 @@ function escapeHtml(unsafe) {
         .replace(/>/g, ">")
         .replace(/"/g, """)
         .replace(/'/g, "'");
-}
+}
+
+// Mobile navigation handling
+function initializeMobileNav() {
+    const menuToggle = document.getElementById('menu-toggle');
+    const sidebar = document.querySelector('.sidebar');
+    const overlay = document.getElementById('sidebar-overlay');
+    const mobileNavLinks = document.querySelectorAll('.mobile-nav a');
+
+    menuToggle.addEventListener('click', toggleSidebar);
+    overlay.addEventListener('click', closeSidebar);
+
+    mobileNavLinks.forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            const view = e.currentTarget.dataset.view;
+            switchView(view);
+            closeSidebar();
+        });
+    });
+
+    // Handle swipe gestures
+    let touchStartX = 0;
+    let touchEndX = 0;
+
+    document.addEventListener('touchstart', e => {
+        touchStartX = e.changedTouches[0].screenX;
+    }, false);
+
+    document.addEventListener('touchend', e => {
+        touchEndX = e.changedTouches[0].screenX;
+        handleSwipe();
+    }, false);
+
+    function handleSwipe() {
+        const swipeThreshold = 50;
+        const diff = touchEndX - touchStartX;
+
+        if (Math.abs(diff) < swipeThreshold) return;
+
+        if (diff > 0) { // Swipe right
+            if (touchStartX < 30) { // Only if swipe starts near the left edge
+                openSidebar();
+            }
+        } else { // Swipe left
+            closeSidebar();
+        }
+    }
+}
+
+function toggleSidebar() {
+    const sidebar = document.querySelector('.sidebar');
+    const overlay = document.getElementById('sidebar-overlay');
+    sidebar.classList.toggle('active');
+    overlay.classList.toggle('active');
+}
+
+function openSidebar() {
+    const sidebar = document.querySelector('.sidebar');
+    const overlay = document.getElementById('sidebar-overlay');
+    sidebar.classList.add('active');
+    overlay.classList.add('active');
+}
+
+function closeSidebar() {
+    const sidebar = document.querySelector('.sidebar');
+    const overlay = document.getElementById('sidebar-overlay');
+    sidebar.classList.remove('active');
+    overlay.classList.remove('active');
+}
+
+// Update the initialization code
+document.addEventListener('DOMContentLoaded', function() {
+    initializeAudioPlayer();
+    initializeMobileNav();
+    // ... rest of your initialization code
+});

static/style.css

@@ -1,3 +1,11 @@
+:root {
+    --sidebar-width: 250px;
+    --player-height: 100px;
+    --primary-color: #1a73e8;
+    --background-color: #f0f2f5;
+    --card-background: white;
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -6,745 +14,193 @@
 
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: #f0f2f5;
+    background: var(--background-color);
     color: #333;
+    overflow: hidden;
 }
 
 .container {
     display: grid;
-    grid-template-columns: 250px 1fr;
-    grid-template-rows: 1fr auto;
-    gap: 1rem;
+    grid-template-columns: var(--sidebar-width) 1fr;
+    grid-template-rows: 1fr var(--player-height);
     height: 100vh;
-    padding: 1rem;
-}
-
-.music-player {
-    grid-column: 1 / -1;
-    background: white;
-    border-radius: 12px;
-    padding: 2rem;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.player-header h1 {
-    margin-bottom: 2rem;
-    color: #1a73e8;
-}
-
-.now-playing {
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-    margin-bottom: 2rem;
+    transition: all 0.3s ease;
 }
 
-#album-art {
-    width: 200px;
-    height: 200px;
-    border-radius: 8px;
-    object-fit: cover;
+.mobile-nav {
+    display: none;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: var(--card-background);
+    padding: 0.5rem;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
 }
 
-.track-info {
-    flex: 1;
-    cursor: pointer;
+.mobile-nav ul {
     display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-}
-
-#track-title {
-    font-size: 1.5rem;
-    font-weight: bold;
-    margin-bottom: 0.5rem;
+    justify-content: space-around;
+    list-style: none;
 }
 
-#track-artist, #track-album {
+.mobile-nav a {
     color: #666;
-    margin-bottom: 0.5rem;
-}
-
-.player-controls {
-    width: 100%;
-}
-
-.time-control {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 1rem;
-}
-
-#seek-slider {
-    flex: 1;
-}
-
-.control-buttons {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-}
-
-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 1.5rem;
-    color: #1a73e8;
-    padding: 0.5rem;
-    border-radius: 50%;
-    transition: background-color 0.3s;
-}
-
-button:hover {
-    background-color: #f0f2f5;
-}
-
-.volume-control {
+    text-decoration: none;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 0.5rem;
-    margin-left: 2rem;
+    font-size: 0.8rem;
 }
 
-#volume-slider {
-    width: 100px;
+.mobile-nav i {
+    font-size: 1.2rem;
+    margin-bottom: 0.2rem;
 }
 
 .sidebar {
-    background: white;
-    border-radius: 12px;
+    background: var(--card-background);
     padding: 1rem;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.nav-menu, .playlist-menu {
-    list-style: none;
-    padding: 0;
-    margin: 1rem 0;
-}
-
-.nav-menu li a, .playlist-menu li a {
-    display: block;
-    padding: 0.75rem 1rem;
-    color: #333;
-    text-decoration: none;
-    border-radius: 6px;
-    transition: background-color 0.3s;
-}
-
-.nav-menu li a:hover, .playlist-menu li a:hover {
-    background-color: #f0f2f5;
-}
-
-.nav-menu li a.active {
-    background-color: #e8f0fe;
-    color: #1a73e8;
-}
-
-.btn-new-playlist {
-    width: 100%;
-    padding: 0.75rem;
-    background: none;
-    border: 1px dashed #1a73e8;
-    color: #1a73e8;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.3s;
-}
-
-.btn-new-playlist:hover {
-    background: #e8f0fe;
+    overflow-y: auto;
+    transition: transform 0.3s ease;
 }
 
 .main-content {
-    background: white;
-    border-radius: 12px;
     padding: 1rem;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     overflow-y: auto;
+    background: var(--background-color);
 }
 
-.view-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 2rem;
-}
-
-.search-box {
-    position: relative;
-}
-
-.search-box input {
-    padding: 0.5rem 2rem 0.5rem 1rem;
-    border: 1px solid #ddd;
-    border-radius: 20px;
-    width: 200px;
-}
-
-.search-box i {
-    position: absolute;
-    right: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #666;
-}
-
-.album-grid, .artist-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-    gap: 1.5rem;
+.music-player {
+    grid-column: 1 / -1;
+    background: var(--card-background);
     padding: 1rem;
-}
-
-.album-card, .artist-card {
-    text-align: center;
-    cursor: pointer;
-    transition: transform 0.3s;
-}
-
-.album-card:hover, .artist-card:hover {
-    transform: translateY(-5px);
-}
-
-.album-art, .artist-image {
-    width: 180px;
-    height: 180px;
-    border-radius: 8px;
-    margin-bottom: 0.5rem;
-    object-fit: cover;
-}
-
-.track-list {
     display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.music-item {
-    display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding: 0.75rem;
-    border-radius: 6px;
-    transition: background-color 0.3s;
-}
-
-.music-item:hover {
-    background-color: #f0f2f5;
-}
-
-.music-item.playing {
-    background-color: #e8f0fe;
-    color: #1a73e8;
-}
-
-input[type="range"] {
-    -webkit-appearance: none;
-    appearance: none;
-    height: 5px;
-    background: #ddd;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 15px;
-    height: 15px;
-    background: #1a73e8;
-    border-radius: 50%;
-}
-
-.modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    align-items: center;
-    justify-content: center;
-}
-
-.modal-content {
-    background: white;
-    padding: 2rem;
-    border-radius: 12px;
-    width: 400px;
-}
-
-.modal-content input {
-    width: 100%;
-    padding: 0.75rem;
-    margin: 1rem 0;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-}
-
-.modal-buttons {
-    display: flex;
-    justify-content: flex-end;
     gap: 1rem;
+    height: var(--player-height);
 }
 
-.modal-buttons button {
-    padding: 0.5rem 1rem;
-    border-radius: 6px;
-    cursor: pointer;
-}
-
-#save-playlist {
-    background: #1a73e8;
-    color: white;
-    border: none;
-}
-
-#cancel-playlist {
-    background: none;
-    border: 1px solid #ddd;
-}
-
-.track-actions {
-    display: flex;
-    align-items: center;
-}
-
-.track-name {
-    font-weight: 500;
-}
-
-.track-artist {
-    color: #666;
-    font-size: 0.9em;
-}
-
-.playlist-menu-popup {
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    z-index: 1000;
-    min-width: 200px;
-}
-
-.menu-items {
-    padding: 0.5rem;
-}
-
-.menu-item {
-    padding: 0.75rem 1rem;
-    cursor: pointer;
-    border-radius: 4px;
+.now-playing {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-}
-
-.menu-item:hover {
-    background-color: #f0f2f5;
-}
-
-.notification {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background: #1a73e8;
-    color: white;
-    padding: 0.75rem 1.5rem;
-    border-radius: 4px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    animation: slide-in 0.3s ease-out;
-    z-index: 1000;
-}
-
-.notification.fade-out {
-    animation: fade-out 0.3s ease-out;
-}
-
-.playlist-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 1.5rem;
-    padding: 1rem;
-}
-
-.playlist-card {
-    background: white;
-    border-radius: 8px;
-    padding: 1rem;
-    text-align: center;
-    cursor: pointer;
-    position: relative;
-    transition: transform 0.3s;
-}
-
-.playlist-card:hover {
-    transform: translateY(-5px);
+    gap: 1rem;
+    flex: 1;
 }
 
-.playlist-art {
-    width: 150px;
-    height: 150px;
-    background: #f0f2f5;
+#album-art {
+    width: 60px;
+    height: 60px;
     border-radius: 8px;
-    margin: 0 auto 1rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.playlist-art i {
-    font-size: 3rem;
-    color: #1a73e8;
-}
-
-.delete-playlist {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    background: none;
-    border: none;
-    color: #666;
-    padding: 0.5rem;
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity 0.3s;
+    object-fit: cover;
 }
 
-.playlist-card:hover .delete-playlist {
-    opacity: 1;
-}
+@media (max-width: 768px) {
+    :root {
+        --sidebar-width: 0px;
+        --player-height: 80px;
+    }
 
-@keyframes slide-in {
-    from {
-        transform: translateX(100%);
-        opacity: 0;
+    .container {
+        grid-template-columns: 1fr;
     }
-    to {
-        transform: translateX(0);
-        opacity: 1;
+
+    .sidebar {
+        position: fixed;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 280px;
+        z-index: 1001;
+        transform: translateX(-100%);
     }
-}
 
-@keyframes fade-out {
-    from {
+    .sidebar.active {
         transform: translateX(0);
-        opacity: 1;
-    }
-    to {
-        transform: translateX(100%);
-        opacity: 0;
     }
-}
-
-.menu-trigger {
-    padding: 0.5rem;
-    opacity: 0;
-    transition: opacity 0.3s;
-    color: #666;
-}
-
-.music-item:hover .menu-trigger {
-    opacity: 1;
-}
-
-.context-menu {
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    z-index: 1000;
-    min-width: 200px;
-    overflow: hidden;
-}
-
-.menu-items {
-    padding: 0.5rem 0;
-}
-
-.menu-item {
-    padding: 0.75rem 1rem;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    transition: background-color 0.2s;
-}
-
-.menu-item:hover {
-    background-color: #f0f2f5;
-}
-
-.menu-item i {
-    width: 20px;
-    text-align: center;
-    color: #666;
-}
-
-.menu-separator {
-    height: 1px;
-    background-color: #eee;
-    margin: 0.5rem 0;
-}
-
-.lyrics-container {
-    flex: 1;
-    max-width: 400px;
-    margin-left: 2rem;
-    display: flex;
-    flex-direction: column;
-    max-height: 200px;
-}
-
-.lyrics-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-}
-
-.lyrics-toggle {
-    background: none;
-    border: 1px solid #ddd;
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
-    font-size: 0.9rem;
-}
-
-.lyrics-content {
-    flex: 1;
-    overflow-y: auto;
-    padding-right: 1rem;
-    line-height: 1.6;
-    scroll-behavior: smooth;
-    padding: 1rem;
-}
-
-.lyrics-line {
-    margin-bottom: 0.5rem;
-    transition: all 0.3s ease;
-    cursor: pointer;
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
-    opacity: 0.7;
-}
-
-.lyrics-line:hover {
-    background-color: #f0f2f5;
-    opacity: 1;
-}
-
-.lyrics-line.active {
-    color: #1a73e8;
-    font-weight: bold;
-    opacity: 1;
-    background-color: #e8f0fe;
-}
-
-.playlist-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem;
-    background: #f8f9fa;
-    border-radius: 8px;
-    margin-bottom: 1rem;
-}
-
-.playlist-info {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-}
 
-.playlist-icon {
-    font-size: 2.5rem;
-    color: #1a73e8;
-    background: #e8f0fe;
-    padding: 1rem;
-    border-radius: 8px;
-}
-
-.play-playlist {
-    background: #1a73e8;
-    color: white;
-    padding: 0.75rem 1.5rem;
-    border-radius: 20px;
-    font-size: 1rem;
-}
-
-.play-playlist:hover {
-    background: #1557b0;
-}
-
-.playlist-count {
-    color: #666;
-    font-size: 0.9em;
-    margin-left: 0.5rem;
-}
-
-#playlist-list a {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-#playlist-list i {
-    margin-right: 0.5rem;
-}
-
-.album-art-container, .artist-art-container {
-    position: relative;
-    width: 180px;
-    height: 180px;
-    margin-bottom: 0.5rem;
-}
+    .mobile-nav {
+        display: block;
+        height: 60px;
+    }
 
-.album-art, .artist-image {
-    width: 100%;
-    height: 100%;
-    border-radius: 8px;
-    object-fit: cover;
-}
+    .main-content {
+        padding-bottom: 60px; /* Space for mobile nav */
+    }
 
-.play-overlay {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: rgba(26, 115, 232, 0.9);
-    color: white;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: opacity 0.3s;
-    cursor: pointer;
-    border: none;
-    font-size: 1.2rem;
-}
+    .music-player {
+        padding: 0.5rem;
+    }
 
-.album-art-container:hover .play-overlay,
-.artist-art-container:hover .play-overlay {
-    opacity: 1;
-}
+    .player-controls {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
 
-.album-info, .artist-info {
-    cursor: pointer;
-}
+    .volume-control {
+        display: none;
+    }
 
-.album-card, .artist-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-}
+    .lyrics-container {
+        display: none;
+    }
 
-.artist-image {
-    background-color: #e8f0fe;
-}
+    /* Add hamburger menu button */
+    .menu-toggle {
+        display: block;
+        position: fixed;
+        top: 1rem;
+        left: 1rem;
+        z-index: 1002;
+        background: var(--primary-color);
+        color: white;
+        border: none;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        cursor: pointer;
+    }
 
-.artist-image[src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+PHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNlOWVjZWYiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgc3R5bGU9ImZvbnQtZmFtaWx5OiBBcmlhbDsgZm9udC1zaXplOiAyMHB4OyBmaWxsOiAjNmM3NTdkOyBkb21pbmFudC1iYXNlbGluZTogbWlkZGxlOyB0ZXh0LWFuY2hvcjogbWlkZGxlOyI+Tm8gQWxidW0gQXJ0PC90ZXh0Pjwvc3ZnPg=="] {
-    background: #e8f0fe;
-    padding: 2rem;
-}
+    /* Add overlay for sidebar */
+    .sidebar-overlay {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 1000;
+    }
 
-.existing-playlists {
-    max-height: 200px;
-    overflow-y: auto;
-    margin-bottom: 1rem;
-    border-bottom: 1px solid #eee;
+    .sidebar-overlay.active {
+        display: block;
+    }
 }
 
-.existing-playlist-item {
+.track-list .music-item {
     padding: 0.75rem;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    border-radius: 4px;
-    transition: background-color 0.2s;
-}
-
-.existing-playlist-item:hover {
-    background-color: #f0f2f5;
-}
-
-.existing-playlist-item i {
-    color: #1a73e8;
-}
-
-.new-playlist-section {
-    padding-top: 1rem;
-}
-
-.new-playlist-section h3 {
-    margin-bottom: 0.75rem;
-    font-size: 1rem;
-    color: #666;
-}
-
-.album-header {
-    padding: 2rem;
-    margin-bottom: 2rem;
-    background: #f8f9fa;
-    border-radius: 12px;
-}
-
-.album-info-large {
-    display: flex;
-    gap: 2rem;
-    align-items: flex-start;
-}
-
-.album-art-large {
-    width: 200px;
-    height: 200px;
     border-radius: 8px;
-    object-fit: cover;
-}
-
-.album-details {
-    flex: 1;
-}
-
-.album-details h2 {
-    margin-bottom: 0.5rem;
-    font-size: 2rem;
-}
-
-.album-details p {
-    color: #666;
-    margin-bottom: 0.5rem;
 }
 
-.play-album-btn {
-    margin-top: 1rem;
-    background: #1a73e8;
-    color: white;
-    padding: 0.75rem 1.5rem;
-    border-radius: 20px;
-    font-size: 1rem;
+.album-grid, .artist-grid {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 }
 
-.play-album-btn:hover {
-    background: #1557b0;
+.album-art-container, .artist-art-container {
+    width: 150px;
+    height: 150px;
 }
 
-.track-number {
-    color: #666;
-    margin-right: 1rem;
-    min-width: 2rem;
-}
+@media (max-width: 480px) {
+    .album-grid, .artist-grid {
+        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    }
 
-.music-item .track-info {
-    display: flex;
-    align-items: center;
+    .album-art-container, .artist-art-container {
+        width: 120px;
+        height: 120px;
+    }
 }
  

templates/index.html

@@ -8,6 +8,33 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 </head>
 <body>
+    <button class="menu-toggle" id="menu-toggle">
+        <i class="fas fa-bars"></i>
+    </button>
+
+    <div class="sidebar-overlay" id="sidebar-overlay"></div>
+
+    <nav class="mobile-nav">
+        <ul>
+            <li><a href="#" data-view="all">
+                <i class="fas fa-music"></i>
+                <span>Songs</span>
+            </a></li>
+            <li><a href="#" data-view="albums">
+                <i class="fas fa-compact-disc"></i>
+                <span>Albums</span>
+            </a></li>
+            <li><a href="#" data-view="artists">
+                <i class="fas fa-user"></i>
+                <span>Artists</span>
+            </a></li>
+            <li><a href="#" data-view="playlists">
+                <i class="fas fa-list"></i>
+                <span>Playlists</span>
+            </a></li>
+        </ul>
+    </nav>
+
     <div class="container">
         <div class="sidebar">
             <nav>