Spaces:
Running
Running
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Choose Your High-Converting Design - Zivvy</title> <style> /* Design System Variables */ :root { --primary: #256EFF; --success: #10B981; --warning: #F59E0B; --error: #EF4444; --dark: #0A0E27; --background: #F5F7FA; --white: #FFFFFF; --text-primary: #1F2937; --text-secondary: #6B7280; --border: #E5E7EB; --premium-gold: #FFD700; /* Spacing (4px grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Typography */ --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-hero: 48px; --font-h1: 36px; --font-h2: 24px; --font-h3: 20px; --font-body: 16px; --font-small: 14px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.1); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); --shadow-xl: 0 20px 25px rgba(0,0,0,0.1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-system); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; animation: backgroundShift 10s ease infinite; } @keyframes backgroundShift { 0%, 100% { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } 50% { background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); } } /* Success Path Progress Bar */ .success-path { position: fixed; top: 0; left: 0; right: 0; background: var(--white); padding: var(--space-4); box-shadow: var(--shadow-md); z-index: 100; } .progress-steps { display: flex; justify-content: center; align-items: center; gap: var(--space-4); max-width: 800px; margin: 0 auto; } .step { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--font-small); position: relative; } .step.active { color: var(--primary); font-weight: 600; } .step.completed { color: var(--success); } .step-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-weight: bold; transition: all 0.3s ease; } .step.active .step-icon { background: var(--primary); color: var(--white); transform: scale(1.2); box-shadow: 0 0 0 4px rgba(37, 110, 255, 0.2); } .step.completed .step-icon { background: var(--success); color: var(--white); } .step-line { width: 60px; height: 2px; background: var(--border); margin: 0 var(--space-2); } .step.completed + .step-line { background: var(--success); } /* Main Layout */ .layout-container { display: flex; gap: var(--space-6); max-width: 1440px; margin: 80px auto 0; padding: var(--space-6); height: calc(100vh - 120px); } /* Left Panel - Skin Gallery */ .skin-gallery { flex: 1; background: var(--white); border-radius: 16px; padding: var(--space-6); overflow-y: auto; animation: slideInLeft 0.5s ease; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } /* Header */ .gallery-header { margin-bottom: var(--space-6); } .gallery-title { font-size: var(--font-h1); color: var(--text-primary); margin-bottom: var(--space-2); background: linear-gradient(135deg, var(--primary), var(--warning)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .gallery-subtitle { color: var(--text-secondary); font-size: var(--font-body); margin-bottom: var(--space-4); } /* Filter Tabs */ .filter-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); background: var(--background); padding: var(--space-2); border-radius: 12px; } .filter-tab { flex: 1; padding: var(--space-3) var(--space-4); background: transparent; border: none; border-radius: 8px; font-size: var(--font-body); color: var(--text-secondary); cursor: pointer; transition: all 0.3s ease; position: relative; } .filter-tab.active { background: var(--white); color: var(--primary); font-weight: 600; box-shadow: var(--shadow-sm); } .filter-tab:hover:not(.active) { background: rgba(255, 255, 255, 0.5); } .tab-badge { position: absolute; top: -8px; right: -8px; background: var(--error); color: var(--white); font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; } /* AI Recommendation */ .ai-recommendation { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border: 2px solid var(--primary); border-radius: 12px; padding: var(--space-4); margin-bottom: var(--space-6); display: flex; align-items: center; gap: var(--space-4); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.01); } } .ai-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--primary), var(--warning)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; } .ai-content { flex: 1; } .ai-title { font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-1); } .ai-text { color: var(--text-secondary); font-size: var(--font-small); } /* Skin Grid */ .skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); } .skin-card { position: relative; background: var(--white); border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); border: 2px solid var(--border); } .skin-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.15); border-color: var(--primary); } .skin-card.selected { border-color: var(--success); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2); } .skin-preview { width: 100%; height: 200px; background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); position: relative; overflow: hidden; } .skin-preview img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .skin-card:hover .skin-preview img { transform: scale(1.1); } /* Premium Badge */ .premium-badge { position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, var(--premium-gold), #FFA500); color: var(--dark); padding: var(--space-2) var(--space-3); border-radius: 20px; font-size: 12px; font-weight: bold; display: flex; align-items: center; gap: var(--space-1); animation: shimmer 2s infinite; box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4); } @keyframes shimmer { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.05) rotate(1deg); } } /* Conversion Boost Badge */ .conversion-badge { position: absolute; top: 12px; left: 12px; background: var(--success); color: var(--white); padding: var(--space-2) var(--space-3); border-radius: 20px; font-size: 12px; font-weight: bold; } .skin-info { padding: var(--space-4); } .skin-name { font-size: var(--font-h3); color: var(--text-primary); margin-bottom: var(--space-2); font-weight: 600; } .skin-stats { display: flex; justify-content: space-between; margin-bottom: var(--space-3); } .skin-stat { display: flex; flex-direction: column; align-items: center; } .stat-value { font-weight: bold; color: var(--success); font-size: var(--font-h3); } .stat-label { font-size: 12px; color: var(--text-secondary); } .skin-features { display: flex; flex-wrap: wrap; gap: var(--space-2); } .feature-tag { padding: var(--space-1) var(--space-2); background: var(--background); border-radius: 4px; font-size: 12px; color: var(--text-secondary); } /* Right Panel - Live Preview */ .preview-panel { width: 400px; position: sticky; top: 100px; height: fit-content; animation: slideInRight 0.5s ease; } @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .preview-container { background: var(--white); border-radius: 16px; padding: var(--space-6); box-shadow: var(--shadow-xl); } .preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); } .preview-title { font-size: var(--font-h3); color: var(--text-primary); font-weight: 600; } .device-switcher { display: flex; gap: var(--space-2); } .device-btn { padding: var(--space-2); background: var(--background); border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; } .device-btn.active { background: var(--primary); color: var(--white); } /* Device Frame */ .device-frame { position: relative; background: #000; border-radius: 30px; padding: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); } .device-frame.desktop { border-radius: 12px; padding: 8px; } .device-screen { background: var(--white); border-radius: 20px; height: 500px; overflow-y: auto; position: relative; } .device-frame.desktop .device-screen { border-radius: 4px; } .preview-content { padding: var(--space-4); text-align: center; } .preview-content h2 { color: var(--text-primary); margin-bottom: var(--space-3); } .preview-content p { color: var(--text-secondary); margin-bottom: var(--space-4); } .preview-cta { padding: var(--space-3) var(--space-6); background: linear-gradient(135deg, var(--primary), var(--warning)); color: var(--white); border: none; border-radius: 8px; font-size: var(--font-body); font-weight: 600; cursor: pointer; animation: ctaPulse 2s infinite; } @keyframes ctaPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* Action Section */ .action-section { margin-top: var(--space-6); padding: var(--space-6); background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-radius: 12px; } .bundle-offer { background: linear-gradient(135deg, var(--warning), #DC2626); color: var(--white); padding: var(--space-4); border-radius: 8px; margin-bottom: var(--space-4); text-align: center; animation: shake 2s infinite; } @keyframes shake { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-1deg); } 75% { transform: rotate(1deg); } } .bundle-title { font-size: var(--font-h3); margin-bottom: var(--space-2); } .bundle-savings { font-size: var(--font-h2); font-weight: bold; } .action-buttons { display: flex; gap: var(--space-3); } .btn-primary { flex: 1; padding: var(--space-4) var(--space-6); background: linear-gradient(135deg, var(--success), #059669); color: var(--white); border: none; border-radius: 8px; font-size: var(--font-body); font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3); } .btn-secondary { flex: 1; padding: var(--space-4) var(--space-6); background: var(--white); color: var(--primary); border: 2px solid var(--primary); border-radius: 8px; font-size: var(--font-body); font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .btn-secondary:hover { background: var(--primary); color: var(--white); } /* Value Proposition */ .value-prop { text-align: center; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); } .value-prop-text { color: var(--text-secondary); font-size: var(--font-small); margin-bottom: var(--space-2); } .roi-display { font-size: var(--font-h2); color: var(--success); font-weight: bold; } /* Mobile Responsive */ @media (max-width: 1024px) { .layout-container { flex-direction: column; height: auto; } .preview-panel { width: 100%; position: static; } .skin-grid { grid-template-columns: 1fr; } } </style> </head> <body> <!-- Success Path Progress Bar --> <div class="success-path"> <div class="progress-steps"> <div class="step completed"> <div class="step-icon">✓</div> <span>Choose Type</span> </div> <div class="step-line"></div> <div class="step active"> <div class="step-icon">2</div> <span>Select Design</span> </div> <div class="step-line"></div> <div class="step"> <div class="step-icon">3</div> <span>Add Content</span> </div> <div class="step-line"></div> <div class="step"> <div class="step-icon">4</div> <span>Configure</span> </div> <div class="step-line"></div> <div class="step"> <div class="step-icon">5</div> <span>Launch</span> </div> </div> </div> <div class="layout-container"> <!-- Left Panel - Skin Gallery --> <div class="skin-gallery"> <div class="gallery-header"> <h1 class="gallery-title">Choose Your Money-Making Design</h1> <p class="gallery-subtitle">Professionally designed, conversion-tested templates</p> </div> <!-- Filter Tabs --> <div class="filter-tabs"> <button class="filter-tab active" onclick="filterSkins('all')"> All Skins </button> <button class="filter-tab" onclick="filterSkins('included')"> Included (12) </button> <button class="filter-tab" onclick="filterSkins('premium')"> Premium (8) <span class="tab-badge">HOT</span> </button> </div> <!-- AI Recommendation --> <div class="ai-recommendation"> <div class="ai-icon">🤖</div> <div class="ai-content"> <div class="ai-title">AI Recommendation for Paid Trial</div> <div class="ai-text">"Velocity Pro" converts 34% higher for trial offers like yours</div> </div> </div> <!-- Skin Grid --> <div class="skin-grid"> <!-- Premium Skin 1 - AI Recommended --> <div class="skin-card" onclick="selectSkin('velocity-pro', true)"> <div class="premium-badge">⭐ PREMIUM</div> <div class="conversion-badge">+34% Conv</div> <div class="skin-preview"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Cdefs%3E%3ClinearGradient id='grad1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23667eea;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23764ba2;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='200' fill='url(%23grad1)'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' fill='white' font-size='20' font-weight='bold'%3EVelocity Pro%3C/text%3E%3C/svg%3E" alt="Velocity Pro"> </div> <div class="skin-info"> <h3 class="skin-name">Velocity Pro</h3> <div class="skin-stats"> <div class="skin-stat"> <span class="stat-value">18.2%</span> <span class="stat-label">Conv Rate</span> </div> <div class="skin-stat"> <span class="stat-value">$4.8K</span> <span class="stat-label">Avg Rev</span> </div> <div class="skin-stat"> <span class="stat-value">2,847</span> <span class="stat-label">Uses</span> </div> </div> <div class="skin-features"> <span class="feature-tag">Countdown</span> <span class="feature-tag">Testimonials</span> <span class="feature-tag">Urgency</span> </div> </div> </div> <!-- Included Skin 1 --> <div class="skin-card" onclick="selectSkin('momentum', false)"> <div class="skin-preview"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23256EFF'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' fill='white' font-size='20' font-weight='bold'%3EMomentum%3C/text%3E%3C/svg%3E" alt="Momentum"> </div> <div class="skin-info"> <h3 class="skin-name">Momentum</h3> <div class="skin-stats"> <div class="skin-stat"> <span class="stat-value">12.1%</span> <span class="stat-label">Conv Rate</span> </div> <div class="skin-stat"> <span class="stat-value">$2.8K</span> <span class="stat-label">Avg Rev</span> </div> <div class="skin-stat"> <span class="stat-value">1,234</span> <span class="stat-label">Uses</span> </div> </div> <div class="skin-features"> <span class="feature-tag">Clean</span> <span class="feature-tag">Professional</span> </div> </div> </div> <!-- Premium Skin 2 --> <div class="skin-card" onclick="selectSkin('conversion-max', true)"> <div class="premium-badge">⭐ PREMIUM</div> <div class="conversion-badge">+28% Conv</div> <div class="skin-preview"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Cdefs%3E%3ClinearGradient id='grad2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2310B981;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23059669;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='200' fill='url(%23grad2)'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' fill='white' font-size='20' font-weight='bold'%3EConversion Max%3C/text%3E%3C/svg%3E" alt="Conversion Max"> </div> <div class="skin-info"> <h3 class="skin-name">Conversion Max</h3> <div class="skin-stats"> <div class="skin-stat"> <span class="stat-value">16.8%</span> <span class="stat-label">Conv Rate</span> </div> <div class="skin-stat"> <span class="stat-value">$4.2K</span> <span class="stat-label">Avg Rev</span> </div> <div class="skin-stat"> <span class="stat-value">1,892</span> <span class="stat-label">Uses</span> </div> </div> <div class="skin-features"> <span class="feature-tag">Social Proof</span> <span class="feature-tag">Scarcity</span> <span class="feature-tag">Trust Badges</span> </div> </div> </div> <!-- Included Skin 2 --> <div class="skin-card" onclick="selectSkin('swift', false)"> <div class="skin-preview"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23F59E0B'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' fill='white' font-size='20' font-weight='bold'%3ESwift%3C/text%3E%3C/svg%3E" alt="Swift"> </div> <div class="skin-info"> <h3 class="skin-name">Swift</h3> <div class="skin-stats"> <div class="skin-stat"> <span class="stat-value">10.3%</span> <span class="stat-label">Conv Rate</span> </div> <div class="skin-stat"> <span class="stat-value">$2.1K</span> <span class="stat-label">Avg Rev</span> </div> <div class="skin-stat"> <span class="stat-value">987</span> <span class="stat-label">Uses</span> </div> </div> <div class="skin-features"> <span class="feature-tag">Minimal</span> <span class="feature-tag">Fast Load</span> </div> </div> </div> <!-- Premium Skin 3 --> <div class="skin-card" onclick="selectSkin('elite-pro', true)"> <div class="premium-badge">⭐ PREMIUM</div> <div class="conversion-badge">+31% Conv</div> <div class="skin-preview"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Cdefs%3E%3ClinearGradient id='grad3' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23FFD700;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23FFA500;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='200' fill='url(%23grad3)'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' fill='black' font-size='20' font-weight='bold'%3EElite Pro%3C/text%3E%3C/svg%3E" alt="Elite Pro"> </div> <div class="skin-info"> <h3 class="skin-name">Elite Pro</h3> <div class="skin-stats"> <div class="skin-stat"> <span class="stat-value">19.7%</span> <span class="stat-label">Conv Rate</span> </div> <div class="skin-stat"> <span class="stat-value">$5.2K</span> <span class="stat-label">Avg Rev</span> </div> <div class="skin-stat"> <span class="stat-value">2,103</span> <span class="stat-label">Uses</span> </div> </div> <div class="skin-features"> <span class="feature-tag">Premium Feel</span> <span class="feature-tag">Video BG</span> <span class="feature-tag">Animations</span> </div> </div> </div> <!-- Included Skin 3 --> <div class="skin-card" onclick="selectSkin('clarity', false)"> <div class="skin-preview"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%230A0E27'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' fill='white' font-size='20' font-weight='bold'%3EClarity%3C/text%3E%3C/svg%3E" alt="Clarity"> </div> <div class="skin-info"> <h3 class="skin-name">Clarity</h3> <div class="skin-stats"> <div class="skin-stat"> <span class="stat-value">11.5%</span> <span class="stat-label">Conv Rate</span> </div> <div class="skin-stat"> <span class="stat-value">$2.4K</span> <span class="stat-label">Avg Rev</span> </div> <div class="skin-stat"> <span class="stat-value">1,456</span> <span class="stat-label">Uses</span> </div> </div> <div class="skin-features"> <span class="feature-tag">Dark Mode</span> <span class="feature-tag">Modern</span> </div> </div> </div> </div> </div> <!-- Right Panel - Live Preview --> <div class="preview-panel"> <div class="preview-container"> <div class="preview-header"> <h3 class="preview-title">Live Preview</h3> <div class="device-switcher"> <button class="device-btn active" onclick="switchDevice('mobile')">📱</button> <button class="device-btn" onclick="switchDevice('desktop')">💻</button> </div> </div> <div class="device-frame mobile" id="deviceFrame"> <div class="device-screen"> <div class="preview-content" id="previewContent"> <h2>Your Amazing Offer</h2> <p>This preview will update instantly when you hover over different skins</p> <div style="background: #f3f4f6; padding: 20px; border-radius: 8px; margin: 20px 0;"> <p style="color: #ef4444; font-weight: bold; margin-bottom: 10px;">⏰ Limited Time Offer</p> <p style="font-size: 24px; font-weight: bold; color: #1f2937;">Only 3 Spots Left!</p> </div> <button class="preview-cta">Start Your Trial - $1</button> <p style="font-size: 12px; color: #6b7280; margin-top: 10px;">Then $97/month • Cancel anytime</p> </div> </div> </div> <!-- Action Section --> <div class="action-section"> <div class="bundle-offer"> <div class="bundle-title">🔥 LIMITED TIME: Get All Premium Skins</div> <div class="bundle-savings">Save $388 (84% OFF)</div> <div style="font-size: 14px;">Individual: $776 • Bundle: $388</div> </div> <div class="action-buttons"> <button class="btn-secondary" onclick="continueWithFree()"> Continue with Free </button> <button class="btn-primary" onclick="unlockPremium()"> Unlock Premium Bundle </button> </div> <div class="value-prop"> <div class="value-prop-text">Expected return with premium skin:</div> <div class="roi-display">$4,800 → $6,240 (+30%)</div> </div> </div> </div> </div> </div> <script> let selectedSkin = null; let isPremium = false; // Initialize document.addEventListener('DOMContentLoaded', function() { // Auto-select AI recommended skin setTimeout(() => { selectSkin('velocity-pro', true); }, 1000); // Start live animations animateStats(); }); function selectSkin(skinId, premium) { // Remove previous selection document.querySelectorAll('.skin-card').forEach(card => { card.classList.remove('selected'); }); // Add selection event.currentTarget.classList.add('selected'); // Store selection selectedSkin = skinId; isPremium = premium; // Update preview with smooth transition updatePreview(skinId); // Show premium prompt if premium if (premium) { highlightPremiumValue(); } } function updatePreview(skinId) { const preview = document.getElementById('previewContent'); // Add fade transition preview.style.opacity = '0'; setTimeout(() => { // Update content based on skin if (skinId === 'velocity-pro') { preview.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; preview.style.color = 'white'; } else if (skinId === 'conversion-max') { preview.style.background = 'linear-gradient(135deg, #10B981 0%, #059669 100%)'; preview.style.color = 'white'; } else if (skinId === 'elite-pro') { preview.style.background = 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)'; preview.style.color = '#0A0E27'; } preview.style.opacity = '1'; }, 200); } function switchDevice(device) { const frame = document.getElementById('deviceFrame'); // Update active button document.querySelectorAll('.device-btn').forEach(btn => { btn.classList.remove('active'); }); event.currentTarget.classList.add('active'); // Update frame frame.className = `device-frame ${device}`; } function filterSkins(filter) { // Update active tab document.querySelectorAll('.filter-tab').forEach(tab => { tab.classList.remove('active'); }); event.currentTarget.classList.add('active'); // Filter skins (simplified for demo) console.log('Filtering by:', filter); } function highlightPremiumValue() { const bundleOffer = document.querySelector('.bundle-offer'); bundleOffer.style.animation = 'shake 0.5s'; setTimeout(() => { bundleOffer.style.animation = 'shake 2s infinite'; }, 500); } function continueWithFree() { if (isPremium) { // Show "are you sure" modal if (confirm('Premium skins convert 30% higher. Are you sure you want to continue with a free skin?')) { proceedToContent(); } } else { proceedToContent(); } } function unlockPremium() { // Store premium purchase sessionStorage.setItem('premiumUnlocked', 'true'); // Celebration animation document.body.style.background = 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)'; setTimeout(() => { proceedToContent(); }, 1000); } function proceedToContent() { // Store selections sessionStorage.setItem('selectedSkin', selectedSkin); sessionStorage.setItem('isPremium', isPremium); // Navigate to content editor window.location.href = '/pg-creator/content-editor'; } function animateStats() { // Animate conversion rates document.querySelectorAll('.stat-value').forEach(el => { const original = el.textContent; setInterval(() => { if (Math.random() > 0.7) { el.style.color = '#10B981'; el.style.transform = 'scale(1.1)'; setTimeout(() => { el.style.transform = 'scale(1)'; }, 300); } }, 3000); }); } </script> </body> </html> - Follow Up Deployment
eb9d448 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Choose Your High-Converting Design - Zivvy</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#256EFF', | |
| success: '#10B981', | |
| warning: '#F59E0B', | |
| error: '#EF4444', | |
| dark: '#0A0E27', | |
| background: '#F5F7FA', | |
| 'premium-gold': '#FFD700', | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'bounce-slow': 'bounce 2s infinite', | |
| 'spin-slow': 'spin 3s linear infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'background-shift': 'backgroundShift 10s ease infinite', | |
| 'shimmer': 'shimmer 2s infinite', | |
| 'cta-pulse': 'ctaPulse 2s infinite', | |
| }, | |
| keyframes: { | |
| backgroundShift: { | |
| '0%, 100%': { 'background': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }, | |
| '50%': { 'background': 'linear-gradient(135deg, #764ba2 0%, #667eea 100%)' }, | |
| }, | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| }, | |
| shimmer: { | |
| '0%, 100%': { transform: 'scale(1) rotate(0deg)' }, | |
| '50%': { transform: 'scale(1.05) rotate(1deg)' }, | |
| }, | |
| ctaPulse: { | |
| '0%, 100%': { transform: 'scale(1)' }, | |
| '50%': { transform: 'scale(1.05)' }, | |
| }, | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @keyframes slideInLeft { | |
| from { opacity: 0; transform: translateX(-20px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes slideInRight { | |
| from { opacity: 0; transform: translateX(20px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes shake { | |
| 0%, 100% { transform: rotate(0deg); } | |
| 25% { transform: rotate(-1deg); } | |
| 75% { transform: rotate(1deg); } | |
| } | |
| .animate-slide-in-left { | |
| animation: slideInLeft 0.5s ease; | |
| } | |
| .animate-slide-in-right { | |
| animation: slideInRight 0.5s ease; | |
| } | |
| .animate-shake { | |
| animation: shake 2s infinite; | |
| } | |
| .step-line { | |
| width: 60px; | |
| height: 2px; | |
| } | |
| .device-frame { | |
| position: relative; | |
| background: #000; | |
| border-radius: 30px; | |
| padding: 12px; | |
| } | |
| .device-frame.desktop { | |
| border-radius: 12px; | |
| padding: 8px; | |
| } | |
| .device-screen { | |
| border-radius: 20px; | |
| height: 500px; | |
| } | |
| .device-frame.desktop .device-screen { | |
| border-radius: 4px; | |
| } | |
| .skin-preview { | |
| height: 200px; | |
| } | |
| .premium-gradient { | |
| background: linear-gradient(135deg, #FFD700, #FFA500); | |
| } | |
| .primary-gradient { | |
| background: linear-gradient(135deg, #256EFF, #764ba2); | |
| } | |
| .success-gradient { | |
| background: linear-gradient(135deg, #10B981, #059669); | |
| } | |
| .warning-gradient { | |
| background: linear-gradient(135deg, #F59E0B, #DC2626); | |
| } | |
| .bg-gradient-shift { | |
| animation: backgroundShift 10s ease infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-shift min-h-screen font-sans"> | |
| <!-- Success Path Progress Bar --> | |
| <div class="fixed top-0 left-0 right-0 bg-white py-4 shadow-md z-50"> | |
| <div class="flex justify-center items-center gap-4 max-w-4xl mx-auto"> | |
| <!-- Step 1 --> | |
| <div class="flex items-center gap-2 text-gray-500 text-sm"> | |
| <div class="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center font-bold transition-all"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <span>Choose Type</span> | |
| </div> | |
| <div class="step-line bg-gray-200 mx-2"></div> | |
| <!-- Step 2 (Active) --> | |
| <div class="flex items-center gap-2 text-primary-600 font-semibold text-sm"> | |
| <div class="w-7 h-7 rounded-full bg-primary text-white flex items-center justify-center font-bold transition-all scale-110 shadow-primary/20 shadow-[0_0_0_4px]"> | |
| 2 | |
| </div> | |
| <span>Select Design</span> | |
| </div> | |
| <div class="step-line bg-gray-200 mx-2"></div> | |
| <!-- Step 3 --> | |
| <div class="flex items-center gap-2 text-gray-500 text-sm"> | |
| <div class="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center font-bold transition-all"> | |
| 3 | |
| </div> | |
| <span>Add Content</span> | |
| </div> | |
| <div class="step-line bg-gray-200 mx-2"></div> | |
| <!-- Step 4 --> | |
| <div class="flex items-center gap-2 text-gray-500 text-sm"> | |
| <div class="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center font-bold transition-all"> | |
| 4 | |
| </div> | |
| <span>Configure</span> | |
| </div> | |
| <div class="step-line bg-gray-200 mx-2"></div> | |
| <!-- Step 5 --> | |
| <div class="flex items-center gap-2 text-gray-500 text-sm"> | |
| <div class="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center font-bold transition-all"> | |
| 5 | |
| </div> | |
| <span>Launch</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container mx-auto px-4 pt-24 pb-10"> | |
| <div class="flex flex-col lg:flex-row gap-6"> | |
| <!-- Left Panel - Skin Gallery --> | |
| <div class="flex-1 bg-white rounded-2xl p-6 overflow-y-auto animate-slide-in-left"> | |
| <div class="mb-6"> | |
| <h1 class="text-3xl md:text-4xl font-bold mb-2 bg-gradient-to-r from-primary to-warning bg-clip-text text-transparent"> | |
| Choose Your Money-Making Design | |
| </h1> | |
| <p class="text-gray-600"> | |
| Professionally designed, conversion-tested templates | |
| </p> | |
| </div> | |
| <!-- Filter Tabs --> | |
| <div class="flex gap-2 mb-6 bg-gray-50 p-2 rounded-xl"> | |
| <button class="flex-1 py-3 px-4 bg-white text-primary font-semibold rounded-lg shadow-sm transition-all active-tab" | |
| onclick="filterSkins('all')"> | |
| All Skins | |
| </button> | |
| <button class="flex-1 py-3 px-4 bg-transparent text-gray-500 rounded-lg transition-all hover:bg-white/50" | |
| onclick="filterSkins('included')"> | |
| Included (12) | |
| </button> | |
| <button class="flex-1 py-3 px-4 bg-transparent text-gray-500 rounded-lg transition-all hover:bg-white/50 relative" | |
| onclick="filterSkins('premium')"> | |
| Premium (8) | |
| <span class="absolute -top-2 -right-2 bg-error text-white text-xs px-2 py-0.5 rounded-full font-bold">HOT</span> | |
| </button> | |
| </div> | |
| <!-- AI Recommendation --> | |
| <div class="bg-gradient-to-r from-blue-50 to-blue-100 border-2 border-primary rounded-xl p-4 mb-6 flex items-center gap-4 animate-pulse"> | |
| <div class="w-12 h-12 bg-gradient-to-r from-primary to-warning rounded-xl flex items-center justify-center text-2xl"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-semibold text-gray-900 mb-1">AI Recommendation for Paid Trial</div> | |
| <div class="text-gray-600 text-sm">"Velocity Pro" converts 34% higher for trial offers like yours</div> | |
| </div> | |
| </div> | |
| <!-- Skin Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Premium Skin 1 - AI Recommended --> | |
| <div class="relative bg-white rounded-xl overflow-hidden cursor-pointer transition-all duration-300 hover:-translate-y-2 hover:shadow-xl border-2 border-gray-200 hover:border-primary selected-skin" | |
| onclick="selectSkin('velocity-pro', true)"> | |
| <div class="absolute top-3 right-3 premium-gradient text-dark font-bold py-1 px-3 rounded-full text-xs flex items-center gap-1 animate-shimmer shadow-lg shadow-yellow-400/40"> | |
| <i class="fas fa-star"></i> PREMIUM | |
| </div> | |
| <div class="absolute top-3 left-3 bg-success text-white py-1 px-3 rounded-full text-xs font-bold"> | |
| +34% Conv | |
| </div> | |
| <div class="skin-preview bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center"> | |
| <span class="text-white font-bold text-xl">Velocity Pro</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-2">Velocity Pro</h3> | |
| <div class="flex justify-between mb-3"> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl animate-bounce-slow">18.2%</div> | |
| <div class="text-gray-500 text-xs">Conv Rate</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">$4.8K</div> | |
| <div class="text-gray-500 text-xs">Avg Rev</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">2,847</div> | |
| <div class="text-gray-500 text-xs">Uses</div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">Countdown</span> | |
| <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">Testimonials</span> | |
| <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">Urgency</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Included Skin 1 --> | |
| <div class="relative bg-white rounded-xl overflow-hidden cursor-pointer transition-all duration-300 hover:-translate-y-2 hover:shadow-xl border-2 border-gray-200 hover:border-primary" | |
| onclick="selectSkin('momentum', false)"> | |
| <div class="skin-preview bg-primary flex items-center justify-center"> | |
| <span class="text-white font-bold text-xl">Momentum</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-2">Momentum</h3> | |
| <div class="flex justify-between mb-3"> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">12.1%</div> | |
| <div class="text-gray-500 text-xs">Conv Rate</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">$2.8K</div> | |
| <div class="text-gray-500 text-xs">Avg Rev</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">1,234</div> | |
| <div class="text-gray-500 text-xs">Uses</div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">Clean</span> | |
| <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">Professional</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Premium Skin 2 --> | |
| <div class="relative bg-white rounded-xl overflow-hidden cursor-pointer transition-all duration-300 hover:-translate-y-2 hover:shadow-xl border-2 border-gray-200 hover:border-primary" | |
| onclick="selectSkin('conversion-max', true)"> | |
| <div class="absolute top-3 right-3 premium-gradient text-dark font-bold py-1 px-3 rounded-full text-xs flex items-center gap-1 animate-shimmer shadow-lg shadow-yellow-400/40"> | |
| <i class="fas fa-star"></i> PREMIUM | |
| </div> | |
| <div class="absolute top-3 left-3 bg-success text-white py-1 px-3 rounded-full text-xs font-bold"> | |
| +28% Conv | |
| </div> | |
| <div class="skin-preview bg-gradient-to-r from-green-400 to-green-700 flex items-center justify-center"> | |
| <span class="text-white font-bold text-xl">Conversion Max</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-2">Conversion Max</h3> | |
| <div class="flex justify-between mb-3"> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">16.8%</div> | |
| <div class="text-gray-500 text-xs">Conv Rate</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">$4.2K</div> | |
| <div class="text-gray-500 text-xs">Avg Rev</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">1,892</div> | |
| <div class="text-gray-500 text-xs">Uses</div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">Social Proof</span> | |
| <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">Scarcity</span> | |
| <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">Trust Badges</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Included Skin 2 --> | |
| <div class="relative bg-white rounded-xl overflow-hidden cursor-pointer transition-all duration-300 hover:-translate-y-2 hover:shadow-xl border-2 border-gray-200 hover:border-primary" | |
| onclick="selectSkin('swift', false)"> | |
| <div class="skin-preview bg-warning flex items-center justify-center"> | |
| <span class="text-white font-bold text-xl">Swift</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-2">Swift</h3> | |
| <div class="flex justify-between mb-3"> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">10.3%</div> | |
| <div class="text-gray-500 text-xs">Conv Rate</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">$2.1K</div> | |
| <div class="text-gray-500 text-xs">Avg Rev</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">987</div> | |
| <div class="text-gray-500 text-xs">Uses</div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">Minimal</span> | |
| <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">Fast Load</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Premium Skin 3 --> | |
| <div class="relative bg-white rounded-xl overflow-hidden cursor-pointer transition-all duration-300 hover:-translate-y-2 hover:shadow-xl border-2 border-gray-200 hover:border-primary" | |
| onclick="selectSkin('elite-pro', true)"> | |
| <div class="absolute top-3 right-3 premium-gradient text-dark font-bold py-1 px-3 rounded-full text-xs flex items-center gap-1 animate-shimmer shadow-lg shadow-yellow-400/40"> | |
| <i class="fas fa-star"></i> PREMIUM | |
| </div> | |
| <div class="absolute top-3 left-3 bg-success text-white py-1 px-3 rounded-full text-xs font-bold"> | |
| +31% Conv | |
| </div> | |
| <div class="skin-preview premium-gradient flex items-center justify-center"> | |
| <span class="text-dark font-bold text-xl">Elite Pro</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-2">Elite Pro</h3> | |
| <div class="flex justify-between mb-3"> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">19.7%</div> | |
| <div class="text-gray-500 text-xs">Conv Rate</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">$5.2K</div> | |
| <div class="text-gray-500 text-xs">Avg Rev</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">2,103</div> | |
| <div class="text-gray-500 text-xs">Uses</div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">Premium Feel</span> | |
| <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">Video BG</span> | |
| <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">Animations</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Included Skin 3 --> | |
| <div class="relative bg-white rounded-xl overflow-hidden cursor-pointer transition-all duration-300 hover:-translate-y-2 hover:shadow-xl border-2 border-gray-200 hover:border-primary" | |
| onclick="selectSkin('clarity', false)"> | |
| <div class="skin-preview bg-dark flex items-center justify-center"> | |
| <span class="text-white font-bold text-xl">Clarity</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-2">Clarity</h3> | |
| <div class="flex justify-between mb-3"> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">11.5%</div> | |
| <div class="text-gray-500 text-xs">Conv Rate</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">$2.4K</div> | |
| <div class="text-gray-500 text-xs">Avg Rev</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-success font-bold text-xl">1,456</div> | |
| <div class="text-gray-500 text-xs">Uses</div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">Dark Mode</span> | |
| <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">Modern</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel - Live Preview --> | |
| <div class="w-full lg:w-96 xl:w-1/3 sticky top-24 h-fit animate-slide-in-right"> | |
| <div class="bg-white rounded-2xl p-6 shadow-xl"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold text-gray-900">Live Preview</h3> | |
| <div class="flex gap-2"> | |
| <button class="p-2 bg-gray-100 rounded-lg active-device" onclick="switchDevice('mobile')"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </button> | |
| <button class="p-2 bg-gray-100 rounded-lg" onclick="switchDevice('desktop')"> | |
| <i class="fas fa-laptop"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="device-frame mobile shadow-2xl" id="deviceFrame"> | |
| <div class="device-screen bg-white overflow-y-auto"> | |
| <div class="p-4 text-center" id="previewContent"> | |
| <h2 class="text-xl font-bold text-gray-900 mb-3">Your Amazing Offer</h2> | |
| <p class="text-gray-600 mb-4">This preview will update instantly when you hover over different skins</p> | |
| <div class="bg-gray-100 p-5 rounded-lg mb-4"> | |
| <p class="text-error font-bold mb-2"><i class="fas fa-clock mr-1"></i> Limited Time Offer</p> | |
| <p class="text-2xl font-bold text-gray-900">Only 3 Spots Left!</p> | |
| </div> | |
| <button class="primary-gradient text-white font-semibold py-3 px-6 rounded-lg animate-cta-pulse"> | |
| Start Your Trial - $1 | |
| </button> | |
| <p class="text-xs text-gray-500 mt-2">Then $97/month • Cancel anytime</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Section --> | |
| <div class="mt-6 p-6 bg-gradient-to-r from-blue-50 to-blue-100 rounded-xl"> | |
| <div class="warning-gradient text-white p-4 rounded-lg mb-4 text-center animate-shake"> | |
| <div class="text-xl font-bold mb-1"><i class="fas fa-fire mr-1"></i> LIMITED TIME: Get All Premium Skins</div> | |
| <div class="text-3xl font-bold">Save $388 (84% OFF)</div> | |
| <div class="text-sm">Individual: $776 • Bundle: $388</div> | |
| </div> | |
| <div class="flex gap-3"> | |
| <button class="flex-1 py-4 px-6 bg-white text-primary border-2 border-primary rounded-lg font-semibold transition-all hover:bg-primary hover:text-white" | |
| onclick="continueWithFree()"> | |
| Continue with Free | |
| </button> | |
| <button class="flex-1 py-4 px-6 success-gradient text-white rounded-lg font-semibold transition-all hover:-translate-y-1 hover:shadow-lg hover:shadow-green-500/30" | |
| onclick="unlockPremium()"> | |
| Unlock Premium Bundle | |
| </button> | |
| </div> | |
| <div class="text-center mt-4 pt-4 border-t border-gray-200"> | |
| <div class="text-gray-600 text-sm mb-1">Expected return with premium skin:</div> | |
| <div class="text-3xl text-success font-bold">$4,800 → $6,240 (+30%)</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let selectedSkin = null; | |
| let isPremium = false; | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Auto-select AI recommended skin | |
| setTimeout(() => { | |
| selectSkin('velocity-pro', true); | |
| }, 1000); | |
| // Start live animations | |
| animateStats(); | |
| }); | |
| function selectSkin(skinId, premium) { | |
| // Remove previous selection | |
| document.querySelectorAll('.selected-skin').forEach(card => { | |
| card.classList.remove('selected-skin', 'border-success', 'shadow-[0_0_0_4px_rgba(16,185,129,0.2)]'); | |
| }); | |
| // Add selection | |
| event.currentTarget.classList.add('selected-skin', 'border-success'); | |
| event.currentTarget.style.boxShadow = '0 0 0 4px rgba(16, 185, 129, 0.2)'; | |
| // Store selection | |
| selectedSkin = skinId; | |
| isPremium = premium; | |
| // Update preview with smooth transition | |
| updatePreview(skinId); | |
| // Show premium prompt if premium | |
| if (premium) { | |
| highlightPremiumValue(); | |
| } | |
| } | |
| function updatePreview(skinId) { | |
| const preview = document.getElementById('previewContent'); | |
| // Add fade transition | |
| preview.classList.add('opacity-0'); | |
| setTimeout(() => { | |
| // Reset all classes | |
| preview.className = 'p-4 text-center opacity-100 transition-opacity duration-200'; | |
| // Update content based on skin | |
| if (skinId === 'velocity-pro') { | |
| preview.classList.add('primary-gradient', 'text-white'); | |
| } else if (skinId === 'conversion-max') { | |
| preview.classList.add('success-gradient', 'text-white'); | |
| } else if (skinId === 'elite-pro') { | |
| preview.classList.add('premium-gradient', 'text-dark'); | |
| } else { | |
| // Default styling for included skins | |
| preview.classList.add('bg-white'); | |
| } | |
| // Restore content | |
| preview.innerHTML = ` | |
| <h2 class="text-xl font-bold ${skinId === 'elite-pro' ? 'text-dark' : 'text-white'} mb-3">Your Amazing Offer</h2> | |
| <p class="${skinId === 'elite-pro' ? 'text-dark' : 'text-white/80'} mb-4">This preview shows your selected "${skinId.replace('-', ' ')}" design</p> | |
| <div class="bg-${skinId === 'elite-pro' ? 'yellow-100' : 'white/20'} p-5 rounded-lg mb-4"> | |
| <p class="text-error font-bold mb-2"><i class="fas fa-clock mr-1"></i> Limited Time Offer</p> | |
| <p class="text-2xl font-bold ${skinId === 'elite-pro' ? 'text-dark' : 'text-white'}">Only 3 Spots Left!</p> | |
| </div> | |
| <button class="${skinId === 'elite-pro' ? 'bg-dark text-white' : 'bg-white text-primary'} font-semibold py-3 px-6 rounded-lg animate-cta-pulse"> | |
| Start Your Trial - $1 | |
| </button> | |
| <p class="text-xs ${skinId === 'elite-pro' ? 'text-dark/70' : 'text-white/70'} mt-2">Then $97/month • Cancel anytime</p> | |
| `; | |
| }, 200); | |
| } | |
| function switchDevice(device) { | |
| const frame = document.getElementById('deviceFrame'); | |
| // Update active button | |
| document.querySelectorAll('.active-device').forEach(btn => { | |
| btn.classList.remove('active-device', 'bg-primary', 'text-white'); | |
| btn.classList.add('bg-gray-100'); | |
| }); | |
| event.currentTarget.classList.add('active-device', 'bg-primary', 'text-white'); | |
| event.currentTarget.classList.remove('bg-gray-100'); | |
| // Update frame | |
| frame.className = `device-frame ${device} shadow-2xl`; | |
| if (device === 'desktop') { | |
| frame.querySelector('.device-screen').classList.add('rounded'); | |
| } else { | |
| frame.querySelector('.device-screen').classList.remove('rounded'); | |
| } | |
| } | |
| function filterSkins(filter) { | |
| // Update active tab | |
| document.querySelectorAll('.active-tab').forEach(tab => { | |
| tab.classList.remove('active-tab', 'bg-white', 'text-primary', 'font-semibold', 'shadow-sm'); | |
| tab.classList.add('bg-transparent', 'text-gray-500'); | |
| }); | |
| event.currentTarget.classList.add('active-tab', 'bg-white', 'text-primary', 'font-semibold', 'shadow-sm'); | |
| event.currentTarget.classList.remove('bg-transparent', 'text-gray-500'); | |
| // Filter skins (simplified for demo) | |
| console.log('Filtering by:', filter); | |
| } | |
| function highlightPremiumValue() { | |
| const bundleOffer = document.querySelector('.warning-gradient'); | |
| bundleOffer.style.animation = 'shake 0.5s'; | |
| setTimeout(() => { | |
| bundleOffer.style.animation = 'shake 2s infinite'; | |
| }, 500); | |
| } | |
| function continueWithFree() { | |
| if (isPremium) { | |
| // Show "are you sure" modal | |
| if (confirm('Premium skins convert 30% higher. Are you sure you want to continue with a free skin?')) { | |
| proceedToContent(); | |
| } | |
| } else { | |
| proceedToContent(); | |
| } | |
| } | |
| function unlockPremium() { | |
| // Store premium purchase | |
| sessionStorage.setItem('premiumUnlocked', 'true'); | |
| // Celebration animation | |
| document.body.classList.add('premium-gradient'); | |
| setTimeout(() => { | |
| proceedToContent(); | |
| }, 1000); | |
| } | |
| function proceedToContent() { | |
| // Store selections | |
| sessionStorage.setItem('selectedSkin', selectedSkin); | |
| sessionStorage.setItem('isPremium', isPremium); | |
| // Navigate to content editor | |
| window.location.href = '/pg-creator/content-editor'; | |
| } | |
| function animateStats() { | |
| // Animate conversion rates | |
| document.querySelectorAll('.text-success').forEach(el => { | |
| setInterval(() => { | |
| if (Math.random() > 0.7) { | |
| el.classList.add('text-green-600', 'scale-110'); | |
| setTimeout(() => { | |
| el.classList.remove('text-green-600', 'scale-110'); | |
| }, 300); | |
| } | |
| }, 3000); | |
| }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=usezivvy/pg-create-001" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |