Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DPIcon - Transform Your Ideas into Stunning Visuals</title> | |
| <link rel="stylesheet" href="css/style.css"> | |
| <!-- Firebase SDK --> | |
| <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script> | |
| </head> | |
| <body class="index-page"> | |
| <div class="container"> | |
| <!-- Sidebar --> | |
| <nav class="sidebar"> | |
| <button class="close-menu md:hidden text-white text-2xl m-0 p-2 border-none bg-transparent cursor-pointer"> | |
| ✕ | |
| </button> | |
| <div class="sidebar-header"> | |
| <svg width="25" height="30" viewBox="0 0 25 30" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <g clip-path="url(#clip0_1_917)"> | |
| <!-- SVG Path Placeholder --> | |
| </g> | |
| <defs> | |
| <clipPath id="clip0_1_917"> | |
| <rect width="25" height="29.59" fill="white" transform="translate(0 0.389893)"/> | |
| </clipPath> | |
| </defs> | |
| </svg> | |
| <span>dpicon</span> | |
| </div> | |
| <div class="nav-items"> | |
| <a href="index.html" class="nav-item active"> | |
| <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- SVG Path Placeholder --> | |
| </svg> | |
| <span>Home</span> | |
| <div class="indicator"> | |
| <div></div> | |
| </div> | |
| </a> | |
| <a href="face-fusion.html" class="nav-item"> | |
| <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- SVG Path Placeholder --> | |
| </svg> | |
| <span>Face Fusion</span> | |
| </a> | |
| <a href="text-to-image.html" class="nav-item"> | |
| <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- SVG Path Placeholder --> | |
| </svg> | |
| <span>Text to Image</span> | |
| </a> | |
| <a href="community.html" class="nav-item"> | |
| <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- SVG Path Placeholder --> | |
| </svg> | |
| <span>Community</span> | |
| </a> | |
| <a href="sponsor.html" class="nav-item"> | |
| <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- SVG Path Placeholder --> | |
| </svg> | |
| <span>Sponsor</span> | |
| </a> | |
| <a href="founder.html" class="nav-item"> | |
| <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- SVG Path Placeholder --> | |
| </svg> | |
| <span>Founder</span> | |
| </a> | |
| </div> | |
| <div class="footer"> | |
| <div class="powered-by">Powered by</div> | |
| <img src="public/images/powered-by-logo.jpg" alt="Powered by logo"> | |
| <div class="copyright"> | |
| <span>© Copyright</span> | |
| <span class="year">2025</span> | |
| <span>by DPIcon</span> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <!-- Top Bar --> | |
| <header class="top-bar"> | |
| <button class="top-bar__hamburger md:hidden"> | |
| ☰ | |
| </button> | |
| <div class="top-bar__content"> | |
| <span class="top-bar__credits" id="credits-display">50</span> | |
| <button class="top-bar__upgrade" id="upgrade-button">Upgrade</button> | |
| <span class="top-bar__welcome" id="welcome-message">Welcome Guest</span> | |
| <div class="top-bar__avatar"></div> | |
| </div> | |
| </header> | |
| <!-- Connect with Google Button --> | |
| <div class="box-border flex justify-center items-center mb-12 m-0 p-0 w-full"> | |
| <button id="google-signin-button" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] transition-transform transform hover:scale-105 font-medium text-lg flex items-center"> | |
| <svg class="mr-2" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0ZM12 2C17.514 2 22 6.486 22 12C22 17.514 17.514 22 12 22C6.486 22 2 17.514 2 12C2 6.486 6.486 2 12 2ZM12 4C8.962 4 6.5 6.462 6.5 9.5C6.5 12.538 8.962 15 12 15C15.038 15 17.5 12.538 17.5 9.5C17.5 6.462 15.038 4 12 4ZM12 6C13.933 6 15.5 7.567 15.5 9.5C15.5 11.433 13.933 13 12 13C10.067 13 8.5 11.433 8.5 9.5C8.5 7.567 10.067 6 12 6ZM18.5 7.5C18.5 8.328 17.828 9 17 9C16.172 9 15.5 8.328 15.5 7.5C15.5 6.672 16.172 6 17 6C17.828 6 18.5 6.672 18.5 7.5Z" fill="white"/> | |
| </svg> | |
| Connect with Google | |
| <span id="google-signin-spinner" class="ml-2 hidden">⏳</span> | |
| </button> | |
| </div> | |
| <!-- Hero Section --> | |
| <div class="hero"> | |
| <video autoplay muted loop playsinline> | |
| <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| <h1>Transform Your Ideas into Stunning Visuals</h1> | |
| </div> | |
| <!-- Feature Cards Section --> | |
| <div class="feature-cards"> | |
| <div class="feature-card"> | |
| <div class="highlight"></div> | |
| <div class="content"> | |
| <div class="icon"> | |
| <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- SVG Path Placeholder --> | |
| </svg> | |
| </div> | |
| <span>Face Fusion</span> | |
| </div> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="highlight"></div> | |
| <div class="content"> | |
| <div class="icon"> | |
| <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- SVG Path Placeholder --> | |
| </svg> | |
| </div> | |
| <span>Text to Image</span> | |
| </div> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="highlight"></div> | |
| <div class="content"> | |
| <div class="icon"> | |
| <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- SVG Path Placeholder --> | |
| </svg> | |
| </div> | |
| <span>Community</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Why Section --> | |
| <div class="why-section"> | |
| <h2>Why DPIcon is Your Creative Rocket Fuel</h2> | |
| <div class="bullet-points"> | |
| <div class="bullet-point"> | |
| <div class="bullet">•</div> | |
| <div class="text">AI Alchemy: Turn whispers of thought into vivid masterpieces with next-gen tech. No Rules</div> | |
| </div> | |
| <div class="bullet-point"> | |
| <div class="bullet">•</div> | |
| <div class="text">Just Wonders: Easy enough for dreamers, powerful enough for visionaries.</div> | |
| </div> | |
| <div class="bullet-point"> | |
| <div class="bullet">•</div> | |
| <div class="text">Infinite Realms: Text-to-image wizardry or face-swapping adventures—your choice.</div> | |
| </div> | |
| <div class="bullet-point"> | |
| <div class="bullet">•</div> | |
| <div class="text">Blink-and-Done Speed: Stellar results faster than a meteor shower.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Content Sections --> | |
| <div class="content-section"> | |
| <h2>Transform Your Ideas into Stunning Visuals</h2> | |
| <img src="public/images/transform-ideas-image.jpg" alt="Transform Your Ideas into Stunning Visuals"> | |
| <div class="divider"></div> | |
| <p>Step into a world where words weave wonders and faces find new fates. DPIcon is your portal to boundless creativity, powered by cutting-edge AI. From conjuring vivid scenes with a single sentence to reimagining your face in fantastical realms, we turn your wildest whims into breathtaking visuals. Dare to dream – DPIcon makes it real.</p> | |
| </div> | |
| <div class="content-section"> | |
| <h2>The Spark of a New Era</h2> | |
| <img src="public/images/spark-era-image.jpg" alt="The Spark of a New Era"> | |
| <div class="divider"></div> | |
| <p>At DPIcon, we believe creativity shouldn't be confined. We're pioneers at the crossroads of art and technology, crafting tools that let you sculpt the impossible. Whether you're an artist seeking a muse, a visionary with a story, or a soul craving something new, DPIcon is your playground of endless potential.</p> | |
| </div> | |
| <div class="content-section"> | |
| <h2>What Sets Us Apart</h2> | |
| <img src="public/images/sets-apart-image.jpg" alt="What Sets Us Apart"> | |
| <div class="divider"></div> | |
| <p>AI Sorcery: Advanced algorithms that turn imagination into masterpieces. No Limits, Just Magic: From text to art, face to fantasy – explore it all. Instant Alchemy: Conjure creations faster than a lightning strike. Yours to Command: Simple tools, extraordinary results – no wizardry degree required.</p> | |
| </div> | |
| <!-- Meet Our Founder CTA Button --> | |
| <div class="box-border flex justify-center items-center mb-6 m-0 p-0 w-full"> | |
| <a href="founder.html" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] transition-colors font-medium text-lg"> | |
| Meet Our Founder | |
| </a> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Upgrade Popup --> | |
| <div id="upgrade-popup" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden"> | |
| <div class="bg-gradient-to-br from-[#1a1a1a] to-[#2a2a2a] rounded-lg p-8 max-w-4xl w-full mx-4 popup-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-[32px] text-white">Choose Your Plan</h2> | |
| <button id="close-popup" class="text-white text-2xl">×</button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Basic Free Plan --> | |
| <div class="plan-card p-6 rounded-lg text-center"> | |
| <h3 class="text-[24px] text-white mb-4">Basic Free</h3> | |
| <p class="text-white text-lg mb-4">50 Credits / Month</p> | |
| <p class="text-white text-2xl font-bold mb-4">$0</p> | |
| <button id="select-basic" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] font-medium text-lg">Select Plan</button> | |
| </div> | |
| <!-- Pro Plan --> | |
| <div class="plan-card p-6 rounded-lg text-center"> | |
| <h3 class="text-[24px] text-white mb-4">Pro</h3> | |
| <p class="text-white text-lg mb-4">Unlimited for 1 Month</p> | |
| <p class="text-white text-2xl font-bold mb-4">$80</p> | |
| <button id="select-pro" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] font-medium text-lg">Select Plan</button> | |
| </div> | |
| <!-- Premium Plan --> | |
| <div class="plan-card p-6 rounded-lg text-center"> | |
| <h3 class="text-[24px] text-white mb-4">Premium</h3> | |
| <p class="text-white text-lg mb-4">Unlimited for 1 Year</p> | |
| <p class="text-white text-2xl font-bold mb-4">$900</p> | |
| <button id="select-premium" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] font-medium text-lg">Select Plan</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="js/firebase.js"></script> | |
| <script src="js/script.js"></script> | |
| </body> | |
| </html> |