nzambello/walk-up-alarm
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: add icons and pwa config

Browse source
This commit is contained in:
Nicola Zambello 2021-12-21 18:16:15 +01:00
parent 136772b355
commit ab4c7aa005
23 changed files with 133 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
index.html
View file

@ -1,10 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<link rel="alternate icon" href="/favicon.ico" type="image/png" sizes="16x16">
<title>Walk-up alarm</title>
<meta name="description" content="Alarm clock deactivating after walking">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="mask-icon" href="/favicon.svg" color="#FFFFFF">
<meta name="theme-color" content="#2979FF">
</head>
<body>
<div id="root"></div>

BIN
public/android-chrome-192x192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

BIN
public/android-chrome-512x512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
public/apple-touch-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

9
public/browserconfig.xml Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>

BIN
public/favicon-16x16.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 520 B

BIN
public/favicon-32x32.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 770 B

BIN
public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

13
public/favicon.svg Normal file
View file

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512"><svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="512" height="512" rx="100" fill="#3E3D42"></rect>
<g clip-path="url(#clip0_2_9)">
<path d="M256 98.5C154.495 98.5 72.25 180.769 72.25 282.25C72.2315 321.904 85.1165 360.487 108.959 392.172L76.0645 425.058C74.8454 426.277 73.8783 427.724 73.2185 429.317C72.5588 430.909 72.2192 432.616 72.2192 434.34C72.2192 436.064 72.5588 437.771 73.2185 439.363C73.8783 440.956 74.8454 442.403 76.0645 443.622L94.6281 462.177C97.0893 464.637 100.426 466.019 103.906 466.019C107.385 466.019 110.722 464.637 113.184 462.177L146.078 429.266C177.762 453.115 216.343 466.013 256 466.013C295.657 466.013 334.238 453.115 365.922 429.266L398.816 462.153C400.035 463.372 401.482 464.339 403.075 464.999C404.667 465.658 406.374 465.998 408.098 465.998C409.822 465.998 411.529 465.658 413.122 464.999C414.714 464.339 416.161 463.372 417.38 462.153L435.936 443.597C437.155 442.378 438.122 440.931 438.781 439.339C439.441 437.746 439.781 436.039 439.781 434.315C439.781 432.592 439.441 430.885 438.781 429.292C438.122 427.699 437.155 426.252 435.936 425.034L403.008 392.172C426.862 360.491 439.758 321.907 439.75 282.25C439.75 180.769 357.473 98.5 256 98.5ZM256 426.625C227.445 426.625 199.532 418.158 175.79 402.293C152.047 386.429 133.542 363.881 122.615 337.5C111.687 311.119 108.828 282.09 114.399 254.084C119.97 226.078 133.72 200.353 153.911 180.161C174.103 159.97 199.828 146.22 227.834 140.649C255.84 135.078 284.869 137.937 311.25 148.865C337.631 159.792 360.179 178.297 376.043 202.04C391.908 225.782 400.375 253.695 400.375 282.25C400.375 320.541 385.164 357.263 358.089 384.339C331.013 411.414 294.291 426.625 256 426.625ZM124.75 46C103.864 46 83.8338 54.2969 69.0653 69.0653C54.2969 83.8338 46 103.864 46 124.75C46.0607 139.681 50.4177 154.278 58.5508 166.799L178.234 67.0656C163.714 53.5294 144.601 46.0017 124.75 46ZM387.25 46C367.407 46.0038 348.302 53.525 333.782 67.0492L453.457 166.775C461.581 154.259 465.935 139.671 466 124.75C466 103.864 457.703 83.8338 442.935 69.0653C428.166 54.2969 408.136 46 387.25 46Z" fill="#AAAAAA"></path>
<path d="M278.84 199.597C291.575 199.597 301.907 189.264 301.907 176.529C301.907 163.793 291.575 153.461 278.84 153.461C266.104 153.461 255.772 163.793 255.772 176.529C255.772 189.264 266.104 199.597 278.84 199.597ZM324.254 271.251L313.057 265.581L308.395 251.451C301.331 230.018 281.627 215.023 259.28 214.975C241.979 214.927 232.415 219.829 214.442 227.086C204.061 231.267 195.555 239.197 190.557 249.289L187.337 255.825C183.588 263.418 186.616 272.645 194.161 276.442C201.658 280.238 210.789 277.163 214.586 269.569L217.806 263.034C219.488 259.669 222.275 257.026 225.735 255.633L238.615 250.442L231.31 279.614C228.811 289.61 231.502 300.231 238.471 307.872L267.258 339.302C270.718 343.098 273.169 347.664 274.418 352.614L283.213 387.841C285.279 396.058 293.641 401.105 301.859 399.038C310.077 396.972 315.123 388.609 313.057 380.391L302.388 337.62C301.139 332.67 298.688 328.056 295.227 324.308L273.361 300.423L281.627 267.407L284.27 275.336C286.817 283.074 292.296 289.465 299.505 293.118L310.702 298.789C318.199 302.585 327.33 299.51 331.127 291.916C334.827 284.371 331.8 275.048 324.254 271.251V271.251ZM214.249 338.869C212.712 342.762 210.405 346.27 207.425 349.202L183.396 373.279C177.389 379.286 177.389 389.042 183.396 395.049C189.403 401.056 199.111 401.056 205.118 395.049L233.665 366.503C236.596 363.571 238.903 360.063 240.489 356.17L246.977 339.927C220.401 310.947 228.378 319.838 224.197 314.119L214.249 338.869V338.869Z" fill="#2979FF"></path>
</g>
<defs>
<clipPath id="SvgjsClipPath1000">
<rect width="420" height="420" fill="white" transform="translate(46 46)"></rect>
</clipPath>
</defs>
</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
</style></svg>
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
public/mstile-144x144.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
public/mstile-150x150.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
public/mstile-310x150.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
public/mstile-310x310.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
public/mstile-70x70.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

