Last 10 Commits for millmonitor.scroll.pub

commit eff9136a6e6e7ca6b5cb6c51f77dcecdab579512 Author: root <root@hub.scroll.pub> Date: 2024-12-30 12:26:45 +0000 Subject: Initial commit diff --git a/.log.txt b/.log.txt new file mode 100644 index 0000000..80c8ba9 --- /dev/null +++ b/.log.txt @@ -0,0 +1 @@ +read millmonitor.scroll.pub https://hub.scroll.pub/edit.html?folderName=millmonitor.scroll.pub 1735561604491 ::ffff:200.69.130.9 0.0 200 Chrome.131 WindowsNT.10.0 diff --git a/.stats.json b/.stats.json new file mode 100644 index 0000000..4fe00a9 --- /dev/null +++ b/.stats.json @@ -0,0 +1,21 @@ +{ + "files": [ + "body.html", + "index.scroll", + "prompt.json", + "readme.scroll", + "script.js", + "style.css" + ], + "hasSslCert": false, + "stats": { + "folder": "millmonitor.scroll.pub", + "folderLink": "http://millmonitor.scroll.pub", + "created": "2024-12-30T12:26:42.000Z", + "revised": "2024-12-30T12:26:42.000Z", + "files": 6, + "mb": 1, + "revisions": 1, + "hash": "81c080b2e6" + } +} \ No newline at end of file diff --git a/body.html b/body.html index 7ea5f19..a8b2111 100644 --- a/body.html +++ b/body.html @@ -1,40 +1,53 @@ <header> - <h1>Mill Monitor</h1> - <p>Track and analyze interruptions in your mill operations</p> + <nav> + <div class="logo">Mill<span>Monitor</span></div> + <button class="mobile-menu" aria-label="Toggle menu"> + <span></span><span></span><span></span> + </button> + <ul class="nav-links"> + <li><a href="#dashboard">Dashboard</a></li> + <li><a href="#analytics">Analytics</a></li> + <li><a href="#settings">Settings</a></li> + </ul> + </nav> </header> <main> - <section id="filters"> - <h2>Filter Interruptions</h2> - <div class="filter-group"> - <label for="length-filter">Minimum Length (minutes):</label> - <input type="number" id="length-filter" min="0"> + <section class="filters"> + <h2>Interruption Filters</h2> + <div class="filter-controls"> + <div class="filter-group"> + <label for="duration">Minimum Duration (minutes):</label> + <input type="number" id="duration" min="0" value="0"> + </div> + <div class="filter-group"> + <label for="machine">Machine:</label> + <select id="machine"> + <option value="all">All Machines</option> + <option value="mill1">Mill 1</option> + <option value="mill2">Mill 2</option> + <option value="mill3">Mill 3</option> + </select> + </div> + <button id="apply-filters">Apply Filters</button> </div> - <div class="filter-group"> - <label for="machine-filter">Machine:</label> - <select id="machine-filter"> - <option value="">All Machines</option> -  - </select> - </div> - <button id="apply-filters">Apply Filters</button> </section> - <section id="interruptions"> - <h2>Interruptions</h2> + <section class="data-table"> + <h2>Interruption Log</h2> <div class="table-container"> <table> <thead> <tr> - <th>Start Time</th> - <th>End Time</th> - <th>Duration</th> + <th>Date</th> <th>Machine</th> - <th>Reason</th> + <th>Duration</th> + <th>Type</th> + <th>Description</th> </tr> </thead> - <tbody> -  + <tbody id="interruption-data"> +  </tbody> </table> </div> @@ -42,5 +55,10 @@ </main> <footer> - <p>Mill Monitor - Optimizing your mill operations</p> -</footer> \ No newline at end of file + <p>Mill Monitor - Powered by Advanced LLM Technology</p> + <nav> + <a href="#privacy">Privacy Policy</a> + <a href="#terms">Terms of Use</a> + <a href="#contact">Contact</a> + </nav> +</footer> diff --git a/index.html b/index.html new file mode 100644 index 0000000..7e550a6 --- /dev/null +++ b/index.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Mill Monitor - Track and Analyze Mill Interruptions</title> + <script>/* This HTML was generated by 📜 Scroll v164.11.0. https://scroll.pub */</script> + <style>@media print {.doNotPrint {display: none !important;}}</style> + <link rel="canonical" href="https://millmonitor.scroll.pub/index.html"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta name="description" content=""> + <meta name="generator" content="Scroll v164.11.0"> + <meta property="og:title" content="Mill Monitor - Track and Analyze Mill Interruptions"> + <meta property="og:description" content=""> + <meta property="og:image" content=""> + + <link rel="source" type="application/git" title="Source Code Repository" href="index.scroll"> + + <meta name="twitter:card" content="summary_large_image"> +</head> +<body> +<style>.abstractIconButtonParser {position:absolute;top:0.25rem; }.abstractIconButtonParser svg {fill: rgba(204,204,204,.8);width:1.875rem;height:1.875rem; padding: 0 7px;} .abstractIconButtonParser:hover svg{fill: #333;}</style><a href="/edit.html" class="doNotPrint abstractIconButtonParser" style="right:2rem;"><svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z"/></svg></a> +<link rel="stylesheet" type="text/css" href="style.css"> +<header> + <h1>Mill Monitor</h1> + <p>Track and analyze interruptions in your mill operations</p> +</header> + +<main> + <section id="filters"> + <h2>Filter Interruptions</h2> + <div class="filter-group"> + <label for="length-filter">Minimum Length (minutes):</label> + <input type="number" id="length-filter" min="0"> + </div> + <div class="filter-group"> + <label for="machine-filter">Machine:</label> + <select id="machine-filter"> + <option value="">All Machines</option> +  + </select> + </div> + <button id="apply-filters">Apply Filters</button> + </section> + + <section id="interruptions"> + <h2>Interruptions</h2> + <div class="table-container"> + <table> + <thead> + <tr> + <th>Start Time</th> + <th>End Time</th> + <th>Duration</th> + <th>Machine</th> + <th>Reason</th> + </tr> + </thead> + <tbody> +  + </tbody> + </table> + </div> + </section> +</main> + +<footer> + <p>Mill Monitor - Optimizing your mill operations</p> +</footer> +<script src="script.js"></script> +</body> +</html> \ No newline at end of file diff --git a/index.scroll b/index.scroll index 26009e8..f6bcd1d 100644 --- a/index.scroll +++ b/index.scroll @@ -1,8 +1,10 @@ buildHtml baseUrl https://millmonitor.scroll.pub metaTags + description "Real-time mill interruption monitoring and analysis powered by LLM" + keywords "mill monitoring, industrial analytics, LLM, machine learning" editButton /edit.html -title Mill Monitor - Track and Analyze Mill Interruptions +title Mill Monitor - Intelligent Interruption Analysis style.css body.html -script.js \ No newline at end of file +script.js diff --git a/prompt.json b/prompt.json index 5058824..ba609f7 100644 --- a/prompt.json +++ b/prompt.json @@ -1,25 +1,20 @@ { - "id": "4365ff31-29fb-4c93-9337-17349c631773", - "object": "chat.completion", - "created": 1735561578, - "model": "deepseek-chat", - "choices": [ + "id": "msg_01MiiTW1652cXdV3QZ7ht4sW", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ { - "index": 0, - "message": { - "role": "assistant", - "content": "---domain---\nmillmonitor.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://millmonitor.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Mill Monitor - Track and Analyze Mill Interruptions\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Mill Monitor</h1>\n <p>Track and analyze interruptions in your mill operations</p>\n</header>\n\n<main>\n <section id=\"filters\">\n <h2>Filter Interruptions</h2>\n <div class=\"filter-group\">\n <label for=\"length-filter\">Minimum Length (minutes):</label>\n <input type=\"number\" id=\"length-filter\" min=\"0\">\n </div>\n <div class=\"filter-group\">\n <label for=\"machine-filter\">Machine:</label>\n <select id=\"machine-filter\">\n <option value=\"\">All Machines</option>\n \n </select>\n </div>\n <button id=\"apply-filters\">Apply Filters</button>\n </section>\n\n <section id=\"interruptions\">\n <h2>Interruptions</h2>\n <div class=\"table-container\">\n <table>\n <thead>\n <tr>\n <th>Start Time</th>\n <th>End Time</th>\n <th>Duration</th>\n <th>Machine</th>\n <th>Reason</th>\n </tr>\n </thead>\n <tbody>\n \n </tbody>\n </table>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Mill Monitor - Optimizing your mill operations</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --background-color: #ecf0f1;\n --text-color: #2c3e50;\n --border-radius: 8px;\n --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 0;\n background-color: var(--background-color);\n color: var(--text-color);\n}\n\nheader {\n background-color: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nmain {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n#filters {\n background: white;\n padding: 1.5rem;\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n margin-bottom: 2rem;\n}\n\n.filter-group {\n margin-bottom: 1rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n}\n\ninput, select {\n width: 100%;\n padding: 0.5rem;\n border: 1px solid #ddd;\n border-radius: var(--border-radius);\n}\n\nbutton {\n background-color: var(--secondary-color);\n color: white;\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: var(--border-radius);\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: #2980b9;\n}\n\n.table-container {\n overflow-x: auto;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n background: white;\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n}\n\nth, td {\n padding: 1rem;\n text-align: left;\n border-bottom: 1px solid #ddd;\n}\n\nth {\n background-color: var(--primary-color);\n color: white;\n}\n\ntr:hover {\n background-color: #f5f5f5;\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 header {\n padding: 1rem;\n }\n\n main {\n padding: 0 0.5rem;\n }\n\n #filters {\n padding: 1rem;\n }\n\n th, td {\n padding: 0.75rem;\n }\n}\n---script.js---\n// Sample data (to be replaced with actual API calls)\nconst interruptions = [\n {\n startTime: '2023-10-01 08:00',\n endTime: '2023-10-01 08:30',\n duration: 30,\n machine: 'Mill A',\n reason: 'Maintenance'\n },\n {\n startTime: '2023-10-01 10:15',\n endTime: '2023-10-01 10:45',\n duration: 30,\n machine: 'Mill B',\n reason: 'Material Shortage'\n },\n {\n startTime: '2023-10-01 14:00',\n endTime: '2023-10-01 15:00',\n duration: 60,\n machine: 'Mill C',\n reason: 'Power Outage'\n }\n];\n\n// Get unique machines for filter\nconst machines = [...new Set(interruptions.map(i => i.machine))];\nconst machineFilter = document.getElementById('machine-filter');\nmachines.forEach(machine => {\n const option = document.createElement('option');\n option.value = machine;\n option.textContent = machine;\n machineFilter.appendChild(option);\n});\n\n// Function to render table\nfunction renderTable(data) {\n const tbody = document.querySelector('#interruptions tbody');\n tbody.innerHTML = '';\n \n data.forEach(interruption => {\n const row = document.createElement('tr');\n row.innerHTML = `\n <td>${interruption.startTime}</td>\n <td>${interruption.endTime}</td>\n <td>${interruption.duration} minutes</td>\n <td>${interruption.machine}</td>\n <td>${interruption.reason}</td>\n `;\n tbody.appendChild(row);\n });\n}\n\n// Initial render\nrenderTable(interruptions);\n\n// Filter functionality\ndocument.getElementById('apply-filters').addEventListener('click', () => {\n const minLength = parseInt(document.getElementById('length-filter').value) || 0;\n const selectedMachine = document.getElementById('machine-filter').value;\n \n const filteredData = interruptions.filter(interruption => {\n return interruption.duration >= minLength &&\n (selectedMachine === '' || interruption.machine === selectedMachine);\n });\n \n renderTable(filteredData);\n});\n---end---" - }, - "logprobs": null, - "finish_reason": "stop" + "type": "text", + "text": "Here's a complete website design for your LLM interruption monitoring application:\n\n---domain---\nmillmonitor.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://millmonitor.scroll.pub\nmetaTags\n description \"Real-time mill interruption monitoring and analysis powered by LLM\"\n keywords \"mill monitoring, industrial analytics, LLM, machine learning\"\neditButton /edit.html\ntitle Mill Monitor - Intelligent Interruption Analysis\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">Mill<span>Monitor</span></div>\n <button class=\"mobile-menu\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#dashboard\">Dashboard</a></li>\n <li><a href=\"#analytics\">Analytics</a></li>\n <li><a href=\"#settings\">Settings</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"filters\">\n <h2>Interruption Filters</h2>\n <div class=\"filter-controls\">\n <div class=\"filter-group\">\n <label for=\"duration\">Minimum Duration (minutes):</label>\n <input type=\"number\" id=\"duration\" min=\"0\" value=\"0\">\n </div>\n <div class=\"filter-group\">\n <label for=\"machine\">Machine:</label>\n <select id=\"machine\">\n <option value=\"all\">All Machines</option>\n <option value=\"mill1\">Mill 1</option>\n <option value=\"mill2\">Mill 2</option>\n <option value=\"mill3\">Mill 3</option>\n </select>\n </div>\n <button id=\"apply-filters\">Apply Filters</button>\n </div>\n </section>\n\n <section class=\"data-table\">\n <h2>Interruption Log</h2>\n <div class=\"table-container\">\n <table>\n <thead>\n <tr>\n <th>Date</th>\n <th>Machine</th>\n <th>Duration</th>\n <th>Type</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody id=\"interruption-data\">\n \n </tbody>\n </table>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Mill Monitor - Powered by Advanced LLM Technology</p>\n <nav>\n <a href=\"#privacy\">Privacy Policy</a>\n <a href=\"#terms\">Terms of Use</a>\n <a href=\"#contact\">Contact</a>\n </nav>\n</footer>\n\n---style.css---\n:root {\n --primary: #2c3e50;\n --secondary: #3498db;\n --accent: #e74c3c;\n --background: #f5f6fa;\n --text: #2c3e50;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text);\n background: var(--background);\n}\n\nheader {\n background: var(--primary);\n padding: 1rem;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: 700;\n color: white;\n}\n\n.logo span {\n color: var(--secondary);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n gap: 2rem;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--secondary);\n}\n\nmain {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.filters {\n background: white;\n padding: 1.5rem;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n margin-bottom: 2rem;\n}\n\n.filter-controls {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n margin-top: 1rem;\n}\n\n.filter-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\ninput, select {\n padding: 0.5rem;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 1rem;\n}\n\nbutton {\n background: var(--secondary);\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 4px;\n cursor: pointer;\n transition: background 0.3s;\n}\n\nbutton:hover {\n background: #2980b9;\n}\n\n.table-container {\n overflow-x: auto;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n}\n\nth, td {\n padding: 1rem;\n text-align: left;\n border-bottom: 1px solid #ddd;\n}\n\nth {\n background: var(--primary);\n color: white;\n}\n\ntr:hover {\n background: #f8f9fa;\n}\n\nfooter {\n background: var(--primary);\n color: white;\n padding: 2rem;\n margin-top: 4rem;\n text-align: center;\n}\n\nfooter nav {\n margin-top: 1rem;\n justify-content: center;\n gap: 2rem;\n}\n\nfooter a {\n color: white;\n text-decoration: none;\n}\n\n.mobile-menu {\n display: none;\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\n display: flex;\n flex-direction: column;\n gap: 4px;\n background: none;\n border: none;\n padding: 0.5rem;\n }\n\n .mobile-menu span {\n display: block;\n width: 25px;\n height: 3px;\n background: white;\n transition: 0.3s;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: var(--primary);\n flex-direction: column;\n padding: 1rem;\n }\n\n .nav-links.active {\n display: flex;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n \n mobileMenu?.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n });\n\n // Sample data - replace with actual API call\n const sampleData = [\n {\n date: '2023-11-01 08:30',\n machine: 'Mill 1',\n duration: 45,\n type: 'Mechanical',\n description: 'Bearing replacement required'\n },\n {\n date: '2023-11-01 12:15',\n machine: 'Mill 2',\n duration: 30,\n type: 'Electrical',\n description: 'Power fluctuation detected'\n },\n // Add more sample data as needed\n ];\n\n // Populate table with data\n function populateTable(data) {\n const tableBody = document.getElementById('interruption-data');\n tableBody.innerHTML = '';\n\n data.forEach(row => {\n const tr = document.createElement('tr');\n tr.innerHTML = `\n <td>${row.date}</td>\n <td>${row.machine}</td>\n <td>${row.duration} min</td>\n <td>${row.type}</td>\n <td>${row.description}</td>\n `;\n tableBody.appendChild(tr);\n });\n }\n\n // Filter functionality\n const applyFilters = document.getElementById('apply-filters');\n applyFilters?.addEventListener('click', () => {\n const duration = parseInt(document.getElementById('duration').value) || 0;\n const machine = document.getElementById('machine').value;\n\n const filteredData = sampleData.filter(row => {\n return (row.duration >= duration) && \n (machine === 'all' || row.machine.toLowerCase() === machine);\n });\n\n populateTable(filteredData);\n });\n\n // Initial table population\n populateTable(sampleData);\n});\n\n---end---\n\nThis design features:\n1. Clean, modern interface with a professional color scheme\n2. Responsive design that works on mobile and desktop\n3. Interactive filtering system for interruption data\n4. Accessible semantic HTML with proper ARIA labels\n5. Smooth animations and transitions\n6. Mobile-friendly navigation with hamburger menu\n7. Clear visual hierarchy and spacing\n8. Professional table design with hover effects\n9. Optimized performance with vanilla JavaScript\n10. SEO-friendly meta tags and structure\n\nThe domain name \"millmonitor\" is:\n- Short and memorable\n- Describes the purpose clearly\n- Easy to spell\n- Professional sounding\n- Available (hypothetically)" } ], + "stop_reason": "end_turn", + "stop_sequence": null, "usage": { - "prompt_tokens": 274, - "completion_tokens": 1502, - "total_tokens": 1776, - "prompt_cache_hit_tokens": 0, - "prompt_cache_miss_tokens": 274 - }, - "system_fingerprint": "fp_f1afce2943" + "input_tokens": 313, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2557 + } } \ No newline at end of file diff --git a/readme.scroll b/readme.scroll index f40f7da..e61f8c5 100644 --- a/readme.scroll +++ b/readme.scroll @@ -1,2 +1,2 @@ # millmonitor.scroll.pub -Website generated by DeepSeek from prompt: I need to create a website that hosts al LLM application developed in Python. The application will have a table with all the interruptions of a specific mill and filters to search specific interruptions by length and machine \ No newline at end of file +Website generated by Claude from prompt: I need to create a website that hosts al LLM application developed in Python. The application will have a table with all the interruptions of a specific mill and filters to search specific interruptions by length and machine \ No newline at end of file diff --git a/script.js b/script.js index 2606c92..e138727 100644 --- a/script.js +++ b/script.js @@ -1,68 +1,63 @@ -// Sample data (to be replaced with actual API calls) -const interruptions = [ - { - startTime: '2023-10-01 08:00', - endTime: '2023-10-01 08:30', - duration: 30, - machine: 'Mill A', - reason: 'Maintenance' - }, - { - startTime: '2023-10-01 10:15', - endTime: '2023-10-01 10:45', - duration: 30, - machine: 'Mill B', - reason: 'Material Shortage' - }, - { - startTime: '2023-10-01 14:00', - endTime: '2023-10-01 15:00', - duration: 60, - machine: 'Mill C', - reason: 'Power Outage' - } -]; - -// Get unique machines for filter -const machines = [...new Set(interruptions.map(i => i.machine))]; -const machineFilter = document.getElementById('machine-filter'); -machines.forEach(machine => { - const option = document.createElement('option'); - option.value = machine; - option.textContent = machine; - machineFilter.appendChild(option); -}); - -// Function to render table -function renderTable(data) { - const tbody = document.querySelector('#interruptions tbody'); - tbody.innerHTML = ''; +document.addEventListener('DOMContentLoaded', () => { + // Mobile menu toggle + const mobileMenu = document.querySelector('.mobile-menu'); + const navLinks = document.querySelector('.nav-links'); - data.forEach(interruption => { - const row = document.createElement('tr'); - row.innerHTML = ` - <td>${interruption.startTime}</td> - <td>${interruption.endTime}</td> - <td>${interruption.duration} minutes</td> - <td>${interruption.machine}</td> - <td>${interruption.reason}</td> - `; - tbody.appendChild(row); + mobileMenu?.addEventListener('click', () => { + navLinks.classList.toggle('active'); }); -} -// Initial render -renderTable(interruptions); + // Sample data - replace with actual API call + const sampleData = [ + { + date: '2023-11-01 08:30', + machine: 'Mill 1', + duration: 45, + type: 'Mechanical', + description: 'Bearing replacement required' + }, + { + date: '2023-11-01 12:15', + machine: 'Mill 2', + duration: 30, + type: 'Electrical', + description: 'Power fluctuation detected' + }, + // Add more sample data as needed + ]; -// Filter functionality -document.getElementById('apply-filters').addEventListener('click', () => { - const minLength = parseInt(document.getElementById('length-filter').value) || 0; - const selectedMachine = document.getElementById('machine-filter').value; - - const filteredData = interruptions.filter(interruption => { - return interruption.duration >= minLength && - (selectedMachine === '' || interruption.machine === selectedMachine); + // Populate table with data + function populateTable(data) { + const tableBody = document.getElementById('interruption-data'); + tableBody.innerHTML = ''; + + data.forEach(row => { + const tr = document.createElement('tr'); + tr.innerHTML = ` + <td>${row.date}</td> + <td>${row.machine}</td> + <td>${row.duration} min</td> + <td>${row.type}</td> + <td>${row.description}</td> + `; + tableBody.appendChild(tr); + }); + } + + // Filter functionality + const applyFilters = document.getElementById('apply-filters'); + applyFilters?.addEventListener('click', () => { + const duration = parseInt(document.getElementById('duration').value) || 0; + const machine = document.getElementById('machine').value; + + const filteredData = sampleData.filter(row => { + return (row.duration >= duration) && + (machine === 'all' || row.machine.toLowerCase() === machine); + }); + + populateTable(filteredData); }); - - renderTable(filteredData); -}); \ No newline at end of file + + // Initial table population + populateTable(sampleData); +}); diff --git a/style.css b/style.css index 392d3e8..30af16d 100644 --- a/style.css +++ b/style.css @@ -1,26 +1,62 @@ :root { - --primary-color: #2c3e50; - --secondary-color: #3498db; - --background-color: #ecf0f1; - --text-color: #2c3e50; - --border-radius: 8px; - --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + --primary: #2c3e50; + --secondary: #3498db; + --accent: #e74c3c; + --background: #f5f6fa; + --text: #2c3e50; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; } body { font-family: 'Segoe UI', system-ui, sans-serif; line-height: 1.6; - margin: 0; - padding: 0; - background-color: var(--background-color); - color: var(--text-color); + color: var(--text); + background: var(--background); } header { - background-color: var(--primary-color); + background: var(--primary); + padding: 1rem; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +.logo { + font-size: 1.5rem; + font-weight: 700; color: white; - padding: 2rem; - text-align: center; +} + +.logo span { + color: var(--secondary); +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; +} + +.nav-links { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-links a { + color: white; + text-decoration: none; + transition: color 0.3s; +} + +.nav-links a:hover { + color: var(--secondary); } main { @@ -29,54 +65,58 @@ main { padding: 0 1rem; } -#filters { +.filters { background: white; padding: 1.5rem; - border-radius: var(--border-radius); - box-shadow: var(--box-shadow); + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; } -.filter-group { - margin-bottom: 1rem; +.filter-controls { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1rem; + margin-top: 1rem; } -label { - display: block; - margin-bottom: 0.5rem; +.filter-group { + display: flex; + flex-direction: column; + gap: 0.5rem; } input, select { - width: 100%; padding: 0.5rem; border: 1px solid #ddd; - border-radius: var(--border-radius); + border-radius: 4px; + font-size: 1rem; } button { - background-color: var(--secondary-color); + background: var(--secondary); color: white; - padding: 0.75rem 1.5rem; border: none; - border-radius: var(--border-radius); + padding: 0.5rem 1rem; + border-radius: 4px; cursor: pointer; - transition: background-color 0.3s ease; + transition: background 0.3s; } button:hover { - background-color: #2980b9; + background: #2980b9; } .table-container { overflow-x: auto; + background: white; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); } table { width: 100%; border-collapse: collapse; - background: white; - border-radius: var(--border-radius); - box-shadow: var(--box-shadow); } th, td { @@ -86,36 +126,67 @@ th, td { } th { - background-color: var(--primary-color); + background: var(--primary); color: white; } tr:hover { - background-color: #f5f5f5; + background: #f8f9fa; } footer { + background: var(--primary); + color: white; + padding: 2rem; + margin-top: 4rem; text-align: center; - padding: 1rem; - background-color: var(--primary-color); +} + +footer nav { + margin-top: 1rem; + justify-content: center; + gap: 2rem; +} + +footer a { color: white; - margin-top: 2rem; + text-decoration: none; +} + +.mobile-menu { + display: none; } @media (max-width: 768px) { - header { - padding: 1rem; + .mobile-menu { + display: flex; + flex-direction: column; + gap: 4px; + background: none; + border: none; + padding: 0.5rem; } - main { - padding: 0 0.5rem; + .mobile-menu span { + display: block; + width: 25px; + height: 3px; + background: white; + transition: 0.3s; } - #filters { + .nav-links { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--primary); + flex-direction: column; padding: 1rem; } - th, td { - padding: 0.75rem; + .nav-links.active { + display: flex; } -} \ No newline at end of file +}

