commit 9fd576a89b2da485ae046b13922eb052b993ecd4
Author: root <root@hub.scroll.pub> Date: 2024-12-28 08:54:32 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..3d59bf9 --- /dev/null +++ b/body.html @@ -0,0 +1,30 @@ +<header> + <h1>Israeli Salary Ratio Calculator</h1> + <p>Visualize the ratio between gross and net salary in Israel</p> +</header> + +<main> + <section class="input-section"> + <label for="grossSalary">Gross Salary (₪):</label> + <input type="number" id="grossSalary" placeholder="Enter gross salary"> + <button id="calculateBtn">Calculate</button> + </section> + + <section class="chart-section"> + <div class="chart-container"> + <canvas id="salaryChart"></canvas> + </div> + <div class="ratio-display"> + <h2>Net to Gross Ratio: <span id="ratioValue">0.00</span></h2> + </div> + </section> + + <section class="explanation"> + <h2>How it works</h2> + <p>This calculator shows the relationship between your gross salary and net salary in Israel. The ratio is calculated based on standard Israeli tax brackets and social security deductions.</p> + </section> +</main> + +<footer> + <p>Disclaimer: This is an estimation tool. Actual net salary may vary based on individual circumstances.</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..97fe8c0 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://salaryratio.scroll.pub +metaTags +editButton /edit.html +title Israeli Salary Ratio Calculator +style.css +body.html +script.js \ No newline at end of file diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..aee1df9 --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "890ee2a4-794f-4233-bbf6-4c3d03d7febc", + "object": "chat.completion", + "created": 1735376049, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\nsalaryratio.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://salaryratio.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Israeli Salary Ratio Calculator\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Israeli Salary Ratio Calculator</h1>\n <p>Visualize the ratio between gross and net salary in Israel</p>\n</header>\n\n<main>\n <section class=\"input-section\">\n <label for=\"grossSalary\">Gross Salary (₪):</label>\n <input type=\"number\" id=\"grossSalary\" placeholder=\"Enter gross salary\">\n <button id=\"calculateBtn\">Calculate</button>\n </section>\n\n <section class=\"chart-section\">\n <div class=\"chart-container\">\n <canvas id=\"salaryChart\"></canvas>\n </div>\n <div class=\"ratio-display\">\n <h2>Net to Gross Ratio: <span id=\"ratioValue\">0.00</span></h2>\n </div>\n </section>\n\n <section class=\"explanation\">\n <h2>How it works</h2>\n <p>This calculator shows the relationship between your gross salary and net salary in Israel. The ratio is calculated based on standard Israeli tax brackets and social security deductions.</p>\n </section>\n</main>\n\n<footer>\n <p>Disclaimer: This is an estimation tool. Actual net salary may vary based on individual circumstances.</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --background-color: #f5f6fa;\n --text-color: #2c3e50;\n --chart-color-1: #3498db;\n --chart-color-2: #2ecc71;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 0;\n background-color: var(--background-color);\n color: var(--text-color);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n background: var(--primary-color);\n color: white;\n padding: 2rem 1rem;\n text-align: center;\n}\n\nh1 {\n margin: 0;\n font-size: 2.5rem;\n}\n\nmain {\n flex: 1;\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n width: 100%;\n}\n\n.input-section {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n justify-content: center;\n margin-bottom: 2rem;\n}\n\ninput[type=\"number\"] {\n padding: 0.8rem;\n border: 2px solid var(--secondary-color);\n border-radius: 8px;\n font-size: 1rem;\n width: 200px;\n}\n\nbutton {\n background: var(--secondary-color);\n color: white;\n border: none;\n padding: 0.8rem 1.5rem;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1rem;\n transition: background 0.3s ease;\n}\n\nbutton:hover {\n background: #2980b9;\n}\n\n.chart-section {\n background: white;\n padding: 2rem;\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n margin-bottom: 2rem;\n}\n\n.chart-container {\n max-width: 800px;\n margin: 0 auto;\n}\n\n.ratio-display {\n text-align: center;\n margin-top: 2rem;\n}\n\n.ratio-display h2 {\n color: var(--primary-color);\n}\n\n#ratioValue {\n color: var(--chart-color-2);\n font-weight: bold;\n}\n\n.explanation {\n background: white;\n padding: 2rem;\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\nfooter {\n background: var(--primary-color);\n color: white;\n text-align: center;\n padding: 1rem;\n margin-top: auto;\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2rem;\n }\n \n .input-section {\n flex-direction: column;\n align-items: center;\n }\n \n .chart-container {\n max-width: 100%;\n }\n}\n---script.js---\nfunction calculateNetSalary(gross) {\n // Simplified Israeli tax calculation\n const taxBrackets = [\n { min: 0, max: 6790, rate: 0.10 },\n { min: 6791, max: 9730, rate: 0.14 },\n { min: 9731, max: 15620, rate: 0.20 },\n { min: 15621, max: 21710, rate: 0.31 },\n { min: 21711, max: 45180, rate: 0.35 },\n { min: 45181, max: Infinity, rate: 0.47 }\n ];\n \n let tax = 0;\n for (const bracket of taxBrackets) {\n if (gross > bracket.min) {\n const taxableAmount = Math.min(gross, bracket.max) - bracket.min;\n tax += taxableAmount * bracket.rate;\n }\n }\n \n // Social security and health tax (12%)\n const socialTax = gross * 0.12;\n \n const net = gross - tax - socialTax;\n return Math.max(0, net);\n}\n\nfunction updateChart(gross, net) {\n const ctx = document.getElementById('salaryChart').getContext('2d');\n \n if (window.myChart) {\n window.myChart.destroy();\n }\n \n window.myChart = new Chart(ctx, {\n type: 'doughnut',\n data: {\n labels: ['Gross Salary', 'Net Salary'],\n datasets: [{\n data: [gross, net],\n backgroundColor: [\n 'rgba(52, 152, 219, 0.8)',\n 'rgba(46, 204, 113, 0.8)'\n ],\n borderWidth: 0\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n labels: {\n font: {\n size: 14\n }\n }\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n return `${context.label}: ₪${context.raw.toLocaleString()}`;\n }\n }\n }\n }\n }\n });\n}\n\ndocument.getElementById('calculateBtn').addEventListener('click', function() {\n const gross = parseFloat(document.getElementById('grossSalary').value);\n if (isNaN(gross) || gross <= 0) {\n alert('Please enter a valid gross salary');\n return;\n }\n \n const net = calculateNetSalary(gross);\n const ratio = (net / gross).toFixed(2);\n \n document.getElementById('ratioValue').textContent = ratio;\n updateChart(gross, net);\n});\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 275, + "completion_tokens": 1633, + "total_tokens": 1908, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 275 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..4d59f88 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# salaryratio1.scroll.pub +Website generated by DeepSeek 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..043c544 --- /dev/null +++ b/script.js @@ -0,0 +1,83 @@ +function calculateNetSalary(gross) { + // Simplified Israeli tax calculation + const taxBrackets = [ + { min: 0, max: 6790, rate: 0.10 }, + { min: 6791, max: 9730, rate: 0.14 }, + { min: 9731, max: 15620, rate: 0.20 }, + { min: 15621, max: 21710, rate: 0.31 }, + { min: 21711, max: 45180, rate: 0.35 }, + { min: 45181, max: Infinity, rate: 0.47 } + ]; + + let tax = 0; + for (const bracket of taxBrackets) { + if (gross > bracket.min) { + const taxableAmount = Math.min(gross, bracket.max) - bracket.min; + tax += taxableAmount * bracket.rate; + } + } + + // Social security and health tax (12%) + const socialTax = gross * 0.12; + + const net = gross - tax - socialTax; + return Math.max(0, net); +} + +function updateChart(gross, net) { + const ctx = document.getElementById('salaryChart').getContext('2d'); + + if (window.myChart) { + window.myChart.destroy(); + } + + window.myChart = new Chart(ctx, { + type: 'doughnut', + data: { + labels: ['Gross Salary', 'Net Salary'], + datasets: [{ + data: [gross, net], + backgroundColor: [ + 'rgba(52, 152, 219, 0.8)', + 'rgba(46, 204, 113, 0.8)' + ], + borderWidth: 0 + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + position: 'bottom', + labels: { + font: { + size: 14 + } + } + }, + tooltip: { + callbacks: { + label: function(context) { + return `${context.label}: ₪${context.raw.toLocaleString()}`; + } + } + } + } + } + }); +} + +document.getElementById('calculateBtn').addEventListener('click', function() { + const gross = parseFloat(document.getElementById('grossSalary').value); + if (isNaN(gross) || gross <= 0) { + alert('Please enter a valid gross salary'); + return; + } + + const net = calculateNetSalary(gross); + const ratio = (net / gross).toFixed(2); + + document.getElementById('ratioValue').textContent = ratio; + updateChart(gross, net); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..f69b819 --- /dev/null +++ b/style.css @@ -0,0 +1,128 @@ +:root { + --primary-color: #2c3e50; + --secondary-color: #3498db; + --background-color: #f5f6fa; + --text-color: #2c3e50; + --chart-color-1: #3498db; + --chart-color-2: #2ecc71; +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + line-height: 1.6; + margin: 0; + padding: 0; + background-color: var(--background-color); + color: var(--text-color); + min-height: 100vh; + display: flex; + flex-direction: column; +} + +header { + background: var(--primary-color); + color: white; + padding: 2rem 1rem; + text-align: center; +} + +h1 { + margin: 0; + font-size: 2.5rem; +} + +main { + flex: 1; + padding: 2rem; + max-width: 1200px; + margin: 0 auto; + width: 100%; +} + +.input-section { + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: center; + margin-bottom: 2rem; +} + +input[type="number"] { + padding: 0.8rem; + border: 2px solid var(--secondary-color); + border-radius: 8px; + font-size: 1rem; + width: 200px; +} + +button { + background: var(--secondary-color); + color: white; + border: none; + padding: 0.8rem 1.5rem; + border-radius: 8px; + cursor: pointer; + font-size: 1rem; + transition: background 0.3s ease; +} + +button:hover { + background: #2980b9; +} + +.chart-section { + background: white; + padding: 2rem; + border-radius: 12px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + margin-bottom: 2rem; +} + +.chart-container { + max-width: 800px; + margin: 0 auto; +} + +.ratio-display { + text-align: center; + margin-top: 2rem; +} + +.ratio-display h2 { + color: var(--primary-color); +} + +#ratioValue { + color: var(--chart-color-2); + font-weight: bold; +} + +.explanation { + background: white; + padding: 2rem; + border-radius: 12px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +footer { + background: var(--primary-color); + color: white; + text-align: center; + padding: 1rem; + margin-top: auto; +} + +@media (max-width: 768px) { + h1 { + font-size: 2rem; + } + + .input-section { + flex-direction: column; + align-items: center; + } + + .chart-container { + max-width: 100%; + } +} \ No newline at end of file