modish10/timekeeper-wizard
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>ModalMaster</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <link rel="stylesheet" href="style.css">11</head>12<body class="bg-gray-100 min-h-screen">13 <div class="container mx-auto p-4">14 <div class="flex gap-4">15 <button id="openModalBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg shadow">16 Time Form17 </button>18 <button id="openTermsBtn" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg shadow">19 Terms & Conditions20 </button>21 </div>22</div>23 24 <modal-form id="timeFormModal">25 <form slot="form-content" class="space-y-4">26 <div>27 <label for="prefix" class="block text-sm font-medium text-gray-700">Prefix</label>28 <input type="text" id="prefix" name="prefix" 29 class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">30 </div>31 <div>32 <label for="startTime" class="block text-sm font-medium text-gray-700">Start Time</label>33 <input type="time" id="startTime" name="startTime" 34 class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">35 </div>36 <div>37 <label for="endTime" class="block text-sm font-medium text-gray-700">End Time</label>38 <input type="time" id="endTime" name="endTime" 39 class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">40 </div>41<div class="flex justify-end space-x-3 pt-4">42 <button type="button" onclick="document.getElementById('timeFormModal').close()" 43 class="px-4 py-2 bg-gray-300 hover:bg-gray-400 rounded-md">44 Cancel45 </button>46 <button type="submit" 47 class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md">48 Submit49 </button>50 </div>51 </form>52 </modal-form>53 <script src="components/modal-form.js"></script>54 <script src="components/terms-modal.js"></script>55<script src="script.js"></script>56 <script>57 feather.replace();58 document.getElementById('openModalBtn').addEventListener('click', () => {59 document.getElementById('timeFormModal').open();60 });61 62 document.getElementById('openTermsBtn').addEventListener('click', () => {63 document.getElementById('termsModal').open();64 });65 66 document.addEventListener('terms-submitted', (e) => {67 console.log('Terms submitted:', e.detail.terms);68 alert(`Terms saved:\n${e.detail.terms.join('\n')}`);69 });70</script>71 <terms-modal id="termsModal"></terms-modal>72 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>73</body>74</html>