172 lines
8.6 KiB
HTML
172 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta http-equiv="Content-Security-Policy" content="
|
||
default-src 'self';
|
||
script-src 'self' https://cdn.jsdelivr.net 'unsafe-inline' 'unsafe-eval';
|
||
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
|
||
font-src 'self' https://fonts.gstatic.com;
|
||
">
|
||
<title>Fancy Calculator</title>
|
||
|
||
<!-- Favicon links -->
|
||
<link rel="icon" href="favicon/favicon.ico" sizes="any">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon_16x16.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon_32x32.png">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="favicon/favicon_180x180.png">
|
||
<link rel="icon" type="image/png" sizes="192x192" href="favicon/favicon_192x192.png">
|
||
<link rel="manifest" href="favicon/site.webmanifest">
|
||
|
||
<link rel="stylesheet" href="style.css">
|
||
<script defer src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script defer src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
|
||
<script defer src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
|
||
<script defer src="script.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="collapsible-container">
|
||
<div class="collapsible">
|
||
<div class="collapsible-header" tabindex="0" role="button" aria-expanded="false">Calculators & Chart</div>
|
||
<div class="collapsible-body" style="display: none;">
|
||
<div class="flex-container">
|
||
<div class="left-panel">
|
||
<div class="calc-row">
|
||
<div class="calculator-box">
|
||
<div class="input-group">
|
||
<label for="initialPrincipal">Initial Principal ($)</label>
|
||
<div class="number-input">
|
||
<button type="button" data-target="initialPrincipal" data-delta="-1" aria-label="Decrease initial principal">−</button>
|
||
<input type="number" id="initialPrincipal" value="1000" data-step="100">
|
||
<button type="button" data-target="initialPrincipal" data-delta="1" aria-label="Increase initial principal">+</button>
|
||
</div>
|
||
</div>
|
||
<div class="input-group">
|
||
<label for="dailyRate">Effective Daily Rate (%)</label>
|
||
<div class="number-input">
|
||
<button type="button" data-target="dailyRate" data-delta="-1" aria-label="Decrease daily rate">−</button>
|
||
<input type="number" id="dailyRate" value="10" step="any" data-step="1">
|
||
<button type="button" data-target="dailyRate" data-delta="1" aria-label="Increase daily rate">+</button>
|
||
</div>
|
||
</div>
|
||
<div class="input-group">
|
||
<label for="termDays">Term (days)</label>
|
||
<div class="number-input">
|
||
<button type="button" data-target="termDays" data-delta="-1" aria-label="Decrease term days">−</button>
|
||
<input type="number" id="termDays" value="7" data-step="1">
|
||
<button type="button" data-target="termDays" data-delta="1" aria-label="Increase term days">+</button>
|
||
</div>
|
||
</div>
|
||
<div class="input-group">
|
||
<label for="reinvestRate">Re-invest Rate (%)</label>
|
||
<div class="number-input">
|
||
<button type="button" data-target="reinvestRate" data-delta="-1" aria-label="Decrease reinvest rate">−</button>
|
||
<input type="number" id="reinvestRate" value="70" data-step="1">
|
||
<button type="button" data-target="reinvestRate" data-delta="1" aria-label="Increase reinvest rate">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="calculator-box">
|
||
<h4>Transfer Values</h4>
|
||
<label for="transferSelect">Select Coin Tracker:</label>
|
||
<select id="transferSelect"></select>
|
||
<button type="button" id="transferSettingsBtn" aria-label="Transfer capital and rate to selected coin tracker">Transfer Capital & Rate</button>
|
||
</div>
|
||
<div class="calculator-box">
|
||
<h4>Summary</h4>
|
||
<p id="sumInvestment"></p>
|
||
<p id="sumRate"></p>
|
||
<p id="sumDays"></p>
|
||
<p id="sumInterest"></p>
|
||
<p id="sumNewBalance"></p>
|
||
<p id="sumCash"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-panel">
|
||
<div class="collapsible-container" style="margin-bottom: 20px;">
|
||
<div class="collapsible">
|
||
<div class="collapsible-header" tabindex="0" role="button" aria-expanded="false">Extra Calculators</div>
|
||
<div class="collapsible-body" style="display: none;">
|
||
<div class="calc-row">
|
||
<div class="calculator-box">
|
||
<div class="input-group">
|
||
<label for="totalAmountPercent">Total Amount ($)</label>
|
||
<input type="number" id="totalAmountPercent" value="1000">
|
||
</div>
|
||
<div class="input-group">
|
||
<label for="givenAmount">Amount ($)</label>
|
||
<input type="number" id="givenAmount" value="100">
|
||
</div>
|
||
<p id="percentageResult"></p>
|
||
</div>
|
||
<div class="calculator-box">
|
||
<div class="input-group">
|
||
<label for="totalAmountPercent2">Total Amount ($)</label>
|
||
<input type="number" id="totalAmountPercent2" value="1000">
|
||
</div>
|
||
<div class="input-group">
|
||
<label for="percentInput2">Percentage (%)</label>
|
||
<input type="number" id="percentInput2" value="20">
|
||
</div>
|
||
<p id="percentageResult2"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<canvas id="interestChart" aria-label="Chart displaying reinvestment and cash flow over time"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="coinTrackerSection">
|
||
<button type="button" id="addCoinTrackerBtn" aria-label="Add a new coin tracker">Add Coin Tracker</button>
|
||
<div id="coinTrackerContainer">
|
||
<!-- REMOVED the leftover "example coin tracker" block here -->
|
||
</div>
|
||
</div>
|
||
<div id="chartControls" style="margin: 20px 0; text-align: center;">
|
||
<button id="showInvestedChartBtn" aria-label="Show chart of total invested amounts">Show Invested Chart</button>
|
||
<button id="showIncomeChartBtn" aria-label="Show chart of total income">Show Income Chart</button>
|
||
</div>
|
||
<div id="graphBox" style="position: relative; height: 400px; margin: 20px 0;">
|
||
<canvas id="investedChart" style="width: 100%; height: 100%;" aria-label="Chart of total invested amounts"></canvas>
|
||
<canvas id="incomeChart" style="width: 100%; height: 400px; display: none;" aria-label="Chart of total income"></canvas>
|
||
</div>
|
||
<!-- Graph reset section with both reset and delete options -->
|
||
<div id="graphResetSection" style="margin: 20px 0; text-align: center; background: #444; padding: 10px; border: 1px solid #555; border-radius: 4px;">
|
||
<h3>Reset Graph Value</h3>
|
||
<label for="resetDate">Date:</label>
|
||
<input type="date" id="resetDate">
|
||
<label for="resetAmount">Amount to delete ($):</label>
|
||
<input type="number" id="resetAmount" step="0.01">
|
||
<button id="resetGraphValueBtn">Reset Graph Value</button>
|
||
<button id="deleteGraphDataPointBtn">Delete Data for Date</button>
|
||
</div>
|
||
<div class="table-section">
|
||
<h2>Compounding Interest – Investment Analysis</h2>
|
||
<table id="analysisTable">
|
||
<thead>
|
||
<tr>
|
||
<th>Day</th>
|
||
<th>Date</th>
|
||
<th>Earnings</th>
|
||
<th>Reinvest (%)</th>
|
||
<th>Principal/Cashout</th>
|
||
<th>Total Principal</th>
|
||
<th>Total Cash</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<datalist id="platformListDatalist"></datalist>
|
||
</body>
|
||
</html>
|
||
|