Add ambient seed drift and easter egg bursts
This commit is contained in:
parent
5affb6b8f6
commit
323b8b1759
186
assets/app.js
186
assets/app.js
@ -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
165
assets/style.css
@ -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
57
assets/textures/seed.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user