326 lines
9.5 KiB
HTML
326 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title id="page-title">Campaign - BNKops Influence Tool</title>
|
|
<link rel="stylesheet" href="/css/styles.css">
|
|
<style>
|
|
.campaign-header {
|
|
background: linear-gradient(135deg, #3498db, #2c3e50);
|
|
color: white;
|
|
padding: 3rem 0;
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.campaign-header h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.campaign-stats {
|
|
background: #f8f9fa;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
border: 2px solid #e9ecef;
|
|
}
|
|
|
|
.email-count {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: #3498db;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.campaign-content {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.call-to-action {
|
|
background: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.user-info-form {
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.email-preview {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.email-preview h3 {
|
|
color: #495057;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.email-subject {
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.email-body {
|
|
line-height: 1.6;
|
|
color: #495057;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.representatives-grid {
|
|
display: grid;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.rep-card {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
background: white;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.rep-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.rep-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.rep-photo {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
background: #e9ecef;
|
|
}
|
|
|
|
.rep-details h4 {
|
|
margin: 0 0 0.25rem 0;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.rep-details p {
|
|
margin: 0;
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.rep-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.email-method-toggle {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.method-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.progress-steps {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 2rem;
|
|
padding: 1rem;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.step {
|
|
flex: 1;
|
|
text-align: center;
|
|
position: relative;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.step.active {
|
|
color: #3498db;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.step.completed {
|
|
color: #27ae60;
|
|
}
|
|
|
|
.step:not(:last-child)::after {
|
|
content: '→';
|
|
position: absolute;
|
|
right: -50%;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.loading-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.7);
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.loading-content {
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.campaign-header h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.progress-steps {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.step:not(:last-child)::after {
|
|
content: '↓';
|
|
position: static;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Loading Overlay -->
|
|
<div id="loading-overlay" class="loading-overlay">
|
|
<div class="loading-content">
|
|
<div class="spinner"></div>
|
|
<p id="loading-message">Loading campaign...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Campaign Header -->
|
|
<div class="campaign-header">
|
|
<div class="container">
|
|
<h1 id="campaign-title">Loading Campaign...</h1>
|
|
<p id="campaign-description"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="campaign-content">
|
|
<!-- Email Count Display -->
|
|
<div id="campaign-stats" class="campaign-stats" style="display: none;">
|
|
<div class="email-count" id="email-count">0</div>
|
|
<p>Albertans have sent emails through this campaign</p>
|
|
</div>
|
|
|
|
<!-- Call to Action -->
|
|
<div id="call-to-action" class="call-to-action" style="display: none;">
|
|
<!-- Content will be loaded dynamically -->
|
|
</div>
|
|
|
|
<!-- Progress Steps -->
|
|
<div class="progress-steps">
|
|
<div class="step active" id="step-info">Enter Your Info</div>
|
|
<div class="step" id="step-postal">Find Representatives</div>
|
|
<div class="step" id="step-send">Send Emails</div>
|
|
</div>
|
|
|
|
<!-- User Information Form -->
|
|
<div id="user-info-section" class="user-info-form">
|
|
<h2>Your Information</h2>
|
|
<p>We need some basic information to find your representatives and track campaign engagement.</p>
|
|
|
|
<form id="user-info-form">
|
|
<div class="form-group">
|
|
<label for="user-postal-code">Your Postal Code *</label>
|
|
<input type="text" id="user-postal-code" name="postalCode" required
|
|
placeholder="T5K 2M5" maxlength="7" style="text-transform: uppercase;">
|
|
</div>
|
|
|
|
<div id="optional-fields" style="display: none;">
|
|
<div class="form-group">
|
|
<label for="user-name">Your Name</label>
|
|
<input type="text" id="user-name" name="userName" placeholder="Your full name">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="user-email">Your Email (Optional - If you would like a reply)</label>
|
|
<input type="email" id="user-email" name="userEmail" placeholder="your@email.com">
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">Find My Representatives</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Email Preview -->
|
|
<div id="email-preview" class="email-preview" style="display: none;">
|
|
<h3>📧 Email Preview</h3>
|
|
<p>This is the message that will be sent to your representatives:</p>
|
|
<div class="email-subject" id="preview-subject"></div>
|
|
<div class="email-body" id="preview-body"></div>
|
|
</div>
|
|
|
|
<!-- Representatives Section -->
|
|
<div id="representatives-section" style="display: none;">
|
|
<h2>Your Representatives</h2>
|
|
<p>Select how you'd like to contact each representative:</p>
|
|
|
|
<!-- Email Method Selection -->
|
|
<div id="email-method-selection" class="email-method-toggle">
|
|
<div class="method-option">
|
|
<input type="radio" id="method-smtp" name="emailMethod" value="smtp" checked>
|
|
<label for="method-smtp">📧 Send via our system</label>
|
|
</div>
|
|
<div class="method-option">
|
|
<input type="radio" id="method-mailto" name="emailMethod" value="mailto">
|
|
<label for="method-mailto">📬 Open in your email app</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="representatives-list" class="representatives-grid">
|
|
<!-- Representatives will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success Message -->
|
|
<div id="success-section" style="display: none; text-align: center; padding: 2rem;">
|
|
<h2 style="color: #27ae60;">🎉 Thank you for taking action!</h2>
|
|
<p>Your emails have been processed. Democracy works when people like you get involved.</p>
|
|
<button class="btn btn-secondary" data-action="reload-page">Send More Emails</button>
|
|
</div>
|
|
|
|
<!-- Error Messages -->
|
|
<div id="error-message" class="error-message" style="display: none;"></div>
|
|
</div>
|
|
|
|
<script src="/js/campaign.js"></script>
|
|
</body>
|
|
</html> |