164 lines
7.1 KiB
HTML
164 lines
7.1 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>
|
|
<div class="container">
|
|
<header>
|
|
<h1>📢 Community Response Wall</h1>
|
|
<p>See what representatives are saying back to constituents</p>
|
|
</header>
|
|
|
|
<!-- 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">
|
|
<div class="form-group">
|
|
<label for="representative-name">Representative Name *</label>
|
|
<input type="text" id="representative-name" name="representative_name" required>
|
|
</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>
|
|
|
|
<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-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>
|
|
|
|
<script src="/js/response-wall.js"></script>
|
|
</body>
|
|
</html>
|