Hugging Face's logo

Spaces:
salmanarshad
/
anycoder-5dc47b92
Running

App Files Community
salmanarshad commited on
Commit
c73a142
·
verified ·
1 Parent(s): 4b7e040

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +490 -19
index.html CHANGED
@@ -1,19 +1,490 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FocusFlow | Modern Todo App</title>
7
+
8
+ <!-- Vue 3 CDN -->
9
+ <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
10
+
11
+ <!-- Tailwind CSS CDN -->
12
+ <script src="https://cdn.tailwindcss.com"></script>
13
+
14
+ <!-- FontAwesome Icons -->
15
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
16
+
17
+ <!-- Google Fonts: Inter -->
18
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
19
+
20
+ <!-- Tailwind Config for Custom Colors -->
21
+ <script>
22
+ tailwind.config = {
23
+ darkMode: 'class',
24
+ theme: {
25
+ extend: {
26
+ fontFamily: {
27
+ sans: ['Inter', 'sans-serif'],
28
+ },
29
+ colors: {
30
+ gray: {
31
+ 850: '#1f2937',
32
+ 900: '#111827',
33
+ 950: '#0b0f19', // Very dark background
34
+ },
35
+ primary: {
36
+ 500: '#6366f1', // Indigo
37
+ 600: '#4f46e5',
38
+ }
39
+ },
40
+ animation: {
41
+ 'fade-in': 'fadeIn 0.3s ease-out',
42
+ 'slide-up': 'slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
43
+ },
44
+ keyframes: {
45
+ fadeIn: {
46
+ '0%': { opacity: '0' },
47
+ '100%': { opacity: '1' },
48
+ },
49
+ slideUp: {
50
+ '0%': { transform: 'translateY(20px)', opacity: '0' },
51
+ '100%': { transform: 'translateY(0)', opacity: '1' },
52
+ }
53
+ }
54
+ }
55
+ }
56
+ }
57
+ </script>
58
+
59
+ <style>
60
+ /* Custom Scrollbar */
61
+ ::-webkit-scrollbar {
62
+ width: 6px;
63
+ height: 6px;
64
+ }
65
+ ::-webkit-scrollbar-track {
66
+ background: transparent;
67
+ }
68
+ ::-webkit-scrollbar-thumb {
69
+ background: #374151;
70
+ border-radius: 3px;
71
+ }
72
+ ::-webkit-scrollbar-thumb:hover {
73
+ background: #4b5563;
74
+ }
75
+
76
+ /* Checkbox Customization */
77
+ .custom-checkbox input:checked + div {
78
+ background-color: #6366f1;
79
+ border-color: #6366f1;
80
+ }
81
+ .custom-checkbox input:checked + div svg {
82
+ display: block;
83
+ }
84
+
85
+ /* Glassmorphism utilities */
86
+ .glass {
87
+ background: rgba(31, 41, 55, 0.7);
88
+ backdrop-filter: blur(10px);
89
+ -webkit-backdrop-filter: blur(10px);
90
+ border-right: 1px solid rgba(255, 255, 255, 0.05);
91
+ }
92
+
93
+ /* Dragging State */
94
+ .dragging {
95
+ opacity: 0.5;
96
+ border: 2px dashed #6366f1;
97
+ }
98
+ </style>
99
+ </head>
100
+ <body class="bg-gray-100 text-gray-800 dark:bg-gray-950 dark:text-gray-100 transition-colors duration-300 font-sans h-screen overflow-hidden">
101
+
102
+ <div id="app" class="flex h-full">
103
+
104
+ <!-- Sidebar -->
105
+ <aside
106
+ class="w-64 flex-shrink-0 flex flex-col justify-between glass transition-all duration-300 transform z-20"
107
+ :class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full absolute h-full'"
108
+ >
109
+ <!-- Logo Area -->
110
+ <div class="p-6 flex items-center gap-3">
111
+ <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center shadow-lg shadow-primary-500/20">
112
+ <i class="fa-solid fa-check text-white text-xs"></i>
113
+ </div>
114
+ <h1 class="text-xl font-bold tracking-tight">FocusFlow</h1>
115
+ </div>
116
+
117
+ <!-- Navigation -->
118
+ <nav class="flex-1 px-4 space-y-2 mt-4">
119
+ <p class="px-4 text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Main</p>
120
+
121
+ <button
122
+ @click="currentFilter = 'all'"
123
+ :class="['w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 group', currentFilter === 'all' ? 'bg-primary-600 text-white shadow-lg shadow-primary-500/20' : 'text-gray-500 hover:bg-gray-800 hover:text-gray-200']"
124
+ >
125
+ <i class="fa-solid fa-layer-group w-5 text-center transition-transform group-hover:scale-110"></i>
126
+ <span class="font-medium">All Tasks</span>
127
+ <span class="ml-auto bg-gray-700 text-xs py-0.5 px-2 rounded-full font-mono" v-if="todos.length > 0">{{ todos.length }}</span>
128
+ </button>
129
+
130
+ <button
131
+ @click="currentFilter = 'active'"
132
+ :class="['w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 group', currentFilter === 'active' ? 'bg-primary-600 text-white shadow-lg shadow-primary-500/20' : 'text-gray-500 hover:bg-gray-800 hover:text-gray-200']"
133
+ >
134
+ <i class="fa-regular fa-circle w-5 text-center transition-transform group-hover:scale-110"></i>
135
+ <span class="font-medium">Active</span>
136
+ <span class="ml-auto bg-gray-700 text-xs py-0.5 px-2 rounded-full font-mono" v-if="activeCount > 0">{{ activeCount }}</span>
137
+ </button>
138
+
139
+ <button
140
+ @click="currentFilter = 'completed'"
141
+ :class="['w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 group', currentFilter === 'completed' ? 'bg-primary-600 text-white shadow-lg shadow-primary-500/20' : 'text-gray-500 hover:bg-gray-800 hover:text-gray-200']"
142
+ >
143
+ <i class="fa-regular fa-circle-check w-5 text-center transition-transform group-hover:scale-110"></i>
144
+ <span class="font-medium">Completed</span>
145
+ <span class="ml-auto bg-gray-700 text-xs py-0.5 px-2 rounded-full font-mono" v-if="completedCount > 0">{{ completedCount }}</span>
146
+ </button>
147
+ </nav>
148
+
149
+ <!-- Bottom Actions -->
150
+ <div class="p-4 border-t border-gray-800">
151
+ <button
152
+ @click="toggleDarkMode"
153
+ class="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-gray-500 hover:text-white hover:bg-gray-800 transition-all duration-200"
154
+ >
155
+ <i :class="['fa-solid w-5 text-center', isDarkMode ? 'fa-sun' : 'fa-moon']"></i>
156
+ <span class="font-medium">{{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}</span>
157
+ </button>
158
+
159
+ <button
160
+ @click="clearCompleted"
161
+ class="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-gray-500 hover:text-red-400 hover:bg-gray-800 transition-all duration-200 mt-1"
162
+ >
163
+ <i class="fa-solid fa-trash-can w-5 text-center"></i>
164
+ <span class="font-medium">Clear Completed</span>
165
+ </button>
166
+ </div>
167
+ </aside>
168
+
169
+ <!-- Main Content -->
170
+ <main class="flex-1 flex flex-col relative h-full overflow-hidden">
171
+
172
+ <!-- Mobile Header -->
173
+ <header class="h-16 flex items-center justify-between px-6 border-b border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-gray-950/50 backdrop-blur-sm z-10">
174
+ <div class="flex items-center gap-4">
175
+ <button @click="isSidebarOpen = !isSidebarOpen" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
176
+ <i class="fa-solid fa-bars text-lg"></i>
177
+ </button>
178
+ <div>
179
+ <h2 class="font-bold text-lg">{{ pageTitle }}</h2>
180
+ <p class="text-xs text-gray-500 dark:text-gray-400">{{ dateDisplay }}</p>
181
+ </div>
182
+ </div>
183
+ <div class="flex items-center gap-3">
184
+ <div class="hidden sm:flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-900 rounded-full text-sm text-gray-500 border border-gray-200 dark:border-gray-800">
185
+ <i class="fa-solid fa-filter text-xs"></i>
186
+ <span>Sorted by Date</span>
187
+ </div>
188
+ </div>
189
+ </header>
190
+
191
+ <!-- Scrollable Task Area -->
192
+ <div class="flex-1 overflow-y-auto p-6 relative">
193
+
194
+ <!-- Empty State -->
195
+ <div v-if="filteredTodos.length === 0" class="flex flex-col items-center justify-center h-full text-center opacity-60">
196
+ <div class="w-24 h-24 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4 animate-fade-in">
197
+ <i class="fa-solid fa-clipboard-check text-4xl text-gray-400 dark:text-gray-600"></i>
198
+ </div>
199
+ <h3 class="text-xl font-medium text-gray-900 dark:text-white mb-2">No tasks found</h3>
200
+ <p class="text-gray-500 dark:text-gray-400 max-w-xs">Looks like you're all caught up or have filtered out all tasks. Add a new one to get started!</p>
201
+ </div>
202
+
203
+ <!-- Task List -->
204
+ <div
205
+ v-for="(todo, index) in filteredTodos"
206
+ :key="todo.id"
207
+ draggable="true"
208
+ @dragstart="dragStart(index)"
209
+ @dragover.prevent
210
+ @drop="dragDrop(index)"
211
+ @dragenter="dragEnter(index)"
212
+ @dragleave="dragLeave"
213
+ class="group flex items-center p-4 mb-3 bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-800 shadow-sm hover:shadow-md hover:border-primary-500/30 dark:hover:border-primary-500/30 transition-all duration-300 animate-slide-up"
214
+ :class="{'opacity-50 grayscale': todo.completed}"
215
+ >
216
+ <!-- Drag Handle (Desktop) -->
217
+ <div class="cursor-move text-gray-300 dark:text-gray-700 mr-4 hidden sm:block">
218
+ <i class="fa-solid fa-grip-vertical"></i>
219
+ </div>
220
+
221
+ <!-- Custom Checkbox -->
222
+ <label class="custom-checkbox relative flex items-center cursor-pointer">
223
+ <input type="checkbox" class="sr-only" v-model="todo.completed" @change="saveTodos">
224
+ <div class="w-6 h-6 border-2 border-gray-300 dark:border-gray-600 rounded-lg flex items-center justify-center transition-all duration-200">
225
+ <svg class="w-3 h-3 text-white hidden pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
226
+ </div>
227
+ </label>
228
+
229
+ <!-- Text Content -->
230
+ <div class="flex-1 min-w-0 ml-2">
231
+ <p
232
+ class="text-base font-medium truncate transition-all duration-300"
233
+ :class="todo.completed ? 'text-gray-400 line-through decoration-gray-400/50' : 'text-gray-800 dark:text-gray-100'"
234
+ @dblclick="editTodo(todo)"
235
+ >
236
+ {{ todo.text }}
237
+ </p>
238
+ <div class="flex items-center gap-2 mt-1">
239
+ <span class="text-xs px-2 py-0.5 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-500 font-medium">
240
+ {{ todo.tag }}
241
+ </span>
242
+ <span class="text-xs text-gray-400">{{ formatDate(todo.createdAt) }}</span>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- Actions -->
247
+ <div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
248
+ <button
249
+ @click="editTodo(todo)"
250
+ class="w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:bg-blue-50 hover:text-blue-500 dark:hover:bg-blue-900/30 dark:hover:text-blue-400 transition-colors"
251
+ title="Edit"
252
+ >
253
+ <i class="fa-solid fa-pen text-sm"></i>
254
+ </button>
255
+ <button
256
+ @click="deleteTodo(todo.id)"
257
+ class="w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/30 dark:hover:text-red-400 transition-colors"
258
+ title="Delete"
259
+ >
260
+ <i class="fa-solid fa-trash text-sm"></i>
261
+ </button>
262
+ </div>
263
+ </div>
264
+
265
+ </div>
266
+
267
+ <!-- Floating Input Area -->
268
+ <div class="p-6 bg-white dark:bg-gray-950 border-t border-gray-200 dark:border-gray-800">
269
+ <form @submit.prevent="addTodo" class="relative flex items-center gap-3 max-w-4xl mx-auto">
270
+ <div class="relative flex-1 group">
271
+ <input
272
+ v-model="newTodoText"
273
+ type="text"
274
+ placeholder="What needs to be done?"
275
+ class="w-full pl-4 pr-12 py-4 bg-gray-100 dark:bg-gray-900 border-0 rounded-xl focus:ring-2 focus:ring-primary-500 focus:bg-white dark:focus:bg-gray-900 transition-all duration-200 text-gray-800 dark:text-white placeholder-gray-400"
276
+ autocomplete="off"
277
+ >
278
+ <div class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-primary-500 transition-colors">
279
+ <i class="fa-solid fa-arrow-up"></i>
280
+ </div>
281
+ </div>
282
+
283
+ <button
284
+ type="submit"
285
+ class="px-6 py-4 bg-primary-600 hover:bg-primary-500 text-white rounded-xl shadow-lg shadow-primary-600/20 font-medium transition-all duration-200 active:scale-95 flex items-center gap-2"
286
+ >
287
+ <span>Add</span>
288
+ <i class="fa-solid fa-plus"></i>
289
+ </button>
290
+ </form>
291
+ </div>
292
+ </main>
293
+ </div>
294
+
295
+ <!-- Vue Application Logic -->
296
+ <script>
297
+ const { createApp, ref, computed, onMounted, onUnmounted } = Vue;
298
+
299
+ createApp({
300
+ setup() {
301
+ // --- State ---
302
+ const todos = ref([]);
303
+ const newTodoText = ref('');
304
+ const currentFilter = ref('all');
305
+ const isSidebarOpen = ref(true); // Default open on desktop
306
+ const isDarkMode = ref(true);
307
+ const dragIndex = ref(null);
308
+
309
+ // --- Date & Time ---
310
+ const dateDisplay = ref('');
311
+
312
+ const updateDate = () => {
313
+ const now = new Date();
314
+ const options = { weekday: 'long', month: 'long', day: 'numeric' };
315
+ dateDisplay.value = now.toLocaleDateString('en-US', options);
316
+ };
317
+
318
+ // --- Computed Properties ---
319
+ const activeCount = computed(() => todos.value.filter(t => !t.completed).length);
320
+ const completedCount = computed(() => todos.value.filter(t => t.completed).length);
321
+
322
+ const filteredTodos = computed(() => {
323
+ if (currentFilter.value === 'active') return todos.value.filter(t => !t.completed);
324
+ if (currentFilter.value === 'completed') return todos.value.filter(t => t.completed);
325
+ return todos.value;
326
+ });
327
+
328
+ const pageTitle = computed(() => {
329
+ if (currentFilter.value === 'all') return 'All Tasks';
330
+ if (currentFilter.value === 'active') return 'Active Tasks';
331
+ if (currentFilter.value === 'completed') return 'Completed Tasks';
332
+ return 'Tasks';
333
+ });
334
+
335
+ // --- Methods ---
336
+
337
+ // Load from LocalStorage
338
+ const loadTodos = () => {
339
+ const saved = localStorage.getItem('focusflow_todos');
340
+ const savedTheme = localStorage.getItem('focusflow_theme');
341
+
342
+ if (saved) todos.value = JSON.parse(saved);
343
+ else {
344
+ // Initial Demo Data
345
+ todos.value = [
346
+ { id: 1, text: 'Welcome to FocusFlow!', completed: false, tag: 'Welcome', createdAt: Date.now() - 100000 },
347
+ { id: 2, text: 'Try dragging the tasks to reorder them', completed: false, tag: 'Tip', createdAt: Date.now() - 50000 },
348
+ { id: 3, text: 'Double click text to edit', completed: true, tag: 'Tip', createdAt: Date.now() }
349
+ ];
350
+ }
351
+
352
+ if (savedTheme) {
353
+ isDarkMode.value = savedTheme === 'dark';
354
+ }
355
+ };
356
+
357
+ const saveTodos = () => {
358
+ localStorage.setItem('focusflow_todos', JSON.stringify(todos.value));
359
+ };
360
+
361
+ const toggleDarkMode = () => {
362
+ isDarkMode.value = !isDarkMode.value;
363
+ const html = document.documentElement;
364
+ if (isDarkMode.value) {
365
+ html.classList.add('dark');
366
+ localStorage.setItem('focusflow_theme', 'dark');
367
+ } else {
368
+ html.classList.remove('dark');
369
+ localStorage.setItem('focusflow_theme', 'light');
370
+ }
371
+ };
372
+
373
+ const addTodo = () => {
374
+ if (newTodoText.value.trim() === '') return;
375
+
376
+ const tags = ['Personal', 'Work', 'Shopping', 'Health', 'Design'];
377
+ const randomTag = tags[Math.floor(Math.random() * tags.length)];
378
+
379
+ todos.value.unshift({
380
+ id: Date.now(),
381
+ text: newTodoText.value,
382
+ completed: false,
383
+ tag: randomTag,
384
+ createdAt: Date.now()
385
+ });
386
+
387
+ newTodoText.value = '';
388
+ saveTodos();
389
+ };
390
+
391
+ const deleteTodo = (id) => {
392
+ todos.value = todos.value.filter(t => t.id !== id);
393
+ saveTodos();
394
+ };
395
+
396
+ const clearCompleted = () => {
397
+ todos.value = todos.value.filter(t => !t.completed);
398
+ saveTodos();
399
+ };
400
+
401
+ // Edit Logic
402
+ const editTodo = (todo) => {
403
+ const newText = prompt('Edit task:', todo.text);
404
+ if (newText !== null && newText.trim() !== '') {
405
+ todo.text = newText.trim();
406
+ saveTodos();
407
+ }
408
+ };
409
+
410
+ // Date Formatting
411
+ const formatDate = (timestamp) => {
412
+ const date = new Date(timestamp);
413
+ const now = new Date();
414
+ const diff = now - date;
415
+
416
+ const oneDay = 24 * 60 * 60 * 1000;
417
+
418
+ if (diff < oneDay && now.getDate() === date.getDate()) {
419
+ return 'Today';
420
+ } else if (diff < 2 * oneDay) {
421
+ return 'Yesterday';
422
+ } else {
423
+ return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
424
+ }
425
+ };
426
+
427
+ // Drag and Drop Logic
428
+ const dragStart = (index) => {
429
+ dragIndex.value = index;
430
+ };
431
+
432
+ const dragEnter = (index) => {
433
+ if (dragIndex.value !== index) {
434
+ const item = todos.value.splice(dragIndex.value, 1)[0];
435
+ todos.value.splice(index, 0, item);
436
+ dragIndex.value = index;
437
+ }
438
+ };
439
+
440
+ const dragDrop = () => {
441
+ saveTodos();
442
+ };
443
+
444
+ const dragLeave = () => {
445
+ // Optional: handle drag leave visual state
446
+ };
447
+
448
+ // --- Lifecycle ---
449
+ onMounted(() => {
450
+ loadTodos();
451
+ updateDate();
452
+ // Check system preference
453
+ if (!localStorage.getItem('focusflow_theme')) {
454
+ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
455
+ isDarkMode.value = true;
456
+ }
457
+ }
458
+ });
459
+
460
+ onUnmounted(() => {
461
+ window.removeEventListener('resize', updateDate); // Cleanup if needed
462
+ });
463
+
464
+ return {
465
+ todos,
466
+ newTodoText,
467
+ currentFilter,
468
+ isSidebarOpen,
469
+ isDarkMode,
470
+ dateDisplay,
471
+ activeCount,
472
+ completedCount,
473
+ filteredTodos,
474
+ pageTitle,
475
+ addTodo,
476
+ deleteTodo,
477
+ clearCompleted,
478
+ editTodo,
479
+ formatDate,
480
+ toggleDarkMode,
481
+ dragStart,
482
+ dragEnter,
483
+ dragDrop,
484
+ dragLeave
485
+ };
486
+ }
487
+ }).mount('#app');
488
+ </script>
489
+ </body>
490
+ </html>