Last 10 Commits for teatra.scroll.pub

commit 92ac58e143c076db5f26e7885b826d88bcd54ad5 Author: root <root@hub.scroll.pub> Date: 2025-01-13 13:58:10 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..313d1b2 --- /dev/null +++ b/body.html @@ -0,0 +1,54 @@ +<header> + <h1>Teatra Inventory Management</h1> + <p>Frankfurt am Main's Premier Tea Drink Store</p> +</header> + +<main> + <section id="dashboard"> + <h2>Inventory Dashboard</h2> + <div class="inventory-summary"> + <div class="summary-card"> + <h3>Total Items</h3> + <p id="total-items">0</p> + </div> + <div class="summary-card"> + <h3>Low Stock</h3> + <p id="low-stock">0</p> + </div> + <div class="summary-card"> + <h3>Out of Stock</h3> + <p id="out-of-stock">0</p> + </div> + </div> + </section> + + <section id="inventory-details"> + <h2>Inventory Details</h2> + <div class="search-filter"> + <input type="text" id="search" placeholder="Search items..."> + <select id="filter"> + <option value="all">All Items</option> + <option value="low">Low Stock</option> + <option value="out">Out of Stock</option> + </select> + </div> + <table id="inventory-table"> + <thead> + <tr> + <th>Item Name</th> + <th>Category</th> + <th>Quantity</th> + <th>Status</th> + <th>Actions</th> + </tr> + </thead> + <tbody> +  + </tbody> + </table> + </section> +</main> + +<footer> + <p>Teatra Inventory System</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..2d02abd --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "b9a8a2d2-2734-4d2d-ab14-8c0fe6e99dd7", + "object": "chat.completion", + "created": 1736776651, + "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 Management</h1>\n <p>Frankfurt am Main's Premier Tea Drink Store</p>\n</header>\n\n<main>\n <section id=\"dashboard\">\n <h2>Inventory Dashboard</h2>\n <div class=\"inventory-summary\">\n <div class=\"summary-card\">\n <h3>Total Items</h3>\n <p id=\"total-items\">0</p>\n </div>\n <div class=\"summary-card\">\n <h3>Low Stock</h3>\n <p id=\"low-stock\">0</p>\n </div>\n <div class=\"summary-card\">\n <h3>Out of Stock</h3>\n <p id=\"out-of-stock\">0</p>\n </div>\n </div>\n </section>\n\n <section id=\"inventory-details\">\n <h2>Inventory Details</h2>\n <div class=\"search-filter\">\n <input type=\"text\" id=\"search\" placeholder=\"Search items...\">\n <select id=\"filter\">\n <option value=\"all\">All Items</option>\n <option value=\"low\">Low Stock</option>\n <option value=\"out\">Out of Stock</option>\n </select>\n </div>\n <table id=\"inventory-table\">\n <thead>\n <tr>\n <th>Item Name</th>\n <th>Category</th>\n <th>Quantity</th>\n <th>Status</th>\n <th>Actions</th>\n </tr>\n </thead>\n <tbody>\n \n </tbody>\n </table>\n </section>\n</main>\n\n<footer>\n <p>Teatra Inventory System</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 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-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\nmain {\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.inventory-summary {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n margin-bottom: 2rem;\n}\n\n.summary-card {\n background: white;\n padding: 1.5rem;\n border-radius: 8px;\n box-shadow: var(--card-shadow);\n text-align: center;\n}\n\n.summary-card h3 {\n margin-top: 0;\n color: var(--primary-color);\n}\n\n.summary-card p {\n font-size: 2rem;\n margin: 0.5rem 0;\n font-weight: bold;\n}\n\n#inventory-table {\n width: 100%;\n border-collapse: collapse;\n background: white;\n box-shadow: var(--card-shadow);\n border-radius: 8px;\n overflow: hidden;\n}\n\n#inventory-table th,\n#inventory-table td {\n padding: 1rem;\n text-align: left;\n}\n\n#inventory-table th {\n background-color: var(--primary-color);\n color: white;\n}\n\n#inventory-table tr:nth-child(even) {\n background-color: var(--background-color);\n}\n\n#inventory-table tr:hover {\n background-color: #e0e0e0;\n}\n\n.search-filter {\n display: flex;\n gap: 1rem;\n margin-bottom: 1rem;\n}\n\n#search,\n#filter {\n padding: 0.5rem;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 1rem;\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 .inventory-summary {\n grid-template-columns: 1fr;\n }\n\n #inventory-table {\n display: block;\n overflow-x: auto;\n }\n}\n---script.js---\n// Sample inventory data\nlet inventory = [\n { name: \"Green Tea\", category: \"Tea\", quantity: 50, status: \"In Stock\" },\n { name: \"Black Tea\", category: \"Tea\", quantity: 20, status: \"Low Stock\" },\n { name: \"Herbal Tea\", category: \"Tea\", quantity: 0, status: \"Out of Stock\" },\n { name: \"Matcha\", category: \"Powder\", quantity: 30, status: \"In Stock\" },\n { name: \"Chai\", category: \"Tea\", quantity: 10, status: \"Low Stock\" }\n];\n\n// DOM Elements\nconst totalItemsEl = document.getElementById('total-items');\nconst lowStockEl = document.getElementById('low-stock');\nconst outOfStockEl = document.getElementById('out-of-stock');\nconst inventoryTableBody = document.querySelector('#inventory-table tbody');\nconst searchInput = document.getElementById('search');\nconst filterSelect = document.getElementById('filter');\n\n// Update summary cards\nfunction updateSummary() {\n const total = inventory.length;\n const low = inventory.filter(item => item.status === 'Low Stock').length;\n const out = inventory.filter(item => item.status === 'Out of Stock').length;\n\n totalItemsEl.textContent = total;\n lowStockEl.textContent = low;\n outOfStockEl.textContent = out;\n}\n\n// Render inventory table\nfunction renderTable(data) {\n inventoryTableBody.innerHTML = '';\n data.forEach(item => {\n const row = document.createElement('tr');\n row.innerHTML = `\n <td>${item.name}</td>\n <td>${item.category}</td>\n <td>${item.quantity}</td>\n <td>${item.status}</td>\n <td>\n <button onclick=\"editItem('${item.name}')\">Edit</button>\n <button onclick=\"deleteItem('${item.name}')\">Delete</button>\n </td>\n `;\n inventoryTableBody.appendChild(row);\n });\n}\n\n// Filter and search functionality\nfunction filterInventory() {\n const searchTerm = searchInput.value.toLowerCase();\n const filterValue = filterSelect.value;\n\n let filtered = inventory.filter(item => \n item.name.toLowerCase().includes(searchTerm)\n );\n\n if (filterValue !== 'all') {\n filtered = filtered.filter(item => \n filterValue === 'low' ? item.status === 'Low Stock' : item.status === 'Out of Stock'\n );\n }\n\n renderTable(filtered);\n}\n\n// Initial setup\nfunction init() {\n updateSummary();\n renderTable(inventory);\n \n // Event listeners\n searchInput.addEventListener('input', filterInventory);\n filterSelect.addEventListener('change', filterInventory);\n}\n\n// Initialize the app\ninit();\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 275, + "completion_tokens": 1682, + "total_tokens": 1957, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 275 + }, + "system_fingerprint": "fp_3a5770e1b4" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..861ffa7 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,3 @@ +# teatra.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 \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..6c9d90b --- /dev/null +++ b/script.js @@ -0,0 +1,77 @@ +// Sample inventory data +let inventory = [ + { name: "Green Tea", category: "Tea", quantity: 50, status: "In Stock" }, + { name: "Black Tea", category: "Tea", quantity: 20, status: "Low Stock" }, + { name: "Herbal Tea", category: "Tea", quantity: 0, status: "Out of Stock" }, + { name: "Matcha", category: "Powder", quantity: 30, status: "In Stock" }, + { name: "Chai", category: "Tea", quantity: 10, status: "Low Stock" } +]; + +// DOM Elements +const totalItemsEl = document.getElementById('total-items'); +const lowStockEl = document.getElementById('low-stock'); +const outOfStockEl = document.getElementById('out-of-stock'); +const inventoryTableBody = document.querySelector('#inventory-table tbody'); +const searchInput = document.getElementById('search'); +const filterSelect = document.getElementById('filter'); + +// Update summary cards +function updateSummary() { + const total = inventory.length; + const low = inventory.filter(item => item.status === 'Low Stock').length; + const out = inventory.filter(item => item.status === 'Out of Stock').length; + + totalItemsEl.textContent = total; + lowStockEl.textContent = low; + outOfStockEl.textContent = out; +} + +// Render inventory table +function renderTable(data) { + inventoryTableBody.innerHTML = ''; + data.forEach(item => { + const row = document.createElement('tr'); + row.innerHTML = ` + <td>${item.name}</td> + <td>${item.category}</td> + <td>${item.quantity}</td> + <td>${item.status}</td> + <td> + <button onclick="editItem('${item.name}')">Edit</button> + <button onclick="deleteItem('${item.name}')">Delete</button> + </td> + `; + inventoryTableBody.appendChild(row); + }); +} + +// Filter and search functionality +function filterInventory() { + const searchTerm = searchInput.value.toLowerCase(); + const filterValue = filterSelect.value; + + let filtered = inventory.filter(item => + item.name.toLowerCase().includes(searchTerm) + ); + + if (filterValue !== 'all') { + filtered = filtered.filter(item => + filterValue === 'low' ? item.status === 'Low Stock' : item.status === 'Out of Stock' + ); + } + + renderTable(filtered); +} + +// Initial setup +function init() { + updateSummary(); + renderTable(inventory); + + // Event listeners + searchInput.addEventListener('input', filterInventory); + filterSelect.addEventListener('change', filterInventory); +} + +// Initialize the app +init(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..5bf8311 --- /dev/null +++ b/style.css @@ -0,0 +1,121 @@ +:root { + --primary-color: #4CAF50; + --secondary-color: #FFC107; + --background-color: #F5F5F5; + --text-color: #333; + --card-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-color: var(--primary-color); + color: white; + padding: 2rem; + text-align: center; +} + +h1 { + margin: 0; + font-size: 2.5rem; +} + +main { + padding: 2rem; + max-width: 1200px; + margin: 0 auto; +} + +.inventory-summary { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1rem; + margin-bottom: 2rem; +} + +.summary-card { + background: white; + padding: 1.5rem; + border-radius: 8px; + box-shadow: var(--card-shadow); + text-align: center; +} + +.summary-card h3 { + margin-top: 0; + color: var(--primary-color); +} + +.summary-card p { + font-size: 2rem; + margin: 0.5rem 0; + font-weight: bold; +} + +#inventory-table { + width: 100%; + border-collapse: collapse; + background: white; + box-shadow: var(--card-shadow); + border-radius: 8px; + overflow: hidden; +} + +#inventory-table th, +#inventory-table td { + padding: 1rem; + text-align: left; +} + +#inventory-table th { + background-color: var(--primary-color); + color: white; +} + +#inventory-table tr:nth-child(even) { + background-color: var(--background-color); +} + +#inventory-table tr:hover { + background-color: #e0e0e0; +} + +.search-filter { + display: flex; + gap: 1rem; + margin-bottom: 1rem; +} + +#search, +#filter { + padding: 0.5rem; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 1rem; +} + +footer { + text-align: center; + padding: 1rem; + background-color: var(--primary-color); + color: white; + margin-top: 2rem; +} + +@media (max-width: 768px) { + .inventory-summary { + grid-template-columns: 1fr; + } + + #inventory-table { + display: block; + overflow-x: auto; + } +} \ No newline at end of file