commit 67eeaa9128b5bdf408190733eacc1f491b7743fb
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 08:51:12 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..8ff1bcf
--- /dev/null
+++ b/body.html
@@ -0,0 +1,39 @@
+<header>
+ <h1>USA Salary Ratio Calculator</h1>
+ <p>Visualize the difference between gross and net salary</p>
+</header>
+
+<main>
+ <section class="calculator">
+ <div class="input-group">
+ <label for="grossSalary">Gross Salary ($):</label>
+ <input type="number" id="grossSalary" min="0" placeholder="Enter your gross salary">
+ </div>
+
+ <div class="input-group">
+ <label for="state">State:</label>
+ <select id="state">
+ <option value="federal">Federal Only</option>
+ <!-- Add all 50 states here -->
+ </select>
+ </div>
+
+ <button id="calculateBtn">Calculate Ratio</button>
+ </section>
+
+ <section class="results">
+ <div class="chart-container">
+ <canvas id="salaryChart"></canvas>
+ </div>
+
+ <div class="ratio-display">
+ <h2>Salary Ratio</h2>
+ <div class="ratio-value">0.00</div>
+ <p class="ratio-explanation">This represents the portion of your gross salary that you take home as net pay.</p>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Disclaimer: This tool provides estimates only. Actual tax deductions may vary.</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..6349885
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://salaryratio.scroll.pub
+metaTags
+editButton /edit.html
+title USA Salary Ratio Calculator
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..49cf48f
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "9582843c-81e2-482a-a9c3-fd9517ed895e",
+ "object": "chat.completion",
+ "created": 1735375846,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nsalaryratio.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://salaryratio.scroll.pub\nmetaTags\neditButton /edit.html\ntitle USA Salary Ratio Calculator\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>USA Salary Ratio Calculator</h1>\n <p>Visualize the difference between gross and net salary</p>\n</header>\n\n<main>\n <section class=\"calculator\">\n <div class=\"input-group\">\n <label for=\"grossSalary\">Gross Salary ($):</label>\n <input type=\"number\" id=\"grossSalary\" min=\"0\" placeholder=\"Enter your gross salary\">\n </div>\n \n <div class=\"input-group\">\n <label for=\"state\">State:</label>\n <select id=\"state\">\n <option value=\"federal\">Federal Only</option>\n <!-- Add all 50 states here -->\n </select>\n </div>\n \n <button id=\"calculateBtn\">Calculate Ratio</button>\n </section>\n\n <section class=\"results\">\n <div class=\"chart-container\">\n <canvas id=\"salaryChart\"></canvas>\n </div>\n \n <div class=\"ratio-display\">\n <h2>Salary Ratio</h2>\n <div class=\"ratio-value\">0.00</div>\n <p class=\"ratio-explanation\">This represents the portion of your gross salary that you take home as net pay.</p>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Disclaimer: This tool provides estimates only. Actual tax deductions may vary.</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #4a90e2;\n --secondary-color: #50e3c2;\n --background-color: #f5f7fa;\n --text-color: #333;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n margin: 0;\n padding: 0;\n}\n\nheader {\n text-align: center;\n padding: 2rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n box-shadow: var(--shadow);\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n}\n\n.calculator {\n max-width: 800px;\n margin: 2rem auto;\n padding: 2rem;\n background: white;\n border-radius: 12px;\n box-shadow: var(--shadow);\n}\n\n.input-group {\n margin-bottom: 1.5rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 600;\n}\n\ninput, select {\n width: 100%;\n padding: 0.8rem;\n border: 1px solid #ddd;\n border-radius: 8px;\n font-size: 1rem;\n}\n\nbutton {\n width: 100%;\n padding: 1rem;\n background: var(--primary-color);\n color: white;\n border: none;\n border-radius: 8px;\n font-size: 1rem;\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\nbutton:hover {\n background: #357abd;\n}\n\n.results {\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n max-width: 1200px;\n margin: 2rem auto;\n padding: 2rem;\n}\n\n.chart-container {\n background: white;\n padding: 1rem;\n border-radius: 12px;\n box-shadow: var(--shadow);\n}\n\n.ratio-display {\n text-align: center;\n padding: 2rem;\n background: white;\n border-radius: 12px;\n box-shadow: var(--shadow);\n}\n\n.ratio-value {\n font-size: 4rem;\n font-weight: bold;\n color: var(--primary-color);\n margin: 1rem 0;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n margin-top: 2rem;\n background: #333;\n color: white;\n}\n\n@media (min-width: 768px) {\n .results {\n grid-template-columns: 2fr 1fr;\n }\n}\n\n---script.js---\n// Tax rates and calculations\nconst federalTaxBrackets = [\n { min: 0, max: 9950, rate: 0.10 },\n { min: 9951, max: 40525, rate: 0.12 },\n { min: 40526, max: 86375, rate: 0.22 },\n { min: 86376, max: 164925, rate: 0.24 },\n { min: 164926, max: 209425, rate: 0.32 },\n { min: 209426, max: 523600, rate: 0.35 },\n { min: 523601, max: Infinity, rate: 0.37 }\n];\n\nconst FICA_TAX_RATE = 0.0765;\n\nfunction calculateFederalTax(income) {\n let tax = 0;\n for (const bracket of federalTaxBrackets) {\n if (income > bracket.min) {\n const taxableAmount = Math.min(income, bracket.max) - bracket.min;\n tax += taxableAmount * bracket.rate;\n }\n }\n return tax;\n}\n\nfunction calculateNetSalary(grossSalary) {\n const federalTax = calculateFederalTax(grossSalary);\n const ficaTax = grossSalary * FICA_TAX_RATE;\n const netSalary = grossSalary - federalTax - ficaTax;\n return netSalary;\n}\n\n// Chart setup\nconst ctx = document.getElementById('salaryChart').getContext('2d');\nconst salaryChart = new Chart(ctx, {\n type: 'doughnut',\n data: {\n labels: ['Net Salary', 'Taxes'],\n datasets: [{\n data: [0, 0],\n backgroundColor: ['#4a90e2', '#ff6384'],\n borderWidth: 0\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom'\n }\n }\n }\n});\n\n// Event listeners\ndocument.getElementById('calculateBtn').addEventListener('click', () => {\n const grossSalary = parseFloat(document.getElementById('grossSalary').value);\n \n if (isNaN(grossSalary) || grossSalary <= 0) {\n alert('Please enter a valid gross salary');\n return;\n }\n\n const netSalary = calculateNetSalary(grossSalary);\n const ratio = (netSalary / grossSalary).toFixed(2);\n \n // Update chart\n salaryChart.data.datasets[0].data = [netSalary, grossSalary - netSalary];\n salaryChart.update();\n\n // Update ratio display\n document.querySelector('.ratio-value').textContent = ratio;\n});\n\n// Initialize state dropdown\nconst states = [\n 'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware',\n 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',\n 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',\n 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico',\n 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania',\n 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',\n 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'\n];\n\nconst stateSelect = document.getElementById('state');\nstates.forEach(state => {\n const option = document.createElement('option');\n option.value = state.toLowerCase();\n option.textContent = state;\n stateSelect.appendChild(option);\n});\n\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 275,
+ "completion_tokens": 1848,
+ "total_tokens": 2123,
+ "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..01cb77b
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# salaryratio.scroll.pub
+Website generated by DeepSeek from prompt: I want a website that will show me the ratio between USA 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..c12134e
--- /dev/null
+++ b/script.js
@@ -0,0 +1,92 @@
+// Tax rates and calculations
+const federalTaxBrackets = [
+ { min: 0, max: 9950, rate: 0.10 },
+ { min: 9951, max: 40525, rate: 0.12 },
+ { min: 40526, max: 86375, rate: 0.22 },
+ { min: 86376, max: 164925, rate: 0.24 },
+ { min: 164926, max: 209425, rate: 0.32 },
+ { min: 209426, max: 523600, rate: 0.35 },
+ { min: 523601, max: Infinity, rate: 0.37 }
+];
+
+const FICA_TAX_RATE = 0.0765;
+
+function calculateFederalTax(income) {
+ let tax = 0;
+ for (const bracket of federalTaxBrackets) {
+ if (income > bracket.min) {
+ const taxableAmount = Math.min(income, bracket.max) - bracket.min;
+ tax += taxableAmount * bracket.rate;
+ }
+ }
+ return tax;
+}
+
+function calculateNetSalary(grossSalary) {
+ const federalTax = calculateFederalTax(grossSalary);
+ const ficaTax = grossSalary * FICA_TAX_RATE;
+ const netSalary = grossSalary - federalTax - ficaTax;
+ return netSalary;
+}
+
+// Chart setup
+const ctx = document.getElementById('salaryChart').getContext('2d');
+const salaryChart = new Chart(ctx, {
+ type: 'doughnut',
+ data: {
+ labels: ['Net Salary', 'Taxes'],
+ datasets: [{
+ data: [0, 0],
+ backgroundColor: ['#4a90e2', '#ff6384'],
+ borderWidth: 0
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ position: 'bottom'
+ }
+ }
+ }
+});
+
+// Event listeners
+document.getElementById('calculateBtn').addEventListener('click', () => {
+ const grossSalary = parseFloat(document.getElementById('grossSalary').value);
+
+ if (isNaN(grossSalary) || grossSalary <= 0) {
+ alert('Please enter a valid gross salary');
+ return;
+ }
+
+ const netSalary = calculateNetSalary(grossSalary);
+ const ratio = (netSalary / grossSalary).toFixed(2);
+
+ // Update chart
+ salaryChart.data.datasets[0].data = [netSalary, grossSalary - netSalary];
+ salaryChart.update();
+
+ // Update ratio display
+ document.querySelector('.ratio-value').textContent = ratio;
+});
+
+// Initialize state dropdown
+const states = [
+ 'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware',
+ 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
+ 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
+ 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico',
+ 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania',
+ 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
+ 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
+];
+
+const stateSelect = document.getElementById('state');
+states.forEach(state => {
+ const option = document.createElement('option');
+ option.value = state.toLowerCase();
+ option.textContent = state;
+ stateSelect.appendChild(option);
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e939a2a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,117 @@
+:root {
+ --primary-color: #4a90e2;
+ --secondary-color: #50e3c2;
+ --background-color: #f5f7fa;
+ --text-color: #333;
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--background-color);
+ margin: 0;
+ padding: 0;
+}
+
+header {
+ text-align: center;
+ padding: 2rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ box-shadow: var(--shadow);
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.calculator {
+ max-width: 800px;
+ margin: 2rem auto;
+ padding: 2rem;
+ background: white;
+ border-radius: 12px;
+ box-shadow: var(--shadow);
+}
+
+.input-group {
+ margin-bottom: 1.5rem;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+input, select {
+ width: 100%;
+ padding: 0.8rem;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ font-size: 1rem;
+}
+
+button {
+ width: 100%;
+ padding: 1rem;
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: 8px;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: background 0.3s ease;
+}
+
+button:hover {
+ background: #357abd;
+}
+
+.results {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 2rem;
+}
+
+.chart-container {
+ background: white;
+ padding: 1rem;
+ border-radius: 12px;
+ box-shadow: var(--shadow);
+}
+
+.ratio-display {
+ text-align: center;
+ padding: 2rem;
+ background: white;
+ border-radius: 12px;
+ box-shadow: var(--shadow);
+}
+
+.ratio-value {
+ font-size: 4rem;
+ font-weight: bold;
+ color: var(--primary-color);
+ margin: 1rem 0;
+}
+
+footer {
+ text-align: center;
+ padding: 1rem;
+ margin-top: 2rem;
+ background: #333;
+ color: white;
+}
+
+@media (min-width: 768px) {
+ .results {
+ grid-template-columns: 2fr 1fr;
+ }
+}