Inventory Overview
\n\n
\n \n 42\n Total Items\n
\n \n 8\n Low Stock\n
\n \n 3\n Out of Stock\n
\n Inventory Details
\n\n \n
\n 
body.html
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://teatra.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Teatra - Dynamic Tea Inventory Management
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "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\n \n\n\n \n \n\n \n \n \n\n\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
Teatra Inventory Dashboard
\n \n\n ![\"${item.name}\"](\"${item.image}\")
\n
\n \n
\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---"${item.name}
\n \n Quantity:\n \n
\n \n Daily Usage:\n \n
\n \n Expiry Days:\n ${Array.from({length: expiryDays}, (_, i) => `\n \n `).join('')}\n
\n + },
+ "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"
+ }
readme.scroll
Changed around line 1
+ # 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
script.js
Changed around line 1
+ // 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 = `
+
+ 
+
+
+
${item.name}
+
+ Quantity:
+
+
+
+ Daily Usage:
+
+
+
+ Expiry Days:
+ ${Array.from({length: expiryDays}, (_, i) => `
+
+ `).join('')}
+
+
+ `;
+
+ 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();
+ });
style.css
Changed around line 1
+ :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;
+ }
+ }