Last 10 Commits for safetrace.scroll.pub

commit 80010cd7b0e445c52d45015203a66aa5bc05b672 Author: root <root@hub.scroll.pub> Date: 2024-12-27 21:59:41 +0000 Subject: Initial commit diff --git a/.log.txt b/.log.txt new file mode 100644 index 0000000..e51216e --- /dev/null +++ b/.log.txt @@ -0,0 +1,3 @@ +read safetrace.scroll.pub https://hub.scroll.pub/edit.html?folderName=safetrace.scroll.pub 1735336772432 ::ffff:218.32.152.181 0.0 200 Chrome.131 MacOSX.10.15.7 +read safetrace.scroll.pub https://hub.scroll.pub/ls.json?folderName=safetrace.scroll.pub 1735336773596 ::ffff:218.32.152.181 0.0 200 Chrome.131 MacOSX.10.15.7 +read safetrace.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=safetrace.scroll.pub&filePath=safetrace.scroll.pub%2Findex.scroll 1735336774148 ::ffff:218.32.152.181 0.0 200 Chrome.131 MacOSX.10.15.7 diff --git a/.stats.json b/.stats.json new file mode 100644 index 0000000..b8584f3 --- /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": "safetrace.scroll.pub", + "folderLink": "http://safetrace.scroll.pub", + "created": "2024-12-27T21:59:31.000Z", + "revised": "2024-12-27T21:59:31.000Z", + "files": 6, + "mb": 1, + "revisions": 1, + "hash": "04fdd7df35" + } +} \ No newline at end of file diff --git a/body.html b/body.html index 373bf13..6728a6a 100644 --- a/body.html +++ b/body.html @@ -1,86 +1,85 @@ <header> - <h1>SafetyTrace</h1> - <p>ISO26262 Hardware Safety Management</p> + <nav class="main-nav"> + <div class="logo">SafeTrace</div> + <button class="menu-toggle" 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="#requirements">Requirements</a></li> + <li><a href="#specifications">Specifications</a></li> + <li><a href="#test-cases">Test Cases</a></li> + </ul> + </nav> </header> -<nav> - <ul> - <li><a href="#requirements">Safety Requirements</a></li> - <li><a href="#design">Design Specifications</a></li> - <li><a href="#testing">Test Cases</a></li> - <li><a href="#traceability">Traceability Matrix</a></li> - </ul> -</nav> - <main> - <section id="requirements"> - <h2>Hardware Safety Requirements</h2> - <div class="card-grid"> - <div class="card"> - <h3>Requirement 1</h3> - <p>Description of safety requirement 1</p> + <section id="dashboard" class="dashboard"> + <h1>Hardware Safety Requirements Management</h1> + <div class="stats-grid"> + <div class="stat-card"> + <h3>Requirements</h3> + <p class="count">24</p> </div> - <div class="card"> - <h3>Requirement 2</h3> - <p>Description of safety requirement 2</p> + <div class="stat-card"> + <h3>Specifications</h3> + <p class="count">56</p> </div> - </div> - </section> - - <section id="design"> - <h2>Design Specifications</h2> - <div class="card-grid"> - <div class="card"> - <h3>Function Block A</h3> - <p>Specifications for function block A</p> + <div class="stat-card"> + <h3>Test Cases</h3> + <p class="count">128</p> </div> - <div class="card"> - <h3>Function Block B</h3> - <p>Specifications for function block B</p> + <div class="stat-card"> + <h3>Coverage</h3> + <p class="count">94%</p> </div> </div> </section> - <section id="testing"> - <h2>Test Cases</h2> - <div class="card-grid"> - <div class="card"> - <h3>Test Case 1</h3> - <p>Description of test case 1</p> - </div> - <div class="card"> - <h3>Test Case 2</h3> - <p>Description of test case 2</p> - </div> + <section id="requirements" class="requirements"> + <h2>Safety Requirements</h2> + <div class="requirements-toolbar"> + <button class="add-btn">Add Requirement</button> + <input type="search" placeholder="Search requirements..." aria-label="Search requirements"> + </div> + <div class="requirements-list" id="requirementsList"> +  </div> </section> - <section id="traceability"> + <section id="traceability-matrix" class="traceability"> <h2>Traceability Matrix</h2> - <table> - <thead> - <tr> - <th>Requirement</th> - <th>Design Spec</th> - <th>Test Case</th> - </tr> - </thead> - <tbody> - <tr> - <td>Requirement 1</td> - <td>Function Block A</td> - <td>Test Case 1</td> - </tr> - <tr> - <td>Requirement 2</td> - <td>Function Block B</td> - <td>Test Case 2</td> - </tr> - </tbody> - </table> + <div class="matrix-container"> + <table class="trace-matrix"> + <thead> + <tr> + <th>Requirement ID</th> + <th>Specification</th> + <th>Test Case</th> + <th>Status</th> + </tr> + </thead> + <tbody id="matrixBody"> +  + </tbody> + </table> + </div> </section> </main> <footer> - <p>SafetyTrace - ISO26262 Compliance Made Simple</p> -</footer> \ No newline at end of file + <div class="footer-content"> + <div class="footer-section"> + <h4>SafeTrace</h4> + <p>ISO26262 Hardware Safety Management</p> + </div> + <div class="footer-section"> + <h4>Quick Links</h4> + <ul> + <li><a href="#dashboard">Dashboard</a></li> + <li><a href="#requirements">Requirements</a></li> + <li><a href="#specifications">Specifications</a></li> + </ul> + </div> + </div> +</footer> diff --git a/index.html b/index.html new file mode 100644 index 0000000..e4b4a90 --- /dev/null +++ b/index.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>SafetyTrace - ISO26262 Hardware Safety Management</title> + <script>/* This HTML was generated by 📜 Scroll v164.7.0. https://scroll.pub */</script> + <style>@media print {.doNotPrint {display: none !important;}}</style> + <link rel="canonical" href="https://safetrace.scroll.pub/index.html"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta name="description" content=""> + <meta name="generator" content="Scroll v164.7.0"> + <meta property="og:title" content="SafetyTrace - ISO26262 Hardware Safety Management"> + <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>SafetyTrace</h1> + <p>ISO26262 Hardware Safety Management</p> +</header> + +<nav> + <ul> + <li><a href="#requirements">Safety Requirements</a></li> + <li><a href="#design">Design Specifications</a></li> + <li><a href="#testing">Test Cases</a></li> + <li><a href="#traceability">Traceability Matrix</a></li> + </ul> +</nav> + +<main> + <section id="requirements"> + <h2>Hardware Safety Requirements</h2> + <div class="card-grid"> + <div class="card"> + <h3>Requirement 1</h3> + <p>Description of safety requirement 1</p> + </div> + <div class="card"> + <h3>Requirement 2</h3> + <p>Description of safety requirement 2</p> + </div> + </div> + </section> + + <section id="design"> + <h2>Design Specifications</h2> + <div class="card-grid"> + <div class="card"> + <h3>Function Block A</h3> + <p>Specifications for function block A</p> + </div> + <div class="card"> + <h3>Function Block B</h3> + <p>Specifications for function block B</p> + </div> + </div> + </section> + + <section id="testing"> + <h2>Test Cases</h2> + <div class="card-grid"> + <div class="card"> + <h3>Test Case 1</h3> + <p>Description of test case 1</p> + </div> + <div class="card"> + <h3>Test Case 2</h3> + <p>Description of test case 2</p> + </div> + </div> + </section> + + <section id="traceability"> + <h2>Traceability Matrix</h2> + <table> + <thead> + <tr> + <th>Requirement</th> + <th>Design Spec</th> + <th>Test Case</th> + </tr> + </thead> + <tbody> + <tr> + <td>Requirement 1</td> + <td>Function Block A</td> + <td>Test Case 1</td> + </tr> + <tr> + <td>Requirement 2</td> + <td>Function Block B</td> + <td>Test Case 2</td> + </tr> + </tbody> + </table> + </section> +</main> + +<footer> + <p>SafetyTrace - ISO26262 Compliance Made Simple</p> +</footer> +<script src="script.js"></script> +</body> +</html> \ No newline at end of file diff --git a/index.scroll b/index.scroll index 803a8dd..10c2857 100644 --- a/index.scroll +++ b/index.scroll @@ -1,8 +1,10 @@ buildHtml baseUrl https://safetrace.scroll.pub metaTags + description "Hardware Safety Requirements Management System for ISO26262 Compliance" + keywords "ISO26262, hardware safety, requirements management, traceability, functional safety" editButton /edit.html -title SafetyTrace - ISO26262 Hardware Safety Management +title SafeTrace - Hardware Safety Requirements Management style.css body.html -script.js \ No newline at end of file +script.js diff --git a/prompt.json b/prompt.json index fc05b36..d03e8a2 100644 --- a/prompt.json +++ b/prompt.json @@ -1,25 +1,20 @@ { - "id": "508fa063-f75f-4c9c-a5c2-91d6c19a06af", - "object": "chat.completion", - "created": 1735336753, - "model": "deepseek-chat", - "choices": [ + "id": "msg_01RNJAiuxVCiPA4hsyEgvftF", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ { - "index": 0, - "message": { - "role": "assistant", - "content": "---domain---\nsafetrace.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://safetrace.scroll.pub\nmetaTags\neditButton /edit.html\ntitle SafetyTrace - ISO26262 Hardware Safety Management\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>SafetyTrace</h1>\n <p>ISO26262 Hardware Safety Management</p>\n</header>\n\n<nav>\n <ul>\n <li><a href=\"#requirements\">Safety Requirements</a></li>\n <li><a href=\"#design\">Design Specifications</a></li>\n <li><a href=\"#testing\">Test Cases</a></li>\n <li><a href=\"#traceability\">Traceability Matrix</a></li>\n </ul>\n</nav>\n\n<main>\n <section id=\"requirements\">\n <h2>Hardware Safety Requirements</h2>\n <div class=\"card-grid\">\n <div class=\"card\">\n <h3>Requirement 1</h3>\n <p>Description of safety requirement 1</p>\n </div>\n <div class=\"card\">\n <h3>Requirement 2</h3>\n <p>Description of safety requirement 2</p>\n </div>\n </div>\n </section>\n\n <section id=\"design\">\n <h2>Design Specifications</h2>\n <div class=\"card-grid\">\n <div class=\"card\">\n <h3>Function Block A</h3>\n <p>Specifications for function block A</p>\n </div>\n <div class=\"card\">\n <h3>Function Block B</h3>\n <p>Specifications for function block B</p>\n </div>\n </div>\n </section>\n\n <section id=\"testing\">\n <h2>Test Cases</h2>\n <div class=\"card-grid\">\n <div class=\"card\">\n <h3>Test Case 1</h3>\n <p>Description of test case 1</p>\n </div>\n <div class=\"card\">\n <h3>Test Case 2</h3>\n <p>Description of test case 2</p>\n </div>\n </div>\n </section>\n\n <section id=\"traceability\">\n <h2>Traceability Matrix</h2>\n <table>\n <thead>\n <tr>\n <th>Requirement</th>\n <th>Design Spec</th>\n <th>Test Case</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Requirement 1</td>\n <td>Function Block A</td>\n <td>Test Case 1</td>\n </tr>\n <tr>\n <td>Requirement 2</td>\n <td>Function Block B</td>\n <td>Test Case 2</td>\n </tr>\n </tbody>\n </table>\n </section>\n</main>\n\n<footer>\n <p>SafetyTrace - ISO26262 Compliance Made Simple</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 --card-bg: white;\n --shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n margin: 0;\n padding: 0;\n}\n\nheader {\n background: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nnav {\n background: var(--secondary-color);\n padding: 1rem;\n}\n\nnav ul {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: center;\n gap: 1rem;\n}\n\nnav a {\n color: white;\n text-decoration: none;\n font-weight: bold;\n}\n\nmain {\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\nh2 {\n color: var(--primary-color);\n margin-bottom: 1.5rem;\n}\n\n.card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n}\n\n.card {\n background: var(--card-bg);\n padding: 1.5rem;\n border-radius: 8px;\n box-shadow: var(--shadow);\n transition: transform 0.3s ease;\n}\n\n.card:hover {\n transform: translateY(-5px);\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n background: var(--card-bg);\n box-shadow: var(--shadow);\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\nfooter {\n background: var(--primary-color);\n color: white;\n text-align: center;\n padding: 1rem;\n margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n nav ul {\n flex-direction: column;\n align-items: center;\n }\n \n .card-grid {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\n// Smooth scrolling for navigation links\ndocument.querySelectorAll('nav a').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\n// Add hover effect to cards\nconst cards = document.querySelectorAll('.card');\ncards.forEach(card => {\n card.addEventListener('mouseenter', () => {\n card.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';\n });\n card.addEventListener('mouseleave', () => {\n card.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';\n });\n});\n---end---" - }, - "logprobs": null, - "finish_reason": "stop" + "type": "text", + "text": "I'll help create a professional website for managing hardware safety requirements according to ISO26262. For the domain, I suggest:\n\n---domain---\nsafetrace.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://safetrace.scroll.pub\nmetaTags\n description \"Hardware Safety Requirements Management System for ISO26262 Compliance\"\n keywords \"ISO26262, hardware safety, requirements management, traceability, functional safety\"\neditButton /edit.html\ntitle SafeTrace - Hardware Safety Requirements Management\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav class=\"main-nav\">\n <div class=\"logo\">SafeTrace</div>\n <button class=\"menu-toggle\" 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=\"#requirements\">Requirements</a></li>\n <li><a href=\"#specifications\">Specifications</a></li>\n <li><a href=\"#test-cases\">Test Cases</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"dashboard\" class=\"dashboard\">\n <h1>Hardware Safety Requirements Management</h1>\n <div class=\"stats-grid\">\n <div class=\"stat-card\">\n <h3>Requirements</h3>\n <p class=\"count\">24</p>\n </div>\n <div class=\"stat-card\">\n <h3>Specifications</h3>\n <p class=\"count\">56</p>\n </div>\n <div class=\"stat-card\">\n <h3>Test Cases</h3>\n <p class=\"count\">128</p>\n </div>\n <div class=\"stat-card\">\n <h3>Coverage</h3>\n <p class=\"count\">94%</p>\n </div>\n </div>\n </section>\n\n <section id=\"requirements\" class=\"requirements\">\n <h2>Safety Requirements</h2>\n <div class=\"requirements-toolbar\">\n <button class=\"add-btn\">Add Requirement</button>\n <input type=\"search\" placeholder=\"Search requirements...\" aria-label=\"Search requirements\">\n </div>\n <div class=\"requirements-list\" id=\"requirementsList\">\n \n </div>\n </section>\n\n <section id=\"traceability-matrix\" class=\"traceability\">\n <h2>Traceability Matrix</h2>\n <div class=\"matrix-container\">\n <table class=\"trace-matrix\">\n <thead>\n <tr>\n <th>Requirement ID</th>\n <th>Specification</th>\n <th>Test Case</th>\n <th>Status</th>\n </tr>\n </thead>\n <tbody id=\"matrixBody\">\n \n </tbody>\n </table>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>SafeTrace</h4>\n <p>ISO26262 Hardware Safety Management</p>\n </div>\n <div class=\"footer-section\">\n <h4>Quick Links</h4>\n <ul>\n <li><a href=\"#dashboard\">Dashboard</a></li>\n <li><a href=\"#requirements\">Requirements</a></li>\n <li><a href=\"#specifications\">Specifications</a></li>\n </ul>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #3498db;\n --success-color: #27ae60;\n --warning-color: #f39c12;\n --danger-color: #e74c3c;\n --background-color: #f5f6fa;\n --card-background: #ffffff;\n --text-color: #2c3e50;\n --text-light: #7f8c8d;\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\n.main-nav {\n background: var(--primary-color);\n padding: 1rem 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: sticky;\n top: 0;\n z-index: 1000;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\n.logo {\n color: white;\n font-size: 1.5rem;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--accent-color);\n}\n\n.menu-toggle {\n display: none;\n}\n\n.dashboard {\n padding: 2rem;\n}\n\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n margin-top: 2rem;\n}\n\n.stat-card {\n background: var(--card-background);\n padding: 1.5rem;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.stat-card:hover {\n transform: translateY(-5px);\n}\n\n.stat-card h3 {\n color: var(--text-light);\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.stat-card .count {\n font-size: 2rem;\n font-weight: bold;\n color: var(--primary-color);\n margin-top: 0.5rem;\n}\n\n.requirements-toolbar {\n display: flex;\n gap: 1rem;\n margin-bottom: 1rem;\n}\n\n.add-btn {\n background: var(--accent-color);\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.add-btn:hover {\n background-color: #2980b9;\n}\n\n.trace-matrix {\n width: 100%;\n border-collapse: collapse;\n background: var(--card-background);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.trace-matrix th,\n.trace-matrix td {\n padding: 1rem;\n text-align: left;\n border-bottom: 1px solid #eee;\n}\n\n.trace-matrix th {\n background: var(--primary-color);\n color: white;\n}\n\n@media (max-width: 768px) {\n .menu-toggle {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .menu-toggle span {\n display: block;\n width: 25px;\n height: 3px;\n background: white;\n margin: 5px 0;\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-color);\n flex-direction: column;\n padding: 1rem;\n }\n\n .nav-links.active {\n display: flex;\n }\n\n .stats-grid {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n \n menuToggle.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n const spans = menuToggle.querySelectorAll('span');\n spans[0].classList.toggle('rotate-45');\n spans[1].classList.toggle('opacity-0');\n spans[2].classList.toggle('rotate-neg-45');\n });\n\n // Sample data for requirements\n const requirements = [\n { id: 'REQ001', name: 'Voltage monitoring', spec: 'SPEC001', testCase: 'TC001', status: 'Completed' },\n { id: 'REQ002', name: 'Temperature control', spec: 'SPEC002', testCase: 'TC002', status: 'In Progress' },\n { id: 'REQ003', name: 'Fault detection', spec: 'SPEC003', testCase: 'TC003', status: 'Pending' }\n ];\n\n // Populate traceability matrix\n const matrixBody = document.getElementById('matrixBody');\n if (matrixBody) {\n requirements.forEach(req => {\n const row = document.createElement('tr');\n row.innerHTML = `\n <td>${req.id}</td>\n <td>${req.spec}</td>\n <td>${req.testCase}</td>\n <td><span class=\"status-badge ${req.status.toLowerCase()}\">${req.status}</span></td>\n `;\n matrixBody.appendChild(row);\n });\n }\n\n // Search functionality\n const searchInput = document.querySelector('input[type=\"search\"]');\n if (searchInput) {\n searchInput.addEventListener('input', (e) => {\n const searchTerm = e.target.value.toLowerCase();\n const rows = matrixBody.querySelectorAll('tr');\n \n rows.forEach(row => {\n const text = row.textContent.toLowerCase();\n row.style.display = text.includes(searchTerm) ? '' : 'none';\n });\n });\n }\n\n // Add requirement button\n const addBtn = document.querySelector('.add-btn');\n if (addBtn) {\n addBtn.addEventListener('click', () => {\n // Implementation for adding new requirement\n alert('Add requirement functionality to be implemented');\n });\n }\n});\n\n---end---\n\nThis implementation creates a modern, responsive website for managing hardware safety requirements. Key features include:\n\n1. Clean, professional design with a dark blue color scheme\n2. Responsive dashboard with animated stat cards\n3. Traceability matrix for linking requirements, specs, and test cases\n4. Mobile-responsive navigation with hamburger menu\n5. Search functionality for requirements\n6. Accessible semantic HTML structure\n7. Modern CSS with CSS variables and flexbox/grid layouts\n8. Interactive elements with smooth transitions and hover effects\n9. Sample data implementation in JavaScript\n10. SEO-optimized meta tags\n\nThe design is both functional and visually appealing, with careful attention to spacing, typography, and user interaction." } ], + "stop_reason": "end_turn", + "stop_sequence": null, "usage": { - "prompt_tokens": 275, - "completion_tokens": 1421, - "total_tokens": 1696, - "prompt_cache_hit_tokens": 0, - "prompt_cache_miss_tokens": 275 - }, - "system_fingerprint": "fp_f1afce2943" + "input_tokens": 312, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2908 + } } \ No newline at end of file diff --git a/readme.scroll b/readme.scroll index b4d8fb7..d7c0d3a 100644 --- a/readme.scroll +++ b/readme.scroll @@ -1,2 +1,2 @@ # safetrace.scroll.pub -Website generated by DeepSeek from prompt: create a website that manage safety requirements of hardware deveopment in accordance to iso26262. it will have traceability between hardware safety requirement and design spec and test cases. easy to management function block specs. \ No newline at end of file +Website generated by Claude from prompt: create a website that manage safety requirements of hardware deveopment in accordance to iso26262. it will have traceability between hardware safety requirement and design spec and test cases. easy to management function block specs. \ No newline at end of file diff --git a/script.js b/script.js index 428631b..62731db 100644 --- a/script.js +++ b/script.js @@ -1,20 +1,58 @@ -// Smooth scrolling for navigation links -document.querySelectorAll('nav a').forEach(anchor => { - anchor.addEventListener('click', function(e) { - e.preventDefault(); - document.querySelector(this.getAttribute('href')).scrollIntoView({ - behavior: 'smooth' - }); +document.addEventListener('DOMContentLoaded', () => { + // Mobile menu toggle + const menuToggle = document.querySelector('.menu-toggle'); + const navLinks = document.querySelector('.nav-links'); + + menuToggle.addEventListener('click', () => { + navLinks.classList.toggle('active'); + const spans = menuToggle.querySelectorAll('span'); + spans[0].classList.toggle('rotate-45'); + spans[1].classList.toggle('opacity-0'); + spans[2].classList.toggle('rotate-neg-45'); }); -}); -// Add hover effect to cards -const cards = document.querySelectorAll('.card'); -cards.forEach(card => { - card.addEventListener('mouseenter', () => { - card.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)'; - }); - card.addEventListener('mouseleave', () => { - card.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'; - }); -}); \ No newline at end of file + // Sample data for requirements + const requirements = [ + { id: 'REQ001', name: 'Voltage monitoring', spec: 'SPEC001', testCase: 'TC001', status: 'Completed' }, + { id: 'REQ002', name: 'Temperature control', spec: 'SPEC002', testCase: 'TC002', status: 'In Progress' }, + { id: 'REQ003', name: 'Fault detection', spec: 'SPEC003', testCase: 'TC003', status: 'Pending' } + ]; + + // Populate traceability matrix + const matrixBody = document.getElementById('matrixBody'); + if (matrixBody) { + requirements.forEach(req => { + const row = document.createElement('tr'); + row.innerHTML = ` + <td>${req.id}</td> + <td>${req.spec}</td> + <td>${req.testCase}</td> + <td><span class="status-badge ${req.status.toLowerCase()}">${req.status}</span></td> + `; + matrixBody.appendChild(row); + }); + } + + // Search functionality + const searchInput = document.querySelector('input[type="search"]'); + if (searchInput) { + searchInput.addEventListener('input', (e) => { + const searchTerm = e.target.value.toLowerCase(); + const rows = matrixBody.querySelectorAll('tr'); + + rows.forEach(row => { + const text = row.textContent.toLowerCase(); + row.style.display = text.includes(searchTerm) ? '' : 'none'; + }); + }); + } + + // Add requirement button + const addBtn = document.querySelector('.add-btn'); + if (addBtn) { + addBtn.addEventListener('click', () => { + // Implementation for adding new requirement + alert('Add requirement functionality to be implemented'); + }); + } +}); diff --git a/style.css b/style.css index 616de7b..3711225 100644 --- a/style.css +++ b/style.css @@ -1,111 +1,178 @@ :root { --primary-color: #2c3e50; - --secondary-color: #3498db; - --background-color: #ecf0f1; + --accent-color: #3498db; + --success-color: #27ae60; + --warning-color: #f39c12; + --danger-color: #e74c3c; + --background-color: #f5f6fa; + --card-background: #ffffff; --text-color: #2c3e50; - --card-bg: white; - --shadow: 0 2px 4px rgba(0,0,0,0.1); + --text-light: #7f8c8d; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; } body { - font-family: 'Segoe UI', sans-serif; + font-family: 'Segoe UI', system-ui, sans-serif; line-height: 1.6; color: var(--text-color); - background-color: var(--background-color); - margin: 0; - padding: 0; + background: var(--background-color); } -header { +.main-nav { background: var(--primary-color); - color: white; - padding: 2rem; - text-align: center; + padding: 1rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + top: 0; + z-index: 1000; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); } -nav { - background: var(--secondary-color); - padding: 1rem; +.logo { + color: white; + font-size: 1.5rem; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; } -nav ul { - list-style: none; - padding: 0; - margin: 0; +.nav-links { display: flex; - justify-content: center; - gap: 1rem; + gap: 2rem; + list-style: none; } -nav a { +.nav-links a { color: white; text-decoration: none; - font-weight: bold; + transition: color 0.3s ease; } -main { - padding: 2rem; - max-width: 1200px; - margin: 0 auto; +.nav-links a:hover { + color: var(--accent-color); } -h2 { - color: var(--primary-color); - margin-bottom: 1.5rem; +.menu-toggle { + display: none; } -.card-grid { +.dashboard { + padding: 2rem; +} + +.stats-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; - margin-bottom: 2rem; + margin-top: 2rem; } -.card { - background: var(--card-bg); +.stat-card { + background: var(--card-background); padding: 1.5rem; - border-radius: 8px; - box-shadow: var(--shadow); + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s ease; } -.card:hover { +.stat-card:hover { transform: translateY(-5px); } -table { +.stat-card h3 { + color: var(--text-light); + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 1px; +} + +.stat-card .count { + font-size: 2rem; + font-weight: bold; + color: var(--primary-color); + margin-top: 0.5rem; +} + +.requirements-toolbar { + display: flex; + gap: 1rem; + margin-bottom: 1rem; +} + +.add-btn { + background: var(--accent-color); + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.add-btn:hover { + background-color: #2980b9; +} + +.trace-matrix { width: 100%; border-collapse: collapse; - background: var(--card-bg); - box-shadow: var(--shadow); + background: var(--card-background); + border-radius: 10px; + overflow: hidden; } -th, td { +.trace-matrix th, +.trace-matrix td { padding: 1rem; text-align: left; - border-bottom: 1px solid #ddd; -} - -th { - background: var(--primary-color); - color: white; + border-bottom: 1px solid #eee; } -footer { +.trace-matrix th { background: var(--primary-color); color: white; - text-align: center; - padding: 1rem; - margin-top: 2rem; } @media (max-width: 768px) { - nav ul { + .menu-toggle { + display: block; + background: none; + border: none; + cursor: pointer; + } + + .menu-toggle span { + display: block; + width: 25px; + height: 3px; + background: white; + margin: 5px 0; + transition: 0.3s; + } + + .nav-links { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--primary-color); flex-direction: column; - align-items: center; + padding: 1rem; + } + + .nav-links.active { + display: flex; } - - .card-grid { + + .stats-grid { grid-template-columns: 1fr; } -} \ No newline at end of file +}