2
public/robots.txt Normal file
View file

@ -0,0 +1,2 @@
User-agent: *
Allow: /

37
public/safari-pinned-tab.svg Normal file
View file

@ -0,0 +1,37 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1194 6990 c-621 -82 -1106 -571 -1184 -1192 -14 -114 -14 -4482 0
-4596 39 -307 175 -586 391 -800 185 -184 401 -304 666 -370 l108 -27 2255 -3
c1472 -2 2288 1 2350 7 438 47 821 299 1044 686 58 102 118 261 148 395 l23
105 0 2305 0 2305 -23 105 c-62 276 -186 504 -381 696 -186 185 -392 296 -676
366 l-90 22 -2285 2 c-1257 1 -2312 -2 -2346 -6z m726 -645 c154 -32 298 -98
429 -195 81 -60 83 -62 65 -80 -11 -10 -376 -316 -813 -680 -646 -537 -797
-659 -807 -648 -26 27 -94 177 -118 260 -105 363 -10 752 251 1029 177 187
411 301 683 333 60 7 239 -4 310 -19z m3589 0 c383 -82 686 -352 804 -720 65
-203 71 -390 17 -599 -19 -77 -108 -277 -127 -289 -7 -5 -1547 1265 -1622
1338 -11 11 0 23 70 75 166 123 320 183 554 214 52 7 235 -4 304 -19z m-1661
-720 c268 -39 511 -114 747 -230 256 -126 438 -252 639 -445 416 -401 668
-894 752 -1475 21 -146 24 -482 5 -630 -49 -382 -194 -775 -401 -1084 l-82
-123 240 -242 c260 -262 270 -276 257 -364 -6 -44 -16 -57 -163 -206 -190
-192 -223 -211 -317 -185 -33 9 -84 55 -281 251 l-242 240 -124 -82 c-144 -96
-398 -223 -548 -275 -528 -182 -1084 -188 -1605 -18 -201 65 -420 172 -605
294 l-122 81 -242 -240 c-211 -210 -247 -242 -286 -252 -86 -24 -116 -8 -280
153 -169 165 -187 188 -196 243 -13 83 0 101 258 360 l240 242 -82 123 c-207
309 -352 702 -401 1084 -19 147 -16 484 5 630 67 462 239 867 524 1230 82 105
334 350 443 432 358 268 791 445 1209 492 52 6 111 13 130 15 73 9 429 -4 528
-19z"/>
<path d="M3300 5109 c-356 -37 -722 -183 -1015 -408 -85 -65 -247 -223 -318
-311 -228 -282 -378 -629 -428 -990 -17 -122 -17 -397 0 -520 89 -652 498
-1221 1086 -1510 470 -231 996 -268 1490 -105 454 149 833 450 1077 855 431
715 368 1617 -159 2270 -71 88 -233 246 -318 311 -407 311 -919 459 -1415 408z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

