Spaces:

PrometheusGroup
/

voidscape-noir

Running

App Files Files Community

PrometheusGroup commited on Dec 30, 2025

Commit

0df20ca

verified ·

1 Parent(s): 6ce77d4

use dark, moder, clean CSS and HTML5, use separate html and python files, draggable mini-player, with play/pause next/previous random shuffle icon, video "x of y", main page has a title header, search bar, under the search bar is a flex-grid (variable zoom upto 8x8 cards - use "+" and "-" buttons) displaying search results using CSS cards, video thumbnail, duration, video title, video author or channel name, green background signifying it is downloaded, each card will have a remove "X" circle button on the lower right corner, when user enters text and clicks search a modal opens and displays the results in a search grid (this search grid is to be the same format as the playlist flex-grid - css cards will have a red background for 'not downloaded', a remove "x" circle button to remove it from the search results list, user can click a card to add it to the playlist when selected a card in the search results display gets a green glowing border. Search modal needs a 'back' button, returning the user to the playlist, where they can press 'download new' to start the downloads. Theuser must be able to acess the search AND playlist while a video is playing. apply best practice to padding, margins, and layout.

Browse files

Files changed (4) hide show

app.py +80 -0
player.html +210 -0
script.js +120 -9
style.css +131 -2

app.py ADDED Viewed

	@@ -0,0 +1,80 @@

+```python
+from flask import Flask, render_template, request, jsonify
+app = Flask(__name__)
+# Mock data for demonstration
+mock_playlist = [
+    {
+        "id": 1,
+        "title": "Midnight City",
+        "artist": "M83",
+        "duration": "4:03",
+        "thumbnail": "http://static.photos/music/200x200/1",
+        "downloaded": True
+    },
+    {
+        "id": 2,
+        "title": "Blinding Lights",
+        "artist": "The Weeknd",
+        "duration": "3:20",
+        "thumbnail": "http://static.photos/music/200x200/2",
+        "downloaded": True
+    }
+]
+mock_search_results = [
+    {
+        "id": 3,
+        "title": "Save Your Tears",
+        "artist": "The Weeknd",
+        "duration": "3:35",
+        "thumbnail": "http://static.photos/music/200x200/3",
+        "downloaded": False
+    },
+    {
+        "id": 4,
+        "title": "Starboy",
+        "artist": "The Weeknd ft. Daft Punk",
+        "duration": "3:50",
+        "thumbnail": "http://static.photos/music/200x200/4",
+        "downloaded": False
+    }
+]
+@app.route('/')
+def index():
+    return render_template('player.html')
+@app.route('/api/playlist')
+def get_playlist():
+    return jsonify(mock_playlist)
+@app.route('/api/search', methods=['POST'])
+def search():
+    query = request.json.get('query', '')
+    # In a real app, you would search your database or API here
+    return jsonify(mock_search_results)
+@app.route('/api/add_to_playlist', methods=['POST'])
+def add_to_playlist():
+    song_id = request.json.get('id')
+    # Find the song in search results and add to playlist
+    for song in mock_search_results:
+        if song['id'] == song_id:
+            new_song = song.copy()
+            new_song['downloaded'] = False
+            mock_playlist.append(new_song)
+            return jsonify({"success": True})
+    return jsonify({"success": False}), 404
+@app.route('/api/remove_from_playlist', methods=['POST'])
+def remove_from_playlist():
+    song_id = request.json.get('id')
+    global mock_playlist
+    mock_playlist = [song for song in mock_playlist if song['id'] != song_id]
+    return jsonify({"success": True})
+if __name__ == '__main__':
+    app.run(debug=True)
+```

player.html ADDED Viewed

	@@ -0,0 +1,210 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VoidScape Player</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#f5f3ff',
+                            100: '#ede9fe',
+                            200: '#ddd6fe',
+                            300: '#c4b5fd',
+                            400: '#a78bfa',
+                            500: '#8b5cf6',
+                            600: '#7c3aed',
+                            700: '#6d28d9',
+                            800: '#5b21b6',
+                            900: '#4c1d95',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-12">
+        <div class="max-w-6xl mx-auto">
+            <h1 class="text-4xl font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-primary-500 to-secondary-500">
+                VoidScape Player
+            </h1>
+            <div class="relative mb-8">
+                <input type="text" id="search-input" placeholder="Search for music..."
+                    class="w-full bg-gray-800 border border-gray-700 rounded-lg px-6 py-4 text-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
+                <button id="search-btn" class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-primary-600 hover:bg-primary-700 rounded-lg px-4 py-2 transition-all">
+                    Search
+                </button>
+            </div>
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-semibold">Your Playlist</h2>
+                <div class="flex gap-2">
+                    <button id="zoom-out" class="p-2 bg-gray-800 rounded-lg hover:bg-gray-700">
+                        <i data-feather="minus"></i>
+                    </button>
+                    <button id="zoom-in" class="p-2 bg-gray-800 rounded-lg hover:bg-gray-700">
+                        <i data-feather="plus"></i>
+                    </button>
+                </div>
+            </div>
+            <div id="playlist-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                <!-- Playlist items will be inserted here -->
+            </div>
+        </div>
+    </main>
+    <!-- Search Modal -->
+    <div id="search-modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden overflow-y-auto">
+        <div class="container mx-auto px-4 py-12">
+            <div class="flex justify-between items-center mb-8">
+                <h2 class="text-2xl font-semibold">Search Results</h2>
+                <button id="back-btn" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg">
+                    Back to Playlist
+                </button>
+            </div>
+            <div id="search-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                <!-- Search results will be inserted here -->
+            </div>
+        </div>
+    </div>
+    <!-- Mini Player -->
+    <div id="mini-player" class="fixed bottom-4 right-4 bg-gray-800 border border-gray-700 rounded-lg shadow-xl w-80 overflow-hidden draggable">
+        <div class="p-4 cursor-move">
+            <div class="flex items-center gap-4">
+                <img id="mini-player-thumb" src="http://static.photos/music/200x200/1" class="w-12 h-12 rounded-lg object-cover">
+                <div class="flex-1 min-w-0">
+                    <h3 id="mini-player-title" class="font-medium truncate">Song Title</h3>
+                    <p id="mini-player-artist" class="text-sm text-gray-400 truncate">Artist Name</p>
+                </div>
+                <div class="flex items-center gap-2">
+                    <span id="mini-player-count" class="text-sm text-gray-400">1/10</span>
+                </div>
+            </div>
+            <div class="flex justify-between items-center mt-4">
+                <button id="shuffle-btn" class="p-2 text-gray-400 hover:text-white">
+                    <i data-feather="shuffle"></i>
+                </button>
+                <button id="prev-btn" class="p-2 text-gray-400 hover:text-white">
+                    <i data-feather="skip-back"></i>
+                </button>
+                <button id="play-btn" class="p-2 bg-primary-600 hover:bg-primary-700 rounded-full">
+                    <i data-feather="play"></i>
+                </button>
+                <button id="next-btn" class="p-2 text-gray-400 hover:text-white">
+                    <i data-feather="skip-forward"></i>
+                </button>
+                <button id="close-player" class="p-2 text-gray-400 hover:text-white">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+            <div class="mt-2 flex items-center gap-2">
+                <span class="text-xs text-gray-400">0:00</span>
+                <div class="flex-1 h-1 bg-gray-700 rounded-full">
+                    <div id="progress-bar" class="h-full bg-primary-500 rounded-full w-0"></div>
+                </div>
+                <span class="text-xs text-gray-400">3:45</span>
+            </div>
+        </div>
+    </div>
+    <script src="components/navbar.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Make mini-player draggable
+        const player = document.getElementById('mini-player');
+        let isDragging = false;
+        let offsetX, offsetY;
+        player.addEventListener('mousedown', (e) => {
+            if (e.target.closest('button')) return;
+            isDragging = true;
+            offsetX = e.clientX - player.getBoundingClientRect().left;
+            offsetY = e.clientY - player.getBoundingClientRect().top;
+            player.style.cursor = 'grabbing';
+        });
+        document.addEventListener('mousemove', (e) => {
+            if (!isDragging) return;
+            player.style.left = `${e.clientX - offsetX}px`;
+            player.style.top = `${e.clientY - offsetY}px`;
+        });
+        document.addEventListener('mouseup', () => {
+            isDragging = false;
+            player.style.cursor = 'grab';
+        });
+        // Modal functionality
+        const searchBtn = document.getElementById('search-btn');
+        const searchModal = document.getElementById('search-modal');
+        const backBtn = document.getElementById('back-btn');
+        searchBtn.addEventListener('click', () => {
+            searchModal.classList.remove('hidden');
+            // Here you would fetch search results and populate the search grid
+        });
+        backBtn.addEventListener('click', () => {
+            searchModal.classList.add('hidden');
+        });
+        // Zoom functionality
+        const zoomIn = document.getElementById('zoom-in');
+        const zoomOut = document.getElementById('zoom-out');
+        const playlistGrid = document.getElementById('playlist-grid');
+        let zoomLevel = 5; // Default to 5 columns
+        zoomIn.addEventListener('click', () => {
+            if (zoomLevel < 8) {
+                zoomLevel++;
+                updateGridColumns();
+            }
+        });
+        zoomOut.addEventListener('click', () => {
+            if (zoomLevel > 2) {
+                zoomLevel--;
+                updateGridColumns();
+            }
+        });
+        function updateGridColumns() {
+            playlistGrid.className = `grid gap-4 grid-cols-${zoomLevel}`;
+        }
+    </script>
+</body>
+</html>

script.js CHANGED Viewed

@@ -1,3 +1,4 @@
 document.addEventListener('DOMContentLoaded', () => {
     // Initialize animations
     const animatedElements = document.querySelectorAll('.fade-in, .slide-up');
@@ -15,12 +16,122 @@ document.addEventListener('DOMContentLoaded', () => {
     animatedElements.forEach(el => observer.observe(el));
-    // Theme toggle functionality
-    const themeToggle = document.getElementById('theme-toggle');
-    if (themeToggle) {
-        themeToggle.addEventListener('click', () => {
-            document.documentElement.classList.toggle('dark');
-            localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
-        });
-    }
-});

 document.addEventListener('DOMContentLoaded', () => {
     // Initialize animations
     const animatedElements = document.querySelectorAll('.fade-in, .slide-up');
     animatedElements.forEach(el => observer.observe(el));
+    // Load playlist
+    fetch('/api/playlist')
+        .then(response => response.json())
+        .then(data => renderPlaylist(data));
+    // Search functionality
+    document.getElementById('search-btn').addEventListener('click', () => {
+        const query = document.getElementById('search-input').value.trim();
+        if (query) {
+            fetch('/api/search', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ query })
+            })
+            .then(response => response.json())
+            .then(data => renderSearchResults(data));
+        }
+    });
+    // Playlist item click handler
+    document.getElementById('playlist-grid').addEventListener('click', (e) => {
+        if (e.target.classList.contains('remove-btn') || e.target.closest('.remove-btn')) {
+            const card = e.target.closest('.music-card');
+            const id = parseInt(card.dataset.id);
+            removeFromPlaylist(id);
+        }
+    });
+    // Search result click handler
+    document.getElementById('search-grid').addEventListener('click', (e) => {
+        const card = e.target.closest('.music-card');
+        if (!card) return;
+        if (e.target.classList.contains('remove-btn') || e.target.closest('.remove-btn')) {
+            card.remove();
+        } else {
+            const id = parseInt(card.dataset.id);
+            addToPlaylist(id);
+            card.classList.add('selected');
+            setTimeout(() => card.classList.remove('selected'), 1000);
+        }
+    });
+});
+function renderPlaylist(songs) {
+    const grid = document.getElementById('playlist-grid');
+    grid.innerHTML = '';
+    songs.forEach(song => {
+        const card = createMusicCard(song, true);
+        grid.appendChild(card);
+    });
+}
+function renderSearchResults(songs) {
+    const grid = document.getElementById('search-grid');
+    grid.innerHTML = '';
+    songs.forEach(song => {
+        const card = createMusicCard(song, false);
+        grid.appendChild(card);
+    });
+}
+function createMusicCard(song, isPlaylist) {
+    const card = document.createElement('div');
+    card.className = `music-card ${song.downloaded ? 'downloaded' : 'not-downloaded'}`;
+    card.dataset.id = song.id;
+    card.innerHTML = `
+        <img src="${song.thumbnail}" class="thumbnail">
+        <span class="duration">${song.duration}</span>
+        ${isPlaylist ? '<div class="remove-btn"><i data-feather="x"></i></div>' : ''}
+        <div class="info">
+            <div class="title">${song.title}</div>
+            <div class="artist">${song.artist}</div>
+        </div>
+    `;
+    return card;
+}
+function addToPlaylist(id) {
+    fetch('/api/add_to_playlist', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            fetch('/api/playlist')
+                .then(response => response.json())
+                .then(data => renderPlaylist(data));
+        }
+    });
+}
+function removeFromPlaylist(id) {
+    fetch('/api/remove_from_playlist', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ id })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            fetch('/api/playlist')
+                .then(response => response.json())
+                .then(data => renderPlaylist(data));
+        }
+    });
+}

