-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (103 loc) · 23.4 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
<!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">
<title>Focus Timer 2.0</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="./asset/clock.jpg" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="container">
<section class="modes">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg" class="button-dark-mode">
<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>
<svg width="44" height="44" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" class="button-light-mode hide">
<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>
</section>
<section class="timer-container">
<div class="timer">
<span class="minutes">25</span>
<span>:</span>
<span class="second">00</span>
</div>
<div class="controls-container">
<button class="controls-play controls">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="bg-control" 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"/>
</svg>
</button>
<button class="controls-pause hide">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="bg-control change-stroke" 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 33H21V15H15V33Z" />
<path class="bg-control" d="M33.5 33H27.5V15H33.5V33Z"/>
</svg>
</button>
<button class="controls-stop">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="bg-control" 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"/>
</svg>
</button>
<button class="controls-add_minutes">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="bg-control" 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"/>
</svg>
</button>
<button class="controls-remove_minutes">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="bg-control" 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"/>
</svg>
</button>
</div>
</section>
<section class="sounds-container">
<div class="container-volume">
<button class="sound-forest button">
<svg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="bg-button" d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z"/>
<path class="color-button" d="M51.8355 104V99.8H67.0329V87.2H60.8158C56.9934 87.2 53.7352 85.835 51.0411 83.105C48.347 80.375 47 77.0733 47 73.2C47 70.4 47.7599 67.8217 49.2796 65.465C50.7993 63.1083 52.8487 61.3933 55.4276 60.32C55.8421 56.82 57.3503 53.8917 59.9523 51.535C62.5543 49.1783 65.6053 48 69.1053 48C72.6053 48 75.6562 49.1783 78.2582 51.535C80.8602 53.8917 82.3684 56.82 82.7829 60.32C85.3618 61.3933 87.4112 63.1083 88.9309 65.465C90.4507 67.8217 91.2105 70.4 91.2105 73.2C91.2105 77.0733 89.8635 80.375 87.1694 83.105C84.4753 85.835 81.2171 87.2 77.3947 87.2H71.1776V99.8H87.0658V104H51.8355ZM60.8158 83H77.3947C80.0658 83 82.3454 82.0433 84.2336 80.13C86.1217 78.2167 87.0658 75.9067 87.0658 73.2C87.0658 71.24 86.5132 69.455 85.4079 67.845C84.3026 66.235 82.875 65.0333 81.125 64.24L78.9145 63.26L78.6382 60.81C78.3158 58.3367 77.2566 56.2833 75.4605 54.65C73.6645 53.0167 71.5461 52.2 69.1053 52.2C66.6645 52.2 64.5461 53.0167 62.75 54.65C60.9539 56.2833 59.8947 58.3367 59.5724 60.81L59.2961 63.26L57.0855 64.24C55.3355 65.0333 53.9079 66.235 52.8026 67.845C51.6974 69.455 51.1447 71.24 51.1447 73.2C51.1447 75.9067 52.0888 78.2167 53.977 80.13C55.8651 82.0433 58.1447 83 60.8158 83Z"/>
</svg>
<label class="sr-only" for="volume-forest">volume</label>
<input class="volume-bar" type="range" id="volume-forest" min="0" max="100" step="1">
</button>
</div>
<div class="container-volume">
<button class="sound-rain button button-selected">
<svg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="bg-button" d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z" />
<path class="color-button" d="M53.5263 93.3333C52.9123 93.3333 52.375 93.1 51.9145 92.6333C51.4539 92.1667 51.2237 91.6222 51.2237 91C51.2237 90.3778 51.4539 89.8333 51.9145 89.3667C52.375 88.9 52.9123 88.6667 53.5263 88.6667C54.1404 88.6667 54.6776 88.9 55.1382 89.3667C55.5987 89.8333 55.8289 90.3778 55.8289 91C55.8289 91.6222 55.5987 92.1667 55.1382 92.6333C54.6776 93.1 54.1404 93.3333 53.5263 93.3333ZM85.1053 93.3333C84.4912 93.3333 83.9539 93.1 83.4934 92.6333C83.0329 92.1667 82.8026 91.6222 82.8026 91C82.8026 90.3778 83.0329 89.8333 83.4934 89.3667C83.9539 88.9 84.4912 88.6667 85.1053 88.6667C85.7193 88.6667 86.2566 88.9 86.7171 89.3667C87.1776 89.8333 87.4079 90.3778 87.4079 91C87.4079 91.6222 87.1776 92.1667 86.7171 92.6333C86.2566 93.1 85.7193 93.3333 85.1053 93.3333ZM61.4211 104C60.807 104 60.2697 103.767 59.8092 103.3C59.3487 102.833 59.1184 102.289 59.1184 101.667C59.1184 101.044 59.3487 100.5 59.8092 100.033C60.2697 99.5667 60.807 99.3333 61.4211 99.3333C62.0351 99.3333 62.5724 99.5667 63.0329 100.033C63.4934 100.5 63.7237 101.044 63.7237 101.667C63.7237 102.289 63.4934 102.833 63.0329 103.3C62.5724 103.767 62.0351 104 61.4211 104ZM69.3158 93.3333C68.7018 93.3333 68.1645 93.1 67.7039 92.6333C67.2434 92.1667 67.0132 91.6222 67.0132 91C67.0132 90.3778 67.2434 89.8333 67.7039 89.3667C68.1645 88.9 68.7018 88.6667 69.3158 88.6667C69.9298 88.6667 70.4671 88.9 70.9276 89.3667C71.3882 89.8333 71.6184 90.3778 71.6184 91C71.6184 91.6222 71.3882 92.1667 70.9276 92.6333C70.4671 93.1 69.9298 93.3333 69.3158 93.3333ZM77.2105 104C76.5965 104 76.0592 103.767 75.5987 103.3C75.1382 102.833 74.9079 102.289 74.9079 101.667C74.9079 101.044 75.1382 100.5 75.5987 100.033C76.0592 99.5667 76.5965 99.3333 77.2105 99.3333C77.8246 99.3333 78.3618 99.5667 78.8224 100.033C79.2829 100.5 79.5132 101.044 79.5132 101.667C79.5132 102.289 79.2829 102.833 78.8224 103.3C78.3618 103.767 77.8246 104 77.2105 104ZM56.8158 84C53 84 49.7434 82.6333 47.0461 79.9C44.3487 77.1667 43 73.8667 43 70C43 66.4889 44.239 63.3556 46.7171 60.6C49.1952 57.8444 52.2763 56.3333 55.9605 56.0667C57.364 53.5778 59.2171 51.6111 61.5197 50.1667C63.8224 48.7222 66.4211 48 69.3158 48C73.307 48 76.6513 49.2778 79.3487 51.8333C82.0461 54.3889 83.7018 57.5556 84.3158 61.3333C87.7807 61.5111 90.5329 62.7 92.5724 64.9C94.6118 67.1 95.6316 69.6889 95.6316 72.6667C95.6316 75.7778 94.5461 78.4444 92.375 80.6667C90.2039 82.8889 87.5614 84 84.4474 84H56.8158ZM56.8158 80H84.4474C86.4649 80 88.1754 79.2778 89.5789 77.8333C90.9825 76.3889 91.6842 74.6444 91.6842 72.6C91.6842 70.6 90.9825 68.8889 89.5789 67.4667C88.1754 66.0444 86.4649 65.3333 84.4474 65.3333H80.5V63.3333C80.5 60.1778 79.4145 57.5 77.2434 55.3C75.0724 53.1 72.4298 52 69.3158 52C67.0789 52 65.0285 52.6111 63.1645 53.8333C61.3004 55.0556 59.9298 56.7111 59.0526 58.8L58.5263 60H56.6842C53.9649 60.0889 51.6623 61.1 49.7763 63.0333C47.8904 64.9667 46.9474 67.2889 46.9474 70C46.9474 72.7556 47.9123 75.1111 49.8421 77.0667C51.7719 79.0222 54.0965 80 56.8158 80Z"/>
</svg>
<label class="sr-only" for="volume-rain">volume</label>
<input class="volume-bar" type="range" id="volume-rain" name="volume" min="0" max="100">
</button>
</div>
<div class="container-volume">
<button class="sound-coffee button">
<svg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="bg-button" d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z"/>
<path class="color-button" d="M94.0812 72.9667V99.3333C94.0812 100.578 93.6633 101.667 92.8274 102.6C91.9916 103.533 91.0164 104 89.9019 104H48.0387C46.9242 104 45.949 103.533 45.1132 102.6C44.2773 101.667 43.8594 100.578 43.8594 99.3333V72.9667C42.5591 71.7222 41.7 70.1926 41.2821 68.3778C40.8642 66.563 40.9106 64.7481 41.4214 62.9333L44.4166 52.4333C44.7881 51.0333 45.4382 49.9444 46.367 49.1667C47.2957 48.3889 48.3638 48 49.5712 48H88.0908C89.3911 48 90.5288 48.4019 91.504 49.2056C92.4792 50.0093 93.1525 51.0852 93.524 52.4333L96.5889 62.9333C97.0997 64.7481 97.1345 66.563 96.6933 68.3778C96.2522 70.1926 95.3815 71.7222 94.0812 72.9667ZM75.2742 70.5556C76.6208 70.5556 77.7586 70.063 78.6873 69.0778C79.6161 68.0926 79.9875 66.9 79.8018 65.5L78.0604 52.6667H71.0948V65.5C71.0948 66.8481 71.4895 68.0278 72.279 69.0389C73.0684 70.05 74.0668 70.5556 75.2742 70.5556ZM62.2485 70.5556C63.5488 70.5556 64.6516 70.063 65.5572 69.0778C66.4627 68.0926 66.9155 66.9 66.9155 65.5V52.6667H59.9499L58.2085 65.5C58.0227 66.8481 58.3478 68.0278 59.1837 69.0389C60.0195 70.05 61.0412 70.5556 62.2485 70.5556ZM49.5712 70.5556C50.6856 70.5556 51.6492 70.1278 52.4619 69.2722C53.2745 68.4167 53.7505 67.3667 53.8898 66.1222L55.7009 52.6667H48.7353L45.5311 64.0222C45.0667 65.6296 45.2525 67.1204 46.0884 68.4944C46.9242 69.8685 48.0852 70.5556 49.5712 70.5556ZM88.3695 70.5556C89.8555 70.5556 91.028 69.8815 91.8871 68.5333C92.7462 67.1852 92.9435 65.6815 92.4792 64.0222L89.275 52.6667H82.3094L84.1205 66.1222C84.2598 67.3667 84.7358 68.4167 85.5484 69.2722C86.3611 70.1278 87.3014 70.5556 88.3695 70.5556ZM48.0387 99.3333H89.9019V75.1444C89.9483 75.1963 89.7974 75.2222 89.4491 75.2222C89.1009 75.2222 88.741 75.2222 88.3695 75.2222C87.2085 75.2222 86.1057 74.95 85.0608 74.4056C84.016 73.8611 82.9827 73.0185 81.9611 71.8778C81.2181 72.9148 80.2894 73.7315 79.1749 74.3278C78.0604 74.9241 76.8298 75.2222 75.4831 75.2222C74.09 75.2222 72.8943 75.0019 71.8959 74.5611C70.8975 74.1204 69.9339 73.3815 69.0051 72.3444C68.3086 73.2778 67.4263 73.9907 66.3582 74.4833C65.2902 74.9759 64.0828 75.2222 62.7361 75.2222C61.2966 75.2222 60.0195 74.937 58.905 74.3667C57.7905 73.7963 56.8386 72.9667 56.0491 71.8778C54.9347 72.9667 53.8434 73.7963 52.7753 74.3667C51.7073 74.937 50.6392 75.2222 49.5712 75.2222C49.2461 75.2222 48.9326 75.2222 48.6308 75.2222C48.329 75.2222 48.1316 75.1963 48.0387 75.1444V99.3333ZM89.9019 99.3333H48.0387C48.1316 99.3333 48.329 99.3333 48.6308 99.3333C48.9326 99.3333 49.2461 99.3333 49.5712 99.3333C50.3606 99.3333 51.3009 99.3333 52.3922 99.3333C53.4835 99.3333 54.7025 99.3333 56.0491 99.3333C56.4671 99.3333 56.9315 99.3333 57.4423 99.3333C57.9531 99.3333 58.4987 99.3333 59.0792 99.3333C59.6596 99.3333 60.2517 99.3333 60.8554 99.3333C61.4591 99.3333 62.086 99.3333 62.7361 99.3333C63.2469 99.3333 63.781 99.3333 64.3382 99.3333C64.8954 99.3333 65.4527 99.3333 66.0099 99.3333C66.5672 99.3333 67.1012 99.3333 67.612 99.3333C68.1228 99.3333 68.5872 99.3333 69.0051 99.3333C70.0268 99.3333 71.0484 99.3333 72.07 99.3333C73.0916 99.3333 74.2293 99.3333 75.4831 99.3333C76.1333 99.3333 76.7718 99.3333 77.3987 99.3333C78.0256 99.3333 78.6176 99.3333 79.1749 99.3333C79.7321 99.3333 80.243 99.3333 80.7073 99.3333C81.1717 99.3333 81.5896 99.3333 81.9611 99.3333C83.0292 99.3333 84.0972 99.3333 85.1653 99.3333C86.2334 99.3333 87.3014 99.3333 88.3695 99.3333C88.741 99.3333 89.1009 99.3333 89.4491 99.3333C89.7974 99.3333 89.9483 99.3333 89.9019 99.3333Z"/>
</svg>
<label class="sr-only" for="volume-coffe">volume</label>
<input class="volume-bar" type="range" id="volume-coffe" name="volume" min="0" max="100">
</button>
</div>
<div class="container-volume">
<button class="sound-fire button">
<svg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="bg-button" d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z"/>
<path class="color-button" d="M49.4211 80.4211C49.4211 83.5158 50.1211 86.4263 51.5211 89.1526C52.9211 91.8789 54.8737 94.1509 57.3789 95.9684C57.1825 95.3789 57.0351 94.7772 56.9368 94.1632C56.8386 93.5491 56.7895 92.9474 56.7895 92.3579C56.7895 90.786 57.0842 89.3123 57.6737 87.9368C58.2632 86.5614 59.1228 85.3088 60.2526 84.1789L68.5789 76L76.9053 84.1789C78.0351 85.3088 78.8947 86.5614 79.4842 87.9368C80.0737 89.3123 80.3684 90.786 80.3684 92.3579C80.3684 92.9474 80.3193 93.5491 80.2211 94.1632C80.1228 94.7772 79.9754 95.3789 79.7789 95.9684C82.2842 94.1509 84.2368 91.8789 85.6368 89.1526C87.0368 86.4263 87.7368 83.5158 87.7368 80.4211C87.7368 77.7684 87.1719 75.1772 86.0421 72.6474C84.9123 70.1175 83.2912 67.7965 81.1789 65.6842C80.1474 66.4211 79.0667 66.9982 77.9368 67.4158C76.807 67.8333 75.6772 68.0421 74.5474 68.0421C71.5509 68.0421 69.0702 67.0228 67.1053 64.9842C65.1403 62.9456 64.1579 60.3789 64.1579 57.2842V55.8105C61.8982 57.4316 59.8596 59.2246 58.0421 61.1895C56.2246 63.1544 54.6772 65.2053 53.4 67.3421C52.1228 69.4789 51.1403 71.6649 50.4526 73.9C49.7649 76.1351 49.4211 78.3088 49.4211 80.4211ZM68.5789 82.1895L63.3474 87.3474C62.6596 88.0351 62.1316 88.7965 61.7632 89.6316C61.3947 90.4667 61.2105 91.3754 61.2105 92.3579C61.2105 94.3719 61.9228 96.0789 63.3474 97.4789C64.7719 98.8789 66.5158 99.5789 68.5789 99.5789C70.6421 99.5789 72.386 98.8789 73.8105 97.4789C75.2351 96.0789 75.9474 94.3719 75.9474 92.3579C75.9474 91.3754 75.7632 90.4667 75.3947 89.6316C75.0263 88.7965 74.4982 88.0351 73.8105 87.3474L68.5789 82.1895ZM68.5789 48V57.7263C68.5789 59.3965 69.1561 60.7965 70.3105 61.9263C71.4649 63.0561 72.8772 63.6211 74.5474 63.6211C75.4316 63.6211 76.2544 63.4368 77.0158 63.0684C77.7772 62.7 78.4526 62.1474 79.0421 61.4105L80.3684 59.7895C84.0035 61.8526 86.8772 64.7263 88.9895 68.4105C91.1017 72.0947 92.1579 76.0982 92.1579 80.4211C92.1579 87.0035 89.8737 92.5789 85.3053 97.1474C80.7368 101.716 75.1614 104 68.5789 104C61.9965 104 56.4211 101.716 51.8526 97.1474C47.2842 92.5789 45 87.0035 45 80.4211C45 74.1333 47.1123 68.0789 51.3368 62.2579C55.5614 56.4368 61.3088 51.6842 68.5789 48Z"/>
</svg>
<label class="sr-only" for="volume-fire">volume</label>
<input class="volume-bar" type="range" id="volume-fire" name="volume" min="0" max="100">
</button>
</div>
</section>
</main>
<script src="./js/index.js" type="module" ></script>
</body>
</html>