4803ae2d18
- Updated API URLs from localhost:3000 to localhost:3001 in script.js - Added CORS headers to server.js to enable cross-origin requests - Changed server port from 3000 to 3001 to avoid port conflicts - Updated CSP in index.html to allow connections to localhost:3001 - Coin tracker entries now persist across page refreshes
316 lines
15 KiB
HTML
316 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="Content-Security-Policy" content="
|
||
default-src 'self';
|
||
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net;
|
||
style-src 'self' 'unsafe-inline';
|
||
img-src 'self' data:;
|
||
connect-src 'self' http://localhost:3001;
|
||
">
|
||
<title>Rechner</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>
|
||
<script defer src="direct-converter.js"></script>
|
||
<style>
|
||
#exportTrackersBtn {
|
||
margin-left: 10px;
|
||
background-color: #4CAF50; /* A different color to distinguish it */
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
|
||
<!-- Moved Backup & Restore collapsible to the top -->
|
||
<div class="collapsible">
|
||
<div class="collapsible-header" tabindex="0" role="button" aria-expanded="false">Backup & Restore</div>
|
||
<div class="collapsible-body" style="display: none;">
|
||
<div id="backupRestoreSection">
|
||
<h3>Backup & Restore</h3>
|
||
<div class="backup-controls">
|
||
<button id="createBackupBtn">Create Manual Backup</button>
|
||
<input type="text" placeholder="Backup name (optional)">
|
||
</div>
|
||
<div id="backupCalendarContainer" style="display: none;">
|
||
<div id="backupCalendar"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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">Add Coin Tracker</button>
|
||
<span style="margin-left: 15px;">
|
||
<span id="totalInvestmentValueDisplay"></span>
|
||
<span id="combinedDailyYieldsDisplay" style="margin-left: 10px;"></span>
|
||
</span>
|
||
<div id="coinTrackerContainer"></div>
|
||
</div>
|
||
|
||
<!-- Asset Conversion Section as an independent collapsible section -->
|
||
<div class="convert-assets-section collapsible">
|
||
<div class="collapsible-header" tabindex="0" role="button" aria-expanded="false">Convert Assets</div>
|
||
<div class="collapsible-body" style="display: none;">
|
||
<div id="assetConversionSection" style="padding: 10px; background: #2a2a2a; border-radius: 5px; border: 1px solid #3a3a3a;">
|
||
<p style="margin: 5px 0 15px; color: #aaa; font-style: italic;">
|
||
Transfer dollar values between your asset trackers to record cryptocurrency conversions.
|
||
The same dollar amount will be moved from source to destination asset.
|
||
</p>
|
||
|
||
<div class="conversion-controls" style="margin-bottom: 20px; padding: 10px; background: #333; border-radius: 5px;">
|
||
<div class="conversion-row" style="display: flex; flex-wrap: wrap; gap: 10px; align-items: center;">
|
||
<div>
|
||
<label for="fromAsset">From Asset:</label>
|
||
<select id="fromAsset" style="margin-left: 5px; padding: 5px;">
|
||
<option value="">-- Select Source --</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="conversionAmount">Dollar Amount ($):</label>
|
||
<input type="number" id="conversionAmount" min="0" step="0.01" style="width: 80px; padding: 5px;"
|
||
placeholder="0.00">
|
||
</div>
|
||
|
||
<div>
|
||
<label for="conversionType">Type:</label>
|
||
<select id="conversionType" style="margin-left: 5px; padding: 5px;">
|
||
<option value="principal">Reduce Principal</option>
|
||
<option value="income" selected>Transfer Income Only</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div id="incomeRowSelectionDiv" style="display: none;">
|
||
<label for="incomeRowSelection">Income Source:</label>
|
||
<select id="incomeRowSelection" style="margin-left: 5px; padding: 5px;">
|
||
<option value="">-- Select Income Row --</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="toAsset">To Asset:</label>
|
||
<select id="toAsset" style="margin-left: 5px; padding: 5px;">
|
||
<option value="">-- Select Destination --</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button id="executeConversion" style="padding: 5px 15px; background: #4CAF50; font-weight: bold;">
|
||
Transfer Dollar Value
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 10px; background: #333; padding: 8px; border-radius: 4px; font-size: 0.9em;">
|
||
<strong>How it works:</strong> Enter a dollar amount to move from one asset tracker to another.
|
||
This represents converting crypto from one type to another without tracking specific token amounts.
|
||
<ul style="margin-top: 5px; margin-bottom: 0; padding-left: 20px;">
|
||
<li><strong>Reduce Principal:</strong> Reduces the value of source asset (like selling some coins)</li>
|
||
<li><strong>Transfer Income Only:</strong> Transfers only generated income/fees without reducing original asset value</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>Conversion History</h3>
|
||
<div class="conversion-history-container">
|
||
<table id="conversionHistoryTable" class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Date</th>
|
||
<th>From Asset</th>
|
||
<th>$ Amount</th>
|
||
<th>To Asset</th>
|
||
<th>Same $ Amount</th>
|
||
<th>Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h3>Conversion Flow Analysis</h3>
|
||
<div id="conversionFlowStats">
|
||
<table id="conversionStatsTable" class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Asset</th>
|
||
<th>Total In</th>
|
||
<th>Total Out</th>
|
||
<th>Net Flow</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</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>
|
||
<button id="exportTrackersBtn" aria-label="Export all coin tracker data to CSV">Export Coin Trackers</button>
|
||
</div>
|
||
<!-- This container must have both classes -->
|
||
<div id="graphBox" class="charts-flex">
|
||
<canvas id="investedChart" aria-label="Chart of total invested amounts"></canvas>
|
||
<canvas id="incomeChart" style="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 id="analysisControls" style="margin: 20px 0; text-align: center; background: #444; padding: 10px; border: 1px solid #555; border-radius: 4px;">
|
||
<h3>Analysis Settings</h3>
|
||
<div style="display: flex; align-items: center; justify-content: center; gap: 15px;">
|
||
<div>
|
||
<label for="analysisReinvestRate">Reinvest Rate (%):</label>
|
||
<input type="number" id="analysisReinvestRate" min="0" max="100" step="1" value="0" style="width: 70px; padding: 5px;">
|
||
</div>
|
||
<div>
|
||
<label for="analysisDays">Projection Days:</label>
|
||
<input type="number" id="analysisDays" min="1" max="365" step="1" value="30" style="width: 70px; padding: 5px;">
|
||
</div>
|
||
</div>
|
||
</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>
|
||
<!-- Asset Conversions section was moved above, below coin trackers -->
|
||
</div>
|
||
<div id="loadingSpinner" class="loading-spinner" style="display: none;">
|
||
<p>Loading...</p>
|
||
</div>
|
||
<datalist id="platformListDatalist"></datalist>
|
||
|
||
</body>
|
||
</html>
|
||
|