-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (82 loc) · 4.63 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
<!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>Simple Music Player</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div id ="player" class="player-body body-style">
<div class="album-cover-wrap">
<div id="cover" class="album-cover"></div>
</div>
<div class="songs-details flex-column">
<audio id="audio" src="""></audio>
<div id="title" class="song-title">Song Title</div>
<div id='artist' class="artist-name">Artist Name</div>
</div>
<div class="buttons-container">
<div class="options">
<span id="repeat" class="options__repeat"><svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2rem" viewBox="0 0 24 24"><path fill="currentColor" d="m7 22l-4-4l4-4l1.4 1.45L6.85 17H17v-4h2v6H6.85l1.55 1.55L7 22Zm4.5-7v-4.5H10V9h3v6h-1.5ZM5 11V5h12.15L15.6 3.45L17 2l4 4l-4 4l-1.4-1.45L17.15 7H7v4H5Z"/></svg></span>
<span id='shuffle' class="options__shuffle"><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M504.971 359.029c9.373 9.373 9.373 24.569 0 33.941l-80 79.984c-15.01 15.01-40.971 4.49-40.971-16.971V416h-58.785a12.004 12.004 0 0 1-8.773-3.812l-70.556-75.596l53.333-57.143L352 336h32v-39.981c0-21.438 25.943-31.998 40.971-16.971l80 79.981zM12 176h84l52.781 56.551l53.333-57.143l-70.556-75.596A11.999 11.999 0 0 0 122.785 96H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12zm372 0v39.984c0 21.46 25.961 31.98 40.971 16.971l80-79.984c9.373-9.373 9.373-24.569 0-33.941l-80-79.981C409.943 24.021 384 34.582 384 56.019V96h-58.785a12.004 12.004 0 0 0-8.773 3.812L96 336H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h110.785c3.326 0 6.503-1.381 8.773-3.812L352 176h32z"/></svg></span>
<!-- <span class="options__like"><svg width='2rem' height="2rem" viewBox="0 0 512 512"><path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="64" d="M 352.92 80 C 288 80 256 144 256 144 s -32 -64 -96.92 -64 c -52.76 0 -94.54 44.14 -95.08 96.81 c -1.1 109.33 86.73 187.08 183 252.42 a 16 16 0 0 0 18 0 c 96.26 -65.34 184.09 -143.09 183 -252.42 c -0.54 -52.67 -42.32 -96.81 -95.08 -96.81 Z" /></svg></span> -->
</div>
<div class="timers">
<div id="current" class="current-time">00:00</div>
<span>/</span>
<div id="duration" class="song-duration">00:00</div>
</div>
</div>
<div id="slider-duration" class="progress-bar">
<div id="progress" class="current-progress"></div>
</div>
<div class="navigation flex-row">
<button id="previous" class="btn ">
<ion-icon class="icn" name="play-skip-back-circle"></ion-icon>
</button>
<button id="play" class="btn play ">
<ion-icon class="icn" name="play-circle"></ion-icon>
</button>
<button id="pause" class="btn pause active">
<ion-icon class="icn" name="pause-circle"></ion-icon>
</button>
<button id="next" class="btn">
<ion-icon class="icn" name="play-skip-forward-circle"></ion-icon>
</button>
</div>
<div class="volume-navigation">
<ion-icon id="volume-min" class="volume-icon" name="volume-low"></ion-icon>
<div id="volume-slider" class="volume-bar">
<div id="current-volume" class="current-set"></div>
</div>
<ion-icon id="volume-max" class="volume-icon" name="volume-high"></ion-icon>
</div>
</div>
<div class="playlist body-style">
<h2 class="playlist__title">Playlist</h2>
<span id="toggle-fav">Toggle Fav Songs</span>
<ul id='playlist__list' class="playlist__list">
</ul>
<span class="footer">Copyright M.A.</span>
</div>
</div>
</body>
<script src="script.js"></script>
<script
type="module"
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
></script>
</html>