Spaces:
Sleeping
Sleeping
| <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;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="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"> | |
| <i class="fas fa-list"></i> | |
| <span class="tooltip">Playlist</span> | |
| </button> | |
| <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"> | |
| <i class="fas fa-moon"></i> | |
| <span class="tooltip">Toggle Theme</span> | |
| </button> | |
| </div> | |
| </header> | |
| <div class="main-content"> | |
| <div class="upload-area" id="upload-area"> | |
| <div class="upload-content"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <div class="upload-text"> | |
| <h3>Drop your audio files here</h3> | |
| <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> | |
| </div> | |
| <div class="playlist-container"> | |
| <div class="playlist-header"> | |
| <h3>Playlist</h3> | |
| <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 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> | |
| </div> | |
| <div class="time-display"> | |
| <span class="current-time">0:00</span> / | |
| <span class="total-time">0:00</span> | |
| </div> | |
| </div> | |
| <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 title="Previous"> | |
| <i class="fas fa-backward"></i> | |
| </button> | |
| <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 title="Next"> | |
| <i class="fas fa-forward"></i> | |
| </button> | |
| <div class="volume-control"> | |
| <button class="volume-btn" title="Volume"> | |
| <i class="fas fa-volume-up"></i> | |
| </button> | |
| <div class="volume-slider-container"> | |
| <div class="volume-track"> | |
| <div class="volume-progress"></div> | |
| <div class="volume-handle"></div> | |
| <input type="range" id="volume" min="0" max="1" step="0.01" value="0.5"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="error-toast"></div> | |
| <div class="tooltip"></div> | |
| <div class="viz-type-dropdown"> | |
| <div class="viz-type-options"> | |
| <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> | |
| <script src="{{ url_for('static', filename='js/main.js') }}"></script> | |
| </body> | |
| </html> |