-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (98 loc) · 5.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/media.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/global.css">
<link href="https://fonts.cdnfonts.com/css/inter" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
</head>
<body>
<div id="search-system">
<input type="text" placeholder="search">
</div>
<aside class="sidebar" id="sidebar">
<div class="upper-side sidebar-block">
<a href="#" class="upper-side-block pointer" id="home">
<svg fill="#727272" viewBox="-20 -20 614.40 614.40" xmlns="http://www.w3.org/2000/svg" alt="home" class="icon active" id="home-icon"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="8.192"></g><g id="SVGRepo_iconCarrier"><polygon fill-rule="evenodd" points="192 0 0 153.6 0 384 149.333 384 149.333 256 234.667 256 234.667 384 384 384 384 153.6" transform="translate(64 64)"></polygon></g></svg>
<p>Home</p>
</a>
<div href="#" class="upper-side-block pointer" id="search">
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" alt="home" class="icon">
<path d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z" stroke="#727272" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="search-icon"/>
</svg>
<p>Search</p>
</div>
</div>
<div class="lower-side sidebar-block upper-side-block">
<a href="./form.html" class="no-padding doFlex">
<svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M12.5 8.89001V18.5M12.5 8.89001V5.57656C12.5 5.36922 12.5 5.26554 12.5347 5.17733C12.5653 5.09943 12.615 5.03047 12.6792 4.97678C12.752 4.91597 12.8503 4.88318 13.047 4.81761L17.447 3.35095C17.8025 3.23245 17.9803 3.17319 18.1218 3.20872C18.2456 3.23982 18.3529 3.31713 18.4216 3.42479C18.5 3.54779 18.5 3.73516 18.5 4.10989V7.42335C18.5 7.63069 18.5 7.73436 18.4653 7.82258C18.4347 7.90048 18.385 7.96943 18.3208 8.02313C18.248 8.08394 18.1497 8.11672 17.953 8.18229L13.553 9.64896C13.1975 9.76746 13.0197 9.82671 12.8782 9.79119C12.7544 9.76009 12.6471 9.68278 12.5784 9.57512C12.5 9.45212 12.5 9.26475 12.5 8.89001ZM12.5 18.5C12.5 19.8807 10.933 21 9 21C7.067 21 5.5 19.8807 5.5 18.5C5.5 17.1192 7.067 16 9 16C10.933 16 12.5 17.1192 12.5 18.5Z" stroke="#727272" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p>Add Music</p>
</a>
</div>
</aside>
<main class="main" id="main">
<h2 class="greet-text">Hello</h2>
<div class="recent-container">
<div class="recent-block pointer">
<img src="./images/error.svg" alt="" class="recent-image">
<p>music name</p>
</div>
<div class="recent-block pointer">
<img src="./images/error.svg" alt="" class="recent-image">
<p>music name</p>
</div>
<div class="recent-block pointer">
<img src="./images/error.svg" alt="" class="recent-image">
<p>music name</p>
</div>
<div class="recent-block pointer">
<img src="./images/error.svg" alt="" class="recent-image">
<p>music name</p>
</div>
<div class="recent-block pointer">
<img src="./images/error.svg" alt="" class="recent-image">
<p>music name</p>
</div>
<div class="recent-block pointer">
<img src="./images/error.svg" alt="" class="recent-image">
<p>music name</p>
</div>
</div>
<div class="block-container" id="block-container">
</div>
</main>
<footer class="player" id="player">
<div id="music-info">
<img src="./images/error.svg" alt="no image" id="music-image">
<p id="music-name">asdf</p>
</div>
<div id="music-line">
<div class="some-block">
<img src="./images/direction.svg" alt="previous music" class="direction" id="previous">
<img src="./images/play.svg" alt="play pause button" width="50" id="play">
<img src="./images/direction.svg" alt="next music" class="direction rotateD" id="next">
<audio src="./music/guitar.wav" id="music-track"></audio>
</div>
<div class="height-limit">
<span id="cTime">---</span>
<input type="range" name="slider" id="slider" value="0">
<span id="duration-wrapper">---</span>
</div>
</div>
<div class="volume">
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" alt="repeat" class="volume-icon" id="loop">
<path d="M10.0001 17H8.00098C4.68727 17 2.00098 14.3137 2.00098 11C2.00098 7.68629 4.68727 5 8.00098 5H16.0001C19.3138 5 22.0001 7.68629 22.0001 11C22.0001 14.3137 19.3138 17 16.0001 17H14.0001M17.0001 20L14.0001 17M14.0001 17L17.0001 14" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<input type="range" name="volume" id="volume" value="100">
</div>
</footer>
<script src="./js/script.js"></script>
<script src="./js/active.js"></script>
</body>
</html>