196 lines
9.7 KiB
HTML
196 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Admin Panel - NocoDB Map Viewer">
|
|
<title>Admin Panel - NocoDB Map Viewer</title>
|
|
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
|
crossorigin="" />
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="css/admin.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<h1>Admin Panel</h1>
|
|
<div class="header-actions">
|
|
<a href="/" class="btn btn-secondary">← Back to Map</a>
|
|
<span id="admin-info" class="admin-info"></span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<div class="admin-container">
|
|
<div class="admin-sidebar">
|
|
<h2>Settings</h2>
|
|
<nav class="admin-nav">
|
|
<a href="#start-location" class="active">Start Location</a>
|
|
<a href="#walk-sheet">Walk Sheet</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="admin-content">
|
|
<!-- Start Location Section -->
|
|
<section id="start-location" class="admin-section">
|
|
<h2>Map Start Location</h2>
|
|
<p>Set the default center point and zoom level for the map when users first load the application.</p>
|
|
|
|
<div class="admin-map-container">
|
|
<div id="admin-map" class="admin-map"></div>
|
|
|
|
<div class="location-controls">
|
|
<div class="form-group">
|
|
<label for="start-lat">Latitude</label>
|
|
<input type="number" id="start-lat" step="0.000001" min="-90" max="90">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="start-lng">Longitude</label>
|
|
<input type="number" id="start-lng" step="0.000001" min="-180" max="180">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="start-zoom">Zoom Level</label>
|
|
<input type="number" id="start-zoom" min="2" max="19" step="1">
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button id="use-current-view" class="btn btn-secondary">
|
|
Use Current Map View
|
|
</button>
|
|
<button id="save-start-location" class="btn btn-primary">
|
|
Save Start Location
|
|
</button>
|
|
</div>
|
|
|
|
<div class="help-text">
|
|
<p>💡 Tip: Navigate the map to your desired location and zoom level, then click "Use Current Map View" to capture the coordinates.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Walk Sheet Section -->
|
|
<section id="walk-sheet" class="admin-section" style="display: none;">
|
|
<h2>Walk Sheet Configuration</h2>
|
|
<p>Design and configure printable walk sheets for door-to-door canvassing.</p>
|
|
|
|
<div class="walk-sheet-container">
|
|
<div class="walk-sheet-config">
|
|
<h3>Sheet Information</h3>
|
|
|
|
<div class="form-group">
|
|
<label for="walk-sheet-title">Sheet Title</label>
|
|
<input type="text" id="walk-sheet-title" placeholder="Campaign Walk Sheet">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="walk-sheet-subtitle">Subtitle</label>
|
|
<input type="text" id="walk-sheet-subtitle" placeholder="Door-to-Door Canvassing Form">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="walk-sheet-footer">Footer Text</label>
|
|
<textarea id="walk-sheet-footer" rows="3" placeholder="Contact info, legal text, etc."></textarea>
|
|
</div>
|
|
|
|
<h3>QR Codes</h3>
|
|
<p class="help-text-inline">Add up to 3 QR codes for quick access to digital resources.</p>
|
|
|
|
<!-- QR Code 1 -->
|
|
<div class="qr-code-group">
|
|
<h4>QR Code 1</h4>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="qr-code-1-url">URL</label>
|
|
<input type="url" id="qr-code-1-url" placeholder="https://example.com/signup">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="qr-code-1-label">Label</label>
|
|
<input type="text" id="qr-code-1-label" placeholder="Sign Up">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Code 2 -->
|
|
<div class="qr-code-group">
|
|
<h4>QR Code 2</h4>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="qr-code-2-url">URL</label>
|
|
<input type="url" id="qr-code-2-url" placeholder="https://example.com/donate">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="qr-code-2-label">Label</label>
|
|
<input type="text" id="qr-code-2-label" placeholder="Donate">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Code 3 -->
|
|
<div class="qr-code-group">
|
|
<h4>QR Code 3</h4>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="qr-code-3-url">URL</label>
|
|
<input type="url" id="qr-code-3-url" placeholder="https://example.com/volunteer">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="qr-code-3-label">Label</label>
|
|
<input type="text" id="qr-code-3-label" placeholder="Volunteer">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button id="save-walk-sheet" class="btn btn-primary">
|
|
Save Configuration
|
|
</button>
|
|
<button id="preview-walk-sheet" class="btn btn-secondary">
|
|
Preview Sheet
|
|
</button>
|
|
<button id="print-walk-sheet" class="btn btn-secondary">
|
|
🖨️ Print Sheet
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="walk-sheet-preview">
|
|
<h3>Preview</h3>
|
|
<div class="preview-controls">
|
|
<button id="refresh-preview" class="btn btn-sm btn-secondary">Refresh</button>
|
|
<span class="preview-info">8.5" x 11" format</span>
|
|
</div>
|
|
<div id="walk-sheet-preview-content" class="walk-sheet-page">
|
|
<!-- Preview content will be generated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Messages -->
|
|
<div id="status-container" class="status-container"></div>
|
|
</div>
|
|
|
|
<!-- Leaflet JS -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
|
crossorigin=""></script>
|
|
|
|
<!-- QR Code Library -->
|
|
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
|
|
|
|
<!-- Admin JavaScript -->
|
|
<script src="js/admin.js"></script>
|
|
</body>
|
|
</html>
|