commit baf791d562af99ba9739070759861a4899a3a6e6
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 23:36:19 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..3b1b9cc
--- /dev/null
+++ b/body.html
@@ -0,0 +1,29 @@
+<main class="calculator-container">
+ <h1>Fun Kids Calculator</h1>
+ <div class="calculator">
+ <div class="display">
+ <input type="text" id="result" readonly>
+ </div>
+ <div class="buttons">
+ <button class="number" data-value="7">7</button>
+ <button class="number" data-value="8">8</button>
+ <button class="number" data-value="9">9</button>
+ <button class="operator" data-value="/">÷</button>
+
+ <button class="number" data-value="4">4</button>
+ <button class="number" data-value="5">5</button>
+ <button class="number" data-value="6">6</button>
+ <button class="operator" data-value="*">×</button>
+
+ <button class="number" data-value="1">1</button>
+ <button class="number" data-value="2">2</button>
+ <button class="number" data-value="3">3</button>
+ <button class="operator" data-value="-">-</button>
+
+ <button class="number" data-value="0">0</button>
+ <button class="clear" data-value="C">C</button>
+ <button class="equals" data-value="=">=</button>
+ <button class="operator" data-value="+">+</button>
+ </div>
+ </div>
+</main>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..c0f1391
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://kidscalc.scroll.pub
+metaTags
+editButton /edit.html
+title Fun Kids Calculator
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..6cad119
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01GM8M8mod3NWEi5ijq76qse",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a fun and educational calculator website for children.\n\n---domain---\nkidscalc.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://kidscalc.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Fun Kids Calculator\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<main class=\"calculator-container\">\n <h1>Fun Kids Calculator</h1>\n <div class=\"calculator\">\n <div class=\"display\">\n <input type=\"text\" id=\"result\" readonly>\n </div>\n <div class=\"buttons\">\n <button class=\"number\" data-value=\"7\">7</button>\n <button class=\"number\" data-value=\"8\">8</button>\n <button class=\"number\" data-value=\"9\">9</button>\n <button class=\"operator\" data-value=\"/\">÷</button>\n \n <button class=\"number\" data-value=\"4\">4</button>\n <button class=\"number\" data-value=\"5\">5</button>\n <button class=\"number\" data-value=\"6\">6</button>\n <button class=\"operator\" data-value=\"*\">×</button>\n \n <button class=\"number\" data-value=\"1\">1</button>\n <button class=\"number\" data-value=\"2\">2</button>\n <button class=\"number\" data-value=\"3\">3</button>\n <button class=\"operator\" data-value=\"-\">-</button>\n \n <button class=\"number\" data-value=\"0\">0</button>\n <button class=\"clear\" data-value=\"C\">C</button>\n <button class=\"equals\" data-value=\"=\">=</button>\n <button class=\"operator\" data-value=\"+\">+</button>\n </div>\n </div>\n</main>\n\n---style.css---\n:root {\n --primary: #ff6b6b;\n --secondary: #4ecdc4;\n --accent: #ffe66d;\n --background: #f7f7f7;\n --text: #2d3436;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Comic Sans MS', cursive, sans-serif;\n background-color: var(--background);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.calculator-container {\n text-align: center;\n padding: 2rem;\n}\n\nh1 {\n color: var(--primary);\n margin-bottom: 2rem;\n font-size: 2.5rem;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\n}\n\n.calculator {\n background: white;\n border-radius: 20px;\n padding: 1.5rem;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n max-width: 400px;\n margin: 0 auto;\n}\n\n.display {\n margin-bottom: 1.5rem;\n}\n\n#result {\n width: 100%;\n height: 60px;\n font-size: 2rem;\n text-align: right;\n padding: 0.5rem;\n border: 3px solid var(--secondary);\n border-radius: 10px;\n background: var(--background);\n color: var(--text);\n transition: all 0.3s ease;\n}\n\n.buttons {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 10px;\n}\n\nbutton {\n padding: 1rem;\n font-size: 1.5rem;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n transition: transform 0.2s, background-color 0.2s;\n}\n\nbutton:hover {\n transform: scale(1.05);\n}\n\n.number {\n background-color: var(--accent);\n color: var(--text);\n}\n\n.operator {\n background-color: var(--primary);\n color: white;\n}\n\n.equals {\n background-color: var(--secondary);\n color: white;\n}\n\n.clear {\n background-color: #ff9f43;\n color: white;\n}\n\n.success {\n animation: glow 0.5s ease-in-out;\n}\n\n@keyframes glow {\n 0% { box-shadow: 0 0 5px rgba(78, 205, 196, 0.5); }\n 50% { box-shadow: 0 0 20px rgba(78, 205, 196, 0.8); }\n 100% { box-shadow: 0 0 5px rgba(78, 205, 196, 0.5); }\n}\n\n@media (max-width: 480px) {\n .calculator {\n padding: 1rem;\n }\n \n button {\n padding: 0.8rem;\n font-size: 1.2rem;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n #result {\n font-size: 1.5rem;\n height: 50px;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const result = document.getElementById('result');\n let currentValue = '';\n let operator = '';\n let previousValue = '';\n\n document.querySelectorAll('button').forEach(button => {\n button.addEventListener('click', () => {\n const value = button.dataset.value;\n\n if (value >= '0' && value <= '9') {\n currentValue += value;\n result.value = currentValue;\n } else if (['+', '-', '*', '/'].includes(value)) {\n operator = value;\n previousValue = currentValue;\n currentValue = '';\n } else if (value === '=') {\n if (previousValue && currentValue && operator) {\n const num1 = parseFloat(previousValue);\n const num2 = parseFloat(currentValue);\n let calculatedResult = 0;\n\n switch(operator) {\n case '+': calculatedResult = num1 + num2; break;\n case '-': calculatedResult = num1 - num2; break;\n case '*': calculatedResult = num1 * num2; break;\n case '/': calculatedResult = num1 / num2; break;\n }\n\n result.value = calculatedResult;\n currentValue = calculatedResult.toString();\n previousValue = '';\n operator = '';\n\n // Add success animation\n result.classList.add('success');\n setTimeout(() => {\n result.classList.remove('success');\n }, 500);\n }\n } else if (value === 'C') {\n currentValue = '';\n previousValue = '';\n operator = '';\n result.value = '';\n }\n });\n });\n});\n\n---end---\n\nThis calculator features:\n- Bright, kid-friendly colors\n- Large, easy-to-read buttons\n- Smooth animations and hover effects\n- A glowing animation when calculating results\n- Responsive design for all screen sizes\n- Simple and intuitive interface\n- Comic Sans font for a playful feel\n- Soft shadows and rounded corners\n- Clear visual feedback for interactions\n\nThe color scheme uses warm and friendly colors that are appealing to children while maintaining good contrast for readability. The layout is spacious and the buttons are large enough for small fingers to tap accurately on both mobile and desktop devices."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 385,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1923
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..41cfe57
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# kidscalc.scroll.pub
+Website generated by Claude from prompt: Okay I need HTML CSS code for a simple calculator that does addition subtraction multiplication and division if you could give that so that I can run that in a browser make sure it is a friendly for both mobile and desktop screens it was just and make it a bit colourful because it is going to be used by children of 4 to 6 years of age and add some animations so that never the getting answer the you know so if I had enter to plus 9 when you get the answer the green the screen glows as green something like that
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e975f32
--- /dev/null
+++ b/script.js
@@ -0,0 +1,50 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const result = document.getElementById('result');
+ let currentValue = '';
+ let operator = '';
+ let previousValue = '';
+
+ document.querySelectorAll('button').forEach(button => {
+ button.addEventListener('click', () => {
+ const value = button.dataset.value;
+
+ if (value >= '0' && value <= '9') {
+ currentValue += value;
+ result.value = currentValue;
+ } else if (['+', '-', '*', '/'].includes(value)) {
+ operator = value;
+ previousValue = currentValue;
+ currentValue = '';
+ } else if (value === '=') {
+ if (previousValue && currentValue && operator) {
+ const num1 = parseFloat(previousValue);
+ const num2 = parseFloat(currentValue);
+ let calculatedResult = 0;
+
+ switch(operator) {
+ case '+': calculatedResult = num1 + num2; break;
+ case '-': calculatedResult = num1 - num2; break;
+ case '*': calculatedResult = num1 * num2; break;
+ case '/': calculatedResult = num1 / num2; break;
+ }
+
+ result.value = calculatedResult;
+ currentValue = calculatedResult.toString();
+ previousValue = '';
+ operator = '';
+
+ // Add success animation
+ result.classList.add('success');
+ setTimeout(() => {
+ result.classList.remove('success');
+ }, 500);
+ }
+ } else if (value === 'C') {
+ currentValue = '';
+ previousValue = '';
+ operator = '';
+ result.value = '';
+ }
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..b8a9d23
--- /dev/null
+++ b/style.css
@@ -0,0 +1,129 @@
+:root {
+ --primary: #ff6b6b;
+ --secondary: #4ecdc4;
+ --accent: #ffe66d;
+ --background: #f7f7f7;
+ --text: #2d3436;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Comic Sans MS', cursive, sans-serif;
+ background-color: var(--background);
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.calculator-container {
+ text-align: center;
+ padding: 2rem;
+}
+
+h1 {
+ color: var(--primary);
+ margin-bottom: 2rem;
+ font-size: 2.5rem;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+}
+
+.calculator {
+ background: white;
+ border-radius: 20px;
+ padding: 1.5rem;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+ max-width: 400px;
+ margin: 0 auto;
+}
+
+.display {
+ margin-bottom: 1.5rem;
+}
+
+#result {
+ width: 100%;
+ height: 60px;
+ font-size: 2rem;
+ text-align: right;
+ padding: 0.5rem;
+ border: 3px solid var(--secondary);
+ border-radius: 10px;
+ background: var(--background);
+ color: var(--text);
+ transition: all 0.3s ease;
+}
+
+.buttons {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 10px;
+}
+
+button {
+ padding: 1rem;
+ font-size: 1.5rem;
+ border: none;
+ border-radius: 10px;
+ cursor: pointer;
+ transition: transform 0.2s, background-color 0.2s;
+}
+
+button:hover {
+ transform: scale(1.05);
+}
+
+.number {
+ background-color: var(--accent);
+ color: var(--text);
+}
+
+.operator {
+ background-color: var(--primary);
+ color: white;
+}
+
+.equals {
+ background-color: var(--secondary);
+ color: white;
+}
+
+.clear {
+ background-color: #ff9f43;
+ color: white;
+}
+
+.success {
+ animation: glow 0.5s ease-in-out;
+}
+
+@keyframes glow {
+ 0% { box-shadow: 0 0 5px rgba(78, 205, 196, 0.5); }
+ 50% { box-shadow: 0 0 20px rgba(78, 205, 196, 0.8); }
+ 100% { box-shadow: 0 0 5px rgba(78, 205, 196, 0.5); }
+}
+
+@media (max-width: 480px) {
+ .calculator {
+ padding: 1rem;
+ }
+
+ button {
+ padding: 0.8rem;
+ font-size: 1.2rem;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ #result {
+ font-size: 1.5rem;
+ height: 50px;
+ }
+}