Changes to unitcalc.scroll.pub

root

22 days ago

Initial commit

body.html

Changed around line 1
+ 
+     Length Unit Converter
+     
+         
+             
+             
+         
+ 
+         
+             ⇅
+         
+ 
+         
+             
+             
+         
+     
+ 
+ 
+     Made with precision and care
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://unitcalc.scroll.pub
+ metaTags
+  description A beautiful and easy-to-use length unit converter calculator
+  keywords length converter, unit calculator, measurement converter, distance converter
+ editButton /edit.html
+ title Length Unit Converter | Quick & Easy Conversion Tool
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01DPsLkyxSBu7UeQErc24v4e",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "Let me create a length unit converter calculator with a clean, professional design.\n\n---domain---\nunitcalc.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://unitcalc.scroll.pub\nmetaTags\n description A beautiful and easy-to-use length unit converter calculator\n keywords length converter, unit calculator, measurement converter, distance converter\neditButton /edit.html\ntitle Length Unit Converter | Quick & Easy Conversion Tool\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n    Length Unit Converter\n    \n        \n            \n            \n        
\n        \n        \n        \n        \n            \n            \n        
\n    
\n\n\n    Made with precision and care
\n\n\n---style.css---\n:root {\n    --primary-color: #2c3e50;\n    --secondary-color: #3498db;\n    --background-color: #ecf0f1;\n    --card-background: #ffffff;\n    --text-color: #2c3e50;\n    --border-radius: 12px;\n    --transition: all 0.3s ease;\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: var(--background-color);\n    color: var(--text-color);\n    line-height: 1.6;\n    min-height: 100vh;\n    display: flex;\n    flex-direction: column;\n}\n\n.container {\n    max-width: 600px;\n    margin: 2rem auto;\n    padding: 0 1rem;\n    flex-grow: 1;\n}\n\nh1 {\n    text-align: center;\n    margin-bottom: 2rem;\n    color: var(--primary-color);\n    font-size: 2.5rem;\n    font-weight: 700;\n}\n\n.converter-card {\n    background: var(--card-background);\n    padding: 2rem;\n    border-radius: var(--border-radius);\n    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n    display: flex;\n    flex-direction: column;\n    gap: 1.5rem;\n}\n\n.input-group {\n    display: grid;\n    grid-template-columns: 2fr 1fr;\n    gap: 1rem;\n}\n\ninput, select {\n    padding: 0.8rem;\n    border: 2px solid #e0e0e0;\n    border-radius: var(--border-radius);\n    font-size: 1rem;\n    transition: var(--transition);\n}\n\ninput:focus, select:focus {\n    outline: none;\n    border-color: var(--secondary-color);\n    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);\n}\n\ninput[type=\"number\"] {\n    width: 100%;\n}\n\nselect {\n    background-color: white;\n    cursor: pointer;\n}\n\n#swapBtn {\n    align-self: center;\n    background: var(--secondary-color);\n    border: none;\n    border-radius: 50%;\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: var(--transition);\n}\n\n#swapBtn:hover {\n    transform: scale(1.1);\n    background: var(--primary-color);\n}\n\n.swap-icon {\n    color: white;\n    font-size: 1.5rem;\n}\n\nfooter {\n    text-align: center;\n    padding: 1rem;\n    background: var(--primary-color);\n    color: white;\n    margin-top: auto;\n}\n\n@media (max-width: 480px) {\n    .container {\n        margin: 1rem auto;\n    }\n    \n    h1 {\n        font-size: 2rem;\n    }\n    \n    .converter-card {\n        padding: 1.5rem;\n    }\n    \n    .input-group {\n        grid-template-columns: 1fr;\n    }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n    const fromValue = document.getElementById('fromValue');\n    const toValue = document.getElementById('toValue');\n    const fromUnit = document.getElementById('fromUnit');\n    const toUnit = document.getElementById('toUnit');\n    const swapBtn = document.getElementById('swapBtn');\n\n    const conversionRates = {\n        meters: 1,\n        kilometers: 1000,\n        centimeters: 0.01,\n        millimeters: 0.001,\n        miles: 1609.34,\n        yards: 0.9144,\n        feet: 0.3048,\n        inches: 0.0254\n    };\n\n    function convert() {\n        if (!fromValue.value) {\n            toValue.value = '';\n            return;\n        }\n\n        const inputValue = parseFloat(fromValue.value);\n        const fromRate = conversionRates[fromUnit.value];\n        const toRate = conversionRates[toUnit.value];\n        \n        const result = (inputValue * fromRate) / toRate;\n        toValue.value = result.toFixed(6);\n    }\n\n    function swapUnits() {\n        const tempUnit = fromUnit.value;\n        fromUnit.value = toUnit.value;\n        toUnit.value = tempUnit;\n        \n        const tempValue = fromValue.value;\n        fromValue.value = toValue.value;\n        toValue.value = tempValue;\n        \n        convert();\n    }\n\n    // Event listeners\n    fromValue.addEventListener('input', convert);\n    fromUnit.addEventListener('change', convert);\n    toUnit.addEventListener('change', convert);\n    swapBtn.addEventListener('click', swapUnits);\n\n    // Set initial different units\n    fromUnit.value = 'meters';\n    toUnit.value = 'feet';\n});\n\n---end---\n\nThis creates a beautiful, responsive length unit converter with the following features:\n\n1. Clean, modern design with smooth animations\n2. Support for 8 common length units\n3. Real-time conversion as you type\n4. Unit swap functionality\n5. Mobile-responsive layout\n6. Accessible form controls with ARIA labels\n7. Smooth transitions and hover effects\n8. Error-free number handling\n9. Professional typography and spacing\n10. Clean, semantic HTML structure\n\nThe design uses a sophisticated color scheme with subtle shadows and animations to create a professional look while maintaining simplicity and usability. The layout adjusts seamlessly for mobile devices, and all interactive elements have proper hover states and focus indicators for accessibility."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 280,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2085
+   }
+ }