19
public/site.webmanifest Normal file
View file

@ -0,0 +1,19 @@
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

BIN
public/walk-up-alarm.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

12
public/walk-up-alarm.svg Normal file
View file

@ -0,0 +1,12 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="512" height="512" rx="100" fill="#3E3D42"/>
<g clip-path="url(#clip0_2_9)">
<path d="M256 98.5C154.495 98.5 72.25 180.769 72.25 282.25C72.2315 321.904 85.1165 360.487 108.959 392.172L76.0645 425.058C74.8454 426.277 73.8783 427.724 73.2185 429.317C72.5588 430.909 72.2192 432.616 72.2192 434.34C72.2192 436.064 72.5588 437.771 73.2185 439.363C73.8783 440.956 74.8454 442.403 76.0645 443.622L94.6281 462.177C97.0893 464.637 100.426 466.019 103.906 466.019C107.385 466.019 110.722 464.637 113.184 462.177L146.078 429.266C177.762 453.115 216.343 466.013 256 466.013C295.657 466.013 334.238 453.115 365.922 429.266L398.816 462.153C400.035 463.372 401.482 464.339 403.075 464.999C404.667 465.658 406.374 465.998 408.098 465.998C409.822 465.998 411.529 465.658 413.122 464.999C414.714 464.339 416.161 463.372 417.38 462.153L435.936 443.597C437.155 442.378 438.122 440.931 438.781 439.339C439.441 437.746 439.781 436.039 439.781 434.315C439.781 432.592 439.441 430.885 438.781 429.292C438.122 427.699 437.155 426.252 435.936 425.034L403.008 392.172C426.862 360.491 439.758 321.907 439.75 282.25C439.75 180.769 357.473 98.5 256 98.5ZM256 426.625C227.445 426.625 199.532 418.158 175.79 402.293C152.047 386.429 133.542 363.881 122.615 337.5C111.687 311.119 108.828 282.09 114.399 254.084C119.97 226.078 133.72 200.353 153.911 180.161C174.103 159.97 199.828 146.22 227.834 140.649C255.84 135.078 284.869 137.937 311.25 148.865C337.631 159.792 360.179 178.297 376.043 202.04C391.908 225.782 400.375 253.695 400.375 282.25C400.375 320.541 385.164 357.263 358.089 384.339C331.013 411.414 294.291 426.625 256 426.625ZM124.75 46C103.864 46 83.8338 54.2969 69.0653 69.0653C54.2969 83.8338 46 103.864 46 124.75C46.0607 139.681 50.4177 154.278 58.5508 166.799L178.234 67.0656C163.714 53.5294 144.601 46.0017 124.75 46ZM387.25 46C367.407 46.0038 348.302 53.525 333.782 67.0492L453.457 166.775C461.581 154.259 465.935 139.671 466 124.75C466 103.864 457.703 83.8338 442.935 69.0653C428.166 54.2969 408.136 46 387.25 46Z" fill="#AAAAAA"/>
<path d="M278.84 199.597C291.575 199.597 301.907 189.264 301.907 176.529C301.907 163.793 291.575 153.461 278.84 153.461C266.104 153.461 255.772 163.793 255.772 176.529C255.772 189.264 266.104 199.597 278.84 199.597ZM324.254 271.251L313.057 265.581L308.395 251.451C301.331 230.018 281.627 215.023 259.28 214.975C241.979 214.927 232.415 219.829 214.442 227.086C204.061 231.267 195.555 239.197 190.557 249.289L187.337 255.825C183.588 263.418 186.616 272.645 194.161 276.442C201.658 280.238 210.789 277.163 214.586 269.569L217.806 263.034C219.488 259.669 222.275 257.026 225.735 255.633L238.615 250.442L231.31 279.614C228.811 289.61 231.502 300.231 238.471 307.872L267.258 339.302C270.718 343.098 273.169 347.664 274.418 352.614L283.213 387.841C285.279 396.058 293.641 401.105 301.859 399.038C310.077 396.972 315.123 388.609 313.057 380.391L302.388 337.62C301.139 332.67 298.688 328.056 295.227 324.308L273.361 300.423L281.627 267.407L284.27 275.336C286.817 283.074 292.296 289.465 299.505 293.118L310.702 298.789C318.199 302.585 327.33 299.51 331.127 291.916C334.827 284.371 331.8 275.048 324.254 271.251V271.251ZM214.249 338.869C212.712 342.762 210.405 346.27 207.425 349.202L183.396 373.279C177.389 379.286 177.389 389.042 183.396 395.049C189.403 401.056 199.111 401.056 205.118 395.049L233.665 366.503C236.596 363.571 238.903 360.063 240.489 356.17L246.977 339.927C220.401 310.947 228.378 319.838 224.197 314.119L214.249 338.869V338.869Z" fill="#2979FF"/>
</g>
<defs>
<clipPath id="clip0_2_9">
<rect width="420" height="420" fill="white" transform="translate(46 46)"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

