-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
61 lines (56 loc) · 4.28 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./1.css">
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script src="./myScript.js"></script>
</head>
<body>
<div id="home">
<div id="header">
<div id="left-header">
<div id="icons">
<div id="icon1"></div>
<div id="icon2"></div>
<div id="icon3"></div>
</div>
</div>
</div>
<div id="main">
<div id="left-main"></div>
<div id="right-main">
<div id="content">
<p style="font-size: 40px;" id="song"></p>
</div>
</div>
</div>
<div id="bar">
<div id="bar-line"></div>
<div></div>
</div>
<audio id="audioTag" src="./Are You Waiting - Cr3on,Lost Capital.mp3"></audio>
<div id="display">
<span style="width: 50px;font-size: 12px;top: 0px;display: block;position: absolute;color: grey;text-align: center;" id="played-time">00:00</span>
<div id="right_part"></div>
<div id="controlPanel">
<div id="previous">
<svg t="1655487748404" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5727" width="20px" height="20px"><path d="M213.333333 512a52.92 52.92 0 0 0 25.78 45.666667l618.666667 373.28a53.333333 53.333333 0 0 0 80.886667-45.666667V138.72a53.333333 53.333333 0 0 0-80.886667-45.666667L239.133333 466.333333A52.92 52.92 0 0 0 213.333333 512z m-128 405.333333V106.666667a21.333333 21.333333 0 0 1 42.666667 0v810.666666a21.333333 21.333333 0 0 1-42.666667 0z" fill="#d81e06" p-id="5728"></path></svg>
</div>
<button id="play-audio" style="border: none;background-color: #fff;cursor: pointer">
<svg t="1655470069135" class="icon" id="pause" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5107" width="45px" height="45px"><path d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m196.546667 500.493333l-266.666667 176A37.333333 37.333333 0 0 1 384 688V336.033333a37.333333 37.333333 0 0 1 57.893333-31.16l266.666667 176a37.333333 37.333333 0 0 1 0 62.32z" fill="#d81e06" p-id="5108"></path></svg>
<svg t="1655488297889" class="icon" id="play" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5939" width="45px" height="45px"><path d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m106.666667 682.666666a21.333333 21.333333 0 0 1-21.333334-21.333333V320a21.333333 21.333333 0 0 1 42.666667 0v384a21.333333 21.333333 0 0 1-21.333333 21.333333z m-213.333334 0a21.333333 21.333333 0 0 1-21.333333-21.333333V320a21.333333 21.333333 0 0 1 42.666667 0v384a21.333333 21.333333 0 0 1-21.333334 21.333333z" fill="#d81e06" p-id="5940"></path></svg>
</button>
<div id="next">
<svg t="1655487676929" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5515" width="20px" height="20px"><path d="M810.666667 512a52.92 52.92 0 0 1-25.78 45.666667l-618.666667 373.28a53.333333 53.333333 0 0 1-80.886667-45.666667V138.72a53.333333 53.333333 0 0 1 80.886667-45.666667l618.666667 373.28A52.92 52.92 0 0 1 810.666667 512z m128 405.333333V106.666667a21.333333 21.333333 0 0 0-42.666667 0v810.666666a21.333333 21.333333 0 0 0 42.666667 0z" fill="#d81e06" p-id="5516"></path></svg>
</div>
</div>
<div id="left_part"></div>
<span style="width: 50px;font-size: 12px;top: 0px;right: 0px;display: block;position: absolute;color: grey;text-align: center;" id="play-time">00:00</span>
</div>
</div>
</body>
</html>