A sophisticated political campaign management platform featuring real-time analytics, voter engagement tools, and Progressive Web App capabilities. Built with Firebase for real-time data synchronization and Chart.js for comprehensive analytics visualization.
hb/
├── index.html # Main campaign landing page
├── adminanalyticsdash.html # Administrative analytics dashboard
├── countdown.html # Event countdown timers
├── email.html # Email campaign management
├── fb7x9k2m.js # Firebase configuration (obfuscated)
├── manifesto.json # PWA manifest
├── JB.png # Campaign branding icon
└── images/ # Campaign assets
├── 10000.png # Vote milestone graphics
├── lion-email.png # Email template assets
├── lion.svg # Campaign logo variations
├── portrait.png # Candidate portrait
└── sound.jpeg # Audio/media assets
index.html)// Sophisticated title animation with scroll interaction
let isFlipped = false;
let hasAnimated = false;
function initializeHeroAnimation() {
const heroTitle = document.getElementById('heroTitle');
// Initial fade-in
setTimeout(() => {
heroTitle.classList.add('initial');
}, 100);
// Transition to header position
setTimeout(() => {
heroTitle.classList.add('moved');
}, 1500);
}
// Scroll-responsive title scaling
function handleScrollAnimation() {
const scrollPosition = window.scrollY;
const heroTitle = document.getElementById('heroTitle');
if (scrollPosition > 100) {
heroTitle.classList.add('scrolled');
} else {
heroTitle.classList.remove('scrolled');
}
}
/* Hero title sophisticated transitions */
#heroTitle {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Garamond', 'Georgia', serif;
font-size: 96px;
font-weight: normal;
opacity: 0;
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1002;
pointer-events: none;
color: var(--text-color);
white-space: nowrap;
}
#heroTitle.initial {
opacity: 1;
}
#heroTitle.moved {
top: 100px;
font-size: 48px;
transform: translate(-50%, -50%);
opacity: 1;
}
#heroTitle.scrolled {
font-size: 32px;
top: 40px;
}
:root {
--main-bg: #FFFFFD;
--text-color: #383838;
--blue-accent: #285498;
--yellow-accent: #FFBD2E;
--bg-accent: #ECEFF4;
/* Apple system color integration */
--apple-blue: #007AFF;
--apple-red: #FF3B30;
--apple-green: #34C759;
--apple-purple: #AF52DE;
--apple-yellow: #FFCC00;
}
/* Mobile-first responsive approach */
@media (max-width: 768px) {
#heroTitle {
font-size: 48px;
}
#heroTitle.moved {
font-size: 32px;
top: 60px;
}
#heroTitle.scrolled {
font-size: 24px;
top: 30px;
}
}
/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
#heroTitle {
font-size: 72px;
}
}
// Firebase configuration (anonymized structure)
const firebaseConfig = {
apiKey: "campaign-api-key",
authDomain: "campaign-project.firebaseapp.com",
databaseURL: "https://campaign-project.firebaseio.com",
projectId: "campaign-project",
storageBucket: "campaign-bucket.appspot.com",
messagingSenderId: "sender-id",
appId: "app-id",
measurementId: "analytics-id"
};
// Real-time vote tracking
firebase.database().ref('votes').on('value', (snapshot) => {
const voteData = snapshot.val();
updateVoteDisplay(voteData);
updateAnalytics(voteData);
});
// Vote tracking schema
const voteEntry = {
id: generateVoteId(),
timestamp: firebase.database.ServerValue.TIMESTAMP,
userAgent: navigator.userAgent,
ipHash: hashIP(userIP), // Privacy-compliant IP hashing
location: {
city: 'City Name',
state: 'State',
country: 'Country'
},
source: 'website', // website, social, email, etc.
deviceType: detectDeviceType()
};
// Engagement tracking
const engagementEntry = {
id: generateEngagementId(),
sessionId: getSessionId(),
action: 'page_view', // page_view, button_click, form_submit
element: 'vote_button',
timestamp: Date.now(),
duration: getPageDuration()
};
adminanalyticsdash.html)// Real-time vote counting chart
function initializeVoteChart() {
const ctx = document.getElementById('voteChart').getContext('2d');
const voteChart = new Chart(ctx, {
type: 'line',
data: {
labels: [], // Time labels
datasets: [{
label: 'Votes Over Time',
data: [],
borderColor: 'var(--blue-accent)',
backgroundColor: 'rgba(40, 84, 152, 0.1)',
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'Vote Progression'
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'var(--bg-accent)'
}
}
}
}
});
return voteChart;
}
// Geographic vote distribution
function initializeGeoChart() {
const ctx = document.getElementById('geoChart').getContext('2d');
const geoChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['California', 'Texas', 'Florida', 'New York', 'Other'],
datasets: [{
data: [0, 0, 0, 0, 0], // Updated in real-time
backgroundColor: [
'var(--apple-blue)',
'var(--apple-red)',
'var(--apple-green)',
'var(--apple-purple)',
'var(--apple-yellow)'
]
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Votes by State'
},
legend: {
position: 'bottom'
}
}
}
});
return geoChart;
}
// Live dashboard updates
function updateDashboard() {
firebase.database().ref('analytics').on('value', (snapshot) => {
const data = snapshot.val();
// Update vote counters
updateVoteCounters(data.votes);
// Update charts
updateCharts(data);
// Update engagement metrics
updateEngagementMetrics(data.engagement);
// Update demographic data
updateDemographics(data.demographics);
});
}
function updateVoteCounters(voteData) {
document.getElementById('totalVotes').textContent = voteData.total || 0;
document.getElementById('todayVotes').textContent = voteData.today || 0;
document.getElementById('hourlyRate').textContent = voteData.hourlyRate || 0;
}
email.html)// Email template system
const emailTemplates = {
welcome: {
subject: 'Welcome to the Campaign!',
template: 'welcome-template.html',
variables: ['firstName', 'lastName', 'registrationDate']
},
newsletter: {
subject: 'Campaign Newsletter - {date}',
template: 'newsletter-template.html',
variables: ['firstName', 'campaignUpdates', 'events']
},
reminder: {
subject: 'Don\'t Forget to Vote!',
template: 'reminder-template.html',
variables: ['firstName', 'votingLocation', 'electionDate']
}
};
function generateEmail(templateType, recipient, variables) {
const template = emailTemplates[templateType];
let emailContent = loadTemplate(template.template);
// Replace variables in template
template.variables.forEach(variable => {
const value = variables[variable] || '';
emailContent = emailContent.replace(
new RegExp(`{${variable}}`, 'g'),
value
);
});
return {
to: recipient.email,
subject: template.subject.replace(/{(\w+)}/g, (match, key) => variables[key] || match),
html: emailContent
};
}
// Email campaign tracking
function trackEmailCampaign(campaignId, action, recipientId) {
firebase.firestore().collection('emailAnalytics').add({
campaignId: campaignId,
action: action, // sent, opened, clicked, unsubscribed
recipientId: recipientId,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
userAgent: navigator.userAgent
});
}
// Email performance dashboard
function generateEmailReport(campaignId) {
return firebase.firestore()
.collection('emailAnalytics')
.where('campaignId', '==', campaignId)
.get()
.then(snapshot => {
const stats = {
sent: 0,
opened: 0,
clicked: 0,
unsubscribed: 0
};
snapshot.forEach(doc => {
const data = doc.data();
stats[data.action]++;
});
return {
...stats,
openRate: (stats.opened / stats.sent) * 100,
clickRate: (stats.clicked / stats.opened) * 100,
unsubscribeRate: (stats.unsubscribed / stats.sent) * 100
};
});
}
countdown.html)// Campaign event countdown system
class CampaignCountdown {
constructor(events) {
this.events = events;
this.timers = new Map();
this.initialize();
}
initialize() {
this.events.forEach(event => {
this.createTimer(event);
});
this.startUpdateLoop();
}
createTimer(event) {
const timerElement = this.createTimerElement(event);
document.getElementById('timers-container').appendChild(timerElement);
this.timers.set(event.id, {
element: timerElement,
endTime: new Date(event.date).getTime(),
title: event.title
});
}
createTimerElement(event) {
const timerDiv = document.createElement('div');
timerDiv.className = 'countdown-timer';
timerDiv.innerHTML = `
<h3>${event.title}</h3>
<div class="timer-display">
<span class="days">00</span>:
<span class="hours">00</span>:
<span class="minutes">00</span>:
<span class="seconds">00</span>
</div>
<p class="event-description">${event.description}</p>
`;
return timerDiv;
}
updateTimers() {
const now = Date.now();
this.timers.forEach((timer, eventId) => {
const timeLeft = timer.endTime - now;
if (timeLeft <= 0) {
this.handleEventComplete(eventId);
return;
}
const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
this.updateTimerDisplay(timer.element, { days, hours, minutes, seconds });
});
}
updateTimerDisplay(element, time) {
element.querySelector('.days').textContent = String(time.days).padStart(2, '0');
element.querySelector('.hours').textContent = String(time.hours).padStart(2, '0');
element.querySelector('.minutes').textContent = String(time.minutes).padStart(2, '0');
element.querySelector('.seconds').textContent = String(time.seconds).padStart(2, '0');
}
startUpdateLoop() {
setInterval(() => {
this.updateTimers();
}, 1000);
}
}
// Initialize countdown for campaign events
const campaignEvents = [
{
id: 'primary-election',
title: 'Primary Election',
date: '2024-06-04T07:00:00',
description: 'Vote in the primary election'
},
{
id: 'general-election',
title: 'General Election',
date: '2024-11-05T07:00:00',
description: 'General election day'
}
];
const countdown = new CampaignCountdown(campaignEvents);
{
"name": "Vote Josh Campaign",
"short_name": "VoteJosh",
"description": "Political campaign management platform",
"start_url": "/hb/",
"display": "standalone",
"background_color": "#FFFFFD",
"theme_color": "#285498",
"orientation": "portrait-primary",
"icons": [
{
"src": "JB.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}
],
"categories": ["politics", "news", "productivity"],
"lang": "en-US"
}
// Campaign-specific service worker
const CACHE_NAME = 'vote-josh-v1';
const urlsToCache = [
'/hb/',
'/hb/index.html',
'/hb/adminanalyticsdash.html',
'/hb/countdown.html',
'/hb/email.html',
'/hb/JB.png',
'/hb/manifesto.json'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then((response) => {
// Return cached version or fetch from network
return response || fetch(event.request);
})
);
});
// Privacy-compliant analytics
function hashIP(ip) {
// Use a salt for IP hashing to protect privacy
const salt = 'campaign-salt-2024';
return btoa(ip + salt).substring(0, 16);
}
function anonymizeUserData(userData) {
return {
id: userData.id,
timestamp: userData.timestamp,
location: {
state: userData.location.state,
country: userData.location.country
// Exclude city for privacy
},
deviceType: userData.deviceType
// Exclude detailed user agent
};
}
// Campaign form validation
function validateVoterRegistration(formData) {
const errors = [];
// Validate required fields
if (!formData.firstName || formData.firstName.length < 2) {
errors.push('First name is required (minimum 2 characters)');
}
if (!formData.email || !isValidEmail(formData.email)) {
errors.push('Valid email address is required');
}
if (!formData.zipCode || !isValidZipCode(formData.zipCode)) {
errors.push('Valid ZIP code is required');
}
// Sanitize inputs
const sanitized = {
firstName: sanitizeInput(formData.firstName),
lastName: sanitizeInput(formData.lastName),
email: sanitizeEmail(formData.email),
zipCode: sanitizeZipCode(formData.zipCode)
};
return { errors, sanitized };
}
function sanitizeInput(input) {
return input
.replace(/[<>]/g, '')
.trim()
.substring(0, 100);
}
// Critical resource prioritization
function initializeApp() {
// Load critical CSS first
loadCriticalCSS();
// Initialize Firebase
initializeFirebase();
// Load analytics asynchronously
setTimeout(initializeAnalytics, 100);
// Load non-critical features
setTimeout(loadEnhancedFeatures, 500);
}
function loadCriticalCSS() {
const criticalCSS = `
/* Inline critical path CSS */
body { font-family: Helvetica, Arial, sans-serif; }
#heroTitle { position: fixed; top: 50%; left: 50%; }
`;
const style = document.createElement('style');
style.textContent = criticalCSS;
document.head.appendChild(style);
}
// Responsive image loading
function loadOptimizedImages() {
const images = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
imageObserver.unobserve(img);
}
});
});
images.forEach(img => imageObserver.observe(img));
}
<!-- Semantic HTML structure -->
<main role="main" aria-label="Josh Bruce Campaign">
<section aria-label="Hero section">
<h1 id="heroTitle">vote josh.</h1>
</section>
<section aria-label="Campaign information">
<button aria-label="Vote for Josh Bruce"
aria-describedby="vote-description">
Vote Now
</button>
<p id="vote-description">
Cast your vote for Josh Bruce in the upcoming election
</p>
</section>
</main>
// Comprehensive keyboard support
document.addEventListener('keydown', (e) => {
if (e.key === 'Tab') {
// Enhanced focus management
handleTabNavigation(e);
} else if (e.key === 'Enter' || e.key === ' ') {
// Action keys
handleActionKeys(e);
} else if (e.key === 'Escape') {
// Modal dismissal
handleEscapeKey(e);
}
});
The Political Campaign Platform represents a sophisticated web application that successfully combines modern web technologies with political campaign requirements. The real-time analytics, engaging user interface, and comprehensive feature set create a powerful tool for campaign management and voter engagement.
Technical Rating: 8.8/10
The platform demonstrates advanced web development skills while addressing the specific needs of political campaign management in the digital age.