8
src/App.tsx
View file

@ -13,6 +13,8 @@ import "./App.css";
import alarmMp3 from "./alarm.mp3";
import blankMp3 from "./blank.mp3";
import logo from "./logo.svg";
function App() {
const [alarm, setAlarm] = useState<Date | null>(null);
const [alarmSet, setAlarmSet] = useState(false);
@ -60,9 +62,8 @@ function App() {
useEffect(() => {
if (alarmSet && distance > stopDistance) {
resetAlarm();
} else {
} else if (alarmSet) {
setHasWalked(false);
setAlarmPlaying(true);
audioRef.current?.play();
}
}, [distance, alarmSet]);
@ -145,7 +146,8 @@ function App() {
</p>
) : (
<>
<h1>Alarm clock</h1>
<img src={logo} alt="" role="presentation" height={100} />
<h1>Walk-up alarm</h1>
<div className="input-wrapper">
<label htmlFor="alarm-time">Set time for the alarm</label>
{/* <TimeField

24
src/favicon.svg
View file

@ -1,15 +1,13 @@
<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512"><svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="512" height="512" rx="100" fill="#3E3D42"></rect>
<g clip-path="url(#clip0_2_9)">
<path d="M256 98.5C154.495 98.5 72.25 180.769 72.25 282.25C72.2315 321.904 85.1165 360.487 108.959 392.172L76.0645 425.058C74.8454 426.277 73.8783 427.724 73.2185 429.317C72.5588 430.909 72.2192 432.616 72.2192 434.34C72.2192 436.064 72.5588 437.771 73.2185 439.363C73.8783 440.956 74.8454 442.403 76.0645 443.622L94.6281 462.177C97.0893 464.637 100.426 466.019 103.906 466.019C107.385 466.019 110.722 464.637 113.184 462.177L146.078 429.266C177.762 453.115 216.343 466.013 256 466.013C295.657 466.013 334.238 453.115 365.922 429.266L398.816 462.153C400.035 463.372 401.482 464.339 403.075 464.999C404.667 465.658 406.374 465.998 408.098 465.998C409.822 465.998 411.529 465.658 413.122 464.999C414.714 464.339 416.161 463.372 417.38 462.153L435.936 443.597C437.155 442.378 438.122 440.931 438.781 439.339C439.441 437.746 439.781 436.039 439.781 434.315C439.781 432.592 439.441 430.885 438.781 429.292C438.122 427.699 437.155 426.252 435.936 425.034L403.008 392.172C426.862 360.491 439.758 321.907 439.75 282.25C439.75 180.769 357.473 98.5 256 98.5ZM256 426.625C227.445 426.625 199.532 418.158 175.79 402.293C152.047 386.429 133.542 363.881 122.615 337.5C111.687 311.119 108.828 282.09 114.399 254.084C119.97 226.078 133.72 200.353 153.911 180.161C174.103 159.97 199.828 146.22 227.834 140.649C255.84 135.078 284.869 137.937 311.25 148.865C337.631 159.792 360.179 178.297 376.043 202.04C391.908 225.782 400.375 253.695 400.375 282.25C400.375 320.541 385.164 357.263 358.089 384.339C331.013 411.414 294.291 426.625 256 426.625ZM124.75 46C103.864 46 83.8338 54.2969 69.0653 69.0653C54.2969 83.8338 46 103.864 46 124.75C46.0607 139.681 50.4177 154.278 58.5508 166.799L178.234 67.0656C163.714 53.5294 144.601 46.0017 124.75 46ZM387.25 46C367.407 46.0038 348.302 53.525 333.782 67.0492L453.457 166.775C461.581 154.259 465.935 139.671 466 124.75C466 103.864 457.703 83.8338 442.935 69.0653C428.166 54.2969 408.136 46 387.25 46Z" fill="#AAAAAA"></path>
<path d="M278.84 199.597C291.575 199.597 301.907 189.264 301.907 176.529C301.907 163.793 291.575 153.461 278.84 153.461C266.104 153.461 255.772 163.793 255.772 176.529C255.772 189.264 266.104 199.597 278.84 199.597ZM324.254 271.251L313.057 265.581L308.395 251.451C301.331 230.018 281.627 215.023 259.28 214.975C241.979 214.927 232.415 219.829 214.442 227.086C204.061 231.267 195.555 239.197 190.557 249.289L187.337 255.825C183.588 263.418 186.616 272.645 194.161 276.442C201.658 280.238 210.789 277.163 214.586 269.569L217.806 263.034C219.488 259.669 222.275 257.026 225.735 255.633L238.615 250.442L231.31 279.614C228.811 289.61 231.502 300.231 238.471 307.872L267.258 339.302C270.718 343.098 273.169 347.664 274.418 352.614L283.213 387.841C285.279 396.058 293.641 401.105 301.859 399.038C310.077 396.972 315.123 388.609 313.057 380.391L302.388 337.62C301.139 332.67 298.688 328.056 295.227 324.308L273.361 300.423L281.627 267.407L284.27 275.336C286.817 283.074 292.296 289.465 299.505 293.118L310.702 298.789C318.199 302.585 327.33 299.51 331.127 291.916C334.827 284.371 331.8 275.048 324.254 271.251V271.251ZM214.249 338.869C212.712 342.762 210.405 346.27 207.425 349.202L183.396 373.279C177.389 379.286 177.389 389.042 183.396 395.049C189.403 401.056 199.111 401.056 205.118 395.049L233.665 366.503C236.596 363.571 238.903 360.063 240.489 356.17L246.977 339.927C220.401 310.947 228.378 319.838 224.197 314.119L214.249 338.869V338.869Z" fill="#2979FF"></path>
</g>
<defs>
<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
<stop stop-color="#41D1FF"/>
<stop offset="1" stop-color="#BD34FE"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA83"/>
<stop offset="0.0833333" stop-color="#FFDD35"/>
<stop offset="1" stop-color="#FFA800"/>
</linearGradient>
<clipPath id="SvgjsClipPath1000">
<rect width="420" height="420" fill="white" transform="translate(46 46)"></rect>
</clipPath>
</defs>
</svg>
</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
</style></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

17
src/logo.svg
View file

@ -1,7 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="512" height="512" rx="100" fill="#3E3D42"/>
<g clip-path="url(#clip0_2_9)">
<path d="M256 98.5C154.495 98.5 72.25 180.769 72.25 282.25C72.2315 321.904 85.1165 360.487 108.959 392.172L76.0645 425.058C74.8454 426.277 73.8783 427.724 73.2185 429.317C72.5588 430.909 72.2192 432.616 72.2192 434.34C72.2192 436.064 72.5588 437.771 73.2185 439.363C73.8783 440.956 74.8454 442.403 76.0645 443.622L94.6281 462.177C97.0893 464.637 100.426 466.019 103.906 466.019C107.385 466.019 110.722 464.637 113.184 462.177L146.078 429.266C177.762 453.115 216.343 466.013 256 466.013C295.657 466.013 334.238 453.115 365.922 429.266L398.816 462.153C400.035 463.372 401.482 464.339 403.075 464.999C404.667 465.658 406.374 465.998 408.098 465.998C409.822 465.998 411.529 465.658 413.122 464.999C414.714 464.339 416.161 463.372 417.38 462.153L435.936 443.597C437.155 442.378 438.122 440.931 438.781 439.339C439.441 437.746 439.781 436.039 439.781 434.315C439.781 432.592 439.441 430.885 438.781 429.292C438.122 427.699 437.155 426.252 435.936 425.034L403.008 392.172C426.862 360.491 439.758 321.907 439.75 282.25C439.75 180.769 357.473 98.5 256 98.5ZM256 426.625C227.445 426.625 199.532 418.158 175.79 402.293C152.047 386.429 133.542 363.881 122.615 337.5C111.687 311.119 108.828 282.09 114.399 254.084C119.97 226.078 133.72 200.353 153.911 180.161C174.103 159.97 199.828 146.22 227.834 140.649C255.84 135.078 284.869 137.937 311.25 148.865C337.631 159.792 360.179 178.297 376.043 202.04C391.908 225.782 400.375 253.695 400.375 282.25C400.375 320.541 385.164 357.263 358.089 384.339C331.013 411.414 294.291 426.625 256 426.625ZM124.75 46C103.864 46 83.8338 54.2969 69.0653 69.0653C54.2969 83.8338 46 103.864 46 124.75C46.0607 139.681 50.4177 154.278 58.5508 166.799L178.234 67.0656C163.714 53.5294 144.601 46.0017 124.75 46ZM387.25 46C367.407 46.0038 348.302 53.525 333.782 67.0492L453.457 166.775C461.581 154.259 465.935 139.671 466 124.75C466 103.864 457.703 83.8338 442.935 69.0653C428.166 54.2969 408.136 46 387.25 46Z" fill="#AAAAAA"/>
<path d="M278.84 199.597C291.575 199.597 301.907 189.264 301.907 176.529C301.907 163.793 291.575 153.461 278.84 153.461C266.104 153.461 255.772 163.793 255.772 176.529C255.772 189.264 266.104 199.597 278.84 199.597ZM324.254 271.251L313.057 265.581L308.395 251.451C301.331 230.018 281.627 215.023 259.28 214.975C241.979 214.927 232.415 219.829 214.442 227.086C204.061 231.267 195.555 239.197 190.557 249.289L187.337 255.825C183.588 263.418 186.616 272.645 194.161 276.442C201.658 280.238 210.789 277.163 214.586 269.569L217.806 263.034C219.488 259.669 222.275 257.026 225.735 255.633L238.615 250.442L231.31 279.614C228.811 289.61 231.502 300.231 238.471 307.872L267.258 339.302C270.718 343.098 273.169 347.664 274.418 352.614L283.213 387.841C285.279 396.058 293.641 401.105 301.859 399.038C310.077 396.972 315.123 388.609 313.057 380.391L302.388 337.62C301.139 332.67 298.688 328.056 295.227 324.308L273.361 300.423L281.627 267.407L284.27 275.336C286.817 283.074 292.296 289.465 299.505 293.118L310.702 298.789C318.199 302.585 327.33 299.51 331.127 291.916C334.827 284.371 331.8 275.048 324.254 271.251V271.251ZM214.249 338.869C212.712 342.762 210.405 346.27 207.425 349.202L183.396 373.279C177.389 379.286 177.389 389.042 183.396 395.049C189.403 401.056 199.111 401.056 205.118 395.049L233.665 366.503C236.596 363.571 238.903 360.063 240.489 356.17L246.977 339.927C220.401 310.947 228.378 319.838 224.197 314.119L214.249 338.869V338.869Z" fill="#2979FF"/>
</g>
<defs>
<clipPath id="clip0_2_9">
<rect width="420" height="420" fill="white" transform="translate(46 46)"/>
</clipPath>
</defs>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

7
vite.config.ts
View file

@ -5,5 +5,10 @@ import { VitePWA } from "vite-plugin-pwa";
// https://vitejs.dev/config/
export default defineConfig({
base: "/walk-up-alarm/",
plugins: [react(), VitePWA()],
plugins: [
react(),
VitePWA({
registerType: "autoUpdate",
}),
],
});