262 lines
14 KiB
HTML
262 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Response Wall | BNKops Influence</title>
|
|
<link rel="stylesheet" href="/css/styles.css">
|
|
<link rel="stylesheet" href="/css/response-wall.css">
|
|
</head>
|
|
<body>
|
|
<!-- Campaign Header -->
|
|
<div class="response-wall-header">
|
|
<div class="response-wall-header-content">
|
|
<h1>📢 Community Response Wall</h1>
|
|
<h2 id="campaign-name" class="campaign-subtitle" style="display: none;"></h2>
|
|
<p id="campaign-description">See what representatives are saying back to constituents</p>
|
|
|
|
<div class="header-nav-buttons">
|
|
<button class="nav-btn" id="nav-to-campaign">
|
|
← Back to Campaign
|
|
</button>
|
|
<button class="nav-btn" id="nav-to-home">
|
|
🏠 Home
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Social Share Buttons in Header -->
|
|
<div class="share-buttons-header">
|
|
<button class="share-btn-small" id="share-facebook" title="Share on Facebook">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="share-btn-small" id="share-twitter" title="Share on Twitter/X">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="share-btn-small" id="share-linkedin" title="Share on LinkedIn">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="share-btn-small" id="share-whatsapp" title="Share on WhatsApp">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="share-btn-small" id="share-email" title="Share via Email">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="share-btn-small" id="share-copy" title="Copy Link">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="share-btn-small" id="share-qrcode" title="Show QR Code">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zM13 3v8h8V3h-8zm6 6h-4V5h4v4zM13 13h2v2h-2zM15 15h2v2h-2zM13 17h2v2h-2zM17 13h2v2h-2zM19 15h2v2h-2zM17 17h2v2h-2zM19 19h2v2h-2z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Stats Banner -->
|
|
<div class="stats-banner" id="stats-banner" style="display: none;">
|
|
<div class="stat-item">
|
|
<span class="stat-number" id="stat-total-responses">0</span>
|
|
<span class="stat-label">Total Responses</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number" id="stat-verified">0</span>
|
|
<span class="stat-label">Verified</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number" id="stat-upvotes">0</span>
|
|
<span class="stat-label">Total Upvotes</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Controls -->
|
|
<div class="response-controls">
|
|
<div class="filter-group">
|
|
<label for="sort-select">Sort by:</label>
|
|
<select id="sort-select">
|
|
<option value="recent">Most Recent</option>
|
|
<option value="upvotes">Most Upvoted</option>
|
|
<option value="verified">Verified First</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label for="level-filter">Filter by Level:</label>
|
|
<select id="level-filter">
|
|
<option value="">All Levels</option>
|
|
<option value="Federal">Federal</option>
|
|
<option value="Provincial">Provincial</option>
|
|
<option value="Municipal">Municipal</option>
|
|
<option value="School Board">School Board</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button class="btn btn-primary" id="submit-response-btn">
|
|
✍️ Share a Response
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Loading Indicator -->
|
|
<div id="loading" class="loading" style="display: none;">
|
|
<p>Loading responses...</p>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div id="empty-state" class="empty-state" style="display: none;">
|
|
<p>No responses yet. Be the first to share!</p>
|
|
<button class="btn btn-primary" id="empty-state-submit-btn">Share a Response</button>
|
|
</div>
|
|
|
|
<!-- Responses Container -->
|
|
<div id="responses-container"></div>
|
|
|
|
<!-- Load More Button -->
|
|
<div class="load-more-container" id="load-more-container" style="display: none;">
|
|
<button class="btn btn-secondary" id="load-more-btn">Load More</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Response Modal -->
|
|
<div id="submit-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" id="modal-close-btn">×</span>
|
|
<h2>Share a Representative Response</h2>
|
|
<form id="submit-response-form" enctype="multipart/form-data">
|
|
<!-- Postal Code Lookup -->
|
|
<div class="form-group">
|
|
<label for="modal-postal-code">Find Your Representative by Postal Code</label>
|
|
<div class="postal-lookup-container">
|
|
<input type="text" id="modal-postal-code" placeholder="Enter postal code (e.g., T5K 2J1)" maxlength="7">
|
|
<button type="button" class="btn btn-secondary" id="lookup-rep-btn">🔍 Search</button>
|
|
</div>
|
|
<small>Search for representatives by postal code to auto-fill details</small>
|
|
</div>
|
|
|
|
<!-- Representatives Selection (Hidden by default) -->
|
|
<div class="form-group" id="rep-select-group" style="display: none;">
|
|
<label for="rep-select">Select Representative *</label>
|
|
<select id="rep-select" size="5">
|
|
<!-- Options will be populated by JavaScript -->
|
|
</select>
|
|
<small>Click on a representative to auto-fill the form</small>
|
|
</div>
|
|
|
|
<!-- Manual Entry Fields -->
|
|
<div class="form-group">
|
|
<label for="representative-name">Representative Name *</label>
|
|
<input type="text" id="representative-name" name="representative_name" required>
|
|
<small>Or enter manually if not found above</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="representative-title">Representative Title</label>
|
|
<input type="text" id="representative-title" name="representative_title" placeholder="e.g., MLA, MP, Councillor">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="representative-level">Government Level *</label>
|
|
<select id="representative-level" name="representative_level" required>
|
|
<option value="">Select level...</option>
|
|
<option value="Federal">Federal</option>
|
|
<option value="Provincial">Provincial</option>
|
|
<option value="Municipal">Municipal</option>
|
|
<option value="School Board">School Board</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Hidden field to store representative email for verification -->
|
|
<input type="hidden" id="representative-email" name="representative_email">
|
|
|
|
<div class="form-group">
|
|
<label for="response-type">Response Type *</label>
|
|
<select id="response-type" name="response_type" required>
|
|
<option value="">Select type...</option>
|
|
<option value="Email">Email</option>
|
|
<option value="Letter">Letter</option>
|
|
<option value="Phone Call">Phone Call</option>
|
|
<option value="Meeting">Meeting</option>
|
|
<option value="Social Media">Social Media</option>
|
|
<option value="Other">Other</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="response-text">Response Text *</label>
|
|
<textarea id="response-text" name="response_text" rows="6" required placeholder="Paste or type the response you received..."></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="user-comment">Your Comment (Optional)</label>
|
|
<textarea id="user-comment" name="user_comment" rows="3" placeholder="Add your thoughts about this response..."></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="screenshot">Screenshot (Optional)</label>
|
|
<input type="file" id="screenshot" name="screenshot" accept="image/*">
|
|
<small>Upload a screenshot of the response (max 5MB)</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="submitted-by-name">Your Name (Optional)</label>
|
|
<input type="text" id="submitted-by-name" name="submitted_by_name">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="submitted-by-email">Your Email (Optional)</label>
|
|
<input type="email" id="submitted-by-email" name="submitted_by_email">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="is-anonymous" name="is_anonymous">
|
|
Post anonymously (don't show my name)
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="send-verification" name="send_verification">
|
|
Send verification request to representative
|
|
</label>
|
|
<small>This will email the representative to verify this response is authentic</small>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" id="cancel-submit-btn">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Submit Response</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Code Modal -->
|
|
<div id="qrcode-modal" class="qrcode-modal">
|
|
<div class="qrcode-modal-content">
|
|
<span class="qrcode-close">×</span>
|
|
<h2>Scan QR Code to Visit Response Wall</h2>
|
|
<div class="qrcode-container">
|
|
<img id="qrcode-image" src="" alt="Response Wall QR Code">
|
|
</div>
|
|
<p class="qrcode-instructions">Scan this code with your phone to visit this response wall</p>
|
|
<button class="btn btn-secondary" id="download-qrcode-btn">Download QR Code</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/api-client.js"></script>
|
|
<script src="/js/response-wall.js"></script>
|
|
</body>
|
|
</html>
|