-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (102 loc) · 6.24 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="icon" href="https://i.pinimg.com/originals/75/a8/7e/75a87e9fcc8f899d53a82773c3f08e3d.jpg" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.3/jsmediatags.js"></script>
<script type="text/javascript" src="/js/qrcode.min.js"></script>
<script type="text/javascript" src="/js/jsQR.js"></script>
<title>Music Party 🎉</title>
</head>
<body style="display: flex; flex-direction: column; height: 100vh; width: 100vw; margin: 0; color: #fff;">
<div style="display: flex; flex-direction: row; height: 100%; width: 100%; overflow: hidden;">
<div style="width: 20%; display: flex; flex-direction: column; flex: 2; color: #fff; background-color: var(--primary-bg-color);font-family: Gill Sans, Seravek, Trebuchet MS, sans-serif;padding: 5px 18px;" class="listeners">
<div style="margin: 10px 0">
<span id="peer-type">
</span>
</div>
<div id="party-title" style="font-family: inherit; font-size: 2em; padding: 0 0 9px;">
Music Party
</div>
<button id="room-create" class="button-style" state="inparty" type="button">
Start a Party 🎉
</button>
<hr style="width: 100%; border-top: 1px solid #2f2f2f; margin: 15px 0 10px;">
<div>
<form id="room-input-form" style="position: relative; margin-bottom: 10px; display: flex;">
<input id="room-input" type="text" placeholder="Enter Room Number" />
</form>
</div>
<button id="room-join" class="button-style-leave" state="inparty" type="button">
Join a Party
</button>
</div>
<div style="width: 80%; flex: 8; display: flex; flex-direction: column; align-items: center; overflow-y: scroll; background-color: var(--secondary-bg-color);padding: 5px;">
<button id="add-song" style="display: flex; justify-content: space-between; align-items: center; font-family: Gill Sans, Seravek, Trebuchet MS, sans-serif; font-size: 20px;width: 40%; color: #fff;border:none;border-radius: 5px;margin-top: 10px; padding: 9px 13px;">
Add a Song to the Playlist
<li class="fas fa-plus fa-md"></li>
</button>
<div style="width: 100%; display: flex; flex-direction: row; margin: 25px 0 0;">
<div id="playlist" style="width: 100%; overflow-y: scroll; padding: 0 5px;">
<h4>Playlist</h4>
<hr style="width: 100%; border-top: 1px solid #2f2f2f;">
</div>
</div>
</div>
</div>
<footer class="player">
<div style="width: 30%; display: flex; align-items: center;">
<div style="height: 60px; width: 60px; margin: 0 10px">
<img id="song-img"
style="border-radius: 50%; height: 100%; width: 100%; visibility: hidden;"
src=""
/>
</div>
<div style="width: 55%; display: flex; flex-direction: column; align-items: flex-start;">
<div style="overflow: hidden; width: 100%;">
<p id="song-title" style="font-size: 1.2em; color: #fff; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
</p>
</div>
<div style="overflow: hidden; width: 100%;">
<p id="song-artist" style="font-size: .9em; color: #dedede; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
</p>
</div>
</div>
</div>
<div style="width: 40%; height: 100%; display: flex; flex-direction: column;">
<div style="display: flex; margin: auto;">
<button id="song-skip-backward" class="btn">
<li class="fas fa-step-backward fa-2x"></li>
</button>
<button id="play-button" playing="true" class="btn">
<i class="fas fa-play fa-3x"></i>
</button>
<button id="song-skip-forward" class="btn">
<li class="fas fa-step-forward fa-2x"></li>
</button>
</div>
<div style="display: flex; align-items: center; padding-top: 15px; color: #fff; ">
<audio autoplay preload="none" id="audio-player"></audio>
<time style="width: 50px" class="time_elapsed" datetime="PT2M30S">0:00</time>
<input id="slider" type="range" min="0" max="100" value="0" step="1">
<time style="width: 50px" class="time_remaining" datetime="PT2M30S">-2:30</time>
</div>
</div>
<div style="width: 30%; display: flex; justify-content: flex-end;">
<div style="display: flex; align-items: center;width: 50%">
<input id="volume-range" type="range" min="0.0" max="1.0" step="0.01" value="0.5"/>
<li style="color: #fff; padding: 10px" class="fas fa-volume-up fa-lg"></li>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
<script src="js/Sending.js"></script>
<script src="js/Player.js"></script>
<script src="js/connection.js"></script>
<script src="js/index.js"></script>
</body>
</html>