Pin & Penny expense tracker (web + expo-app)
This commit is contained in:
169
index.html
Normal file
169
index.html
Normal file
@@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pin & Penny — Daily, Weekly, Monthly</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Petit+Formal+Script&family=Shadows+Into+Light+Two&family=Style+Script&family=Waterfall&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar-mini">
|
||||
<button type="button" id="btnMenu" class="menu-btn" aria-label="Open menu" aria-expanded="false">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-dasharray="0.1 5" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
|
||||
</button>
|
||||
<span class="topbar-brand">Pin & Penny</span>
|
||||
<span class="topbar-month" id="topMonth">$0.00</span>
|
||||
</header>
|
||||
<div class="backdrop" id="backdrop" hidden></div>
|
||||
<div class="wrap layout">
|
||||
<aside class="side" id="drawer" aria-label="Menu">
|
||||
<button type="button" class="nav-item nav-add" id="navAdd">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
|
||||
<span>Add expense</span>
|
||||
</button>
|
||||
|
||||
<div class="side-search">
|
||||
<input type="search" id="q" placeholder="Search expenses…" aria-label="Search expenses">
|
||||
</div>
|
||||
|
||||
<nav class="views" aria-label="Views">
|
||||
<button type="button" class="nav-item active" data-tab="daily" aria-selected="true">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>
|
||||
<span>Daily</span>
|
||||
<span class="count" id="countDaily">0</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item" data-tab="weekly" aria-selected="false">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M9.5 4v13M15 4v13"/></svg>
|
||||
<span>Weekly</span>
|
||||
<span class="count" id="countWeekly">0</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item" data-tab="monthly" aria-selected="false">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M10 10v11M17 10v11"/></svg>
|
||||
<span>Monthly</span>
|
||||
<span class="count" id="countMonthly">0</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item" data-tab="all" aria-selected="false">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
|
||||
<span>All expenses</span>
|
||||
<span class="count" id="countAll">0</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<h2 class="side-h">Categories</h2>
|
||||
<ul class="cats" id="catList"></ul>
|
||||
|
||||
<div class="side-foot">
|
||||
<label class="field compact">
|
||||
<span>Repeats</span>
|
||||
<select id="fFreqFilter" aria-label="Filter by repeat">
|
||||
<option value="all">All repeats</option>
|
||||
<option value="once">One-time</option>
|
||||
<option value="daily">Daily</option>
|
||||
<option value="weekly">Weekly</option>
|
||||
<option value="monthly">Monthly</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="month-total">
|
||||
<span>This month</span>
|
||||
<strong id="sideMonth">$0.00</strong>
|
||||
</div>
|
||||
<div class="side-btns">
|
||||
<button type="button" id="btnSamples" class="btn ghost-light">Samples</button>
|
||||
<button type="button" id="btnClear" class="btn ghost-light">Clear all</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="content">
|
||||
<div class="view-head" id="viewHead">
|
||||
<h2 id="viewTitle">Daily</h2>
|
||||
<p class="muted" id="viewSub"></p>
|
||||
</div>
|
||||
|
||||
<section class="card" id="addCard" aria-labelledby="formTitle">
|
||||
<h2 id="formTitle">Add expense</h2>
|
||||
<form id="expForm" novalidate>
|
||||
<label class="field">
|
||||
<span>Description</span>
|
||||
<input type="text" id="fDesc" placeholder="e.g. Groceries" maxlength="80" required>
|
||||
</label>
|
||||
<div class="row2">
|
||||
<label class="field">
|
||||
<span>Amount (₹)</span>
|
||||
<input type="number" id="fAmount" placeholder="0.00" min="0.01" step="0.01" required>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Date</span>
|
||||
<input type="date" id="fDate" required>
|
||||
</label>
|
||||
</div>
|
||||
<div class="row2">
|
||||
<label class="field">
|
||||
<span>Category</span>
|
||||
<select id="fCat"></select>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Repeats</span>
|
||||
<select id="fFreq">
|
||||
<option value="once">One-time</option>
|
||||
<option value="daily">Daily</option>
|
||||
<option value="weekly">Weekly</option>
|
||||
<option value="monthly">Monthly</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<p class="form-err" id="formErr" role="alert" hidden></p>
|
||||
<div class="form-btns">
|
||||
<button type="submit" class="btn primary" id="btnSave">Add expense</button>
|
||||
<button type="button" class="btn subtle" id="btnCancel" hidden>Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="stats" id="statsSection" aria-label="Current totals">
|
||||
<div class="stat card">
|
||||
<span class="stat-label">Spent today</span>
|
||||
<strong class="stat-val" id="statToday">$0.00</strong>
|
||||
</div>
|
||||
<div class="stat card">
|
||||
<span class="stat-label">Spent this week</span>
|
||||
<strong class="stat-val" id="statWeek">$0.00</strong>
|
||||
</div>
|
||||
<div class="stat card">
|
||||
<span class="stat-label">Spent this month</span>
|
||||
<strong class="stat-val" id="statMonth">$0.00</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="datePicker" hidden></div>
|
||||
<div id="monthPicker" hidden></div>
|
||||
<div id="weekPicker" hidden></div>
|
||||
|
||||
<section class="card" id="sumCard" aria-labelledby="sumTitle">
|
||||
<div class="sum-head">
|
||||
<h2 id="sumTitle">Summary</h2>
|
||||
<p class="muted" id="sumLine"></p>
|
||||
</div>
|
||||
<div class="bars" id="bars"></div>
|
||||
</section>
|
||||
|
||||
<section aria-label="Expense list" id="listSection">
|
||||
<div id="list"></div>
|
||||
</section>
|
||||
|
||||
<section class="card" id="templatesCard" aria-labelledby="recTitle">
|
||||
<h2 id="recTitle">Repeating expenses</h2>
|
||||
<p class="muted small">Templates for bills and habits. Use Log to record each occurrence as it happens.</p>
|
||||
<ul class="templates" id="templates"></ul>
|
||||
</section>
|
||||
|
||||
<p class="muted small foot">Your expenses are saved privately in this browser (local storage). No account, no server upload.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user