Last 10 Commits for teatra2.scroll.pub

commit e620f7c87cd8a6ae42537bd6a2f8c1413391ee29 Author: root <root@hub.scroll.pub> Date: 2025-01-13 16:08:25 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..8172268 --- /dev/null +++ b/body.html @@ -0,0 +1,55 @@ +<header> + <h1>Teatra</h1> + <p>Dynamic Tea Inventory Management for Frankfurt am Main</p> +</header> + +<main> + <section id="dashboard"> + <h2>Inventory Dashboard</h2> + <div class="grid-container"> + <div class="card"> + <img src="icons/tea-leaf.svg" alt="Total Stock" class="icon"> + <h3>Total Stock</h3> + <p class="value" id="total-stock">Loading...</p> + </div> + <div class="card"> + <img src="icons/expiry.svg" alt="Expiring Soon" class="icon"> + <h3>Expiring Soon</h3> + <p class="value" id="expiring-soon">Loading...</p> + </div> + <div class="card"> + <img src="icons/forecast.svg" alt="Usage Forecast" class="icon"> + <h3>Usage Forecast</h3> + <p class="value" id="usage-forecast">Loading...</p> + </div> + </div> + </section> + + <section id="inventory-details"> + <h2>Inventory Details</h2> + <table> + <thead> + <tr> + <th>Product</th> + <th>Quantity</th> + <th>Expiry Date</th> + <th>Status</th> + </tr> + </thead> + <tbody id="inventory-table"> +  + </tbody> + </table> + </section> + + <section id="forecast"> + <h2>Expiry Forecast</h2> + <div class="chart-container"> + <canvas id="expiry-chart"></canvas> + </div> + </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..5e0747a --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "663fb958-2295-471a-b9e1-fbd2b66381b9", + "object": "chat.completion", + "created": 1736784473, + "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 for Frankfurt am Main</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 <img src=\"icons/tea-leaf.svg\" alt=\"Total Stock\" class=\"icon\">\n <h3>Total Stock</h3>\n <p class=\"value\" id=\"total-stock\">Loading...</p>\n </div>\n <div class=\"card\">\n <img src=\"icons/expiry.svg\" alt=\"Expiring Soon\" class=\"icon\">\n <h3>Expiring Soon</h3>\n <p class=\"value\" id=\"expiring-soon\">Loading...</p>\n </div>\n <div class=\"card\">\n <img src=\"icons/forecast.svg\" alt=\"Usage Forecast\" class=\"icon\">\n <h3>Usage Forecast</h3>\n <p class=\"value\" id=\"usage-forecast\">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>Product</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=\"forecast\">\n <h2>Expiry Forecast</h2>\n <div class=\"chart-container\">\n <canvas id=\"expiry-chart\"></canvas>\n </div>\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: #8BC34A;\n --background-color: #F1F8E9;\n --text-color: #2E7D32;\n --card-bg: #FFFFFF;\n --shadow: 0 2px 4px 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: 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: 2rem;\n}\n\n.card {\n background: var(--card-bg);\n border-radius: 8px;\n padding: 1.5rem;\n box-shadow: var(--shadow);\n text-align: center;\n}\n\n.icon {\n width: 50px;\n height: 50px;\n margin-bottom: 1rem;\n}\n\n.value {\n font-size: 2rem;\n font-weight: bold;\n color: var(--primary-color);\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin: 2rem 0;\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\n.chart-container {\n max-width: 800px;\n margin: 2rem auto;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background: 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 data (to be replaced with actual API calls)\nconst inventoryData = [\n { product: 'Green Tea', quantity: 120, expiry: '2023-12-01', status: 'Good' },\n { product: 'Black Tea', quantity: 80, expiry: '2023-11-15', status: 'Warning' },\n { product: 'Herbal Tea', quantity: 50, expiry: '2023-10-30', status: 'Critical' }\n];\n\n// Update dashboard values\ndocument.getElementById('total-stock').textContent = inventoryData.reduce((sum, item) => sum + item.quantity, 0);\ndocument.getElementById('expiring-soon').textContent = inventoryData.filter(item => item.status !== 'Good').length;\ndocument.getElementById('usage-forecast').textContent = '1200 units/month';\n\n// Populate inventory table\nconst tableBody = document.getElementById('inventory-table');\ninventoryData.forEach(item => {\n const row = document.createElement('tr');\n row.innerHTML = `\n <td>${item.product}</td>\n <td>${item.quantity}</td>\n <td>${item.expiry}</td>\n <td class=\"status-${item.status.toLowerCase()}\">${item.status}</td>\n `;\n tableBody.appendChild(row);\n});\n\n// Chart.js implementation for expiry forecast\nconst ctx = document.getElementById('expiry-chart').getContext('2d');\nnew Chart(ctx, {\n type: 'line',\n data: {\n labels: ['Oct', 'Nov', 'Dec', 'Jan'],\n datasets: [{\n label: 'Expiring Products',\n data: [15, 10, 25, 30],\n borderColor: '#4CAF50',\n tension: 0.1\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true\n }\n }\n }\n});\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 298, + "completion_tokens": 1416, + "total_tokens": 1714, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 298 + }, + "system_fingerprint": "fp_3a5770e1b4" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..6313c4b --- /dev/null +++ b/readme.scroll @@ -0,0 +1,3 @@ +# teatra2.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 forecast of usage expiry of products with vivid icon image such as tea leafs \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..d64bccb --- /dev/null +++ b/script.js @@ -0,0 +1,48 @@ +// Sample data (to be replaced with actual API calls) +const inventoryData = [ + { product: 'Green Tea', quantity: 120, expiry: '2023-12-01', status: 'Good' }, + { product: 'Black Tea', quantity: 80, expiry: '2023-11-15', status: 'Warning' }, + { product: 'Herbal Tea', quantity: 50, expiry: '2023-10-30', status: 'Critical' } +]; + +// Update dashboard values +document.getElementById('total-stock').textContent = inventoryData.reduce((sum, item) => sum + item.quantity, 0); +document.getElementById('expiring-soon').textContent = inventoryData.filter(item => item.status !== 'Good').length; +document.getElementById('usage-forecast').textContent = '1200 units/month'; + +// Populate inventory table +const tableBody = document.getElementById('inventory-table'); +inventoryData.forEach(item => { + const row = document.createElement('tr'); + row.innerHTML = ` + <td>${item.product}</td> + <td>${item.quantity}</td> + <td>${item.expiry}</td> + <td class="status-${item.status.toLowerCase()}">${item.status}</td> + `; + tableBody.appendChild(row); +}); + +// Chart.js implementation for expiry forecast +const ctx = document.getElementById('expiry-chart').getContext('2d'); +new Chart(ctx, { + type: 'line', + data: { + labels: ['Oct', 'Nov', 'Dec', 'Jan'], + datasets: [{ + label: 'Expiring Products', + data: [15, 10, 25, 30], + borderColor: '#4CAF50', + tension: 0.1 + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + y: { + beginAtZero: true + } + } + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ae0c5dc --- /dev/null +++ b/style.css @@ -0,0 +1,96 @@ +:root { + --primary-color: #4CAF50; + --secondary-color: #8BC34A; + --background-color: #F1F8E9; + --text-color: #2E7D32; + --card-bg: #FFFFFF; + --shadow: 0 2px 4px 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: 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: 2rem; +} + +.card { + background: var(--card-bg); + border-radius: 8px; + padding: 1.5rem; + box-shadow: var(--shadow); + text-align: center; +} + +.icon { + width: 50px; + height: 50px; + margin-bottom: 1rem; +} + +.value { + font-size: 2rem; + font-weight: bold; + color: var(--primary-color); +} + +table { + width: 100%; + border-collapse: collapse; + margin: 2rem 0; +} + +th, td { + padding: 12px; + text-align: left; + border-bottom: 1px solid #ddd; +} + +th { + background-color: var(--primary-color); + color: white; +} + +.chart-container { + max-width: 800px; + margin: 2rem auto; +} + +footer { + text-align: center; + padding: 1rem; + background: 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