Add max stitch caps, themed alerts, and footer tweaks

assets/app.js

@@ -0,0 +1,362 @@
+// --- Data Init & Colors ---
+let projects = JSON.parse(localStorage.getItem('crochetCounters')) || [];
+// New Earthy/Woodland Palette extracted from image vibes
+const colors = [
+    '#b56b54', // Rust/Mushroom
+    '#7a8b4f', // Olive Green
+    '#cba052', // Mustard/Daisy center
+    '#5f8a8b', // Muted Teal
+    '#8c6246', // Warm Wood tone
+    '#a87b8c', // Dusty Rose
+    '#4a5d43', // Deep Forest
+    '#9c7e63'  // Taupe
+];
+
+// --- State Variables ---
+let modalState = { type: null, projectId: null, partId: null };
+const app = document.getElementById('app');
+const modal = document.getElementById('modalOverlay');
+const modalInput = document.getElementById('modalInput');
+const modalTitle = document.getElementById('modalTitle');
+const hapticTick = () => { if ('vibrate' in navigator) navigator.vibrate(12); };
+
+// --- Sweet-ish Alerts ---
+function removeSwal() {
+    const existing = document.querySelector('.swal-overlay');
+    if (existing) existing.remove();
+}
+
+function showConfirm({ title = 'Are you sure?', text = '', confirmText = 'Yes', cancelText = 'Cancel', danger = false } = {}) {
+    return new Promise(resolve => {
+        removeSwal();
+        const overlay = document.createElement('div');
+        overlay.className = 'swal-overlay';
+        overlay.innerHTML = `
+            <div class="swal-dialog">
+                <div class="swal-title">${title}</div>
+                <div class="swal-text">${text}</div>
+                <div class="swal-actions">
+                    <button class="swal-btn swal-cancel">${cancelText}</button>
+                    <button class="swal-btn ${danger ? 'swal-danger' : 'swal-confirm'}">${confirmText}</button>
+                </div>
+            </div>
+        `;
+        const cancelBtn = overlay.querySelector('.swal-cancel');
+        const confirmBtn = overlay.querySelector('.swal-confirm, .swal-danger');
+        cancelBtn.onclick = () => { removeSwal(); resolve(false); };
+        confirmBtn.onclick = () => { removeSwal(); resolve(true); };
+        overlay.addEventListener('click', (e) => { if (e.target === overlay) { removeSwal(); resolve(false); } });
+        document.addEventListener('keydown', function onKey(e) {
+            if (e.key === 'Escape') { removeSwal(); resolve(false); document.removeEventListener('keydown', onKey); }
+        });
+        document.body.appendChild(overlay);
+    });
+}
+
+function showAlert({ title = 'Notice', text = '' } = {}) {
+    return new Promise(resolve => {
+        removeSwal();
+        const overlay = document.createElement('div');
+        overlay.className = 'swal-overlay';
+        overlay.innerHTML = `
+            <div class="swal-dialog">
+                <div class="swal-title">${title}</div>
+                <div class="swal-text">${text}</div>
+                <div class="swal-actions">
+                    <button class="swal-btn swal-confirm">OK</button>
+                </div>
+            </div>
+        `;
+        const okBtn = overlay.querySelector('.swal-confirm');
+        okBtn.onclick = () => { removeSwal(); resolve(); };
+        overlay.addEventListener('click', (e) => { if (e.target === overlay) { removeSwal(); resolve(); } });
+        document.addEventListener('keydown', function onKey(e) {
+            if (e.key === 'Escape') { removeSwal(); resolve(); document.removeEventListener('keydown', onKey); }
+        });
+        document.body.appendChild(overlay);
+    });
+}
+
+// --- Theme Logic ---
+let isDarkMode = JSON.parse(localStorage.getItem('crochetDarkMode'));
+if (isDarkMode === null) {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        isDarkMode = true;
+    } else {
+        isDarkMode = false;
+    }
+}
+
+function applyTheme() {
+    if (isDarkMode) {
+        document.body.classList.add('dark-mode');
+        document.getElementById('themeBtn').innerHTML = '🌙';
+    } else {
+        document.body.classList.remove('dark-mode');
+        document.getElementById('themeBtn').innerHTML = '☀️';
+    }
+}
+
+function toggleTheme() {
+    isDarkMode = !isDarkMode;
+    localStorage.setItem('crochetDarkMode', isDarkMode);
+    applyTheme();
+}
+applyTheme();
+
+// --- Focus Mode Logic ---
+let wakeLock = null;
+let isFocusMode = false;
+const focusBtn = document.getElementById('focusBtn');
+
+// --- Migration Check ---
+if (projects.length > 0) {
+    let changed = false;
+    projects.forEach((p, index) => {
+        if (!p.parts) { p.parts = []; changed = true; }
+        if (!p.color) { p.color = colors[index % colors.length]; changed = true; }
+        p.parts.forEach(pt => {
+            if (pt.max === undefined) { pt.max = null; changed = true; }
+        });
+    });
+    if (changed) { localStorage.setItem('crochetCounters', JSON.stringify(projects)); }
+}
+
+// --- Core Functions ---
+function save() {
+    localStorage.setItem('crochetCounters', JSON.stringify(projects));
+    render();
+}
+
+    async function toggleFocusMode() {
+        if (!isFocusMode) {
+            try {
+                if (document.documentElement.requestFullscreen) await document.documentElement.requestFullscreen();
+                if ('wakeLock' in navigator) {
+                    wakeLock = await navigator.wakeLock.request('screen');
+                }
+                isFocusMode = true;
+                focusBtn.classList.add('is-active');
+            } catch (err) { showAlert({ title: 'Focus Mode failed', text: err.message }); }
+        } else {
+            if (document.fullscreenElement) document.exitFullscreen();
+            if (wakeLock !== null) { wakeLock.release(); wakeLock = null; }
+            isFocusMode = false;
+            focusBtn.classList.remove('is-active');
+        }
+    }
+document.addEventListener('visibilitychange', async () => {
+    if (wakeLock !== null && document.visibilityState === 'visible') {
+        wakeLock = await navigator.wakeLock.request('screen');
+    }
+});
+
+// --- Interaction Logic ---
+    async function deleteProject(pId) {
+        const ok = await showConfirm({ title: 'Delete project?', text: 'This will remove the entire project.', confirmText: 'Delete', danger: true });
+        if (ok) { projects = projects.filter(p => p.id !== pId); save(); }
+    }
+    function toggleProjectCollapse(pId) {
+        const project = projects.find(p => p.id === pId);
+        project.collapsed = !project.collapsed;
+        save();
+    }
+    async function deletePart(pId, partId) {
+        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();
+        }
+    }
+    function togglePartMinimize(pId, partId) {
+        const project = projects.find(p => p.id === pId);
+        const part = project.parts.find(pt => pt.id === partId);
+        part.minimized = !part.minimized;
+        save();
+    }
+    function togglePartLock(pId, partId) {
+        const project = projects.find(p => p.id === pId);
+        const part = project.parts.find(pt => pt.id === partId);
+        part.locked = !part.locked;
+        save();
+    }
+    function togglePartFinish(pId, partId) {
+        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; 
+        save();
+    }
+    function updateCount(pId, partId, change) {
+        const project = projects.find(p => p.id === pId);
+        const part = project.parts.find(pt => pt.id === partId);
+        if (part.locked || part.finished) return;
+        part.count += change;
+        if (part.max !== null && part.count > part.max) part.count = part.max;
+        if (part.count < 0) part.count = 0;
+        hapticTick();
+        save();
+    }
+    async function resetCount(pId, partId) {
+        const project = projects.find(p => p.id === pId);
+        const part = project.parts.find(pt => pt.id === partId);
+        if (part.locked || part.finished) return;
+        const ok = await showConfirm({ title: 'Reset count?', text: 'Set this count back to zero.', confirmText: 'Reset', danger: true });
+        if(ok) {
+            part.count = 0;
+            save();
+        }
+    }
+
+// --- Modal Logic ---
+function openModal(type, pId = null, partId = null) {
+    modalState = { type, pId, partId };
+    modalInput.value = "";
+    
+        if (type === 'addProject') {
+            modalTitle.innerText = "New Project Name";
+            modalInput.type = "text"; modalInput.placeholder = "e.g., Amigurumi Bear";
+        } else if (type === 'addPart') {
+            modalTitle.innerText = "New Part Name";
+            modalInput.type = "text"; modalInput.placeholder = "e.g., Head";
+        } else if (type === 'setMax') {
+            const part = projects.find(p => p.id === pId).parts.find(pt => pt.id === partId);
+            modalTitle.innerText = "Set Max Stitches";
+            modalInput.value = part.max ?? '';
+            modalInput.type = "number";
+            modalInput.placeholder = "Leave blank to clear";
+        } else if (type === 'renamePart') {
+            const part = projects.find(p => p.id === pId).parts.find(pt => pt.id === partId);
+            if(part.locked || part.finished) return;
+            modalTitle.innerText = "Rename Part";
+            modalInput.value = part.name; modalInput.type = "text";
+        } else if (type === 'manualCount') {
+            const part = projects.find(p => p.id === pId).parts.find(pt => pt.id === partId);
+            if(part.locked || part.finished) return;
+            modalTitle.innerText = "Set Row Count";
+            modalInput.value = part.count; modalInput.type = "number";
+    }
+    modal.classList.add('active');
+    setTimeout(() => modalInput.focus(), 100);
+}
+function closeModal() {
+    modal.classList.remove('active');
+    modalInput.blur();
+}
+    function saveModal() {
+        const val = modalInput.value.trim();
+        if (!val && modalState.type !== 'manualCount') return closeModal();
+
+        if (modalState.type === 'addProject') {
+            const nextColor = colors[projects.length % colors.length];
+            projects.push({ id: Date.now(), name: val, color: nextColor, collapsed: false, parts: [] });
+            projects[projects.length-1].parts.push({ id: Date.now() + 1, name: 'Part 1', count: 0, locked: false, finished: false, minimized: false, max: null });
+        } 
+        else if (modalState.type === 'addPart') {
+            const project = projects.find(p => p.id === modalState.pId);
+            project.parts.push({ id: Date.now(), name: val, count: 0, locked: false, finished: false, minimized: false, max: null });
+            project.collapsed = false;
+        }
+        else if (modalState.type === 'renamePart') {
+            const part = projects.find(p => p.id === modalState.pId).parts.find(pt => pt.id === modalState.partId);
+            part.name = val;
+        }
+        else if (modalState.type === 'manualCount') {
+            const num = parseInt(val);
+            if (!isNaN(num) && num >= 0) {
+                const part = projects.find(p => p.id === modalState.pId).parts.find(pt => pt.id === modalState.partId);
+                part.count = num;
+                if (part.max !== null && part.count > part.max) part.count = part.max;
+            }
+        }
+        else if (modalState.type === 'setMax') {
+            const part = projects.find(p => p.id === modalState.pId).parts.find(pt => pt.id === modalState.partId);
+            if (val === '') {
+                part.max = null;
+            } else {
+                const num = parseInt(val);
+                if (!isNaN(num) && num > 0) {
+                    part.max = num;
+                    if (part.count > part.max) part.count = part.max;
+                }
+            }
+        }
+    save();
+    closeModal();
+}
+modalInput.addEventListener("keyup", (e) => { if (e.key === "Enter") saveModal(); });
+
+// --- Render Logic ---
+function render() {
+    app.innerHTML = '';
+    if (projects.length === 0) {
+        app.innerHTML = '<div class="empty-state">Toadstools & twine await...<br>Tap + to begin a new project.</div>';
+        return;
+    }
+
+    projects.forEach(project => {
+        const sortedParts = [...project.parts].sort((a, b) => a.finished - b.finished);
+        const projectCollapsedClass = project.collapsed ? 'project-collapsed' : '';
+        
+        let partsHtml = '';
+        sortedParts.forEach(part => {
+            const isLocked = part.locked ? 'is-locked' : '';
+            const isFinished = part.finished ? 'is-finished' : '';
+            const isMinimized = part.minimized ? 'is-minimized' : '';
+            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' : '';
+            
+            partsHtml += `
+            <div class="part-card ${isLocked} ${isFinished} ${isMinimized}">
+                <div class="part-header">
+                    <div class="part-name-group">
+                        <label class="check-container">
+                            <input type="checkbox" ${part.finished ? 'checked' : ''} onchange="togglePartFinish(${project.id}, ${part.id})">
+                            <span class="checkmark"></span>
+                        </label>
+                        <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>
+                </div>
+                <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>
+                    <button class="action-btn btn-plus ${controlsDimmed}" onclick="updateCount(${project.id}, ${part.id}, 1)">+</button>
+                </div>
+            </div>`;
+        });
+
+        const projectContainer = document.createElement('div');
+        projectContainer.className = `project-container ${projectCollapsedClass}`;
+        projectContainer.style = `--project-color: ${project.color}`;
+        projectContainer.innerHTML = `
+            <div class="project-header">
+                <div class="project-title-group" onclick="toggleProjectCollapse(${project.id})">
+                    <button class="btn-toggle-project">▼</button>
+                    <span class="project-title">${project.name}</span>
+                </div>
+                <div style="display:flex; gap:10px; align-items:center;">
+                    <button class="btn-add-part" onclick="openModal('addPart', ${project.id})">+ Part</button>
+                    <button class="btn-delete-project" onclick="deleteProject(${project.id})">×</button>
+                </div>
+            </div>
+            <div class="part-list">${partsHtml}</div>
+        `;
+        app.appendChild(projectContainer);
+    });
+}
+
+render();

