Changes to cryptocalc.scroll.pub

root
root
23 days ago
Initial commit
body.html
Changed around line 1
+
+

Crypto Calculator

+

Quick and accurate cryptocurrency conversions

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ⇄
+
+
+
+
+
+
+
+
+
+
+ 0.00
+ USDT
+
+

1 BTC = 0.00 USDT

+
+
+
+
+
+

Built with passion for the crypto community

+
+ About
+ Terms
+ Privacy
+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://cryptocalc.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Crypto Calculator | Real-time Cryptocurrency Converter
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "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
\n

Crypto Calculator

\n

Quick and accurate cryptocurrency conversions

\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 0.00\n USDT\n
\n

1 BTC = 0.00 USDT

\n
\n
\n
\n\n\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
+ }
+ }
readme.scroll
Changed around line 1
+ # cryptocalc.scroll.pub
+ Website generated by Claude from prompt: build an crypto calculator
script.js
Changed around line 1
+ 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();
+ });
style.css
Changed around line 1
+ :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;
+ }
+ }