style.css CHANGED Viewed

@@ -24,7 +24,6 @@ body {
 ::-webkit-scrollbar-thumb:hover {
     background: #444;
 }
 /* Animation classes */
 .fade-in {
     animation: fadeIn 0.5s ease-in-out;
@@ -48,4 +47,134 @@ body {
         opacity: 1;
         transform: translateY(0);
     }
-}

 ::-webkit-scrollbar-thumb:hover {
     background: #444;
 }
 /* Animation classes */
 .fade-in {
     animation: fadeIn 0.5s ease-in-out;
         opacity: 1;
         transform: translateY(0);
     }
+}
+/* Player styles */
+#mini-player {
+    transition: transform 0.2s;
+    z-index: 100;
+}
+#mini-player:hover {
+    transform: scale(1.02);
+}
+.draggable {
+    cursor: grab;
+    user-select: none;
+}
+/* Card styles */
+.music-card {
+    position: relative;
+    background: #1e293b;
+    border-radius: 0.75rem;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+.music-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+.music-card.downloaded {
+    background: linear-gradient(to bottom right, #1e293b, #14532d);
+}
+.music-card.not-downloaded {
+    background: linear-gradient(to bottom right, #1e293b, #7f1d1d);
+}
+.music-card.selected {
+    box-shadow: 0 0 0 2px #4ade80;
+}
+.music-card .thumbnail {
+    width: 100%;
+    aspect-ratio: 1;
+    object-fit: cover;
+}
+.music-card .duration {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    background: rgba(0, 0, 0, 0.7);
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+}
+.music-card .remove-btn {
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    background: rgba(239, 68, 68, 0.9);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+.music-card .remove-btn:hover {
+    transform: scale(1.1);
+}
+.music-card .info {
+    padding: 0.75rem;
+}
+.music-card .title {
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.music-card .artist {
+    font-size: 0.875rem;
+    color: #94a3b8;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+/* Modal styles */
+#search-modal {
+    backdrop-filter: blur(5px);
+}
+/* Grid columns */
+.grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+.grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+.grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+.grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+}