235 lines
9.1 KiB
HTML
235 lines
9.1 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Bill Tracker</title>
|
|||
|
|
<link rel="stylesheet" href="/css/style.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="app">
|
|||
|
|
<nav class="sidebar">
|
|||
|
|
<div class="logo">
|
|||
|
|
<span class="logo-icon">$</span>
|
|||
|
|
<span class="logo-text">BillTracker</span>
|
|||
|
|
</div>
|
|||
|
|
<ul class="nav-links">
|
|||
|
|
<li><a href="#tracker" class="nav-link active" data-page="tracker">
|
|||
|
|
<span class="nav-icon">☰</span> Tracker
|
|||
|
|
</a></li>
|
|||
|
|
<li><a href="#bills" class="nav-link" data-page="bills">
|
|||
|
|
<span class="nav-icon">●</span> Bills
|
|||
|
|
</a></li>
|
|||
|
|
<li><a href="#categories" class="nav-link" data-page="categories">
|
|||
|
|
<span class="nav-icon">◆</span> Categories
|
|||
|
|
</a></li>
|
|||
|
|
<li><a href="#settings" class="nav-link" data-page="settings">
|
|||
|
|
<span class="nav-icon">⚙</span> Settings
|
|||
|
|
</a></li>
|
|||
|
|
<li><a href="#status" class="nav-link" data-page="status">
|
|||
|
|
<span class="nav-icon">⏺</span> Status
|
|||
|
|
</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="sidebar-footer">
|
|||
|
|
<span id="sidebar-username"></span>
|
|||
|
|
<a href="#" id="sidebar-logout" class="nav-link sidebar-logout">
|
|||
|
|
<span class="nav-icon">←</span> Sign Out
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<main class="main-content">
|
|||
|
|
<div id="page-tracker" class="page active"></div>
|
|||
|
|
<div id="page-bills" class="page"></div>
|
|||
|
|
<div id="page-categories" class="page"></div>
|
|||
|
|
<div id="page-settings" class="page"></div>
|
|||
|
|
<div id="page-status" class="page"></div>
|
|||
|
|
</main>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Bill Modal -->
|
|||
|
|
<div id="bill-modal" class="modal hidden">
|
|||
|
|
<div class="modal-overlay"></div>
|
|||
|
|
<div class="modal-box">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<h2 id="bill-modal-title">Add Bill</h2>
|
|||
|
|
<button class="modal-close" id="bill-modal-close">×</button>
|
|||
|
|
</div>
|
|||
|
|
<form id="bill-form" class="modal-form">
|
|||
|
|
<input type="hidden" id="bill-id">
|
|||
|
|
<div class="form-grid">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="bill-name">Name *</label>
|
|||
|
|
<input type="text" id="bill-name" placeholder="e.g. Electricity" required>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="bill-category">Category</label>
|
|||
|
|
<select id="bill-category">
|
|||
|
|
<option value="">— none —</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="bill-due-day">Due Day (1–31) *</label>
|
|||
|
|
<input type="number" id="bill-due-day" min="1" max="31" required>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="bill-expected">Expected Amount ($)</label>
|
|||
|
|
<input type="number" id="bill-expected" min="0" step="0.01" placeholder="0.00">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="bill-interest-rate">Interest rate (APR %)</label>
|
|||
|
|
<input type="number" id="bill-interest-rate" min="0" max="100" step="0.01" placeholder="Optional">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="bill-cycle">Billing Cycle</label>
|
|||
|
|
<select id="bill-cycle">
|
|||
|
|
<option value="monthly">Monthly</option>
|
|||
|
|
<option value="quarterly">Quarterly</option>
|
|||
|
|
<option value="annually">Annually</option>
|
|||
|
|
<option value="irregular">Irregular</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group checkbox-group">
|
|||
|
|
<label>
|
|||
|
|
<input type="checkbox" id="bill-autopay"> Autopay / Autodraft
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<input type="checkbox" id="bill-2fa"> Has 2FA
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="bill-website">Website</label>
|
|||
|
|
<input type="text" id="bill-website" placeholder="https://...">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="bill-username">Username / Email</label>
|
|||
|
|
<input type="text" id="bill-username">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="bill-account-info">Account Info</label>
|
|||
|
|
<input type="text" id="bill-account-info" placeholder="Last 4 digits, account #...">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group full-width">
|
|||
|
|
<label for="bill-notes">Notes</label>
|
|||
|
|
<textarea id="bill-notes" rows="2"></textarea>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<button type="button" id="bill-modal-cancel" class="btn btn-ghost">Cancel</button>
|
|||
|
|
<button type="submit" class="btn btn-primary">Save Bill</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Payment Modal -->
|
|||
|
|
<div id="payment-modal" class="modal hidden">
|
|||
|
|
<div class="modal-overlay"></div>
|
|||
|
|
<div class="modal-box modal-box-sm">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<h2 id="payment-modal-title">Edit Payment</h2>
|
|||
|
|
<button class="modal-close" id="payment-modal-close">×</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<form id="payment-form" class="modal-form">
|
|||
|
|
<input type="hidden" id="payment-bill-id">
|
|||
|
|
<input type="hidden" id="payment-id">
|
|||
|
|
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="payment-amount">Amount ($) *</label>
|
|||
|
|
<input type="number" id="payment-amount" min="0" step="0.01" required>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="payment-date">Paid Date *</label>
|
|||
|
|
<input type="date" id="payment-date" required>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="payment-method">Method</label>
|
|||
|
|
<select id="payment-method">
|
|||
|
|
<option value="">—</option>
|
|||
|
|
<option value="bank">Bank Transfer</option>
|
|||
|
|
<option value="card">Card</option>
|
|||
|
|
<option value="autopay">Autopay</option>
|
|||
|
|
<option value="check">Check</option>
|
|||
|
|
<option value="cash">Cash</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="payment-notes">Notes</label>
|
|||
|
|
<input type="text" id="payment-notes">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- UPDATED FOOTER -->
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
id="payment-delete"
|
|||
|
|
class="btn btn-danger"
|
|||
|
|
style="margin-right:auto"
|
|||
|
|
title="Removes this payment record and marks the bill as unpaid. The bill itself is NOT deleted.">
|
|||
|
|
Remove Payment
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button type="button" id="payment-modal-cancel" class="btn btn-ghost">Cancel</button>
|
|||
|
|
<button type="submit" class="btn btn-primary">Save</button>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Privacy notice — shown on first login -->
|
|||
|
|
<div id="privacy-overlay" class="modal hidden">
|
|||
|
|
<div class="modal-overlay"></div>
|
|||
|
|
<div class="modal-box modal-box-sm" style="text-align:left">
|
|||
|
|
<div style="font-size:22px;margin-bottom:12px">🔒</div>
|
|||
|
|
<h2 style="font-size:17px;margin-bottom:12px">Your data is private</h2>
|
|||
|
|
<p style="color:var(--text-muted);font-size:14px;line-height:1.6;margin-bottom:14px">
|
|||
|
|
The <strong>admin account</strong> on this system can only:
|
|||
|
|
</p>
|
|||
|
|
<ul style="margin:0 0 16px 20px;color:var(--text-muted);font-size:14px;line-height:1.9">
|
|||
|
|
<li>Create new user accounts</li>
|
|||
|
|
<li>Reset your password if you're locked out</li>
|
|||
|
|
</ul>
|
|||
|
|
<p style="color:var(--text-muted);font-size:14px;line-height:1.6;margin-bottom:20px">
|
|||
|
|
The admin <strong>cannot</strong> view, edit, or access your bills,
|
|||
|
|
payments, or any financial data — by design.
|
|||
|
|
</p>
|
|||
|
|
<button class="btn btn-primary" id="privacy-ack-btn" style="width:100%">Got it, take me to my tracker</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Password change — shown when must_change_password is set -->
|
|||
|
|
<div id="change-password-overlay" class="modal hidden">
|
|||
|
|
<div class="modal-overlay"></div>
|
|||
|
|
<div class="modal-box modal-box-sm">
|
|||
|
|
<h2 style="margin-bottom:6px">Change Your Password</h2>
|
|||
|
|
<p style="color:var(--text-muted);font-size:13px;margin-bottom:18px">
|
|||
|
|
Your password was reset by the admin. Please set a new one to continue.
|
|||
|
|
</p>
|
|||
|
|
<form id="change-password-form">
|
|||
|
|
<div class="form-group" style="margin-bottom:12px">
|
|||
|
|
<label for="cp-new">New Password</label>
|
|||
|
|
<input type="password" id="cp-new" minlength="8" required placeholder="At least 8 characters">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group" style="margin-bottom:16px">
|
|||
|
|
<label for="cp-confirm">Confirm Password</label>
|
|||
|
|
<input type="password" id="cp-confirm" minlength="8" required>
|
|||
|
|
</div>
|
|||
|
|
<div id="cp-error" style="color:var(--danger);font-size:13px;margin-bottom:10px;min-height:18px"></div>
|
|||
|
|
<button type="submit" class="btn btn-primary" style="width:100%">Set New Password</button>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="/js/api.js"></script>
|
|||
|
|
<script src="/js/tracker.js"></script>
|
|||
|
|
<script src="/js/bills.js"></script>
|
|||
|
|
<script src="/js/categories.js"></script>
|
|||
|
|
<script src="/js/settings.js"></script>
|
|||
|
|
<script src="/js/status.js"></script>
|
|||
|
|
<script src="/js/app.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|