diff --git a/influence/app/controllers/responses.js b/influence/app/controllers/responses.js
index 696639d..a4a2411 100644
--- a/influence/app/controllers/responses.js
+++ b/influence/app/controllers/responses.js
@@ -398,6 +398,12 @@ async function getResponseStats(req, res) {
res.json({
success: true,
+ campaign: {
+ title: campaign['Campaign Title'] || campaign.title,
+ description: campaign['Description'] || campaign.description,
+ slug: campaign['Campaign Slug'] || campaign.slug,
+ cover_photo: campaign['Cover Photo'] || campaign.cover_photo
+ },
stats: {
totalResponses,
verifiedResponses,
diff --git a/influence/app/public/css/response-wall.css b/influence/app/public/css/response-wall.css
index 0547c79..f51f53d 100644
--- a/influence/app/public/css/response-wall.css
+++ b/influence/app/public/css/response-wall.css
@@ -1,5 +1,100 @@
/* Response Wall Styles */
+/* Campaign Header Styles */
+.response-wall-header {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ padding: 3rem 0;
+ text-align: center;
+ margin-bottom: 2rem;
+ position: relative;
+ overflow: hidden;
+}
+
+.response-wall-header.has-cover {
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ min-height: 350px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.response-wall-header.has-cover::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.5);
+ z-index: 1;
+}
+
+.response-wall-header > * {
+ position: relative;
+ z-index: 2;
+}
+
+.response-wall-header h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+}
+
+.response-wall-header .campaign-subtitle {
+ font-size: 1.6rem;
+ font-weight: 500;
+ margin: 0.5rem 0 1rem 0;
+ color: rgba(255, 255, 255, 0.95);
+ text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
+ font-style: italic;
+}
+
+.response-wall-header p {
+ font-size: 1.2rem;
+ margin-bottom: 1.5rem;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
+}
+
+.response-wall-header-content {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 0 1rem;
+}
+
+.header-nav-buttons {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ margin-top: 1.5rem;
+ flex-wrap: wrap;
+}
+
+.nav-btn {
+ background: rgba(255, 255, 255, 0.2);
+ border: 2px solid rgba(255, 255, 255, 0.3);
+ color: white;
+ padding: 0.75rem 1.5rem;
+ border-radius: 8px;
+ font-size: 1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ backdrop-filter: blur(10px);
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.nav-btn:hover {
+ background: rgba(255, 255, 255, 0.3);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
.stats-banner {
display: flex;
justify-content: space-around;
diff --git a/influence/app/public/js/response-wall.js b/influence/app/public/js/response-wall.js
index 0827004..03cae16 100644
--- a/influence/app/public/js/response-wall.js
+++ b/influence/app/public/js/response-wall.js
@@ -1,6 +1,7 @@
// Response Wall JavaScript
let currentCampaignSlug = null;
+let currentCampaign = null;
let currentOffset = 0;
let currentSort = 'recent';
let currentLevel = '';
@@ -253,23 +254,88 @@ function determineGovernmentLevel(electedOffice) {
return '';
}
-// Load response statistics
+// Load response statistics and campaign details
async function loadResponseStats() {
try {
const response = await fetch(`/api/campaigns/${currentCampaignSlug}/response-stats`);
const data = await response.json();
if (data.success) {
+ // Store campaign data
+ currentCampaign = data.campaign;
+
+ // Update stats
document.getElementById('stat-total-responses').textContent = data.stats.totalResponses;
document.getElementById('stat-verified').textContent = data.stats.verifiedResponses;
document.getElementById('stat-upvotes').textContent = data.stats.totalUpvotes;
document.getElementById('stats-banner').style.display = 'flex';
+
+ // Render campaign header with campaign info
+ renderCampaignHeader();
}
} catch (error) {
console.error('Error loading stats:', error);
}
}
+// Render campaign header with background image and navigation
+function renderCampaignHeader() {
+ console.log('renderCampaignHeader called with campaign:', currentCampaign);
+
+ if (!currentCampaign) {
+ console.warn('No campaign data available');
+ return;
+ }
+
+ const headerElement = document.querySelector('.response-wall-header');
+ if (!headerElement) {
+ console.warn('Header element not found');
+ return;
+ }
+
+ // Update campaign name subtitle
+ const campaignNameElement = document.getElementById('campaign-name');
+ const descriptionElement = document.getElementById('campaign-description');
+
+ console.log('Campaign name element:', campaignNameElement);
+ console.log('Campaign title:', currentCampaign.title);
+
+ if (campaignNameElement && currentCampaign.title) {
+ campaignNameElement.textContent = currentCampaign.title;
+ campaignNameElement.style.display = 'block';
+ console.log('Campaign name set to:', currentCampaign.title);
+ }
+
+ if (descriptionElement) {
+ descriptionElement.textContent = currentCampaign.description || 'See what representatives are saying back to constituents';
+ }
+
+ // Add cover photo if available
+ if (currentCampaign.cover_photo) {
+ headerElement.classList.add('has-cover');
+ headerElement.style.backgroundImage = `url(/uploads/${currentCampaign.cover_photo})`;
+ } else {
+ headerElement.classList.remove('has-cover');
+ headerElement.style.backgroundImage = '';
+ }
+
+ // Set up navigation button listeners
+ const campaignBtn = document.getElementById('nav-to-campaign');
+ const homeBtn = document.getElementById('nav-to-home');
+
+ if (campaignBtn) {
+ campaignBtn.addEventListener('click', () => {
+ window.location.href = `/campaign/${currentCampaign.slug}`;
+ });
+ }
+
+ if (homeBtn) {
+ homeBtn.addEventListener('click', () => {
+ window.location.href = '/';
+ });
+ }
+}
+
// Load responses
async function loadResponses(reset = false) {
if (reset) {
diff --git a/influence/app/public/response-wall.html b/influence/app/public/response-wall.html
index 66007b1..79eecf2 100644
--- a/influence/app/public/response-wall.html
+++ b/influence/app/public/response-wall.html
@@ -8,12 +8,25 @@
-