89 lines
3.4 KiB
HTML
89 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Spotizerr</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
</head>
|
|
<body>
|
|
<div id="settingsSidebar" class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>Settings</h2>
|
|
<button id="closeSidebar" class="close-btn">×</button>
|
|
</div>
|
|
|
|
<!-- Account Configuration Section -->
|
|
<div class="account-config">
|
|
<div class="config-item">
|
|
<label>Active Spotify Account:</label>
|
|
<select id="spotifyAccountSelect"></select>
|
|
</div>
|
|
<div class="config-item">
|
|
<label>Active Deezer Account:</label>
|
|
<select id="deezerAccountSelect"></select>
|
|
</div>
|
|
<div class="config-item">
|
|
<label>Download Fallback:</label>
|
|
<label class="switch">
|
|
<input type="checkbox" id="fallbackToggle">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service Tabs -->
|
|
<div class="service-tabs">
|
|
<button class="tab-button active" data-service="spotify">Spotify</button>
|
|
<button class="tab-button" data-service="deezer">Deezer</button>
|
|
</div>
|
|
|
|
<!-- Credentials List -->
|
|
<div class="credentials-list"></div>
|
|
|
|
<!-- Credentials Form -->
|
|
<div class="credentials-form">
|
|
<h3>Add/Edit Credential</h3>
|
|
<form id="credentialForm">
|
|
<div class="form-group">
|
|
<label>Name:</label>
|
|
<input type="text" id="credentialName" required>
|
|
</div>
|
|
<div id="serviceFields"></div>
|
|
<button type="submit" class="save-btn">Save</button>
|
|
</form>
|
|
</div>
|
|
<div id="sidebarError" class="error"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="search-header">
|
|
<button id="settingsIcon" class="settings-icon">
|
|
<img src="{{ url_for('static', filename='images/settings.svg') }}" alt="Settings">
|
|
</button>
|
|
<input type="text" class="search-input" placeholder="Search tracks, albums, or playlists..." id="searchInput">
|
|
<select class="search-type" id="searchType">
|
|
<option value="track">Tracks</option>
|
|
<option value="album">Albums</option>
|
|
<option value="playlist">Playlists</option>
|
|
</select>
|
|
<button class="search-button" id="searchButton">Search</button>
|
|
<button id="queueIcon" class="queue-icon" onclick="toggleDownloadQueue()">
|
|
<img src="{{ url_for('static', filename='images/queue.svg') }}" alt="Download Queue">
|
|
</button>
|
|
</div>
|
|
<div id="resultsContainer" class="results-grid"></div>
|
|
</div>
|
|
|
|
<!-- Download Queue Sidebar -->
|
|
<div id="downloadQueue" class="sidebar right">
|
|
<div class="sidebar-header">
|
|
<h2>Download Queue</h2>
|
|
<button class="close-btn" onclick="toggleDownloadQueue()">×</button>
|
|
</div>
|
|
<div id="queueItems"></div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
|
</body>
|
|
</html> |