-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (104 loc) · 4.82 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
105
106
107
108
109
110
<!DOCTYPE html>
<html class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODO APP</title>
<link rel="icon" href="favicon.png" type="image/png" sizes="any">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<script type="module" src="https://cdn.skypack.dev/pin/twind@v0.16.19-CaNDOlA4Nfo7ponDzANK/mode=imports,min/optimized/twind/shim.js"></script>
<script type="twind-config">
{
"theme": {
"colors": {
"primary": "#F2F2F2",
"primary-content": "#131313",
"base": "#131313",
"base-content": "#DEDEDE",
"surface": "#191919",
"border": "#242424"
}},
"plugins": {
"btn": "relative min-w-[5rem] min-h-[3rem] flex flex-row gap-2 items-center justify-center px-4 py-2 uppercase font-bold rounded-sm focus:outline-none select-none bg-surface text-primary md-ripples ripples-light ",
"btn-primary": "bg-primary text-primary-content ripples-dark ",
"btn-square": "min-w-[3rem] w-12 p-2"
}
}
</script>
</head>
<body class="bg-base text-base-content h-full">
<div id="root" class="p-4 flex flex-col gap-4 h-full"></div>
<script type="module">
import {
html,
reactive,
watch
} from 'https://cdn.skypack.dev/pin/@arrow-js/core@v1.0.0-alpha.9-P2IatyrHunLGX6est03o/mode=imports,min/optimized/@arrow-js/core.js';
import 'https://cdn.skypack.dev/pin/@gabrielfins/ripple-effect@v1.0.5-8zoNJohYr1lAJIGMxRXa/mode=imports,min/optimized/@gabrielfins/ripple-effect.js';
const data = reactive({
todos: JSON.parse(localStorage.todos || "[]")
})
watch(() => {
if (data.todos) {
localStorage.todos = JSON.stringify(data.todos);
}
});
html`
<form class="flex flex-row items-center gap-4 w-full m-0" @submit="${e => {
e.preventDefault();
const input = e.target.childNodes[1];
if (input.value) {
data.todos.push({
id: Date.now().toString(36),
completed: false,
task: input.value,
});
input.value = '';
return;
}
}}">
<input type="text" placeholder="What do you need to do?" class="h-12 w-full px-4 py-2 outline-none rounded-sm bg-surface ring-2 ring-inset ring-surface focus:(ring-border)" required>
<button type="submit" class="btn btn-primary btn-square">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
</svg>
</button>
</form>
${() => data.todos.length ? html`
<ul class="flex flex-col gap-2 w-full">
${() => data.todos.map(todo => html`
<li class="flex flex-row items-center w-full justify-between">
<label class="btn btn-square rounded-br-none rounded-tr-none cursor-pointer">
<div class="relative overflow-hidden w-5 h-5 rounded-sm ring-2 ring-inset ring-border active:(ring-primary) children:(transform scale-0 rotate-45 opacity-0 transition-all ease-in-out duration-300 checked:(bg-primary border-primary scale-100 rotate-0 opacity-100 siblings:(text-primary-content scale-100 rotate-0 opacity-100)))">
<input type="checkbox" class="appearance-none w-full h-full absolute inset-0" ${todo.completed && 'checked'} @click="${() => todo.completed = !todo.completed}" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 absolute inset-0">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
</div>
</label>
<label class="relative flex flex-row items-center h-12 w-full p-2 bg-surface cursor-pointer md-ripples ripples-light">
<div class="${() => todo.completed && 'children:(line-through)'}">
<input type="text" class="outline-none bg-surface p-0 w-full h-full rounded-sm ring-2 ring-inset ring-surface focus:(p-2 ring-border)" @blur="${({
target
}) => target.value ? todo.task = target.value: target.value = todo.task}" value="${() => todo.task}">
</div>
</label>
<button class="btn btn-square rounded-none" @click="${() => data.todos = data.todos.filter(({
id
}) => id !== todo.id)}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" clip-rule="evenodd" />
</svg>
</button>
</li>
`.key(todo.id))}
</ul>
`: html`
<div class="flex justify-center items-center w-full h-full bg-surface rounded-sm">
<p>Nothing to do at the moment.</p>
</div>
`}
`(document.getElementById('root'));
</script>
</body>
</html>