concepts.scroll
Changed around line 1
+ measures.parsers
+
+ id TemporalFocal
+ location temporal lobe mesial
+ size 3
+ onsetAge 15
+ seizureFreq 12
+ resectability 8
+
+ id FrontalFocal
+ location frontal lobe lateral
+ size 4
+ onsetAge 8
+ seizureFreq 20
+ resectability 6
+
+ id InsularFocal
+ location insular cortex
+ size 2
+ onsetAge 12
+ seizureFreq 15
+ resectability 4
+
+ id HippocampalSclerosis
+ location hippocampus
+ size 2
+ onsetAge 10
+ seizureFreq 8
+ resectability 9
+
+ id FocalCorticalDysplasia
+ location variable cortical
+ size 5
+ onsetAge 4
+ seizureFreq 25
+ resectability 7
index.scroll
Changed around line 1
+ title Epileptogenic Zone Database
+ header.scroll
+
+ viewport
+ description A comprehensive database of epileptogenic zone characteristics and patterns
+
+ html
+ div class hero
+ h1 Epileptogenic Zone Database
+ p Understanding the origins of seizure activity in the brain
+
+ div class intro
+ h2 About This Database
+ p This knowledge base contains detailed information about different types of epileptogenic zones, their characteristics, and clinical relevance. The data helps in surgical planning and patient prognosis.
+
+ concepts.scroll
+ concepts
+ printTable
+
+ footer.scroll
measures.parsers
Changed around line 1
+ idParser
+ extends abstractIdParser
+ locationParser
+ extends abstractStringMeasureParser
+ description The anatomical location of the epileptogenic zone in the brain
+ sizeParser
+ extends abstractIntegerMeasureParser
+ description The approximate size of the zone in cubic centimeters
+ onsetAgeParser
+ extends abstractIntegerMeasureParser
+ description Typical age of seizure onset in years
+ seizureFreqParser
+ extends abstractIntegerMeasureParser
+ description Average number of seizures per month
+ resectabilityParser
+ extends abstractIntegerMeasureParser
+ description Likelihood of successful surgical resection on a scale of 1-10
prompt.json
Changed around line 1
+ {
+ "id": "msg_01WY1eAFzfP1FkQHP3XkSsqL",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a knowledge base for epileptogenic zone data.\n\n---domain---\nepileptozone.scroll.pub\n\n---measures.parsers---\nidParser\n extends abstractIdParser\nlocationParser\n extends abstractStringMeasureParser\n description The anatomical location of the epileptogenic zone in the brain\nsizeParser\n extends abstractIntegerMeasureParser\n description The approximate size of the zone in cubic centimeters\nonsetAgeParser\n extends abstractIntegerMeasureParser\n description Typical age of seizure onset in years\nseizureFreqParser\n extends abstractIntegerMeasureParser\n description Average number of seizures per month\nresectabilityParser\n extends abstractIntegerMeasureParser\n description Likelihood of successful surgical resection on a scale of 1-10\n\n---concepts.scroll---\nmeasures.parsers\n\nid TemporalFocal\nlocation temporal lobe mesial\nsize 3\nonsetAge 15\nseizureFreq 12\nresectability 8\n\nid FrontalFocal\nlocation frontal lobe lateral\nsize 4\nonsetAge 8\nseizureFreq 20\nresectability 6\n\nid InsularFocal\nlocation insular cortex\nsize 2\nonsetAge 12\nseizureFreq 15\nresectability 4\n\nid HippocampalSclerosis\nlocation hippocampus\nsize 2\nonsetAge 10\nseizureFreq 8\nresectability 9\n\nid FocalCorticalDysplasia\nlocation variable cortical\nsize 5\nonsetAge 4\nseizureFreq 25\nresectability 7\n\n---index.scroll---\ntitle Epileptogenic Zone Database\nheader.scroll\n\nviewport\n description A comprehensive database of epileptogenic zone characteristics and patterns\n\nhtml\n div class hero\n h1 Epileptogenic Zone Database\n p Understanding the origins of seizure activity in the brain\n \n div class intro\n h2 About This Database\n p This knowledge base contains detailed information about different types of epileptogenic zones, their characteristics, and clinical relevance. The data helps in surgical planning and patient prognosis.\n\nconcepts.scroll\nconcepts\n printTable\n\nfooter.scroll\n\n---style.css---\n:root {\n --primary: #2d3436;\n --secondary: #0984e3;\n --accent: #00cec9;\n --background: #f5f6fa;\n --text: #2d3436;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n line-height: 1.6;\n color: var(--text);\n background: var(--background);\n}\n\n.hero {\n background: linear-gradient(135deg, var(--secondary), var(--accent));\n color: white;\n padding: 4rem 2rem;\n text-align: center;\n margin-bottom: 2rem;\n}\n\n.hero h1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.intro {\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem;\n}\n\ntable {\n width: 100%;\n max-width: 1200px;\n margin: 2rem auto;\n border-collapse: collapse;\n background: white;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n border-radius: 8px;\n overflow: hidden;\n}\n\nth {\n background: var(--secondary);\n color: white;\n padding: 1rem;\n text-align: left;\n}\n\ntd {\n padding: 1rem;\n border-bottom: 1px solid #eee;\n}\n\ntr:hover {\n background: #f8f9fa;\n}\n\n@media (max-width: 768px) {\n .hero h1 {\n font-size: 2rem;\n }\n \n table {\n display: block;\n overflow-x: auto;\n }\n}\n\na {\n color: var(--secondary);\n text-decoration: none;\n}\n\na:hover {\n text-decoration: underline;\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Add smooth scroll behavior\n document.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\n // Add table row hover effect\n const tableRows = document.querySelectorAll('tr');\n tableRows.forEach(row => {\n row.addEventListener('mouseenter', () => {\n row.style.transform = 'scale(1.01)';\n row.style.transition = 'transform 0.2s ease';\n });\n row.addEventListener('mouseleave', () => {\n row.style.transform = 'scale(1)';\n });\n });\n});\n\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 698,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1304
+ }
+ }
readme.scroll
Changed around line 1
+ # epileptozone.scroll.pub
+
+ Prompt: database
+ Agent: claude
+ Model: claude-3-5-sonnet-20241022
+
+ ## User prompt
+ epileptogenic zone data
+
+ ## System prompt
+ You are an expert web, scroll, and knowledge base developer. Create a knowledge base using ScrollSets based on this request: "epileptogenic zone data"
+
+ ScrollSets use the Particles, Parsers, and Scroll stack to define measures, and then encode concepts using those measures.
+
+ For example:
+
+ ---measures.parsers---
+ idParser
+ extends abstractIdParser
+ organismParser
+ extends abstractStringMeasureParser
+ description The organism name mainly associated with the organelle such as human, plant, whale, etc.
+ diameterParser
+ extends abstractIntegerMeasureParser
+ description The diameter of the organelle in nanometers
+ lowParser
+ extends abstractIntegerMeasureParser
+ description For cells that have this kind of organelle, how many are usually found on the low end?
+ medianParser
+ extends abstractIntegerMeasureParser
+ description For cells that have this kind of organelle, how many are usually found in the median?
+ highParser
+ extends abstractIntegerMeasureParser
+ description For cells that have this kind of organelle, how many are usually found on the high end?
+
+ ---concepts.scroll---
+ measures.parsers
+
+ id Mitochondria
+ organism human
+ diameter 1000
+ low 200
+ median 500
+ high 2000
+
+ id Chloroplast
+ organism plant
+ diameter 6000
+ low 20
+ median 40
+ high 100
+
+ id Nucleus
+ organism human
+ diameter 6000
+ low 1
+ median 1
+ high 2
+
+ ---
+
+ Requirements:
+ - Create 5 - 7 measures. The most important things about this topic.
+ - Write 5 concepts. The most important concepts in this topic.
+ - Build a nice homepage iterating over the data.
+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)
+ - Create clean, semantic HTML5
+ - Make it mobile-responsive
+ - Follow modern best practices and accessibility guidelines
+ - Keep it simple but professional
+ - Use only relative links and no external resources
+ - Do not put a copyright symbol or all rights reserved in the footer.
+ - Make it beautiful. Dazzling. Advanced used of CSS.
+
+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:
+
+ ---domain---
+ (domainscroll.pub here)
+ ---measures.parsers---
+ (put measures here)
+ ---concepts.scroll---
+ (put concepts here)
+ ---index.scroll---
+ title (database title here)
+ header.scroll
+ (content here)
+ concepts.scroll
+ concepts
+ printTable
+ footer.scroll
+ ---header.scroll---
+ importOnly
+ buildHtml
+ homeButton
+ metaTags
+ editButton
+ editBaseUrl /edit.html?folderName=(domainscroll.pub here)&fileName=
+ metaTags
+ style.css
+ script.js
+ ---footer.scroll---
+ importOnly
+ center
+ scrollVersionLink
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (JavaScript content here)
+ ---end---
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Add smooth scroll behavior
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Add table row hover effect
+ const tableRows = document.querySelectorAll('tr');
+ tableRows.forEach(row => {
+ row.addEventListener('mouseenter', () => {
+ row.style.transform = 'scale(1.01)';
+ row.style.transition = 'transform 0.2s ease';
+ });
+ row.addEventListener('mouseleave', () => {
+ row.style.transform = 'scale(1)';
+ });
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary: #2d3436;
+ --secondary: #0984e3;
+ --accent: #00cec9;
+ --background: #f5f6fa;
+ --text: #2d3436;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ line-height: 1.6;
+ color: var(--text);
+ background: var(--background);
+ }
+
+ .hero {
+ background: linear-gradient(135deg, var(--secondary), var(--accent));
+ color: white;
+ padding: 4rem 2rem;
+ text-align: center;
+ margin-bottom: 2rem;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ }
+
+ .intro {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 2rem;
+ }
+
+ table {
+ width: 100%;
+ max-width: 1200px;
+ margin: 2rem auto;
+ border-collapse: collapse;
+ background: white;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+ border-radius: 8px;
+ overflow: hidden;
+ }
+
+ th {
+ background: var(--secondary);
+ color: white;
+ padding: 1rem;
+ text-align: left;
+ }
+
+ td {
+ padding: 1rem;
+ border-bottom: 1px solid #eee;
+ }
+
+ tr:hover {
+ background: #f8f9fa;
+ }
+
+ @media (max-width: 768px) {
+ .hero h1 {
+ font-size: 2rem;
+ }
+
+ table {
+ display: block;
+ overflow-x: auto;
+ }
+ }
+
+ a {
+ color: var(--secondary);
+ text-decoration: none;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }