Last 10 Commits for teatracker.scroll.pub

commit dc04f9f965cd4f155c6b2132cdcab08ed346cb20 Author: root <root@hub.scroll.pub> Date: 2025-01-13 16:05:55 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..31711c9 --- /dev/null +++ b/body.html @@ -0,0 +1,44 @@ +<header> + <h1>TeaTracker</h1> + <p>Dynamic Inventory Management for Frankfurt Tea Shop</p> +</header> + +<main> + <section id="dashboard"> + <h2>Inventory Dashboard</h2> + <div class="inventory-grid"> +  + </div> + </section> + + <section id="details" class="hidden"> + <h2>Product Details</h2> + <div class="detail-card"> + <div class="detail-header"> + <h3 class="detail-title"></h3> + <button class="close-detail">×</button> + </div> + <div class="detail-body"> + <div class="info-row"> + <label>Current Quantity:</label> + <input type="number" class="quantity-input"> + </div> + <div class="info-row"> + <label>Daily Usage:</label> + <input type="number" class="usage-input"> + </div> + <div class="info-row"> + <label>Expiry Days:</label> + <div class="leaf-container"> +  + </div> + </div> + <button class="save-btn">Save Changes</button> + </div> + </div> + </section> +</main> + +<footer> + <p>TeaTracker - Simplifying Tea Inventory Management</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..fb1b855 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://teatracker.scroll.pub +metaTags +editButton /edit.html +title TeaTracker - Dynamic Inventory Management +style.css +body.html +script.js \ No newline at end of file diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..2824f38 --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "e56214d5-6bae-40a8-a5e5-095687718ead", + "object": "chat.completion", + "created": 1736784315, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\nteatracker.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://teatracker.scroll.pub\nmetaTags\neditButton /edit.html\ntitle TeaTracker - Dynamic Inventory Management\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>TeaTracker</h1>\n <p>Dynamic Inventory Management for Frankfurt Tea Shop</p>\n</header>\n\n<main>\n <section id=\"dashboard\">\n <h2>Inventory Dashboard</h2>\n <div class=\"inventory-grid\">\n \n </div>\n </section>\n\n <section id=\"details\" class=\"hidden\">\n <h2>Product Details</h2>\n <div class=\"detail-card\">\n <div class=\"detail-header\">\n <h3 class=\"detail-title\"></h3>\n <button class=\"close-detail\">×</button>\n </div>\n <div class=\"detail-body\">\n <div class=\"info-row\">\n <label>Current Quantity:</label>\n <input type=\"number\" class=\"quantity-input\">\n </div>\n <div class=\"info-row\">\n <label>Daily Usage:</label>\n <input type=\"number\" class=\"usage-input\">\n </div>\n <div class=\"info-row\">\n <label>Expiry Days:</label>\n <div class=\"leaf-container\">\n \n </div>\n </div>\n <button class=\"save-btn\">Save Changes</button>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>TeaTracker - Simplifying Tea Inventory Management</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #4CAF50;\n --secondary-color: #388E3C;\n --background-color: #F1F8E9;\n --text-color: #2E7D32;\n --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n text-align: center;\n margin-bottom: 2rem;\n}\n\nh1 {\n color: var(--primary-color);\n font-size: 2.5rem;\n margin: 0;\n}\n\n.inventory-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n}\n\n.inventory-item {\n background: white;\n border-radius: 8px;\n padding: 1.5rem;\n box-shadow: var(--card-shadow);\n transition: transform 0.2s;\n cursor: pointer;\n}\n\n.inventory-item:hover {\n transform: translateY(-5px);\n}\n\n.detail-card {\n max-width: 400px;\n margin: 2rem auto;\n background: white;\n border-radius: 8px;\n box-shadow: var(--card-shadow);\n padding: 1.5rem;\n}\n\n.detail-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1.5rem;\n}\n\n.close-detail {\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n color: var(--text-color);\n}\n\n.info-row {\n margin-bottom: 1rem;\n}\n\n.info-row label {\n display: block;\n margin-bottom: 0.5rem;\n}\n\ninput[type=\"number\"] {\n width: 100%;\n padding: 0.5rem;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n\n.leaf-container {\n display: flex;\n gap: 0.5rem;\n margin-top: 0.5rem;\n}\n\n.leaf-icon {\n width: 24px;\n height: 24px;\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%234CAF50\" d=\"M17 8C8 10 5.9 16.17 3 20c1.83-4.17 5-7 9-7V6c-3.31 0-6 2.69-6 6H3l4 4 4-4H7c0-2.21 1.79-4 4-4s4 1.79 4 4v2c2.76 0 5 2.24 5 5s-2.24 5-5 5-5-2.24-5-5v-2h-2v2c0 3.87 3.13 7 7 7s7-3.13 7-7-3.13-7-7-7z\"/></svg>');\n}\n\n.save-btn {\n background-color: var(--primary-color);\n color: white;\n border: none;\n padding: 0.75rem 1.5rem;\n border-radius: 4px;\n cursor: pointer;\n width: 100%;\n margin-top: 1rem;\n}\n\n.hidden {\n display: none;\n}\n\n@media (max-width: 600px) {\n h1 {\n font-size: 2rem;\n }\n \n .inventory-grid {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\nconst inventoryData = [\n { id: 1, name: \"Green Tea\", quantity: 150, dailyUsage: 25 },\n { id: 2, name: \"Black Tea\", quantity: 200, dailyUsage: 30 },\n { id: 3, name: \"Herbal Tea\", quantity: 100, dailyUsage: 15 },\n { id: 4, name: \"Oolong Tea\", quantity: 80, dailyUsage: 10 }\n];\n\nconst dashboard = document.querySelector('.inventory-grid');\nconst detailsSection = document.getElementById('details');\nconst detailTitle = document.querySelector('.detail-title');\nconst quantityInput = document.querySelector('.quantity-input');\nconst usageInput = document.querySelector('.usage-input');\nconst leafContainer = document.querySelector('.leaf-container');\nlet currentItem = null;\n\nfunction renderDashboard() {\n dashboard.innerHTML = inventoryData.map(item => `\n <div class=\"inventory-item\" data-id=\"${item.id}\">\n <h3>${item.name}</h3>\n <p>Quantity: ${item.quantity}</p>\n <p>Daily Usage: ${item.dailyUsage}</p>\n </div>\n `).join('');\n \n document.querySelectorAll('.inventory-item').forEach(item => {\n item.addEventListener('click', showDetails);\n });\n}\n\nfunction showDetails(e) {\n const itemId = Number(e.currentTarget.dataset.id);\n currentItem = inventoryData.find(item => item.id === itemId);\n \n detailTitle.textContent = currentItem.name;\n quantityInput.value = currentItem.quantity;\n usageInput.value = currentItem.dailyUsage;\n \n renderLeafIcons(Math.floor(currentItem.quantity / currentItem.dailyUsage));\n \n detailsSection.classList.remove('hidden');\n}\n\nfunction renderLeafIcons(days) {\n leafContainer.innerHTML = '';\n for (let i = 0; i < days; i++) {\n const leaf = document.createElement('div');\n leaf.classList.add('leaf-icon');\n leafContainer.appendChild(leaf);\n }\n}\n\ndocument.querySelector('.close-detail').addEventListener('click', () => {\n detailsSection.classList.add('hidden');\n});\n\ndocument.querySelector('.save-btn').addEventListener('click', () => {\n currentItem.quantity = Number(quantityInput.value);\n currentItem.dailyUsage = Number(usageInput.value);\n renderDashboard();\n detailsSection.classList.add('hidden');\n});\n\n// Initial render\nrenderDashboard();\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 300, + "completion_tokens": 1789, + "total_tokens": 2089, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 300 + }, + "system_fingerprint": "fp_3a5770e1b4" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..093aa97 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,3 @@ +# teatracker.scroll.pub + +website generated by DeepSeek from prompt: I want to create a website to manage the dynamic inventory of a store that selling tea drinks in Frankfurt am Main. I want to have a dashboard and detailed information when I want to see details and change inputs, adding one expected expiry days for usage with leaf icon image to represent how many days (calculated by quantity/latest daily usage) \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..a0662cc --- /dev/null +++ b/script.js @@ -0,0 +1,64 @@ +const inventoryData = [ + { id: 1, name: "Green Tea", quantity: 150, dailyUsage: 25 }, + { id: 2, name: "Black Tea", quantity: 200, dailyUsage: 30 }, + { id: 3, name: "Herbal Tea", quantity: 100, dailyUsage: 15 }, + { id: 4, name: "Oolong Tea", quantity: 80, dailyUsage: 10 } +]; + +const dashboard = document.querySelector('.inventory-grid'); +const detailsSection = document.getElementById('details'); +const detailTitle = document.querySelector('.detail-title'); +const quantityInput = document.querySelector('.quantity-input'); +const usageInput = document.querySelector('.usage-input'); +const leafContainer = document.querySelector('.leaf-container'); +let currentItem = null; + +function renderDashboard() { + dashboard.innerHTML = inventoryData.map(item => ` + <div class="inventory-item" data-id="${item.id}"> + <h3>${item.name}</h3> + <p>Quantity: ${item.quantity}</p> + <p>Daily Usage: ${item.dailyUsage}</p> + </div> + `).join(''); + + document.querySelectorAll('.inventory-item').forEach(item => { + item.addEventListener('click', showDetails); + }); +} + +function showDetails(e) { + const itemId = Number(e.currentTarget.dataset.id); + currentItem = inventoryData.find(item => item.id === itemId); + + detailTitle.textContent = currentItem.name; + quantityInput.value = currentItem.quantity; + usageInput.value = currentItem.dailyUsage; + + renderLeafIcons(Math.floor(currentItem.quantity / currentItem.dailyUsage)); + + detailsSection.classList.remove('hidden'); +} + +function renderLeafIcons(days) { + leafContainer.innerHTML = ''; + for (let i = 0; i < days; i++) { + const leaf = document.createElement('div'); + leaf.classList.add('leaf-icon'); + leafContainer.appendChild(leaf); + } +} + +document.querySelector('.close-detail').addEventListener('click', () => { + detailsSection.classList.add('hidden'); +}); + +document.querySelector('.save-btn').addEventListener('click', () => { + currentItem.quantity = Number(quantityInput.value); + currentItem.dailyUsage = Number(usageInput.value); + renderDashboard(); + detailsSection.classList.add('hidden'); +}); + +// Initial render +renderDashboard(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ed06163 --- /dev/null +++ b/style.css @@ -0,0 +1,124 @@ +:root { + --primary-color: #4CAF50; + --secondary-color: #388E3C; + --background-color: #F1F8E9; + --text-color: #2E7D32; + --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + margin: 0; + padding: 20px; + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.6; +} + +header { + text-align: center; + margin-bottom: 2rem; +} + +h1 { + color: var(--primary-color); + font-size: 2.5rem; + margin: 0; +} + +.inventory-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.5rem; + padding: 1rem; +} + +.inventory-item { + background: white; + border-radius: 8px; + padding: 1.5rem; + box-shadow: var(--card-shadow); + transition: transform 0.2s; + cursor: pointer; +} + +.inventory-item:hover { + transform: translateY(-5px); +} + +.detail-card { + max-width: 400px; + margin: 2rem auto; + background: white; + border-radius: 8px; + box-shadow: var(--card-shadow); + padding: 1.5rem; +} + +.detail-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1.5rem; +} + +.close-detail { + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; + color: var(--text-color); +} + +.info-row { + margin-bottom: 1rem; +} + +.info-row label { + display: block; + margin-bottom: 0.5rem; +} + +input[type="number"] { + width: 100%; + padding: 0.5rem; + border: 1px solid #ddd; + border-radius: 4px; +} + +.leaf-container { + display: flex; + gap: 0.5rem; + margin-top: 0.5rem; +} + +.leaf-icon { + width: 24px; + height: 24px; + background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%234CAF50" d="M17 8C8 10 5.9 16.17 3 20c1.83-4.17 5-7 9-7V6c-3.31 0-6 2.69-6 6H3l4 4 4-4H7c0-2.21 1.79-4 4-4s4 1.79 4 4v2c2.76 0 5 2.24 5 5s-2.24 5-5 5-5-2.24-5-5v-2h-2v2c0 3.87 3.13 7 7 7s7-3.13 7-7-3.13-7-7-7z"/></svg>'); +} + +.save-btn { + background-color: var(--primary-color); + color: white; + border: none; + padding: 0.75rem 1.5rem; + border-radius: 4px; + cursor: pointer; + width: 100%; + margin-top: 1rem; +} + +.hidden { + display: none; +} + +@media (max-width: 600px) { + h1 { + font-size: 2rem; + } + + .inventory-grid { + grid-template-columns: 1fr; + } +} \ No newline at end of file