From c145ac0c033e01d048be753a3eb78ac8afd8ef0b Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Tue, 9 Dec 2025 09:36:52 -0500
Subject: [PATCH] Initial commit

---
 .gitignore |   2 +
 index.html | 582 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 584 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 index.html
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..fd3d04f
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+# macOS metadata
+.DS_Store
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..dde92da
--- /dev/null
+++ b/index.html
@@ -0,0 +1,582 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Woodland Wool</title>
+    <style>
+        :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: -apple-system, BlinkMacSystemFont, "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); }
+
+        .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;
+        }
+
+        .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>
+    <h1>Woodland Wool</h1>
+    <div class="header-controls">
+        <button class="header-btn" id="themeBtn" onclick="toggleTheme()" title="Toggle Dark Mode">🌓</button>
+        <button class="header-btn" id="focusBtn" onclick="toggleFocusMode()" title="Focus Mode (Keeps Screen On)">👁️</button>
+    </div>
+</header>
+
+<div class="container" id="app"></div>
+
+<button class="fab" onclick="openModal('addProject')">+</button>
+
+<div class="modal-overlay" id="modalOverlay">
+    <div class="modal-content">
+        <h3 class="modal-title" id="modalTitle">Title</h3>
+        <input type="text" class="modal-input" id="modalInput" autocomplete="off">
+        <div class="modal-actions">
+            <button class="modal-btn btn-cancel" onclick="closeModal()">Cancel</button>
+            <button class="modal-btn btn-save" onclick="saveModal()">Save</button>
+        </div>
+    </div>
+</div>
+
+<script>
+    // --- 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');
+    
+    // --- 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;
+        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>
