Add cottagecore fonts, haptics, and app icons

This commit is contained in:
chris 2025-12-09 09:48:52 -05:00
parent c145ac0c03
commit a9df18ed55
8 changed files with 40 additions and 4 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
assets/icons/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

3
assets/icons/favicon.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 12 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 526 KiB

21
assets/site.webmanifest Normal file
View File

@ -0,0 +1,21 @@
{
"name": "Toadstool Tally",
"short_name": "Toadstool",
"icons": [
{
"src": "icons/web-app-manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icons/web-app-manifest-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#e4e8d5",
"background_color": "#e4e8d5",
"display": "standalone"
}

View File

@ -3,7 +3,16 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Woodland Wool</title>
<title>Toadstool Tally</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="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">
<style>
:root {
/* --- Woodland Theme (Light) --- */
@ -59,7 +68,7 @@
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-family: 'Quicksand', "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg);
color: var(--text);
margin: 0;
@ -83,7 +92,7 @@
transition: background-color 0.3s;
}
h1 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: 0.5px; color: var(--header-text); text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
h1 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: 0.5px; color: var(--header-text); text-shadow: 1px 1px 2px rgba(0,0,0,0.1); font-family: 'Cormorant Garamond', Georgia, serif; }
.header-controls { display: flex; gap: 10px; }
@ -127,6 +136,7 @@
.project-title {
font-size: 1.4rem; font-weight: 800; color: var(--project-color);
text-transform: uppercase; letter-spacing: 1px;
font-family: 'Cormorant Garamond', Georgia, serif;
}
.btn-toggle-project {
@ -281,7 +291,7 @@
<body>
<header>
<h1>Woodland Wool</h1>
<h1>Toadstool Tally</h1>
<div class="header-controls">
<button class="header-btn" id="themeBtn" onclick="toggleTheme()" title="Toggle Dark Mode">🌓</button>
<button class="header-btn" id="focusBtn" onclick="toggleFocusMode()" title="Focus Mode (Keeps Screen On)">👁️</button>
@ -324,6 +334,7 @@
const modal = document.getElementById('modalOverlay');
const modalInput = document.getElementById('modalInput');
const modalTitle = document.getElementById('modalTitle');
const hapticTick = () => { if ('vibrate' in navigator) navigator.vibrate(12); };
// --- Theme Logic ---
let isDarkMode = JSON.parse(localStorage.getItem('crochetDarkMode'));
@ -437,6 +448,7 @@
if (part.locked || part.finished) return;
part.count += change;
if (part.count < 0) part.count = 0;
hapticTick();
save();
}
function resetCount(pId, partId) {