Initial commit
This commit is contained in:
commit
c145ac0c03
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
# macOS metadata
|
||||||
|
.DS_Store
|
||||||
582
index.html
Normal file
582
index.html
Normal file
@ -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>
|
||||||
Loading…
x
Reference in New Issue
Block a user