Last 10 Commits for cryptocalc1.scroll.pub

commit 66ead00ad317755da07447cc27aa6e4a9a7ea3a5 Author: root <root@hub.scroll.pub> Date: 2024-12-30 15:02:44 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..26d9bb6 --- /dev/null +++ b/body.html @@ -0,0 +1,70 @@ +<header> + <h1>Crypto Futures Calculator</h1> + <p class="tagline">Advanced position sizing and PNL calculations for traders</p> +</header> + +<main> + <div class="calculator-container"> + <div class="input-section"> + <h2>Position Details</h2> + <div class="input-group"> + <label for="asset">Asset</label> + <input type="text" id="asset" placeholder="BTC" value="BTC"> + </div> + <div class="input-group"> + <label for="leverage">Leverage</label> + <input type="number" id="leverage" value="10" min="1" max="125"> + </div> + <div class="input-group"> + <label for="margin">Margin (USD)</label> + <input type="number" id="margin" placeholder="1000"> + </div> + </div> + + <div class="trades-section"> + <h2>Trade Entries</h2> + <div id="trades-container"> + <div class="trade-entry"> + <input type="number" class="entry-price" placeholder="Entry Price"> + <input type="number" class="position-size" placeholder="Size (USD)"> + <button class="remove-trade">×</button> + </div> + </div> + <button id="add-trade" class="action-button">+ Add Trade</button> + </div> + + <div class="results-section"> + <h2>Results</h2> + <div class="result-grid"> + <div class="result-item"> + <label>Average Entry</label> + <span id="avg-entry">0.00</span> + </div> + <div class="result-item"> + <label>Total Position Size</label> + <span id="total-size">0.00</span> + </div> + <div class="result-item"> + <label>Liquidation Price</label> + <span id="liquidation">0.00</span> + </div> + </div> + + <div class="pnl-calculator"> + <h3>PNL Calculator</h3> + <div class="input-group"> + <label for="exit-price">Exit Price</label> + <input type="number" id="exit-price" placeholder="Exit Price"> + </div> + <div class="pnl-result"> + <span id="pnl-amount">0.00</span> + <span id="pnl-percentage">0.00%</span> + </div> + </div> + </div> + </div> +</main> + +<footer> + <p>Built for crypto traders by traders</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..17cd6c0 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://cryptocalc.scroll.pub +metaTags +editButton /edit.html +title Crypto Futures Calculator | Position Size, PNL & Liquidation +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..15553e7 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01HnQDsheteMdsFueRZ6zhec", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll suggest a domain and create the crypto futures calculator website.\n\n---domain---\ncryptocalc.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://cryptocalc.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Crypto Futures Calculator | Position Size, PNL & Liquidation\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>Crypto Futures Calculator</h1>\n <p class=\"tagline\">Advanced position sizing and PNL calculations for traders</p>\n</header>\n\n<main>\n <div class=\"calculator-container\">\n <div class=\"input-section\">\n <h2>Position Details</h2>\n <div class=\"input-group\">\n <label for=\"asset\">Asset</label>\n <input type=\"text\" id=\"asset\" placeholder=\"BTC\" value=\"BTC\">\n </div>\n <div class=\"input-group\">\n <label for=\"leverage\">Leverage</label>\n <input type=\"number\" id=\"leverage\" value=\"10\" min=\"1\" max=\"125\">\n </div>\n <div class=\"input-group\">\n <label for=\"margin\">Margin (USD)</label>\n <input type=\"number\" id=\"margin\" placeholder=\"1000\">\n </div>\n </div>\n\n <div class=\"trades-section\">\n <h2>Trade Entries</h2>\n <div id=\"trades-container\">\n <div class=\"trade-entry\">\n <input type=\"number\" class=\"entry-price\" placeholder=\"Entry Price\">\n <input type=\"number\" class=\"position-size\" placeholder=\"Size (USD)\">\n <button class=\"remove-trade\">×</button>\n </div>\n </div>\n <button id=\"add-trade\" class=\"action-button\">+ Add Trade</button>\n </div>\n\n <div class=\"results-section\">\n <h2>Results</h2>\n <div class=\"result-grid\">\n <div class=\"result-item\">\n <label>Average Entry</label>\n <span id=\"avg-entry\">0.00</span>\n </div>\n <div class=\"result-item\">\n <label>Total Position Size</label>\n <span id=\"total-size\">0.00</span>\n </div>\n <div class=\"result-item\">\n <label>Liquidation Price</label>\n <span id=\"liquidation\">0.00</span>\n </div>\n </div>\n\n <div class=\"pnl-calculator\">\n <h3>PNL Calculator</h3>\n <div class=\"input-group\">\n <label for=\"exit-price\">Exit Price</label>\n <input type=\"number\" id=\"exit-price\" placeholder=\"Exit Price\">\n </div>\n <div class=\"pnl-result\">\n <span id=\"pnl-amount\">0.00</span>\n <span id=\"pnl-percentage\">0.00%</span>\n </div>\n </div>\n </div>\n </div>\n</main>\n\n<footer>\n <p>Built for crypto traders by traders</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #6c5ce7;\n --secondary-color: #a8a4e6;\n --background: #f8f9fd;\n --text-color: #2d3436;\n --border-radius: 12px;\n --shadow: 0 8px 30px rgba(0,0,0,0.12);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: var(--background);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n text-align: center;\n padding: 3rem 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 font-size: 1.1rem;\n opacity: 0.9;\n}\n\n.calculator-container {\n max-width: 1000px;\n margin: 2rem auto;\n padding: 2rem;\n background: white;\n border-radius: var(--border-radius);\n box-shadow: var(--shadow);\n}\n\n.input-section, .trades-section, .results-section {\n margin-bottom: 2rem;\n}\n\nh2 {\n color: var(--primary-color);\n margin-bottom: 1.5rem;\n}\n\n.input-group {\n margin-bottom: 1rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ninput {\n width: 100%;\n padding: 0.8rem;\n border: 2px solid #e1e1e1;\n border-radius: var(--border-radius);\n font-size: 1rem;\n transition: border-color 0.3s ease;\n}\n\ninput:focus {\n border-color: var(--primary-color);\n outline: none;\n}\n\n.trade-entry {\n display: grid;\n grid-template-columns: 1fr 1fr auto;\n gap: 1rem;\n margin-bottom: 1rem;\n}\n\n.remove-trade {\n background: #ff7675;\n color: white;\n border: none;\n border-radius: var(--border-radius);\n width: 40px;\n cursor: pointer;\n font-size: 1.2rem;\n}\n\n.action-button {\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 0.8rem 1.5rem;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-size: 1rem;\n transition: transform 0.2s ease;\n}\n\n.action-button:hover {\n transform: translateY(-2px);\n}\n\n.result-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n}\n\n.result-item {\n background: var(--background);\n padding: 1.5rem;\n border-radius: var(--border-radius);\n text-align: center;\n}\n\n.result-item label {\n font-size: 0.9rem;\n color: #636e72;\n}\n\n.result-item span {\n display: block;\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--primary-color);\n}\n\n.pnl-calculator {\n background: var(--background);\n padding: 1.5rem;\n border-radius: var(--border-radius);\n}\n\n.pnl-result {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-top: 1rem;\n font-size: 1.5rem;\n font-weight: 600;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n color: #636e72;\n}\n\n@media (max-width: 768px) {\n .calculator-container {\n margin: 1rem;\n padding: 1rem;\n }\n \n .trade-entry {\n grid-template-columns: 1fr 1fr;\n }\n \n .remove-trade {\n grid-column: span 2;\n width: 100%;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const addTradeBtn = document.getElementById('add-trade');\n const tradesContainer = document.getElementById('trades-container');\n \n // Add event listeners\n addTradeBtn.addEventListener('click', addTrade);\n document.addEventListener('input', calculateResults);\n \n function addTrade() {\n const tradeEntry = document.createElement('div');\n tradeEntry.className = 'trade-entry';\n tradeEntry.innerHTML = `\n <input type=\"number\" class=\"entry-price\" placeholder=\"Entry Price\">\n <input type=\"number\" class=\"position-size\" placeholder=\"Size (USD)\">\n <button class=\"remove-trade\">×</button>\n `;\n \n tradeEntry.querySelector('.remove-trade').addEventListener('click', () => {\n tradeEntry.remove();\n calculateResults();\n });\n \n tradesContainer.appendChild(tradeEntry);\n }\n \n function calculateResults() {\n const leverage = parseFloat(document.getElementById('leverage').value) || 0;\n const margin = parseFloat(document.getElementById('margin').value) || 0;\n const trades = document.querySelectorAll('.trade-entry');\n \n let totalSize = 0;\n let weightedPrice = 0;\n \n trades.forEach(trade => {\n const price = parseFloat(trade.querySelector('.entry-price').value) || 0;\n const size = parseFloat(trade.querySelector('.position-size').value) || 0;\n \n totalSize += size;\n weightedPrice += price * size;\n });\n \n const avgEntry = totalSize > 0 ? weightedPrice / totalSize : 0;\n const liquidationPrice = calculateLiquidationPrice(avgEntry, leverage, true);\n \n // Update results\n document.getElementById('avg-entry').textContent = avgEntry.toFixed(2);\n document.getElementById('total-size').textContent = totalSize.toFixed(2);\n document.getElementById('liquidation').textContent = liquidationPrice.toFixed(2);\n \n calculatePNL(avgEntry, totalSize);\n }\n \n function calculateLiquidationPrice(entryPrice, leverage, isLong) {\n const maintenanceMargin = 0.005; // 0.5%\n const fee = 0.0005; // 0.05%\n \n if (isLong) {\n return entryPrice * (1 - (1 / leverage) + maintenanceMargin + fee);\n } else {\n return entryPrice * (1 + (1 / leverage) - maintenanceMargin - fee);\n }\n }\n \n function calculatePNL(avgEntry, totalSize) {\n const exitPrice = parseFloat(document.getElementById('exit-price').value) || 0;\n \n if (exitPrice && avgEntry && totalSize) {\n const pnl = (exitPrice - avgEntry) * totalSize;\n const pnlPercentage = ((exitPrice - avgEntry) / avgEntry) * 100;\n \n document.getElementById('pnl-amount').textContent = `$${pnl.toFixed(2)}`;\n document.getElementById('pnl-percentage').textContent = `${pnlPercentage.toFixed(2)}%`;\n }\n }\n \n // Initialize with one trade entry\n addTrade();\n});\n\n---end---\n\nThis implementation creates a beautiful, responsive crypto futures calculator with a modern design and smooth animations. It includes all requested features:\n- Multiple trade entry calculation\n- Average price calculation\n- PNL calculation\n- Liquidation price calculation\n- Position sizing in USD\n- Leverage adjustment\n\nThe UI is clean and intuitive, with a gradient header, card-based layout, and responsive design that works well on all devices. The calculator updates in real-time as users input values, and includes smooth animations for better user experience." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 356, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 3005 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..c4f5f48 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# cryptocalc1.scroll.pub +Website generated by Claude from prompt: Build a calculator for crypto futures that can calculate average price, PNL's and Liquidation Key Features Average price for Multiple trades at different price levels Accurate Sizing in USD after multiple trades in a single asset Calculated PNL's and Liquidations with same features Idea is to create a perfect/Suitable calculator for Concentrated Bets Easy to calculate possible trades PNL and other data \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..183ee24 --- /dev/null +++ b/script.js @@ -0,0 +1,78 @@ +document.addEventListener('DOMContentLoaded', () => { + const addTradeBtn = document.getElementById('add-trade'); + const tradesContainer = document.getElementById('trades-container'); + + // Add event listeners + addTradeBtn.addEventListener('click', addTrade); + document.addEventListener('input', calculateResults); + + function addTrade() { + const tradeEntry = document.createElement('div'); + tradeEntry.className = 'trade-entry'; + tradeEntry.innerHTML = ` + <input type="number" class="entry-price" placeholder="Entry Price"> + <input type="number" class="position-size" placeholder="Size (USD)"> + <button class="remove-trade">×</button> + `; + + tradeEntry.querySelector('.remove-trade').addEventListener('click', () => { + tradeEntry.remove(); + calculateResults(); + }); + + tradesContainer.appendChild(tradeEntry); + } + + function calculateResults() { + const leverage = parseFloat(document.getElementById('leverage').value) || 0; + const margin = parseFloat(document.getElementById('margin').value) || 0; + const trades = document.querySelectorAll('.trade-entry'); + + let totalSize = 0; + let weightedPrice = 0; + + trades.forEach(trade => { + const price = parseFloat(trade.querySelector('.entry-price').value) || 0; + const size = parseFloat(trade.querySelector('.position-size').value) || 0; + + totalSize += size; + weightedPrice += price * size; + }); + + const avgEntry = totalSize > 0 ? weightedPrice / totalSize : 0; + const liquidationPrice = calculateLiquidationPrice(avgEntry, leverage, true); + + // Update results + document.getElementById('avg-entry').textContent = avgEntry.toFixed(2); + document.getElementById('total-size').textContent = totalSize.toFixed(2); + document.getElementById('liquidation').textContent = liquidationPrice.toFixed(2); + + calculatePNL(avgEntry, totalSize); + } + + function calculateLiquidationPrice(entryPrice, leverage, isLong) { + const maintenanceMargin = 0.005; // 0.5% + const fee = 0.0005; // 0.05% + + if (isLong) { + return entryPrice * (1 - (1 / leverage) + maintenanceMargin + fee); + } else { + return entryPrice * (1 + (1 / leverage) - maintenanceMargin - fee); + } + } + + function calculatePNL(avgEntry, totalSize) { + const exitPrice = parseFloat(document.getElementById('exit-price').value) || 0; + + if (exitPrice && avgEntry && totalSize) { + const pnl = (exitPrice - avgEntry) * totalSize; + const pnlPercentage = ((exitPrice - avgEntry) / avgEntry) * 100; + + document.getElementById('pnl-amount').textContent = `$${pnl.toFixed(2)}`; + document.getElementById('pnl-percentage').textContent = `${pnlPercentage.toFixed(2)}%`; + } + } + + // Initialize with one trade entry + addTrade(); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..26a74ce --- /dev/null +++ b/style.css @@ -0,0 +1,175 @@ +:root { + --primary-color: #6c5ce7; + --secondary-color: #a8a4e6; + --background: #f8f9fd; + --text-color: #2d3436; + --border-radius: 12px; + --shadow: 0 8px 30px rgba(0,0,0,0.12); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + background: var(--background); + color: var(--text-color); + line-height: 1.6; +} + +header { + text-align: center; + padding: 3rem 1rem; + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + color: white; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; +} + +.tagline { + font-size: 1.1rem; + opacity: 0.9; +} + +.calculator-container { + max-width: 1000px; + margin: 2rem auto; + padding: 2rem; + background: white; + border-radius: var(--border-radius); + box-shadow: var(--shadow); +} + +.input-section, .trades-section, .results-section { + margin-bottom: 2rem; +} + +h2 { + color: var(--primary-color); + margin-bottom: 1.5rem; +} + +.input-group { + margin-bottom: 1rem; +} + +label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; +} + +input { + width: 100%; + padding: 0.8rem; + border: 2px solid #e1e1e1; + border-radius: var(--border-radius); + font-size: 1rem; + transition: border-color 0.3s ease; +} + +input:focus { + border-color: var(--primary-color); + outline: none; +} + +.trade-entry { + display: grid; + grid-template-columns: 1fr 1fr auto; + gap: 1rem; + margin-bottom: 1rem; +} + +.remove-trade { + background: #ff7675; + color: white; + border: none; + border-radius: var(--border-radius); + width: 40px; + cursor: pointer; + font-size: 1.2rem; +} + +.action-button { + background: var(--primary-color); + color: white; + border: none; + padding: 0.8rem 1.5rem; + border-radius: var(--border-radius); + cursor: pointer; + font-size: 1rem; + transition: transform 0.2s ease; +} + +.action-button:hover { + transform: translateY(-2px); +} + +.result-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; + margin-bottom: 2rem; +} + +.result-item { + background: var(--background); + padding: 1.5rem; + border-radius: var(--border-radius); + text-align: center; +} + +.result-item label { + font-size: 0.9rem; + color: #636e72; +} + +.result-item span { + display: block; + font-size: 1.5rem; + font-weight: 600; + color: var(--primary-color); +} + +.pnl-calculator { + background: var(--background); + padding: 1.5rem; + border-radius: var(--border-radius); +} + +.pnl-result { + display: flex; + justify-content: center; + gap: 2rem; + margin-top: 1rem; + font-size: 1.5rem; + font-weight: 600; +} + +footer { + text-align: center; + padding: 2rem; + color: #636e72; +} + +@media (max-width: 768px) { + .calculator-container { + margin: 1rem; + padding: 1rem; + } + + .trade-entry { + grid-template-columns: 1fr 1fr; + } + + .remove-trade { + grid-column: span 2; + width: 100%; + } +}