chris/toadstoolTally
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add ambient seed drift and easter egg bursts

Browse Source
This commit is contained in:
chris 2025-12-10 11:39:33 -05:00
parent 5affb6b8f6
commit 323b8b1759
4 changed files with 381 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
assets/app.js
View File

@ -20,6 +20,12 @@ const modalInput = document.getElementById('modalInput');
const modalTitle = document.getElementById('modalTitle');
const hapticTick = () => { if ('vibrate' in navigator) navigator.vibrate(12); };
const installBtn = document.getElementById('installBtn');
let lastCountPulse = null;
let lastFinishedId = null;
let fireflyTimer = null;
let fireflyActive = false;
let titleClicks = [];
let easterEggCooling = false;
// --- Service Worker ---
if ('serviceWorker' in navigator) {
@ -141,15 +147,143 @@ function applyTheme() {
document.body.classList.remove('dark-mode');
document.getElementById('themeBtn').innerHTML = '☀️';
}
handleAmbientDrift();
}
function toggleTheme() {
isDarkMode = !isDarkMode;
localStorage.setItem('crochetDarkMode', isDarkMode);
applyTheme();
document.body.classList.add('theme-animating');
setTimeout(() => document.body.classList.remove('theme-animating'), 750);
}
applyTheme();
// --- Firefly Animation ---
function spawnFirefly({ markActive = false, source = 'ambient' } = {}) {
const wrap = document.createElement('div');
wrap.className = 'firefly-wrap';
const el = document.createElement('div');
el.className = 'firefly';
const top = Math.random() * 55 + 5; // 5vh–60vh
const scale = 0.9 + Math.random() * 0.4;
const duration = 12 + Math.random() * 8; // 12–20s
wrap.style.top = `${top}vh`;
wrap.style.setProperty('--fly-scale', scale);
wrap.style.setProperty('--fly-duration', `${duration}s`);
if (markActive) fireflyActive = true;
wrap.addEventListener('animationend', (e) => {
if (e.animationName !== 'fireflyGlide') return;
wrap.remove();
if (markActive) fireflyActive = false;
});
wrap.appendChild(el);
document.body.appendChild(wrap);
}
function spawnSeed({ markActive = false, source = 'ambient' } = {}) {
const wrap = document.createElement('div');
wrap.className = 'seed-wrap';
const el = document.createElement('div');
el.className = 'seed';
const top = Math.random() * 55 + 5; // 5vh–60vh
const scale = 0.85 + Math.random() * 0.4;
const duration = 14 + Math.random() * 8; // 14–22s
const tilt = (Math.random() * 16 + 8) * (Math.random() < 0.5 ? -1 : 1); // +/-8–24deg
const sway = 4 + Math.random() * 6; // px
const fromLeft = Math.random() < 0.5;
const start = fromLeft ? '-12vw' : '112vw';
const mid = fromLeft ? '30vw' : '-30vw';
const end = fromLeft ? '112vw' : '-12vw';
wrap.style.top = `${top}vh`;
wrap.style.setProperty('--seed-scale', scale);
wrap.style.setProperty('--seed-duration', `${duration}s`);
wrap.style.setProperty('--seed-tilt', `${tilt}deg`);
wrap.style.setProperty('--seed-sway', `${sway}px`);
wrap.style.setProperty('--seed-start', start);
wrap.style.setProperty('--seed-mid', mid);
wrap.style.setProperty('--seed-end', end);
if (markActive) fireflyActive = true;
wrap.addEventListener('animationend', (e) => {
if (e.animationName !== 'seedGlide') return;
wrap.remove();
if (markActive) fireflyActive = false;
});
wrap.appendChild(el);
document.body.appendChild(wrap);
}
function stopAmbientDrift() {
if (fireflyTimer) {
clearTimeout(fireflyTimer);
fireflyTimer = null;
}
document.querySelectorAll('.firefly-wrap').forEach(el => el.remove());
document.querySelectorAll('.seed-wrap').forEach(el => el.remove());
fireflyActive = false;
}
function scheduleAmbientDrift() {
const delay = 26000 + Math.random() * 18000; // 26–44s
fireflyTimer = setTimeout(() => {
if (isDarkMode) {
spawnFirefly();
} else {
spawnSeed();
}
scheduleAmbientDrift();
}, delay);
}
function handleAmbientDrift() {
stopAmbientDrift();
if (isDarkMode) {
spawnFirefly();
} else {
spawnSeed();
}
scheduleAmbientDrift();
}
handleAmbientDrift();
const logoIcon = document.querySelector('.brand-icon');
if (logoIcon) {
logoIcon.addEventListener('click', () => {
if (fireflyActive) return;
if (isDarkMode) {
spawnFirefly({ markActive: true, source: 'logo' });
} else {
spawnSeed({ markActive: true, source: 'logo' });
}
});
}
const titleEl = document.getElementById('appTitle');
if (titleEl) {
titleEl.addEventListener('click', () => {
const now = Date.now();
titleClicks = titleClicks.filter(ts => now - ts < 7000);
titleClicks.push(now);
if (titleClicks.length >= 5 && !easterEggCooling) {
easterEggCooling = true;
triggerBurst();
setTimeout(() => {
easterEggCooling = false;
titleClicks = [];
}, 8000);
}
});
}
function triggerBurst() {
const burstCount = 8;
const spawner = isDarkMode ? spawnFirefly : spawnSeed;
for (let i = 0; i < burstCount; i++) {
const jitter = Math.random() * 200;
setTimeout(() => spawner({ source: 'burst' }), i * 140 + jitter);
}
}
// --- Focus Mode Logic ---
let wakeLock = null;
let isFocusMode = false;
@ -220,9 +354,11 @@ document.addEventListener('visibilitychange', async () => {
setTimeout(() => modalInput.focus(), 100);
}
async function deletePart(pId, partId) {
const project = projects.find(p => p.id === pId);
const part = project.parts.find(pt => pt.id === partId);
if (part.locked) return;
const ok = await showConfirm({ title: 'Delete part?', text: 'This part will be removed.', confirmText: 'Delete', danger: true });
if (ok) {
const project = projects.find(p => p.id === pId);
project.parts = project.parts.filter(pt => pt.id !== partId);
save();
}
@ -243,7 +379,7 @@ document.addEventListener('visibilitychange', async () => {
const project = projects.find(p => p.id === pId);
const part = project.parts.find(pt => pt.id === partId);
part.finished = !part.finished;
if(part.finished) part.locked = false;
if(part.finished) { part.locked = false; lastFinishedId = part.id; } else { lastFinishedId = null; }
save();
}
function updateCount(pId, partId, change) {
@ -254,6 +390,7 @@ document.addEventListener('visibilitychange', async () => {
if (part.max !== null && part.count > part.max) part.count = part.max;
if (part.count < 0) part.count = 0;
hapticTick();
lastCountPulse = { partId, dir: change > 0 ? 'up' : 'down' };
save();
}
async function resetCount(pId, partId) {
@ -295,6 +432,10 @@ function openModal(type, pId = null, partId = null) {
modalTitle.innerText = "Set Row Count";
modalInput.value = part.count; modalInput.type = "number";
}
else if (type === 'setMax') {
const part = projects.find(p => p.id === pId).parts.find(pt => pt.id === partId);
if (part.locked) return;
}
modal.classList.add('active');
setTimeout(() => modalInput.focus(), 100);
}
@ -391,11 +532,33 @@ function render() {
const lockIcon = part.locked ? '🔒' : '🔓';
const lockBtnClass = part.locked ? 'btn-lock locked-active' : 'btn-lock';
const controlsDimmed = (part.locked || part.finished) ? 'dimmed' : '';
const hideControls = part.finished ? 'hidden-controls' : '';
const hideControls = (part.finished || part.minimized) ? 'hidden-controls' : '';
const showSetMax = part.minimized ? 'hidden' : '';
const partNoteId = `part-note-${project.id}-${part.id}`;
const countId = `count-${part.id}`;
const pulseClass = lastCountPulse && lastCountPulse.partId === part.id
? (lastCountPulse.dir === 'up' ? 'count-bump-up' : 'count-bump-down')
: '';
const finishPulseClass = part.finished && lastFinishedId === part.id ? 'finish-shimmer' : '';
const partCardId = `part-${part.id}`;
const partCardFullClass = `${isLocked} ${isFinished} ${isMinimized} ${finishPulseClass}`;
const lockDisabled = part.locked ? 'disabled' : '';
const actionsHtml = part.minimized
? `<div class="part-actions"><button class="icon-btn btn-toggle-part" onclick="togglePartMinimize(${project.id}, ${part.id})" title="Expand">▼</button></div>`
: `<div class="part-actions">
<button class="icon-btn btn-reset-part" onclick="resetCount(${project.id}, ${part.id})" ${isFinished || part.locked ? 'disabled' : ''}>↺</button>
<button class="icon-btn btn-delete-part" onclick="deletePart(${project.id}, ${part.id})" ${lockDisabled}>🗑️</button>
<button class="icon-btn btn-toggle-part" onclick="togglePartMinimize(${project.id}, ${part.id})" title="Minimize">▼</button>
</div>`;
const countSubtext = part.minimized ? '' : `
<div class="count-subtext">
${part.max !== null ? `<strong>${part.count}</strong> / ${part.max}` : 'No max set'}
<button class="icon-btn ${showSetMax}" onclick="openModal('setMax', ${project.id}, ${part.id})" title="Set max" ${lockDisabled}>⚙️</button>
</div>
`;
partsHtml += `
<div class="part-card ${isLocked} ${isFinished} ${isMinimized}">
<div class="part-card ${partCardFullClass}" id="${partCardId}">
<div class="part-header">
<div class="part-name-group">
<label class="check-container">
@ -405,17 +568,10 @@ function render() {
<span class="part-name" onclick="openModal('renamePart', ${project.id}, ${part.id})">${part.name}</span>
<span class="part-mini-count">${part.count}</span>
</div>
<div class="part-actions">
<button class="icon-btn btn-toggle-part" onclick="togglePartMinimize(${project.id}, ${part.id})" title="Minimize">▼</button>
<button class="icon-btn" onclick="resetCount(${project.id}, ${part.id})" ${isFinished ? 'disabled' : ''}>↺</button>
<button class="icon-btn btn-delete-part" onclick="deletePart(${project.id}, ${part.id})">🗑️</button>
</div>
</div>
<div class="count-display" ondblclick="openModal('manualCount', ${project.id}, ${part.id})">${part.count}</div>
<div class="count-subtext">
${part.max !== null ? `<strong>${part.count}</strong> / ${part.max}` : 'No max set'}
<button class="icon-btn" onclick="openModal('setMax', ${project.id}, ${part.id})" title="Set max">⚙️</button>
${actionsHtml}
</div>
<div class="count-display ${pulseClass}" id="${countId}" ondblclick="openModal('manualCount', ${project.id}, ${part.id})">${part.count}</div>
${countSubtext}
<div class="controls ${hideControls}">
<button class="action-btn btn-minus ${controlsDimmed}" onclick="updateCount(${project.id}, ${part.id}, -1)">-</button>
<button class="action-btn ${lockBtnClass}" onclick="togglePartLock(${project.id}, ${part.id})">${lockIcon}</button>
@ -453,6 +609,8 @@ function render() {
grid.appendChild(projectContainer);
});
lastCountPulse = null;
lastFinishedId = null;
app.appendChild(grid);
}

165
assets/style.css
View File

@ -1,14 +1,15 @@
:root {
/* --- Woodland Theme (Light) --- */
--bg: #e4e8d5; /* Sage background from image */
--bg: #e4e7d4; /* Sage background from image */
--card-bg: #f8f5e6; /* Creamy yarn color */
--header-bg: #c5a384; /* Wood hook color */
--header-bg: #866f5a; /* Wood hook color */
--header-text: #f8f5e6; /* Cream text for header */
--text: #4a3b2a; /* Deep sepia brown outlines */
--text-muted: #7a6b5a;
--border: #d1c7b7;
--shadow: 0 4px 8px rgba(74, 59, 42, 0.1); /* Warmer shadow */
--modal-bg: #f8f5e6;
--input-bg: #fffdf5;
--input-border: #d1c7b7;
@ -61,9 +62,18 @@ body {
display: flex;
flex-direction: column;
overflow-x: hidden;
scrollbar-gutter: stable; /* Prevent layout shift when scrollbar appears/disappears */
transition: background-color 0.3s, color 0.3s;
}
body.theme-animating { animation: themeSwap 0.7s ease-in-out; }
@keyframes themeSwap {
0% { filter: brightness(1.08) saturate(1.06); opacity: 0.85; }
45% { filter: brightness(1.03) saturate(1.12) contrast(1.04); opacity: 0.92; }
75% { filter: brightness(0.98) saturate(1.04); opacity: 0.97; }
100% { filter: brightness(1) saturate(1); opacity: 1; }
}
header {
background-color: var(--header-bg);
color: var(--header-text);
@ -87,6 +97,8 @@ h1 {
color: var(--header-text);
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
font-family: 'Cormorant Garamond', Georgia, serif;
cursor: pointer;
user-select: none;
}
.brand { display: flex; align-items: center; gap: 10px; }
@ -112,8 +124,11 @@ h1 {
font-size: 1.2rem;
cursor: pointer;
color: var(--header-text);
transition: all 0.2s;
transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s;
transform: translateY(0);
}
.header-btn:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 14px rgba(0,0,0,0.12); }
.header-btn:active { transform: translateY(0) scale(0.96); box-shadow: none; }
.header-btn.is-active { background: var(--header-text); color: var(--header-bg); }
.hidden { display: none !important; }
@ -123,7 +138,7 @@ h1 {
margin: 0 auto;
padding: 1.5rem 1.25rem calc(120px + env(safe-area-inset-bottom, 0px));
position: relative;
z-index: 2;
z-index: 1; /* Keep cards above background but below flying effects */
flex: 1;
}
@ -131,6 +146,7 @@ h1 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 20px;
align-items: start; /* Prevent shorter cards from stretching to tallest row mate */
}
@media (min-width: 1280px) {
@ -167,8 +183,9 @@ h1 {
background: none; border: none; color: var(--project-color);
font-size: 1.2rem; cursor: pointer; transition: transform 0.2s; padding: 5px;
}
.part-list { max-height: 2000px; opacity: 1; transition: max-height 0.35s ease, opacity 0.3s ease; overflow: hidden; }
.project-collapsed .btn-toggle-project { transform: rotate(-90deg); }
.project-collapsed .part-list { display: none; }
.project-collapsed .part-list { max-height: 0; opacity: 0; pointer-events: none; }
.project-collapsed { margin-bottom: 1rem; opacity: 0.8; box-shadow: none; }
.project-actions { display: flex; gap: 8px; align-items: center; }
@ -215,12 +232,21 @@ h1 {
border-left-color: var(--success);
opacity: 0.9;
}
.finish-shimmer { animation: finishShimmer 0.8s ease; }
@keyframes finishShimmer {
0% { box-shadow: var(--shadow), 0 0 0 0 rgba(122, 139, 79, 0.32); }
60% { box-shadow: var(--shadow), 0 0 0 16px rgba(122, 139, 79, 0); }
100% { box-shadow: var(--shadow), 0 0 0 0 rgba(122, 139, 79, 0); }
}
.part-card.is-minimized { padding: 0.8rem 1rem; }
.part-card.is-minimized .count-display,
.part-card.is-minimized .controls { display: none; }
.part-card.is-minimized .part-mini-count { display: inline-block; }
.part-card.is-minimized .btn-toggle-part { transform: rotate(-90deg); }
.part-card.is-minimized .count-subtext,
.part-card.is-minimized .btn-reset-part,
.part-card.is-minimized .btn-delete-part { display: none; }
.part-header { display: flex; justify-content: space-between; align-items: center; }
.part-card:not(.is-minimized) .part-header { margin-bottom: 15px; }
@ -255,7 +281,14 @@ h1 {
.is-finished .part-mini-count { color: var(--success); }
.part-actions { display: flex; gap: 8px; align-items: center; }
.icon-btn { background: none; border: none; font-size: 1.3rem; padding: 5px; color: var(--text-muted); cursor: pointer; transition: color 0.2s; }
.part-actions { justify-content: flex-end; min-width: 120px; }
.icon-btn {
background: none; border: none; font-size: 1.3rem; padding: 5px; color: var(--text-muted);
cursor: pointer; transition: color 0.2s;
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
}
.icon-btn:disabled { opacity: 0.4; pointer-events: none; }
.btn-delete-part:hover { color: var(--danger); }
.btn-toggle-part { transition: transform 0.2s; }
@ -273,11 +306,24 @@ h1 {
margin: 0 0 0.6rem 0;
}
.count-subtext strong { color: var(--project-color); }
.count-bump-up { animation: countUp 0.26s ease; }
.count-bump-down { animation: countDown 0.26s ease; }
@keyframes countUp {
0% { transform: scale(0.95); color: var(--btn-secondary-text); }
60% { transform: scale(1.08); color: var(--project-color); }
100% { transform: scale(1); color: var(--project-color); }
}
@keyframes countDown {
0% { transform: scale(1.05); color: var(--project-color); }
60% { transform: scale(0.9); color: var(--text-muted); }
100% { transform: scale(1); color: var(--project-color); }
}
.note-toggle {
background: none; border: 1px dashed var(--border); color: var(--text-muted);
padding: 4px 10px; border-radius: 10px; cursor: pointer; font-size: 0.9rem;
margin-top: 8px;
margin: 12px auto 6px;
display: block;
}
.note-toggle:hover { color: var(--project-color); border-color: var(--project-color); }
@ -321,23 +367,32 @@ button:active { transform: scale(0.97); box-shadow: none; }
width: 65px; height: 65px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 2.2rem; box-shadow: 0 6px 15px rgba(74, 59, 42, 0.3);
border: none; z-index: 3; transition: transform 0.1s;
border: none; z-index: 3; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fab:active { transform: scale(0.95); }
.fab:hover { transform: translateY(-3px) scale(1.04) rotate(-2deg); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.fab:active { transform: translateY(0) scale(0.94); box-shadow: 0 3px 8px rgba(0,0,0,0.2); }
.fab { z-index: 2; }
/* --- MODAL --- */
.modal-overlay {
display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(44, 35, 25, 0.6); z-index: 200; align-items: center; justify-content: center; backdrop-filter: blur(2px);
display: flex; opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.active { display: flex; }
.modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-content {
background: var(--modal-bg); color: var(--text);
padding: 25px; border-radius: 20px; width: 85%; max-width: 400px;
animation: popIn 0.2s ease-out; box-shadow: var(--shadow); border: 1px solid var(--border);
animation: none; box-shadow: var(--shadow); border: 1px solid var(--border);
transform-origin: center;
}
.modal-overlay.active .modal-content { animation: modalIn 0.32s ease; }
@keyframes modalIn {
0% { transform: translateY(10px) scale(0.96); opacity: 0; }
60% { transform: translateY(-4px) scale(1.02); opacity: 1; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-title { margin: 0 0 15px 0; font-size: 1.3rem; color: var(--text); font-weight: 800; }
.modal-input {
width: 100%; padding: 15px; font-size: 1.2rem;
@ -360,12 +415,86 @@ button:active { transform: scale(0.97); box-shadow: none; }
height: clamp(760px, 1200px, 1200px);
background: url('textures/mushroom.svg') no-repeat center bottom;
background-size: cover;
opacity: 0.65;
opacity: 1;
width: 125vw;
pointer-events: none;
z-index: 0;
}
.firefly-wrap {
position: fixed;
left: -12vw;
width: 28px;
height: 28px;
animation: fireflyGlide var(--fly-duration, 14s) linear forwards;
z-index: 5; /* Float above content but below header */
pointer-events: none;
}
.firefly {
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,245,200,0.9) 0%, rgba(255,245,200,0.4) 45%, rgba(255,245,200,0.1) 70%, rgba(255,245,200,0) 85%);
opacity: 0.9;
mix-blend-mode: screen;
filter: blur(1px) drop-shadow(0 0 14px rgba(255, 245, 200, 0.8)) brightness(1.15);
animation: fireflyFlutter 1.6s ease-in-out infinite alternate, fireflyFlicker 1.1s ease-in-out infinite alternate;
}
.seed-wrap {
position: fixed;
width: 36px;
height: 36px;
animation: seedGlide var(--seed-duration, 16s) linear forwards;
z-index: 5;
pointer-events: none;
}
.seed {
width: 200px;
height: 200px;
background: url('textures/seed.svg') no-repeat center/contain;
opacity: 0.4;
mix-blend-mode: screen;
filter: drop-shadow(0 4px 10px rgba(200, 190, 160, 0.55));
animation: seedDrift 2.6s ease-in-out infinite alternate, seedFlicker 1.4s ease-in-out infinite alternate;
}
@keyframes fireflyGlide {
0% { transform: translate3d(-10vw, 0, 0) scale(var(--fly-scale, 1)); opacity: 0; }
12% { opacity: 0.55; }
35% { transform: translate3d(25vw, -6px, 0) scale(var(--fly-scale, 1)); opacity: 0.65; }
65% { transform: translate3d(65vw, 6px, 0) scale(var(--fly-scale, 1)); opacity: 0.55; }
90% { opacity: 0.35; }
100% { transform: translate3d(110vw, 0, 0) scale(var(--fly-scale, 1)); opacity: 0; }
}
@keyframes fireflyFlutter {
0% { transform: translateY(-2px) translateX(-3px) scale(0.95); }
50% { transform: translateY(3px) translateX(2px) scale(1.05); }
100% { transform: translateY(-2px) translateX(1px) scale(0.97); }
}
@keyframes fireflyFlicker {
0% { opacity: 0.65; filter: blur(1px) drop-shadow(0 0 10px rgba(255,245,200,0.65)); }
50% { opacity: 1; filter: blur(0.5px) drop-shadow(0 0 16px rgba(255,245,200,1)); }
100% { opacity: 0.75; filter: blur(1px) drop-shadow(0 0 12px rgba(255,245,200,0.75)); }
}
@keyframes seedGlide {
0% { transform: translate3d(var(--seed-start, -12vw), 0, 0) scale(var(--seed-scale, 1)); opacity: 0; }
10% { opacity: 0.35; }
40% { transform: translate3d(calc(var(--seed-mid, 30vw)), -10px, 0) scale(var(--seed-scale, 1)); opacity: 0.5; }
70% { transform: translate3d(calc(var(--seed-mid, 30vw) * 2), 8px, 0) scale(var(--seed-scale, 1)); opacity: 0.4; }
100% { transform: translate3d(var(--seed-end, 110vw), -6px, 0) scale(var(--seed-scale, 1)); opacity: 0; }
}
@keyframes seedDrift {
0% { transform: translateY(-4px) translateX(calc(var(--seed-sway, 6px) * -1)) rotate(calc(var(--seed-tilt, 10deg) * -0.6)) scale(0.94); opacity: 0.65; }
50% { transform: translateY(5px) translateX(calc(var(--seed-sway, 6px) * 0.8)) rotate(calc(var(--seed-tilt, 10deg))) scale(1.05); opacity: 0.9; }
100% { transform: translateY(-3px) translateX(calc(var(--seed-sway, 6px) * 0.4)) rotate(calc(var(--seed-tilt, 10deg) * 0.2)) scale(0.97); opacity: 0.7; }
}
@keyframes seedFlicker {
0% { opacity: 0.65; filter: drop-shadow(0 2px 4px rgba(200,190,160,0.35)); }
50% { opacity: 0.9; filter: drop-shadow(0 4px 8px rgba(200,190,160,0.5)); }
100% { opacity: 0.7; filter: drop-shadow(0 3px 6px rgba(200,190,160,0.4)); }
}
@media (max-width: 768px) {
.footer-bg {
bottom: -40px;
@ -394,6 +523,7 @@ button:active { transform: scale(0.97); box-shadow: none; }
justify-content: center;
z-index: 300;
padding: 20px;
animation: overlayFade 0.22s ease;
}
.swal-dialog {
@ -406,6 +536,7 @@ button:active { transform: scale(0.97); box-shadow: none; }
border: 1px solid var(--border);
text-align: center;
position: relative;
animation: dialogPop 0.28s ease;
}
.swal-title {
@ -431,3 +562,9 @@ button:active { transform: scale(0.97); box-shadow: none; }
.swal-confirm { background: var(--project-color); color: var(--card-bg); }
.swal-cancel { background: var(--lock-btn-bg); color: var(--text); }
.swal-danger { background: var(--danger); color: var(--card-bg); }
@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialogPop {
0% { transform: translateY(8px) scale(0.96); opacity: 0; }
60% { transform: translateY(-3px) scale(1.02); opacity: 1; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}

57
assets/textures/seed.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

2
index.html
View File

@ -20,7 +20,7 @@
<header>
<div class="brand">
<img class="brand-icon" src="assets/icons/favicon-96x96.png" alt="Toadstool Cottage Counter icon">
<h1>Toadstool Cottage Counter</h1>
<h1 id="appTitle">Toadstool Cottage Counter</h1>
</div>
<div class="header-controls">
<button class="header-btn hidden" id="installBtn" title="Install app">⬇️</button>