[verified] feat: add timer customization and themes

public/backgrounds/dusk.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" role="img" aria-labelledby="title description">
+  <title id="title">Mountain dusk</title>
+  <desc id="description">Layered mountains beneath a warm dusk sky</desc>
+  <defs>
+    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#27335d"/>
+      <stop offset="0.52" stop-color="#8c5e78"/>
+      <stop offset="1" stop-color="#e9a67e"/>
+    </linearGradient>
+    <radialGradient id="sun" cx="50%" cy="50%" r="50%">
+      <stop offset="0" stop-color="#ffe6b5" stop-opacity=".92"/>
+      <stop offset="1" stop-color="#ffbd8a" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="front" x1="0" y1="0" x2="1" y2="1">
+      <stop stop-color="#202644"/>
+      <stop offset="1" stop-color="#12172e"/>
+    </linearGradient>
+    <filter id="blur"><feGaussianBlur stdDeviation="28"/></filter>
+  </defs>
+  <rect width="1600" height="900" fill="url(#sky)"/>
+  <circle cx="1150" cy="275" r="210" fill="url(#sun)" filter="url(#blur)"/>
+  <circle cx="1150" cy="275" r="62" fill="#ffe0b3" opacity=".86"/>
+  <path d="M0 610 220 438l180 122 255-266 235 240 200-178 290 254 220-118v408H0Z" fill="#48506d" opacity=".72"/>
+  <path d="M0 702 280 520l212 148 302-250 238 202 190-116 378 206v190H0Z" fill="#2c324e" opacity=".9"/>
+  <path d="M0 790 260 650l255 102 260-194 284 144 212-86 329 132v152H0Z" fill="url(#front)"/>
+  <path d="M0 730c240-56 410-38 634 8s409 45 966-38v200H0Z" fill="#12162a" opacity=".58"/>
+</svg>

public/backgrounds/forest.svg

@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" role="img" aria-labelledby="title description">
+  <title id="title">Forest stillness</title>
+  <desc id="description">A quiet layered evergreen forest in soft mist</desc>
+  <defs>
+    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
+      <stop stop-color="#507c78"/>
+      <stop offset=".55" stop-color="#8daf93"/>
+      <stop offset="1" stop-color="#d2c6a4"/>
+    </linearGradient>
+    <linearGradient id="ground" x1="0" y1="0" x2="0" y2="1">
+      <stop stop-color="#315b52"/>
+      <stop offset="1" stop-color="#102c2c"/>
+    </linearGradient>
+    <filter id="mist"><feGaussianBlur stdDeviation="22"/></filter>
+  </defs>
+  <rect width="1600" height="900" fill="url(#sky)"/>
+  <circle cx="1160" cy="210" r="165" fill="#f7e5b5" opacity=".32" filter="url(#mist)"/>
+  <g fill="#547c68" opacity=".6">
+    <path d="m80 590 130-300 130 300h-76l95 196H61l96-196Z"/>
+    <path d="m390 610 110-260 110 260h-66l84 174H372l83-174Z"/>
+    <path d="m1260 600 125-300 125 300h-74l90 184h-282l91-184Z"/>
+    <path d="m980 605 100-235 101 235h-60l75 154H966l74-154Z"/>
+  </g>
+  <path d="M0 590c340-90 634-45 920 17s489 25 680-34v327H0Z" fill="#b9c3a5" opacity=".32"/>
+  <g fill="#234b43" opacity=".88">
+    <path d="m-20 725 178-430 179 430H224l128 175H-35l128-175Z"/>
+    <path d="m525 725 160-388 161 388H744l113 175H514l114-175Z"/>
+    <path d="m1110 725 183-445 184 445h-116l130 175h-397l130-175Z"/>
+  </g>
+  <path d="M0 760c270-78 540-46 790 12 252 59 498 45 810-30v158H0Z" fill="url(#ground)"/>
+  <g fill="#153934">
+    <path d="m240 820 92-233 92 233h-58l62 80H236l62-80Z"/>
+    <path d="m880 830 105-269 106 269h-67l72 70H874l72-70Z"/>
+    <path d="m1430 835 75-190 76 190h-48l50 65h-156l51-65Z"/>
+  </g>
+</svg>

public/backgrounds/ocean.svg

@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" role="img" aria-labelledby="title description">
+  <title id="title">Open ocean</title>
+  <desc id="description">A calm blue ocean beneath a glowing horizon</desc>
+  <defs>
+    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
+      <stop stop-color="#122b52"/>
+      <stop offset=".62" stop-color="#397f9c"/>
+      <stop offset="1" stop-color="#9bd1ca"/>
+    </linearGradient>
+    <linearGradient id="sea" x1="0" y1="0" x2="0" y2="1">
+      <stop stop-color="#2d8096"/>
+      <stop offset="1" stop-color="#092944"/>
+    </linearGradient>
+    <radialGradient id="glow">
+      <stop stop-color="#f7e6bd" stop-opacity=".74"/>
+      <stop offset="1" stop-color="#f7e6bd" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="blur"><feGaussianBlur stdDeviation="28"/></filter>
+  </defs>
+  <rect width="1600" height="900" fill="url(#sky)"/>
+  <ellipse cx="480" cy="390" rx="280" ry="185" fill="url(#glow)" filter="url(#blur)"/>
+  <path d="M0 468c167 12 273-19 422 1s247 2 389-4 256 19 409 1 238-8 380 7v427H0Z" fill="url(#sea)"/>
+  <g fill="none" stroke="#a4d7d3" stroke-linecap="round">
+    <path d="M70 555c164-27 270 18 422-4s277 17 450-4 291 17 574-2" opacity=".34" stroke-width="5"/>
+    <path d="M-20 655c191-35 322 30 500 1s334 20 532-7 314 25 626-5" opacity=".22" stroke-width="7"/>
+    <path d="M80 765c152-30 299 18 459-5s292 23 470-3 295 18 516-4" opacity=".14" stroke-width="8"/>
+  </g>
+  <path d="M424 468h112l118 432H275Z" fill="#f2d8ac" opacity=".08"/>
+  <g fill="none" stroke="#d9edf0" stroke-width="4" opacity=".38">
+    <path d="m1190 230 28-18 28 18"/>
+    <path d="m1250 270 23-15 24 15"/>
+  </g>
+</svg>