Last 10 Commits for teatra3.scroll.pub

commit 089ee5d08816a5c4053a0bfe5c9417951dce986c Author: root <root@hub.scroll.pub> Date: 2025-01-13 16:10:50 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..afbe9bd --- /dev/null +++ b/body.html @@ -0,0 +1,50 @@ +<header> + <h1>Teatra</h1> + <p>Dynamic Tea Inventory Management</p> +</header> + +<main> + <section id="dashboard"> + <h2>Inventory Dashboard</h2> + <div class="grid-container"> + <div class="card"> + <h3>Total Stock</h3> + <p id="total-stock">Loading...</p> + </div> + <div class="card"> + <h3>Expiring Soon</h3> + <p id="expiring-soon">Loading...</p> + </div> + <div class="card"> + <h3>Low Stock Items</h3> + <p id="low-stock">Loading...</p> + </div> + </div> + </section> + + <section id="inventory-details"> + <h2>Inventory Details</h2> + <table> + <thead> + <tr> + <th>Item</th> + <th>Quantity</th> + <th>Expiry Date</th> + <th>Status</th> + </tr> + </thead> + <tbody id="inventory-table"> +  + </tbody> + </table> + </section> + + <section id="expiry-forecast"> + <h2>Expiry Forecast</h2> + <canvas id="expiryChart"></canvas> + </section> +</main> + +<footer> + <p>Teatra - Frankfurt am Main</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..080c732 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://teatra.scroll.pub +metaTags +editButton /edit.html +title Teatra - Dynamic Tea 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..6be4623 --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "ab7af9c7-d123-45aa-82ee-1a884744f7a7", + "object": "chat.completion", + "created": 1736784613, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\nteatra.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://teatra.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Teatra - Dynamic Tea Inventory Management\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Teatra</h1>\n <p>Dynamic Tea Inventory Management</p>\n</header>\n\n<main>\n <section id=\"dashboard\">\n <h2>Inventory Dashboard</h2>\n <div class=\"grid-container\">\n <div class=\"card\">\n <h3>Total Stock</h3>\n <p id=\"total-stock\">Loading...</p>\n </div>\n <div class=\"card\">\n <h3>Expiring Soon</h3>\n <p id=\"expiring-soon\">Loading...</p>\n </div>\n <div class=\"card\">\n <h3>Low Stock Items</h3>\n <p id=\"low-stock\">Loading...</p>\n </div>\n </div>\n </section>\n\n <section id=\"inventory-details\">\n <h2>Inventory Details</h2>\n <table>\n <thead>\n <tr>\n <th>Item</th>\n <th>Quantity</th>\n <th>Expiry Date</th>\n <th>Status</th>\n </tr>\n </thead>\n <tbody id=\"inventory-table\">\n \n </tbody>\n </table>\n </section>\n\n <section id=\"expiry-forecast\">\n <h2>Expiry Forecast</h2>\n <canvas id=\"expiryChart\"></canvas>\n </section>\n</main>\n\n<footer>\n <p>Teatra - Frankfurt am Main</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #4CAF50;\n --secondary-color: #FFC107;\n --background-color: #F5F5F5;\n --text-color: #333;\n --card-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n margin: 0;\n padding: 0;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n background-color: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nh1 {\n margin: 0;\n font-size: 2.5rem;\n}\n\n.grid-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n padding: 1.5rem;\n}\n\n.card {\n background: white;\n padding: 1.5rem;\n border-radius: 8px;\n box-shadow: var(--card-shadow);\n transition: transform 0.3s ease;\n}\n\n.card:hover {\n transform: translateY(-5px);\n}\n\n.card h3 {\n color: var(--primary-color);\n margin-top: 0;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin: 2rem 0;\n background: white;\n box-shadow: var(--card-shadow);\n}\n\nth, td {\n padding: 12px;\n text-align: left;\n border-bottom: 1px solid #ddd;\n}\n\nth {\n background-color: var(--primary-color);\n color: white;\n}\n\ncanvas {\n max-width: 100%;\n height: 300px;\n margin: 2rem 0;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background-color: var(--primary-color);\n color: white;\n margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2rem;\n }\n \n .grid-container {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\n// Sample inventory data\nconst inventory = [\n { name: \"Green Tea\", quantity: 50, expiry: \"2023-12-01\" },\n { name: \"Black Tea\", quantity: 30, expiry: \"2023-11-15\" },\n { name: \"Herbal Tea\", quantity: 20, expiry: \"2023-10-30\" },\n { name: \"Oolong Tea\", quantity: 10, expiry: \"2023-11-20\" }\n];\n\n// Calculate inventory metrics\nfunction calculateMetrics() {\n const totalStock = inventory.reduce((sum, item) => sum + item.quantity, 0);\n const expiringSoon = inventory.filter(item => {\n const expiryDate = new Date(item.expiry);\n const today = new Date();\n const diffTime = expiryDate - today;\n const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));\n return diffDays <= 30;\n }).length;\n \n const lowStock = inventory.filter(item => item.quantity <= 15).length;\n\n document.getElementById('total-stock').textContent = totalStock;\n document.getElementById('expiring-soon').textContent = expiringSoon;\n document.getElementById('low-stock').textContent = lowStock;\n}\n\n// Populate inventory table\nfunction populateTable() {\n const tbody = document.getElementById('inventory-table');\n tbody.innerHTML = inventory.map(item => `\n <tr>\n <td>${item.name}</td>\n <td>${item.quantity}</td>\n <td>${item.expiry}</td>\n <td>${getStatus(item)}</td>\n </tr>\n `).join('');\n}\n\n// Get item status\nfunction getStatus(item) {\n const expiryDate = new Date(item.expiry);\n const today = new Date();\n const diffTime = expiryDate - today;\n const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));\n \n if (diffDays <= 0) return 'Expired';\n if (diffDays <= 30) return 'Expiring Soon';\n if (item.quantity <= 15) return 'Low Stock';\n return 'Good';\n}\n\n// Initialize expiry forecast chart\nfunction initChart() {\n const ctx = document.getElementById('expiryChart').getContext('2d');\n const expiryData = inventory.map(item => {\n const expiryDate = new Date(item.expiry);\n const today = new Date();\n return Math.ceil((expiryDate - today) / (1000 * 60 * 60 * 24));\n });\n\n new Chart(ctx, {\n type: 'line',\n data: {\n labels: inventory.map(item => item.name),\n datasets: [{\n label: 'Days Until Expiry',\n data: expiryData,\n backgroundColor: 'rgba(76, 175, 80, 0.2)',\n borderColor: 'rgba(76, 175, 80, 1)',\n borderWidth: 2\n }]\n },\n options: {\n scales: {\n y: {\n beginAtZero: true,\n title: {\n display: true,\n text: 'Days Remaining'\n }\n }\n }\n }\n });\n}\n\n// Initialize everything\nfunction init() {\n calculateMetrics();\n populateTable();\n initChart();\n}\n\n// Run initialization when DOM is loaded\ndocument.addEventListener('DOMContentLoaded', init);\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 285, + "completion_tokens": 1655, + "total_tokens": 1940, + "prompt_cache_hit_tokens": 64, + "prompt_cache_miss_tokens": 221 + }, + "system_fingerprint": "fp_3a5770e1b4" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..83c17db --- /dev/null +++ b/readme.scroll @@ -0,0 +1,3 @@ +# teatra3.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, I also want to see the dynamic expiry forecast \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..4b342b6 --- /dev/null +++ b/script.js @@ -0,0 +1,96 @@ +// Sample inventory data +const inventory = [ + { name: "Green Tea", quantity: 50, expiry: "2023-12-01" }, + { name: "Black Tea", quantity: 30, expiry: "2023-11-15" }, + { name: "Herbal Tea", quantity: 20, expiry: "2023-10-30" }, + { name: "Oolong Tea", quantity: 10, expiry: "2023-11-20" } +]; + +// Calculate inventory metrics +function calculateMetrics() { + const totalStock = inventory.reduce((sum, item) => sum + item.quantity, 0); + const expiringSoon = inventory.filter(item => { + const expiryDate = new Date(item.expiry); + const today = new Date(); + const diffTime = expiryDate - today; + const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); + return diffDays <= 30; + }).length; + + const lowStock = inventory.filter(item => item.quantity <= 15).length; + + document.getElementById('total-stock').textContent = totalStock; + document.getElementById('expiring-soon').textContent = expiringSoon; + document.getElementById('low-stock').textContent = lowStock; +} + +// Populate inventory table +function populateTable() { + const tbody = document.getElementById('inventory-table'); + tbody.innerHTML = inventory.map(item => ` + <tr> + <td>${item.name}</td> + <td>${item.quantity}</td> + <td>${item.expiry}</td> + <td>${getStatus(item)}</td> + </tr> + `).join(''); +} + +// Get item status +function getStatus(item) { + const expiryDate = new Date(item.expiry); + const today = new Date(); + const diffTime = expiryDate - today; + const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); + + if (diffDays <= 0) return 'Expired'; + if (diffDays <= 30) return 'Expiring Soon'; + if (item.quantity <= 15) return 'Low Stock'; + return 'Good'; +} + +// Initialize expiry forecast chart +function initChart() { + const ctx = document.getElementById('expiryChart').getContext('2d'); + const expiryData = inventory.map(item => { + const expiryDate = new Date(item.expiry); + const today = new Date(); + return Math.ceil((expiryDate - today) / (1000 * 60 * 60 * 24)); + }); + + new Chart(ctx, { + type: 'line', + data: { + labels: inventory.map(item => item.name), + datasets: [{ + label: 'Days Until Expiry', + data: expiryData, + backgroundColor: 'rgba(76, 175, 80, 0.2)', + borderColor: 'rgba(76, 175, 80, 1)', + borderWidth: 2 + }] + }, + options: { + scales: { + y: { + beginAtZero: true, + title: { + display: true, + text: 'Days Remaining' + } + } + } + } + }); +} + +// Initialize everything +function init() { + calculateMetrics(); + populateTable(); + initChart(); +} + +// Run initialization when DOM is loaded +document.addEventListener('DOMContentLoaded', init); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..e5c7026 --- /dev/null +++ b/style.css @@ -0,0 +1,95 @@ +:root { + --primary-color: #4CAF50; + --secondary-color: #FFC107; + --background-color: #F5F5F5; + --text-color: #333; + --card-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +body { + font-family: 'Segoe UI', sans-serif; + margin: 0; + padding: 0; + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.6; +} + +header { + background-color: var(--primary-color); + color: white; + padding: 2rem; + text-align: center; +} + +h1 { + margin: 0; + font-size: 2.5rem; +} + +.grid-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; + padding: 1.5rem; +} + +.card { + background: white; + padding: 1.5rem; + border-radius: 8px; + box-shadow: var(--card-shadow); + transition: transform 0.3s ease; +} + +.card:hover { + transform: translateY(-5px); +} + +.card h3 { + color: var(--primary-color); + margin-top: 0; +} + +table { + width: 100%; + border-collapse: collapse; + margin: 2rem 0; + background: white; + box-shadow: var(--card-shadow); +} + +th, td { + padding: 12px; + text-align: left; + border-bottom: 1px solid #ddd; +} + +th { + background-color: var(--primary-color); + color: white; +} + +canvas { + max-width: 100%; + height: 300px; + margin: 2rem 0; +} + +footer { + text-align: center; + padding: 1rem; + background-color: var(--primary-color); + color: white; + margin-top: 2rem; +} + +@media (max-width: 768px) { + h1 { + font-size: 2rem; + } + + .grid-container { + grid-template-columns: 1fr; + } +} \ No newline at end of file