assets/style.css

@@ -0,0 +1,377 @@
+:root {
+    /* --- Woodland Theme (Light) --- */
+    --bg: #e4e8d5; /* Sage background from image */
+    --card-bg: #f8f5e6; /* Creamy yarn color */
+    --header-bg: #c5a384; /* 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;
+    
+    --bg-finished: #dbe4ce; /* Muted sage green */
+    --lock-btn-bg: #ebe7da;
+    --lock-btn-text: #9c8e7e;
+    --btn-secondary-bg: #fdfcf5;
+    --btn-secondary-text: #4a3b2a;
+    
+    /* Status Colors (Muted earthy tones) */
+    --danger: #b56b54; /* Rusty red/orange */
+    --success: #7a8b4f; /* Mossy green */
+    
+    /* Dynamic Project Color (Default Rust) */
+    --project-color: #b56b54;
+}
+
+/* --- Woodland Theme (Dark) --- */
+body.dark-mode {
+    --bg: #2c3327; /* Deep forest background */
+    --card-bg: #3d362d; /* Dark wood card */
+    --header-bg: #4a3b2a; /* Darker wood header */
+    --header-text: #e4e8d5;
+    --text: #e4e8d5; /* Cream text */
+    --text-muted: #a8a095;
+    --border: #594e3f;
+    --shadow: 0 4px 8px rgba(0,0,0,0.4);
+    
+    --modal-bg: #3d362d;
+    --input-bg: #2c2720;
+    --input-border: #594e3f;
+    
+    --bg-finished: #2a382a; /* Dark moss */
+    --lock-btn-bg: #4a4238;
+    --lock-btn-text: #8c8276;
+    --btn-secondary-bg: #4a4238;
+    --btn-secondary-text: #d1c7b7;
+}
+
+* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+
+body {
+    font-family: 'Quicksand', "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    background-color: var(--bg);
+    min-height: 100vh;
+    color: var(--text);
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    overflow-x: hidden;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+header {
+    background-color: var(--header-bg);
+    color: var(--header-text);
+    padding: 0.8rem 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    border-bottom: 2px solid rgba(0,0,0,0.05);
+    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);
+    font-family: 'Cormorant Garamond', Georgia, serif;
+}
+
+.brand { display: flex; align-items: center; gap: 10px; }
+
+.brand-icon {
+    width: 52px; height: 52px; border-radius: 8px;
+    object-fit: contain; display: block;
+    background: rgba(255,255,255,0.12); padding: 4px;
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
+}
+
+.header-controls { display: flex; gap: 10px; }
+
+.header-btn {
+    background: rgba(255,255,255,0.2);
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    cursor: pointer;
+    color: var(--header-text);
+    transition: all 0.2s;
+}
+
+.header-btn.is-active { background: var(--header-text); color: var(--header-bg); }
+
+.container {
+    max-width: 650px;
+    margin: 0 auto;
+    padding: 1.5rem 1rem calc(120px + env(safe-area-inset-bottom, 0px));
+    position: relative;
+    z-index: 2;
+    flex: 1;
+}
+
+/* --- PROJECT CONTAINER --- */
+.project-container {
+    background: var(--card-bg);
+    border-radius: 18px;
+    padding: 5px 15px 15px 15px;
+    margin-bottom: 2rem;
+    box-shadow: var(--shadow);
+    transition: background-color 0.3s;
+    border: 1px solid var(--border);
+}
+
+.project-header {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 15px 5px; margin-bottom: 10px;
+}
+
+.project-title-group { display: flex; align-items: center; gap: 10px; }
+
+.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 {
+    background: none; border: none; color: var(--project-color);
+    font-size: 1.2rem; cursor: pointer; transition: transform 0.2s; padding: 5px;
+}
+.project-collapsed .btn-toggle-project { transform: rotate(-90deg); }
+.project-collapsed .part-list { display: none; }
+.project-collapsed { margin-bottom: 1rem; opacity: 0.8; box-shadow: none; }
+
+.btn-add-part {
+    background: var(--project-color); color: var(--card-bg); border: none;
+    border-radius: 20px; padding: 6px 16px; font-size: 0.9rem; font-weight: bold;
+    cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,0.1); transition: transform 0.1s;
+}
+.btn-add-part:active { transform: scale(0.95); }
+
+.btn-delete-project {
+    background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; padding: 5px;
+}
+.btn-delete-project:hover { color: var(--danger); }
+
+/* --- PART CARD --- */
+.part-card {
+    background: var(--card-bg);
+    border-radius: 14px;
+    padding: 1rem;
+    margin-bottom: 0.8rem;
+    box-shadow: var(--shadow);
+    position: relative;
+    transition: background-color 0.3s;
+    overflow: hidden;
+    border-left: 7px solid var(--project-color);
+    border-top: 1px solid var(--border);
+    border-right: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+}
+
+.part-card.is-locked { background-color: var(--bg); opacity: 0.9; }
+
+.part-card.is-finished { 
+    background-color: var(--bg-finished); 
+    border-left-color: var(--success);
+    opacity: 0.9;
+}
+
+.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-header { display: flex; justify-content: space-between; align-items: center; }
+.part-card:not(.is-minimized) .part-header { margin-bottom: 15px; }
+
+.part-name-group { display: flex; align-items: center; gap: 12px; flex-grow: 1; }
+
+.check-container { position: relative; cursor: pointer; width: 26px; height: 26px; flex-shrink: 0; }
+.check-container input { opacity: 0; cursor: pointer; height: 0; width: 0; }
+.checkmark {
+    position: absolute; top: 0; left: 0; height: 26px; width: 26px;
+    background-color: var(--card-bg); border-radius: 50%; border: 2px solid var(--text-muted); transition: all 0.2s;
+}
+.check-container input:checked ~ .checkmark { background-color: var(--success); border-color: var(--success); }
+.checkmark:after { content: ""; position: absolute; display: none; }
+.check-container input:checked ~ .checkmark:after { display: block; }
+.check-container .checkmark:after {
+    left: 9px; top: 5px; width: 6px; height: 12px;
+    border: solid var(--card-bg); border-width: 0 2px 2px 0; transform: rotate(45deg);
+}
+
+.part-name {
+    font-size: 1.1rem; font-weight: 700; color: var(--text);
+    border-bottom: 2px dashed var(--project-color); /* Dashed looks more like stitching */
+    cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
+}
+
+.part-mini-count {
+    display: none; font-weight: 800; color: var(--project-color); margin-left: 8px; font-size: 1.2rem;
+}
+
+.is-finished .part-name { text-decoration: line-through; color: var(--success); border-bottom: none; }
+.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; }
+.btn-delete-part:hover { color: var(--danger); }
+.btn-toggle-part { transition: transform 0.2s; }
+
+.count-display {
+    font-size: 3.5rem; font-weight: 800; text-align: center; color: var(--project-color); margin: 0.5rem 0 0.4rem 0; touch-action: manipulation;
+     text-shadow: 1px 1px 0px var(--card-bg);
+}
+.is-locked .count-display { color: var(--lock-btn-text); pointer-events: none; }
+.is-finished .count-display { color: var(--success); pointer-events: none; }
+
+.count-subtext {
+    text-align: center;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    margin: 0 0 0.6rem 0;
+}
+.count-subtext strong { color: var(--project-color); }
+
+.controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 0 5px; }
+
+button.action-btn {
+    border: none; border-radius: 12px; padding: 12px 0; font-size: 1.5rem;
+    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.1s;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.05);
+}
+
+.btn-minus { background-color: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1px solid var(--border); }
+.btn-plus { background-color: var(--project-color); color: var(--card-bg); }
+.btn-lock { background-color: var(--lock-btn-bg); color: var(--lock-btn-text); font-size: 1.1rem; }
+.btn-lock.locked-active { background-color: var(--border); color: var(--text-muted); border: 2px solid var(--text-muted); box-shadow: none;}
+
+.hidden-controls { visibility: hidden; pointer-events: none; }
+.dimmed { opacity: 0.4; pointer-events: none; }
+button:active { transform: scale(0.97); box-shadow: none; }
+
+/* Floating Add Project Button */
+.fab {
+    position: fixed; bottom: 30px; right: 30px;
+    background-color: var(--text); color: var(--bg); /* Adapts to mode */
+    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;
+}
+.fab:active { transform: scale(0.95); }
+.fab { z-index: 2; }
+
+/* --- MODAL --- */
+.modal-overlay {
+    display: none; 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);
+}
+.modal-overlay.active { display: flex; }
+.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);
+}
+@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;
+    background: var(--input-bg); color: var(--text);
+    border: 2px solid var(--input-border); border-radius: 12px; margin-bottom: 25px; outline: none; transition: border-color 0.2s;
+}
+.modal-input:focus { border-color: var(--project-color); }
+.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
+.modal-btn { padding: 12px 24px; border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; }
+.btn-cancel { background: var(--lock-btn-bg); color: var(--text-muted); }
+.btn-save { background: var(--text); color: var(--bg); }
+
+.empty-state { text-align: center; color: var(--text-muted); margin-top: 80px; font-size: 1.2rem; font-style: italic;}
+
+.footer-bg {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: -115px;
+    height: clamp(700px, 24vh, 850px);
+    background: url('textures/mushroom.svg') no-repeat center bottom;
+    background-size: cover;
+    opacity: 0.65;
+    width: 125vw;
+    pointer-events: none;
+    z-index: 0;
+}
+
+@media (max-width: 768px) {
+    .footer-bg {
+        bottom: 0;
+        height: clamp(260px, 24vh, 450px);
+    }
+}
+
+/* Sweet-ish alerts */
+.swal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(44, 35, 25, 0.55);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 300;
+    padding: 20px;
+}
+
+.swal-dialog {
+    background: var(--card-bg);
+    color: var(--text);
+    border-radius: 16px;
+    padding: 22px 20px 18px;
+    width: min(420px, 90vw);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
+    border: 1px solid var(--border);
+    text-align: center;
+    position: relative;
+}
+
+.swal-title {
+    font-family: 'Cormorant Garamond', Georgia, serif;
+    font-size: 1.4rem;
+    margin: 0 0 8px;
+}
+
+.swal-text { margin: 0 0 16px; color: var(--text-muted); }
+
+.swal-actions { display: flex; justify-content: center; gap: 10px; }
+
+.swal-btn {
+    border: none;
+    border-radius: 12px;
+    padding: 12px 18px;
+    font-weight: 700;
+    cursor: pointer;
+    min-width: 110px;
+    transition: transform 0.08s;
+}
+.swal-btn:active { transform: scale(0.97); }
+.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); }

