83 lines
4.2 KiB
HTML
83 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>Toadstool Cottage Counter</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;700&family=Quicksand:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">
|
|
<link rel="icon" href="assets/icons/favicon.ico">
|
|
<link rel="icon" type="image/png" sizes="96x96" href="assets/icons/favicon-96x96.png">
|
|
<link rel="icon" type="image/svg+xml" href="assets/icons/favicon.svg">
|
|
<link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.png">
|
|
<link rel="manifest" href="assets/site.webmanifest">
|
|
<meta name="theme-color" content="#e4e8d5">
|
|
<link rel="stylesheet" href="assets/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<div class="brand">
|
|
<img class="brand-icon" src="assets/icons/favicon-96x96.png" alt="Toadstool Cottage Counter icon">
|
|
<h1 id="appTitle">Toadstool Cottage Counter</h1>
|
|
</div>
|
|
<div class="header-controls">
|
|
<button class="header-btn hidden" id="installBtn" title="Install app"><i class="fa-solid fa-download"></i></button>
|
|
<button class="header-btn" id="motionBtn" onclick="toggleAnimations()" title="Toggle Animations"><i class="fa-solid fa-wand-magic-sparkles"></i></button>
|
|
<button class="header-btn" id="themeBtn" onclick="toggleTheme()" title="Toggle Dark Mode"><i class="fa-solid fa-moon"></i></button>
|
|
<button class="header-btn" id="focusBtn" onclick="toggleFocusMode()" title="Focus Mode (Keeps Screen On)"><i class="fa-solid fa-eye"></i></button>
|
|
<button class="header-btn" id="saveLoadBtn" onclick="openSaveModal()" title="Save/Load">
|
|
<svg class="icon-woodland" viewBox="0 0 32 32" aria-hidden="true">
|
|
<path d="M8 18c0-5.5 4-11 8-12.5 3.5 1.7 8 7 8 12.5 0 4.5-3 7.5-8 7.5S8 22.5 8 18Z" fill="currentColor" opacity="0.92"/>
|
|
<path d="M16 9c1.8 1.5 3 4.2 3 6.8 0 3-1.4 5.7-3 6.7-1.6-1-3-3.7-3-6.7 0-2.6 1.2-5.3 3-6.8Z" fill="var(--card-bg)"/>
|
|
<path d="M18.5 7.5c-1.2.7-3.8 1-5.8.5-2-.6-2.8-1.9-2.8-1.9 2.5-1.4 4.9-1.9 8.6-1.4z" fill="currentColor" opacity="0.85"/>
|
|
<path d="M15 7l2 2M16 5v3" stroke="var(--card-bg)" stroke-width="1.4" stroke-linecap="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<input type="file" id="importFile" accept="application/json" class="hidden-input" />
|
|
|
|
<div class="container" id="app"></div>
|
|
|
|
<button class="fab" onclick="openModal('addProject')">+</button>
|
|
|
|
<div class="modal-overlay" id="modalOverlay">
|
|
<div class="modal-content">
|
|
<h3 class="modal-title" id="modalTitle">Title</h3>
|
|
<input type="text" class="modal-input" id="modalInput" autocomplete="off">
|
|
<div class="modal-actions">
|
|
<button class="modal-btn btn-cancel" onclick="closeModal()">Cancel</button>
|
|
<button class="modal-btn btn-save" onclick="saveModal()">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-overlay" id="colorOverlay">
|
|
<div class="color-modal">
|
|
<h3 class="color-title">Pick a color</h3>
|
|
<div class="color-grid" id="colorGrid"></div>
|
|
<button class="modal-btn btn-cancel" onclick="closeColorPicker()">Close</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="save-overlay" id="saveOverlay">
|
|
<div class="save-modal">
|
|
<h3 class="color-title">Save or Load</h3>
|
|
<p class="save-subtext">Choose projects to include:</p>
|
|
<div class="save-list" id="saveList"></div>
|
|
<div class="save-actions">
|
|
<button class="modal-btn btn-cancel" onclick="closeSaveModal()">Cancel</button>
|
|
<button class="modal-btn btn-save" onclick="exportSelected()">Save</button>
|
|
<button class="modal-btn btn-save" onclick="triggerImport()">Load</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="assets/app.js"></script>
|
|
<footer class="footer-bg" aria-hidden="true"></footer>
|
|
</body>
|
|
</html>
|