Changes to salaryratio.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   USA Salary Ratio Calculator
+   Visualize the difference between gross and net salary
+ 
+ 
+ 
+   
+     
+       Gross Salary ($):
+       
+     
+ 
+     
+       State:
+       
+     
+ 
+     
+   
+ 
+   
+     
+       
+     
+ 
+     
+       Salary Ratio
+       0.00
+       This represents the portion of your gross salary that you take home as net pay.
+     
+   
+ 
+ 
+ 
+   Disclaimer: This tool provides estimates only. Actual tax deductions may vary.
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://salaryratio.scroll.pub
+ metaTags
+ editButton /edit.html
+ title USA Salary Ratio Calculator
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "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\n  USA Salary Ratio Calculator\n  Visualize the difference between gross and net salary
\n\n\n\n  \n    \n      Gross Salary ($):\n      \n    
\n    \n    \n      State:\n      \n    
\n    \n    \n  \n\n  \n    \n      \n    
\n    \n    \n      Salary Ratio\n      0.00
\n      This represents the portion of your gross salary that you take home as net pay.
\n    
\n  \n\n\n\n  Disclaimer: This tool provides estimates only. Actual tax deductions may vary.
\n\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"
+ }

readme.scroll

Changed around line 1

+ # 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.

script.js

Changed around line 1
+ // 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);
+ });

style.css

Changed around line 1
+ :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;
+   }
+ }