-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathfocus.html
48 lines (48 loc) · 24.9 KB
/
focus.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
<!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>FocusFrenzy</title>
<link rel="stylesheet" href="focus.css">
<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=Playfair+Display:ital,wght@0,400;0,500;0,700;1,500;1,600&family=Poppins:ital,wght@0,400;0,700;1,700&display=swap" rel="stylesheet">
<script defer src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
<script defer src="script.js"></script>
</head>
<body>
<div class="title">
<a href="index.html" style="color: inherit ; text-decoration: none">
• focus frenzy •</div>
</a>
<div class="music-operations">
<div>
<button class="laps" title="Number of laps">0/4</button>
</div>
<div>
<button class="timer">timer</button>
</div>
</div>
<div class="focus-music">
<div class="cloud-rain" title="Rain"><svg fill="#000000" width="64px" height="64px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_iconCarrier"><path d="M 16 4 C 12.773438 4 9.972656 6.257813 9.21875 9.34375 C 7.972656 9.828125 6.9375 10.8125 6.40625 12.03125 C 2.910156 11.773438 0 14.554688 0 18 C 0 21.308594 2.691406 24 6 24 L 8 24 L 9 22 L 6 22 C 3.792969 22 2 20.207031 2 18 C 2 15.792969 3.792969 14 6 14 C 6.277344 14 6.558594 14.023438 6.875 14.09375 L 7.875 14.3125 L 8.0625 13.34375 C 8.308594 12.238281 9.207031 11.359375 10.3125 11.09375 L 10.96875 10.9375 L 11.0625 10.28125 C 11.421875 7.847656 13.542969 6 16 6 C 17.894531 6 19.613281 7.054688 20.46875 8.75 L 20.84375 9.53125 L 21.6875 9.25 C 22.15625 9.085938 22.582031 9 23 9 C 25.207031 9 27 10.792969 27 13 C 27 13.039063 27.003906 13.089844 27 13.125 C 26.992188 13.191406 26.976563 13.242188 26.96875 13.3125 L 26.90625 14.03125 L 27.5625 14.3125 C 29.039063 14.941406 30 16.394531 30 18 C 30 20.207031 28.207031 22 26 22 L 24 22 L 25 24 L 26 24 C 29.308594 24 32 21.308594 32 18 C 32 15.835938 30.84375 13.875 29 12.8125 C 28.894531 9.59375 26.242188 7 23 7 C 22.609375 7 22.207031 7.039063 21.8125 7.125 C 20.523438 5.179688 18.371094 4 16 4 Z M 18 14 C 18 14 16 16.894531 16 18 C 16 19.105469 16.894531 20 18 20 C 19.105469 20 20 19.105469 20 18 C 20 16.894531 18 14 18 14 Z M 13 19 C 13 19 11 21.894531 11 23 C 11 24.105469 11.894531 25 13 25 C 14.105469 25 15 24.105469 15 23 C 15 21.894531 13 19 13 19 Z M 21 22 C 21 22 19 24.894531 19 26 C 19 27.105469 19.894531 28 21 28 C 22.105469 28 23 27.105469 23 26 C 23 24.894531 21 22 21 22 Z"></path></g></svg></div>
<div class="cloud-thunder" title="Thunder"><svg width="60px" height="60px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#000000" class="bi bi-cloud-lightning"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_iconCarrier"> <path d="M13.405 4.027a5.001 5.001 0 0 0-9.499-1.004A3.5 3.5 0 1 0 3.5 10H13a3 3 0 0 0 .405-5.973zM8.5 1a4 4 0 0 1 3.976 3.555.5.5 0 0 0 .5.445H13a2 2 0 0 1 0 4H3.5a2.5 2.5 0 1 1 .605-4.926.5.5 0 0 0 .596-.329A4.002 4.002 0 0 1 8.5 1zM7.053 11.276A.5.5 0 0 1 7.5 11h1a.5.5 0 0 1 .474.658l-.28.842H9.5a.5.5 0 0 1 .39.812l-2 2.5a.5.5 0 0 1-.875-.433L7.36 14H6.5a.5.5 0 0 1-.447-.724l1-2z"></path> </g></svg></div>
<div class="wind" title="Wind"><svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_iconCarrier"> <path d="M9.50929 4.66667C9.8755 4.2575 10.4077 4 11 4C12.1046 4 13 4.89543 13 6C13 7.10457 12.1046 8 11 8H2.00002M12.5093 19.3333C12.8755 19.7425 13.4077 20 14 20C15.1046 20 16 19.1046 16 18C16 16.8954 15.1046 16 14 16H2.00002M16.7639 7C17.3132 6.38625 18.1115 6 19 6C20.6569 6 22 7.34315 22 9C22 10.6569 20.6569 12 19 12H2" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></div>
<div class="fire" title="Fire"><svg fill="#000000" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_iconCarrier"> <metadata> <sfw xmlns="&ns_sfw;"> <slices> </slices> <slicesourcebounds width="505" height="984" bottomleftorigin="true" x="0" y="-984"> </slicesourcebounds> </sfw> </metadata> <g> <g> <g> <path d="M12,24c-5,0-9-4-9-9c0-4,2.4-8.2,3.4-9.8C7,4.3,9.8,0,12,0c0.6,0,1,0.4,1,1s-0.4,1-1,1c-1.4,0.2-7,7.4-7,13 c0,3.9,3.1,7,7,7s7-3.1,7-7c0-0.8-0.1-1.6-0.3-2.6c-0.5-1.9-1.4-4.1-2.7-6.1c-0.3-0.5-0.2-1.1,0.3-1.4c0.5-0.3,1.1-0.2,1.4,0.3 c1.4,2.2,2.4,4.6,3,6.7C20.9,13,21,14.1,21,15C21,20,17,24,12,24z"></path> </g> </g> <g> <g> <path d="M15,9.9c-0.3,0-0.6-0.1-0.8-0.3C12.1,7.2,11,4.2,11,1c0-0.6,0.4-1,1-1s1,0.4,1,1c0,2.7,1,5.3,2.7,7.3 c0.4,0.4,0.3,1-0.1,1.4C15.5,9.8,15.2,9.9,15,9.9z"></path> </g> </g> <g> <g> <path d="M15,9.9c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4c0.7-0.8,1.3-1.7,1.5-2.7C15.9,5,16.5,4.7,17,4.8 c0.5,0.1,0.9,0.7,0.7,1.2c-0.3,1.3-1.1,2.6-2,3.6C15.5,9.8,15.2,9.9,15,9.9z"></path> </g> </g> <g> <g> <path d="M12,24c-2.8,0-5-2.2-5-5c0-3.1,3.1-8,5-8c0.6,0,1,0.4,1,1c0,0.5-0.4,0.9-0.9,1C11.4,13.4,9,16.6,9,19c0,1.7,1.3,3,3,3 s3-1.3,3-3c0-0.3-0.1-0.7-0.2-1.2c-0.2-0.9-0.7-1.9-1.3-2.9c-0.3-0.5-0.2-1.1,0.3-1.4c0.5-0.3,1.1-0.2,1.4,0.3 c0.7,1.1,1.3,2.4,1.6,3.5c0.1,0.6,0.2,1.1,0.2,1.7C17,21.8,14.8,24,12,24z"></path> </g> </g> <g> <g> <path d="M13.5,17c-0.3,0-0.6-0.1-0.8-0.3C11.6,15.3,11,13.7,11,12c0-0.6,0.4-1,1-1s1,0.4,1,1c0,1.2,0.4,2.4,1.2,3.3 c0.4,0.4,0.3,1-0.1,1.4C14,16.9,13.7,17,13.5,17z"></path> </g> </g> <g> <g> <path d="M13.5,17c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4c0.3-0.3,0.5-0.7,0.6-1.1c0.1-0.5,0.7-0.9,1.2-0.7 c0.5,0.1,0.9,0.7,0.7,1.2c-0.2,0.8-0.6,1.5-1.2,2C14,16.9,13.7,17,13.5,17z"></path> </g> </g> </g> </g></svg></div>
<div class="fan" title="Fan"><svg fill="#000000" height="64px" width="64px" version="1.1" id="XMLID_108_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_iconCarrier"> <g id="fan"> <g> <path d="M5.4,22.8L5.4,22.8c-0.9,0-1.7-0.4-2.3-1c-0.7-0.7-1.3-1.5-1.8-2.4c-0.4-0.8-0.8-1.6-1-2.4c-0.3-0.9-0.2-1.9,0.3-2.6 C1,13.7,1.7,13.2,2.4,13c1.1-0.3,2.1-0.5,3.1-0.8l1.8-0.5c0.2-0.5,0.5-1,0.9-1.5L6.8,5.3C6.6,4.5,6.7,3.7,7.1,3 c0.4-0.7,1.2-1.3,2-1.5c0.9-0.2,1.9-0.4,3-0.3c0.9,0,1.8,0.1,2.6,0.3c0.9,0.2,1.7,0.8,2.1,1.5c0.4,0.7,0.5,1.5,0.3,2.3l-1.4,4.9 c0.4,0.4,0.7,0.9,0.9,1.5l4.9,1.3c0.8,0.2,1.5,0.7,1.9,1.4c0.4,0.8,0.5,1.6,0.3,2.5c-0.3,1-0.7,1.9-1.2,2.7s-1,1.5-1.6,2.1 c-0.6,0.7-1.5,1.1-2.4,1.1c0,0,0,0-0.1,0c-0.8,0-1.6-0.3-2.1-0.9l-3.6-3.7c-0.5,0.1-1.1,0.1-1.6,0l-3.6,3.7 C7,22.5,6.2,22.8,5.4,22.8z M7,13.7L6,14c-1,0.3-2.1,0.5-3.1,0.8c-0.3,0.1-0.5,0.3-0.6,0.5c-0.2,0.3-0.2,0.7-0.1,1.1 c0.2,0.7,0.5,1.4,0.9,2c0.4,0.7,0.9,1.4,1.5,2c0.3,0.3,0.6,0.4,0.9,0.4c0.2,0,0.5-0.1,0.7-0.3l3.1-3.1C8,16.6,7.2,15.3,7,13.7z M14.8,17.4l3,3.1c0.2,0.2,0.5,0.3,0.7,0.3c0.3,0,0.7-0.2,1-0.5c0.5-0.5,1-1.1,1.3-1.8c0.4-0.7,0.7-1.5,1-2.3 c0.1-0.3,0.1-0.7-0.1-1c-0.1-0.2-0.4-0.4-0.6-0.5l-4.1-1C16.8,15.3,16,16.6,14.8,17.4z M12,10.3c-1.7,0-3,1.3-3,3s1.3,3,3,3 s3-1.3,3-3S13.7,10.3,12,10.3z M12,3c-0.8,0-1.6,0.1-2.4,0.3C9.2,3.4,9,3.6,8.8,3.9C8.7,4.1,8.6,4.4,8.7,4.7l1.1,4.1 c1.3-0.6,3-0.6,4.3,0l1.1-4.1c0.1-0.3,0-0.6-0.1-0.8c-0.1-0.3-0.4-0.5-0.8-0.6C13.6,3.1,12.9,3,12.1,3H12z"></path> </g> </g> </g></svg></div>
<div class="forest" title="Forest"><svg fill="#000000" height="64px" width="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.001 512.001" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M509.123,341.261l-72.576-107.519h23.998c13.135,0,21.134-14.526,14.104-25.626l-47.204-74.54h15.068 c13.998,0,21.789-16.27,12.995-27.174L374.727,6.235c-6.686-8.289-19.321-8.27-25.991,0l-80.782,100.166 c-8.787,10.896-1.013,27.174,12.995,27.174h15.068L256,196.767l-40.017-63.191h15.068c13.998,0,21.789-16.27,12.995-27.174 L163.264,6.235c-3.17-3.93-7.946-6.215-12.995-6.215c-5.048,0-9.826,2.285-12.995,6.215L56.492,106.401 c-8.787,10.896-1.013,27.174,12.995,27.174h15.068l-47.204,74.54c-7.027,11.097,0.966,25.626,14.104,25.626h23.998L2.878,341.261 c-7.47,11.067,0.471,26.035,13.836,26.035h83.472v111.296H83.492c-9.22,0-16.694,7.475-16.694,16.694s7.475,16.694,16.694,16.694 c4.546,0,345.337,0,356.146,0c9.22,0,16.694-7.475,16.694-16.694s-7.475-16.694-16.694-16.694h-27.824V367.296h83.472 C508.636,367.296,516.599,352.339,509.123,341.261z M249.082,233.741c2.431,0,4.78-0.536,6.918-1.51 c2.138,0.974,4.487,1.51,6.918,1.51h23.998L256,279.542l-30.916-45.8H249.082z M48.124,333.908l72.577-107.52 c3.455-5.118,3.803-11.724,0.905-17.176s-8.568-8.859-14.742-8.859H81.788l47.204-74.54c7.027-11.097-0.966-25.626-14.104-25.626 h-10.49l45.872-56.878l45.872,56.878h-10.49c-13.135,0-21.134,14.526-14.104,25.626l47.204,74.54h-25.076 c-6.174,0-11.844,3.408-14.742,8.859c-2.898,5.451-2.55,12.058,0.905,17.176l62.159,92.087c0.013,0.02,0.028,0.04,0.04,0.06 l10.377,15.373C243.055,333.908,55.348,333.908,48.124,333.908z M166.963,478.592h-33.389V367.296h33.389V478.592z M311.648,478.592H200.352V367.296c12.297,0,99.373,0,111.296,0V478.592z M378.425,478.592h-33.389V367.296h33.389V478.592z M292.695,333.907l-16.555-24.526l56.022-82.994c7.469-11.066-0.472-26.035-13.837-26.035h-25.076l47.204-74.539 c7.027-11.097-0.966-25.626-14.104-25.626h-10.49l45.872-56.878l45.872,56.878h-10.49c-13.135,0-21.134,14.526-14.104,25.626 l47.204,74.54h-25.076c-13.351,0-21.313,14.957-13.837,26.035l72.576,107.519C462.301,333.907,296.37,333.907,292.695,333.907z"></path> </g> </g> </g></svg></div>
<div class="leaves" title="Leaves"><svg width="64px" height="64px" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_iconCarrier"><defs><style>.cls-1{fill:none;stroke:#020202;stroke-miterlimit:10;stroke-width:1.91px;}</style></defs><path class="cls-1" d="M22.52,7.24V9.53a5.34,5.34,0,0,1-3,4.82,4.21,4.21,0,0,1,1.11,2.83v1.54H16.2A4.19,4.19,0,0,1,12,14.89H12A4.19,4.19,0,0,1,7.8,18.72H3.39V17.18A4.21,4.21,0,0,1,4.5,14.35a5.34,5.34,0,0,1-3-4.82V7.24H6.63a4.94,4.94,0,0,1,1,.09A9.81,9.81,0,0,1,12,1.5a9.81,9.81,0,0,1,4.42,5.83,4.94,4.94,0,0,1,.95-.09Z"></path><line class="cls-1" x1="12" y1="7.24" x2="12" y2="23.5"></line><line class="cls-1" x1="6.26" y1="11.07" x2="12" y2="14.89"></line><line class="cls-1" x1="16.78" y1="11.07" x2="12" y2="13.93"></line></g></svg></div>
<div class="water" title="Water"><svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_iconCarrier"> <path d="M22 16C22 19.3137 19.3137 22 16 22C12.6863 22 10 19.3137 10 16C10 11.6863 16 2 16 2C16 2 22 11.6863 22 16Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M8 9C8 10.6569 6.65685 12 5 12C3.34315 12 2 10.6569 2 9C2 6.84315 5 2 5 2C5 2 8 6.84315 8 9Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></div>
<div class="summer-night" title="Summer Night"><svg fill="#000000" height="64px" width="64px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_iconCarrier"> <g> <path d="m494.9,331.3c-6.1-6.1-15.3-7.8-23.2-4.2-37.1,17.1-78.3,23.2-119,17.6-117.3-16.3-199.5-125.2-183.3-242.8 3-21.4 9-42.2 18.1-61.6 3.6-7.8 2-17.1-4.1-23.2-6.1-6.1-15.3-7.7-23.2-4.2-43.7,19.4-130.3,81.1-146.5,197.9-25.8,186.5 139,284.9 218.4,289.2 55.7,3.1 189.9,8.1 266.9-145.5 3.8-7.7 2-17.1-4.1-23.2zm-257.2,127.9c-117.3-16.3-199.5-125.2-183.3-242.8 7.6-55 35.5-103.8 77.4-137.7-1.2,5.8-2.2,11.6-3,17.5-27.2,193.6 143,282.8 218.3,289.2 29,2.5 57.9,3.1 86-2.7-46.5,57.2-119.7,87-195.4,76.5z"></path> </g> </g></svg></div>
<div class="coffee-shop" title="Cafe"><svg fill="#000000" height="64px" width="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 511.999 511.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M80.635,492.933c-0.207-1.021-0.51-2.026-0.909-2.983s-0.893-1.898-1.467-2.759c-0.59-0.877-1.26-1.691-1.994-2.424 c-0.734-0.734-1.547-1.404-2.424-1.978c-0.861-0.574-1.786-1.069-2.743-1.467c-0.973-0.399-1.978-0.702-2.983-0.909 c-2.057-0.415-4.179-0.415-6.236,0c-1.021,0.207-2.026,0.51-2.983,0.909c-0.973,0.399-1.898,0.893-2.759,1.467 c-0.877,0.574-1.691,1.244-2.424,1.978c-0.734,0.734-1.404,1.547-1.978,2.424c-0.574,0.861-1.069,1.802-1.467,2.759 s-0.702,1.962-0.909,2.983c-0.207,1.037-0.319,2.073-0.319,3.126c0,1.037,0.112,2.073,0.319,3.11 c0.207,1.021,0.51,2.026,0.909,2.983c0.399,0.957,0.893,1.882,1.467,2.759c0.574,0.861,1.244,1.675,1.978,2.424 c0.734,0.734,1.547,1.388,2.424,1.978c0.861,0.574,1.786,1.069,2.759,1.467c0.957,0.399,1.962,0.702,2.983,0.909 s2.073,0.303,3.11,0.303s2.089-0.096,3.126-0.303c1.005-0.207,2.01-0.51,2.983-0.909c0.957-0.399,1.882-0.893,2.743-1.467 c0.877-0.59,1.691-1.244,2.424-1.978c0.734-0.75,1.404-1.563,1.994-2.424c0.574-0.877,1.069-1.802,1.467-2.759 c0.399-0.957,0.702-1.962,0.909-2.983c0.207-1.037,0.303-2.073,0.303-3.11C80.938,495.007,80.842,493.97,80.635,492.933z"></path> </g> </g> <g> <g> <path d="M447.793,217.748h-50.34v-29.341c0-30.48-14.816-45.297-45.295-45.297H93.554c-30.48,0-45.297,14.817-45.297,45.297 v175.234c0,14.308,6.232,37.346,20.154,56.557c10.458,14.433,28.336,31.188,56.712,36.174c-1.244,3.97-1.916,8.19-1.916,12.564 c0,3.866,0.534,7.606,1.514,11.165H112.84c-8.809,0-15.95,7.141-15.95,15.95c0,8.809,7.141,15.95,15.95,15.95h267.877 c8.807,0,15.95-7.141,15.95-15.95c0-8.809-7.142-15.95-15.95-15.95h-59.728c0.981-3.558,1.514-7.299,1.514-11.165 c0-4.375-0.672-8.594-1.916-12.564c28.376-4.987,46.255-21.742,56.714-36.174c13.921-19.211,20.152-42.249,20.152-56.557v-5.016 h50.34c8.807,0,15.95-7.141,15.95-15.95V233.696C463.743,224.889,456.6,217.748,447.793,217.748z M280.402,479.138H165.306 c-5.625,0-10.201-4.576-10.201-10.201c0-5.624,4.576-10.201,10.201-10.201h115.096c5.625,0,10.201,4.578,10.201,10.201 C290.603,474.562,286.027,479.138,280.402,479.138z M365.552,217.748H176.638c-8.809,0-15.95,7.141-15.95,15.95 s7.141,15.95,15.95,15.95h188.914v113.993c0,7.397-3.75,23.58-14.083,37.84c-11.764,16.237-27.99,24.468-48.224,24.468h-160.78 c-20.234,0-36.459-8.233-48.224-24.468c-10.334-14.261-14.085-30.443-14.085-37.84V188.407c0-9.426,1.853-11.386,1.931-11.466 c0.08-0.078,2.04-1.932,11.466-1.932h258.602c9.425,0,11.386,1.853,11.465,1.932s1.932,2.04,1.932,11.466V217.748z M431.843,326.726h-34.391v-77.08h34.391V326.726z"></path> </g> </g> <g> <g> <path d="M144.433,230.58c-0.207-1.022-0.51-2.026-0.909-2.983c-0.399-0.957-0.893-1.882-1.467-2.759 c-0.59-0.861-1.26-1.675-1.994-2.424c-0.734-0.734-1.547-1.404-2.424-1.978c-0.861-0.574-1.786-1.069-2.743-1.467 c-0.973-0.399-1.978-0.702-2.983-0.909c-2.057-0.415-4.179-0.415-6.236,0c-1.021,0.207-2.026,0.51-2.983,0.909 c-0.973,0.399-1.898,0.893-2.759,1.467c-0.877,0.574-1.691,1.244-2.424,1.978c-0.734,0.734-1.404,1.563-1.978,2.424 c-0.574,0.877-1.069,1.802-1.467,2.759c-0.399,0.957-0.702,1.962-0.909,2.983c-0.207,1.037-0.319,2.073-0.319,3.11 c0,1.053,0.112,2.089,0.319,3.126c0.207,1.021,0.51,2.026,0.909,2.983s0.893,1.882,1.467,2.759 c0.574,0.861,1.244,1.675,1.978,2.424c0.734,0.734,1.547,1.388,2.424,1.978c0.861,0.574,1.786,1.069,2.759,1.467 c0.957,0.399,1.962,0.702,2.983,0.909c1.021,0.207,2.073,0.303,3.11,0.303c1.037,0,2.089-0.096,3.126-0.303 c1.005-0.207,2.01-0.51,2.983-0.909c0.957-0.399,1.882-0.893,2.743-1.467c0.877-0.59,1.691-1.244,2.424-1.978 c0.734-0.75,1.404-1.563,1.994-2.424c0.574-0.877,1.069-1.802,1.467-2.759s0.702-1.962,0.909-2.983 c0.207-1.037,0.303-2.073,0.303-3.126C144.736,232.653,144.64,231.616,144.433,230.58z"></path> </g> </g> <g> <g> <path d="M247.053,33.189c-3.474-14.353-12.465-25.012-26.722-31.682c-7.978-3.732-17.473-0.292-21.205,7.688 c-3.732,7.978-0.292,17.473,7.688,21.205c6.313,2.954,8.259,6.252,9.24,10.307c0.903,3.711,0.759,9.259-5.039,14.618 c-19.152,17.71-22.787,40.568-9.26,58.235c3.141,4.101,7.881,6.254,12.675,6.254c3.383,0,6.791-1.072,9.685-3.287 c6.994-5.356,8.323-15.366,2.967-22.361c-3.051-3.983-1.169-9.171,5.587-15.419C245.681,66.715,251.058,49.679,247.053,33.189z"></path> </g> </g> <g> <g> <path d="M316.622,49.821c-3.016-12.457-10.597-21.604-22.53-27.186c-7.978-3.734-17.473-0.29-21.205,7.688 c-3.734,7.978-0.292,17.473,7.688,21.205c3.512,1.644,4.396,3.118,5.046,5.812c1.026,4.209-1.003,6.678-2.616,8.169 c-17.183,15.889-19.98,36.469-6.96,51.208c3.153,3.568,7.544,5.389,11.961,5.389c3.753,0,7.52-1.317,10.552-3.995 c6.603-5.831,7.227-15.911,1.396-22.513c-0.049-0.056-0.094-0.107-0.131-0.153c0.324-1.089,1.724-3.635,4.839-6.515 C315.635,78.782,320.105,64.158,316.622,49.821z"></path> </g> </g> <g> <g> <path d="M173.075,49.823c-3.014-12.457-10.594-21.604-22.529-27.188c-7.98-3.732-17.474-0.29-21.205,7.688 c-3.732,7.978-0.292,17.473,7.688,21.205c3.512,1.643,4.394,3.117,5.046,5.814c1.022,4.208-1.003,6.677-2.617,8.168 c-15.881,14.685-18.999,33.151-8.342,49.398c3.062,4.668,8.155,7.203,13.351,7.203c3.002,0,6.037-0.845,8.734-2.616 c7.366-4.831,9.42-14.72,4.587-22.084c-1.183-1.805-2.206-3.364,3.326-8.479C172.088,78.784,176.559,64.158,173.075,49.823z"></path> </g> </g> </g></svg></div>
<div class="train" title="Train"><svg width="64px" height="64px" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_iconCarrier"><defs><style>.cls-1{fill:none;stroke:#020202;stroke-miterlimit:10;stroke-width:1.91px;}</style></defs><path class="cls-1" d="M8.17,1.5h7.65a3.83,3.83,0,0,1,3.83,3.83v9.57a1.91,1.91,0,0,1-1.91,1.91H6.26a1.91,1.91,0,0,1-1.91-1.91V5.33A3.83,3.83,0,0,1,8.17,1.5Z"></path><line class="cls-1" x1="8.17" y1="16.8" x2="5.3" y2="23.5"></line><line class="cls-1" x1="15.83" y1="16.8" x2="18.7" y2="23.5"></line><line class="cls-1" x1="6.26" y1="20.63" x2="17.74" y2="20.63"></line><line class="cls-1" x1="19.65" y1="11.07" x2="4.35" y2="11.07"></line><line class="cls-1" x1="7.22" y1="13.93" x2="9.13" y2="13.93"></line><line class="cls-1" x1="14.87" y1="13.93" x2="16.78" y2="13.93"></line></g></svg></div>
<div class="sea-waves" title="Sea waves"><svg fill="#000000" width="64px" height="64px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_iconCarrier"><path d="M5.996 9c1.413 0 2.16-.747 2.705-1.293.49-.49.731-.707 1.292-.707s.802.217 1.292.707C11.83 8.253 12.577 9 13.991 9c1.415 0 2.163-.747 2.71-1.293.491-.49.732-.707 1.295-.707s.804.217 1.295.707C19.837 8.253 20.585 9 22 9V7c-.563 0-.804-.217-1.295-.707C20.159 5.747 19.411 5 17.996 5s-2.162.747-2.709 1.292c-.491.491-.731.708-1.296.708-.562 0-.802-.217-1.292-.707C12.154 5.747 11.407 5 9.993 5s-2.161.747-2.706 1.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16 5.747 3.413 5 2 5v2c.561 0 .801.217 1.291.707C3.836 8.253 4.583 9 5.996 9zm0 5c1.413 0 2.16-.747 2.705-1.293.49-.49.731-.707 1.292-.707s.802.217 1.292.707c.545.546 1.292 1.293 2.706 1.293 1.415 0 2.163-.747 2.71-1.293.491-.49.732-.707 1.295-.707s.804.217 1.295.707C19.837 13.253 20.585 14 22 14v-2c-.563 0-.804-.217-1.295-.707-.546-.546-1.294-1.293-2.709-1.293s-2.162.747-2.709 1.292c-.491.491-.731.708-1.296.708-.562 0-.802-.217-1.292-.707C12.154 10.747 11.407 10 9.993 10s-2.161.747-2.706 1.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16 10.747 3.413 10 2 10v2c.561 0 .801.217 1.291.707C3.836 13.253 4.583 14 5.996 14zm0 5c1.413 0 2.16-.747 2.705-1.293.49-.49.731-.707 1.292-.707s.802.217 1.292.707c.545.546 1.292 1.293 2.706 1.293 1.415 0 2.163-.747 2.71-1.293.491-.49.732-.707 1.295-.707s.804.217 1.295.707C19.837 18.253 20.585 19 22 19v-2c-.563 0-.804-.217-1.295-.707-.546-.546-1.294-1.293-2.709-1.293s-2.162.747-2.709 1.292c-.491.491-.731.708-1.296.708-.562 0-.802-.217-1.292-.707C12.154 15.747 11.407 15 9.993 15s-2.161.747-2.706 1.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16 15.747 3.413 15 2 15v2c.561 0 .801.217 1.291.707C3.836 18.253 4.583 19 5.996 19z"></path></g></svg></div>
<div class="airplane" title="Airplane"><svg width="64px" height="64px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_iconCarrier"> <g id="Layer_2" data-name="Layer 2"> <g id="invisible_box" data-name="invisible box"> <rect width="48" height="48" fill="none"></rect> </g> <g id="Health_Icons" data-name="Health Icons"> <path d="M39,17H34.1l-7-13.2A2.8,2.8,0,0,0,24.4,2H16a3,3,0,0,0-2.5,1.3,2.8,2.8,0,0,0-.2,2.9L18,17H14.6l-1.2-2.3h0A3.4,3.4,0,0,0,10.5,13H5.2a3.5,3.5,0,0,0-2.8,1.5,3.1,3.1,0,0,0-.1,2.8L5.7,24,2.3,30.7a3.1,3.1,0,0,0,.1,2.8A3.5,3.5,0,0,0,5.2,35h5.3a3.4,3.4,0,0,0,2.9-1.6L14.6,31H18L13.3,41.8a2.8,2.8,0,0,0,.2,2.9A3,3,0,0,0,16,46h8.4a2.8,2.8,0,0,0,2.7-1.8l7-13.2H39a7,7,0,0,0,0-14Zm0,10H31.7L23.8,42H17.5l6.6-15h-12l-2,4H6.6l3.5-7L6.6,17h3.5l2,4h12L17.5,6h6.3l7.9,15H39a3,3,0,0,1,0,6Z"></path> </g> </g> </g></svg></div>
<div class="white-noise" title="White Noise"><img src="images/white-noise.png" alt=""></div>
<div class="brown-noise" title="Brown Noise"><img src="images/brown-noise.png" alt=""></div>
<div class="pink-noise" title="Pink Noise"><img src="images/pink-noise.png" alt=""></div>
<div class="under-water" title="Underwater"><svg width="64px" height="64px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_iconCarrier"> <path d="M0 0h48v48H0z" fill="none"></path> <g id="Guidelines"> <g id="material_x5F_system_x5F_icon_x5F_border"> </g> <path d="M19.827,21.692h0.346C21.654,24.316,24.459,26,27.538,26C32.204,26,36,22.204,36,17.538c0-4.665-3.796-8.461-8.462-8.461 H12.462C7.796,9.077,4,12.873,4,17.538C4,22.204,7.796,26,12.462,26C15.541,26,18.346,24.316,19.827,21.692z M16.663,19.024 C16.032,20.804,14.344,22,12.462,22C10.002,22,8,19.998,8,17.538s2.002-4.461,4.462-4.461h15.076c2.46,0,4.462,2.001,4.462,4.461 S29.998,22,27.538,22c-1.882,0-3.57-1.196-4.201-2.976l-0.472-1.332h-5.73L16.663,19.024z"></path> <path d="M38,32c0,4.411-3.589,8-8,8h-2c-3.38,0-4.878-2.18-5.526-4.403C23.38,35.08,24,34.116,24,33c0-1.654-1.346-3-3-3h-2 c-1.654,0-3,1.346-3,3c0,1.461,1.051,2.678,2.437,2.943C19.613,40.941,23.107,44,28,44h2c6.448,0,11.71-5.116,11.975-11.5H42V4h-4 V32z"></path> </g> <g id="Shopicon"> </g> </g></svg></div>
<div class="water-fall" title="Waterfall"><svg fill="#000000" height="64px" width="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_iconCarrier"> <path d="M30.1,25.3c7.3,7.3,10.9,23,10.9,48c0,0.3,0,8.4,0.7,17c0.5,5.5,1.1,9.6,1.8,12.6c1.4-0.3,2.9-0.5,4.4-0.5 c1.2,0,2.5,0.1,3.6,0.4c-1.6-5.4-2.8-17.5-2.7-29.5c0-25.3-3.5-41.7-10.9-51.1c2.2,0.9,4.1,2.1,6,3.6c3.2,2.7,12.8,10.8,13.8,47.6 c0.5,17.4,2.2,27,4.1,32.4c0.8,0.1,1.5,0.1,2.3,0.1c2,0,4-0.3,5.8-0.9c-1.7-3.4-3.9-13.3-4.4-31.9c-0.7-26.1-5.7-41.2-13.2-50 c13.2,5.7,21,19.1,22,50.2c0.4,12.5,1.6,22.3,3.6,29.1c0.7-0.1,1.5-0.1,2.2-0.1c2.2,0,4.4,0.4,6.4,1.1c-1.7-4.4-3.8-13.4-4.4-30.3 C81.2,48.5,76,33.6,67.6,24.6c1.7,0.8,3.4,1.7,4.9,2.7C84.1,35.1,90,49.8,90.9,73.5C91.3,84,92.3,97.2,96,106c0.1,0,0.1,0,0.2,0 c2.7,0,5.3-0.6,7.6-1.6c-2-4.1-4.4-12.7-5.2-31.2c-0.9-23.4-6.5-38-15.3-47.1c1.2,0.6,2.4,1.2,3.5,1.9c13,8,19.6,22.5,20.6,45.5 c0.6,13,1.8,22.3,3.8,29c0.3,0,0.6,0,1,0c2.9,0,5.6,0.7,8.1,1.8c-2.3-4.5-4.3-13.3-5.1-31.1c-1.1-25.5-9.1-42.5-24.4-51.8 c-14.4-8.8-34-10-53-10h-8.3h-5.1h-0.3H11.3H6.4H5.2H3.4v5.1h3.1C16,16.4,24.2,19.4,30.1,25.3"></path> <path d="M128.4,123.7c-2.8,0-5.5-0.6-7.9-1.7c-2.5-1.2-5.3-1.8-8.2-1.8s-5.7,0.7-8.2,1.8c-2.4,1.1-5.1,1.7-7.9,1.7 c-2.8,0-5.5-0.6-7.9-1.7c-2.5-1.2-5.3-1.8-8.2-1.8s-5.7,0.7-8.2,1.8c-2.4,1.1-5.1,1.7-7.9,1.7c-2.8,0-5.5-0.6-7.9-1.7 c-2.5-1.2-5.3-1.8-8.2-1.8c-2.9,0-5.7,0.7-8.2,1.8c-2.4,1.1-5.1,1.7-7.9,1.7c-2.8,0-5.5-0.6-7.9-1.7c-2.5-1.2-5.3-1.8-8.2-1.8 c-2.9,0-5.7,0.7-8.2,1.8c-2.4,1.1-5.1,1.7-7.9,1.7v-11.9c2.8,0,5.5-0.6,7.9-1.7c2.5-1.1,5.3-1.8,8.2-1.8c2.9,0,5.7,0.7,8.2,1.8 c2.4,1.1,5.1,1.7,7.9,1.7c2.8,0,5.5-0.6,7.9-1.7c2.5-1.1,5.3-1.8,8.2-1.8c2.9,0,5.7,0.7,8.2,1.8c2.4,1.1,5.1,1.7,7.9,1.7 c2.8,0,5.5-0.6,7.9-1.7c2.5-1.1,5.3-1.8,8.2-1.8s5.7,0.7,8.2,1.8c2.4,1.1,5.1,1.7,7.9,1.7c2.8,0,5.5-0.6,7.9-1.7 c2.5-1.1,5.3-1.8,8.2-1.8s5.7,0.7,8.2,1.8c2.4,1.1,5.1,1.7,7.9,1.7V123.7z"></path> </g></svg></div>
</div>
</div>
</body>
</html>