<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Tax Lab</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="app">
<header class="hero">
<h1>AI Tax Lab <button class="info-btn" type="button" data-help="model">?</button></h1>
</header>
<aside class="sidebar">
<section class="policy-section environment">
<div class="section-heading">
<h2>Scenario</h2>
<button id="reset-defaults" class="ghost-btn" type="button">Reset</button>
</div>
<div class="control-group">
<label for="displacement">Labor Replaced <span id="val-displacement">5.0%</span>/yr</label>
<input type="range" id="displacement" min="0" max="10" value="5.0" step="0.5">
</div>
<div class="control-group">
<label for="efficiency">Capital Growth <span id="val-efficiency">1.0%</span>/yr</label>
<input type="range" id="efficiency" min="0" max="2.0" value="1.0" step="0.1">
</div>
</section>
<section class="policy-section policy-a">
<div class="section-heading">
<h2>Current Tax System</h2>
</div>
<p class="panel-note">Wage-heavy tax base.</p>
</section>
<section class="policy-section policy-b">
<div class="section-heading">
<h2>New AI / Capital Tax</h2>
</div>
<div class="control-group">
<label for="capital-tax-b">AI/Capital Tax <span id="val-capital-tax-b">35%</span></label>
<input type="range" id="capital-tax-b" min="0" max="80" value="35" step="5">
</div>
</section>
<details class="advanced-settings">
<summary>Advanced Policy</summary>
<div class="advanced-content">
<section class="nested-section policy-a">
<div class="section-heading">
<h2>Current Tax Details</h2>
</div>
<div class="control-group">
<label for="ubi-a">Revenue Returned as UBI <span id="val-ubi-a">10%</span></label>
<input type="range" id="ubi-a" min="0" max="100" value="10" step="10">
</div>
</section>
<section class="nested-section policy-b">
<div class="section-heading">
<h2>New Tax Details</h2>
</div>
<div class="control-group">
<label>Labor Tax Brackets</label>
<button id="edit-brackets-b" class="edit-btn" type="button">Edit</button>
</div>
<div class="control-group" id="group-deduction-b">
<label for="deduction-b">Standard Deduction <span id="val-deduction-b">$10,000</span></label>
<input type="range" id="deduction-b" min="0" max="100000" value="10000" step="1000">
</div>
<div class="control-group">
<label for="ubi-b">Revenue Returned as UBI <span id="val-ubi-b">100%</span></label>
<input type="range" id="ubi-b" min="0" max="100" value="100" step="10">
</div>
</section>
</div>
</details>
<details class="advanced-settings">
<summary>Advanced Model</summary>
<div class="advanced-content">
<div class="control-group">
<label for="years">Years to Simulate <span id="val-years">50</span></label>
<input type="range" id="years" min="10" max="100" value="50" step="10">
</div>
<div class="control-group">
<label for="yield">Net Wealth Yield <span id="val-yield">3%</span></label>
<input type="range" id="yield" min="-2" max="10" value="3" step="0.5">
</div>
<div class="control-group toggle">
<label for="tax-cap" class="checkbox-label">
<input type="checkbox" id="tax-cap">
Tax Capital Gains
</label>
</div>
<div class="control-group">
<label for="multiplier">Initial Wealth Multiplier <span id="val-multiplier">6.0x</span></label>
<input type="range" id="multiplier" min="0" max="20" value="6" step="0.5">
</div>
<hr class="divider">
<div class="control-group">
<label for="dist-type">Income Distribution</label>
<select id="dist-type" class="policy-select">
<option value="lognormal">LogNormal</option>
<option value="pareto">Pareto</option>
</select>
</div>
<div class="control-group" id="group-mean">
<label for="mean-income">Mean Income <span id="val-mean">$50k</span></label>
<input type="range" id="mean-income" min="20000" max="150000" value="50000" step="5000">
</div>
<div class="control-group" id="group-sigma">
<label for="sigma">Inequality Sigma <span id="val-sigma">0.75</span></label>
<input type="range" id="sigma" min="0.1" max="1.5" value="0.75" step="0.05">
</div>
<div class="control-group" id="group-shape" style="display: none;">
<label for="shape">Pareto Alpha <span id="val-shape">2.0</span></label>
<input type="range" id="shape" min="1.1" max="3.0" value="2.0" step="0.1">
</div>
</div>
</details>
<div class="status-panel">
<div class="status-actions">
<button id="share-scenario" class="ghost-btn" type="button">Copy Scenario Link</button>
</div>
</div>
</aside>
<main class="dashboard">
<section class="summary-panel">
<div class="dashboard-heading">
<div>
<h2>Current taxation misses the growing tax base.</h2>
</div>
</div>
<div class="metrics-grid">
<article class="metric-card">
<p class="metric-label">Funding Gap</p>
<p class="metric-value" id="funding-gap">0%</p>
</article>
<article class="metric-card">
<p class="metric-label">UBI Capacity</p>
<p class="metric-value" id="ubi-gap">$0</p>
</article>
<article class="metric-card">
<p class="metric-label">Top 1% Change</p>
<p class="metric-value" id="winner-top1">0 pts</p>
</article>
<article class="metric-card">
<p class="metric-label">Bottom 50% Gain</p>
<p class="metric-value" id="winner-employment">0 pts</p>
</article>
</div>
</section>
<section class="chart-card chart-card--hero">
<div class="chart-header chart-header--stack">
<div>
<h2>Current vs New Policy</h2>
</div>
<div class="legend">
<span><span class="dot orange"></span>Current Tax System</span>
<span><span class="dot green"></span>New AI / Capital Tax</span>
</div>
</div>
<div class="canvas-wrapper canvas-wrapper--hero">
<canvas id="distChart"></canvas>
</div>
<div class="timeline-controls">
<div class="timeline-header">
<label for="timeline">Timeline View <span id="val-timeline">Year 50</span></label>
<div class="timeline-buttons">
<button id="timeline-start" class="ghost-btn" type="button">Start</button>
<button id="timeline-play" class="ghost-btn" type="button">Play</button>
<button id="timeline-end" class="ghost-btn" type="button">End</button>
</div>
</div>
<input type="range" id="timeline" min="0" max="50" value="50" step="1">
</div>
</section>
<details class="detail-charts compact-details">
<summary>More charts</summary>
<div class="charts-grid">
<section class="chart-card">
<div class="chart-header">
<div>
<h2>Inequality History</h2>
</div>
<div class="legend legend--compact">
<span><span class="dot orange"></span>Current Tax System</span>
<span><span class="dot green"></span>New AI / Capital Tax</span>
</div>
</div>
<div class="canvas-wrapper">
<canvas id="giniChart"></canvas>
</div>
</section>
<section class="chart-card">
<div class="chart-header">
<div>
<h2>Wealth Shares in Year <span id="share-year-val">50</span></h2>
</div>
<div class="legend legend--compact">
<span><span class="dot dot-neutral"></span>Year 0</span>
<span><span class="dot orange"></span>Current Tax System</span>
<span><span class="dot green"></span>New AI / Capital Tax</span>
</div>
</div>
<div class="canvas-wrapper">
<canvas id="shareChart"></canvas>
</div>
</section>
</div>
</details>
</main>
</div>
<div id="bracket-modal" class="modal" style="display: none;">
<div class="modal-content">
<div class="modal-header">
<h3>Custom Tax Brackets</h3>
<button id="close-modal" class="close-btn" type="button">×</button>
</div>
<div class="modal-body">
<div id="bracket-list"></div>
<button id="add-bracket" class="add-btn" type="button">+ Add Bracket</button>
</div>
<div class="modal-footer">
<button id="apply-brackets" class="apply-btn" type="button">Apply</button>
</div>
</div>
</div>
<div id="help-modal" class="modal" style="display: none;">
<div class="modal-content help-content">
<div class="modal-header">
<h3 id="help-title">Info</h3>
<button id="close-help" class="close-btn" type="button">×</button>
</div>
<div class="modal-body">
<div id="help-body" class="explanatory-overlay"></div>
</div>
</div>
</div>
<script type="importmap">
{
"imports": {
"chart.js/auto": "/node_modules/chart.js/auto/auto.js",
"@kurkle/color": "/node_modules/@kurkle/color/dist/color.esm.js"
}
}
</script>
<script type="module" src="/main.js"></script>
</body>
</html>