commit 68b67964414972182e36a9710327742404dc57be
Author: root <root@hub.scroll.pub>
Date: 2025-01-13 15:57:42 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..2418667
--- /dev/null
+++ b/body.html
@@ -0,0 +1,39 @@
+<header>
+ <h1>Teatra Inventory Dashboard</h1>
+ <nav>
+ <a href="#dashboard">Dashboard</a>
+ <a href="#inventory">Inventory</a>
+ <a href="#reports">Reports</a>
+ </nav>
+</header>
+
+<main>
+ <section id="dashboard">
+ <h2>Inventory Overview</h2>
+ <div class="stats-grid">
+ <div class="stat-card">
+ <span class="stat-value">42</span>
+ <span class="stat-label">Total Items</span>
+ </div>
+ <div class="stat-card">
+ <span class="stat-value">8</span>
+ <span class="stat-label">Low Stock</span>
+ </div>
+ <div class="stat-card">
+ <span class="stat-value">3</span>
+ <span class="stat-label">Out of Stock</span>
+ </div>
+ </div>
+ </section>
+
+ <section id="inventory">
+ <h2>Inventory Details</h2>
+ <div class="inventory-grid">
+ <!-- Inventory items will be dynamically inserted here -->
+ </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..f8a255b
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "44d92394-9e93-43b5-b79f-feabceccda4d",
+ "object": "chat.completion",
+ "created": 1736783829,
+ "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 Inventory Dashboard</h1>\n <nav>\n <a href=\"#dashboard\">Dashboard</a>\n <a href=\"#inventory\">Inventory</a>\n <a href=\"#reports\">Reports</a>\n </nav>\n</header>\n\n<main>\n <section id=\"dashboard\">\n <h2>Inventory Overview</h2>\n <div class=\"stats-grid\">\n <div class=\"stat-card\">\n <span class=\"stat-value\">42</span>\n <span class=\"stat-label\">Total Items</span>\n </div>\n <div class=\"stat-card\">\n <span class=\"stat-value\">8</span>\n <span class=\"stat-label\">Low Stock</span>\n </div>\n <div class=\"stat-card\">\n <span class=\"stat-value\">3</span>\n <span class=\"stat-label\">Out of Stock</span>\n </div>\n </div>\n </section>\n\n <section id=\"inventory\">\n <h2>Inventory Details</h2>\n <div class=\"inventory-grid\">\n <!-- Inventory items will be dynamically inserted here -->\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: #4CAF50;\n --secondary: #8BC34A;\n --accent: #CDDC39;\n --background: #F1F8E9;\n --text: #1B5E20;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n margin: 0;\n padding: 0;\n background: var(--background);\n color: var(--text);\n line-height: 1.6;\n}\n\nheader {\n background: var(--primary);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nh1 {\n margin: 0;\n font-size: 2.5rem;\n}\n\nnav {\n margin-top: 1rem;\n}\n\nnav a {\n color: white;\n text-decoration: none;\n margin: 0 1rem;\n padding: 0.5rem;\n border-radius: 4px;\n transition: background 0.3s;\n}\n\nnav a:hover {\n background: rgba(255, 255, 255, 0.1);\n}\n\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n padding: 2rem;\n}\n\n.stat-card {\n background: white;\n padding: 1.5rem;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n text-align: center;\n}\n\n.stat-value {\n font-size: 2.5rem;\n font-weight: bold;\n color: var(--primary);\n}\n\n.stat-label {\n color: var(--text);\n opacity: 0.8;\n}\n\n.inventory-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 1.5rem;\n padding: 2rem;\n}\n\n.inventory-item {\n background: white;\n border-radius: 8px;\n padding: 1.5rem;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n display: grid;\n grid-template-columns: 100px 1fr;\n gap: 1rem;\n align-items: center;\n}\n\n.item-image {\n width: 100%;\n border-radius: 4px;\n}\n\n.item-details {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.item-name {\n font-size: 1.2rem;\n font-weight: bold;\n}\n\n.item-quantity {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.leaf-icon {\n display: inline-block;\n width: 16px;\n height: 16px;\n background: var(--secondary);\n clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2rem;\n }\n \n .stats-grid {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\n// Sample inventory data\nconst inventoryData = [\n {\n name: \"Green Tea\",\n image: \"images/green-tea.jpg\",\n quantity: 120,\n dailyUsage: 15,\n expiryDays: null\n },\n {\n name: \"Black Tea\",\n image: \"images/black-tea.jpg\",\n quantity: 80,\n dailyUsage: 10,\n expiryDays: null\n },\n {\n name: \"Herbal Tea\",\n image: \"images/herbal-tea.jpg\",\n quantity: 50,\n dailyUsage: 8,\n expiryDays: null\n }\n];\n\nfunction calculateExpiryDays(item) {\n return Math.floor(item.quantity / item.dailyUsage);\n}\n\nfunction createInventoryItem(item) {\n const expiryDays = calculateExpiryDays(item);\n \n const itemElement = document.createElement('div');\n itemElement.className = 'inventory-item';\n \n itemElement.innerHTML = `\n <div class=\"item-image\">\n <img src=\"${item.image}\" alt=\"${item.name}\">\n </div>\n <div class=\"item-details\">\n <div class=\"item-name\">${item.name}</div>\n <div class=\"item-quantity\">\n <span>Quantity:</span>\n <input type=\"number\" value=\"${item.quantity}\" min=\"0\">\n </div>\n <div class=\"daily-usage\">\n <span>Daily Usage:</span>\n <input type=\"number\" value=\"${item.dailyUsage}\" min=\"0\">\n </div>\n <div class=\"expiry-days\">\n <span>Expiry Days:</span>\n ${Array.from({length: expiryDays}, (_, i) => `\n <span class=\"leaf-icon\" style=\"opacity: ${1 - (i / expiryDays)}\"></span>\n `).join('')}\n </div>\n </div>\n `;\n \n return itemElement;\n}\n\nfunction renderInventory() {\n const inventoryGrid = document.querySelector('.inventory-grid');\n inventoryGrid.innerHTML = '';\n \n inventoryData.forEach(item => {\n const itemElement = createInventoryItem(item);\n inventoryGrid.appendChild(itemElement);\n });\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n renderInventory();\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 353,
+ "completion_tokens": 1557,
+ "total_tokens": 1910,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 353
+ },
+ "system_fingerprint": "fp_3a5770e1b4"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..c9ef1bf
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# teatra1.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, making quantity editable, adding latest daily usage column and making it editable, adding expected expiry days (calculating by quantity divided by latest daily usage) and showing the number with leaf icon and number beside the picture and one leaf represets one day, no more than one day with just green color shaded proportional inside one leaf, showing actions with recommended reorder for low and out of stock
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ebb4837
--- /dev/null
+++ b/script.js
@@ -0,0 +1,74 @@
+// Sample inventory data
+const inventoryData = [
+ {
+ name: "Green Tea",
+ image: "images/green-tea.jpg",
+ quantity: 120,
+ dailyUsage: 15,
+ expiryDays: null
+ },
+ {
+ name: "Black Tea",
+ image: "images/black-tea.jpg",
+ quantity: 80,
+ dailyUsage: 10,
+ expiryDays: null
+ },
+ {
+ name: "Herbal Tea",
+ image: "images/herbal-tea.jpg",
+ quantity: 50,
+ dailyUsage: 8,
+ expiryDays: null
+ }
+];
+
+function calculateExpiryDays(item) {
+ return Math.floor(item.quantity / item.dailyUsage);
+}
+
+function createInventoryItem(item) {
+ const expiryDays = calculateExpiryDays(item);
+
+ const itemElement = document.createElement('div');
+ itemElement.className = 'inventory-item';
+
+ itemElement.innerHTML = `
+ <div class="item-image">
+ <img src="${item.image}" alt="${item.name}">
+ </div>
+ <div class="item-details">
+ <div class="item-name">${item.name}</div>
+ <div class="item-quantity">
+ <span>Quantity:</span>
+ <input type="number" value="${item.quantity}" min="0">
+ </div>
+ <div class="daily-usage">
+ <span>Daily Usage:</span>
+ <input type="number" value="${item.dailyUsage}" min="0">
+ </div>
+ <div class="expiry-days">
+ <span>Expiry Days:</span>
+ ${Array.from({length: expiryDays}, (_, i) => `
+ <span class="leaf-icon" style="opacity: ${1 - (i / expiryDays)}"></span>
+ `).join('')}
+ </div>
+ </div>
+ `;
+
+ return itemElement;
+}
+
+function renderInventory() {
+ const inventoryGrid = document.querySelector('.inventory-grid');
+ inventoryGrid.innerHTML = '';
+
+ inventoryData.forEach(item => {
+ const itemElement = createInventoryItem(item);
+ inventoryGrid.appendChild(itemElement);
+ });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ renderInventory();
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..74011e2
--- /dev/null
+++ b/style.css
@@ -0,0 +1,129 @@
+:root {
+ --primary: #4CAF50;
+ --secondary: #8BC34A;
+ --accent: #CDDC39;
+ --background: #F1F8E9;
+ --text: #1B5E20;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ margin: 0;
+ padding: 0;
+ background: var(--background);
+ color: var(--text);
+ line-height: 1.6;
+}
+
+header {
+ background: var(--primary);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+}
+
+h1 {
+ margin: 0;
+ font-size: 2.5rem;
+}
+
+nav {
+ margin-top: 1rem;
+}
+
+nav a {
+ color: white;
+ text-decoration: none;
+ margin: 0 1rem;
+ padding: 0.5rem;
+ border-radius: 4px;
+ transition: background 0.3s;
+}
+
+nav a:hover {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.stats-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+ padding: 2rem;
+}
+
+.stat-card {
+ background: white;
+ padding: 1.5rem;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ text-align: center;
+}
+
+.stat-value {
+ font-size: 2.5rem;
+ font-weight: bold;
+ color: var(--primary);
+}
+
+.stat-label {
+ color: var(--text);
+ opacity: 0.8;
+}
+
+.inventory-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 1.5rem;
+ padding: 2rem;
+}
+
+.inventory-item {
+ background: white;
+ border-radius: 8px;
+ padding: 1.5rem;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ display: grid;
+ grid-template-columns: 100px 1fr;
+ gap: 1rem;
+ align-items: center;
+}
+
+.item-image {
+ width: 100%;
+ border-radius: 4px;
+}
+
+.item-details {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.item-name {
+ font-size: 1.2rem;
+ font-weight: bold;
+}
+
+.item-quantity {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.leaf-icon {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ background: var(--secondary);
+ clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
+}
+
+@media (max-width: 768px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ .stats-grid {
+ grid-template-columns: 1fr;
+ }
+}
\ No newline at end of file