Visual updates to the response wall

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,

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;

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) {

influence/app/public/response-wall.html

@@ -8,12 +8,25 @@
     <link rel="stylesheet" href="/css/response-wall.css">
 </head>
 <body>
-    <div class="container">
+    <!-- Campaign Header -->
-        <header>
+    <div class="response-wall-header">
+        <div class="response-wall-header-content">
             <h1>📢 Community Response Wall</h1>
-            <p>See what representatives are saying back to constituents</p>
+            <h2 id="campaign-name" class="campaign-subtitle" style="display: none;"></h2>
-        </header>
+            <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>
+        </div>
+    </div>
 
+    <div class="container">
         <!-- Stats Banner -->
         <div class="stats-banner" id="stats-banner" style="display: none;">
             <div class="stat-item">