readme.scroll

Changed around line 1

+ # unitcalc.scroll.pub

+ Website generated by Claude from prompt: I want a calculator webpage that can convert length units

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+     const fromValue = document.getElementById('fromValue');
+     const toValue = document.getElementById('toValue');
+     const fromUnit = document.getElementById('fromUnit');
+     const toUnit = document.getElementById('toUnit');
+     const swapBtn = document.getElementById('swapBtn');
+ 
+     const conversionRates = {
+         meters: 1,
+         kilometers: 1000,
+         centimeters: 0.01,
+         millimeters: 0.001,
+         miles: 1609.34,
+         yards: 0.9144,
+         feet: 0.3048,
+         inches: 0.0254
+     };
+ 
+     function convert() {
+         if (!fromValue.value) {
+             toValue.value = '';
+             return;
+         }
+ 
+         const inputValue = parseFloat(fromValue.value);
+         const fromRate = conversionRates[fromUnit.value];
+         const toRate = conversionRates[toUnit.value];
+ 
+         const result = (inputValue * fromRate) / toRate;
+         toValue.value = result.toFixed(6);
+     }
+ 
+     function swapUnits() {
+         const tempUnit = fromUnit.value;
+         fromUnit.value = toUnit.value;
+         toUnit.value = tempUnit;
+ 
+         const tempValue = fromValue.value;
+         fromValue.value = toValue.value;
+         toValue.value = tempValue;
+ 
+         convert();
+     }
+ 
+     // Event listeners
+     fromValue.addEventListener('input', convert);
+     fromUnit.addEventListener('change', convert);
+     toUnit.addEventListener('change', convert);
+     swapBtn.addEventListener('click', swapUnits);
+ 
+     // Set initial different units
+     fromUnit.value = 'meters';
+     toUnit.value = 'feet';
+ });

style.css

Changed around line 1
+ :root {
+     --primary-color: #2c3e50;
+     --secondary-color: #3498db;
+     --background-color: #ecf0f1;
+     --card-background: #ffffff;
+     --text-color: #2c3e50;
+     --border-radius: 12px;
+     --transition: all 0.3s ease;
+ }
+ 
+ * {
+     margin: 0;
+     padding: 0;
+     box-sizing: border-box;
+ }
+ 
+ body {
+     font-family: 'Segoe UI', system-ui, sans-serif;
+     background: var(--background-color);
+     color: var(--text-color);
+     line-height: 1.6;
+     min-height: 100vh;
+     display: flex;
+     flex-direction: column;
+ }
+ 
+ .container {
+     max-width: 600px;
+     margin: 2rem auto;
+     padding: 0 1rem;
+     flex-grow: 1;
+ }
+ 
+ h1 {
+     text-align: center;
+     margin-bottom: 2rem;
+     color: var(--primary-color);
+     font-size: 2.5rem;
+     font-weight: 700;
+ }
+ 
+ .converter-card {
+     background: var(--card-background);
+     padding: 2rem;
+     border-radius: var(--border-radius);
+     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+     display: flex;
+     flex-direction: column;
+     gap: 1.5rem;
+ }
+ 
+ .input-group {
+     display: grid;
+     grid-template-columns: 2fr 1fr;
+     gap: 1rem;
+ }
+ 
+ input, select {
+     padding: 0.8rem;
+     border: 2px solid #e0e0e0;
+     border-radius: var(--border-radius);
+     font-size: 1rem;
+     transition: var(--transition);
+ }
+ 
+ input:focus, select:focus {
+     outline: none;
+     border-color: var(--secondary-color);
+     box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
+ }
+ 
+ input[type="number"] {
+     width: 100%;
+ }
+ 
+ select {
+     background-color: white;
+     cursor: pointer;
+ }
+ 
+ #swapBtn {
+     align-self: center;
+     background: var(--secondary-color);
+     border: none;
+     border-radius: 50%;
+     width: 40px;
+     height: 40px;
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     cursor: pointer;
+     transition: var(--transition);
+ }
+ 
+ #swapBtn:hover {
+     transform: scale(1.1);
+     background: var(--primary-color);
+ }
+ 
+ .swap-icon {
+     color: white;
+     font-size: 1.5rem;
+ }
+ 
+ footer {
+     text-align: center;
+     padding: 1rem;
+     background: var(--primary-color);
+     color: white;
+     margin-top: auto;
+ }
+ 
+ @media (max-width: 480px) {
+     .container {
+         margin: 1rem auto;
+     }
+ 
+     h1 {
+         font-size: 2rem;
+     }
+ 
+     .converter-card {
+         padding: 1.5rem;
+     }
+ 
+     .input-group {
+         grid-template-columns: 1fr;
+     }
+ }