Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PoolCheck Pro - Attendant Tracker</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { font-family: 'Inter', sans-serif; } | |
| ::-webkit-scrollbar { width: 8px; } | |
| ::-webkit-scrollbar-track { background: #f1f5f9; } | |
| ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } | |
| ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } | |
| .animate-fade-in { animation: fadeIn 0.4s ease-out; } | |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } | |
| @media print { | |
| .no-print { display: none ; } | |
| body { background: white; -webkit-print-color-adjust: exact; print-color-adjust: exact; } | |
| #app { display: none ; } | |
| #report-modal { position: static ; display: block ; overflow: visible ; } | |
| #report-modal > div { display: block ; position: static ; } | |
| #report-modal .absolute.inset-0.bg-black\\/50 { display: none ; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col"> | |
| <!-- Navbar --> | |
| <nav class="bg-white/90 backdrop-blur border-b border-slate-200 sticky top-0 z-40 no-print"> | |
| <div class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between"> | |
| <div class="flex items-center gap-2 font-bold text-xl text-cyan-700 cursor-pointer" onclick="navigate('dashboard')"> | |
| <i data-lucide="waves"></i> PoolCheck Pro | |
| </div> | |
| <div class="flex items-center gap-1 bg-slate-100 p-1 rounded-lg"> | |
| <button onclick="navigate('dashboard')" id="nav-dashboard" class="nav-btn px-4 py-1.5 rounded-md text-sm font-medium transition">Dashboard</button> | |
| <button onclick="navigate('checklist')" id="nav-checklist" class="nav-btn px-4 py-1.5 rounded-md text-sm font-medium transition">Checklist</button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main id="app" class="flex-1"></main> | |
| <!-- Report Modal --> | |
| <div id="report-modal" class="fixed inset-0 z-50 hidden"> | |
| <div class="absolute inset-0 bg-black/50 backdrop-blur-sm no-print" onclick="closeReport()"></div> | |
| <div class="absolute inset-x-0 bottom-0 md:inset-0 md:flex md:items-center md:justify-center pointer-events-none"> | |
| <div class="bg-white w-full md:w-[850px] md:h-[92vh] h-[90vh] rounded-t-2xl md:rounded-2xl shadow-2xl flex flex-col pointer-events-auto overflow-hidden"> | |
| <div class="p-4 border-b border-slate-100 flex items-center justify-between no-print"> | |
| <h3 class="font-bold text-lg flex items-center gap-2"><i data-lucide="file-text"></i> Generated Report</h3> | |
| <div class="flex gap-2"> | |
| <button onclick="window.print()" class="bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition"> | |
| <i data-lucide="printer"></i> Print / Save PDF | |
| </button> | |
| <button onclick="closeReport()" class="bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-lg text-sm font-medium transition"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| <div id="report-content" class="flex-1 overflow-y-auto p-6 md:p-10 bg-white"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast Notification --> | |
| <div id="toast" class="fixed bottom-4 right-4 bg-slate-800 text-white px-4 py-3 rounded-xl shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-3 no-print"> | |
| <i data-lucide="check-circle" class="text-emerald-400 w-5 h-5"></i> | |
| <span id="toast-msg" class="text-sm font-medium">Saved</span> | |
| </div> | |
| <script src="app.js"></script> | |
| <script>lucide.createIcons();</script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |