Spaces:
Sleeping
Sleeping
File size: 7,629 Bytes
e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 7bda8d1 31fbee6 7bda8d1 31fbee6 e1cef6b 31fbee6 e1cef6b 9870f48 31fbee6 9870f48 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 31fbee6 e1cef6b 9ecce35 e1cef6b 7bda8d1 31fbee6 7bda8d1 e1cef6b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 |
<!DOCTYPE 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;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> |