Updates to the html for url construction throughout and a bunch of upgrades to how the response wall works
This commit is contained in:
@@ -48,20 +48,86 @@
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.campaign-stats {
|
||||
background: #f8f9fa;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
border: 2px solid #e9ecef;
|
||||
.campaign-header-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.email-count {
|
||||
font-size: 2rem;
|
||||
.campaign-stats-header {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
justify-content: center;
|
||||
margin-top: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-circle {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #3498db;
|
||||
margin-bottom: 0.5rem;
|
||||
color: white;
|
||||
line-height: 1;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.7rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 0.25rem;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.share-buttons-header {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
margin-top: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.share-btn-small {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.share-btn-small:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.share-btn-small svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.share-btn-small.copied {
|
||||
background: rgba(40, 167, 69, 0.8);
|
||||
border-color: rgba(40, 167, 69, 1);
|
||||
}
|
||||
|
||||
.campaign-content {
|
||||
@@ -144,8 +210,13 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.preview-mode .email-preview-actions {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.edit-mode .email-subject,
|
||||
.edit-mode .email-body {
|
||||
.edit-mode .email-body,
|
||||
.edit-mode .email-preview-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -265,6 +336,86 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Response Wall Button Styles */
|
||||
.response-wall-button {
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 50px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.response-wall-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.response-wall-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.1),
|
||||
transparent
|
||||
);
|
||||
transform: rotate(45deg);
|
||||
animation: shine 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 4px 25px rgba(102, 126, 234, 0.8), 0 0 30px rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
left: -50%;
|
||||
}
|
||||
100% {
|
||||
left: 150%;
|
||||
}
|
||||
}
|
||||
|
||||
.response-wall-container {
|
||||
text-align: center;
|
||||
margin: 2rem 0;
|
||||
padding: 2rem;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.response-wall-container h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
color: #2c3e50;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.response-wall-container p {
|
||||
margin: 0 0 1.5rem 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.campaign-header h1 {
|
||||
font-size: 2rem;
|
||||
@@ -294,26 +445,60 @@
|
||||
<!-- Campaign Header -->
|
||||
<div class="campaign-header">
|
||||
<div class="container">
|
||||
<h1 id="campaign-title">Loading Campaign...</h1>
|
||||
<p id="campaign-description"></p>
|
||||
<div class="campaign-header-content">
|
||||
<h1 id="campaign-title">Loading Campaign...</h1>
|
||||
<p id="campaign-description"></p>
|
||||
|
||||
<!-- Campaign Stats in Header -->
|
||||
<div id="campaign-stats-header" class="campaign-stats-header" style="display: none;">
|
||||
<div id="email-stat-circle" class="stat-circle" style="display: none;">
|
||||
<div class="stat-number" id="email-count-header">0</div>
|
||||
<div class="stat-label">Emails</div>
|
||||
</div>
|
||||
<div id="call-stat-circle" class="stat-circle" style="display: none;">
|
||||
<div class="stat-number" id="call-count-header">0</div>
|
||||
<div class="stat-label">Calls</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="campaign-content">
|
||||
<!-- Campaign Stats Display -->
|
||||
<div id="campaign-stats" class="campaign-stats" style="display: none;">
|
||||
<div style="display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap;">
|
||||
<div id="email-count-container" style="display: none;">
|
||||
<div class="email-count" id="email-count">0</div>
|
||||
<p>Emails sent</p>
|
||||
</div>
|
||||
<div id="call-count-container" style="display: none;">
|
||||
<div class="email-count" id="call-count">0</div>
|
||||
<p>Calls made</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<div id="call-to-action" class="call-to-action" style="display: none;">
|
||||
<!-- Content will be loaded dynamically -->
|
||||
@@ -354,6 +539,15 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Response Wall Button -->
|
||||
<div id="response-wall-section" class="response-wall-container" style="display: none;">
|
||||
<h3>💬 See What People Are Saying</h3>
|
||||
<p>Check out responses to people who have taken action on this campaign</p>
|
||||
<a href="#" id="response-wall-link" class="response-wall-button">
|
||||
View Response Wall
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Email Preview -->
|
||||
<div id="email-preview" class="email-preview preview-mode" style="display: none;">
|
||||
<h3>📧 Email Preview</h3>
|
||||
@@ -371,6 +565,11 @@
|
||||
<button type="button" class="btn btn-secondary" id="preview-email-btn">👁️ Preview</button>
|
||||
<button type="button" class="btn btn-primary" id="save-email-btn">💾 Save Changes</button>
|
||||
</div>
|
||||
|
||||
<!-- Preview mode actions -->
|
||||
<div class="email-preview-actions" style="display: none; margin-top: 1rem; text-align: center;">
|
||||
<button type="button" class="btn btn-secondary" id="edit-email-btn">✏️ Edit Email</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Representatives Section -->
|
||||
@@ -408,9 +607,22 @@
|
||||
|
||||
<footer style="text-align: center; margin-top: 2rem; padding: 1rem; border-top: 1px solid #e9ecef;">
|
||||
<p>© 2025 <a href="https://bnkops.com/" target="_blank">BNKops</a> Influence Tool. Connect with democracy.</p>
|
||||
<p><small><a href="terms.html" target="_blank">Terms of Use & Privacy Notice</a> | <a href="index.html">Return to Main Page</a></small></p>
|
||||
<p><small><a href="/terms.html" id="terms-link" target="_blank">Terms of Use & Privacy Notice</a> | <a href="/index.html" id="home-link">Return to Main Page</a></small></p>
|
||||
</footer>
|
||||
|
||||
<script src="/js/campaign.js"></script>
|
||||
<script>
|
||||
// Update footer links with APP_URL if needed for cross-origin scenarios
|
||||
fetch('/api/config')
|
||||
.then(res => res.json())
|
||||
.then(config => {
|
||||
if (config.appUrl && !window.location.href.startsWith(config.appUrl)) {
|
||||
// Only update if we're on a different domain (e.g., CDN)
|
||||
document.getElementById('terms-link').href = config.appUrl + '/terms.html';
|
||||
document.getElementById('home-link').href = config.appUrl + '/index.html';
|
||||
}
|
||||
})
|
||||
.catch(err => console.log('Config not loaded, using relative paths'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user