-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (133 loc) · 6.07 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sound Meditation</title>
<link rel="icon" href="/images/favicon.ico" sizes="any" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css?family=Montserrat"
rel="stylesheet"
/>
</head>
<body>
<div class="app">
<div class="vid-container">
<video loop poster="./video/poster.jpg">
<source src="./video/rain.mp4" type="video/mp4" />
</video>
</div>
<div class="time-select">
<button data-time="300">5mins</button>
<button data-time="600" class="medium-mins">10mins</button>
<button data-time="900" class="long-mins">15mins</button>
</div>
<div class="player-container">
<audio class="song">
<source src="sounds/rain.mp3" />
</audio>
<img src="svg/play.svg" alt="play" class="play" />
<svg
class="track-outline"
width="453"
height="453"
viewBox="0 0 453 453"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="226.5"
cy="226.5"
r="216.5"
stroke="white"
stroke-width="20"
/>
</svg>
<svg
class="moving-outline"
width="453"
height="453"
viewBox="0 0 453 453"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="226.5"
cy="226.5"
r="216.5"
stroke="#1BBCFE"
stroke-width="20"
/>
</svg>
<img src="./svg/replay.svg" class="replay" />
<h3 class="time-display">0:00</h3>
</div>
<div class="sound-picker">
<button
data-sound="./sounds/rain.mp3"
data-video="./video/rain.mp4"
class="rain"
>
<svg
width="114"
height="114"
viewBox="0 0 114 114"
xmlns="http://www.w3.org/2000/svg"
fill="none"
>
<g clip-path="url(#clip0)">
<path
id="rain"
d="M96.577 40.6278C95.7406 25.4352 82.3336 13.4756 66.3515 14.8196C61.2434 8.9972 53.6964 5.30829 45.2519 5.30829C30.3458 5.30829 18.2124 16.7885 17.4229 31.2293C7.86935 32.9164 0.609009 41.1213 0.609009 50.9944C0.609009 62.094 9.76784 71.0977 21.0695 71.0977H27.3007C30.9239 76.7274 37.2819 80.4962 44.5658 80.4962H92.9257C104.232 80.4962 113.391 71.4925 113.391 60.3929C113.391 50.5197 106.131 42.3149 96.577 40.6278ZM24.2321 61.6992H21.0695C14.9746 61.6992 10.0075 56.8966 10.0075 50.9944C10.0075 41.0414 19.8947 38.7904 26.3985 39.1899C26.1635 32.8177 27.0423 14.7068 45.2519 14.7068C49.796 14.7068 53.3064 15.8816 56.0131 17.7331C47.4464 22.0658 41.4643 30.6372 40.9192 40.6278C31.4173 42.3102 23.546 50.6231 24.2321 61.6992ZM92.9257 71.0977H44.5658C38.4708 71.0977 33.5037 66.2951 33.5037 60.3929C33.5037 50.4399 43.391 48.1889 49.8947 48.5884C49.6598 42.2162 50.5385 24.1053 68.7481 24.1053C86.469 24.1053 88.6212 41.8261 87.6015 48.5837C94.6926 48.0902 103.992 50.6372 103.992 60.3929C103.992 66.2951 99.0254 71.0977 92.9257 71.0977ZM26.8402 108.692L20.2143 102.066L37.0846 85.1955L43.7105 91.8214L26.8402 108.692ZM66.9859 91.8214L60.3599 85.1955L43.4896 102.066L50.1156 108.692L66.9859 91.8214ZM89.8947 91.8214L83.2688 85.1955L66.3985 102.066L73.0244 108.692L89.8947 91.8214Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0">
<rect
width="112.782"
height="112.782"
fill="white"
transform="translate(0.609009 0.609039)"
/>
</clipPath>
</defs>
</svg>
</button>
<button
data-sound="./sounds/beach.mp3"
data-video="./video/beach.mp4"
class="beach"
>
<svg
width="114"
height="114"
viewBox="0 0 114 114"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0)">
<path
id="beach"
d="M19.7302 61.6992H0.609009V52.3007H19.7302C19.5376 53.8421 19.406 55.4069 19.406 57C19.406 58.593 19.5376 60.1579 19.7302 61.6992ZM33.9878 27.3383L20.4492 13.7998L13.8045 20.4445L27.343 33.9831C29.2744 31.4972 31.5019 29.2697 33.9878 27.3383ZM86.6616 33.9831L100.2 20.4445L93.5554 13.7998L80.0169 27.3383C82.4981 29.2697 84.7256 31.5019 86.6616 33.9831ZM57 19.406C58.593 19.406 60.1579 19.5376 61.6992 19.7302V0.609009H52.3007V19.7302C53.8421 19.5376 55.4069 19.406 57 19.406ZM57 94.594C55.4069 94.594 53.8421 94.4624 52.3007 94.2697V113.391H61.6992V94.2697C60.1579 94.4624 58.593 94.594 57 94.594ZM94.2697 52.3007C94.4624 53.8421 94.594 55.4069 94.594 57C94.594 58.593 94.4624 60.1579 94.2697 61.6992H113.391V52.3007H94.2697ZM80.0169 86.6616L93.5507 100.195L100.2 93.5507L86.6663 80.0169C84.7303 82.4981 82.5028 84.7256 80.0169 86.6616ZM27.3383 80.0122L13.8045 93.546L20.4492 100.191L33.9831 86.657C31.5019 84.7256 29.2697 82.4981 27.3383 80.0122ZM38.203 57C38.203 67.3665 46.6334 75.797 57 75.797C67.3665 75.797 75.797 67.3665 75.797 57C75.797 46.6334 67.3665 38.203 57 38.203C46.6334 38.203 38.203 46.6334 38.203 57ZM85.1955 57C85.1955 72.5733 72.5733 85.1955 57 85.1955C41.4267 85.1955 28.8045 72.5733 28.8045 57C28.8045 41.4267 41.4267 28.8045 57 28.8045C72.5733 28.8045 85.1955 41.4267 85.1955 57Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0">
<rect
width="112.782"
height="112.782"
fill="white"
transform="translate(0.609009 0.609009)"
/>
</clipPath>
</defs>
</svg>
</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>