236 lines
9.0 KiB
HTML
236 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Admin - Wesley High School Fundraiser</title>
|
|
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
|
|
<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="admin-header">
|
|
<div class="admin-header-inner">
|
|
<div class="admin-header-left">
|
|
<img src="/images/whs-logo.svg" alt="Wesley High School" class="admin-logo" />
|
|
<span class="admin-badge">Admin</span>
|
|
</div>
|
|
<div class="admin-header-right">
|
|
<a href="/" class="admin-back-link">Back to Site</a>
|
|
<button class="btn btn-sm" id="logoutBtn" style="display:none">Sign Out</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Auth Gate -->
|
|
<div class="admin-auth" id="authSection">
|
|
<div class="admin-auth-card">
|
|
<h1>Admin Login</h1>
|
|
<p>Sign in to manage donors and import data.</p>
|
|
<div class="admin-auth-buttons">
|
|
<button class="btn btn-google" id="loginGoogle">
|
|
<svg viewBox="0 0 24 24" width="18" height="18"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
|
|
Sign in with Google
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Unauthorized -->
|
|
<div class="admin-auth hidden" id="unauthorizedSection">
|
|
<div class="admin-auth-card">
|
|
<h1>Access Denied</h1>
|
|
<p>Your account is not authorized to access the admin panel.</p>
|
|
<button class="btn btn-primary" id="unauthorizedLogout">Sign Out</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Admin Content -->
|
|
<main class="admin-main hidden" id="adminContent">
|
|
<!-- Stats -->
|
|
<div class="admin-stats">
|
|
<div class="stat-card">
|
|
<span class="stat-value" id="statTotal">$0</span>
|
|
<span class="stat-label">Total Raised</span>
|
|
</div>
|
|
<div class="stat-card">
|
|
<span class="stat-value" id="statCount">0</span>
|
|
<span class="stat-label">Donors</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="admin-tabs">
|
|
<button class="admin-tab active" data-tab="add">Add Donor</button>
|
|
<button class="admin-tab" data-tab="import">CSV Import</button>
|
|
<button class="admin-tab" data-tab="list">Donor List</button>
|
|
</div>
|
|
|
|
<!-- Add Donor Panel -->
|
|
<div class="admin-panel active" id="panel-add">
|
|
<h2>Add a Donor</h2>
|
|
<form class="admin-form" id="addDonorForm">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="donorName">Name</label>
|
|
<input type="text" id="donorName" placeholder="Donor name" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="donorAmount">Amount ($)</label>
|
|
<input type="number" id="donorAmount" placeholder="0.00" min="0" step="0.01" required />
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="donorClassYear">Class Year</label>
|
|
<input type="text" id="donorClassYear" placeholder="e.g. 1985" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="donorDate">Date</label>
|
|
<input type="date" id="donorDate" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="donorMessage">Message</label>
|
|
<textarea id="donorMessage" placeholder="Optional message..." rows="2"></textarea>
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="checkbox" id="donorAnonymous" />
|
|
<label for="donorAnonymous">Anonymous donation</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" id="addDonorBtn">Add Donor</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- CSV Import Panel -->
|
|
<div class="admin-panel" id="panel-import">
|
|
<h2>Import Donors from CSV</h2>
|
|
<p class="panel-desc">Upload a CSV file with donor data. Map the columns to the correct fields, preview, then import.</p>
|
|
|
|
<div class="csv-upload">
|
|
<label class="csv-upload-label" for="csvFile">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="32" height="32"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
|
<span>Choose CSV file or drag & drop</span>
|
|
<input type="file" id="csvFile" accept=".csv" />
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Column Mapping (hidden until file loaded) -->
|
|
<div class="csv-mapping hidden" id="csvMapping">
|
|
<h3>Map Columns</h3>
|
|
<div class="mapping-grid">
|
|
<div class="mapping-row">
|
|
<label>Name</label>
|
|
<select id="mapName"></select>
|
|
</div>
|
|
<div class="mapping-row">
|
|
<label>Amount</label>
|
|
<select id="mapAmount"></select>
|
|
</div>
|
|
<div class="mapping-row">
|
|
<label>Class Year</label>
|
|
<select id="mapClassYear"></select>
|
|
</div>
|
|
<div class="mapping-row">
|
|
<label>Message</label>
|
|
<select id="mapMessage"></select>
|
|
</div>
|
|
<div class="mapping-row">
|
|
<label>Date</label>
|
|
<select id="mapDate"></select>
|
|
</div>
|
|
<div class="mapping-row">
|
|
<label>Anonymous</label>
|
|
<select id="mapAnonymous"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preview -->
|
|
<h3>Preview <span class="preview-count" id="previewCount"></span></h3>
|
|
<div class="csv-preview-wrap">
|
|
<table class="csv-preview" id="csvPreview">
|
|
<thead id="csvPreviewHead"></thead>
|
|
<tbody id="csvPreviewBody"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="csv-actions">
|
|
<button class="btn btn-primary" id="importBtn">Import All</button>
|
|
<button class="btn btn-outline" id="csvCancelBtn">Cancel</button>
|
|
</div>
|
|
<div class="import-progress hidden" id="importProgress">
|
|
<div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
|
|
<span id="progressText">Importing...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Donor List Panel -->
|
|
<div class="admin-panel" id="panel-list">
|
|
<h2>All Donors</h2>
|
|
<div class="admin-search">
|
|
<input type="text" id="donorSearch" placeholder="Search donors..." />
|
|
</div>
|
|
<div class="admin-table-wrap">
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Amount</th>
|
|
<th>Class Year</th>
|
|
<th>Date</th>
|
|
<th>Message</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="donorTableBody"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="empty-state hidden" id="donorListEmpty">
|
|
<p>No donors found.</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Edit Modal -->
|
|
<div class="modal-overlay hidden" id="editModal">
|
|
<div class="modal">
|
|
<button class="modal-close" id="editModalClose">×</button>
|
|
<h2>Edit Donor</h2>
|
|
<form class="admin-form" id="editDonorForm">
|
|
<input type="hidden" id="editDonorId" />
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="editName">Name</label>
|
|
<input type="text" id="editName" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="editAmount">Amount ($)</label>
|
|
<input type="number" id="editAmount" min="0" step="0.01" required />
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="editClassYear">Class Year</label>
|
|
<input type="text" id="editClassYear" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="editMessage">Message</label>
|
|
<textarea id="editMessage" rows="2"></textarea>
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="checkbox" id="editAnonymous" />
|
|
<label for="editAnonymous">Anonymous donation</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Save Changes</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/admin.js"></script>
|
|
</body>
|
|
</html>
|