concepts.scroll
Changed around line 1
+ measures.parsers
+
+ id Basic
+ function arithmetic
+ complexity 1
+ inputs 2
+ operations add,subtract,multiply,divide
+ uiComponents number-inputs,operation-buttons,equals-button,display
+
+ id Scientific
+ function advanced-math
+ complexity 7
+ inputs 2
+ operations trig,log,power,root
+ uiComponents scientific-buttons,memory-functions,degree-radian-switch
+
+ id Financial
+ function money-calculations
+ complexity 6
+ inputs 4
+ operations compound-interest,amortization,depreciation
+ uiComponents currency-selector,decimal-precision,percentage-inputs
+
+ id Graphing
+ function plot-equations
+ complexity 8
+ inputs 3
+ operations algebraic-functions,coordinates,plotting
+ uiComponents canvas,zoom-controls,axis-settings
+
+ id Unit
+ function conversions
+ complexity 4
+ inputs 2
+ operations multiplication,division
+ uiComponents unit-selectors,conversion-tables,dropdown-menus
footer.scroll
Changed around line 1
+ importOnly
+ center
+ scrollVersionLink
header.scroll
Changed around line 1
+ importOnly
+ buildHtml
+ homeButton
+ metaTags
+ editButton
+ editBaseUrl /edit.html?folderName=calcs.scroll.pub&fileName=
+ metaTags
+ style.css
+ script.js
index.scroll
Changed around line 1
+ title Calculator Builder's Knowledge Base
+ header.scroll
+
+ # Calculator Development Guide
+ This knowledge base provides essential information for building different types of calculators, from basic arithmetic to complex scientific tools.
+
+ ## Types of Calculators
+ Each calculator type has unique requirements and complexity levels. Below is our comprehensive database of calculator specifications and requirements.
+
+ concepts.scroll
+ concepts
+ printTable
+
+ footer.scroll
measures.parsers
Changed around line 1
+ idParser
+ extends abstractIdParser
+ functionParser
+ extends abstractStringMeasureParser
+ description The primary mathematical function or purpose of this calculator type
+ complexityParser
+ extends abstractIntegerMeasureParser
+ description Complexity rating from 1-10, where 1 is simplest and 10 is most complex
+ inputsParser
+ extends abstractIntegerMeasureParser
+ description Typical number of input fields needed
+ operationsParser
+ extends abstractStringMeasureParser
+ description Core mathematical operations required
+ uiComponentsParser
+ extends abstractStringMeasureParser
+ description Essential UI components needed for implementation
prompt.json
Changed around line 1
+ {
+ "id": "msg_011ee4TZeUsRcLPg6TSNPDSP",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a knowledge base for building calculators. Here's the complete response:\n\n---domain---\ncalcs.scroll.pub\n\n---measures.parsers---\nidParser\n extends abstractIdParser\nfunctionParser\n extends abstractStringMeasureParser\n description The primary mathematical function or purpose of this calculator type\ncomplexityParser\n extends abstractIntegerMeasureParser\n description Complexity rating from 1-10, where 1 is simplest and 10 is most complex\ninputsParser\n extends abstractIntegerMeasureParser\n description Typical number of input fields needed\noperationsParser\n extends abstractStringMeasureParser\n description Core mathematical operations required\nuiComponentsParser\n extends abstractStringMeasureParser\n description Essential UI components needed for implementation\n\n---concepts.scroll---\nmeasures.parsers\n\nid Basic\nfunction arithmetic\ncomplexity 1\ninputs 2\noperations add,subtract,multiply,divide\nuiComponents number-inputs,operation-buttons,equals-button,display\n\nid Scientific\nfunction advanced-math\ncomplexity 7\ninputs 2\noperations trig,log,power,root\nuiComponents scientific-buttons,memory-functions,degree-radian-switch\n\nid Financial\nfunction money-calculations\ncomplexity 6\ninputs 4\noperations compound-interest,amortization,depreciation\nuiComponents currency-selector,decimal-precision,percentage-inputs\n\nid Graphing\nfunction plot-equations\ncomplexity 8\ninputs 3\noperations algebraic-functions,coordinates,plotting\nuiComponents canvas,zoom-controls,axis-settings\n\nid Unit\nfunction conversions\ncomplexity 4\ninputs 2\noperations multiplication,division\nuiComponents unit-selectors,conversion-tables,dropdown-menus\n\n---index.scroll---\ntitle Calculator Builder's Knowledge Base\nheader.scroll\n\n# Calculator Development Guide\nThis knowledge base provides essential information for building different types of calculators, from basic arithmetic to complex scientific tools.\n\n## Types of Calculators\nEach calculator type has unique requirements and complexity levels. Below is our comprehensive database of calculator specifications and requirements.\n\nconcepts.scroll\nconcepts\n printTable\n\nfooter.scroll\n\n---header.scroll---\nimportOnly\nbuildHtml\nhomeButton\nmetaTags\neditButton\neditBaseUrl /edit.html?folderName=calcs.scroll.pub&fileName=\nmetaTags\nstyle.css\nscript.js\n\n---footer.scroll---\nimportOnly\ncenter\nscrollVersionLink\n\n---style.css---\n:root {\n --primary: #2b6cb0;\n --secondary: #4299e1;\n --background: #f7fafc;\n --text: #2d3748;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--text);\n background: var(--background);\n margin: 0;\n padding: 0;\n}\n\n.content {\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n}\n\nh1, h2 {\n color: var(--primary);\n margin-bottom: 1.5rem;\n}\n\nh1 {\n font-size: 2.5rem;\n border-bottom: 4px solid var(--secondary);\n padding-bottom: 0.5rem;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin: 2rem 0;\n background: white;\n box-shadow: 0 4px 6px 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 #e2e8f0;\n}\n\nth {\n background: var(--primary);\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\ntr:hover {\n background: #ebf8ff;\n}\n\n@media (max-width: 768px) {\n .content {\n padding: 1rem;\n }\n \n table {\n display: block;\n overflow-x: auto;\n }\n \n th, td {\n padding: 0.75rem;\n }\n \n h1 {\n font-size: 2rem;\n }\n}\n\n.footer {\n text-align: center;\n padding: 2rem;\n background: var(--primary);\n color: white;\n margin-top: 3rem;\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Add smooth scrolling\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 highlighting\n const tables = document.querySelectorAll('table');\n tables.forEach(table => {\n const rows = table.getElementsByTagName('tr');\n for (let row of rows) {\n row.addEventListener('mouseenter', function() {\n this.style.transition = 'background-color 0.3s ease';\n });\n }\n });\n});\n\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 696,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1325
+ }
+ }
readme.scroll
Changed around line 1
+ # calcs.scroll.pub
+
+ Prompt: database
+ Agent: claude
+ Model: claude-3-5-sonnet-20241022
+
+ ## User prompt
+ build a calculator
+
+ ## System prompt
+ You are an expert web, scroll, and knowledge base developer. Create a knowledge base using ScrollSets based on this request: "build a calculator"
+
+ 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', function() {
+ // Add smooth scrolling
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Add table row highlighting
+ const tables = document.querySelectorAll('table');
+ tables.forEach(table => {
+ const rows = table.getElementsByTagName('tr');
+ for (let row of rows) {
+ row.addEventListener('mouseenter', function() {
+ this.style.transition = 'background-color 0.3s ease';
+ });
+ }
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary: #2b6cb0;
+ --secondary: #4299e1;
+ --background: #f7fafc;
+ --text: #2d3748;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, sans-serif;
+ line-height: 1.6;
+ color: var(--text);
+ background: var(--background);
+ margin: 0;
+ padding: 0;
+ }
+
+ .content {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+ }
+
+ h1, h2 {
+ color: var(--primary);
+ margin-bottom: 1.5rem;
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ border-bottom: 4px solid var(--secondary);
+ padding-bottom: 0.5rem;
+ }
+
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 2rem 0;
+ background: white;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ border-radius: 8px;
+ overflow: hidden;
+ }
+
+ th, td {
+ padding: 1rem;
+ text-align: left;
+ border-bottom: 1px solid #e2e8f0;
+ }
+
+ th {
+ background: var(--primary);
+ color: white;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ }
+
+ tr:hover {
+ background: #ebf8ff;
+ }
+
+ @media (max-width: 768px) {
+ .content {
+ padding: 1rem;
+ }
+
+ table {
+ display: block;
+ overflow-x: auto;
+ }
+
+ th, td {
+ padding: 0.75rem;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+ }
+
+ .footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary);
+ color: white;
+ margin-top: 3rem;
+ }