Added frontend

This commit is contained in:
cool.gitter.choco
2025-01-26 13:06:27 -06:00
parent 48db9a1606
commit bf0f50c440
10 changed files with 638 additions and 8 deletions

49
templates/index.html Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spotify Search</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<button id="settingsIcon" class="settings-icon">⚙️</button>
<div id="settingsSidebar" class="sidebar">
<div class="sidebar-header">
<h2>Credentials Management</h2>
<button id="closeSidebar" class="close-btn">&times;</button>
</div>
<div class="service-tabs">
<button class="tab-button active" data-service="spotify">Spotify</button>
<button class="tab-button" data-service="deezer">Deezer</button>
</div>
<div class="credentials-list"></div>
<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">
<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>
</div>
<div id="resultsContainer" class="results-grid"></div>
</div>
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>