-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
113 lines (98 loc) · 9.19 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Music Player</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Annie Wu">
<meta name="description" content="A minimal and simple music player UI design">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
<link href="./css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="player-container">
<div class="player">
<div class="top-controls">
<div id="back">
<svg width="13" height="22" viewBox="0 0 13 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.85762 11.0046L11.5487 2.31352C11.8492 2.01301 11.8492 1.52582 11.5487 1.22531C11.2482 0.924896 10.761 0.924896 10.4605 1.22531L1.22531 10.4605C0.924896 10.761 0.924896 11.2482 1.22531 11.5487L10.4605 20.784C10.7663 21.0792 11.2535 21.0708 11.5487 20.765C11.8368 20.4668 11.8368 19.994 11.5487 19.6958L2.85762 11.0046Z"
fill="#CC7E85" stroke="#CC7E85" />
</svg>
</div>
<div id="heart" onclick="toggleColor('heart')">
<svg width="25" height="22" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M17.6372 1C16.4078 1 15.2808 1.38956 14.2873 2.15788C13.3349 2.89447 12.7008 3.83265 12.3274 4.51487C11.9541 3.83261 11.32 2.89447 10.3676 2.15788C9.37412 1.38956 8.24704 1 7.0177 1C3.58708 1 1 3.80606 1 7.52717C1 11.5473 4.22757 14.2977 9.11367 18.4616C9.94341 19.1687 10.8839 19.9702 11.8614 20.825C11.9903 20.9379 12.1558 21 12.3274 21C12.4991 21 12.6646 20.9379 12.7935 20.8251C13.7711 19.9701 14.7115 19.1687 15.5417 18.4612C20.4273 14.2977 23.6549 11.5473 23.6549 7.52717C23.6549 3.80606 21.0678 1 17.6372 1Z"
stroke="#CC7E85" stroke-width="2" />
</svg>
</div>
</div>
<div class="album-cover">
<img src="./img/dreamy-nights-album-cover.jpg" alt="album cover">
</div>
<div class="song-info">
<p class="title">dreamy night</p>
<p class="artist">Us the Duo</p>
</div>
<div class="song-timeline">
<span id="current-time" class="time-stamp">0:00</span>
<input type="range" id="seek-slider" max="100" value="0">
<span id="duration" class="time-stamp">0:00</span>
</div>
<div class="bottom-controls">
<div id="repeat" onclick="toggleColor('repeat')">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M19 10.9089C18.447 10.9089 18 11.3162 18 11.818C18 13.3217 16.654 14.5453 15 14.5453H7V11.818C7 11.4689 6.77902 11.1498 6.43402 10.9989C6.08503 10.848 5.67601 10.8898 5.37501 11.108L0.374989 14.7444C0.137973 14.9172 0 15.1781 0 15.4545C0 15.7308 0.138016 15.9917 0.374989 16.1645L5.37501 19.8009C5.55599 19.9318 5.77703 20 5.99999 20C6.14699 20 6.296 19.97 6.43398 19.91C6.77897 19.7591 6.99996 19.44 6.99996 19.0909V16.3636H15C17.757 16.3636 20 14.3244 20 11.818C20 11.3162 19.553 10.9089 19 10.9089Z"
fill="#808782" />
<path
d="M1.00001 9.09071C1.55302 9.09071 2.00003 8.68344 2.00003 8.18159C2.00003 6.67794 3.34602 5.45428 5.00002 5.45428H13V8.18159C13 8.5307 13.221 8.84977 13.566 9.00071C13.705 9.06071 13.853 9.09071 14 9.09071C14.223 9.09071 14.444 9.02255 14.625 8.89161L19.625 5.25518C19.862 5.08244 20 4.82154 20 4.54516C20 4.26879 19.862 4.00789 19.625 3.83515L14.625 0.198722C14.325 -0.0194454 13.911 -0.0612821 13.566 0.0896189C13.221 0.24052 13 0.559627 13 0.908735V3.63605H5.00002C2.24301 3.63605 0 5.67518 0 8.18159C0 8.68344 0.447004 9.09071 1.00001 9.09071Z"
fill="#808782" />
</svg>
</div>
<div id="previous">
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0.999961 0.000776451C1.55194 0.000776451 1.99992 0.448759 1.99992 1.00074V8.29046L16.5094 0.128771C16.8153 -0.0452218 17.1973 -0.0432219 17.5033 0.136771C17.8093 0.316764 17.9993 0.644751 17.9993 1.00074V19C17.9993 19.356 17.8093 19.684 17.5033 19.864C17.3493 19.954 17.1733 20 16.9993 20C16.8293 20 16.6614 19.958 16.5094 19.872L1.99992 11.7103V19C1.99992 19.552 1.55194 20 0.999961 20C0.447983 20 0 19.552 0 19V1.00074C0 0.448759 0.447983 0.000776451 0.999961 0.000776451V0.000776451Z"
fill="#808782" />
</svg>
</div>
<div onclick="togglePlayPause('play-pause')">
<audio id="audio-track" src="./audio/dreamynight.mp3"></audio>
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="play-pause active"
d="M25 0C11.1585 0 0 11.1585 0 25C0 38.8415 11.1585 50 25 50C38.8415 50 50 38.8415 50 25C50 11.1585 38.8415 0 25 0ZM36.0976 26.1585L19.4512 35.9146C19.2683 36.0366 18.9634 36.0976 18.7805 36.0976C18.5976 36.0976 18.2927 36.0366 18.1098 35.9146C17.6829 35.6098 17.439 35.2439 17.439 34.7561V15.3049H17.378C17.378 14.8171 17.6829 14.3293 18.0488 14.1463C18.4146 13.9634 19.0244 13.8415 19.4512 14.1463L36.0976 23.8415C36.5244 24.1463 36.7683 24.5122 36.7683 25C36.7683 25.4878 36.4634 25.9756 36.0976 26.1585Z"
fill="#CC7E85" />
<path class="play-pause"
d="M25 0C11.1875 0 0 11.1875 0 25C0 38.8125 11.1875 50 25 50C38.8125 50 50 38.8125 50 25C50 11.1875 38.8125 0 25 0ZM22.25 31.25C22.25 32.8125 21 34 19.5 34C17.9375 34 16.75 32.75 16.75 31.25V18.75C16.6875 17.25 17.9375 16 19.4375 16C21 16 22.25 17.25 22.25 18.75V31.25ZM33.3125 31.25C33.3125 32.8125 32.0625 34 30.5625 34C29 34 27.8125 32.75 27.8125 31.25V18.75C27.75 17.25 29 16 30.5 16C32.0625 16 33.3125 17.25 33.3125 18.75V31.25Z"
fill="#CC7E85" />
</svg>
</div>
<div id="next">
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M17 0C16.448 0 16 0.448 16 1V8.29L1.49 0.128C1.184 -0.044 0.802 -0.042 0.496 0.136C0.19 0.314 0 0.644 0 1V19C0 19.356 0.19 19.684 0.496 19.864C0.65 19.954 0.826 20 1 20C1.17 20 1.338 19.958 1.49 19.872L16 11.71V19C16 19.552 16.448 20 17 20C17.552 20 18 19.552 18 19V1C18 0.448 17.552 0 17 0Z"
fill="#808782" />
</svg>
</div>
<div id="shuffle" onclick="toggleColor('shuffle')">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0.83332 5.45423H2.5C3.23332 5.45423 3.95418 5.66423 4.58332 6.06242C4.715 6.14607 4.85914 6.18515 5.00082 6.18515C5.28832 6.18515 5.56832 6.02241 5.7225 5.73242C5.95418 5.29788 5.8175 4.74151 5.42 4.48966C4.53582 3.9315 3.52668 3.63602 2.5 3.63602H0.83332C0.3725 3.63602 0 4.04332 0 4.54515C0 5.04697 0.3725 5.45423 0.83332 5.45423Z"
fill="#808782" />
<path
d="M12.5 5.45423H14.1667V8.18153C14.1667 8.53063 14.3509 8.84972 14.6384 9.00062C14.7542 9.06062 14.8775 9.09062 15 9.09062C15.1859 9.09062 15.37 9.02244 15.5209 8.89153L19.6875 5.25514C19.885 5.08242 20 4.8215 20 4.54514C20 4.26879 19.885 4.00786 19.6875 3.83515L15.5208 0.198718C15.27 -0.0194664 14.9258 -0.0612709 14.6383 0.0896256C14.3508 0.240522 14.1666 0.559617 14.1666 0.908711V3.63601H12.5C9.28418 3.63601 6.66668 6.4906 6.66668 9.9997C6.66668 12.5061 4.7975 14.5452 2.5 14.5452H0.83332C0.3725 14.5452 0 14.9525 0 15.4544C0 15.9562 0.3725 16.3634 0.83332 16.3634H2.5C5.71582 16.3634 8.33332 13.5088 8.33332 9.99975C8.33332 7.49336 10.2025 5.45423 12.5 5.45423Z"
fill="#808782" />
<path
d="M19.6875 14.7445L15.5208 11.1081C15.27 10.889 14.9258 10.8472 14.6383 10.9981C14.3508 11.15 14.1666 11.4681 14.1666 11.8182V14.5455H12.5C11.6767 14.5455 10.88 14.2836 10.1967 13.7882C9.81167 13.5118 9.29585 13.6236 9.04167 14.0427C8.78667 14.4609 8.89085 15.0254 9.27417 15.3027C10.2317 15.9963 11.3467 16.3636 12.5 16.3636H14.1667V19.0909C14.1667 19.44 14.3509 19.7591 14.6384 19.91C14.7542 19.97 14.8775 20 15 20C15.1859 20 15.37 19.9318 15.5209 19.8009L19.6875 16.1645C19.885 15.9918 20 15.73 20 15.4545C20 15.1781 19.885 14.9163 19.6875 14.7445Z"
fill="#808782" />
</svg>
</div>
</div>
</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>