Initial build: SimpleScan Solo v0.1.0 - Freelancer receipt capture Chrome extension
This commit is contained in:
Bun Bun
+153
@@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>SimpleScan Solo - Settings & Export</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #1a1a2e;
|
||||
background: #f8f9fa;
|
||||
padding: 24px;
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h1 { font-size: 24px; margin-bottom: 4px; }
|
||||
.subtitle { color: #6c757d; margin-bottom: 20px; }
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
}
|
||||
.card h2 { font-size: 16px; margin-bottom: 14px; color: #16213e; }
|
||||
.form-group { margin-bottom: 14px; }
|
||||
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: #343a40; }
|
||||
input, select {
|
||||
width: 100%; max-width: 300px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
input:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: #0f3460;
|
||||
}
|
||||
.btn-primary {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: #0f3460;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-primary:hover { background: #16213e; }
|
||||
.btn-secondary {
|
||||
padding: 10px 20px;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #343a40;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-secondary:hover { background: #f8f9fa; }
|
||||
.btn-danger {
|
||||
padding: 10px 20px;
|
||||
border: 1px solid #dc3545;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #dc3545;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-danger:hover { background: #fff5f5; }
|
||||
.export-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
|
||||
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #e9ecef; }
|
||||
.summary-row:last-child { border-bottom: none; }
|
||||
.summary-label { color: #6c757d; }
|
||||
.summary-value { font-weight: 600; }
|
||||
.receipts-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
|
||||
.receipts-table th { text-align: left; padding: 8px; border-bottom: 2px solid #e9ecef; color: #6c757d; font-weight: 600; }
|
||||
.receipts-table td { padding: 8px; border-bottom: 1px solid #e9ecef; }
|
||||
.toast {
|
||||
position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
|
||||
background: #16213e; color: #fff; padding: 10px 20px; border-radius: 8px;
|
||||
font-weight: 500; opacity: 1; transition: opacity 0.3s;
|
||||
}
|
||||
.toast.hidden { opacity: 0; pointer-events: none; }
|
||||
.danger-zone { border: 1px solid #f5c6cb; background: #fff5f5; }
|
||||
.danger-zone h2 { color: #721c24; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>📸 SimpleScan Solo</h1>
|
||||
<p class="subtitle">Settings & Export Center</p>
|
||||
|
||||
<div class="card">
|
||||
<h2>⚙️ Your Settings</h2>
|
||||
<div class="form-group">
|
||||
<label for="s-name">Your Name (for exports)</label>
|
||||
<input type="text" id="s-name" placeholder="Jane Doe" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="s-currency">Default Currency</label>
|
||||
<select id="s-currency">
|
||||
<option value="USD">USD ($)</option>
|
||||
<option value="EUR">EUR (€)</option>
|
||||
<option value="GBP">GBP (£)</option>
|
||||
<option value="CAD">CAD (C$)</option>
|
||||
<option value="AUD">AUD (A$)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="s-year">Tax Year</label>
|
||||
<input type="text" id="s-year" placeholder="2026" maxlength="4" />
|
||||
</div>
|
||||
<button id="save-settings" class="btn-primary">Save Settings</button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>📊 Receipt Summary</h2>
|
||||
<div id="summary-content">
|
||||
<div class="summary-row"><span class="summary-label">Total Receipts</span><span class="summary-value" id="sum-count">0</span></div>
|
||||
<div class="summary-row"><span class="summary-label">Total Amount</span><span class="summary-value" id="sum-total">$0.00</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>📄 Export Receipts</h2>
|
||||
<div class="export-grid">
|
||||
<button id="export-csv" class="btn-secondary">Download CSV</button>
|
||||
<button id="export-pdf" class="btn-secondary">Download PDF Report</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>📋 All Receipts</h2>
|
||||
<div id="receipts-table-wrap">
|
||||
<p style="color:#6c757d; padding: 16px 0;">No receipts yet. Add some from the extension popup.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card danger-zone">
|
||||
<h2>⚠️ Danger Zone</h2>
|
||||
<p style="color:#721c24; font-size:13px; margin-bottom:12px;">This will permanently delete all your saved receipts. This cannot be undone.</p>
|
||||
<button id="clear-all" class="btn-danger">Delete All Receipts</button>
|
||||
</div>
|
||||
|
||||
<div id="toast" class="toast hidden"></div>
|
||||
|
||||
<script type="module" src="./src/options.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user