commit 81c080b2e65c77903bc7fefae4239300373a5b22 Author: root <root@hub.scroll.pub> Date: 2024-12-30 12:26:42 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..7ea5f19 --- /dev/null +++ b/body.html @@ -0,0 +1,46 @@ +<header> + <h1>Mill Monitor</h1> + <p>Track and analyze interruptions in your mill operations</p> +</header> + +<main> + <section id="filters"> + <h2>Filter Interruptions</h2> + <div class="filter-group"> + <label for="length-filter">Minimum Length (minutes):</label> + <input type="number" id="length-filter" min="0"> + </div> + <div class="filter-group"> + <label for="machine-filter">Machine:</label> + <select id="machine-filter"> + <option value="">All Machines</option> +  + </select> + </div> + <button id="apply-filters">Apply Filters</button> + </section> + + <section id="interruptions"> + <h2>Interruptions</h2> + <div class="table-container"> + <table> + <thead> + <tr> + <th>Start Time</th> + <th>End Time</th> + <th>Duration</th> + <th>Machine</th> + <th>Reason</th> + </tr> + </thead> + <tbody> +  + </tbody> + </table> + </div> + </section> +</main> + +<footer> + <p>Mill Monitor - Optimizing your mill operations</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..26009e8 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://millmonitor.scroll.pub +metaTags +editButton /edit.html +title Mill Monitor - Track and Analyze Mill Interruptions +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..5058824 --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "4365ff31-29fb-4c93-9337-17349c631773", + "object": "chat.completion", + "created": 1735561578, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\nmillmonitor.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://millmonitor.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Mill Monitor - Track and Analyze Mill Interruptions\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Mill Monitor</h1>\n <p>Track and analyze interruptions in your mill operations</p>\n</header>\n\n<main>\n <section id=\"filters\">\n <h2>Filter Interruptions</h2>\n <div class=\"filter-group\">\n <label for=\"length-filter\">Minimum Length (minutes):</label>\n <input type=\"number\" id=\"length-filter\" min=\"0\">\n </div>\n <div class=\"filter-group\">\n <label for=\"machine-filter\">Machine:</label>\n <select id=\"machine-filter\">\n <option value=\"\">All Machines</option>\n \n </select>\n </div>\n <button id=\"apply-filters\">Apply Filters</button>\n </section>\n\n <section id=\"interruptions\">\n <h2>Interruptions</h2>\n <div class=\"table-container\">\n <table>\n <thead>\n <tr>\n <th>Start Time</th>\n <th>End Time</th>\n <th>Duration</th>\n <th>Machine</th>\n <th>Reason</th>\n </tr>\n </thead>\n <tbody>\n \n </tbody>\n </table>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Mill Monitor - Optimizing your mill operations</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --background-color: #ecf0f1;\n --text-color: #2c3e50;\n --border-radius: 8px;\n --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 0;\n background-color: var(--background-color);\n color: var(--text-color);\n}\n\nheader {\n background-color: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nmain {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n#filters {\n background: white;\n padding: 1.5rem;\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n margin-bottom: 2rem;\n}\n\n.filter-group {\n margin-bottom: 1rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n}\n\ninput, select {\n width: 100%;\n padding: 0.5rem;\n border: 1px solid #ddd;\n border-radius: var(--border-radius);\n}\n\nbutton {\n background-color: var(--secondary-color);\n color: white;\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: var(--border-radius);\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: #2980b9;\n}\n\n.table-container {\n overflow-x: auto;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n background: white;\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n}\n\nth, td {\n padding: 1rem;\n text-align: left;\n border-bottom: 1px solid #ddd;\n}\n\nth {\n background-color: var(--primary-color);\n color: white;\n}\n\ntr:hover {\n background-color: #f5f5f5;\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 header {\n padding: 1rem;\n }\n\n main {\n padding: 0 0.5rem;\n }\n\n #filters {\n padding: 1rem;\n }\n\n th, td {\n padding: 0.75rem;\n }\n}\n---script.js---\n// Sample data (to be replaced with actual API calls)\nconst interruptions = [\n {\n startTime: '2023-10-01 08:00',\n endTime: '2023-10-01 08:30',\n duration: 30,\n machine: 'Mill A',\n reason: 'Maintenance'\n },\n {\n startTime: '2023-10-01 10:15',\n endTime: '2023-10-01 10:45',\n duration: 30,\n machine: 'Mill B',\n reason: 'Material Shortage'\n },\n {\n startTime: '2023-10-01 14:00',\n endTime: '2023-10-01 15:00',\n duration: 60,\n machine: 'Mill C',\n reason: 'Power Outage'\n }\n];\n\n// Get unique machines for filter\nconst machines = [...new Set(interruptions.map(i => i.machine))];\nconst machineFilter = document.getElementById('machine-filter');\nmachines.forEach(machine => {\n const option = document.createElement('option');\n option.value = machine;\n option.textContent = machine;\n machineFilter.appendChild(option);\n});\n\n// Function to render table\nfunction renderTable(data) {\n const tbody = document.querySelector('#interruptions tbody');\n tbody.innerHTML = '';\n \n data.forEach(interruption => {\n const row = document.createElement('tr');\n row.innerHTML = `\n <td>${interruption.startTime}</td>\n <td>${interruption.endTime}</td>\n <td>${interruption.duration} minutes</td>\n <td>${interruption.machine}</td>\n <td>${interruption.reason}</td>\n `;\n tbody.appendChild(row);\n });\n}\n\n// Initial render\nrenderTable(interruptions);\n\n// Filter functionality\ndocument.getElementById('apply-filters').addEventListener('click', () => {\n const minLength = parseInt(document.getElementById('length-filter').value) || 0;\n const selectedMachine = document.getElementById('machine-filter').value;\n \n const filteredData = interruptions.filter(interruption => {\n return interruption.duration >= minLength &&\n (selectedMachine === '' || interruption.machine === selectedMachine);\n });\n \n renderTable(filteredData);\n});\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 274, + "completion_tokens": 1502, + "total_tokens": 1776, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 274 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..f40f7da --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# millmonitor.scroll.pub +Website generated by DeepSeek from prompt: I need to create a website that hosts al LLM application developed in Python. The application will have a table with all the interruptions of a specific mill and filters to search specific interruptions by length and machine \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..2606c92 --- /dev/null +++ b/script.js @@ -0,0 +1,68 @@ +// Sample data (to be replaced with actual API calls) +const interruptions = [ + { + startTime: '2023-10-01 08:00', + endTime: '2023-10-01 08:30', + duration: 30, + machine: 'Mill A', + reason: 'Maintenance' + }, + { + startTime: '2023-10-01 10:15', + endTime: '2023-10-01 10:45', + duration: 30, + machine: 'Mill B', + reason: 'Material Shortage' + }, + { + startTime: '2023-10-01 14:00', + endTime: '2023-10-01 15:00', + duration: 60, + machine: 'Mill C', + reason: 'Power Outage' + } +]; + +// Get unique machines for filter +const machines = [...new Set(interruptions.map(i => i.machine))]; +const machineFilter = document.getElementById('machine-filter'); +machines.forEach(machine => { + const option = document.createElement('option'); + option.value = machine; + option.textContent = machine; + machineFilter.appendChild(option); +}); + +// Function to render table +function renderTable(data) { + const tbody = document.querySelector('#interruptions tbody'); + tbody.innerHTML = ''; + + data.forEach(interruption => { + const row = document.createElement('tr'); + row.innerHTML = ` + <td>${interruption.startTime}</td> + <td>${interruption.endTime}</td> + <td>${interruption.duration} minutes</td> + <td>${interruption.machine}</td> + <td>${interruption.reason}</td> + `; + tbody.appendChild(row); + }); +} + +// Initial render +renderTable(interruptions); + +// Filter functionality +document.getElementById('apply-filters').addEventListener('click', () => { + const minLength = parseInt(document.getElementById('length-filter').value) || 0; + const selectedMachine = document.getElementById('machine-filter').value; + + const filteredData = interruptions.filter(interruption => { + return interruption.duration >= minLength && + (selectedMachine === '' || interruption.machine === selectedMachine); + }); + + renderTable(filteredData); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..392d3e8 --- /dev/null +++ b/style.css @@ -0,0 +1,121 @@ +:root { + --primary-color: #2c3e50; + --secondary-color: #3498db; + --background-color: #ecf0f1; + --text-color: #2c3e50; + --border-radius: 8px; + --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + line-height: 1.6; + margin: 0; + padding: 0; + background-color: var(--background-color); + color: var(--text-color); +} + +header { + background-color: var(--primary-color); + color: white; + padding: 2rem; + text-align: center; +} + +main { + max-width: 1200px; + margin: 2rem auto; + padding: 0 1rem; +} + +#filters { + background: white; + padding: 1.5rem; + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); + margin-bottom: 2rem; +} + +.filter-group { + margin-bottom: 1rem; +} + +label { + display: block; + margin-bottom: 0.5rem; +} + +input, select { + width: 100%; + padding: 0.5rem; + border: 1px solid #ddd; + border-radius: var(--border-radius); +} + +button { + background-color: var(--secondary-color); + color: white; + padding: 0.75rem 1.5rem; + border: none; + border-radius: var(--border-radius); + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #2980b9; +} + +.table-container { + overflow-x: auto; +} + +table { + width: 100%; + border-collapse: collapse; + background: white; + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); +} + +th, td { + padding: 1rem; + text-align: left; + border-bottom: 1px solid #ddd; +} + +th { + background-color: var(--primary-color); + color: white; +} + +tr:hover { + background-color: #f5f5f5; +} + +footer { + text-align: center; + padding: 1rem; + background-color: var(--primary-color); + color: white; + margin-top: 2rem; +} + +@media (max-width: 768px) { + header { + padding: 1rem; + } + + main { + padding: 0 0.5rem; + } + + #filters { + padding: 1rem; + } + + th, td { + padding: 0.75rem; + } +} \ No newline at end of file