index.html

@@ -13,292 +13,13 @@
     <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>
+    <link rel="stylesheet" href="assets/style.css">
-        :root {
-            /* --- Woodland Theme (Light) --- */
-            --bg: #e4e8d5; /* Sage background from image */
-            --card-bg: #f8f5e6; /* Creamy yarn color */
-            --header-bg: #c5a384; /* 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;
-            
-            --bg-finished: #dbe4ce; /* Muted sage green */
-            --lock-btn-bg: #ebe7da;
-            --lock-btn-text: #9c8e7e;
-            --btn-secondary-bg: #fdfcf5;
-            --btn-secondary-text: #4a3b2a;
-            
-            /* Status Colors (Muted earthy tones) */
-            --danger: #b56b54; /* Rusty red/orange */
-            --success: #7a8b4f; /* Mossy green */
-            
-            /* Dynamic Project Color (Default Rust) */
-            --project-color: #b56b54;
-        }
-
-        /* --- Woodland Theme (Dark) --- */
-        body.dark-mode {
-            --bg: #2c3327; /* Deep forest background */
-            --card-bg: #3d362d; /* Dark wood card */
-            --header-bg: #4a3b2a; /* Darker wood header */
-            --header-text: #e4e8d5;
-            --text: #e4e8d5; /* Cream text */
-            --text-muted: #a8a095;
-            --border: #594e3f;
-            --shadow: 0 4px 8px rgba(0,0,0,0.4);
-            
-            --modal-bg: #3d362d;
-            --input-bg: #2c2720;
-            --input-border: #594e3f;
-            
-            --bg-finished: #2a382a; /* Dark moss */
-            --lock-btn-bg: #4a4238;
-            --lock-btn-text: #8c8276;
-            --btn-secondary-bg: #4a4238;
-            --btn-secondary-text: #d1c7b7;
-        }
-
-        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
-
-        body {
-            font-family: 'Quicksand', "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            background-color: var(--bg);
-            color: var(--text);
-            margin: 0;
-            padding: 0;
-            padding-bottom: 120px;
-            transition: background-color 0.3s, color 0.3s;
-        }
-
-        header {
-            background-color: var(--header-bg);
-            color: var(--header-text);
-            padding: 0.8rem 1rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-            position: sticky;
-            top: 0;
-            z-index: 100;
-            border-bottom: 2px solid rgba(0,0,0,0.05);
-            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); font-family: 'Cormorant Garamond', Georgia, serif; }
-        .brand { display: flex; align-items: center; gap: 10px; }
-        .brand-icon {
-            width: 32px; height: 32px; border-radius: 10px;
-            background: rgba(255,255,255,0.15); padding: 6px;
-            box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
-        }
-
-        .header-controls { display: flex; gap: 10px; }
-
-        .header-btn {
-            background: rgba(255,255,255,0.2);
-            border: none;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.2rem;
-            cursor: pointer;
-            color: var(--header-text);
-            transition: all 0.2s;
-        }
-
-        .header-btn.is-active { background: var(--header-text); color: var(--header-bg); }
-
-        .container { max-width: 650px; margin: 0 auto; padding: 1.5rem 1rem; }
-
-        /* --- PROJECT CONTAINER --- */
-        .project-container {
-            background: var(--card-bg);
-            border-radius: 18px;
-            padding: 5px 15px 15px 15px;
-            margin-bottom: 2rem;
-            box-shadow: var(--shadow);
-            transition: background-color 0.3s;
-            border: 1px solid var(--border);
-        }
-
-        .project-header {
-            display: flex; justify-content: space-between; align-items: center;
-            padding: 15px 5px; margin-bottom: 10px;
-        }
-
-        .project-title-group { display: flex; align-items: center; gap: 10px; }
-
-        .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 {
-            background: none; border: none; color: var(--project-color);
-            font-size: 1.2rem; cursor: pointer; transition: transform 0.2s; padding: 5px;
-        }
-        .project-collapsed .btn-toggle-project { transform: rotate(-90deg); }
-        .project-collapsed .part-list { display: none; }
-        .project-collapsed { margin-bottom: 1rem; opacity: 0.8; box-shadow: none; }
-
-        .btn-add-part {
-            background: var(--project-color); color: var(--card-bg); border: none;
-            border-radius: 20px; padding: 6px 16px; font-size: 0.9rem; font-weight: bold;
-            cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,0.1); transition: transform 0.1s;
-        }
-        .btn-add-part:active { transform: scale(0.95); }
-
-        .btn-delete-project {
-            background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; padding: 5px;
-        }
-        .btn-delete-project:hover { color: var(--danger); }
-
-        /* --- PART CARD --- */
-        .part-card {
-            background: var(--card-bg);
-            border-radius: 14px;
-            padding: 1rem;
-            margin-bottom: 0.8rem;
-            box-shadow: var(--shadow);
-            position: relative;
-            transition: background-color 0.3s;
-            overflow: hidden;
-            border-left: 7px solid var(--project-color);
-            border-top: 1px solid var(--border);
-            border-right: 1px solid var(--border);
-            border-bottom: 1px solid var(--border);
-        }
-
-        .part-card.is-locked { background-color: var(--bg); opacity: 0.9; }
-        
-        .part-card.is-finished { 
-            background-color: var(--bg-finished); 
-            border-left-color: var(--success);
-            opacity: 0.9;
-        }
-
-        .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-header { display: flex; justify-content: space-between; align-items: center; }
-        .part-card:not(.is-minimized) .part-header { margin-bottom: 15px; }
-
-        .part-name-group { display: flex; align-items: center; gap: 12px; flex-grow: 1; }
-
-        .check-container { position: relative; cursor: pointer; width: 26px; height: 26px; flex-shrink: 0; }
-        .check-container input { opacity: 0; cursor: pointer; height: 0; width: 0; }
-        .checkmark {
-            position: absolute; top: 0; left: 0; height: 26px; width: 26px;
-            background-color: var(--card-bg); border-radius: 50%; border: 2px solid var(--text-muted); transition: all 0.2s;
-        }
-        .check-container input:checked ~ .checkmark { background-color: var(--success); border-color: var(--success); }
-        .checkmark:after { content: ""; position: absolute; display: none; }
-        .check-container input:checked ~ .checkmark:after { display: block; }
-        .check-container .checkmark:after {
-            left: 9px; top: 5px; width: 6px; height: 12px;
-            border: solid var(--card-bg); border-width: 0 2px 2px 0; transform: rotate(45deg);
-        }
-
-        .part-name {
-            font-size: 1.1rem; font-weight: 700; color: var(--text);
-            border-bottom: 2px dashed var(--project-color); /* Dashed looks more like stitching */
-            cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
-        }
-
-        .part-mini-count {
-            display: none; font-weight: 800; color: var(--project-color); margin-left: 8px; font-size: 1.2rem;
-        }
-
-        .is-finished .part-name { text-decoration: line-through; color: var(--success); border-bottom: none; }
-        .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; }
-        .btn-delete-part:hover { color: var(--danger); }
-        .btn-toggle-part { transition: transform 0.2s; }
-
-        .count-display {
-            font-size: 3.5rem; font-weight: 800; text-align: center; color: var(--project-color); margin: 0.5rem 0 1rem 0; touch-action: manipulation;
-             text-shadow: 1px 1px 0px var(--card-bg);
-        }
-        .is-locked .count-display { color: var(--lock-btn-text); pointer-events: none; }
-        .is-finished .count-display { color: var(--success); pointer-events: none; }
-
-        .controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 0 5px; }
-
-        button.action-btn {
-            border: none; border-radius: 12px; padding: 12px 0; font-size: 1.5rem;
-            cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.1s;
-            box-shadow: 0 3px 6px rgba(0,0,0,0.05);
-        }
-
-        .btn-minus { background-color: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1px solid var(--border); }
-        .btn-plus { background-color: var(--project-color); color: var(--card-bg); }
-        .btn-lock { background-color: var(--lock-btn-bg); color: var(--lock-btn-text); font-size: 1.1rem; }
-        .btn-lock.locked-active { background-color: var(--border); color: var(--text-muted); border: 2px solid var(--text-muted); box-shadow: none;}
-
-        .hidden-controls { visibility: hidden; pointer-events: none; }
-        .dimmed { opacity: 0.4; pointer-events: none; }
-        button:active { transform: scale(0.97); box-shadow: none; }
-
-        /* Floating Add Project Button */
-        .fab {
-            position: fixed; bottom: 30px; right: 30px;
-            background-color: var(--text); color: var(--bg); /* Adapts to mode */
-            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: 90; transition: transform 0.1s;
-        }
-        .fab:active { transform: scale(0.95); }
-
-        /* --- MODAL --- */
-        .modal-overlay {
-            display: none; 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);
-        }
-        .modal-overlay.active { display: flex; }
-        .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);
-        }
-        @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;
-            background: var(--input-bg); color: var(--text);
-            border: 2px solid var(--input-border); border-radius: 12px; margin-bottom: 25px; outline: none; transition: border-color 0.2s;
-        }
-        .modal-input:focus { border-color: var(--project-color); }
-        .modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
-        .modal-btn { padding: 12px 24px; border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; }
-        .btn-cancel { background: var(--lock-btn-bg); color: var(--text-muted); }
-        .btn-save { background: var(--text); color: var(--bg); }
-
-        .empty-state { text-align: center; color: var(--text-muted); margin-top: 80px; font-size: 1.2rem; font-style: italic;}
-    </style>
 </head>
 <body>
 
 <header>
     <div class="brand">
