Last 10 Commits for cryptocalc.scroll.pub

commit 38afca2c45f57dbaac2fe1cf96461e98d783f216 Author: root <root@hub.scroll.pub> Date: 2024-12-30 08:49:37 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..1a69a9e --- /dev/null +++ b/body.html @@ -0,0 +1,58 @@ +<header> + <h1>Crypto Calculator</h1> + <p class="tagline">Quick and accurate cryptocurrency conversions</p> +</header> + +<main> + <div class="calculator-container"> + <div class="input-group"> + <label for="amount">Amount</label> + <input type="number" id="amount" placeholder="Enter amount" min="0" step="any"> + </div> + + <div class="select-group"> + <div class="from-currency"> + <label for="from">From</label> + <select id="from"> + <option value="BTC">Bitcoin (BTC)</option> + <option value="ETH">Ethereum (ETH)</option> + <option value="USDT">Tether (USDT)</option> + <option value="BNB">Binance Coin (BNB)</option> + <option value="USDC">USD Coin (USDC)</option> + </select> + </div> + + <button id="swap-btn" aria-label="Swap currencies"> + <span class="swap-icon">⇄</span> + </button> + + <div class="to-currency"> + <label for="to">To</label> + <select id="to"> + <option value="USDT">Tether (USDT)</option> + <option value="BTC">Bitcoin (BTC)</option> + <option value="ETH">Ethereum (ETH)</option> + <option value="BNB">Binance Coin (BNB)</option> + <option value="USDC">USD Coin (USDC)</option> + </select> + </div> + </div> + + <div class="result-container"> + <div class="result-box"> + <span id="result">0.00</span> + <span id="result-currency">USDT</span> + </div> + <p class="rate-info">1 <span id="rate-from">BTC</span> = <span id="rate-value">0.00</span> <span id="rate-to">USDT</span></p> + </div> + </div> +</main> + +<footer> + <p>Built with passion for the crypto community</p> + <nav> + <a href="#">About</a> + <a href="#">Terms</a> + <a href="#">Privacy</a> + </nav> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..83b29fb --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://cryptocalc.scroll.pub +metaTags +editButton /edit.html +title Crypto Calculator | Real-time Cryptocurrency Converter +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..51bd55c --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01QpU6yXqNYRePniBSPJ6mva", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll help create a crypto calculator website. For the domain, I suggest:\n\n---domain---\ncryptocalc.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://cryptocalc.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Crypto Calculator | Real-time Cryptocurrency Converter\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>Crypto Calculator</h1>\n <p class=\"tagline\">Quick and accurate cryptocurrency conversions</p>\n</header>\n\n<main>\n <div class=\"calculator-container\">\n <div class=\"input-group\">\n <label for=\"amount\">Amount</label>\n <input type=\"number\" id=\"amount\" placeholder=\"Enter amount\" min=\"0\" step=\"any\">\n </div>\n \n <div class=\"select-group\">\n <div class=\"from-currency\">\n <label for=\"from\">From</label>\n <select id=\"from\">\n <option value=\"BTC\">Bitcoin (BTC)</option>\n <option value=\"ETH\">Ethereum (ETH)</option>\n <option value=\"USDT\">Tether (USDT)</option>\n <option value=\"BNB\">Binance Coin (BNB)</option>\n <option value=\"USDC\">USD Coin (USDC)</option>\n </select>\n </div>\n\n <button id=\"swap-btn\" aria-label=\"Swap currencies\">\n <span class=\"swap-icon\">⇄</span>\n </button>\n\n <div class=\"to-currency\">\n <label for=\"to\">To</label>\n <select id=\"to\">\n <option value=\"USDT\">Tether (USDT)</option>\n <option value=\"BTC\">Bitcoin (BTC)</option>\n <option value=\"ETH\">Ethereum (ETH)</option>\n <option value=\"BNB\">Binance Coin (BNB)</option>\n <option value=\"USDC\">USD Coin (USDC)</option>\n </select>\n </div>\n </div>\n\n <div class=\"result-container\">\n <div class=\"result-box\">\n <span id=\"result\">0.00</span>\n <span id=\"result-currency\">USDT</span>\n </div>\n <p class=\"rate-info\">1 <span id=\"rate-from\">BTC</span> = <span id=\"rate-value\">0.00</span> <span id=\"rate-to\">USDT</span></p>\n </div>\n </div>\n</main>\n\n<footer>\n <p>Built with passion for the crypto community</p>\n <nav>\n <a href=\"#\">About</a>\n <a href=\"#\">Terms</a>\n <a href=\"#\">Privacy</a>\n </nav>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #6c5ce7;\n --secondary-color: #a29bfe;\n --background-color: #f8f9fa;\n --text-color: #2d3436;\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\nheader {\n text-align: center;\n padding: 2rem 1rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n}\n\n.tagline {\n opacity: 0.9;\n}\n\nmain {\n flex: 1;\n padding: 2rem 1rem;\n max-width: 600px;\n margin: 0 auto;\n width: 100%;\n}\n\n.calculator-container {\n background: white;\n padding: 2rem;\n border-radius: var(--border-radius);\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n}\n\n.input-group, .select-group {\n margin-bottom: 1.5rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ninput, select {\n width: 100%;\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 border-color: var(--primary-color);\n outline: none;\n}\n\n.select-group {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n gap: 1rem;\n align-items: end;\n}\n\n#swap-btn {\n background: var(--primary-color);\n border: none;\n color: white;\n padding: 0.8rem;\n border-radius: var(--border-radius);\n cursor: pointer;\n transition: var(--transition);\n}\n\n#swap-btn:hover {\n background: var(--secondary-color);\n transform: scale(1.1);\n}\n\n.result-container {\n text-align: center;\n padding: 1.5rem;\n background: var(--background-color);\n border-radius: var(--border-radius);\n}\n\n.result-box {\n font-size: 2rem;\n font-weight: bold;\n margin-bottom: 0.5rem;\n}\n\n.rate-info {\n font-size: 0.9rem;\n color: #666;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: white;\n margin-top: auto;\n}\n\nfooter nav {\n margin-top: 1rem;\n}\n\nfooter a {\n color: var(--primary-color);\n text-decoration: none;\n margin: 0 1rem;\n transition: var(--transition);\n}\n\nfooter a:hover {\n color: var(--secondary-color);\n}\n\n@media (max-width: 480px) {\n .select-group {\n grid-template-columns: 1fr;\n }\n \n #swap-btn {\n margin: 1rem auto;\n }\n \n .calculator-container {\n padding: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const amount = document.getElementById('amount');\n const fromSelect = document.getElementById('from');\n const toSelect = document.getElementById('to');\n const result = document.getElementById('result');\n const resultCurrency = document.getElementById('result-currency');\n const swapBtn = document.getElementById('swap-btn');\n const rateFrom = document.getElementById('rate-from');\n const rateTo = document.getElementById('rate-to');\n const rateValue = document.getElementById('rate-value');\n\n // Mock exchange rates (in real app, these would come from an API)\n const rates = {\n BTC: 30000,\n ETH: 2000,\n USDT: 1,\n BNB: 300,\n USDC: 1\n };\n\n function calculateRate(from, to, amount) {\n const fromRate = rates[from];\n const toRate = rates[to];\n return (amount * fromRate / toRate).toFixed(8);\n }\n\n function updateResult() {\n const fromCurrency = fromSelect.value;\n const toCurrency = toSelect.value;\n const inputAmount = parseFloat(amount.value) || 0;\n\n const convertedAmount = calculateRate(fromCurrency, toCurrency, inputAmount);\n result.textContent = convertedAmount;\n resultCurrency.textContent = toCurrency;\n\n // Update rate info\n rateFrom.textContent = fromCurrency;\n rateTo.textContent = toCurrency;\n rateValue.textContent = calculateRate(fromCurrency, toCurrency, 1);\n }\n\n function swapCurrencies() {\n const temp = fromSelect.value;\n fromSelect.value = toSelect.value;\n toSelect.value = temp;\n updateResult();\n }\n\n // Event listeners\n amount.addEventListener('input', updateResult);\n fromSelect.addEventListener('change', updateResult);\n toSelect.addEventListener('change', updateResult);\n swapBtn.addEventListener('click', swapCurrencies);\n\n // Initialize\n updateResult();\n});\n\n---end---\n\nThis creates a beautiful, responsive crypto calculator with a clean and modern design. Key features include:\n\n1. Real-time conversion updates\n2. Currency swap functionality\n3. Responsive design that works on all devices\n4. Smooth animations and transitions\n5. Accessible form controls\n6. Clear visual hierarchy\n7. Error-free input handling\n8. Professional styling with gradient header\n9. Clean, semantic HTML structure\n10. Mobile-first approach\n\nNote: The current implementation uses mock exchange rates. In a real application, you'd want to connect to a cryptocurrency API to get live rates." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 274, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2401 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..9b30655 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# cryptocalc.scroll.pub +Website generated by Claude from prompt: build an crypto calculator \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..b71c1b5 --- /dev/null +++ b/script.js @@ -0,0 +1,57 @@ +document.addEventListener('DOMContentLoaded', () => { + const amount = document.getElementById('amount'); + const fromSelect = document.getElementById('from'); + const toSelect = document.getElementById('to'); + const result = document.getElementById('result'); + const resultCurrency = document.getElementById('result-currency'); + const swapBtn = document.getElementById('swap-btn'); + const rateFrom = document.getElementById('rate-from'); + const rateTo = document.getElementById('rate-to'); + const rateValue = document.getElementById('rate-value'); + + // Mock exchange rates (in real app, these would come from an API) + const rates = { + BTC: 30000, + ETH: 2000, + USDT: 1, + BNB: 300, + USDC: 1 + }; + + function calculateRate(from, to, amount) { + const fromRate = rates[from]; + const toRate = rates[to]; + return (amount * fromRate / toRate).toFixed(8); + } + + function updateResult() { + const fromCurrency = fromSelect.value; + const toCurrency = toSelect.value; + const inputAmount = parseFloat(amount.value) || 0; + + const convertedAmount = calculateRate(fromCurrency, toCurrency, inputAmount); + result.textContent = convertedAmount; + resultCurrency.textContent = toCurrency; + + // Update rate info + rateFrom.textContent = fromCurrency; + rateTo.textContent = toCurrency; + rateValue.textContent = calculateRate(fromCurrency, toCurrency, 1); + } + + function swapCurrencies() { + const temp = fromSelect.value; + fromSelect.value = toSelect.value; + toSelect.value = temp; + updateResult(); + } + + // Event listeners + amount.addEventListener('input', updateResult); + fromSelect.addEventListener('change', updateResult); + toSelect.addEventListener('change', updateResult); + swapBtn.addEventListener('click', swapCurrencies); + + // Initialize + updateResult(); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..dee0572 --- /dev/null +++ b/style.css @@ -0,0 +1,155 @@ +:root { + --primary-color: #6c5ce7; + --secondary-color: #a29bfe; + --background-color: #f8f9fa; + --text-color: #2d3436; + --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; +} + +header { + text-align: center; + padding: 2rem 1rem; + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + color: white; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; +} + +.tagline { + opacity: 0.9; +} + +main { + flex: 1; + padding: 2rem 1rem; + max-width: 600px; + margin: 0 auto; + width: 100%; +} + +.calculator-container { + background: white; + padding: 2rem; + border-radius: var(--border-radius); + box-shadow: 0 10px 30px rgba(0,0,0,0.1); +} + +.input-group, .select-group { + margin-bottom: 1.5rem; +} + +label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; +} + +input, select { + width: 100%; + padding: 0.8rem; + border: 2px solid #e0e0e0; + border-radius: var(--border-radius); + font-size: 1rem; + transition: var(--transition); +} + +input:focus, select:focus { + border-color: var(--primary-color); + outline: none; +} + +.select-group { + display: grid; + grid-template-columns: 1fr auto 1fr; + gap: 1rem; + align-items: end; +} + +#swap-btn { + background: var(--primary-color); + border: none; + color: white; + padding: 0.8rem; + border-radius: var(--border-radius); + cursor: pointer; + transition: var(--transition); +} + +#swap-btn:hover { + background: var(--secondary-color); + transform: scale(1.1); +} + +.result-container { + text-align: center; + padding: 1.5rem; + background: var(--background-color); + border-radius: var(--border-radius); +} + +.result-box { + font-size: 2rem; + font-weight: bold; + margin-bottom: 0.5rem; +} + +.rate-info { + font-size: 0.9rem; + color: #666; +} + +footer { + text-align: center; + padding: 2rem; + background: white; + margin-top: auto; +} + +footer nav { + margin-top: 1rem; +} + +footer a { + color: var(--primary-color); + text-decoration: none; + margin: 0 1rem; + transition: var(--transition); +} + +footer a:hover { + color: var(--secondary-color); +} + +@media (max-width: 480px) { + .select-group { + grid-template-columns: 1fr; + } + + #swap-btn { + margin: 1rem auto; + } + + .calculator-container { + padding: 1rem; + } +}