commit edc73757fbad05aa56445fa013ede7778f4c05ab

Author: root <root@hub.scroll.pub> Date: 2024-12-30 12:29:18 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..416723e --- /dev/null +++ b/body.html @@ -0,0 +1,62 @@ +<header> + <nav> + <div class="logo">MillWatch</div> + <button class="menu-toggle" aria-label="Toggle menu">≡</button> + <ul class="nav-links"> + <li><a href="#dashboard" class="active">Dashboard</a></li> + <li><a href="#analytics">Analytics</a></li> + <li><a href="#settings">Settings</a></li> + </ul> + </nav> +</header> + +<main> + <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 Machines</option> + <option value="mill-01">Mill 01</option> + <option value="mill-02">Mill 02</option> + <option value="mill-03">Mill 03</option> + </select> + </div> + <button id="apply-filters">Apply Filters</button> + </div> + </section> + + <section class="data-table"> + <h2>Mill Interruptions</h2> + <div class="table-container"> + <table> + <thead> + <tr> + <th>Date</th> + <th>Machine</th> + <th>Duration</th> + <th>Type</th> + <th>Description</th> + </tr> + </thead> + <tbody id="interruptions-data"> + <!-- Data will be populated by JavaScript --> + </tbody> + </table> + </div> + </section> +</main> + +<footer> + <p>MillWatch - Industrial Interruption Tracking System</p> + <nav> + <a href="#privacy">Privacy Policy</a> + <a href="#terms">Terms of Use</a> + <a href="#contact">Contact</a> + </nav> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..9852cd5 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://millwatch.scroll.pub +metaTags +editButton /edit.html +title MillWatch - Industrial Interruption Tracking +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..fa129ac --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_017QGZfG1KQrYGe4nHySoFYb", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll help create a website for your LLM-based mill interruption tracking system.\n\nSuggested domain: millwatch.scroll.pub (short, memorable, and descriptive of the application's purpose)\n\n---domain---\nmillwatch.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://millwatch.scroll.pub\nmetaTags\neditButton /edit.html\ntitle MillWatch - Industrial Interruption Tracking\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">MillWatch</div>\n <button class=\"menu-toggle\" aria-label=\"Toggle menu\">≡</button>\n <ul class=\"nav-links\">\n <li><a href=\"#dashboard\" class=\"active\">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 Machines</option>\n <option value=\"mill-01\">Mill 01</option>\n <option value=\"mill-02\">Mill 02</option>\n <option value=\"mill-03\">Mill 03</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>Mill Interruptions</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=\"interruptions-data\">\n <!-- Data will be populated by JavaScript -->\n </tbody>\n </table>\n </div>\n </section>\n</main>\n\n<footer>\n <p>MillWatch - Industrial Interruption Tracking System</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---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --accent-color: #e74c3c;\n --background-color: #f5f6fa;\n --text-color: #2c3e50;\n --border-radius: 8px;\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-color);\n background: var(--background-color);\n}\n\nheader {\n background: var(--primary-color);\n color: white;\n padding: 1rem;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n background: linear-gradient(45deg, #3498db, #2ecc71);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n padding: 0.5rem;\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 padding: 0.5rem;\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--secondary-color);\n}\n\n.menu-toggle {\n display: none;\n background: none;\n border: none;\n color: white;\n font-size: 1.5rem;\n cursor: pointer;\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 margin-bottom: 2rem;\n box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n}\n\n.filter-controls {\n display: flex;\n gap: 1rem;\n flex-wrap: wrap;\n align-items: flex-end;\n}\n\n.filter-group {\n flex: 1;\n min-width: 200px;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n color: var(--primary-color);\n}\n\ninput, select {\n width: 100%;\n padding: 0.5rem;\n border: 1px solid #ddd;\n border-radius: var(--border-radius);\n font-size: 1rem;\n}\n\nbutton {\n background: var(--secondary-color);\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: var(--border-radius);\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\nbutton:hover {\n background: #2980b9;\n}\n\n.table-container {\n background: white;\n border-radius: var(--border-radius);\n overflow-x: auto;\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-color);\n color: white;\n}\n\ntr:hover {\n background: #f8f9fa;\n}\n\nfooter {\n background: var(--primary-color);\n color: white;\n padding: 2rem;\n margin-top: 2rem;\n text-align: center;\n}\n\nfooter nav {\n margin-top: 1rem;\n}\n\nfooter a {\n color: white;\n text-decoration: none;\n margin: 0 1rem;\n}\n\n@media (max-width: 768px) {\n .menu-toggle {\n display: block;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: var(--primary-color);\n flex-direction: column;\n padding: 1rem;\n gap: 1rem;\n }\n\n .nav-links.active {\n display: flex;\n }\n\n .filter-group {\n min-width: 100%;\n }\n}\n---script.js---\n// Mock data for demonstration\nconst mockInterruptions = [\n {\n date: '2023-11-01',\n machine: 'Mill 01',\n duration: 45,\n type: 'Mechanical',\n description: 'Bearing failure'\n },\n {\n date: '2023-11-02',\n machine: 'Mill 02',\n duration: 30,\n type: 'Electrical',\n description: 'Power surge'\n },\n // Add more mock data as needed\n];\n\n// DOM Elements\nconst menuToggle = document.querySelector('.menu-toggle');\nconst navLinks = document.querySelector('.nav-links');\nconst durationFilter = document.getElementById('duration');\nconst machineFilter = document.getElementById('machine');\nconst applyFiltersBtn = document.getElementById('apply-filters');\nconst tableBody = document.getElementById('interruptions-data');\n\n// Toggle mobile menu\nmenuToggle.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n});\n\n// Filter and display interruptions\nfunction filterAndDisplayInterruptions() {\n const minDuration = parseInt(durationFilter.value) || 0;\n const selectedMachine = machineFilter.value;\n\n const filteredData = mockInterruptions.filter(interruption => {\n const durationMatch = interruption.duration >= minDuration;\n const machineMatch = !selectedMachine || interruption.machine.toLowerCase().includes(selectedMachine.toLowerCase());\n return durationMatch && machineMatch;\n });\n\n displayInterruptions(filteredData);\n}\n\n// Display interruptions in table\nfunction displayInterruptions(interruptions) {\n tableBody.innerHTML = '';\n \n interruptions.forEach(interruption => {\n const row = document.createElement('tr');\n row.innerHTML = `\n <td>${interruption.date}</td>\n <td>${interruption.machine}</td>\n <td>${interruption.duration} min</td>\n <td>${interruption.type}</td>\n <td>${interruption.description}</td>\n `;\n tableBody.appendChild(row);\n });\n}\n\n// Event listeners\napplyFiltersBtn.addEventListener('click', filterAndDisplayInterruptions);\n\n// Initial display\ndisplayInterruptions(mockInterruptions);\n\n// Add smooth scrolling\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n});\n---end---\n\nThis implementation provides a clean, professional, and responsive website for your mill interruption tracking system. It features:\n\n1. Modern, accessible design with semantic HTML5\n2. Responsive layout that works on all devices\n3. Interactive filtering system\n4. Clean table display for interruption data\n5. Smooth animations and transitions\n6. Professional color scheme and typography\n7. Mobile-first approach with hamburger menu\n8. Proper SEO meta tags\n9. Clean and maintainable code structure\n\nThe mock data can be replaced with actual data from your Python LLM application through an API endpoint or other data source." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 313, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2725 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..e590b2e --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# millwatch.scroll.pub +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 new file mode 100644 index 0000000..43a0c51 --- /dev/null +++ b/script.js @@ -0,0 +1,78 @@ +// Mock data for demonstration +const mockInterruptions = [ + { + date: '2023-11-01', + machine: 'Mill 01', + duration: 45, + type: 'Mechanical', + description: 'Bearing failure' + }, + { + date: '2023-11-02', + machine: 'Mill 02', + duration: 30, + type: 'Electrical', + description: 'Power surge' + }, + // Add more mock data as needed +]; + +// DOM Elements +const menuToggle = document.querySelector('.menu-toggle'); +const navLinks = document.querySelector('.nav-links'); +const durationFilter = document.getElementById('duration'); +const machineFilter = document.getElementById('machine'); +const applyFiltersBtn = document.getElementById('apply-filters'); +const tableBody = document.getElementById('interruptions-data'); + +// Toggle mobile menu +menuToggle.addEventListener('click', () => { + navLinks.classList.toggle('active'); +}); + +// Filter and display interruptions +function filterAndDisplayInterruptions() { + const minDuration = parseInt(durationFilter.value) || 0; + const selectedMachine = machineFilter.value; + + const filteredData = mockInterruptions.filter(interruption => { + const durationMatch = interruption.duration >= minDuration; + const machineMatch = !selectedMachine || interruption.machine.toLowerCase().includes(selectedMachine.toLowerCase()); + return durationMatch && machineMatch; + }); + + displayInterruptions(filteredData); +} + +// Display interruptions in table +function displayInterruptions(interruptions) { + tableBody.innerHTML = ''; + + interruptions.forEach(interruption => { + const row = document.createElement('tr'); + row.innerHTML = ` + <td>${interruption.date}</td> + <td>${interruption.machine}</td> + <td>${interruption.duration} min</td> + <td>${interruption.type}</td> + <td>${interruption.description}</td> + `; + tableBody.appendChild(row); + }); +} + +// Event listeners +applyFiltersBtn.addEventListener('click', filterAndDisplayInterruptions); + +// Initial display +displayInterruptions(mockInterruptions); + +// Add smooth scrolling +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..1879ede --- /dev/null +++ b/style.css @@ -0,0 +1,196 @@ +:root { + --primary-color: #2c3e50; + --secondary-color: #3498db; + --accent-color: #e74c3c; + --background-color: #f5f6fa; + --text-color: #2c3e50; + --border-radius: 8px; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + line-height: 1.6; + color: var(--text-color); + background: var(--background-color); +} + +header { + background: var(--primary-color); + color: white; + padding: 1rem; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +nav { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.5rem; + font-weight: bold; + background: linear-gradient(45deg, #3498db, #2ecc71); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + padding: 0.5rem; +} + +.nav-links { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-links a { + color: white; + text-decoration: none; + padding: 0.5rem; + transition: color 0.3s; +} + +.nav-links a:hover { + color: var(--secondary-color); +} + +.menu-toggle { + display: none; + background: none; + border: none; + color: white; + font-size: 1.5rem; + cursor: pointer; +} + +main { + max-width: 1200px; + margin: 2rem auto; + padding: 0 1rem; +} + +.filters { + background: white; + padding: 1.5rem; + border-radius: var(--border-radius); + margin-bottom: 2rem; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); +} + +.filter-controls { + display: flex; + gap: 1rem; + flex-wrap: wrap; + align-items: flex-end; +} + +.filter-group { + flex: 1; + min-width: 200px; +} + +label { + display: block; + margin-bottom: 0.5rem; + color: var(--primary-color); +} + +input, select { + width: 100%; + padding: 0.5rem; + border: 1px solid #ddd; + border-radius: var(--border-radius); + font-size: 1rem; +} + +button { + background: var(--secondary-color); + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: var(--border-radius); + cursor: pointer; + transition: background-color 0.3s; +} + +button:hover { + background: #2980b9; +} + +.table-container { + background: white; + border-radius: var(--border-radius); + overflow-x: auto; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); +} + +table { + width: 100%; + border-collapse: collapse; +} + +th, td { + padding: 1rem; + text-align: left; + border-bottom: 1px solid #ddd; +} + +th { + background: var(--primary-color); + color: white; +} + +tr:hover { + background: #f8f9fa; +} + +footer { + background: var(--primary-color); + color: white; + padding: 2rem; + margin-top: 2rem; + text-align: center; +} + +footer nav { + margin-top: 1rem; +} + +footer a { + color: white; + text-decoration: none; + margin: 0 1rem; +} + +@media (max-width: 768px) { + .menu-toggle { + display: block; + } + + .nav-links { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--primary-color); + flex-direction: column; + padding: 1rem; + gap: 1rem; + } + + .nav-links.active { + display: flex; + } + + .filter-group { + min-width: 100%; + } +} \ No newline at end of file