Spaces:

usezivvy
/

pg-create-001

Running

App Files Files Community

pg-create-001 / index.html

Commit History

<!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>  <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">  <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>  <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>  <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>  <div class="skin-grid">  <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>  <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>  <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>  <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>  <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>  <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>  <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>  <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

usezivvy commited on Aug 28, 2025

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Create Your Profit Generator - 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; / 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; padding: var(--space-6); 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 Container / .container { max-width: 1200px; margin: 80px auto 0; padding: var(--space-6); background: var(--white); border-radius: 16px; box-shadow: var(--shadow-xl); animation: slideUp 0.5s ease; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } / Header Section / .header { text-align: center; margin-bottom: var(--space-12); } .header h1 { font-size: var(--font-hero); color: var(--text-primary); margin-bottom: var(--space-4); background: linear-gradient(135deg, var(--primary), var(--warning)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 2s infinite; } @keyframes shimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } .header p { font-size: var(--font-h3); color: var(--text-secondary); margin-bottom: var(--space-3); } / Live Stats Bar / .live-stats { display: flex; justify-content: center; gap: var(--space-8); padding: var(--space-4); background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 100%); border-radius: 12px; margin-bottom: var(--space-8); } .stat { display: flex; align-items: center; gap: var(--space-2); } .stat-icon { width: 8px; height: 8px; background: var(--success); border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } } .stat-value { font-weight: 600; color: var(--text-primary); } .stat-label { color: var(--text-secondary); font-size: var(--font-small); } / Type Cards Grid / .type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); margin-bottom: var(--space-8); } .type-card { position: relative; padding: var(--space-6); background: var(--white); border: 2px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); overflow: hidden; } .type-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--warning)); transform: scaleX(0); transition: transform 0.3s ease; } .type-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 24px rgba(37, 110, 255, 0.15); border-color: var(--primary); } .type-card:hover::before { transform: scaleX(1); } .popular-badge { position: absolute; top: -2px; right: -2px; background: linear-gradient(135deg, var(--warning), #DC2626); color: var(--white); padding: var(--space-2) var(--space-4); border-radius: 0 12px 0 12px; font-size: var(--font-small); font-weight: 600; animation: badgePulse 2s infinite; } @keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .type-icon { width: 48px; height: 48px; margin-bottom: var(--space-4); background: linear-gradient(135deg, var(--primary), var(--warning)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; } .type-name { font-size: var(--font-h2); color: var(--text-primary); margin-bottom: var(--space-2); font-weight: 600; } .type-description { color: var(--text-secondary); margin-bottom: var(--space-4); line-height: 1.5; } .type-stats { display: flex; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); } .type-stat { display: flex; flex-direction: column; gap: var(--space-1); } .type-stat-value { font-weight: 600; color: var(--success); font-size: var(--font-h3); } .type-stat-label { font-size: var(--font-small); color: var(--text-secondary); } / Revenue Calculator / .revenue-calculator { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-radius: 12px; padding: var(--space-6); margin-bottom: var(--space-8); text-align: center; border: 2px solid var(--primary); } .calculator-title { font-size: var(--font-h2); color: var(--text-primary); margin-bottom: var(--space-4); } .calculator-display { font-size: var(--font-hero); color: var(--success); font-weight: bold; margin-bottom: var(--space-2); animation: countUp 2s ease; } @keyframes countUp { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } .calculator-subtitle { color: var(--text-secondary); font-size: var(--font-body); } / Success Stories / .success-stories { background: var(--background); border-radius: 12px; padding: var(--space-6); margin-bottom: var(--space-8); } .stories-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .stories-title { font-size: var(--font-h3); color: var(--text-primary); } .story-carousel { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-2); } .story-card { min-width: 300px; background: var(--white); border-radius: 8px; padding: var(--space-4); box-shadow: var(--shadow-sm); } .story-quote { font-style: italic; color: var(--text-secondary); margin-bottom: var(--space-3); } .story-author { font-weight: 600; color: var(--text-primary); } .story-result { color: var(--success); font-weight: bold; } / Mobile Responsive / @media (max-width: 768px) { .header h1 { font-size: var(--font-h1); } .type-grid { grid-template-columns: 1fr; } .live-stats { flex-direction: column; gap: var(--space-3); } .success-path { display: none; } .container { margin-top: 0; border-radius: 0; } } </style> </head> <body>  <div class="success-path"> <div class="progress-steps"> <div class="step active"> <div class="step-icon">1</div> <span>Choose Type</span> </div> <div class="step-line"></div> <div class="step"> <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="container">  <div class="header"> <h1>Create Your Money-Making Machine</h1> <p>Choose your profit generator type and watch the sales roll in</p> <p style="color: var(--success); font-weight: 600;">Average page converts at 12.3% (5x industry standard)</p> </div>  <div class="live-stats"> <div class="stat"> <div class="stat-icon"></div> <span class="stat-value">2,847</span> <span class="stat-label">launched this week</span> </div> <div class="stat"> <div class="stat-icon"></div> <span class="stat-value">$1.2M</span> <span class="stat-label">generated today</span> </div> <div class="stat"> <div class="stat-icon"></div> <span class="stat-value">23</span> <span class="stat-label">being created now</span> </div> </div>  <div class="type-grid">  <div class="type-card" onclick="selectType('paid-trial')"> <div class="popular-badge">MOST POPULAR</div> <div class="type-icon">💰</div> <div class="type-name">Paid Trial</div> <div class="type-description">Perfect for subscription services. Charge a small fee upfront, convert to monthly.</div> <div class="type-stats"> <div class="type-stat"> <span class="type-stat-value">18.2%</span> <span class="type-stat-label">Avg Conv.</span> </div> <div class="type-stat"> <span class="type-stat-value">$4,800</span> <span class="type-stat-label">Avg Revenue</span> </div> </div> </div>  <div class="type-card" onclick="selectType('product')"> <div class="type-icon">📦</div> <div class="type-name">Product/Service</div> <div class="type-description">Sell anything once. Digital products, coaching, or physical goods.</div> <div class="type-stats"> <div class="type-stat"> <span class="type-stat-value">14.5%</span> <span class="type-stat-label">Avg Conv.</span> </div> <div class="type-stat"> <span class="type-stat-value">$3,200</span> <span class="type-stat-label">Avg Revenue</span> </div> </div> </div>  <div class="type-card" onclick="selectType('event-paid')"> <div class="type-icon">🎟️</div> <div class="type-name">Event (Paid)</div> <div class="type-description">Webinars, workshops, or live events with ticket sales.</div> <div class="type-stats"> <div class="type-stat"> <span class="type-stat-value">22.1%</span> <span class="type-stat-label">Avg Conv.</span> </div> <div class="type-stat"> <span class="type-stat-value">$6,100</span> <span class="type-stat-label">Avg Revenue</span> </div> </div> </div>  <div class="type-card" onclick="selectType('event-free')"> <div class="type-icon">🎯</div> <div class="type-name">Event (Free)</div> <div class="type-description">Build your list with free valuable content, then upsell.</div> <div class="type-stats"> <div class="type-stat"> <span class="type-stat-value">42.3%</span> <span class="type-stat-label">Opt-in Rate</span> </div> <div class="type-stat"> <span class="type-stat-value">847</span> <span class="type-stat-label">Avg Leads</span> </div> </div> </div>  <div class="type-card" onclick="selectType('rank-promotion')"> <div class="type-icon">🏆</div> <div class="type-name">Rank Promotion</div> <div class="type-description">Celebrate achievements and milestones with special offers.</div> <div class="type-stats"> <div class="type-stat"> <span class="type-stat-value">31.2%</span> <span class="type-stat-label">Avg Conv.</span> </div> <div class="type-stat"> <span class="type-stat-value">$2,100</span> <span class="type-stat-label">Avg Revenue</span> </div> </div> </div> </div>  <div class="revenue-calculator"> <div class="calculator-title">Your Expected First-Month Revenue</div> <div class="calculator-display">$4,847</div> <div class="calculator-subtitle">Based on 100 visitors with our proven conversion system</div> </div>  <div class="success-stories"> <div class="stories-header"> <h3 class="stories-title">🔥 Recent Success Stories</h3> <span style="color: var(--text-secondary); font-size: var(--font-small);">Updated 2 minutes ago</span> </div> <div class="story-carousel"> <div class="story-card"> <div class="story-quote">"Launched my trial offer yesterday..."</div> <div class="story-author">Sarah M. - Fitness Coach</div> <div class="story-result">127 signups in 24 hours = $3,810</div> </div> <div class="story-card"> <div class="story-quote">"The countdown timer alone doubled my sales..."</div> <div class="story-author">Mike T. - Course Creator</div> <div class="story-result">$12,400 weekend launch</div> </div> <div class="story-card"> <div class="story-quote">"I thought 40% conversion was a typo..."</div> <div class="story-author">Jennifer K. - Consultant</div> <div class="story-result">42% conversion rate achieved</div> </div> </div> </div> </div> <script> // Initialize animations and interactions document.addEventListener('DOMContentLoaded', function() { // Animate stats on scroll animateStats(); // Update live visitor count updateLiveCount(); // Revenue calculator animation animateRevenue(); }); function selectType(type) { // Store selection sessionStorage.setItem('pgType', type); // Show loading animation event.currentTarget.style.transform = 'scale(0.95)'; // Add success animation setTimeout(() => { event.currentTarget.style.background = 'linear-gradient(135deg, #10B981, #059669)'; event.currentTarget.style.color = 'white'; }, 100); // Navigate to skin selection setTimeout(() => { window.location.href = '/pg-creator/select-skin'; }, 500); } function animateStats() { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animated'); } }); }); document.querySelectorAll('.stat-value').forEach(el => { observer.observe(el); }); } function updateLiveCount() { const liveCount = document.querySelector('.stat-value'); setInterval(() => { const current = parseInt(liveCount.textContent.replace(',', '')); const change = Math.floor(Math.random() 5) - 2; const newCount = Math.max(20, current + change); liveCount.textContent = newCount.toLocaleString(); }, 5000); } function animateRevenue() { const display = document.querySelector('.calculator-display'); const start = 0; const end = 4847; const duration = 2000; const startTime = performance.now(); function update(currentTime) { const elapsed = currentTime - startTime; const progress = Math.min(elapsed / duration, 1); const value = Math.floor(start + (end - start) * progress); display.textContent = `$${value.toLocaleString()}`; if (progress < 1) { requestAnimationFrame(update); } } requestAnimationFrame(update); } </script> </body> </html> - Initial Deployment

a74c7ff
verified

usezivvy commited on Aug 28, 2025

initial commit

70434d1
verified

usezivvy commited on Aug 28, 2025