commit fa1136475bb1a3e021e6dece2ea1c31f4ffafb70
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 12:35:28 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..7d6c414
--- /dev/null
+++ b/body.html
@@ -0,0 +1,35 @@
+<header>
+ <h1>Pentagon Calculator</h1>
+</header>
+
+<main>
+ <div class="calculator">
+ <div class="display">
+ <input type="text" id="result" readonly>
+ </div>
+
+ <div class="keypad">
+ <button class="pentagon-btn">7</button>
+ <button class="pentagon-btn">8</button>
+ <button class="pentagon-btn">9</button>
+ <button class="pentagon-btn operator">÷</button>
+ <button class="pentagon-btn">4</button>
+ <button class="pentagon-btn">5</button>
+ <button class="pentagon-btn">6</button>
+ <button class="pentagon-btn operator">×</button>
+ <button class="pentagon-btn">1</button>
+ <button class="pentagon-btn">2</button>
+ <button class="pentagon-btn">3</button>
+ <button class="pentagon-btn operator">-</button>
+ <button class="pentagon-btn">0</button>
+ <button class="pentagon-btn">.</button>
+ <button class="pentagon-btn clear">C</button>
+ <button class="pentagon-btn operator">+</button>
+ <button class="pentagon-btn equals">=</button>
+ </div>
+ </div>
+</main>
+
+<footer>
+ <p>Created with geometric precision</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..234588d
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://pentagon-calc.scroll.pub
+metaTags
+editButton /edit.html
+title Pentagon Calculator
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..7044532
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01WuQrQV4Z2uLxQvDsFuviwm",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a pentagon calculator website with a unique design. For the domain, I suggest:\n\n---domain---\npentagon-calc.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://pentagon-calc.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Pentagon Calculator\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>Pentagon Calculator</h1>\n</header>\n\n<main>\n <div class=\"calculator\">\n <div class=\"display\">\n <input type=\"text\" id=\"result\" readonly>\n </div>\n \n <div class=\"keypad\">\n <button class=\"pentagon-btn\">7</button>\n <button class=\"pentagon-btn\">8</button>\n <button class=\"pentagon-btn\">9</button>\n <button class=\"pentagon-btn operator\">÷</button>\n <button class=\"pentagon-btn\">4</button>\n <button class=\"pentagon-btn\">5</button>\n <button class=\"pentagon-btn\">6</button>\n <button class=\"pentagon-btn operator\">×</button>\n <button class=\"pentagon-btn\">1</button>\n <button class=\"pentagon-btn\">2</button>\n <button class=\"pentagon-btn\">3</button>\n <button class=\"pentagon-btn operator\">-</button>\n <button class=\"pentagon-btn\">0</button>\n <button class=\"pentagon-btn\">.</button>\n <button class=\"pentagon-btn clear\">C</button>\n <button class=\"pentagon-btn operator\">+</button>\n <button class=\"pentagon-btn equals\">=</button>\n </div>\n </div>\n</main>\n\n<footer>\n <p>Created with geometric precision</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2c3e50;\n --secondary: #3498db;\n --accent: #e74c3c;\n --background: #ecf0f1;\n --text: #2c3e50;\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 background-color: var(--background);\n color: var(--text);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n text-align: center;\n padding: 2rem;\n}\n\nh1 {\n font-size: 2.5rem;\n color: var(--primary);\n}\n\nmain {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 1rem;\n}\n\n.calculator {\n background: white;\n border-radius: 15px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n padding: 2rem;\n width: 100%;\n max-width: 400px;\n}\n\n.display {\n margin-bottom: 1.5rem;\n}\n\n#result {\n width: 100%;\n padding: 1rem;\n font-size: 2rem;\n text-align: right;\n border: none;\n background: var(--background);\n border-radius: 8px;\n}\n\n.keypad {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 1rem;\n}\n\n.pentagon-btn {\n position: relative;\n width: 100%;\n aspect-ratio: 1;\n background: var(--primary);\n color: white;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n transition: transform 0.2s;\n clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);\n}\n\n.pentagon-btn:hover {\n transform: scale(1.05);\n background: var(--secondary);\n}\n\n.pentagon-btn.operator {\n background: var(--secondary);\n}\n\n.pentagon-btn.equals {\n background: var(--accent);\n grid-column: span 4;\n}\n\n.pentagon-btn.clear {\n background: var(--accent);\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background: var(--primary);\n color: white;\n}\n\n@media (max-width: 480px) {\n .calculator {\n padding: 1rem;\n }\n \n .pentagon-btn {\n font-size: 1.2rem;\n }\n \n #result {\n font-size: 1.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const display = document.getElementById('result');\n let currentValue = '';\n let previousValue = '';\n let operation = null;\n let shouldResetDisplay = false;\n\n document.querySelectorAll('.pentagon-btn').forEach(button => {\n button.addEventListener('click', () => {\n const value = button.textContent;\n\n if (value >= '0' && value <= '9' || value === '.') {\n if (shouldResetDisplay) {\n currentValue = '';\n shouldResetDisplay = false;\n }\n if (value === '.' && currentValue.includes('.')) return;\n currentValue += value;\n updateDisplay();\n } else if ('+-×÷'.includes(value)) {\n if (currentValue !== '') {\n if (previousValue !== '') {\n calculate();\n }\n previousValue = currentValue;\n operation = value;\n shouldResetDisplay = true;\n }\n } else if (value === '=') {\n calculate();\n } else if (value === 'C') {\n clear();\n }\n });\n });\n\n function updateDisplay() {\n display.value = currentValue;\n }\n\n function calculate() {\n if (previousValue === '' || currentValue === '') return;\n \n const prev = parseFloat(previousValue);\n const curr = parseFloat(currentValue);\n \n switch(operation) {\n case '+':\n currentValue = (prev + curr).toString();\n break;\n case '-':\n currentValue = (prev - curr).toString();\n break;\n case '×':\n currentValue = (prev * curr).toString();\n break;\n case '÷':\n if (curr === 0) {\n currentValue = 'Error';\n } else {\n currentValue = (prev / curr).toString();\n }\n break;\n }\n \n operation = null;\n previousValue = '';\n updateDisplay();\n shouldResetDisplay = true;\n }\n\n function clear() {\n currentValue = '';\n previousValue = '';\n operation = null;\n updateDisplay();\n }\n});\n\n---end---\n\nThis creates a beautiful calculator with pentagon-shaped buttons. Features include:\n\n1. Responsive design that works on all devices\n2. Unique pentagon-shaped buttons with hover effects\n3. Clean, modern color scheme\n4. Smooth animations and transitions\n5. Full calculator functionality\n6. Error handling for division by zero\n7. Proper decimal point handling\n8. Clear button functionality\n9. Professional styling with shadow effects\n10. Accessible button controls\n\nThe calculator uses CSS clip-path for the pentagon shapes and includes a grid layout for button arrangement. The JavaScript handles all calculator operations with proper error checking and display updates."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 291,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1896
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..7768dde
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# pentagon-calc.scroll.pub
+Website generated by Claude from prompt: Сайт калькулятор з п'ятикутними кнопками
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..cc908fe
--- /dev/null
+++ b/script.js
@@ -0,0 +1,78 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const display = document.getElementById('result');
+ let currentValue = '';
+ let previousValue = '';
+ let operation = null;
+ let shouldResetDisplay = false;
+
+ document.querySelectorAll('.pentagon-btn').forEach(button => {
+ button.addEventListener('click', () => {
+ const value = button.textContent;
+
+ if (value >= '0' && value <= '9' || value === '.') {
+ if (shouldResetDisplay) {
+ currentValue = '';
+ shouldResetDisplay = false;
+ }
+ if (value === '.' && currentValue.includes('.')) return;
+ currentValue += value;
+ updateDisplay();
+ } else if ('+-×÷'.includes(value)) {
+ if (currentValue !== '') {
+ if (previousValue !== '') {
+ calculate();
+ }
+ previousValue = currentValue;
+ operation = value;
+ shouldResetDisplay = true;
+ }
+ } else if (value === '=') {
+ calculate();
+ } else if (value === 'C') {
+ clear();
+ }
+ });
+ });
+
+ function updateDisplay() {
+ display.value = currentValue;
+ }
+
+ function calculate() {
+ if (previousValue === '' || currentValue === '') return;
+
+ const prev = parseFloat(previousValue);
+ const curr = parseFloat(currentValue);
+
+ switch(operation) {
+ case '+':
+ currentValue = (prev + curr).toString();
+ break;
+ case '-':
+ currentValue = (prev - curr).toString();
+ break;
+ case '×':
+ currentValue = (prev * curr).toString();
+ break;
+ case '÷':
+ if (curr === 0) {
+ currentValue = 'Error';
+ } else {
+ currentValue = (prev / curr).toString();
+ }
+ break;
+ }
+
+ operation = null;
+ previousValue = '';
+ updateDisplay();
+ shouldResetDisplay = true;
+ }
+
+ function clear() {
+ currentValue = '';
+ previousValue = '';
+ operation = null;
+ updateDisplay();
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..bf0df70
--- /dev/null
+++ b/style.css
@@ -0,0 +1,121 @@
+:root {
+ --primary: #2c3e50;
+ --secondary: #3498db;
+ --accent: #e74c3c;
+ --background: #ecf0f1;
+ --text: #2c3e50;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background-color: var(--background);
+ color: var(--text);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+header {
+ text-align: center;
+ padding: 2rem;
+}
+
+h1 {
+ font-size: 2.5rem;
+ color: var(--primary);
+}
+
+main {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 1rem;
+}
+
+.calculator {
+ background: white;
+ border-radius: 15px;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+ padding: 2rem;
+ width: 100%;
+ max-width: 400px;
+}
+
+.display {
+ margin-bottom: 1.5rem;
+}
+
+#result {
+ width: 100%;
+ padding: 1rem;
+ font-size: 2rem;
+ text-align: right;
+ border: none;
+ background: var(--background);
+ border-radius: 8px;
+}
+
+.keypad {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 1rem;
+}
+
+.pentagon-btn {
+ position: relative;
+ width: 100%;
+ aspect-ratio: 1;
+ background: var(--primary);
+ color: white;
+ border: none;
+ font-size: 1.5rem;
+ cursor: pointer;
+ transition: transform 0.2s;
+ clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
+}
+
+.pentagon-btn:hover {
+ transform: scale(1.05);
+ background: var(--secondary);
+}
+
+.pentagon-btn.operator {
+ background: var(--secondary);
+}
+
+.pentagon-btn.equals {
+ background: var(--accent);
+ grid-column: span 4;
+}
+
+.pentagon-btn.clear {
+ background: var(--accent);
+}
+
+footer {
+ text-align: center;
+ padding: 1rem;
+ background: var(--primary);
+ color: white;
+}
+
+@media (max-width: 480px) {
+ .calculator {
+ padding: 1rem;
+ }
+
+ .pentagon-btn {
+ font-size: 1.2rem;
+ }
+
+ #result {
+ font-size: 1.5rem;
+ }
+}