Changes to pentagon-calc.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Pentagon Calculator
+ 
+ 
+ 
+   
+     
+       
+     
+ 
+     
+       
+       
+       
+       
+       
+       
+       
+       
+       
+       
+       
+       
+       
+       
+       
+       
+       
+     
+   
+ 
+ 
+ 
+   Created with geometric precision
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://pentagon-calc.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Pentagon Calculator
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "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\n  Pentagon Calculator\n\n\n\n  \n    \n      \n    
\n    \n    \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n    
\n  
\n\n\n\n  Created with geometric precision
\n\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
+   }
+ }

readme.scroll

Changed around line 1

+ # pentagon-calc.scroll.pub

+ Website generated by Claude from prompt: Сайт калькулятор з п'ятикутними кнопками

script.js

Changed around line 1
+ 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();
+   }
+ });

style.css

Changed around line 1
+ :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;
+   }
+ }