commit b92197e73c3c5f64c85583fda208cfcf7db82af7
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 08:51:14 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..cd7cba0
--- /dev/null
+++ b/body.html
@@ -0,0 +1,50 @@
+<header>
+ <h1>SalaRatio</h1>
+ <p>Visualize Your Take-Home Pay</p>
+</header>
+
+<main>
+ <section class="calculator">
+ <div class="input-container">
+ <label for="gross-salary">Enter Gross Annual Salary ($)</label>
+ <input type="number" id="gross-salary" min="0" max="1000000" step="1000" placeholder="e.g. 75000">
+ <button id="calculate">Calculate</button>
+ </div>
+
+ <div class="results hidden">
+ <div class="chart-container">
+ <canvas id="pie-chart"></canvas>
+ <div class="legend">
+ <div class="legend-item">
+ <span class="color-box net"></span>
+ <span>Net Salary</span>
+ </div>
+ <div class="legend-item">
+ <span class="color-box tax"></span>
+ <span>Taxes & Deductions</span>
+ </div>
+ </div>
+ </div>
+
+ <div class="numbers">
+ <div class="number-box">
+ <h3>Gross Annual</h3>
+ <p id="gross-amount">$0</p>
+ </div>
+ <div class="number-box">
+ <h3>Net Annual</h3>
+ <p id="net-amount">$0</p>
+ </div>
+ <div class="number-box">
+ <h3>Monthly Take-Home</h3>
+ <p id="monthly-amount">$0</p>
+ </div>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with ❤️ for salary transparency</p>
+ <p>Note: Calculations are estimates based on average US tax rates</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..078c45a
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://salaratio.scroll.pub
+metaTags
+editButton /edit.html
+title USA Salary Calculator - Gross to Net Ratio
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..250aa6c
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01UvWYV5SB7B29nHZer7DKjM",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a salary calculator website with interactive charts:\n\n---domain---\nsalaratio.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://salaratio.scroll.pub\nmetaTags\neditButton /edit.html\ntitle USA Salary Calculator - Gross to Net Ratio\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>SalaRatio</h1>\n <p>Visualize Your Take-Home Pay</p>\n</header>\n\n<main>\n <section class=\"calculator\">\n <div class=\"input-container\">\n <label for=\"gross-salary\">Enter Gross Annual Salary ($)</label>\n <input type=\"number\" id=\"gross-salary\" min=\"0\" max=\"1000000\" step=\"1000\" placeholder=\"e.g. 75000\">\n <button id=\"calculate\">Calculate</button>\n </div>\n \n <div class=\"results hidden\">\n <div class=\"chart-container\">\n <canvas id=\"pie-chart\"></canvas>\n <div class=\"legend\">\n <div class=\"legend-item\">\n <span class=\"color-box net\"></span>\n <span>Net Salary</span>\n </div>\n <div class=\"legend-item\">\n <span class=\"color-box tax\"></span>\n <span>Taxes & Deductions</span>\n </div>\n </div>\n </div>\n \n <div class=\"numbers\">\n <div class=\"number-box\">\n <h3>Gross Annual</h3>\n <p id=\"gross-amount\">$0</p>\n </div>\n <div class=\"number-box\">\n <h3>Net Annual</h3>\n <p id=\"net-amount\">$0</p>\n </div>\n <div class=\"number-box\">\n <h3>Monthly Take-Home</h3>\n <p id=\"monthly-amount\">$0</p>\n </div>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Made with ❤️ for salary transparency</p>\n <p>Note: Calculations are estimates based on average US tax rates</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2D3436;\n --secondary: #636E72;\n --accent: #00B894;\n --background: #F5F6FA;\n --white: #FFFFFF;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n background: var(--background);\n color: var(--primary);\n line-height: 1.6;\n}\n\nheader {\n text-align: center;\n padding: 4rem 1rem;\n background: linear-gradient(135deg, var(--accent), #00CEC9);\n color: var(--white);\n}\n\nh1 {\n font-size: 3rem;\n margin-bottom: 0.5rem;\n}\n\nmain {\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n}\n\n.calculator {\n background: var(--white);\n border-radius: 1rem;\n padding: 2rem;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n}\n\n.input-container {\n text-align: center;\n margin-bottom: 2rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 1rem;\n font-weight: 500;\n}\n\ninput {\n width: 100%;\n max-width: 300px;\n padding: 1rem;\n border: 2px solid #DFE6E9;\n border-radius: 0.5rem;\n font-size: 1.1rem;\n margin-bottom: 1rem;\n}\n\nbutton {\n background: var(--accent);\n color: var(--white);\n border: none;\n padding: 1rem 2rem;\n border-radius: 0.5rem;\n font-size: 1.1rem;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\nbutton:hover {\n transform: translateY(-2px);\n}\n\n.results {\n opacity: 1;\n transition: opacity 0.3s;\n}\n\n.results.hidden {\n opacity: 0;\n}\n\n.chart-container {\n max-width: 500px;\n margin: 0 auto 2rem;\n}\n\n.legend {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-top: 1rem;\n}\n\n.legend-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.color-box {\n width: 1rem;\n height: 1rem;\n border-radius: 3px;\n}\n\n.color-box.net { background: var(--accent); }\n.color-box.tax { background: var(--secondary); }\n\n.numbers {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n text-align: center;\n}\n\n.number-box {\n background: var(--background);\n padding: 1.5rem;\n border-radius: 0.5rem;\n}\n\n.number-box h3 {\n color: var(--secondary);\n margin-bottom: 0.5rem;\n}\n\n.number-box p {\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--primary);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n color: var(--secondary);\n}\n\n@media (max-width: 768px) {\n header {\n padding: 2rem 1rem;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n .calculator {\n padding: 1rem;\n }\n \n .numbers {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const calculateBtn = document.getElementById('calculate');\n const resultsDiv = document.querySelector('.results');\n let chart = null;\n\n calculateBtn.addEventListener('click', calculateSalary);\n\n function calculateSalary() {\n const grossSalary = parseFloat(document.getElementById('gross-salary').value);\n \n if (isNaN(grossSalary) || grossSalary <= 0) {\n alert('Please enter a valid salary amount');\n return;\n }\n\n // Simple tax calculation (estimated)\n const taxRate = calculateTaxRate(grossSalary);\n const netSalary = grossSalary * (1 - taxRate);\n const monthlyNet = netSalary / 12;\n\n updateDisplay(grossSalary, netSalary, monthlyNet);\n drawChart(netSalary, grossSalary - netSalary);\n \n resultsDiv.classList.remove('hidden');\n }\n\n function calculateTaxRate(gross) {\n // Progressive tax rate simulation\n if (gross <= 9950) return 0.10;\n if (gross <= 40525) return 0.12;\n if (gross <= 86375) return 0.22;\n if (gross <= 164925) return 0.24;\n if (gross <= 209425) return 0.32;\n if (gross <= 523600) return 0.35;\n return 0.37;\n }\n\n function updateDisplay(gross, net, monthly) {\n document.getElementById('gross-amount').textContent = formatCurrency(gross);\n document.getElementById('net-amount').textContent = formatCurrency(net);\n document.getElementById('monthly-amount').textContent = formatCurrency(monthly);\n }\n\n function formatCurrency(amount) {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n maximumFractionDigits: 0\n }).format(amount);\n }\n\n function drawChart(net, tax) {\n const ctx = document.getElementById('pie-chart').getContext('2d');\n \n if (chart) {\n chart.destroy();\n }\n\n const centerX = ctx.canvas.width / 2;\n const centerY = ctx.canvas.height / 2;\n const radius = Math.min(centerX, centerY) * 0.8;\n\n const total = net + tax;\n const netAngle = (net / total) * Math.PI * 2;\n\n ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n\n // Draw net salary portion\n ctx.beginPath();\n ctx.moveTo(centerX, centerY);\n ctx.arc(centerX, centerY, radius, 0, netAngle);\n ctx.fillStyle = '#00B894';\n ctx.fill();\n\n // Draw tax portion\n ctx.beginPath();\n ctx.moveTo(centerX, centerY);\n ctx.arc(centerX, centerY, radius, netAngle, Math.PI * 2);\n ctx.fillStyle = '#636E72';\n ctx.fill();\n }\n});\n\n---end---\n\nThis implementation features:\n\n1. Clean, modern design with smooth animations\n2. Interactive salary calculator\n3. Custom-drawn pie chart showing the ratio between gross and net salary\n4. Responsive layout that works on all devices\n5. Progressive tax rate simulation\n6. Animated transitions and hover effects\n7. Clear visual hierarchy and intuitive user interface\n8. Accessible form controls and semantic HTML\n9. Professional color scheme and typography\n10. Detailed salary breakdown with monthly calculations\n\nThe domain name \"salaratio\" is a combination of \"salary\" and \"ratio\", making it memorable and relevant to the site's purpose."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 311,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2557
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..df15428
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# salaratio.scroll.pub
+Website generated by Claude 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..1e4733f
--- /dev/null
+++ b/script.js
@@ -0,0 +1,82 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const calculateBtn = document.getElementById('calculate');
+ const resultsDiv = document.querySelector('.results');
+ let chart = null;
+
+ calculateBtn.addEventListener('click', calculateSalary);
+
+ function calculateSalary() {
+ const grossSalary = parseFloat(document.getElementById('gross-salary').value);
+
+ if (isNaN(grossSalary) || grossSalary <= 0) {
+ alert('Please enter a valid salary amount');
+ return;
+ }
+
+ // Simple tax calculation (estimated)
+ const taxRate = calculateTaxRate(grossSalary);
+ const netSalary = grossSalary * (1 - taxRate);
+ const monthlyNet = netSalary / 12;
+
+ updateDisplay(grossSalary, netSalary, monthlyNet);
+ drawChart(netSalary, grossSalary - netSalary);
+
+ resultsDiv.classList.remove('hidden');
+ }
+
+ function calculateTaxRate(gross) {
+ // Progressive tax rate simulation
+ if (gross <= 9950) return 0.10;
+ if (gross <= 40525) return 0.12;
+ if (gross <= 86375) return 0.22;
+ if (gross <= 164925) return 0.24;
+ if (gross <= 209425) return 0.32;
+ if (gross <= 523600) return 0.35;
+ return 0.37;
+ }
+
+ function updateDisplay(gross, net, monthly) {
+ document.getElementById('gross-amount').textContent = formatCurrency(gross);
+ document.getElementById('net-amount').textContent = formatCurrency(net);
+ document.getElementById('monthly-amount').textContent = formatCurrency(monthly);
+ }
+
+ function formatCurrency(amount) {
+ return new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ maximumFractionDigits: 0
+ }).format(amount);
+ }
+
+ function drawChart(net, tax) {
+ const ctx = document.getElementById('pie-chart').getContext('2d');
+
+ if (chart) {
+ chart.destroy();
+ }
+
+ const centerX = ctx.canvas.width / 2;
+ const centerY = ctx.canvas.height / 2;
+ const radius = Math.min(centerX, centerY) * 0.8;
+
+ const total = net + tax;
+ const netAngle = (net / total) * Math.PI * 2;
+
+ ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+ // Draw net salary portion
+ ctx.beginPath();
+ ctx.moveTo(centerX, centerY);
+ ctx.arc(centerX, centerY, radius, 0, netAngle);
+ ctx.fillStyle = '#00B894';
+ ctx.fill();
+
+ // Draw tax portion
+ ctx.beginPath();
+ ctx.moveTo(centerX, centerY);
+ ctx.arc(centerX, centerY, radius, netAngle, Math.PI * 2);
+ ctx.fillStyle = '#636E72';
+ ctx.fill();
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..8d3dd18
--- /dev/null
+++ b/style.css
@@ -0,0 +1,165 @@
+:root {
+ --primary: #2D3436;
+ --secondary: #636E72;
+ --accent: #00B894;
+ --background: #F5F6FA;
+ --white: #FFFFFF;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background: var(--background);
+ color: var(--primary);
+ line-height: 1.6;
+}
+
+header {
+ text-align: center;
+ padding: 4rem 1rem;
+ background: linear-gradient(135deg, var(--accent), #00CEC9);
+ color: var(--white);
+}
+
+h1 {
+ font-size: 3rem;
+ margin-bottom: 0.5rem;
+}
+
+main {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+.calculator {
+ background: var(--white);
+ border-radius: 1rem;
+ padding: 2rem;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+.input-container {
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+label {
+ display: block;
+ margin-bottom: 1rem;
+ font-weight: 500;
+}
+
+input {
+ width: 100%;
+ max-width: 300px;
+ padding: 1rem;
+ border: 2px solid #DFE6E9;
+ border-radius: 0.5rem;
+ font-size: 1.1rem;
+ margin-bottom: 1rem;
+}
+
+button {
+ background: var(--accent);
+ color: var(--white);
+ border: none;
+ padding: 1rem 2rem;
+ border-radius: 0.5rem;
+ font-size: 1.1rem;
+ cursor: pointer;
+ transition: transform 0.2s;
+}
+
+button:hover {
+ transform: translateY(-2px);
+}
+
+.results {
+ opacity: 1;
+ transition: opacity 0.3s;
+}
+
+.results.hidden {
+ opacity: 0;
+}
+
+.chart-container {
+ max-width: 500px;
+ margin: 0 auto 2rem;
+}
+
+.legend {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ margin-top: 1rem;
+}
+
+.legend-item {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.color-box {
+ width: 1rem;
+ height: 1rem;
+ border-radius: 3px;
+}
+
+.color-box.net { background: var(--accent); }
+.color-box.tax { background: var(--secondary); }
+
+.numbers {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1rem;
+ text-align: center;
+}
+
+.number-box {
+ background: var(--background);
+ padding: 1.5rem;
+ border-radius: 0.5rem;
+}
+
+.number-box h3 {
+ color: var(--secondary);
+ margin-bottom: 0.5rem;
+}
+
+.number-box p {
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: var(--primary);
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ color: var(--secondary);
+}
+
+@media (max-width: 768px) {
+ header {
+ padding: 2rem 1rem;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ .calculator {
+ padding: 1rem;
+ }
+
+ .numbers {
+ grid-template-columns: 1fr;
+ }
+}