It's a todo list.
1<script lang="ts">
2 import "../app.css";
3 import { dev } from "$app/environment";
4 import { color_theme } from "$lib/stores.svelte";
5 import { inject } from "@vercel/analytics";
6 import { injectSpeedInsights } from "@vercel/speed-insights/sveltekit";
7
8 inject({ mode: dev ? "development" : "production" });
9 injectSpeedInsights();
10
11 const daisyui_themes = [
12 "light",
13 "dark",
14 "cupcake",
15 "bumblebee",
16 "emerald",
17 "corporate",
18 "synthwave",
19 "retro",
20 "cyberpunk",
21 "valentine",
22 "halloween",
23 "garden",
24 "forest",
25 "aqua",
26 "lofi",
27 "pastel",
28 "fantasy",
29 "wireframe",
30 "black",
31 "luxury",
32 "dracula",
33 "cmyk",
34 "autumn",
35 "business",
36 "acid",
37 "lemonade",
38 "night",
39 "coffee",
40 "winter",
41 "dim",
42 "nord",
43 "sunset",
44 ];
45
46 let theme_input = $state(color_theme.value);
47 $effect(() => color_theme.update(theme_input));
48</script>
49
50<svelte:head>
51 <title>easytodo.link - free online to do list</title>
52</svelte:head>
53
54<main class="relative flex flex-col gap-8 w-full h-full min-w-screen min-h-screen p-8 items-center justify-center">
55 <slot />
56
57 <footer class="absolute inset-x-0 bottom-0 flex justify-between px-8 py-4 items-center">
58 <section class="flex gap-4 items-center">
59 <details class="dropdown dropdown-top">
60 <summary class="btn btn-primary">
61 <img
62 src="/cog.svg"
63 alt="Flex Solid 'Cog' by StreamlineHQ"
64 class="w-6"
65 />
66 </summary>
67 <ul class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
68 <li>
69 <details class="dropdown dropdown-top">
70 <summary>Color Theme</summary>
71 <ul class="max-h-32 overflow-y-scroll p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
72 {#each daisyui_themes as theme}
73 <li>
74 <input
75 type="radio"
76 aria-label={theme}
77 bind:group={theme_input}
78 value={theme}
79 class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
80 />
81 </li>
82 {/each}
83 </ul>
84 </details>
85 </li>
86 </ul>
87 </details>
88 <p class="hidden lg:block">easytodo.link - local first todo list</p>
89 </section>
90
91
92 <section>
93 <p>
94 <a
95 href="https://github.com/zeucapua/easytodo.link"
96 target="_blank"
97 class="link link-hover link-secondary"
98 >
99 {"Made with <3"}
100 </a>
101 by
102 <a
103 href="https://twitter.com/zeu_dev"
104 target="_blank"
105 class="link link-hover link-accent"
106 >
107 @zeu_dev
108 </a>
109 </p>
110 </section>
111 </footer>
112</main>