Last 10 Commits for takumi-tracker.scroll.pub

commit 65806194b4dea990857b31f6c63297d5352b0dcf Author: root <root@hub.scroll.pub> Date: 2025-01-13 15:38:49 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..c7bd36b --- /dev/null +++ b/body.html @@ -0,0 +1,72 @@ +<header> + <nav> + <div class="logo"> + <h1>Takumi Tracker</h1> + </div> + <div class="nav-links"> + <button id="darkModeToggle" aria-label="Toggle dark mode">🌓</button> + <button id="addBatch" class="primary-btn">+ New Batch</button> + </div> + </nav> +</header> + +<main> + <section class="dashboard"> + <div class="stats-container"> + <div class="stat-card"> + <h3>Today's Production</h3> + <p id="todayCount">0</p> + </div> + <div class="stat-card"> + <h3>Weekly Total</h3> + <p id="weeklyCount">0</p> + </div> + <div class="stat-card"> + <h3>Completion Rate</h3> + <p id="completionRate">0%</p> + </div> + </div> + + <div class="production-table"> + <h2>Production Batches</h2> + <div class="table-container"> + <table id="batchTable"> + <thead> + <tr> + <th>Batch ID</th> + <th>Model</th> + <th>Quantity</th> + <th>Start Date</th> + <th>Status</th> + <th>Actions</th> + </tr> + </thead> + <tbody id="batchTableBody"> + </tbody> + </table> + </div> + </div> + </section> + + <dialog id="batchModal"> + <form id="batchForm"> + <h2>New Production Batch</h2> + <div class="form-group"> + <label for="modelNumber">Model Number</label> + <input type="text" id="modelNumber" required> + </div> + <div class="form-group"> + <label for="quantity">Quantity</label> + <input type="number" id="quantity" min="1" required> + </div> + <div class="form-actions"> + <button type="button" class="secondary-btn" id="cancelBatch">Cancel</button> + <button type="submit" class="primary-btn">Create Batch</button> + </div> + </form> + </dialog> +</main> + +<footer> + <p>Takumi Motion Controls - Production Tracking System</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..6d9db43 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://takumi-tracker.scroll.pub +metaTags +editButton /edit.html +title Takumi Motion Controls - Production Tracker +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..a1964e3 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01FZUoxvUy7wX7nzxbfsXKba", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll create a simple but powerful production tracking web app. For the domain, I suggest:\n\n---domain---\ntakumi-tracker.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://takumi-tracker.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Takumi Motion Controls - Production Tracker\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">\n <h1>Takumi Tracker</h1>\n </div>\n <div class=\"nav-links\">\n <button id=\"darkModeToggle\" aria-label=\"Toggle dark mode\">🌓</button>\n <button id=\"addBatch\" class=\"primary-btn\">+ New Batch</button>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"dashboard\">\n <div class=\"stats-container\">\n <div class=\"stat-card\">\n <h3>Today's Production</h3>\n <p id=\"todayCount\">0</p>\n </div>\n <div class=\"stat-card\">\n <h3>Weekly Total</h3>\n <p id=\"weeklyCount\">0</p>\n </div>\n <div class=\"stat-card\">\n <h3>Completion Rate</h3>\n <p id=\"completionRate\">0%</p>\n </div>\n </div>\n\n <div class=\"production-table\">\n <h2>Production Batches</h2>\n <div class=\"table-container\">\n <table id=\"batchTable\">\n <thead>\n <tr>\n <th>Batch ID</th>\n <th>Model</th>\n <th>Quantity</th>\n <th>Start Date</th>\n <th>Status</th>\n <th>Actions</th>\n </tr>\n </thead>\n <tbody id=\"batchTableBody\">\n </tbody>\n </table>\n </div>\n </div>\n </section>\n\n <dialog id=\"batchModal\">\n <form id=\"batchForm\">\n <h2>New Production Batch</h2>\n <div class=\"form-group\">\n <label for=\"modelNumber\">Model Number</label>\n <input type=\"text\" id=\"modelNumber\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"quantity\">Quantity</label>\n <input type=\"number\" id=\"quantity\" min=\"1\" required>\n </div>\n <div class=\"form-actions\">\n <button type=\"button\" class=\"secondary-btn\" id=\"cancelBatch\">Cancel</button>\n <button type=\"submit\" class=\"primary-btn\">Create Batch</button>\n </div>\n </form>\n </dialog>\n</main>\n\n<footer>\n <p>Takumi Motion Controls - Production Tracking System</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2563eb;\n --secondary-color: #1e40af;\n --background-color: #ffffff;\n --text-color: #1f2937;\n --card-background: #f3f4f6;\n --border-color: #e5e7eb;\n --success-color: #059669;\n --warning-color: #d97706;\n --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n}\n\n[data-theme=\"dark\"] {\n --primary-color: #3b82f6;\n --secondary-color: #60a5fa;\n --background-color: #111827;\n --text-color: #f3f4f6;\n --card-background: #1f2937;\n --border-color: #374151;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.5;\n transition: background-color 0.3s, color 0.3s;\n}\n\nheader {\n background-color: var(--card-background);\n padding: 1rem;\n box-shadow: var(--shadow);\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo h1 {\n font-size: 1.5rem;\n font-weight: 700;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n.nav-links {\n display: flex;\n gap: 1rem;\n}\n\nmain {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.stats-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n}\n\n.stat-card {\n background-color: var(--card-background);\n padding: 1.5rem;\n border-radius: 0.5rem;\n box-shadow: var(--shadow);\n}\n\n.stat-card h3 {\n font-size: 0.875rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-bottom: 0.5rem;\n}\n\n.stat-card p {\n font-size: 2rem;\n font-weight: 700;\n color: var(--primary-color);\n}\n\n.production-table {\n background-color: var(--card-background);\n padding: 1.5rem;\n border-radius: 0.5rem;\n box-shadow: var(--shadow);\n}\n\n.table-container {\n overflow-x: auto;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin-top: 1rem;\n}\n\nth, td {\n padding: 0.75rem;\n text-align: left;\n border-bottom: 1px solid var(--border-color);\n}\n\nth {\n font-weight: 600;\n text-transform: uppercase;\n font-size: 0.75rem;\n letter-spacing: 0.05em;\n}\n\n.primary-btn, .secondary-btn {\n padding: 0.5rem 1rem;\n border-radius: 0.375rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.primary-btn {\n background-color: var(--primary-color);\n color: white;\n border: none;\n}\n\n.primary-btn:hover {\n background-color: var(--secondary-color);\n}\n\n.secondary-btn {\n background-color: transparent;\n border: 1px solid var(--border-color);\n color: var(--text-color);\n}\n\n.secondary-btn:hover {\n background-color: var(--card-background);\n}\n\ndialog {\n background-color: var(--background-color);\n border: 1px solid var(--border-color);\n border-radius: 0.5rem;\n padding: 2rem;\n max-width: 500px;\n width: 90%;\n}\n\n.form-group {\n margin-bottom: 1rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ninput {\n width: 100%;\n padding: 0.5rem;\n border: 1px solid var(--border-color);\n border-radius: 0.375rem;\n background-color: var(--background-color);\n color: var(--text-color);\n}\n\n.form-actions {\n display: flex;\n gap: 1rem;\n justify-content: flex-end;\n margin-top: 2rem;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background-color: var(--card-background);\n margin-top: 2rem;\n}\n\n@media (max-width: 640px) {\n .stats-container {\n grid-template-columns: 1fr;\n }\n \n .nav-links {\n gap: 0.5rem;\n }\n \n .primary-btn, .secondary-btn {\n padding: 0.5rem;\n font-size: 0.875rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Dark mode toggle\n const darkModeToggle = document.getElementById('darkModeToggle');\n const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');\n \n function setTheme(isDark) {\n document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');\n localStorage.setItem('theme', isDark ? 'dark' : 'light');\n }\n\n // Initialize theme\n const savedTheme = localStorage.getItem('theme');\n if (savedTheme) {\n setTheme(savedTheme === 'dark');\n } else {\n setTheme(prefersDark.matches);\n }\n\n darkModeToggle.addEventListener('click', () => {\n const isDark = document.documentElement.getAttribute('data-theme') === 'dark';\n setTheme(!isDark);\n });\n\n // Batch modal\n const batchModal = document.getElementById('batchModal');\n const addBatchBtn = document.getElementById('addBatch');\n const cancelBatchBtn = document.getElementById('cancelBatch');\n const batchForm = document.getElementById('batchForm');\n \n addBatchBtn.addEventListener('click', () => {\n batchModal.showModal();\n });\n\n cancelBatchBtn.addEventListener('click', () => {\n batchModal.close();\n batchForm.reset();\n });\n\n // Sample data management\n let batches = JSON.parse(localStorage.getItem('batches')) || [];\n \n function generateBatchId() {\n return 'B' + Date.now().toString().slice(-6);\n }\n\n function updateTable() {\n const tbody = document.getElementById('batchTableBody');\n tbody.innerHTML = '';\n \n batches.forEach(batch => {\n const tr = document.createElement('tr');\n tr.innerHTML = `\n <td>${batch.id}</td>\n <td>${batch.model}</td>\n <td>${batch.quantity}</td>\n <td>${new Date(batch.startDate).toLocaleDateString()}</td>\n <td><span class=\"status-${batch.status.toLowerCase()}\">${batch.status}</span></td>\n <td>\n <button class=\"secondary-btn\" onclick=\"updateStatus('${batch.id}')\">\n Update Status\n </button>\n </td>\n `;\n tbody.appendChild(tr);\n });\n\n updateStats();\n }\n\n function updateStats() {\n const today = new Date().toDateString();\n const todayCount = batches.filter(b => \n new Date(b.startDate).toDateString() === today\n ).length;\n \n const weekAgo = new Date();\n weekAgo.setDate(weekAgo.getDate() - 7);\n const weeklyCount = batches.filter(b => \n new Date(b.startDate) >= weekAgo\n ).length;\n \n const completed = batches.filter(b => b.status === 'Completed').length;\n const completionRate = batches.length ? \n Math.round((completed / batches.length) * 100) : 0;\n\n document.getElementById('todayCount').textContent = todayCount;\n document.getElementById('weeklyCount').textContent = weeklyCount;\n document.getElementById('completionRate').textContent = `${completionRate}%`;\n }\n\n batchForm.addEventListener('submit', (e) => {\n e.preventDefault();\n \n const newBatch = {\n id: generateBatchId(),\n model: document.getElementById('modelNumber').value,\n quantity: document.getElementById('quantity').value,\n startDate: new Date().toISOString(),\n status: 'Pending'\n };\n\n batches.unshift(newBatch);\n localStorage.setItem('batches', JSON.stringify(batches));\n \n updateTable();\n batchModal.close();\n batchForm.reset();\n });\n\n // Initial render\n updateTable();\n\n // Expose updateStatus to global scope\n window.updateStatus = (batchId) => {\n const batch = batches.find(b => b.id === batchId);\n if (batch) {\n const statuses = ['Pending', 'In Progress', 'Completed'];\n const currentIndex = statuses.indexOf(batch.status);\n batch.status = statuses[(currentIndex + 1) % statuses.length];\n \n localStorage.setItem('batches', JSON.stringify(batches));\n updateTable();\n }\n };\n});\n\n---end---\n\nThis creates a beautiful, responsive production tracking system with the following features:\n\n1. Dark/light mode toggle with system preference detection\n2. Production statistics dashboard\n3. Batch tracking table\n4. Add new production batch modal\n5. Status updates for batches\n6. Local storage for data persistence\n7. Mobile-responsive design\n8. Accessibility features\n9. Clean, modern UI with smooth animations\n10. Professional gradients and shadows\n\nThe design follows modern best practices with semantic HTML, BEM-like CSS naming, and clean JavaScript organization. It's fully functional without any external dependencies and works great on all devices." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 294, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 3559 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..4f1d727 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,3 @@ +# takumi-tracker.scroll.pub + +website generated by Claude from prompt: create simple but highly customizable production tracker web application for a electronic Motor controller unit manufacturing company called Takumi Motion Controls \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..aa022ad --- /dev/null +++ b/script.js @@ -0,0 +1,125 @@ +document.addEventListener('DOMContentLoaded', () => { + // Dark mode toggle + const darkModeToggle = document.getElementById('darkModeToggle'); + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); + + function setTheme(isDark) { + document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light'); + localStorage.setItem('theme', isDark ? 'dark' : 'light'); + } + + // Initialize theme + const savedTheme = localStorage.getItem('theme'); + if (savedTheme) { + setTheme(savedTheme === 'dark'); + } else { + setTheme(prefersDark.matches); + } + + darkModeToggle.addEventListener('click', () => { + const isDark = document.documentElement.getAttribute('data-theme') === 'dark'; + setTheme(!isDark); + }); + + // Batch modal + const batchModal = document.getElementById('batchModal'); + const addBatchBtn = document.getElementById('addBatch'); + const cancelBatchBtn = document.getElementById('cancelBatch'); + const batchForm = document.getElementById('batchForm'); + + addBatchBtn.addEventListener('click', () => { + batchModal.showModal(); + }); + + cancelBatchBtn.addEventListener('click', () => { + batchModal.close(); + batchForm.reset(); + }); + + // Sample data management + let batches = JSON.parse(localStorage.getItem('batches')) || []; + + function generateBatchId() { + return 'B' + Date.now().toString().slice(-6); + } + + function updateTable() { + const tbody = document.getElementById('batchTableBody'); + tbody.innerHTML = ''; + + batches.forEach(batch => { + const tr = document.createElement('tr'); + tr.innerHTML = ` + <td>${batch.id}</td> + <td>${batch.model}</td> + <td>${batch.quantity}</td> + <td>${new Date(batch.startDate).toLocaleDateString()}</td> + <td><span class="status-${batch.status.toLowerCase()}">${batch.status}</span></td> + <td> + <button class="secondary-btn" onclick="updateStatus('${batch.id}')"> + Update Status + </button> + </td> + `; + tbody.appendChild(tr); + }); + + updateStats(); + } + + function updateStats() { + const today = new Date().toDateString(); + const todayCount = batches.filter(b => + new Date(b.startDate).toDateString() === today + ).length; + + const weekAgo = new Date(); + weekAgo.setDate(weekAgo.getDate() - 7); + const weeklyCount = batches.filter(b => + new Date(b.startDate) >= weekAgo + ).length; + + const completed = batches.filter(b => b.status === 'Completed').length; + const completionRate = batches.length ? + Math.round((completed / batches.length) * 100) : 0; + + document.getElementById('todayCount').textContent = todayCount; + document.getElementById('weeklyCount').textContent = weeklyCount; + document.getElementById('completionRate').textContent = `${completionRate}%`; + } + + batchForm.addEventListener('submit', (e) => { + e.preventDefault(); + + const newBatch = { + id: generateBatchId(), + model: document.getElementById('modelNumber').value, + quantity: document.getElementById('quantity').value, + startDate: new Date().toISOString(), + status: 'Pending' + }; + + batches.unshift(newBatch); + localStorage.setItem('batches', JSON.stringify(batches)); + + updateTable(); + batchModal.close(); + batchForm.reset(); + }); + + // Initial render + updateTable(); + + // Expose updateStatus to global scope + window.updateStatus = (batchId) => { + const batch = batches.find(b => b.id === batchId); + if (batch) { + const statuses = ['Pending', 'In Progress', 'Completed']; + const currentIndex = statuses.indexOf(batch.status); + batch.status = statuses[(currentIndex + 1) % statuses.length]; + + localStorage.setItem('batches', JSON.stringify(batches)); + updateTable(); + } + }; +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..b3ffd34 --- /dev/null +++ b/style.css @@ -0,0 +1,210 @@ +:root { + --primary-color: #2563eb; + --secondary-color: #1e40af; + --background-color: #ffffff; + --text-color: #1f2937; + --card-background: #f3f4f6; + --border-color: #e5e7eb; + --success-color: #059669; + --warning-color: #d97706; + --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); +} + +[data-theme="dark"] { + --primary-color: #3b82f6; + --secondary-color: #60a5fa; + --background-color: #111827; + --text-color: #f3f4f6; + --card-background: #1f2937; + --border-color: #374151; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: system-ui, -apple-system, sans-serif; + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.5; + transition: background-color 0.3s, color 0.3s; +} + +header { + background-color: var(--card-background); + padding: 1rem; + box-shadow: var(--shadow); +} + +nav { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo h1 { + font-size: 1.5rem; + font-weight: 700; + background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.nav-links { + display: flex; + gap: 1rem; +} + +main { + max-width: 1200px; + margin: 2rem auto; + padding: 0 1rem; +} + +.stats-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; + margin-bottom: 2rem; +} + +.stat-card { + background-color: var(--card-background); + padding: 1.5rem; + border-radius: 0.5rem; + box-shadow: var(--shadow); +} + +.stat-card h3 { + font-size: 0.875rem; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 0.5rem; +} + +.stat-card p { + font-size: 2rem; + font-weight: 700; + color: var(--primary-color); +} + +.production-table { + background-color: var(--card-background); + padding: 1.5rem; + border-radius: 0.5rem; + box-shadow: var(--shadow); +} + +.table-container { + overflow-x: auto; +} + +table { + width: 100%; + border-collapse: collapse; + margin-top: 1rem; +} + +th, td { + padding: 0.75rem; + text-align: left; + border-bottom: 1px solid var(--border-color); +} + +th { + font-weight: 600; + text-transform: uppercase; + font-size: 0.75rem; + letter-spacing: 0.05em; +} + +.primary-btn, .secondary-btn { + padding: 0.5rem 1rem; + border-radius: 0.375rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s; +} + +.primary-btn { + background-color: var(--primary-color); + color: white; + border: none; +} + +.primary-btn:hover { + background-color: var(--secondary-color); +} + +.secondary-btn { + background-color: transparent; + border: 1px solid var(--border-color); + color: var(--text-color); +} + +.secondary-btn:hover { + background-color: var(--card-background); +} + +dialog { + background-color: var(--background-color); + border: 1px solid var(--border-color); + border-radius: 0.5rem; + padding: 2rem; + max-width: 500px; + width: 90%; +} + +.form-group { + margin-bottom: 1rem; +} + +label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; +} + +input { + width: 100%; + padding: 0.5rem; + border: 1px solid var(--border-color); + border-radius: 0.375rem; + background-color: var(--background-color); + color: var(--text-color); +} + +.form-actions { + display: flex; + gap: 1rem; + justify-content: flex-end; + margin-top: 2rem; +} + +footer { + text-align: center; + padding: 2rem; + background-color: var(--card-background); + margin-top: 2rem; +} + +@media (max-width: 640px) { + .stats-container { + grid-template-columns: 1fr; + } + + .nav-links { + gap: 0.5rem; + } + + .primary-btn, .secondary-btn { + padding: 0.5rem; + font-size: 0.875rem; + } +}