Ctrl+K
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Campaigns Dashboard - Zivvy</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Color Psychology System */ --green-money: #10b981; --green-subtle: #dcfce7; --blue-primary: #3b82f6; --blue-subtle: #dbeafe; --purple-premium: #9333ea; --purple-subtle: #f3e8ff; --orange-urgent: #f97316; --orange-subtle: #fed7aa; --red-live: #ef4444; --yellow-achievement: #facc15; --gray-dark: #1f2937; --gray-medium: #6b7280; --gray-light: #f3f4f6; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; } .dashboard-container { max-width: 1400px; margin: 0 auto; background: white; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.1); overflow: hidden; } /* Header with Live Activity */ .dashboard-header { background: linear-gradient(135deg, var(--purple-premium), var(--blue-primary)); color: white; padding: 30px; position: relative; overflow: hidden; } .live-ticker { position: absolute; top: 10px; left: 0; right: 0; background: rgba(0,0,0,0.2); padding: 8px; overflow: hidden; } .ticker-content { display: flex; animation: scroll 30s linear infinite; white-space: nowrap; } @keyframes scroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } .ticker-item { padding: 0 30px; font-size: 13px; opacity: 0.9; cursor: pointer; transition: opacity 0.3s ease; } .ticker-item:hover { opacity: 1; } .ticker-item .live-dot { display: inline-block; width: 8px; height: 8px; background: var(--red-live); border-radius: 50%; margin-right: 5px; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.2); } } .header-main { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; } .header-title h1 { font-size: 32px; margin-bottom: 5px; } .campaign-health-score { text-align: center; background: rgba(255,255,255,0.2); padding: 20px; border-radius: 15px; min-width: 150px; cursor: pointer; transition: all 0.3s ease; position: relative; } .campaign-health-score:hover { background: rgba(255,255,255,0.3); transform: scale(1.05); } .health-tooltip { position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); background: var(--gray-dark); color: white; padding: 8px 12px; border-radius: 8px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .campaign-health-score:hover .health-tooltip { opacity: 1; } .health-circle { width: 80px; height: 80px; margin: 0 auto 10px; position: relative; } .health-circle svg { transform: rotate(-90deg); } .health-circle .score-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28px; font-weight: bold; } /* Money Alert Bar */ .money-alert { background: var(--orange-urgent); color: white; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; } .money-alert-content { display: flex; align-items: center; gap: 20px; } .money-amount { font-size: 24px; font-weight: bold; transition: all 0.5s ease; } .quick-win-btn { background: white; color: var(--orange-urgent); padding: 12px 24px; border-radius: 30px; border: none; font-weight: bold; cursor: pointer; transition: all 0.3s ease; animation: subtle-pulse 2s infinite; position: relative; overflow: hidden; } @keyframes subtle-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .quick-win-btn:hover { transform: scale(1.1); box-shadow: 0 5px 20px rgba(0,0,0,0.2); } .quick-win-btn:active { transform: scale(0.98); } /* Ripple effect */ .ripple { position: absolute; border-radius: 50%; background: rgba(249, 115, 22, 0.3); transform: scale(0); animation: ripple-animation 0.6s ease-out; } @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } } /* Main Content Grid */ .dashboard-content { padding: 30px; display: grid; grid-template-columns: 1fr 350px; gap: 30px; } /* Campaign Performance Cards */ .campaign-cards { display: grid; gap: 20px; } .performance-card { background: white; border: 2px solid var(--gray-light); border-radius: 15px; padding: 20px; transition: all 0.3s ease; position: relative; overflow: hidden; } .performance-card:hover { border-color: var(--blue-primary); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.1); transform: translateY(-2px); } .card-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px; } .card-title { font-size: 18px; font-weight: bold; color: var(--gray-dark); cursor: pointer; transition: color 0.3s ease; } .card-title:hover { color: var(--blue-primary); } .card-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; animation: badge-pulse 2s infinite; } @keyframes badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .badge-trending { background: var(--green-subtle); color: var(--green-money); } .badge-hot { background: var(--orange-subtle); color: var(--orange-urgent); } .badge-champion { background: var(--purple-subtle); color: var(--purple-premium); } .campaign-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px; } .metric { text-align: center; cursor: pointer; transition: transform 0.3s ease; position: relative; } .metric:hover { transform: scale(1.1); } .metric-value { font-size: 24px; font-weight: bold; color: var(--gray-dark); transition: all 0.3s ease; } .metric-label { font-size: 11px; color: var(--gray-medium); text-transform: uppercase; margin-top: 2px; } .metric-change { font-size: 12px; margin-top: 2px; } .change-up { color: var(--green-money); } .change-down { color: var(--red-live); } .metric-tooltip { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: var(--gray-dark); color: white; padding: 5px 10px; border-radius: 6px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 10; } .metric:hover .metric-tooltip { opacity: 1; } .progress-section { margin-bottom: 20px; } .progress-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; } .progress-bar { height: 8px; background: var(--gray-light); border-radius: 10px; overflow: hidden; position: relative; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--blue-primary), var(--purple-premium)); border-radius: 10px; transition: width 0.5s ease; position: relative; overflow: hidden; } .progress-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .action-section { display: flex; gap: 10px; } .action-btn { flex: 1; padding: 12px; border: 2px solid var(--gray-light); background: white; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .action-btn-primary { background: var(--blue-primary); color: white; border-color: var(--blue-primary); } .action-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .action-btn:active { transform: translateY(0); } /* Sidebar */ .dashboard-sidebar { display: flex; flex-direction: column; gap: 20px; } /* Leaderboard Widget */ .leaderboard-widget { background: white; border: 2px solid var(--gray-light); border-radius: 15px; padding: 20px; transition: all 0.3s ease; } .leaderboard-widget:hover { box-shadow: 0 5px 20px rgba(0,0,0,0.1); } .widget-title { font-size: 16px; font-weight: bold; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; } .leaderboard-list { display: flex; flex-direction: column; gap: 12px; } .leaderboard-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 8px; transition: all 0.3s ease; cursor: pointer; } .leaderboard-item:hover { background: var(--gray-light); transform: translateX(5px); } .rank { font-size: 18px; font-weight: bold; width: 30px; transition: transform 0.3s ease; } .leaderboard-item:hover .rank { transform: scale(1.2); } .rank-1 { color: #FFD700; } .rank-2 { color: #C0C0C0; } .rank-3 { color: #CD7F32; } .school-info { flex: 1; } .school-name { font-weight: 600; font-size: 14px; } .school-stats { font-size: 12px; color: var(--gray-medium); } .your-position { background: var(--blue-subtle); border: 2px solid var(--blue-primary); margin-top: 10px; animation: highlight-pulse 2s infinite; } @keyframes highlight-pulse { 0%, 100% { border-color: var(--blue-primary); } 50% { border-color: var(--purple-premium); } } /* Next Campaign Suggestion */ .suggestion-widget { background: linear-gradient(135deg, var(--green-subtle), var(--blue-subtle)); border: 2px solid var(--green-money); border-radius: 15px; padding: 20px; transition: all 0.3s ease; } .suggestion-widget:hover { transform: scale(1.02); box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2); } .suggestion-content { text-align: center; margin: 15px 0; } .suggestion-amount { font-size: 36px; font-weight: bold; color: var(--green-money); margin-bottom: 5px; } .counting { display: inline-block; } .suggestion-campaign { font-size: 16px; font-weight: 600; margin-bottom: 10px; } .suggestion-reason { font-size: 13px; color: var(--gray-medium); margin-bottom: 15px; } .launch-btn { width: 100%; padding: 15px; background: var(--green-money); color: white; border: none; border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .launch-btn:hover { background: #059669; transform: scale(1.02); box-shadow: 0 5px 20px rgba(16, 185, 129, 0.3); } .launch-btn:active { transform: scale(0.98); } /* Achievement Toast */ .achievement-toast { position: fixed; bottom: 30px; right: 30px; background: white; border-radius: 15px; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 15px; animation: slideIn 0.5s ease; z-index: 1000; cursor: pointer; transition: all 0.3s ease; } .achievement-toast:hover { transform: scale(1.05); box-shadow: 0 15px 50px rgba(0,0,0,0.3); } @keyframes slideIn { from { transform: translateX(400px); } to { transform: translateX(0); } } .achievement-icon { font-size: 40px; animation: trophy-bounce 1s ease infinite; } @keyframes trophy-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .achievement-content h3 { font-size: 16px; margin-bottom: 3px; } .achievement-content p { font-size: 13px; color: var(--gray-medium); } /* Streak Section */ .streak-section { background: linear-gradient(135deg, var(--yellow-achievement), var(--orange-urgent)); color: white; padding: 15px; border-radius: 10px; text-align: center; margin-bottom: 20px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .streak-section:hover { transform: scale(1.05); box-shadow: 0 10px 30px rgba(250, 204, 21, 0.3); } .streak-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.2), transparent); animation: rotate 3s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .streak-number { font-size: 32px; font-weight: bold; position: relative; z-index: 1; } .streak-label { font-size: 14px; opacity: 0.9; position: relative; z-index: 1; } /* Confetti Container */ .confetti-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; } .confetti { position: absolute; width: 10px; height: 10px; background: var(--yellow-achievement); animation: confetti-fall 3s linear; } @keyframes confetti-fall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } /* Sound button */ .sound-toggle { position: fixed; bottom: 30px; left: 30px; width: 50px; height: 50px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition: all 0.3s ease; z-index: 100; } .sound-toggle:hover { transform: scale(1.1); box-shadow: 0 8px 30px rgba(0,0,0,0.15); } /* Mobile Responsive */ @media (max-width: 768px) { .dashboard-content { grid-template-columns: 1fr; } .dashboard-header { padding: 20px; } .header-main { flex-direction: column; gap: 20px; } .header-title h1 { font-size: 24px; } .money-alert { flex-direction: column; gap: 15px; text-align: center; } .campaign-metrics { grid-template-columns: repeat(3, 1fr); gap: 10px; } .metric-value { font-size: 18px; } .dashboard-sidebar { margin-top: 20px; } .achievement-toast { right: 15px; bottom: 15px; left: 15px; } } @media (max-width: 480px) { body { padding: 10px; } .dashboard-container { border-radius: 15px; } .action-section { flex-direction: column; } .quick-win-btn { padding: 10px 16px; font-size: 14px; } .money-amount { font-size: 20px; } } </style> </head> <body> <div class="dashboard-container"> <!-- Header with Live Activity --> <div class="dashboard-header"> <div class="live-ticker"> <div class="ticker-content"> <span class="ticker-item"><span class="live-dot"></span>Mike's MMA just sent "Summer Camp Early Bird" → 12 signups in 10 min!</span> <span class="ticker-item"><span class="live-dot"></span>Elite Boxing launched "Black Belt Special" → $3,400 revenue</span> <span class="ticker-item"><span class="live-dot"></span>147 schools active now</span> <span class="ticker-item"><span class="live-dot"></span>Dragon Dojo hit 47% open rate on "Parent Night"</span> </div> </div> <div class="header-main"> <div class="header-title"> <h1>📧 Campaigns Command Center</h1> <p style="opacity: 0.9;">Your money-making machine dashboard</p> </div> <div class="campaign-health-score"> <div class="health-circle"> <svg width="80" height="80"> <circle cx="40" cy="40" r="35" stroke="rgba(255,255,255,0.3)" stroke-width="8" fill="none"/> <circle cx="40" cy="40" r="35" stroke="white" stroke-width="8" fill="none" stroke-dasharray="220" stroke-dashoffset="55" stroke-linecap="round"/> </svg> <div class="score-text">B+</div> </div> <div>Campaign Health</div> <div class="health-tooltip">Click to see breakdown</div> </div> </div> </div> <!-- Money Alert Bar --> <div class="money-alert"> <div class="money-alert-content"> <span>⚠️</span> <span class="money-amount" data-target="4750">$0</span> <span>left on the table this month from unsent campaigns</span> </div> <button class="quick-win-btn">🎯 Quick Win: Send in 3 min → $850</button> </div> <!-- Main Content --> <div class="dashboard-content"> <!-- Left Column - Campaign Cards --> <div class="campaign-cards"> <!-- Active Campaign #1 --> <div class="performance-card"> <div class="card-header"> <div class="card-title">🏕️ Summer Camp Early Bird</div> <div class="card-badge badge-trending">🔥 TRENDING</div> </div> <div class="campaign-metrics"> <div class="metric"> <div class="metric-value" data-value="47">0%</div> <div class="metric-label">Open Rate</div> <div class="metric-change change-up">↑ 12%</div> <div class="metric-tooltip">Industry avg: 32%</div> </div> <div class="metric"> <div class="metric-value" data-value="3400">$0</div> <div class="metric-label">Revenue</div> <div class="metric-change change-up">↑ $800</div> <div class="metric-tooltip">Best performing!</div> </div> <div class="metric"> <div class="metric-value" data-value="18">0</div> <div class="metric-label">Signups</div> <div class="metric-change change-up">↑ 5</div> <div class="metric-tooltip">18 new students!</div> </div> </div> <div class="progress-section"> <div class="progress-header"> <span>Goal Progress</span> <span style="color: var(--green-money); font-weight: bold;"> $<span class="progress-current">0</span> / $5,000 </span> </div> <div class="progress-bar"> <div class="progress-fill" data-width="68" style="width: 0%;"></div> </div> </div> <div class="action-section"> <button class="action-btn">📊 View Details</button> <button class="action-btn action-btn-primary">🚀 Send Follow-up</button> </div> </div> <!-- Active Campaign #2 --> <div class="performance-card"> <div class="card-header"> <div class="card-title">🥋 Black Belt Graduation</div> <div class="card-badge badge-hot">HOT</div> </div> <div class="campaign-metrics"> <div class="metric"> <div class="metric-value" data-value="52">0%</div> <div class="metric-label">Open Rate</div> <div class="metric-change change-up">↑ 8%</div> <div class="metric-tooltip">Above average!</div> </div> <div class="metric"> <div class="metric-value" data-value="1200">$0</div> <div class="metric-label">Revenue</div> <div class="metric-change change-up">↑ $400</div> <div class="metric-tooltip">Growing fast!</div> </div> <div class="metric"> <div class="metric-value" data-value="8">0</div> <div class="metric-label">Signups</div> <div class="metric-change change-up">↑ 3</div> <div class="metric-tooltip">8 registrations</div> </div> </div> <div class="progress-section"> <div class="progress-header"> <span>Sending Progress</span> <span><span class="send-count">0</span> / 450 sent</span> </div> <div class="progress-bar"> <div class="progress-fill" data-width="53" style="width: 0%;"></div> </div> </div> <div class="action-section"> <button class="action-btn">⏸️ Pause</button> <button class="action-btn action-btn-primary">📤 Send to Rest</button> </div> </div> <!-- Template Winner --> <div class="performance-card" style="border-color: var(--purple-premium);"> <div class="card-header"> <div class="card-title">🏆 Competition Team Tryouts</div> <div class="card-badge badge-champion">CHAMPION</div> </div> <div class="campaign-metrics"> <div class="metric"> <div class="metric-value">64%</div> <div class="metric-label">Avg Open</div> <div class="metric-tooltip">Top performer!</div> </div> <div class="metric"> <div class="metric-value">$12.4K</div> <div class="metric-label">Total Made</div> <div class="metric-tooltip">Across all schools</div> </div> <div class="metric"> <div class="metric-value" data-value="247">0</div> <div class="metric-label">Schools Using</div> <div class="metric-tooltip">Join them!</div> </div> </div> <div style="background: var(--purple-subtle); padding: 12px; border-radius: 8px; margin-bottom: 15px;"> <div style="font-size: 13px; color: var(--purple-premium); font-weight: 600;"> 🎯 This template averages $2,100 per send </div> </div> <div class="action-section"> <button class="action-btn action-btn-primary" style="background: var(--purple-premium); border-color: var(--purple-premium);"> ✨ Use Champion Template </button> </div> </div> </div> <!-- Right Sidebar --> <div class="dashboard-sidebar"> <!-- Streak Widget --> <div class="streak-section"> <div class="streak-number">🔥 14</div> <div class="streak-label">Day Campaign Streak!</div> </div> <!-- Next Campaign Suggestion --> <div class="suggestion-widget"> <div class="widget-title" style="color: var(--green-money);"> 💡 AI Recommended Next Campaign </div> <div class="suggestion-content"> <div class="suggestion-amount">+$<span class="counting" data-target="2100">0</span></div> <div class="suggestion-campaign">"Parent's Night Out"</div> <div class="suggestion-reason"> 87% of schools see success with this in Week 3 of month. Your parents haven't heard from you in 12 days. </div> <button class="launch-btn">Launch in 90 Seconds →</button> </div> </div> <!-- Leaderboard --> <div class="leaderboard-widget"> <div class="widget-title"> 🏆 Campaign Champions This Week </div> <div class="leaderboard-list"> <div class="leaderboard-item"> <span class="rank rank-1">1</span> <div class="school-info"> <div class="school-name">Mike's Martial Arts</div> <div class="school-stats">18 campaigns • $24.7K</div> </div> </div> <div class="leaderboard-item"> <span class="rank rank-2">2</span> <div class="school-info"> <div class="school-name">Elite Boxing Academy</div> <div class="school-stats">15 campaigns • $19.3K</div> </div> </div> <div class="leaderboard-item"> <span class="rank rank-3">3</span> <div class="school-info"> <div class="school-name">Dragon Dojo</div> <div class="school-stats">14 campaigns • $18.1K</div> </div> </div> <div class="leaderboard-item your-position"> <span class="rank">12</span> <div class="school-info"> <div class="school-name">You</div> <div class="school-stats">7 campaigns • $8.4K</div> </div> </div> </div> <div style="text-align: center; margin-top: 15px; font-size: 13px; color: var(--gray-medium);"> Send 2 more to reach Top 10 🎯 </div> </div> <!-- Quick Actions --> <div class="leaderboard-widget"> <div class="widget-title">⚡ Quick Actions</div> <div style="display: flex; flex-direction: column; gap: 10px;"> <button class="action-btn">📝 Draft with AI</button> <button class="action-btn">🎨 Browse Templates</button> <button class="action-btn">📊 Analytics Deep Dive</button> <button class="action-btn">🎯 Set Goals</button> </div> </div> </div> </div> </div> <!-- Achievement Toast (Hidden by default) --> <div class="achievement-toast" style="display: none;"> <div class="achievement-icon">🏆</div> <div class="achievement-content"> <h3>Campaign Velocity Unlocked!</h3> <p>You sent 3 campaigns this week</p> </div> </div> <!-- Sound Toggle Button --> <div class="sound-toggle" onclick="toggleSound()"> <span id="sound-icon">🔊</span> </div> <!-- Confetti Container --> <div class="confetti-container" id="confetti-container"></div> <!-- Audio Elements (Hidden) --> <audio id="achievement-sound" preload="auto"> <source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBTGH0fPTgjMGHm7A7+OZURE" type="audio/wav"> </audio> <audio id="click-sound" preload="auto"> <source src="data:audio/wav;base64,UklGRjIBAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YQ4BAAB/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/" type="audio/wav"> </audio> <script> let soundEnabled = true; // Sound functions function playSound(soundId) { if (soundEnabled) { const sound = document.getElementById(soundId); if (sound) { sound.currentTime = 0; sound.play().catch(e => console.log('Sound play failed:', e)); } } } function toggleSound() { soundEnabled = !soundEnabled; document.getElementById('sound-icon').textContent = soundEnabled ? '🔊' : '🔇'; } // Number counter animation function animateValue(element, start, end, duration, isPercentage = false, isMoney = false) { const range = end - start; const increment = range / (duration / 16); let current = start; const timer = setInterval(() => { current += increment; if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) { current = end; clearInterval(timer); } let display = Math.round(current); if (isPercentage) { element.textContent = display + '%'; } else if (isMoney) { element.textContent = '$' + display.toLocaleString(); } else { element.textContent = display.toLocaleString(); } }, 16); } // Animate counters on load window.addEventListener('load', () => { // Animate money amount const moneyAmount = document.querySelector('.money-amount'); if (moneyAmount) { animateValue(moneyAmount, 0, 4750, 1500, false, true); } // Animate metric values document.querySelectorAll('.metric-value[data-value]').forEach(metric => { const value = parseInt(metric.getAttribute('data-value')); const isPercentage = metric.textContent.includes('%'); const isMoney = metric.textContent.includes('$'); setTimeout(() => { animateValue(metric, 0, value, 1000, isPercentage, isMoney); }, Math.random() * 500); }); // Animate suggestion amount const counting = document.querySelector('.counting'); if (counting) { const target = parseInt(counting.getAttribute('data-target')); setTimeout(() => { animateValue(counting, 0, target, 1500); }, 800); } // Animate progress bars document.querySelectorAll('.progress-fill[data-width]').forEach(bar => { const width = bar.getAttribute('data-width'); setTimeout(() => { bar.style.width = width + '%'; // Check for 100% completion if (width >= 100) { setTimeout(() => { triggerConfetti(); playSound('achievement-sound'); }, 500); } }, 100); }); // Animate progress current value setTimeout(() => { const progressCurrent = document.querySelector('.progress-current'); if (progressCurrent) { animateValue(progressCurrent, 0, 3400, 1500); } }, 100); // Animate send count setTimeout(() => { const sendCount = document.querySelector('.send-count'); if (sendCount) { animateValue(sendCount, 0, 240, 1200); } }, 300); // Animate schools using const schoolsUsing = document.querySelector('.metric-value[data-value="247"]'); if (schoolsUsing) { setTimeout(() => { animateValue(schoolsUsing, 0, 247, 2000); }, 600); } }); // Confetti effect function triggerConfetti() { const container = document.getElementById('confetti-container'); const colors = ['#10b981', '#3b82f6', '#9333ea', '#f97316', '#facc15', '#ef4444']; for (let i = 0; i < 100; i++) { const confetti = document.createElement('div'); confetti.className = 'confetti'; confetti.style.left = Math.random() * 100 + '%'; confetti.style.background = colors[Math.floor(Math.random() * colors.length)]; confetti.style.animationDelay = Math.random() * 3 + 's'; confetti.style.animationDuration = (Math.random() * 2 + 2) + 's'; container.appendChild(confetti); setTimeout(() => confetti.remove(), 3000); } } // Ripple effect for buttons function createRipple(event) { const button = event.currentTarget; const ripple = document.createElement('span'); ripple.className = 'ripple'; const rect = button.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = event.clientX - rect.left - size / 2; const y = event.clientY - rect.top - size / 2; ripple.style.width = ripple.style.height = size + 'px'; ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; button.appendChild(ripple); setTimeout(() => ripple.remove(), 600); } // Add ripple to all buttons document.querySelectorAll('button, .action-btn').forEach(button => { button.addEventListener('click', createRipple); button.addEventListener('click', () => playSound('click-sound')); }); // Quick Win button special handling document.querySelector('.quick-win-btn').addEventListener('click', (e) => { createRipple(e); playSound('click-sound'); setTimeout(() => { alert('Quick Win Campaign launching... This would open the AI campaign builder with pre-filled "Parent Night Out" template!'); }, 300); }); // Launch button special handling document.querySelector('.launch-btn').addEventListener('click', (e) => { playSound('achievement-sound'); triggerConfetti(); setTimeout(() => { alert('Launching campaign in 90 seconds... AI is preparing your perfect campaign!'); }, 300); }); // Show achievement toast after delay setTimeout(() => { const toast = document.querySelector('.achievement-toast'); toast.style.display = 'flex'; playSound('achievement-sound'); // Auto-hide after 4 seconds setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => { toast.style.display = 'none'; toast.style.opacity = '1'; }, 500); }, 4000); }, 5000); // Hover sound for important elements document.querySelectorAll('.performance-card, .leaderboard-item, .suggestion-widget').forEach(element => { element.addEventListener('mouseenter', () => { // Subtle hover feedback (could add a very quiet sound here) }); }); // Streak section click celebration document.querySelector('.streak-section').addEventListener('click', () => { triggerConfetti(); playSound('achievement-sound'); }); // Campaign health score click document.querySelector('.campaign-health-score').addEventListener('click', () => { alert('Campaign Health Breakdown:\n\n📧 Send Frequency: B+\n📈 Open Rates: A-\n💰 Revenue Generation: B\n🎯 Goal Achievement: B+\n\nTip: Send 2 more campaigns this week to reach A grade!'); }); </script> </body> </html> - Initial Deployment
4e99aba verified