Last 10 Commits for salary-ratio.scroll.pub

commit 2e508c0a94836f58bdfee11e58a550af1a5b75b8 Author: root <root@hub.scroll.pub> Date: 2024-12-28 08:54:03 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..ffaae5a --- /dev/null +++ b/body.html @@ -0,0 +1,55 @@ +<header> + <h1>Israeli Salary Calculator</h1> + <p class="tagline">Visualize your gross to net salary ratio</p> +</header> + +<main> + <section class="calculator"> + <div class="input-group"> + <label for="grossSalary">Enter Gross Monthly Salary (₪)</label> + <input type="number" id="grossSalary" min="0" step="100" value="10000"> + </div> + + <div class="results"> + <div class="result-card"> + <h3>Gross Salary</h3> + <p id="grossAmount">₪10,000</p> + </div> + <div class="result-card"> + <h3>Net Salary</h3> + <p id="netAmount">₪8,150</p> + </div> + <div class="result-card"> + <h3>Deductions</h3> + <p id="deductionsAmount">₪1,850</p> + </div> + </div> + + <div class="chart-container"> + <canvas id="ratioChart"></canvas> + </div> + + <div class="breakdown"> + <h2>Deductions Breakdown</h2> + <div class="breakdown-items"> + <div class="breakdown-item"> + <span>Income Tax</span> + <span id="incomeTax">₪1,000</span> + </div> + <div class="breakdown-item"> + <span>National Insurance</span> + <span id="nationalInsurance">₪550</span> + </div> + <div class="breakdown-item"> + <span>Health Insurance</span> + <span id="healthInsurance">₪300</span> + </div> + </div> + </div> + </section> +</main> + +<footer> + <p>Created with ♥ in Israel</p> + <p>Note: This is an approximation. Consult a tax professional for accurate calculations.</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..f56a425 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://salary-ratio.scroll.pub +metaTags +editButton /edit.html +title Israeli Salary Calculator - Gross to Net Ratio Visualizer +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..9a44f64 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01MvF1W2Ee15fFMpcwEz7LQH", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "Here's a website for visualizing Israeli salary ratios with interactive charts:\n\n---domain---\nsalary-ratio.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://salary-ratio.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Israeli Salary Calculator - Gross to Net Ratio Visualizer\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>Israeli Salary Calculator</h1>\n <p class=\"tagline\">Visualize your gross to net salary ratio</p>\n</header>\n\n<main>\n <section class=\"calculator\">\n <div class=\"input-group\">\n <label for=\"grossSalary\">Enter Gross Monthly Salary (₪)</label>\n <input type=\"number\" id=\"grossSalary\" min=\"0\" step=\"100\" value=\"10000\">\n </div>\n \n <div class=\"results\">\n <div class=\"result-card\">\n <h3>Gross Salary</h3>\n <p id=\"grossAmount\">₪10,000</p>\n </div>\n <div class=\"result-card\">\n <h3>Net Salary</h3>\n <p id=\"netAmount\">₪8,150</p>\n </div>\n <div class=\"result-card\">\n <h3>Deductions</h3>\n <p id=\"deductionsAmount\">₪1,850</p>\n </div>\n </div>\n\n <div class=\"chart-container\">\n <canvas id=\"ratioChart\"></canvas>\n </div>\n\n <div class=\"breakdown\">\n <h2>Deductions Breakdown</h2>\n <div class=\"breakdown-items\">\n <div class=\"breakdown-item\">\n <span>Income Tax</span>\n <span id=\"incomeTax\">₪1,000</span>\n </div>\n <div class=\"breakdown-item\">\n <span>National Insurance</span>\n <span id=\"nationalInsurance\">₪550</span>\n </div>\n <div class=\"breakdown-item\">\n <span>Health Insurance</span>\n <span id=\"healthInsurance\">₪300</span>\n </div>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Created with ♥ in Israel</p>\n <p>Note: This is an approximation. Consult a tax professional for accurate calculations.</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #0066cc;\n --secondary: #ff4081;\n --background: #f8f9fa;\n --text: #2c3e50;\n --card-bg: #ffffff;\n --shadow: rgba(0, 0, 0, 0.1);\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, sans-serif;\n background: var(--background);\n color: var(--text);\n line-height: 1.6;\n}\n\nheader {\n text-align: center;\n padding: 3rem 1rem;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n}\n\n.tagline {\n font-size: 1.2rem;\n opacity: 0.9;\n}\n\nmain {\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n}\n\n.calculator {\n background: var(--card-bg);\n border-radius: 1rem;\n padding: 2rem;\n box-shadow: 0 10px 30px var(--shadow);\n}\n\n.input-group {\n margin-bottom: 2rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ninput {\n width: 100%;\n padding: 1rem;\n border: 2px solid #ddd;\n border-radius: 0.5rem;\n font-size: 1.1rem;\n transition: border-color 0.3s;\n}\n\ninput:focus {\n border-color: var(--primary);\n outline: none;\n}\n\n.results {\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-card {\n background: var(--background);\n padding: 1.5rem;\n border-radius: 0.5rem;\n text-align: center;\n}\n\n.result-card h3 {\n font-size: 1.1rem;\n margin-bottom: 0.5rem;\n color: var(--text);\n}\n\n.result-card p {\n font-size: 1.8rem;\n font-weight: 600;\n color: var(--primary);\n}\n\n.chart-container {\n margin: 2rem 0;\n height: 300px;\n}\n\n.breakdown {\n margin-top: 2rem;\n}\n\n.breakdown h2 {\n margin-bottom: 1rem;\n}\n\n.breakdown-items {\n background: var(--background);\n border-radius: 0.5rem;\n padding: 1rem;\n}\n\n.breakdown-item {\n display: flex;\n justify-content: space-between;\n padding: 0.8rem;\n border-bottom: 1px solid #eee;\n}\n\n.breakdown-item:last-child {\n border-bottom: none;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--card-bg);\n margin-top: 3rem;\n}\n\n@media (max-width: 768px) {\n header {\n padding: 2rem 1rem;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n main {\n padding: 1rem;\n }\n \n .calculator {\n padding: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const grossInput = document.getElementById('grossSalary');\n const ctx = document.getElementById('ratioChart').getContext('2d');\n let chart;\n\n function calculateNet(gross) {\n // Simplified Israeli tax brackets (2023)\n let tax = 0;\n let ni = 0; // National Insurance\n let hi = 0; // Health Insurance\n \n // Income Tax calculation (simplified)\n if (gross <= 6450) {\n tax = gross * 0.1;\n } else if (gross <= 9240) {\n tax = 645 + (gross - 6450) * 0.14;\n } else if (gross <= 14840) {\n tax = 1037 + (gross - 9240) * 0.20;\n } else if (gross <= 20620) {\n tax = 2157 + (gross - 14840) * 0.31;\n } else {\n tax = 3957 + (gross - 20620) * 0.35;\n }\n\n // National Insurance (simplified)\n ni = gross * 0.055;\n \n // Health Insurance (simplified)\n hi = gross * 0.03;\n\n const totalDeductions = tax + ni + hi;\n const net = gross - totalDeductions;\n\n return {\n net,\n tax,\n ni,\n hi,\n totalDeductions\n };\n }\n\n function updateChart(gross, net, deductions) {\n if (chart) {\n chart.destroy();\n }\n\n chart = new Chart(ctx, {\n type: 'doughnut',\n data: {\n labels: ['Net Salary', 'Deductions'],\n datasets: [{\n data: [net, deductions],\n backgroundColor: ['#0066cc', '#ff4081'],\n borderWidth: 0\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n cutout: '70%',\n plugins: {\n legend: {\n position: 'bottom'\n }\n }\n }\n });\n }\n\n function updateDisplay() {\n const gross = parseFloat(grossInput.value);\n const results = calculateNet(gross);\n\n document.getElementById('grossAmount').textContent = `₪${gross.toLocaleString()}`;\n document.getElementById('netAmount').textContent = `₪${results.net.toLocaleString()}`;\n document.getElementById('deductionsAmount').textContent = `₪${results.totalDeductions.toLocaleString()}`;\n \n document.getElementById('incomeTax').textContent = `₪${results.tax.toLocaleString()}`;\n document.getElementById('nationalInsurance').textContent = `₪${results.ni.toLocaleString()}`;\n document.getElementById('healthInsurance').textContent = `₪${results.hi.toLocaleString()}`;\n\n updateChart(gross, results.net, results.totalDeductions);\n }\n\n grossInput.addEventListener('input', updateDisplay);\n updateDisplay();\n});\n\nclass Chart {\n constructor(ctx, config) {\n this.ctx = ctx;\n this.config = config;\n this.draw();\n }\n\n destroy() {\n this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);\n }\n\n draw() {\n const centerX = this.ctx.canvas.width / 2;\n const centerY = this.ctx.canvas.height / 2;\n const radius = Math.min(centerX, centerY) * 0.8;\n\n const total = this.config.data.datasets[0].data.reduce((a, b) => a + b, 0);\n let startAngle = 0;\n\n this.config.data.datasets[0].data.forEach((value, index) => {\n const sliceAngle = (2 * Math.PI * value) / total;\n\n this.ctx.beginPath();\n this.ctx.fillStyle = this.config.data.datasets[0].backgroundColor[index];\n this.ctx.moveTo(centerX, centerY);\n this.ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);\n this.ctx.closePath();\n this.ctx.fill();\n\n startAngle += sliceAngle;\n });\n }\n}\n\n---end---\n\nThis implementation features:\n\n1. A clean, modern design with a gradient header\n2. Interactive salary input with real-time calculations\n3. Custom-built doughnut chart visualization\n4. Responsive card layout for displaying results\n5. Detailed breakdown of deductions\n6. Smooth animations and transitions\n7. Mobile-responsive design\n8. Accessible form controls and semantic HTML\n9. Clear typography and spacing\n10. Custom color scheme with CSS variables\n\nThe calculator uses simplified Israeli tax brackets and deduction rates for demonstration purposes. The chart is implemented without external dependencies, using pure Canvas API." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 311, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2878 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..74f9859 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# salary-ratio.scroll.pub +Website generated by Claude from prompt: I want a website that will show me the ratio between Israeli gross salary and net salary using charts and nice graphics, please use numerical tools and be creative please design the website to look very freshy and clear. \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..cd34302 --- /dev/null +++ b/script.js @@ -0,0 +1,122 @@ +document.addEventListener('DOMContentLoaded', function() { + const grossInput = document.getElementById('grossSalary'); + const ctx = document.getElementById('ratioChart').getContext('2d'); + let chart; + + function calculateNet(gross) { + // Simplified Israeli tax brackets (2023) + let tax = 0; + let ni = 0; // National Insurance + let hi = 0; // Health Insurance + + // Income Tax calculation (simplified) + if (gross <= 6450) { + tax = gross * 0.1; + } else if (gross <= 9240) { + tax = 645 + (gross - 6450) * 0.14; + } else if (gross <= 14840) { + tax = 1037 + (gross - 9240) * 0.20; + } else if (gross <= 20620) { + tax = 2157 + (gross - 14840) * 0.31; + } else { + tax = 3957 + (gross - 20620) * 0.35; + } + + // National Insurance (simplified) + ni = gross * 0.055; + + // Health Insurance (simplified) + hi = gross * 0.03; + + const totalDeductions = tax + ni + hi; + const net = gross - totalDeductions; + + return { + net, + tax, + ni, + hi, + totalDeductions + }; + } + + function updateChart(gross, net, deductions) { + if (chart) { + chart.destroy(); + } + + chart = new Chart(ctx, { + type: 'doughnut', + data: { + labels: ['Net Salary', 'Deductions'], + datasets: [{ + data: [net, deductions], + backgroundColor: ['#0066cc', '#ff4081'], + borderWidth: 0 + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + cutout: '70%', + plugins: { + legend: { + position: 'bottom' + } + } + } + }); + } + + function updateDisplay() { + const gross = parseFloat(grossInput.value); + const results = calculateNet(gross); + + document.getElementById('grossAmount').textContent = `₪${gross.toLocaleString()}`; + document.getElementById('netAmount').textContent = `₪${results.net.toLocaleString()}`; + document.getElementById('deductionsAmount').textContent = `₪${results.totalDeductions.toLocaleString()}`; + + document.getElementById('incomeTax').textContent = `₪${results.tax.toLocaleString()}`; + document.getElementById('nationalInsurance').textContent = `₪${results.ni.toLocaleString()}`; + document.getElementById('healthInsurance').textContent = `₪${results.hi.toLocaleString()}`; + + updateChart(gross, results.net, results.totalDeductions); + } + + grossInput.addEventListener('input', updateDisplay); + updateDisplay(); +}); + +class Chart { + constructor(ctx, config) { + this.ctx = ctx; + this.config = config; + this.draw(); + } + + destroy() { + this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); + } + + draw() { + const centerX = this.ctx.canvas.width / 2; + const centerY = this.ctx.canvas.height / 2; + const radius = Math.min(centerX, centerY) * 0.8; + + const total = this.config.data.datasets[0].data.reduce((a, b) => a + b, 0); + let startAngle = 0; + + this.config.data.datasets[0].data.forEach((value, index) => { + const sliceAngle = (2 * Math.PI * value) / total; + + this.ctx.beginPath(); + this.ctx.fillStyle = this.config.data.datasets[0].backgroundColor[index]; + this.ctx.moveTo(centerX, centerY); + this.ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle); + this.ctx.closePath(); + this.ctx.fill(); + + startAngle += sliceAngle; + }); + } +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..41d82c7 --- /dev/null +++ b/style.css @@ -0,0 +1,156 @@ +:root { + --primary: #0066cc; + --secondary: #ff4081; + --background: #f8f9fa; + --text: #2c3e50; + --card-bg: #ffffff; + --shadow: rgba(0, 0, 0, 0.1); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: var(--background); + color: var(--text); + line-height: 1.6; +} + +header { + text-align: center; + padding: 3rem 1rem; + background: linear-gradient(135deg, var(--primary), var(--secondary)); + color: white; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; +} + +.tagline { + font-size: 1.2rem; + opacity: 0.9; +} + +main { + max-width: 1200px; + margin: 0 auto; + padding: 2rem; +} + +.calculator { + background: var(--card-bg); + border-radius: 1rem; + padding: 2rem; + box-shadow: 0 10px 30px var(--shadow); +} + +.input-group { + margin-bottom: 2rem; +} + +label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; +} + +input { + width: 100%; + padding: 1rem; + border: 2px solid #ddd; + border-radius: 0.5rem; + font-size: 1.1rem; + transition: border-color 0.3s; +} + +input:focus { + border-color: var(--primary); + outline: none; +} + +.results { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; + margin-bottom: 2rem; +} + +.result-card { + background: var(--background); + padding: 1.5rem; + border-radius: 0.5rem; + text-align: center; +} + +.result-card h3 { + font-size: 1.1rem; + margin-bottom: 0.5rem; + color: var(--text); +} + +.result-card p { + font-size: 1.8rem; + font-weight: 600; + color: var(--primary); +} + +.chart-container { + margin: 2rem 0; + height: 300px; +} + +.breakdown { + margin-top: 2rem; +} + +.breakdown h2 { + margin-bottom: 1rem; +} + +.breakdown-items { + background: var(--background); + border-radius: 0.5rem; + padding: 1rem; +} + +.breakdown-item { + display: flex; + justify-content: space-between; + padding: 0.8rem; + border-bottom: 1px solid #eee; +} + +.breakdown-item:last-child { + border-bottom: none; +} + +footer { + text-align: center; + padding: 2rem; + background: var(--card-bg); + margin-top: 3rem; +} + +@media (max-width: 768px) { + header { + padding: 2rem 1rem; + } + + h1 { + font-size: 2rem; + } + + main { + padding: 1rem; + } + + .calculator { + padding: 1rem; + } +}