Add cottagecore fonts, haptics, and app icons
This commit is contained in:
parent
c145ac0c03
commit
a9df18ed55
BIN
assets/icons/apple-touch-icon.png
Normal file
BIN
assets/icons/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
assets/icons/favicon-96x96.png
Normal file
BIN
assets/icons/favicon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
assets/icons/favicon.ico
Normal file
BIN
assets/icons/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
3
assets/icons/favicon.svg
Normal file
3
assets/icons/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 MiB |
BIN
assets/icons/web-app-manifest-192x192.png
Normal file
BIN
assets/icons/web-app-manifest-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
BIN
assets/icons/web-app-manifest-512x512.png
Normal file
BIN
assets/icons/web-app-manifest-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 526 KiB |
21
assets/site.webmanifest
Normal file
21
assets/site.webmanifest
Normal 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"
|
||||||
|
}
|
||||||
20
index.html
20
index.html
@ -3,7 +3,16 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<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>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
/* --- Woodland Theme (Light) --- */
|
/* --- Woodland Theme (Light) --- */
|
||||||
@ -59,7 +68,7 @@
|
|||||||
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
||||||
|
|
||||||
body {
|
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);
|
background-color: var(--bg);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -83,7 +92,7 @@
|
|||||||
transition: background-color 0.3s;
|
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; }
|
.header-controls { display: flex; gap: 10px; }
|
||||||
|
|
||||||
@ -127,6 +136,7 @@
|
|||||||
.project-title {
|
.project-title {
|
||||||
font-size: 1.4rem; font-weight: 800; color: var(--project-color);
|
font-size: 1.4rem; font-weight: 800; color: var(--project-color);
|
||||||
text-transform: uppercase; letter-spacing: 1px;
|
text-transform: uppercase; letter-spacing: 1px;
|
||||||
|
font-family: 'Cormorant Garamond', Georgia, serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-toggle-project {
|
.btn-toggle-project {
|
||||||
@ -281,7 +291,7 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<h1>Woodland Wool</h1>
|
<h1>Toadstool Tally</h1>
|
||||||
<div class="header-controls">
|
<div class="header-controls">
|
||||||
<button class="header-btn" id="themeBtn" onclick="toggleTheme()" title="Toggle Dark Mode">🌓</button>
|
<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>
|
<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 modal = document.getElementById('modalOverlay');
|
||||||
const modalInput = document.getElementById('modalInput');
|
const modalInput = document.getElementById('modalInput');
|
||||||
const modalTitle = document.getElementById('modalTitle');
|
const modalTitle = document.getElementById('modalTitle');
|
||||||
|
const hapticTick = () => { if ('vibrate' in navigator) navigator.vibrate(12); };
|
||||||
|
|
||||||
// --- Theme Logic ---
|
// --- Theme Logic ---
|
||||||
let isDarkMode = JSON.parse(localStorage.getItem('crochetDarkMode'));
|
let isDarkMode = JSON.parse(localStorage.getItem('crochetDarkMode'));
|
||||||
@ -437,6 +448,7 @@
|
|||||||
if (part.locked || part.finished) return;
|
if (part.locked || part.finished) return;
|
||||||
part.count += change;
|
part.count += change;
|
||||||
if (part.count < 0) part.count = 0;
|
if (part.count < 0) part.count = 0;
|
||||||
|
hapticTick();
|
||||||
save();
|
save();
|
||||||
}
|
}
|
||||||
function resetCount(pId, partId) {
|
function resetCount(pId, partId) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user