|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Music Player</title> |
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="row mt-4"> |
|
|
<div class="col-md-8 offset-md-2"> |
|
|
<h1 class="text-center mb-4">Music Player</h1> |
|
|
<div class="search-container mb-4"> |
|
|
<input type="text" id="searchInput" class="form-control" placeholder="Search for songs..."> |
|
|
<button onclick="search()" class="btn btn-primary mt-2">Search</button> |
|
|
</div> |
|
|
|
|
|
<div id="searchResults" class="mb-4"></div> |
|
|
|
|
|
<div id="player-container" class="d-none"> |
|
|
<div id="player"></div> |
|
|
<div class="controls mt-3"> |
|
|
<h3 id="currentSongTitle" class="mb-3"></h3> |
|
|
<div class="d-flex justify-content-center"> |
|
|
<button onclick="previousTrack()" class="btn btn-secondary mx-2">Previous</button> |
|
|
<button onclick="togglePlayPause()" id="playPauseBtn" class="btn btn-primary mx-2">Play</button> |
|
|
<button onclick="nextTrack()" class="btn btn-secondary mx-2">Next</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="https://www.youtube.com/iframe_api"></script> |
|
|
<script src="{{ url_for('static', filename='js/player.js') }}"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