-        <img class="brand-icon" src="assets/icons/favicon.svg" alt="Toadstool Tally icon">
+        <img class="brand-icon" src="assets/icons/favicon-96x96.png" alt="Toadstool Tally icon">
         <h1>Toadstool Tally</h1>
     </div>
     <div class="header-controls">
@@ -322,282 +43,7 @@
     </div>
 </div>
 
-<script>
+<script src="assets/app.js"></script>
-    // --- Data Init & Colors ---
+<footer class="footer-bg" aria-hidden="true"></footer>
-    let projects = JSON.parse(localStorage.getItem('crochetCounters')) || [];
-    // New Earthy/Woodland Palette extracted from image vibes
-    const colors = [
-        '#b56b54', // Rust/Mushroom
-        '#7a8b4f', // Olive Green
-        '#cba052', // Mustard/Daisy center
-        '#5f8a8b', // Muted Teal
-        '#8c6246', // Warm Wood tone
-        '#a87b8c', // Dusty Rose
-        '#4a5d43', // Deep Forest
-        '#9c7e63'  // Taupe
-    ];
-
-    // --- State Variables ---
-    let modalState = { type: null, projectId: null, partId: null };
-    const app = document.getElementById('app');
-    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'));
-    if (isDarkMode === null) {
-        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            isDarkMode = true;
-        } else {
-            isDarkMode = false;
-        }
-    }
-    
-    function applyTheme() {
-        if (isDarkMode) {
-            document.body.classList.add('dark-mode');
-            document.getElementById('themeBtn').innerHTML = '🌙';
-        } else {
-            document.body.classList.remove('dark-mode');
-            document.getElementById('themeBtn').innerHTML = '☀️';
-        }
-    }
-    
-    function toggleTheme() {
-        isDarkMode = !isDarkMode;
-        localStorage.setItem('crochetDarkMode', isDarkMode);
-        applyTheme();
-    }
-    applyTheme();
-
-    // --- Focus Mode Logic ---
-    let wakeLock = null;
-    let isFocusMode = false;
-    const focusBtn = document.getElementById('focusBtn');
-
-    // --- Migration Check ---
-    if (projects.length > 0) {
-        let changed = false;
-        projects.forEach((p, index) => {
-            if (!p.parts) { p.parts = []; changed = true; }
-            if (!p.color) { p.color = colors[index % colors.length]; changed = true; }
-        });
-        if (changed) { localStorage.setItem('crochetCounters', JSON.stringify(projects)); }
-    }
-
-    // --- Core Functions ---
-    function save() {
-        localStorage.setItem('crochetCounters', JSON.stringify(projects));
-        render();
-    }
-
-    async function toggleFocusMode() {
-        if (!isFocusMode) {
-            try {
-                if (document.documentElement.requestFullscreen) await document.documentElement.requestFullscreen();
-                if ('wakeLock' in navigator) {
-                    wakeLock = await navigator.wakeLock.request('screen');
-                }
-                isFocusMode = true;
-                focusBtn.classList.add('is-active');
-            } catch (err) { alert("Focus Mode failed: " + err.message); }
-        } else {
-            if (document.fullscreenElement) document.exitFullscreen();
-            if (wakeLock !== null) { wakeLock.release(); wakeLock = null; }
-            isFocusMode = false;
-            focusBtn.classList.remove('is-active');
-        }
-    }
-    document.addEventListener('visibilitychange', async () => {
-        if (wakeLock !== null && document.visibilityState === 'visible') {
-            wakeLock = await navigator.wakeLock.request('screen');
-        }
-    });
-
-    // --- Interaction Logic ---
-    function deleteProject(pId) {
-        if(confirm("Delete this entire project?")) { projects = projects.filter(p => p.id !== pId); save(); }
-    }
-    function toggleProjectCollapse(pId) {
-        const project = projects.find(p => p.id === pId);
-        project.collapsed = !project.collapsed;
-        save();
-    }
-    function deletePart(pId, partId) {
-        if(confirm("Delete this part?")) {
-            const project = projects.find(p => p.id === pId);
-            project.parts = project.parts.filter(pt => pt.id !== partId);
-            save();
-        }
-    }
-    function togglePartMinimize(pId, partId) {
-        const project = projects.find(p => p.id === pId);
-        const part = project.parts.find(pt => pt.id === partId);
-        part.minimized = !part.minimized;
-        save();
-    }
-    function togglePartLock(pId, partId) {
-        const project = projects.find(p => p.id === pId);
-        const part = project.parts.find(pt => pt.id === partId);
-        part.locked = !part.locked;
-        save();
-    }
-    function togglePartFinish(pId, partId) {
-        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; 
-        save();
-    }
-    function updateCount(pId, partId, change) {
-        const project = projects.find(p => p.id === pId);
-        const part = project.parts.find(pt => pt.id === partId);
-        if (part.locked || part.finished) return;
-        part.count += change;
-        if (part.count < 0) part.count = 0;
-        hapticTick();
-        save();
-    }
-    function resetCount(pId, partId) {
-        const project = projects.find(p => p.id === pId);
-        const part = project.parts.find(pt => pt.id === partId);
-        if (part.locked || part.finished) return;
-        if(confirm("Reset count to 0?")) {
-            part.count = 0;
-            save();
-        }
-    }
-
-    // --- Modal Logic ---
-    function openModal(type, pId = null, partId = null) {
-        modalState = { type, pId, partId };
-        modalInput.value = "";
-        
-        if (type === 'addProject') {
-            modalTitle.innerText = "New Project Name";
-            modalInput.type = "text"; modalInput.placeholder = "e.g., Amigurumi Bear";
-        } else if (type === 'addPart') {
-            modalTitle.innerText = "New Part Name";
-            modalInput.type = "text"; modalInput.placeholder = "e.g., Head";
-        } else if (type === 'renamePart') {
-            const part = projects.find(p => p.id === pId).parts.find(pt => pt.id === partId);
-            if(part.locked || part.finished) return;
-            modalTitle.innerText = "Rename Part";
-            modalInput.value = part.name; modalInput.type = "text";
-        } else if (type === 'manualCount') {
-            const part = projects.find(p => p.id === pId).parts.find(pt => pt.id === partId);
-            if(part.locked || part.finished) return;
-            modalTitle.innerText = "Set Row Count";
-            modalInput.value = part.count; modalInput.type = "number";
-        }
-        modal.classList.add('active');
-        setTimeout(() => modalInput.focus(), 100);
-    }
-    function closeModal() {
-        modal.classList.remove('active');
-        modalInput.blur();
-    }
-    function saveModal() {
-        const val = modalInput.value.trim();
-        if (!val && modalState.type !== 'manualCount') return closeModal();
-
-        if (modalState.type === 'addProject') {
-            const nextColor = colors[projects.length % colors.length];
-            projects.push({ id: Date.now(), name: val, color: nextColor, collapsed: false, parts: [] });
-            projects[projects.length-1].parts.push({ id: Date.now() + 1, name: 'Part 1', count: 0, locked: false, finished: false, minimized: false });
-        } 
-        else if (modalState.type === 'addPart') {
-            const project = projects.find(p => p.id === modalState.pId);
-            project.parts.push({ id: Date.now(), name: val, count: 0, locked: false, finished: false, minimized: false });
-            project.collapsed = false;
-        }
-        else if (modalState.type === 'renamePart') {
-            const part = projects.find(p => p.id === modalState.pId).parts.find(pt => pt.id === modalState.partId);
-            part.name = val;
-        }
-        else if (modalState.type === 'manualCount') {
-            const num = parseInt(val);
-            if (!isNaN(num) && num >= 0) {
-                const part = projects.find(p => p.id === modalState.pId).parts.find(pt => pt.id === modalState.partId);
-                part.count = num;
-            }
-        }
-        save();
-        closeModal();
-    }
-    modalInput.addEventListener("keyup", (e) => { if (e.key === "Enter") saveModal(); });
-
-    // --- Render Logic ---
-    function render() {
-        app.innerHTML = '';
-        if (projects.length === 0) {
-            app.innerHTML = '<div class="empty-state">Toadstools & twine await...<br>Tap + to begin a new project.</div>';
-            return;
-        }
-
-        projects.forEach(project => {
-            const sortedParts = [...project.parts].sort((a, b) => a.finished - b.finished);
-            const projectCollapsedClass = project.collapsed ? 'project-collapsed' : '';
-            
-            let partsHtml = '';
-            sortedParts.forEach(part => {
-                const isLocked = part.locked ? 'is-locked' : '';
-                const isFinished = part.finished ? 'is-finished' : '';
-                const isMinimized = part.minimized ? 'is-minimized' : '';
-                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' : '';
-                
-                partsHtml += `
-                <div class="part-card ${isLocked} ${isFinished} ${isMinimized}">
-                    <div class="part-header">
-                        <div class="part-name-group">
-                            <label class="check-container">
-                                <input type="checkbox" ${part.finished ? 'checked' : ''} onchange="togglePartFinish(${project.id}, ${part.id})">
-                                <span class="checkmark"></span>
-                            </label>
-                            <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="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>
-                        <button class="action-btn btn-plus ${controlsDimmed}" onclick="updateCount(${project.id}, ${part.id}, 1)">+</button>
-                    </div>
-                </div>`;
-            });
-
-            const projectContainer = document.createElement('div');
-            projectContainer.className = `project-container ${projectCollapsedClass}`;
-            projectContainer.style = `--project-color: ${project.color}`;
-            projectContainer.innerHTML = `
-                <div class="project-header">
-                    <div class="project-title-group" onclick="toggleProjectCollapse(${project.id})">
-                        <button class="btn-toggle-project">▼</button>
-                        <span class="project-title">${project.name}</span>
-                    </div>
-                    <div style="display:flex; gap:10px; align-items:center;">
-                        <button class="btn-add-part" onclick="openModal('addPart', ${project.id})">+ Part</button>
-                        <button class="btn-delete-project" onclick="deleteProject(${project.id})">×</button>
-                    </div>
-                </div>
-                <div class="part-list">${partsHtml}</div>
-            `;
-            app.appendChild(projectContainer);
-        });
-    }
-
-    render();
-</script>
 </body>
 </html>