Spaces:
Running
Running
| <html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Multi-To Do App</title></head> | |
| <body> | |
| <main id="app"><article class="prose"><h1>To-Do List</h1><p>Keep track of your tasks and extend deadlines as needed.</p></article><div class="border rounded-md break mt-8"><table class="table table-compact table-fixed border border-solid border-gray-200"><thead><tr><th scope="col" class="px-4 py-2">Title</th><th scope="col" class="px-4 py-2">Start Time</th><th scope="col" class="px-4 py-2">End Time</th><th scope="col" class="px-4 py-2">Duration</th><th scope="col" class="px-4 py-2"></th></tr></thead><tbody><tr x-data="{ open: false }" :wrap="false"> | |
| <th class="px-4 py-2 font-bold"><input type="text" class="bg-gray-50 border-blue-500 placeholder-gray-500 text-gray-800" placeholder="To-Do Title" x-model="title"></th> | |
| <th class="px-4 py-2 font-bold"> | |
| <input type="time" class="bg-gray-50 border-blue-500 placeholder-gray-500 text-gray-800" placeholder="HH:MM" x-model="startTime"></th> | |
| <th class="px-4 py-2 font-bold"> | |
| <input type="time" class="bg-gray-50 border-blue-500 placeholder-gray-500 text-gray-800" placeholder="HH:MM" x-model="endTime"></th> | |
| <th class="px-4 py-2 font-bold"> | |
| <input type="number" class="bg-gray-50 border-blue-500 placeholder-gray-500 text-gray-800" placeholder="HH:MM" x-model="duration"></th> | |
| <th class="px-4 py-2 font-bold"><button :disabled="open" class="bg-gray-50 border-blue-500 text-gray-800 hover:bg-blue-500 hover:text-gray-50" @click="open = !open">Add</button></th></tr><template x-for="toDo in toDos" x-key="toDo.id" x-bind:open="toDo.open" x-bind:class="toDo.open ? 'prose' : 'hidden'"> | |
| <tr class="bg-gray-50 border-b border-gray-200 hover:bg-gray-100"><td class="px-4 py-2"><input type="text" class="bg-gray-50 border-blue-500 placeholder-gray-500 text-gray-800" placeholder="To-Do Title" x-model="toDo.title"></td> | |
| <td class="px-4 py-2"><input type="time" class="bg-gray-50 border-blue-500 placeholder-gray-500 text-gray-800" placeholder="HH:MM" x-model="toDo.startTime"></td> | |
| <td class="px-4 py-2"><input type="time" class="bg-gray-50 border-blue-500 placeholder-gray-500 text-gray-800" placeholder="HH:MM" x-model="toDo.endTime"></td> | |
| <td class="px-4 py-2"><input type="number" class="bg-gray-50 border-blue-500 placeholder-gray-500 text-gray-800" placeholder="HH:MM" x-model="toDo.duration"></td> | |
| <td class="px-4 py-2"><button class="bg-gray-50 border-blue-500 text-gray-800 hover:bg-blue-500 hover:text-gray-50" @click="toDo.open = !toDo.open">Edit</button></td></tr></template> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| </body></html> |