-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (83 loc) · 3.97 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kakeplay</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="static/bootstrap-4.5.3-dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="static/jquery-3.5.1.min.js"></script>
<script src="static/bootstrap-4.5.3-dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<link href="static/fontawesome-free-5.15.4-web/css/all.min.css" rel="stylesheet">
<script>
var SPOTIFY_PLAYBACK_DEVICE_NAME = "{{ playback_device_name }}";
</script>
<style>
body {background-color: #dcdad5; max-width: 500px; margin-left: auto; margin-right: auto;}
a:link {color: black;}
a:visited {color: black;}
.songresult { margin-bottom: 0px; max-width: 500px; overflow: hidden; white-space: nowrap; overflow: hidden; margin-left: auto; margin-right: auto;}
.songresult:nth-child(odd){background-color: #d1cfca}
.songresult_img {float: left; width: 50px; height: 50px; margin-right: 4px;}
.credits {display: inline-block; background-image: url('static/credit.png'); background-size: contain; width: 25px; text-align: center;}
.credits_search {float: right; margin-top: 14px;}
{% if not admin %}
.deletesongbtn {display: none}
{% end %}
.nav {display: none;}
a.nav-link {background-color: darkgrey !important; color: black;}
a.nav-link.active {background-color: white !important}
</style>
</head>
<body>
<div style="float: left;">
Hej, {{ name }}
{% if admin %} (Admin) {% end %}
<div class="credits" id="credit_saldo" style="">{{ credits }}</div>
</div>
<div style="text-align: right;">
<a href="logout" class="fas fa-sign-out-alt"></a></p>
</div>
<!-- Search form, always visible -->
<form id="searchform" action="/search" method="post" style="text-align: center;">
<input type="text" name="query" style="width: 215px;"/>
<input type="submit" value="Sök" style="width: 80px;"/>
</form>
<!-- Tab list -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="spotify-tab" data-toggle="tab" href="#spotify-results" role="tab" aria-controls="spotify-results" aria-selected="true">Spotify-sökresultat</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="mp3-tab" data-toggle="tab" href="#mp3-results" role="tab" aria-controls="mp3-results" aria-selected="false">MP3-sökresultat</a>
</li>
</ul>
<!-- Search results -->
<div class="tab-content">
<div class="tab-pane fade show active" id="spotify-results" role="tabpanel" aria-labelledby="spotify-tab"></div>
<div class="tab-pane" id="mp3-results" role="tabpanel" aria-labelledby="mp3-tab"></div>
</div>
<div id="currentlyPlaying" style="text-align: center;">
</div>
<div class="queue"></div>
<div style="position: fixed; bottom: 0px; left: 0px; width: 100%;">
<!-- Volume slider, always visible -->
<div style="max-width: 500px; margin: auto; display: flex; justify-content: center; flex-wrap: wrap;">
<div style="">
<i class="fas fa-volume-up" style="font-size: 1.2em;"></i>
<input type="range" min="1" max="100" value="50" id="volume" style="width: 245px; vertical-align: top">
</div>
<div id="volumeindicator" style="text-align: left; margin-top: -3px;"></div>
{% if admin %}
<!-- Play/pause buttons -->
<div style="text-align: left; float: left; padding-left: 10px; font-size: 1.2em; margin-top: -4px;">
<i data-action="play" style="cursor: pointer;" class="mediacontrolbtn fas fa-play"></i>
<i data-action="pause" style="cursor: pointer;" class="mediacontrolbtn fas fa-pause"></i>
<i data-action="prev" style="cursor: pointer;" class="mediacontrolbtn fas fa-step-backward"></i>
<i data-action="next" style="cursor: pointer;" class="mediacontrolbtn fas fa-step-forward"></i>
</div>
{% end %}
</div>
</div>
<script src="static/scripts.js"></script>
</body>
</html>