-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (104 loc) · 4.95 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<style>
.popup-container {
width: 400px;
padding: 12px;
}
.music-actions-container {
height: 40px;
}
.shadow {
box-shadow: 0 0 10px black inset;
}
.btn-primary-spacing {
margin-right: 2px;
}
.right-spacing {
margin-right: 4px;
}
.center-absolute {
top: 50%;
left: calc(50% - 14px);
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body class="popup-container">
<div class="player-body mb-3 d-none" id="extension-description">
<h4>WikiTunes</h4>
<p>
Want <em>quality</em> music but can't find the right playlist?
Want music that's relevant to what you're browsing?
Well we've got the thing for you!<br>
Generate a playlist today that uses your current webpage to find unique tunes.
</p>
</div>
<form id="generatePlaylist" class="position-relative d-none">
<div id="generateLoading" class="spinner-border d-none position-absolute center-absolute" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="form-group">
<label for="searchTypeSelect">Select a search type</label>
<div class="d-flex">
<select class="form-control d-flex right-spacing" id="searchTypeSelect">
<option value="tracks">Track Name</option>
<option value="lyrics">Lyrics</option>
</select>
<div>
<input class="btn btn-success submit d-flex" type="submit" value="Generate New Playlist">
</div>
</div>
</div>
</form>
<hr />
<div class="player-body">
<div id="open-player-notif" class="player-notif alert alert-danger" role="alert">
<span>
Oops!!! Looks like
<b>
Spotify's Desktop App or
<a class="mini-spotify-player-link" target="_blank" href="https://open.spotify.com/">Web Player</a>
</b>
is not running
</span>
</div>
<div class="d-none justify-content-around" id="music-player">
<div class="d-flex flex-column justify-content-between right-spacing">
<div id="player-song-description">
<div class="font-weight-bold" id="player-song-name">Song</div>
<div class="font-italic" id="player-artist-name">Artist</div>
</div>
<div class="d-flex justify-content-around">
<button class="btn btn-light btn-primary-spacing" id="prev-btn">
<svg id="prev-icon" height="24" viewBox="0 0 24 24" width="24" style="fill: currentColor;">
<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"></path>
</svg>
</button>
<button class="btn btn-light btn-primary-spacing d-none" id="resume-btn">
<svg width="24" height="24" viewBox="0 0 16 16" class="bi bi-play-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
</svg>
</button>
<button class="btn btn-light btn-primary-spacing d-none" id="pause-btn">
<svg width="24" height="24" viewBox="0 0 16 16" class="bi bi-pause-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"/>
</svg>
</button>
<button class="btn btn-light btn-primary-spacing" id="next-btn">
<svg id="next-icon" height="24" viewBox="0 0 24 24" width="24" style="fill:currentColor;">
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"></path>
<path d="M0 0h24v24H0z" fill="none"></path>
</svg>
</button>
</div>
</div>
<img class="shadow" id="player-song-image" src="" width="150" height="150">
</div>
</div>
<script type="module" src="js/popup.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>