commit 04fdd7df35b32946e2c1d46f514bb2bbf8c96046 Author: root <root@hub.scroll.pub> Date: 2024-12-27 21:59:31 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..373bf13 --- /dev/null +++ b/body.html @@ -0,0 +1,86 @@ +<header> + <h1>SafetyTrace</h1> + <p>ISO26262 Hardware Safety Management</p> +</header> + +<nav> + <ul> + <li><a href="#requirements">Safety Requirements</a></li> + <li><a href="#design">Design Specifications</a></li> + <li><a href="#testing">Test Cases</a></li> + <li><a href="#traceability">Traceability Matrix</a></li> + </ul> +</nav> + +<main> + <section id="requirements"> + <h2>Hardware Safety Requirements</h2> + <div class="card-grid"> + <div class="card"> + <h3>Requirement 1</h3> + <p>Description of safety requirement 1</p> + </div> + <div class="card"> + <h3>Requirement 2</h3> + <p>Description of safety requirement 2</p> + </div> + </div> + </section> + + <section id="design"> + <h2>Design Specifications</h2> + <div class="card-grid"> + <div class="card"> + <h3>Function Block A</h3> + <p>Specifications for function block A</p> + </div> + <div class="card"> + <h3>Function Block B</h3> + <p>Specifications for function block B</p> + </div> + </div> + </section> + + <section id="testing"> + <h2>Test Cases</h2> + <div class="card-grid"> + <div class="card"> + <h3>Test Case 1</h3> + <p>Description of test case 1</p> + </div> + <div class="card"> + <h3>Test Case 2</h3> + <p>Description of test case 2</p> + </div> + </div> + </section> + + <section id="traceability"> + <h2>Traceability Matrix</h2> + <table> + <thead> + <tr> + <th>Requirement</th> + <th>Design Spec</th> + <th>Test Case</th> + </tr> + </thead> + <tbody> + <tr> + <td>Requirement 1</td> + <td>Function Block A</td> + <td>Test Case 1</td> + </tr> + <tr> + <td>Requirement 2</td> + <td>Function Block B</td> + <td>Test Case 2</td> + </tr> + </tbody> + </table> + </section> +</main> + +<footer> + <p>SafetyTrace - ISO26262 Compliance Made Simple</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..803a8dd --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://safetrace.scroll.pub +metaTags +editButton /edit.html +title SafetyTrace - ISO26262 Hardware Safety 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..fc05b36 --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "508fa063-f75f-4c9c-a5c2-91d6c19a06af", + "object": "chat.completion", + "created": 1735336753, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\nsafetrace.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://safetrace.scroll.pub\nmetaTags\neditButton /edit.html\ntitle SafetyTrace - ISO26262 Hardware Safety Management\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>SafetyTrace</h1>\n <p>ISO26262 Hardware Safety Management</p>\n</header>\n\n<nav>\n <ul>\n <li><a href=\"#requirements\">Safety Requirements</a></li>\n <li><a href=\"#design\">Design Specifications</a></li>\n <li><a href=\"#testing\">Test Cases</a></li>\n <li><a href=\"#traceability\">Traceability Matrix</a></li>\n </ul>\n</nav>\n\n<main>\n <section id=\"requirements\">\n <h2>Hardware Safety Requirements</h2>\n <div class=\"card-grid\">\n <div class=\"card\">\n <h3>Requirement 1</h3>\n <p>Description of safety requirement 1</p>\n </div>\n <div class=\"card\">\n <h3>Requirement 2</h3>\n <p>Description of safety requirement 2</p>\n </div>\n </div>\n </section>\n\n <section id=\"design\">\n <h2>Design Specifications</h2>\n <div class=\"card-grid\">\n <div class=\"card\">\n <h3>Function Block A</h3>\n <p>Specifications for function block A</p>\n </div>\n <div class=\"card\">\n <h3>Function Block B</h3>\n <p>Specifications for function block B</p>\n </div>\n </div>\n </section>\n\n <section id=\"testing\">\n <h2>Test Cases</h2>\n <div class=\"card-grid\">\n <div class=\"card\">\n <h3>Test Case 1</h3>\n <p>Description of test case 1</p>\n </div>\n <div class=\"card\">\n <h3>Test Case 2</h3>\n <p>Description of test case 2</p>\n </div>\n </div>\n </section>\n\n <section id=\"traceability\">\n <h2>Traceability Matrix</h2>\n <table>\n <thead>\n <tr>\n <th>Requirement</th>\n <th>Design Spec</th>\n <th>Test Case</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Requirement 1</td>\n <td>Function Block A</td>\n <td>Test Case 1</td>\n </tr>\n <tr>\n <td>Requirement 2</td>\n <td>Function Block B</td>\n <td>Test Case 2</td>\n </tr>\n </tbody>\n </table>\n </section>\n</main>\n\n<footer>\n <p>SafetyTrace - ISO26262 Compliance Made Simple</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 --card-bg: white;\n --shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n margin: 0;\n padding: 0;\n}\n\nheader {\n background: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nnav {\n background: var(--secondary-color);\n padding: 1rem;\n}\n\nnav ul {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: center;\n gap: 1rem;\n}\n\nnav a {\n color: white;\n text-decoration: none;\n font-weight: bold;\n}\n\nmain {\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\nh2 {\n color: var(--primary-color);\n margin-bottom: 1.5rem;\n}\n\n.card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n}\n\n.card {\n background: var(--card-bg);\n padding: 1.5rem;\n border-radius: 8px;\n box-shadow: var(--shadow);\n transition: transform 0.3s ease;\n}\n\n.card:hover {\n transform: translateY(-5px);\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n background: var(--card-bg);\n box-shadow: var(--shadow);\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\nfooter {\n background: var(--primary-color);\n color: white;\n text-align: center;\n padding: 1rem;\n margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n nav ul {\n flex-direction: column;\n align-items: center;\n }\n \n .card-grid {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\n// Smooth scrolling for navigation links\ndocument.querySelectorAll('nav a').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\n// Add hover effect to cards\nconst cards = document.querySelectorAll('.card');\ncards.forEach(card => {\n card.addEventListener('mouseenter', () => {\n card.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';\n });\n card.addEventListener('mouseleave', () => {\n card.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';\n });\n});\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 275, + "completion_tokens": 1421, + "total_tokens": 1696, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 275 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..b4d8fb7 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# safetrace.scroll.pub +Website generated by DeepSeek from prompt: create a website that manage safety requirements of hardware deveopment in accordance to iso26262. it will have traceability between hardware safety requirement and design spec and test cases. easy to management function block specs. \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..428631b --- /dev/null +++ b/script.js @@ -0,0 +1,20 @@ +// Smooth scrolling for navigation links +document.querySelectorAll('nav a').forEach(anchor => { + anchor.addEventListener('click', function(e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); +}); + +// Add hover effect to cards +const cards = document.querySelectorAll('.card'); +cards.forEach(card => { + card.addEventListener('mouseenter', () => { + card.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)'; + }); + card.addEventListener('mouseleave', () => { + card.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'; + }); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..616de7b --- /dev/null +++ b/style.css @@ -0,0 +1,111 @@ +:root { + --primary-color: #2c3e50; + --secondary-color: #3498db; + --background-color: #ecf0f1; + --text-color: #2c3e50; + --card-bg: white; + --shadow: 0 2px 4px rgba(0,0,0,0.1); +} + +body { + font-family: 'Segoe UI', sans-serif; + line-height: 1.6; + color: var(--text-color); + background-color: var(--background-color); + margin: 0; + padding: 0; +} + +header { + background: var(--primary-color); + color: white; + padding: 2rem; + text-align: center; +} + +nav { + background: var(--secondary-color); + padding: 1rem; +} + +nav ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + justify-content: center; + gap: 1rem; +} + +nav a { + color: white; + text-decoration: none; + font-weight: bold; +} + +main { + padding: 2rem; + max-width: 1200px; + margin: 0 auto; +} + +h2 { + color: var(--primary-color); + margin-bottom: 1.5rem; +} + +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1.5rem; + margin-bottom: 2rem; +} + +.card { + background: var(--card-bg); + padding: 1.5rem; + border-radius: 8px; + box-shadow: var(--shadow); + transition: transform 0.3s ease; +} + +.card:hover { + transform: translateY(-5px); +} + +table { + width: 100%; + border-collapse: collapse; + background: var(--card-bg); + box-shadow: var(--shadow); +} + +th, td { + padding: 1rem; + text-align: left; + border-bottom: 1px solid #ddd; +} + +th { + background: var(--primary-color); + color: white; +} + +footer { + background: var(--primary-color); + color: white; + text-align: center; + padding: 1rem; + margin-top: 2rem; +} + +@media (max-width: 768px) { + nav ul { + flex-direction: column; + align-items: center; + } + + .card-grid { + grid-template-columns: 1fr; + } +} \ No newline at end of file