Last 10 Commits for calcmaster.scroll.pub

commit f11d4876050b1acf6a90cc407308f491c10fe34c Author: root <root@hub.scroll.pub> Date: 2024-12-27 19:31:08 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..d4898e2 --- /dev/null +++ b/body.html @@ -0,0 +1,57 @@ +<header> + <h1>CalcMaster</h1> + <nav> + <button class="tab-btn active" data-tab="date">Date Calculator</button> + <button class="tab-btn" data-tab="currency">Currency Converter</button> + </nav> +</header> + +<main> + <section id="date" class="calculator active"> + <div class="calc-container"> + <div class="input-group"> + <label for="start-date">Start Date</label> + <input type="date" id="start-date"> + </div> + <div class="input-group"> + <label for="end-date">End Date</label> + <input type="date" id="end-date"> + </div> + <button id="calculate-date" class="calc-btn">Calculate Difference</button> + <div id="date-result" class="result"></div> + </div> + </section> + + <section id="currency" class="calculator"> + <div class="calc-container"> + <div class="input-group"> + <label for="amount">Amount</label> + <input type="number" id="amount" min="0" step="0.01"> + </div> + <div class="input-group"> + <label for="from-currency">From</label> + <select id="from-currency"> + <option value="USD">USD</option> + <option value="EUR">EUR</option> + <option value="GBP">GBP</option> + <option value="JPY">JPY</option> + </select> + </div> + <div class="input-group"> + <label for="to-currency">To</label> + <select id="to-currency"> + <option value="EUR">EUR</option> + <option value="USD">USD</option> + <option value="GBP">GBP</option> + <option value="JPY">JPY</option> + </select> + </div> + <button id="calculate-currency" class="calc-btn">Convert</button> + <div id="currency-result" class="result"></div> + </div> + </section> +</main> + +<footer> + <p>Made with precision by CalcMaster</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..3e75da1 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://calcmaster.scroll.pub +metaTags +editButton /edit.html +title CalcMaster - Advanced Date & Currency Calculator +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..5ecf4b5 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_011usFsH1w5tzrfP2eMJ1mF3", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll help create a sleek calculator website. For the domain, I suggest:\n\n---domain---\ncalcmaster.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://calcmaster.scroll.pub\nmetaTags\neditButton /edit.html\ntitle CalcMaster - Advanced Date & Currency Calculator\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>CalcMaster</h1>\n <nav>\n <button class=\"tab-btn active\" data-tab=\"date\">Date Calculator</button>\n <button class=\"tab-btn\" data-tab=\"currency\">Currency Converter</button>\n </nav>\n</header>\n\n<main>\n <section id=\"date\" class=\"calculator active\">\n <div class=\"calc-container\">\n <div class=\"input-group\">\n <label for=\"start-date\">Start Date</label>\n <input type=\"date\" id=\"start-date\">\n </div>\n <div class=\"input-group\">\n <label for=\"end-date\">End Date</label>\n <input type=\"date\" id=\"end-date\">\n </div>\n <button id=\"calculate-date\" class=\"calc-btn\">Calculate Difference</button>\n <div id=\"date-result\" class=\"result\"></div>\n </div>\n </section>\n\n <section id=\"currency\" class=\"calculator\">\n <div class=\"calc-container\">\n <div class=\"input-group\">\n <label for=\"amount\">Amount</label>\n <input type=\"number\" id=\"amount\" min=\"0\" step=\"0.01\">\n </div>\n <div class=\"input-group\">\n <label for=\"from-currency\">From</label>\n <select id=\"from-currency\">\n <option value=\"USD\">USD</option>\n <option value=\"EUR\">EUR</option>\n <option value=\"GBP\">GBP</option>\n <option value=\"JPY\">JPY</option>\n </select>\n </div>\n <div class=\"input-group\">\n <label for=\"to-currency\">To</label>\n <select id=\"to-currency\">\n <option value=\"EUR\">EUR</option>\n <option value=\"USD\">USD</option>\n <option value=\"GBP\">GBP</option>\n <option value=\"JPY\">JPY</option>\n </select>\n </div>\n <button id=\"calculate-currency\" class=\"calc-btn\">Convert</button>\n <div id=\"currency-result\" class=\"result\"></div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Made with precision by CalcMaster</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2d3436;\n --secondary: #0984e3;\n --accent: #00cec9;\n --background: #1e272e;\n --text: #dfe6e9;\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);\n color: var(--text);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n padding: 2rem;\n text-align: center;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 1.5rem;\n background: linear-gradient(45deg, var(--accent), var(--text));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\nnav {\n display: flex;\n justify-content: center;\n gap: 1rem;\n}\n\n.tab-btn {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 25px;\n background: rgba(255, 255, 255, 0.1);\n color: var(--text);\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.tab-btn.active {\n background: var(--accent);\n color: var(--primary);\n}\n\nmain {\n flex: 1;\n padding: 2rem;\n max-width: 600px;\n margin: 0 auto;\n width: 100%;\n}\n\n.calculator {\n display: none;\n animation: fadeIn 0.3s ease;\n}\n\n.calculator.active {\n display: block;\n}\n\n.calc-container {\n background: rgba(255, 255, 255, 0.05);\n padding: 2rem;\n border-radius: 15px;\n backdrop-filter: blur(10px);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n}\n\n.input-group {\n margin-bottom: 1.5rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n color: var(--accent);\n}\n\ninput, select {\n width: 100%;\n padding: 0.75rem;\n border: 2px solid rgba(255, 255, 255, 0.1);\n border-radius: 8px;\n background: rgba(255, 255, 255, 0.05);\n color: var(--text);\n font-size: 1rem;\n}\n\n.calc-btn {\n width: 100%;\n padding: 1rem;\n border: none;\n border-radius: 8px;\n background: var(--secondary);\n color: var(--text);\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.calc-btn:hover {\n background: var(--accent);\n transform: translateY(-2px);\n}\n\n.result {\n margin-top: 1.5rem;\n padding: 1rem;\n border-radius: 8px;\n background: rgba(255, 255, 255, 0.05);\n text-align: center;\n font-size: 1.2rem;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background: var(--primary);\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@media (max-width: 600px) {\n header {\n padding: 1rem;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n main {\n padding: 1rem;\n }\n \n .calc-container {\n padding: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Tab switching\n const tabs = document.querySelectorAll('.tab-btn');\n const calculators = document.querySelectorAll('.calculator');\n\n tabs.forEach(tab => {\n tab.addEventListener('click', () => {\n tabs.forEach(t => t.classList.remove('active'));\n calculators.forEach(c => c.classList.remove('active'));\n \n tab.classList.add('active');\n document.getElementById(tab.dataset.tab).classList.add('active');\n });\n });\n\n // Date Calculator\n const calculateDate = () => {\n const startDate = new Date(document.getElementById('start-date').value);\n const endDate = new Date(document.getElementById('end-date').value);\n \n if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {\n document.getElementById('date-result').textContent = 'Please select valid dates';\n return;\n }\n\n const diffTime = Math.abs(endDate - startDate);\n const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));\n \n document.getElementById('date-result').textContent = \n `Difference: ${diffDays} day${diffDays !== 1 ? 's' : ''}`;\n };\n\n document.getElementById('calculate-date').addEventListener('click', calculateDate);\n\n // Currency Calculator\n const exchangeRates = {\n USD: { EUR: 0.85, GBP: 0.73, JPY: 110.0 },\n EUR: { USD: 1.18, GBP: 0.86, JPY: 129.5 },\n GBP: { USD: 1.37, EUR: 1.16, JPY: 150.0 },\n JPY: { USD: 0.0091, EUR: 0.0077, GBP: 0.0067 }\n };\n\n const calculateCurrency = () => {\n const amount = parseFloat(document.getElementById('amount').value);\n const fromCurrency = document.getElementById('from-currency').value;\n const toCurrency = document.getElementById('to-currency').value;\n \n if (isNaN(amount)) {\n document.getElementById('currency-result').textContent = 'Please enter a valid amount';\n return;\n }\n\n let result;\n if (fromCurrency === toCurrency) {\n result = amount;\n } else {\n result = amount * exchangeRates[fromCurrency][toCurrency];\n }\n\n document.getElementById('currency-result').textContent = \n `${amount} ${fromCurrency} = ${result.toFixed(2)} ${toCurrency}`;\n };\n\n document.getElementById('calculate-currency').addEventListener('click', calculateCurrency);\n});\n\n---end---\n\nThis implementation creates a modern, responsive calculator website with a beautiful UI featuring:\n\n1. Tab-based navigation between calculators\n2. Smooth animations and transitions\n3. Glass-morphism design elements\n4. Gradient effects\n5. Responsive layout\n6. Clear visual hierarchy\n7. Accessible form controls\n8. Error handling\n9. Interactive elements with hover effects\n10. Clean, professional design\n\nThe date calculator allows users to calculate the difference between two dates, while the currency converter provides conversion between major currencies (using static rates for demonstration - in a real implementation, you'd want to use an API for live rates).\n\nThe design uses a dark theme with accent colors and modern CSS features like custom properties, flexbox, and CSS animations. It's fully responsive and works well on both desktop and mobile devices." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 299, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2674 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..aded047 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# calcmaster.scroll.pub +Website generated by Claude from prompt: Create a website to make a great calculator which calculates dates and can convert currencies, use fancy css and make it look amazing and futuristic \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..c7db173 --- /dev/null +++ b/script.js @@ -0,0 +1,65 @@ +document.addEventListener('DOMContentLoaded', () => { + // Tab switching + const tabs = document.querySelectorAll('.tab-btn'); + const calculators = document.querySelectorAll('.calculator'); + + tabs.forEach(tab => { + tab.addEventListener('click', () => { + tabs.forEach(t => t.classList.remove('active')); + calculators.forEach(c => c.classList.remove('active')); + + tab.classList.add('active'); + document.getElementById(tab.dataset.tab).classList.add('active'); + }); + }); + + // Date Calculator + const calculateDate = () => { + const startDate = new Date(document.getElementById('start-date').value); + const endDate = new Date(document.getElementById('end-date').value); + + if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) { + document.getElementById('date-result').textContent = 'Please select valid dates'; + return; + } + + const diffTime = Math.abs(endDate - startDate); + const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); + + document.getElementById('date-result').textContent = + `Difference: ${diffDays} day${diffDays !== 1 ? 's' : ''}`; + }; + + document.getElementById('calculate-date').addEventListener('click', calculateDate); + + // Currency Calculator + const exchangeRates = { + USD: { EUR: 0.85, GBP: 0.73, JPY: 110.0 }, + EUR: { USD: 1.18, GBP: 0.86, JPY: 129.5 }, + GBP: { USD: 1.37, EUR: 1.16, JPY: 150.0 }, + JPY: { USD: 0.0091, EUR: 0.0077, GBP: 0.0067 } + }; + + const calculateCurrency = () => { + const amount = parseFloat(document.getElementById('amount').value); + const fromCurrency = document.getElementById('from-currency').value; + const toCurrency = document.getElementById('to-currency').value; + + if (isNaN(amount)) { + document.getElementById('currency-result').textContent = 'Please enter a valid amount'; + return; + } + + let result; + if (fromCurrency === toCurrency) { + result = amount; + } else { + result = amount * exchangeRates[fromCurrency][toCurrency]; + } + + document.getElementById('currency-result').textContent = + `${amount} ${fromCurrency} = ${result.toFixed(2)} ${toCurrency}`; + }; + + document.getElementById('calculate-currency').addEventListener('click', calculateCurrency); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..5018958 --- /dev/null +++ b/style.css @@ -0,0 +1,159 @@ +:root { + --primary: #2d3436; + --secondary: #0984e3; + --accent: #00cec9; + --background: #1e272e; + --text: #dfe6e9; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + background: var(--background); + color: var(--text); + min-height: 100vh; + display: flex; + flex-direction: column; +} + +header { + padding: 2rem; + text-align: center; + background: linear-gradient(135deg, var(--primary), var(--secondary)); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +h1 { + font-size: 2.5rem; + margin-bottom: 1.5rem; + background: linear-gradient(45deg, var(--accent), var(--text)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +nav { + display: flex; + justify-content: center; + gap: 1rem; +} + +.tab-btn { + padding: 0.75rem 1.5rem; + border: none; + border-radius: 25px; + background: rgba(255, 255, 255, 0.1); + color: var(--text); + cursor: pointer; + transition: all 0.3s ease; +} + +.tab-btn.active { + background: var(--accent); + color: var(--primary); +} + +main { + flex: 1; + padding: 2rem; + max-width: 600px; + margin: 0 auto; + width: 100%; +} + +.calculator { + display: none; + animation: fadeIn 0.3s ease; +} + +.calculator.active { + display: block; +} + +.calc-container { + background: rgba(255, 255, 255, 0.05); + padding: 2rem; + border-radius: 15px; + backdrop-filter: blur(10px); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); +} + +.input-group { + margin-bottom: 1.5rem; +} + +label { + display: block; + margin-bottom: 0.5rem; + color: var(--accent); +} + +input, select { + width: 100%; + padding: 0.75rem; + border: 2px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + background: rgba(255, 255, 255, 0.05); + color: var(--text); + font-size: 1rem; +} + +.calc-btn { + width: 100%; + padding: 1rem; + border: none; + border-radius: 8px; + background: var(--secondary); + color: var(--text); + font-size: 1rem; + cursor: pointer; + transition: all 0.3s ease; +} + +.calc-btn:hover { + background: var(--accent); + transform: translateY(-2px); +} + +.result { + margin-top: 1.5rem; + padding: 1rem; + border-radius: 8px; + background: rgba(255, 255, 255, 0.05); + text-align: center; + font-size: 1.2rem; +} + +footer { + text-align: center; + padding: 1rem; + background: var(--primary); +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@media (max-width: 600px) { + header { + padding: 1rem; + } + + h1 { + font-size: 2rem; + } + + main { + padding: 1rem; + } + + .calc-container { + padding: 1rem; + } +}