253 lines
12 KiB
HTML
253 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BNKops Influence Campaign Tool</title>
|
|
<link rel="icon" href="data:,">
|
|
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
|
crossorigin="" />
|
|
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1><a href="https://bnkops.com/" target="_blank" style="color: inherit; text-decoration: underline;">BNKops</a> Influence Tool</h1>
|
|
<p>Connect with your elected representatives across all levels of government</p>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Postal Code Input Section -->
|
|
<section id="postal-input-section">
|
|
<div class="map-header">
|
|
<h2>Find Your Representatives</h2>
|
|
</div>
|
|
|
|
<!-- Postal Code Input -->
|
|
<div class="postal-input-section">
|
|
<form id="postal-form">
|
|
<div class="form-group">
|
|
<label for="postal-code">Enter your postal code:</label>
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
id="postal-code"
|
|
name="postal-code"
|
|
placeholder="T5K 2M5"
|
|
maxlength="7"
|
|
required
|
|
pattern="^[Tt]\d[A-Za-z]\s?\d[A-Za-z]\d$"
|
|
title="Please enter a valid Alberta postal code (starting with T)"
|
|
>
|
|
<button type="submit" class="btn btn-primary">Search</button>
|
|
<button type="button" id="refresh-btn" class="btn btn-secondary" style="display: none;">Refresh</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div id="error-message" class="error-message" style="display: none;"></div>
|
|
<div id="loading" class="loading" style="display: none;">
|
|
<div class="spinner"></div>
|
|
<p>Looking up your representatives...</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Representatives Display Section -->
|
|
<section id="representatives-section" style="display: none;">
|
|
<div id="location-info" class="location-info">
|
|
<h3>Your Location</h3>
|
|
<p id="location-details"></p>
|
|
</div>
|
|
|
|
<div id="representatives-container">
|
|
<!-- Representatives will be dynamically inserted here -->
|
|
</div>
|
|
|
|
<!-- Map showing office locations -->
|
|
<div class="map-header">
|
|
<h3>Representative Office Locations</h3>
|
|
</div>
|
|
|
|
<div id="map-container" class="map-container">
|
|
<div id="main-map" style="height: 400px; width: 100%;"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Email Compose Modal -->
|
|
<div id="email-modal" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Compose Email</h3>
|
|
<span class="close-btn" id="close-modal">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="email-form">
|
|
<input type="hidden" id="recipient-email" name="recipient-email">
|
|
<input type="hidden" id="sender-postal-code" name="sender-postal-code">
|
|
|
|
<div class="form-group">
|
|
<label for="recipient-info">To:</label>
|
|
<div id="recipient-info" class="recipient-info"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="sender-name">Your Name:</label>
|
|
<input type="text" id="sender-name" name="sender-name" required maxlength="100">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="sender-email">Your Email:</label>
|
|
<input type="email" id="sender-email" name="sender-email" required maxlength="200">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email-subject">Subject:</label>
|
|
<input type="text" id="email-subject" name="email-subject" required maxlength="200">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email-message">Message:</label>
|
|
<textarea
|
|
id="email-message"
|
|
name="email-message"
|
|
rows="10"
|
|
required
|
|
maxlength="5000"
|
|
placeholder="Write your message to your representative here..."
|
|
></textarea>
|
|
<small class="char-counter">5000 characters remaining</small>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" id="cancel-email" class="btn btn-secondary">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Preview Email</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Preview Modal -->
|
|
<div id="email-preview-modal" class="modal" style="display: none;">
|
|
<div class="modal-content preview-modal">
|
|
<div class="modal-header">
|
|
<h3>Email Preview</h3>
|
|
<span class="close-btn" id="close-preview-modal">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="preview-section">
|
|
<h4>Email Details</h4>
|
|
<div class="email-details">
|
|
<div class="detail-row">
|
|
<strong>To:</strong> <span id="preview-recipient"></span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<strong>From:</strong> <span id="preview-sender"></span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<strong>Subject:</strong> <span id="preview-subject"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-section">
|
|
<h4>Email Content Preview</h4>
|
|
<div id="preview-content" class="email-preview-content">
|
|
<!-- Email HTML preview will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="button" id="edit-email" class="btn btn-secondary">
|
|
✏️ Edit Email
|
|
</button>
|
|
<button type="button" id="confirm-send" class="btn btn-primary">
|
|
📧 Send Email
|
|
</button>
|
|
<button type="button" id="cancel-preview" class="btn btn-outline">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success/Error Messages -->
|
|
<div id="message-display" class="message-display" style="display: none;"></div>
|
|
|
|
<!-- Campaigns Section -->
|
|
<section id="campaigns-section" style="display: none;">
|
|
<div class="campaigns-section-header">
|
|
<h2>Active Campaigns</h2>
|
|
<p>Join ongoing campaigns to make your voice heard on important issues</p>
|
|
</div>
|
|
<div id="campaigns-grid">
|
|
<!-- Campaign cards will be dynamically inserted here -->
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>© 2025 <a href="https://bnkops.com/" target="_blank">BNKops</a> Influence Tool. Connect with democracy.</p>
|
|
<p><small>This tool uses the <a href="https://represent.opennorth.ca" target="_blank">Represent API</a> by Open North to find your representatives.</small></p>
|
|
<p><small><a href="/terms.html" id="terms-link" target="_blank">Terms of Use & Privacy Notice</a></small></p>
|
|
|
|
<div class="preamble" style="text-align: center; padding: 1rem; margin: 1rem 0; background-color: #f5f5f5; border-radius: 8px;">
|
|
<p>Influence is an open-source platform and the code is available to all at <a href="https://gitea.bnkops.com/admin/changemaker.lite" target="_blank" rel="noopener noreferrer">gitea.bnkops.com/admin/changemaker.lite</a></p>
|
|
</div>
|
|
|
|
<div class="footer-actions">
|
|
<a href="/login.html" id="login-link" class="btn btn-secondary">Admin Login</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Leaflet JavaScript -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
|
crossorigin=""></script>
|
|
|
|
<script src="js/api-client.js"></script>
|
|
<script src="js/auth.js"></script>
|
|
<script src="js/campaigns-grid.js"></script>
|
|
<script src="js/postal-lookup.js"></script>
|
|
<script src="js/representatives-display.js"></script>
|
|
<script src="js/email-composer.js"></script>
|
|
<script src="js/representatives-map.js"></script>
|
|
<script src="js/main.js"></script>
|
|
|
|
<!-- Check authentication and redirect if logged in -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
// Check if user is already authenticated
|
|
if (typeof authManager !== 'undefined') {
|
|
const isAuth = await authManager.checkSession();
|
|
if (isAuth && authManager.user) {
|
|
// Redirect to appropriate dashboard
|
|
if (authManager.user.isAdmin) {
|
|
window.location.href = '/admin.html';
|
|
} else {
|
|
window.location.href = '/dashboard.html';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Update navigation links with APP_URL if needed
|
|
fetch('/api/config')
|
|
.then(res => res.json())
|
|
.then(config => {
|
|
if (config.appUrl && !window.location.href.startsWith(config.appUrl)) {
|
|
document.getElementById('terms-link').href = config.appUrl + '/terms.html';
|
|
document.getElementById('login-link').href = config.appUrl + '/login.html';
|
|
}
|
|
})
|
|
.catch(err => console.log('Config not loaded, using relative paths'));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |