| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
| <title>Lumina Convert | All File Converter — AI-Powered Freedom</title>
|
| <meta name="description" content="Lumina Convert is the most elegant file converter. 200+ formats, offline-first, GPU accelerated. Designed for creators who value privacy & speed.">
|
| <meta name="author" content="BahadurAli's Team">
|
|
|
|
|
| <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
|
| <style>
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| }
|
|
|
| body {
|
| font-family: 'Inter', sans-serif;
|
| background-color: #fbfbfd;
|
| color: #1c1c1e;
|
| line-height: 1.5;
|
| scroll-behavior: smooth;
|
| }
|
|
|
|
|
| .glass-panel {
|
| background: rgba(255, 255, 255, 0.7);
|
| backdrop-filter: blur(14px);
|
| border: 1px solid rgba(255, 255, 255, 0.6);
|
| box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.08);
|
| }
|
|
|
| .gradient-text {
|
| background: linear-gradient(125deg, #1a1a2e, #4f46e5, #c084fc);
|
| background-clip: text;
|
| -webkit-background-clip: text;
|
| color: transparent;
|
| background-size: 200% auto;
|
| animation: shimmer 5s infinite;
|
| }
|
|
|
| @keyframes shimmer {
|
| 0% { background-position: 0% 50%; }
|
| 50% { background-position: 100% 50%; }
|
| 100% { background-position: 0% 50%; }
|
| }
|
|
|
|
|
| .navbar {
|
| position: fixed;
|
| top: 1rem;
|
| left: 50%;
|
| transform: translateX(-50%);
|
| width: 90%;
|
| max-width: 1280px;
|
| background: rgba(255, 255, 255, 0.75);
|
| backdrop-filter: blur(20px);
|
| border-radius: 2rem;
|
| padding: 0.8rem 2rem;
|
| z-index: 1000;
|
| box-shadow: 0 8px 20px rgba(0,0,0,0.02), 0 2px 4px rgba(0,0,0,0.02);
|
| border: 1px solid rgba(255,255,255,0.8);
|
| transition: all 0.3s ease;
|
| }
|
|
|
| .nav-container {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| }
|
|
|
| .logo {
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| font-weight: 800;
|
| font-size: 1.4rem;
|
| letter-spacing: -0.3px;
|
| cursor: pointer;
|
| }
|
|
|
| .logo-icon {
|
| width: 36px;
|
| height: 36px;
|
| background: linear-gradient(145deg, #2d2b4e, #4f46e5);
|
| border-radius: 12px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| color: white;
|
| font-size: 1.2rem;
|
| }
|
|
|
| .nav-links {
|
| display: flex;
|
| gap: 2rem;
|
| align-items: center;
|
| }
|
| .nav-links a {
|
| text-decoration: none;
|
| font-weight: 500;
|
| color: #2d2b4e;
|
| transition: 0.2s;
|
| cursor: pointer;
|
| font-size: 0.95rem;
|
| }
|
| .nav-links a:hover { color: #4f46e5; }
|
| .btn-download-nav {
|
| background: #1c1c2e;
|
| color: white !important;
|
| padding: 0.5rem 1.2rem;
|
| border-radius: 2rem;
|
| font-weight: 600;
|
| transition: all 0.2s;
|
| border: none;
|
| cursor: pointer;
|
| }
|
| .btn-download-nav:hover {
|
| background: #4f46e5;
|
| transform: scale(0.97);
|
| }
|
| .mobile-menu {
|
| display: none;
|
| font-size: 1.4rem;
|
| background: none;
|
| border: none;
|
| cursor: pointer;
|
| }
|
|
|
|
|
| .hero {
|
| min-height: 100vh;
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| flex-wrap: wrap;
|
| gap: 2rem;
|
| max-width: 1300px;
|
| margin: 0 auto;
|
| padding: 7rem 2rem 4rem;
|
| }
|
| .hero-left {
|
| flex: 1.2;
|
| }
|
| .hero-right {
|
| flex: 0.9;
|
| display: flex;
|
| justify-content: center;
|
| }
|
| .hero-badge {
|
| display: inline-flex;
|
| background: rgba(79, 70, 229, 0.1);
|
| border-radius: 40px;
|
| padding: 0.3rem 1rem;
|
| font-size: 0.8rem;
|
| font-weight: 500;
|
| color: #4f46e5;
|
| margin-bottom: 1.5rem;
|
| backdrop-filter: blur(4px);
|
| }
|
| .hero h1 {
|
| font-size: 4rem;
|
| font-weight: 800;
|
| line-height: 1.2;
|
| letter-spacing: -0.02em;
|
| margin-bottom: 1.2rem;
|
| }
|
| .hero-sub {
|
| font-size: 1.2rem;
|
| color: #4b5563;
|
| margin-bottom: 2rem;
|
| max-width: 550px;
|
| }
|
| .btn-group {
|
| display: flex;
|
| gap: 1rem;
|
| flex-wrap: wrap;
|
| }
|
| .btn-primary {
|
| background: #1c1c2e;
|
| color: white;
|
| border: none;
|
| padding: 0.9rem 2rem;
|
| border-radius: 3rem;
|
| font-weight: 600;
|
| display: inline-flex;
|
| gap: 10px;
|
| align-items: center;
|
| cursor: pointer;
|
| transition: all 0.2s;
|
| }
|
| .btn-primary:hover {
|
| background: #4f46e5;
|
| transform: translateY(-3px);
|
| }
|
| .btn-outline {
|
| background: transparent;
|
| border: 1px solid #cbd5e1;
|
| padding: 0.9rem 2rem;
|
| border-radius: 3rem;
|
| font-weight: 600;
|
| cursor: pointer;
|
| transition: all 0.2s;
|
| }
|
| .btn-outline:hover {
|
| border-color: #4f46e5;
|
| color: #4f46e5;
|
| }
|
| .floating-ui {
|
| background: rgba(255,255,240,0.5);
|
| border-radius: 2rem;
|
| padding: 1rem;
|
| backdrop-filter: blur(16px);
|
| box-shadow: 0 25px 40px -12px rgba(0,0,0,0.2);
|
| border: 1px solid rgba(255,255,245,0.9);
|
| width: 280px;
|
| }
|
| .mock-list {
|
| background: white;
|
| border-radius: 1rem;
|
| padding: 0.8rem;
|
| margin: 1rem 0;
|
| display: flex;
|
| align-items: center;
|
| gap: 12px;
|
| font-weight: 500;
|
| }
|
|
|
|
|
| .stats-section {
|
| padding: 3rem 2rem;
|
| background: #f5f3ff;
|
| }
|
| .stats-grid {
|
| max-width: 1200px;
|
| margin: 0 auto;
|
| display: flex;
|
| justify-content: space-between;
|
| flex-wrap: wrap;
|
| gap: 2rem;
|
| text-align: center;
|
| }
|
| .stat-item h3 {
|
| font-size: 2.8rem;
|
| font-weight: 800;
|
| background: linear-gradient(135deg, #1e1b4b, #4f46e5);
|
| background-clip: text;
|
| -webkit-background-clip: text;
|
| color: transparent;
|
| }
|
|
|
|
|
| .features-section {
|
| padding: 5rem 2rem;
|
| max-width: 1280px;
|
| margin: 0 auto;
|
| }
|
| .section-title {
|
| font-size: 2.5rem;
|
| font-weight: 700;
|
| text-align: center;
|
| letter-spacing: -0.02em;
|
| }
|
| .section-desc {
|
| text-align: center;
|
| color: #4b5563;
|
| margin-bottom: 3rem;
|
| }
|
| .features-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
|
| gap: 2rem;
|
| }
|
| .feature-card {
|
| background: white;
|
| border-radius: 2rem;
|
| padding: 2rem;
|
| transition: 0.25s ease;
|
| box-shadow: 0 8px 20px rgba(0,0,0,0.02);
|
| border: 1px solid #f0f0f0;
|
| }
|
| .feature-card:hover {
|
| transform: translateY(-6px);
|
| border-color: #cbd5ff;
|
| box-shadow: 0 25px 30px -12px rgba(79,70,229,0.12);
|
| }
|
| .feature-icon {
|
| font-size: 2.5rem;
|
| margin-bottom: 1.2rem;
|
| }
|
|
|
|
|
| .testimonial-section {
|
| background: #faf9fe;
|
| padding: 5rem 2rem;
|
| }
|
| .testimonial-grid {
|
| max-width: 1200px;
|
| margin: 0 auto;
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
|
| gap: 2rem;
|
| }
|
| .testimonial {
|
| background: white;
|
| border-radius: 1.5rem;
|
| padding: 2rem;
|
| box-shadow: 0 5px 15px rgba(0,0,0,0.02);
|
| border: 1px solid #ede9fe;
|
| }
|
|
|
|
|
| .cta-lumina {
|
| text-align: center;
|
| padding: 5rem 2rem;
|
| background: linear-gradient(120deg, #f1f0ff, #ffffff);
|
| }
|
|
|
|
|
| .support-banner-custom {
|
| background: linear-gradient(115deg, #FFE6B0, #FFD966);
|
| border-radius: 2rem;
|
| padding: 1.4rem;
|
| margin: 2rem auto;
|
| max-width: 900px;
|
| text-align: center;
|
| box-shadow: 0 10px 20px rgba(0,0,0,0.05);
|
| }
|
|
|
| footer {
|
| background: #111017;
|
| color: #aaa;
|
| padding: 3rem 2rem;
|
| border-top: 1px solid rgba(255,255,255,0.05);
|
| }
|
| .footer-inner {
|
| max-width: 1200px;
|
| margin: auto;
|
| display: flex;
|
| flex-wrap: wrap;
|
| justify-content: space-between;
|
| gap: 2rem;
|
| }
|
| @media (max-width: 800px) {
|
| .nav-links { display: none; }
|
| .mobile-menu { display: block; }
|
| .hero h1 { font-size: 2.8rem; }
|
| .stats-grid { justify-content: center; }
|
| .navbar { width: 95%; padding: 0.6rem 1rem; }
|
| }
|
|
|
| .mobile-sidebar {
|
| position: fixed;
|
| top: 0;
|
| right: -280px;
|
| width: 260px;
|
| height: 100%;
|
| background: rgba(255,255,245,0.98);
|
| backdrop-filter: blur(24px);
|
| z-index: 2000;
|
| transition: 0.3s;
|
| padding: 5rem 1.5rem;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 1.5rem;
|
| box-shadow: -5px 0 20px rgba(0,0,0,0.1);
|
| }
|
| .mobile-sidebar.open { right: 0; }
|
| .close-sidebar {
|
| position: absolute;
|
| top: 1rem;
|
| right: 1rem;
|
| font-size: 1.5rem;
|
| background: none;
|
| border: none;
|
| cursor: pointer;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
|
|
| <nav class="navbar">
|
| <div class="nav-container">
|
| <div class="logo" id="logoHome">
|
| <div class="logo-icon">✨</div>
|
| <span>Lumina Convert</span>
|
| </div>
|
| <div class="nav-links">
|
| <a class="nav-link-home">Home</a>
|
| <a class="nav-link-features">Features</a>
|
| <a class="nav-link-testimonials">Testimonials</a>
|
| <a class="nav-link-pricing">Pricing</a>
|
| <a class="nav-link-contact">Contact</a>
|
| <a class="nav-link-faq">FAQ</a>
|
| <button class="btn-download-nav" id="globalDownload">Download →</button>
|
| </div>
|
| <button class="mobile-menu" id="mobileMenuBtn"><i class="fas fa-bars"></i></button>
|
| </div>
|
| </nav>
|
|
|
| <div class="mobile-sidebar" id="mobileSidebar">
|
| <button class="close-sidebar" id="closeSidebarBtn"><i class="fas fa-times"></i></button>
|
| <a class="m-home">Home</a>
|
| <a class="m-features">Features</a>
|
| <a class="m-testimonials">Testimonials</a>
|
| <a class="m-pricing">Pricing</a>
|
| <a class="m-contact">Contact</a>
|
| <a class="m-faq">FAQ</a>
|
| <button class="btn-primary" id="mobileDownloadBtn" style="background:#4f46e5;">Download Now</button>
|
| </div>
|
|
|
| <main id="dynamicContent"></main>
|
|
|
| <script>
|
| // ---- CONFIGURATION ----
|
| const EXE_URL = "https://huggingface.co/embedingHF/AFC/resolve/main/AllFileConverter_Setup.exe";
|
| const YOUR_EMAIL = "bahaduralimunnabhai@gmail.com";
|
| const WHATSAPP_NUMBER = "923034572298";
|
| const SOCIAL = {
|
| huggingface: "https://huggingface.co/embedingHF",
|
| github: "https://github.com/bahaduralihashmi",
|
| linkedin: "https://www.linkedin.com/in/generatewithali"
|
| };
|
| const FORMSPREE = "https://formspree.io/f/mojrrdov";
|
|
|
| // Helper: send email via Formspree
|
| async function sendEmail(name, email, subject, message) {
|
| const fd = new FormData();
|
| fd.append('name', name);
|
| fd.append('email', email);
|
| fd.append('subject', subject);
|
| fd.append('message', message);
|
| fd.append('_to', YOUR_EMAIL);
|
| fd.append('_replyto', email);
|
| try {
|
| const res = await fetch(FORMSPREE, { method: 'POST', body: fd, headers: { 'Accept': 'application/json' } });
|
| return { ok: res.ok };
|
| } catch(e) { return { ok: false }; }
|
| }
|
|
|
| // Base footer lumina style
|
| const footerHTML = `
|
| <footer>
|
| <div class="footer-inner">
|
| <div><h4 style="color:white;">Lumina Convert</h4><p style="max-width:250px;">Graceful, private, limitless conversion.</p><div style="display:flex; gap:1rem; margin-top:1rem;"><a href="${SOCIAL.huggingface}" target="_blank" style="color:#aaa;">🤗</a><a href="${SOCIAL.github}" target="_blank" style="color:#aaa;"><i class="fab fa-github"></i></a><a href="${SOCIAL.linkedin}" target="_blank" style="color:#aaa;"><i class="fab fa-linkedin"></i></a></div></div>
|
| <div><h4 style="color:white;">Product</h4><a class="f-home" style="display:block; cursor:pointer; margin-bottom:8px;">Home</a><a class="f-features" style="display:block; cursor:pointer; margin-bottom:8px;">Features</a><a class="f-pricing" style="display:block; cursor:pointer; margin-bottom:8px;">Pricing</a><a class="download-trigger-footer" style="cursor:pointer;">Download</a></div>
|
| <div><h4 style="color:white;">Support</h4><a href="mailto:${YOUR_EMAIL}" style="color:#aaa;">Email</a><br><a href="https://wa.me/${WHATSAPP_NUMBER}" target="_blank" style="color:#aaa;">WhatsApp</a><br><a class="f-contact" style="cursor:pointer;">Contact</a></div>
|
| <div><h4 style="color:white;">Legal</h4><span style="color:#aaa;">© 2026 BahadurAli Team</span></div>
|
| </div>
|
| </footer>
|
| `;
|
|
|
| // contact form component (lumine)
|
| const contactFormComponent = `
|
| <div style="max-width: 700px; margin: 4rem auto; background: white; border-radius: 2rem; padding: 2.5rem; box-shadow: 0 20px 35px -10px rgba(0,0,0,0.05);">
|
| <h2 class="section-title" style="text-align:left;">✨ Send us a message</h2>
|
| <form id="lumContactForm">
|
| <div style="margin-bottom:1rem;"><label>Full name</label><input type="text" id="conName" style="width:100%; padding:0.8rem; border-radius:1rem; border:1px solid #e2e8f0; margin-top:5px;"></div>
|
| <div style="margin-bottom:1rem;"><label>Email</label><input type="email" id="conEmail" style="width:100%; padding:0.8rem; border-radius:1rem; border:1px solid #e2e8f0;"></div>
|
| <div style="margin-bottom:1rem;"><label>Subject</label><select id="conSubject" style="width:100%; padding:0.8rem; border-radius:1rem;"><option>Software Support</option><option>Bug Report</option><option>Feature Request</option></select></div>
|
| <div style="margin-bottom:1rem;"><label>Message</label><textarea id="conMsg" rows="4" style="width:100%; border-radius:1rem; border:1px solid #e2e8f0; padding:0.8rem;"></textarea></div>
|
| <button type="submit" class="btn-primary" style="background:#4f46e5;">Send Message</button>
|
| <div id="formRespMsg" style="margin-top:1rem; font-size:0.9rem;"></div>
|
| </form>
|
| </div>
|
| `;
|
|
|
| // Page Contents (Lumina style)
|
| const pages = {
|
| home: `
|
| <div class="hero">
|
| <div class="hero-left">
|
| <div class="hero-badge"><i class="fas fa-sparkle"></i> Lumina release 2026</div>
|
| <h1>Convert anything,<br><span class="gradient-text">endless freedom</span></h1>
|
| <div class="hero-sub">200+ formats. Offline-first. GPU accelerated. No uploads, no limits. Experience conversion as art.</div>
|
| <div class="btn-group"><button class="btn-primary" id="heroDownBtn"><i class="fab fa-windows"></i> Download for Windows</button><button class="btn-outline" id="featureExploreBtn">Explore magic →</button></div>
|
| <div style="margin-top:1.5rem; font-size:0.8rem;">⭐ Trusted by 50K+ creators • 100% private</div>
|
| </div>
|
| <div class="hero-right">
|
| <div class="floating-ui"><div class="mock-list"><i class="fas fa-file-pdf"></i> PDF → DOCX</div><div class="mock-list"><i class="fas fa-image"></i> HEIC → JPG</div><div class="mock-list"><i class="fas fa-video"></i> MKV → MP4</div><div style="text-align:center; font-size:12px;">⚡ batch 500 files</div></div>
|
| </div>
|
| </div>
|
|
|
| <div class="stats-section"><div class="stats-grid"><div class="stat-item"><h3>200+</h3><p>formats</p></div><div class="stat-item"><h3>50K</h3><p>active users</p></div><div class="stat-item"><h3>99.9%</h3><p>success rate</p></div><div class="stat-item"><h3>⚡ GPU</h3><p>accelerated</p></div></div></div>
|
|
|
| <div class="features-section"><h2 class="section-title">Designed for creators</h2><div class="section-desc">Pure performance, luminous interface</div><div class="features-grid">
|
| <div class="feature-card"><div class="feature-icon"><i class="fas fa-infinity"></i></div><h3>200+ formats</h3><p>Images, video, docs, audio, archives — all in one.</p></div>
|
| <div class="feature-card"><div class="feature-icon"><i class="fas fa-layer-group"></i></div><h3>Batch wizard</h3><p>Drag & drop thousands of files, convert in parallel.</p></div>
|
| <div class="feature-card"><div class="feature-icon"><i class="fas fa-laptop-code"></i></div><h3>100% offline</h3><p>Your data never leaves your device. Absolute privacy.</p></div>
|
| <div class="feature-card"><div class="feature-icon"><i class="fas fa-microchip"></i></div><h3>AI enhancement</h3><p>Smart compression & quality optimization.</p></div>
|
| </div></div>
|
|
|
| <div class="support-banner-custom"><h3 style="color:#3b2e1e;">☕ Support Free Software</h3><p style="color:#4a3b22;">This software is 100% free because of supporters like you!</p><div style="display: flex; gap: 12px; justify-content: center; margin: 1rem 0;"><a href="https://www.buymeacoffee.com/BahadurAli" target="_blank" style="background: white; padding: 8px 20px; border-radius: 40px; text-decoration: none; color:#333; font-weight: bold;">Buy Me a Coffee</a><a href="https://www.amazon.com/s?k=external+hard+drive&tag=YOURTAG-20" target="_blank" style="background: white; padding: 8px 20px; border-radius: 40px; text-decoration: none; color:#333; font-weight: bold;">Shop on Amazon</a></div><p style="font-size: 11px;">As an Amazon Associate I earn from qualifying purchases</p></div>
|
|
|
| <div class="testimonial-section"><h2 class="section-title">Voices of light</h2><div class="testimonial-grid"><div class="testimonial"><i class="fas fa-star" style="color:#fbbf24;"></i><p>"Elegant and fast. I moved 2TB of media without a single glitch."</p><strong>— Sheza Abid</strong></div><div class="testimonial"><i class="fas fa-star" style="color:#fbbf24;"></i><p>"Offline and secure, handles RAW photos instantly. My daily driver."</p><strong>— Fatima Akram</strong></div><div class="testimonial"><i class="fas fa-star" style="color:#fbbf24;"></i><p>"The batch conversion saved my team weeks of manual work."</p><strong>— Aiman Imran</strong></div></div></div>
|
| <div class="cta-lumina"><h2 style="font-size:2rem;">Ready to convert like a pro?</h2><button class="btn-primary" id="ctaFinalDownload" style="margin-top:1rem;">Get Lumina Convert <i class="fas fa-arrow-right"></i></button></div>
|
| ${footerHTML}
|
| `,
|
| features: `<div style="padding: 8rem 2rem 4rem; max-width:1200px; margin:0 auto;"><h2 class="section-title">✨ All formats, unlimited power</h2><div class="features-grid" style="margin-top:2rem;"><div class="feature-card"><i class="fas fa-file-image fa-2x"></i><h3>Images</h3><p>JPG, PNG, HEIC, WEBP, GIF, RAW</p></div><div class="feature-card"><i class="fas fa-file-pdf fa-2x"></i><h3>Documents</h3><p>PDF, DOCX, XLSX, PPTX, ODT</p></div><div class="feature-card"><i class="fas fa-video fa-2x"></i><h3>Video</h3><p>MP4, AVI, MKV, MOV, WEBM</p></div><div class="feature-card"><i class="fas fa-headphones fa-2x"></i><h3>Audio</h3><p>MP3, FLAC, WAV, AAC, OGG</p></div></div></div>${footerHTML}`,
|
| testimonials: `<div style="padding: 8rem 2rem 4rem; max-width:1000px; margin:0 auto;"><h2 class="section-title">❤️ Creator testimonials</h2><div class="testimonial-grid"><div class="testimonial"><p>“Finally a converter that values design and speed. Offline mode is a lifesaver.”</p><strong>— Ali Raza</strong></div><div class="testimonial"><p>“Lumina Convert makes file conversion feel premium. Love the AI enhancements.”</p><strong>— Zara Khan</strong></div><div class="testimonial"><p>“No watermarks, no limits — the free version is already best in class.”</p><strong>— Bilal Hashmi</strong></div></div></div>${footerHTML}`,
|
| pricing: `<div style="padding: 8rem 2rem 4rem; max-width:1100px; margin:0 auto;"><h2 class="section-title">💎 Simple, transparent</h2><div class="features-grid"><div class="feature-card"><h3>Free</h3><div style="font-size:2.5rem; font-weight:800;">$0</div><p>200+ formats, batch 50 files, no watermarks</p><button class="btn-primary download-trigger">Download Free</button></div><div class="feature-card" style="border:2px solid #4f46e5;"><h3>Pro <span style="background:#4f46e5; padding:2px 8px; border-radius:20px; font-size:12px;">popular</span></h3><div style="font-size:2.5rem; font-weight:800;">$29</div><p>Unlimited batch, GPU+AI, priority support</p><button class="btn-primary download-trigger">Buy Now</button></div><div class="feature-card"><h3>Enterprise</h3><div style="font-size:1.8rem;">Custom</div><p>Dedicated SLA, custom integration</p><button class="btn-outline">Contact Sales</button></div></div></div>${footerHTML}`,
|
| contact: `<div style="padding-top: 7rem;">${contactFormComponent}</div>${footerHTML}`,
|
| faq: `<div style="padding: 8rem 2rem 4rem; max-width:800px; margin:0 auto;"><h2 class="section-title">❄️ Frequently asked</h2><div style="display:flex; flex-direction:column; gap:1rem;"><div class="glass-panel" style="padding:1.2rem; border-radius:1.5rem;"><h3>Is it truly free?</h3><p>Yes, the free version includes all essential conversions. No limits on file size.</p></div><div class="glass-panel" style="padding:1.2rem;"><h3>Does it work offline?</h3><p>Absolutely, 100% offline after installation. Your privacy is guaranteed.</p></div><div class="glass-panel" style="padding:1.2rem;"><h3>Which OS?</h3><p>Windows 10/11. Mac version coming soon.</p></div></div></div>${footerHTML}`
|
| };
|
|
|
| function renderPage(pageId) {
|
| const content = pages[pageId] || pages.home;
|
| document.getElementById('dynamicContent').innerHTML = content;
|
| window.scrollTo(0,0);
|
| attachGlobalListeners();
|
| if (pageId === 'contact') attachContactFormLogic();
|
| attachDownloadButtons();
|
| attachFooterNavs();
|
| }
|
|
|
| function attachDownloadButtons() {
|
| document.querySelectorAll('.download-trigger, #heroDownBtn, #ctaFinalDownload, #globalDownload, #mobileDownloadBtn').forEach(btn => {
|
| if(btn) btn.addEventListener('click', (e) => { e.preventDefault(); window.location.href = EXE_URL; });
|
| });
|
| }
|
| function attachFooterNavs() {
|
| document.querySelector('.f-home')?.addEventListener('click', ()=>renderPage('home'));
|
| document.querySelector('.f-features')?.addEventListener('click', ()=>renderPage('features'));
|
| document.querySelector('.f-pricing')?.addEventListener('click', ()=>renderPage('pricing'));
|
| document.querySelector('.f-contact')?.addEventListener('click', ()=>renderPage('contact'));
|
| document.querySelector('.download-trigger-footer')?.addEventListener('click', ()=>window.location.href=EXE_URL);
|
| document.querySelectorAll('.nav-link-home, .m-home').forEach(el => el?.addEventListener('click', ()=>renderPage('home')));
|
| document.querySelectorAll('.nav-link-features, .m-features').forEach(el => el?.addEventListener('click', ()=>renderPage('features')));
|
| document.querySelectorAll('.nav-link-testimonials, .m-testimonials').forEach(el => el?.addEventListener('click', ()=>renderPage('testimonials')));
|
| document.querySelectorAll('.nav-link-pricing, .m-pricing').forEach(el => el?.addEventListener('click', ()=>renderPage('pricing')));
|
| document.querySelectorAll('.nav-link-contact, .m-contact').forEach(el => el?.addEventListener('click', ()=>renderPage('contact')));
|
| document.querySelectorAll('.nav-link-faq, .m-faq').forEach(el => el?.addEventListener('click', ()=>renderPage('faq')));
|
| }
|
|
|
| function attachContactFormLogic() {
|
| const form = document.getElementById('lumContactForm');
|
| if(form) {
|
| form.onsubmit = async (e) => {
|
| e.preventDefault();
|
| const name = document.getElementById('conName').value;
|
| const email = document.getElementById('conEmail').value;
|
| const subject = document.getElementById('conSubject').value;
|
| const msg = document.getElementById('conMsg').value;
|
| const respDiv = document.getElementById('formRespMsg');
|
| respDiv.innerText = 'Sending...';
|
| const res = await sendEmail(name, email, subject, msg);
|
| if(res.ok) { respDiv.innerText = '✓ Message sent! we’ll reply soon.'; form.reset(); }
|
| else { respDiv.innerText = '❌ Error, please email directly.'; }
|
| };
|
| }
|
| }
|
|
|
| function attachGlobalListeners() {
|
| const exploreBtn = document.getElementById('featureExploreBtn');
|
| if(exploreBtn) exploreBtn.onclick = () => renderPage('features');
|
| const logo = document.getElementById('logoHome');
|
| if(logo) logo.onclick = () => renderPage('home');
|
| // mobile sidebar
|
| const mobileBtn = document.getElementById('mobileMenuBtn');
|
| const sidebar = document.getElementById('mobileSidebar');
|
| const closeSide = document.getElementById('closeSidebarBtn');
|
| if(mobileBtn) mobileBtn.onclick = () => sidebar.classList.add('open');
|
| if(closeSide) closeSide.onclick = () => sidebar.classList.remove('open');
|
| document.addEventListener('click', (e) => {
|
| if(sidebar?.classList.contains('open') && !sidebar.contains(e.target) && !mobileBtn?.contains(e.target))
|
| sidebar.classList.remove('open');
|
| });
|
| document.getElementById('globalDownload')?.addEventListener('click', () => window.location.href=EXE_URL);
|
| document.getElementById('mobileDownloadBtn')?.addEventListener('click', () => window.location.href=EXE_URL);
|
| }
|
|
|
| // initial render
|
| renderPage('home');
|
| </script>
|
| </body>
|
| </html> |
