Last 10 Commits for cars.scroll.pub

commit ac9f727cc997a0abff882f7d24865b4dce36d2b8 Author: root <root@hub.scroll.pub> Date: 2025-01-13 04:28:13 +0000 Subject: Initial commit diff --git a/concepts.scroll b/concepts.scroll new file mode 100644 index 0000000..a02889d --- /dev/null +++ b/concepts.scroll @@ -0,0 +1,41 @@ +measures.parsers + +id TeslaModel3Performance +year 2023 +make Tesla +model Model 3 +trim Performance +engine Electric Dual Motor +price 53990 + +id PorscheCayenneTurbo +year 2023 +make Porsche +model Cayenne +trim Turbo +engine 4.0L V8 Twin-Turbo +price 131900 + +id ToyotaCamryXSE +year 2023 +make Toyota +model Camry +trim XSE +engine 3.5L V6 +price 36370 + +id FordMustangGT +year 2023 +make Ford +model Mustang +trim GT Premium +engine 5.0L V8 +price 44960 + +id HondaCivicSport +year 2023 +make Honda +model Civic +trim Sport +engine 2.0L I4 +price 25050 diff --git a/footer.scroll b/footer.scroll new file mode 100644 index 0000000..679e89f --- /dev/null +++ b/footer.scroll @@ -0,0 +1,3 @@ +importOnly +center +scrollVersionLink diff --git a/header.scroll b/header.scroll new file mode 100644 index 0000000..a2c0d19 --- /dev/null +++ b/header.scroll @@ -0,0 +1,9 @@ +importOnly +buildHtml +homeButton +metaTags +editButton +editBaseUrl /edit.html?folderName=cars.scroll.pub&fileName= +metaTags +style.css +script.js diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..a36068e --- /dev/null +++ b/index.scroll @@ -0,0 +1,22 @@ +title Car Database | Modern Vehicle Specifications +header.scroll + +html + div class:hero + h1 Modern Vehicle Database + p Comprehensive specifications for contemporary automobiles + + div class:search-container + input type:text id:searchInput placeholder:Search cars... + select id:filterSelect + option value:all All Categories + option value:make Make + option value:model Model + option value:year Year + option value:trim Trim + +concepts.scroll +concepts + printTable + +footer.scroll diff --git a/measures.parsers b/measures.parsers new file mode 100644 index 0000000..7f46d28 --- /dev/null +++ b/measures.parsers @@ -0,0 +1,20 @@ +idParser + extends abstractIdParser +yearParser + extends abstractIntegerMeasureParser + description The manufacturing year of the vehicle +makeParser + extends abstractStringMeasureParser + description The manufacturer/brand of the vehicle +modelParser + extends abstractStringMeasureParser + description The specific model name of the vehicle +trimParser + extends abstractStringMeasureParser + description The trim level or variant of the model +engineParser + extends abstractStringMeasureParser + description The engine specifications including displacement and configuration +priceParser + extends abstractIntegerMeasureParser + description The base MSRP in USD when the vehicle was new diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..e532b18 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_017WUt1TmA9AZrZUomnkiEX5", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll help create a car database knowledge base using ScrollSets.\n\n---domain---\ncars.scroll.pub\n\n---measures.parsers---\nidParser\n extends abstractIdParser\nyearParser\n extends abstractIntegerMeasureParser\n description The manufacturing year of the vehicle\nmakeParser\n extends abstractStringMeasureParser\n description The manufacturer/brand of the vehicle\nmodelParser\n extends abstractStringMeasureParser\n description The specific model name of the vehicle\ntrimParser\n extends abstractStringMeasureParser\n description The trim level or variant of the model\nengineParser\n extends abstractStringMeasureParser\n description The engine specifications including displacement and configuration\npriceParser\n extends abstractIntegerMeasureParser\n description The base MSRP in USD when the vehicle was new\n\n---concepts.scroll---\nmeasures.parsers\n\nid TeslaModel3Performance\nyear 2023\nmake Tesla\nmodel Model 3\ntrim Performance\nengine Electric Dual Motor\nprice 53990\n\nid PorscheCayenneTurbo\nyear 2023\nmake Porsche\nmodel Cayenne\ntrim Turbo\nengine 4.0L V8 Twin-Turbo\nprice 131900\n\nid ToyotaCamryXSE\nyear 2023\nmake Toyota\nmodel Camry\ntrim XSE\nengine 3.5L V6\nprice 36370\n\nid FordMustangGT\nyear 2023\nmake Ford\nmodel Mustang\ntrim GT Premium\nengine 5.0L V8\nprice 44960\n\nid HondaCivicSport\nyear 2023\nmake Honda\nmodel Civic\ntrim Sport\nengine 2.0L I4\nprice 25050\n\n---index.scroll---\ntitle Car Database | Modern Vehicle Specifications\nheader.scroll\n\nhtml\n div class:hero\n h1 Modern Vehicle Database\n p Comprehensive specifications for contemporary automobiles\n \n div class:search-container\n input type:text id:searchInput placeholder:Search cars...\n select id:filterSelect\n option value:all All Categories\n option value:make Make\n option value:model Model\n option value:year Year\n option value:trim Trim\n\nconcepts.scroll\nconcepts\n printTable\n\nfooter.scroll\n\n---header.scroll---\nimportOnly\nbuildHtml\nhomeButton\nmetaTags\neditButton\neditBaseUrl /edit.html?folderName=cars.scroll.pub&fileName=\nmetaTags\nstyle.css\nscript.js\n\n---footer.scroll---\nimportOnly\ncenter\nscrollVersionLink\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #3498db;\n --background-color: #f8f9fa;\n --text-color: #2c3e50;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n margin: 0;\n padding: 0;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary-color), var(--accent-color));\n color: white;\n padding: 4rem 2rem;\n text-align: center;\n margin-bottom: 2rem;\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.search-container {\n max-width: 800px;\n margin: 0 auto 2rem;\n padding: 0 1rem;\n display: flex;\n gap: 1rem;\n}\n\ninput, select {\n padding: 0.8rem;\n border: 2px solid var(--accent-color);\n border-radius: 6px;\n font-size: 1rem;\n}\n\ninput {\n flex: 1;\n}\n\ntable {\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n border-collapse: collapse;\n background: white;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n border-radius: 8px;\n overflow: hidden;\n}\n\nth, td {\n padding: 1rem;\n text-align: left;\n border-bottom: 1px solid #eee;\n}\n\nth {\n background-color: var(--primary-color);\n color: white;\n}\n\ntr:hover {\n background-color: #f5f5f5;\n}\n\n@media (max-width: 768px) {\n .search-container {\n flex-direction: column;\n }\n \n table {\n font-size: 0.9rem;\n }\n \n th, td {\n padding: 0.8rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const searchInput = document.getElementById('searchInput');\n const filterSelect = document.getElementById('filterSelect');\n const table = document.querySelector('table');\n \n function filterTable() {\n const searchTerm = searchInput.value.toLowerCase();\n const filterCategory = filterSelect.value;\n const rows = table.getElementsByTagName('tr');\n \n for (let i = 1; i < rows.length; i++) {\n const row = rows[i];\n const cells = row.getElementsByTagName('td');\n let shouldShow = false;\n \n if (filterCategory === 'all') {\n shouldShow = Array.from(cells).some(cell => \n cell.textContent.toLowerCase().includes(searchTerm)\n );\n } else {\n const categoryIndex = {\n 'make': 2,\n 'model': 3,\n 'year': 1,\n 'trim': 4\n }[filterCategory];\n \n shouldShow = cells[categoryIndex].textContent\n .toLowerCase()\n .includes(searchTerm);\n }\n \n row.style.display = shouldShow ? '' : 'none';\n }\n }\n \n searchInput.addEventListener('input', filterTable);\n filterSelect.addEventListener('change', filterTable);\n});\n\n---end---\n\nThis creates a beautiful, responsive car database with search and filter functionality. The domain name \"cars.scroll.pub\" is simple and memorable. The database includes key vehicle specifications like year, make, model, trim, engine, and price. The UI features a gradient hero section, clean table design, and interactive search functionality. The design is mobile-responsive and follows accessibility best practices." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 706, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 1620 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..18fb650 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,3 @@ +# cars.scroll.pub + +database generated by Claude from prompt: Car database based on car year, model, make and trim \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..a1edd80 --- /dev/null +++ b/script.js @@ -0,0 +1,39 @@ +document.addEventListener('DOMContentLoaded', function() { + const searchInput = document.getElementById('searchInput'); + const filterSelect = document.getElementById('filterSelect'); + const table = document.querySelector('table'); + + function filterTable() { + const searchTerm = searchInput.value.toLowerCase(); + const filterCategory = filterSelect.value; + const rows = table.getElementsByTagName('tr'); + + for (let i = 1; i < rows.length; i++) { + const row = rows[i]; + const cells = row.getElementsByTagName('td'); + let shouldShow = false; + + if (filterCategory === 'all') { + shouldShow = Array.from(cells).some(cell => + cell.textContent.toLowerCase().includes(searchTerm) + ); + } else { + const categoryIndex = { + 'make': 2, + 'model': 3, + 'year': 1, + 'trim': 4 + }[filterCategory]; + + shouldShow = cells[categoryIndex].textContent + .toLowerCase() + .includes(searchTerm); + } + + row.style.display = shouldShow ? '' : 'none'; + } + } + + searchInput.addEventListener('input', filterTable); + filterSelect.addEventListener('change', filterTable); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..2e92655 --- /dev/null +++ b/style.css @@ -0,0 +1,87 @@ +:root { + --primary-color: #2c3e50; + --accent-color: #3498db; + --background-color: #f8f9fa; + --text-color: #2c3e50; +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + margin: 0; + padding: 0; + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.6; +} + +.hero { + background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); + color: white; + padding: 4rem 2rem; + text-align: center; + margin-bottom: 2rem; +} + +.hero h1 { + font-size: 3rem; + margin-bottom: 1rem; +} + +.search-container { + max-width: 800px; + margin: 0 auto 2rem; + padding: 0 1rem; + display: flex; + gap: 1rem; +} + +input, select { + padding: 0.8rem; + border: 2px solid var(--accent-color); + border-radius: 6px; + font-size: 1rem; +} + +input { + flex: 1; +} + +table { + width: 100%; + max-width: 1200px; + margin: 0 auto; + border-collapse: collapse; + background: white; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + border-radius: 8px; + overflow: hidden; +} + +th, td { + padding: 1rem; + text-align: left; + border-bottom: 1px solid #eee; +} + +th { + background-color: var(--primary-color); + color: white; +} + +tr:hover { + background-color: #f5f5f5; +} + +@media (max-width: 768px) { + .search-container { + flex-direction: column; + } + + table { + font-size: 0.9rem; + } + + th, td { + padding: 0.8rem; + } +}