-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (125 loc) · 22.2 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
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="pt-br">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Temporizador estilo pomodoro">
<title>FocusTimer</title>
<link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
</head>
<body class=".dark">
<!--botão modo dark e modo light-->
<div class="container">
<header>
<button class="light-theme ">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M22 29C23.9333 29 25.5833 28.3167 26.95 26.95C28.3167 25.5833 29 23.9333 29 22C29 20.0667 28.3167 18.4167 26.95 17.05C25.5833 15.6833 23.9333 15 22 15C20.0667 15 18.4167 15.6833 17.05 17.05C15.6833 18.4167 15 20.0667 15 22C15 23.9333 15.6833 25.5833 17.05 26.95C18.4167 28.3167 20.0667 29 22 29ZM22 32C19.2333 32 16.875 31.025 14.925 29.075C12.975 27.125 12 24.7667 12 22C12 19.2333 12.975 16.875 14.925 14.925C16.875 12.975 19.2333 12 22 12C24.7667 12 27.125 12.975 29.075 14.925C31.025 16.875 32 19.2333 32 22C32 24.7667 31.025 27.125 29.075 29.075C27.125 31.025 24.7667 32 22 32ZM1.5 23.5C1.06667 23.5 0.708333 23.3583 0.425 23.075C0.141667 22.7917 0 22.4333 0 22C0 21.5667 0.141667 21.2083 0.425 20.925C0.708333 20.6417 1.06667 20.5 1.5 20.5H6.5C6.93333 20.5 7.29167 20.6417 7.575 20.925C7.85833 21.2083 8 21.5667 8 22C8 22.4333 7.85833 22.7917 7.575 23.075C7.29167 23.3583 6.93333 23.5 6.5 23.5H1.5ZM37.5 23.5C37.0667 23.5 36.7083 23.3583 36.425 23.075C36.1417 22.7917 36 22.4333 36 22C36 21.5667 36.1417 21.2083 36.425 20.925C36.7083 20.6417 37.0667 20.5 37.5 20.5H42.5C42.9333 20.5 43.2917 20.6417 43.575 20.925C43.8583 21.2083 44 21.5667 44 22C44 22.4333 43.8583 22.7917 43.575 23.075C43.2917 23.3583 42.9333 23.5 42.5 23.5H37.5ZM22 8C21.5667 8 21.2083 7.85833 20.925 7.575C20.6417 7.29167 20.5 6.93333 20.5 6.5V1.5C20.5 1.06667 20.6417 0.708333 20.925 0.425C21.2083 0.141667 21.5667 0 22 0C22.4333 0 22.7917 0.141667 23.075 0.425C23.3583 0.708333 23.5 1.06667 23.5 1.5V6.5C23.5 6.93333 23.3583 7.29167 23.075 7.575C22.7917 7.85833 22.4333 8 22 8ZM22 44C21.5667 44 21.2083 43.8583 20.925 43.575C20.6417 43.2917 20.5 42.9333 20.5 42.5V37.5C20.5 37.0667 20.6417 36.7083 20.925 36.425C21.2083 36.1417 21.5667 36 22 36C22.4333 36 22.7917 36.1417 23.075 36.425C23.3583 36.7083 23.5 37.0667 23.5 37.5V42.5C23.5 42.9333 23.3583 43.2917 23.075 43.575C22.7917 43.8583 22.4333 44 22 44ZM10 12.1L7.15 9.3C6.85 9 6.70833 8.64167 6.725 8.225C6.74167 7.80833 6.88333 7.45 7.15 7.15C7.45 6.85 7.80833 6.7 8.225 6.7C8.64167 6.7 9 6.85 9.3 7.15L12.1 10C12.3667 10.3 12.5 10.65 12.5 11.05C12.5 11.45 12.3667 11.7833 12.1 12.05C11.8333 12.35 11.4917 12.5 11.075 12.5C10.6583 12.5 10.3 12.3667 10 12.1ZM34.7 36.85L31.9 34C31.6333 33.7 31.5 33.3417 31.5 32.925C31.5 32.5083 31.65 32.1667 31.95 31.9C32.2167 31.6 32.55 31.45 32.95 31.45C33.35 31.45 33.7 31.6 34 31.9L36.85 34.7C37.15 35 37.2917 35.3583 37.275 35.775C37.2583 36.1917 37.1167 36.55 36.85 36.85C36.55 37.15 36.1917 37.3 35.775 37.3C35.3583 37.3 35 37.15 34.7 36.85ZM31.9 12.1C31.6 11.8 31.45 11.45 31.45 11.05C31.45 10.65 31.6 10.3 31.9 10L34.7 7.15C35 6.85 35.3583 6.70833 35.775 6.725C36.1917 6.74167 36.55 6.88333 36.85 7.15C37.15 7.45 37.3 7.80833 37.3 8.225C37.3 8.64167 37.15 9 36.85 9.3L34 12.1C33.7333 12.3667 33.3917 12.5 32.975 12.5C32.5583 12.5 32.2 12.3667 31.9 12.1ZM7.15 36.85C6.85 36.55 6.7 36.1917 6.7 35.775C6.7 35.3583 6.85 35 7.15 34.7L10 31.9C10.3 31.6 10.65 31.45 11.05 31.45C11.45 31.45 11.8 31.6 12.1 31.9C12.4 32.2 12.55 32.55 12.55 32.95C12.55 33.35 12.4 33.7 12.1 34L9.3 36.85C9 37.15 8.64167 37.2917 8.225 37.275C7.80833 37.2583 7.45 37.1167 7.15 36.85Z"
fill="black" />
</svg>
</button>
<button class="dark-theme hide">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18 36C13 36 8.75 34.25 5.25 30.75C1.75 27.25 0 23 0 18C0 13 1.75 8.75 5.25 5.25C8.75 1.75 13 0 18 0C18.2667 0 18.55 0.00833343 18.85 0.0250001C19.15 0.0416668 19.5333 0.0666666 20 0.0999999C18.8 1.16667 17.8667 2.48333 17.2 4.05C16.5333 5.61667 16.2 7.26667 16.2 9C16.2 12 17.25 14.55 19.35 16.65C21.45 18.75 24 19.8 27 19.8C28.7333 19.8 30.3833 19.4917 31.95 18.875C33.5167 18.2583 34.8333 17.4 35.9 16.3C35.9333 16.7 35.9583 17.025 35.975 17.275C35.9917 17.525 36 17.7667 36 18C36 23 34.25 27.25 30.75 30.75C27.25 34.25 23 36 18 36ZM18 33C21.6333 33 24.8 31.875 27.5 29.625C30.2 27.375 31.8833 24.7333 32.55 21.7C31.7167 22.0667 30.825 22.3417 29.875 22.525C28.925 22.7083 27.9667 22.8 27 22.8C23.1667 22.8 19.9083 21.4583 17.225 18.775C14.5417 16.0917 13.2 12.8333 13.2 9C13.2 8.2 13.2833 7.34167 13.45 6.425C13.6167 5.50833 13.9167 4.46667 14.35 3.3C11.0833 4.2 8.375 6.025 6.225 8.775C4.075 11.525 3 14.6 3 18C3 22.1667 4.45833 25.7083 7.375 28.625C10.2917 31.5417 13.8333 33 18 33Z"
fill="white" />
</svg>
</button>
</header>
<main>
<!--display do time-->
<div id="timer">
<span class="minutes">25</span>
<span>:</span>
<span class="seconds">00</span>
</div>
<!--controles abaixo do time -->
<div id="controls_left">
<button class="play">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.18 34.2L34.2 24L18.18 13.8V34.2ZM24 48C20.72 48 17.62 47.37 14.7 46.11C11.78 44.85 9.23 43.13 7.05 40.95C4.87 38.77 3.15 36.22 1.89 33.3C0.63 30.38 0 27.28 0 24C0 20.72 0.63 17.62 1.89 14.7C3.15 11.78 4.87 9.23 7.05 7.05C9.23 4.87 11.78 3.15 14.7 1.89C17.62 0.63 20.72 0 24 0C27.28 0 30.38 0.63 33.3 1.89C36.22 3.15 38.77 4.87 40.95 7.05C43.13 9.23 44.85 11.78 46.11 14.7C47.37 17.62 48 20.72 48 24C48 27.28 47.37 30.38 46.11 33.3C44.85 36.22 43.13 38.77 40.95 40.95C38.77 43.13 36.22 44.85 33.3 46.11C30.38 47.37 27.28 48 24 48ZM24 44.4C29.6 44.4 34.4 42.4 38.4 38.4C42.4 34.4 44.4 29.6 44.4 24C44.4 18.4 42.4 13.6 38.4 9.6C34.4 5.6 29.6 3.6 24 3.6C18.4 3.6 13.6 5.6 9.6 9.6C5.6 13.6 3.6 18.4 3.6 24C3.6 29.6 5.6 34.4 9.6 38.4C13.6 42.4 18.4 44.4 24 44.4Z"
fill="#323238" />
</svg>
</button>
<button class="pause hide">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24 48C20.72 48 17.62 47.37 14.7 46.11C11.78 44.85 9.23 43.13 7.05 40.95C4.87 38.77 3.14999 36.22 1.89 33.3C0.630005 30.38 0 27.28 0 24C0 20.72 0.630005 17.62 1.89 14.7C3.14999 11.78 4.87 9.23001 7.05 7.04999C9.23 4.87 11.78 3.14999 14.7 1.89001C17.62 0.630005 20.72 0 24 0C27.28 0 30.38 0.630005 33.3 1.89001C36.22 3.14999 38.77 4.87 40.95 7.04999C43.13 9.23001 44.85 11.78 46.11 14.7C47.37 17.62 48 20.72 48 24C48 27.28 47.37 30.38 46.11 33.3C44.85 36.22 43.13 38.77 40.95 40.95C38.77 43.13 36.22 44.85 33.3 46.11C30.38 47.37 27.28 48 24 48ZM24 44.4C29.6 44.4 34.4 42.4 38.4 38.4C42.4 34.4 44.4 29.6 44.4 24C44.4 18.4 42.4 13.6 38.4 9.60001C34.4 5.60001 29.6 3.60001 24 3.60001C18.4 3.60001 13.6 5.60001 9.60001 9.60001C5.60001 13.6 3.60001 18.4 3.60001 24C3.60001 29.6 5.60001 34.4 9.60001 38.4C13.6 42.4 18.4 44.4 24 44.4ZM16 15H20V33H16V15ZM32 15H28V33H32V15Z"
fill="#323238" />
</svg>
</button>
<button class="stop">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M24 48C20.6 48 17.44 47.39 14.52 46.17C11.6 44.95 9.06 43.26 6.9 41.1C4.74 38.94 3.05 36.4 1.83 33.48C0.61 30.56 0 27.4 0 24C0 20.64 0.61 17.5 1.83 14.58C3.05 11.66 4.74 9.12 6.9 6.96C9.06 4.8 11.6 3.1 14.52 1.86C17.44 0.62 20.6 0 24 0C27.36 0 30.5 0.62 33.42 1.86C36.34 3.1 38.88 4.8 41.04 6.96C43.2 9.12 44.9 11.66 46.14 14.58C47.38 17.5 48 20.64 48 24C48 27.4 47.38 30.56 46.14 33.48C44.9 36.4 43.2 38.94 41.04 41.1C38.88 43.26 36.34 44.95 33.42 46.17C30.5 47.39 27.36 48 24 48ZM24 44.4C29.8 44.4 34.65 42.45 38.55 38.55C42.45 34.65 44.4 29.8 44.4 24C44.4 18.2 42.45 13.35 38.55 9.45C34.65 5.55 29.8 3.6 24 3.6C18.2 3.6 13.35 5.55 9.45 9.45C5.55 13.35 3.6 18.2 3.6 24C3.6 29.8 5.55 34.65 9.45 38.55C13.35 42.45 18.2 44.4 24 44.4ZM15 33H33V15H15V33Z"
fill="#323238" />
</svg>
</button>
<button class="plus">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M22.38 36H25.98V26.04H36V22.44H25.98V12H22.38V22.44H12V26.04H22.38V36ZM24 48C20.6 48 17.44 47.39 14.52 46.17C11.6 44.95 9.06 43.26 6.9 41.1C4.74 38.94 3.05 36.4 1.83 33.48C0.61 30.56 0 27.4 0 24C0 20.64 0.61 17.5 1.83 14.58C3.05 11.66 4.74 9.12 6.9 6.96C9.06 4.8 11.6 3.1 14.52 1.86C17.44 0.62 20.6 0 24 0C27.36 0 30.5 0.62 33.42 1.86C36.34 3.1 38.88 4.8 41.04 6.96C43.2 9.12 44.9 11.66 46.14 14.58C47.38 17.5 48 20.64 48 24C48 27.4 47.38 30.56 46.14 33.48C44.9 36.4 43.2 38.94 41.04 41.1C38.88 43.26 36.34 44.95 33.42 46.17C30.5 47.39 27.36 48 24 48ZM24 44.4C29.6 44.4 34.4 42.4 38.4 38.4C42.4 34.4 44.4 29.6 44.4 24C44.4 18.4 42.4 13.6 38.4 9.6C34.4 5.6 29.6 3.6 24 3.6C18.4 3.6 13.6 5.6 9.6 9.6C5.6 13.6 3.6 18.4 3.6 24C3.6 29.6 5.6 34.4 9.6 38.4C13.6 42.4 18.4 44.4 24 44.4Z"
fill="#323238" />
</svg>
</button>
<button class="minus">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 25.62H36V22.02H12V25.62ZM24 48C20.6 48 17.44 47.39 14.52 46.17C11.6 44.95 9.06 43.26 6.9 41.1C4.74 38.94 3.05 36.4 1.83 33.48C0.61 30.56 0 27.4 0 24C0 20.64 0.61 17.5 1.83 14.58C3.05 11.66 4.74 9.12 6.9 6.96C9.06 4.8 11.6 3.1 14.52 1.86C17.44 0.62 20.6 0 24 0C27.36 0 30.5 0.62 33.42 1.86C36.34 3.1 38.88 4.8 41.04 6.96C43.2 9.12 44.9 11.66 46.14 14.58C47.38 17.5 48 20.64 48 24C48 27.4 47.38 30.56 46.14 33.48C44.9 36.4 43.2 38.94 41.04 41.1C38.88 43.26 36.34 44.95 33.42 46.17C30.5 47.39 27.36 48 24 48ZM24 44.4C29.8 44.4 34.65 42.45 38.55 38.55C42.45 34.65 44.4 29.8 44.4 24C44.4 18.2 42.45 13.35 38.55 9.45C34.65 5.55 29.8 3.6 24 3.6C18.2 3.6 13.35 5.55 9.45 9.45C5.55 13.35 3.6 18.2 3.6 24C3.6 29.8 5.55 34.65 9.45 38.55C13.35 42.45 18.2 44.4 24 44.4Z"
fill="#323238" />
</svg>
</button>
</div>
</main>
</div>
<!--controles de som -->
<aside>
<div class="card-forest">
<button class="sound-forest">
<svg width="45" height="56" viewBox="0 0 45 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.83553 56V51.8H20.0329V39.2H13.8158C9.99342 39.2 6.7352 37.835 4.04112 35.105C1.34704 32.375 0 29.0733 0 25.2C0 22.4 0.759868 19.8217 2.2796 17.465C3.79934 15.1083 5.84868 13.3933 8.42763 12.32C8.84211 8.82 10.3503 5.89167 12.9523 3.535C15.5543 1.17833 18.6053 0 22.1053 0C25.6053 0 28.6562 1.17833 31.2582 3.535C33.8602 5.89167 35.3684 8.82 35.7829 12.32C38.3618 13.3933 40.4112 15.1083 41.9309 17.465C43.4507 19.8217 44.2105 22.4 44.2105 25.2C44.2105 29.0733 42.8635 32.375 40.1694 35.105C37.4753 37.835 34.2171 39.2 30.3947 39.2H24.1776V51.8H40.0658V56H4.83553ZM13.8158 35H30.3947C33.0658 35 35.3454 34.0433 37.2336 32.13C39.1217 30.2167 40.0658 27.9067 40.0658 25.2C40.0658 23.24 39.5132 21.455 38.4079 19.845C37.3026 18.235 35.875 17.0333 34.125 16.24L31.9145 15.26L31.6382 12.81C31.3158 10.3367 30.2566 8.28333 28.4605 6.65C26.6645 5.01667 24.5461 4.2 22.1053 4.2C19.6645 4.2 17.5461 5.01667 15.75 6.65C13.9539 8.28333 12.8947 10.3367 12.5724 12.81L12.2961 15.26L10.0855 16.24C8.33553 17.0333 6.90789 18.235 5.80263 19.845C4.69737 21.455 4.14474 23.24 4.14474 25.2C4.14474 27.9067 5.08882 30.2167 6.97697 32.13C8.86513 34.0433 11.1447 35 13.8158 35Z"
fill="#323238" />
</svg>
</button>
<input id="forest-volume" type="range" min="0" max="1" step="0.1" value="0.5">
</div>
<div class="card-rain">
<button class="sound-rain">
<svg width="53" height="56" viewBox="0 0 53 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.5263 45.3333C9.91228 45.3333 9.375 45.1 8.91447 44.6333C8.45395 44.1667 8.22368 43.6222 8.22368 43C8.22368 42.3778 8.45395 41.8333 8.91447 41.3667C9.375 40.9 9.91228 40.6667 10.5263 40.6667C11.1404 40.6667 11.6776 40.9 12.1382 41.3667C12.5987 41.8333 12.8289 42.3778 12.8289 43C12.8289 43.6222 12.5987 44.1667 12.1382 44.6333C11.6776 45.1 11.1404 45.3333 10.5263 45.3333ZM42.1053 45.3333C41.4912 45.3333 40.9539 45.1 40.4934 44.6333C40.0329 44.1667 39.8026 43.6222 39.8026 43C39.8026 42.3778 40.0329 41.8333 40.4934 41.3667C40.9539 40.9 41.4912 40.6667 42.1053 40.6667C42.7193 40.6667 43.2566 40.9 43.7171 41.3667C44.1776 41.8333 44.4079 42.3778 44.4079 43C44.4079 43.6222 44.1776 44.1667 43.7171 44.6333C43.2566 45.1 42.7193 45.3333 42.1053 45.3333ZM18.4211 56C17.807 56 17.2697 55.7667 16.8092 55.3C16.3487 54.8333 16.1184 54.2889 16.1184 53.6667C16.1184 53.0444 16.3487 52.5 16.8092 52.0333C17.2697 51.5667 17.807 51.3333 18.4211 51.3333C19.0351 51.3333 19.5724 51.5667 20.0329 52.0333C20.4934 52.5 20.7237 53.0444 20.7237 53.6667C20.7237 54.2889 20.4934 54.8333 20.0329 55.3C19.5724 55.7667 19.0351 56 18.4211 56ZM26.3158 45.3333C25.7018 45.3333 25.1645 45.1 24.7039 44.6333C24.2434 44.1667 24.0132 43.6222 24.0132 43C24.0132 42.3778 24.2434 41.8333 24.7039 41.3667C25.1645 40.9 25.7018 40.6667 26.3158 40.6667C26.9298 40.6667 27.4671 40.9 27.9276 41.3667C28.3882 41.8333 28.6184 42.3778 28.6184 43C28.6184 43.6222 28.3882 44.1667 27.9276 44.6333C27.4671 45.1 26.9298 45.3333 26.3158 45.3333ZM34.2105 56C33.5965 56 33.0592 55.7667 32.5987 55.3C32.1382 54.8333 31.9079 54.2889 31.9079 53.6667C31.9079 53.0444 32.1382 52.5 32.5987 52.0333C33.0592 51.5667 33.5965 51.3333 34.2105 51.3333C34.8246 51.3333 35.3618 51.5667 35.8224 52.0333C36.2829 52.5 36.5132 53.0444 36.5132 53.6667C36.5132 54.2889 36.2829 54.8333 35.8224 55.3C35.3618 55.7667 34.8246 56 34.2105 56ZM13.8158 36C10 36 6.74342 34.6333 4.04605 31.9C1.34868 29.1667 0 25.8667 0 22C0 18.4889 1.23903 15.3556 3.7171 12.6C6.19518 9.84444 9.27632 8.33333 12.9605 8.06667C14.364 5.57778 16.2171 3.61111 18.5197 2.16667C20.8224 0.722222 23.4211 0 26.3158 0C30.307 0 33.6513 1.27778 36.3487 3.83333C39.0461 6.38889 40.7018 9.55556 41.3158 13.3333C44.7807 13.5111 47.5329 14.7 49.5724 16.9C51.6118 19.1 52.6316 21.6889 52.6316 24.6667C52.6316 27.7778 51.5461 30.4444 49.375 32.6667C47.2039 34.8889 44.5614 36 41.4474 36H13.8158ZM13.8158 32H41.4474C43.4649 32 45.1754 31.2778 46.5789 29.8333C47.9825 28.3889 48.6842 26.6444 48.6842 24.6C48.6842 22.6 47.9825 20.8889 46.5789 19.4667C45.1754 18.0444 43.4649 17.3333 41.4474 17.3333H37.5V15.3333C37.5 12.1778 36.4145 9.5 34.2434 7.3C32.0724 5.1 29.4298 4 26.3158 4C24.0789 4 22.0285 4.61111 20.1645 5.83333C18.3004 7.05556 16.9298 8.71111 16.0526 10.8L15.5263 12H13.6842C10.9649 12.0889 8.66228 13.1 6.77632 15.0333C4.89035 16.9667 3.94737 19.2889 3.94737 22C3.94737 24.7556 4.91228 27.1111 6.8421 29.0667C8.77193 31.0222 11.0965 32 13.8158 32Z"
fill="#FFFFFF" />
</svg>
</button>
<input id="rain-volume" type="range" min="0" max="1" step="0.1" value="0.5">
</div>
<div class="card-coffee-shop">
<button class="sound-coffee-shop">
<svg width="57" height="56" viewBox="0 0 57 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M53.1836 24.9667V51.3333C53.1836 52.5778 52.7657 53.6667 51.9298 54.6C51.0939 55.5333 50.1187 56 49.0043 56H7.14108C6.02659 56 5.0514 55.5333 4.21553 54.6C3.37966 53.6667 2.96173 52.5778 2.96173 51.3333V24.9667C1.66149 23.7222 0.802397 22.1926 0.384462 20.3778C-0.0334729 18.563 0.0129642 16.7481 0.523774 14.9333L3.51898 4.43333C3.89047 3.03333 4.5406 1.94444 5.46934 1.16667C6.39809 0.388889 7.46614 0 8.67351 0H47.1932C48.4934 0 49.6312 0.401852 50.6063 1.20556C51.5815 2.00926 52.2549 3.08519 52.6264 4.43333L55.6912 14.9333C56.202 16.7481 56.2369 18.563 55.7957 20.3778C55.3545 22.1926 54.4838 23.7222 53.1836 24.9667ZM34.3765 22.5556C35.7232 22.5556 36.8609 22.063 37.7897 21.0778C38.7184 20.0926 39.0899 18.9 38.9042 17.5L37.1628 4.66667H30.1972V17.5C30.1972 18.8481 30.5919 20.0278 31.3813 21.0389C32.1708 22.05 33.1692 22.5556 34.3765 22.5556ZM21.3509 22.5556C22.6511 22.5556 23.754 22.063 24.6595 21.0778C25.5651 20.0926 26.0178 18.9 26.0178 17.5V4.66667H19.0522L17.3108 17.5C17.1251 18.8481 17.4501 20.0278 18.286 21.0389C19.1219 22.05 20.1435 22.5556 21.3509 22.5556ZM8.67351 22.5556C9.788 22.5556 10.7516 22.1278 11.5642 21.2722C12.3769 20.4167 12.8529 19.3667 12.9922 18.1222L14.8032 4.66667H7.83764L4.63347 16.0222C4.1691 17.6296 4.35485 19.1204 5.19072 20.4944C6.02659 21.8685 7.18752 22.5556 8.67351 22.5556ZM47.4718 22.5556C48.9578 22.5556 50.1304 21.8815 50.9894 20.5333C51.8485 19.1852 52.0459 17.6815 51.5815 16.0222L48.3773 4.66667H41.4118L43.2228 18.1222C43.3621 19.3667 43.8381 20.4167 44.6508 21.2722C45.4634 22.1278 46.4038 22.5556 47.4718 22.5556ZM7.14108 51.3333H49.0043V27.1444C49.0507 27.1963 48.8998 27.2222 48.5515 27.2222C48.2032 27.2222 47.8433 27.2222 47.4718 27.2222C46.3109 27.2222 45.208 26.95 44.1632 26.4056C43.1183 25.8611 42.0851 25.0185 41.0635 23.8778C40.3205 24.9148 39.3917 25.7315 38.2773 26.3278C37.1628 26.9241 35.9322 27.2222 34.5855 27.2222C33.1924 27.2222 31.9966 27.0019 30.9982 26.5611C29.9998 26.1204 29.0362 25.3815 28.1075 24.3444C27.4109 25.2778 26.5286 25.9907 25.4606 26.4833C24.3925 26.9759 23.1851 27.2222 21.8385 27.2222C20.3989 27.2222 19.1219 26.937 18.0074 26.3667C16.8929 25.7963 15.9409 24.9667 15.1515 23.8778C14.037 24.9667 12.9457 25.7963 11.8777 26.3667C10.8096 26.937 9.74157 27.2222 8.67351 27.2222C8.34845 27.2222 8.035 27.2222 7.73316 27.2222C7.43131 27.2222 7.23395 27.1963 7.14108 27.1444V51.3333ZM49.0043 51.3333H7.14108C7.23395 51.3333 7.43131 51.3333 7.73316 51.3333C8.035 51.3333 8.34845 51.3333 8.67351 51.3333C9.46294 51.3333 10.4033 51.3333 11.4946 51.3333C12.5858 51.3333 13.8048 51.3333 15.1515 51.3333C15.5694 51.3333 16.0338 51.3333 16.5446 51.3333C17.0554 51.3333 17.6011 51.3333 18.1815 51.3333C18.762 51.3333 19.3541 51.3333 19.9578 51.3333C20.5614 51.3333 21.1883 51.3333 21.8385 51.3333C22.3493 51.3333 22.8833 51.3333 23.4406 51.3333C23.9978 51.3333 24.555 51.3333 25.1123 51.3333C25.6695 51.3333 26.2036 51.3333 26.7144 51.3333C27.2252 51.3333 27.6896 51.3333 28.1075 51.3333C29.1291 51.3333 30.1507 51.3333 31.1724 51.3333C32.194 51.3333 33.3317 51.3333 34.5855 51.3333C35.2356 51.3333 35.8741 51.3333 36.501 51.3333C37.1279 51.3333 37.72 51.3333 38.2773 51.3333C38.8345 51.3333 39.3453 51.3333 39.8097 51.3333C40.2741 51.3333 40.692 51.3333 41.0635 51.3333C42.1315 51.3333 43.1996 51.3333 44.2677 51.3333C45.3357 51.3333 46.4038 51.3333 47.4718 51.3333C47.8433 51.3333 48.2032 51.3333 48.5515 51.3333C48.8998 51.3333 49.0507 51.3333 49.0043 51.3333Z"
fill="#323238" />
</svg>
</button>
<input id="coffee-shop-volume" type="range" min="0" max="1" step="0.1" value="0.5">
</div>
<div class="card-fireplace">
<button class="sound-fireplace">
<svg width="48" height="56" viewBox="0 0 48 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.72147 32.4211C4.72147 35.5158 5.42147 38.4263 6.82147 41.1526C8.22147 43.8789 10.1741 46.1509 12.6794 47.9684C12.4829 47.3789 12.3355 46.7772 12.2373 46.1632C12.139 45.5491 12.0899 44.9474 12.0899 44.3579C12.0899 42.786 12.3846 41.3123 12.9741 39.9368C13.5636 38.5614 14.4232 37.3088 15.553 36.1789L23.8794 28L32.2057 36.1789C33.3355 37.3088 34.1951 38.5614 34.7846 39.9368C35.3741 41.3123 35.6688 42.786 35.6688 44.3579C35.6688 44.9474 35.6197 45.5491 35.5215 46.1632C35.4232 46.7772 35.2759 47.3789 35.0794 47.9684C37.5846 46.1509 39.5373 43.8789 40.9373 41.1526C42.3373 38.4263 43.0373 35.5158 43.0373 32.4211C43.0373 29.7684 42.4723 27.1772 41.3425 24.6474C40.2127 22.1175 38.5916 19.7965 36.4794 17.6842C35.4478 18.4211 34.3671 18.9982 33.2373 19.4158C32.1074 19.8333 30.9776 20.0421 29.8478 20.0421C26.8513 20.0421 24.3706 19.0228 22.4057 16.9842C20.4408 14.9456 19.4583 12.3789 19.4583 9.28421V7.81053C17.1987 9.43158 15.1601 11.2246 13.3425 13.1895C11.525 15.1544 9.97761 17.2053 8.70041 19.3421C7.42322 21.4789 6.44076 23.6649 5.75305 25.9C5.06533 28.1351 4.72147 30.3088 4.72147 32.4211ZM23.8794 34.1895L18.6478 39.3474C17.9601 40.0351 17.432 40.7965 17.0636 41.6316C16.6952 42.4667 16.5109 43.3754 16.5109 44.3579C16.5109 46.3719 17.2232 48.0789 18.6478 49.4789C20.0723 50.8789 21.8162 51.5789 23.8794 51.5789C25.9425 51.5789 27.6864 50.8789 29.1109 49.4789C30.5355 48.0789 31.2478 46.3719 31.2478 44.3579C31.2478 43.3754 31.0636 42.4667 30.6951 41.6316C30.3267 40.7965 29.7987 40.0351 29.1109 39.3474L23.8794 34.1895ZM23.8794 0V9.72632C23.8794 11.3965 24.4566 12.7965 25.6109 13.9263C26.7653 15.0561 28.1776 15.6211 29.8478 15.6211C30.732 15.6211 31.5548 15.4368 32.3162 15.0684C33.0776 14.7 33.753 14.1474 34.3425 13.4105L35.6688 11.7895C39.3039 13.8526 42.1776 16.7263 44.2899 20.4105C46.4022 24.0947 47.4583 28.0982 47.4583 32.4211C47.4583 39.0035 45.1741 44.5789 40.6057 49.1474C36.0373 53.7158 30.4618 56 23.8794 56C17.2969 56 11.7215 53.7158 7.15305 49.1474C2.58463 44.5789 0.300415 39.0035 0.300415 32.4211C0.300415 26.1333 2.4127 20.0789 6.63726 14.2579C10.8618 8.43684 16.6092 3.68421 23.8794 0Z"
fill="#323238" />
</svg>
</button>
<input id="fireplace-volume" type="range" min="0" max="1" step="0.1" value="0.5">
</div>
</aside>
<script src="./js/index.js" type="module"></script>
</body>
</html>