Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DPIcon - Face Fusion</title> | |
| <link rel="stylesheet" href="css/style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Sidebar --> | |
| <nav class="sidebar"> | |
| <!-- Close Button (Visible on Mobile) --> | |
| <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"> | |
| <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 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>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> | |
| </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">50</span> | |
| <button class="top-bar__upgrade">Upgrade</button> | |
| <span class="top-bar__welcome">Welcome Akash</span> | |
| <div class="top-bar__avatar"></div> | |
| </div> | |
| </header> | |
| <!-- Image Generation Section --> | |
| <section class="image-generation"> | |
| <div class="generation-container"> | |
| <!-- Left Column: Upload, Prompt, and Button --> | |
| <div class="generation-inputs"> | |
| <div class="upload-box"> | |
| <label for="imageUpload" class="upload-label"> | |
| Upload an Image | |
| </label> | |
| <input | |
| type="file" | |
| id="imageUpload" | |
| accept="image/*" | |
| onchange="handleImageUpload(event)" | |
| /> | |
| </div> | |
| <div class="prompt-box"> | |
| <label for="generationPrompt" class="prompt-label"> | |
| Describe Your Vision | |
| </label> | |
| <textarea | |
| id="generationPrompt" | |
| placeholder="e.g., A cyberpunk samurai in a neon city" | |
| rows="3" | |
| ></textarea> | |
| </div> | |
| <button class="generate-btn" onclick="generateImage()"> | |
| Generate Image | |
| </button> | |
| </div> | |
| <!-- Right Column: Generated Image Preview --> | |
| <div class="generation-preview"> | |
| <div class="preview-box" id="previewBox"> | |
| <span class="preview-placeholder"> | |
| Your generated image will appear here | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Introduction Section --> | |
| <div class="box-border m-0 px-12 py-0"> | |
| <h1 class="box-border text-[32px] mb-6 m-0 p-0">Rewrite Realities</h1> | |
| <div class="box-border text-base leading-[1.4] mb-12 m-0 p-0"> | |
| What if your selfie became a vampire lord atop a glowing skyscraper? With DPIcon's Image to Image Face Swap, | |
| it's not "what if"—it's "watch this." Upload a photo, toss in a prompt, and our AI plucks your face, planting | |
| it into a whole new universe. Buckle up for a wild ride! | |
| </div> | |
| </div> | |
| <!-- Image Comparison Section --> | |
| <div class="image-comparison box-border flex gap-16 m-0 p-16 rounded-3xl max-md:flex-col max-md:p-8 max-sm:p-4"> | |
| <div class="comparison-container box-border relative w-[484px] h-[397px] m-0 p-0"> | |
| <img | |
| src="public/images/before-image.jpg" | |
| alt="Before" | |
| class="box-border absolute w-full h-full object-cover m-0 p-0" | |
| /> | |
| <img | |
| src="public/images/after-image.jpg" | |
| alt="After" | |
| class="box-border absolute w-full h-full object-cover m-0 p-0 comparison-after" | |
| /> | |
| <div class="box-border absolute w-1 h-full -translate-x-2/4 cursor-ew-resize bg-[rgba(255,255,255,0.8)] m-0 p-0 comparison-divider"></div> | |
| <div | |
| class="box-border absolute -translate-x-2/4 -translate-y-2/4 w-9 h-9 text-[#666] font-bold text-[21px] shadow-[0_2px_8px_rgba(0,0,0,0.3)] bg-white m-0 p-0 rounded-[50%] flex items-center justify-center cursor-ew-resize comparison-handle" | |
| > | |
| ↔ | |
| </div> | |
| </div> | |
| <div class="box-border flex-1 text-[#999] m-0 p-0 max-md:p-5"> | |
| <div class="box-border text-[19px] mb-5 m-0 p-0"> | |
| Fast & Free: Get your transparent images in just seconds without any cost. | |
| </div> | |
| <ul class="box-border m-0 p-0 list-none"> | |
| <li class="box-border text-[19px] mb-5 m-0 p-0"> | |
| <strong class="box-border m-0 p-0">No Signup Needed:</strong> | |
| <span> Start editing right away without creating an account.</span> | |
| </li> | |
| <li class="box-border text-[19px] mb-5 m-0 p-0"> | |
| <strong class="box-border m-0 p-0">High-Quality Results:</strong> | |
| <span> Download high-resolution images perfect for social media, websites, or e-commerce.</span> | |
| </li> | |
| <li class="box-border text-[19px] mb-5 m-0 p-0"> | |
| <strong class="box-border m-0 p-0">User-Friendly Interface:</strong> | |
| <span> Simple drag-and-drop functionality for seamless image editing.</span> | |
| </li> | |
| <li class="box-border text-[19px] mb-5 m-0 p-0"> | |
| <strong class="box-border m-0 p-0">Unlimited Usage:</strong> | |
| <span> No restrictions on the number of images you can process.</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Showcase Image --> | |
| <div class="box-border m-0 px-4 py-20"> | |
| <img src="public/images/showcase-image.jpg" alt="Showcase" class="box-border w-full m-0 p-0 rounded-3xl" /> | |
| </div> | |
| <!-- Features Section --> | |
| <section class="box-border m-0 px-12 py-0 max-sm:px-5 max-sm:py-0"> | |
| <div class="box-border mb-12 m-0 p-0"> | |
| <h2 class="box-border text-[32px] mb-6 m-0 p-0">How to Warp Reality</h2> | |
| <div class="box-border text-base leading-[1.4] m-0 p-0"> | |
| <span>Drop Your Mug: Pick a photo—your face, your cat's, whatever sparks joy.</span><br /> | |
| <span>Dream Big: Prompt us—"a cyberpunk samurai" or "a mermaid in space."</span><br /> | |
| <span>Behold the Mashup: Our AI fuses your face into a stunning new scene.</span><br /> | |
| <span>Claim Your Glory: Download and flaunt your interdimensional doppelgänger.</span> | |
| </div> | |
| </div> | |
| <div class="box-border mb-12 m-0 p-0"> | |
| <h2 class="box-border text-[32px] mb-6 m-0 p-0">Why DPIcon's Face Swap is a Game-Changer</h2> | |
| <div class="box-border text-base leading-[1.4] m-0 p-0"> | |
| <span>Freaky Precision: Faces fit like they were born there—zero awkward vibes.</span><br /> | |
| <span>Epic Adventures: From medieval quests to alien discos, you name it.</span><br /> | |
| <span>SEO Stardust: Unique images to rocket your content to the top.</span><br /> | |
| <span>Foolproof Fun: So easy, even your grandma could swap into a ninja.</span> | |
| </div> | |
| </div> | |
| <div class="box-border mb-12 m-0 p-0"> | |
| <h2 class="box-border text-[32px] mb-6 m-0 p-0">What Sets Us Apart</h2> | |
| <div class="box-border text-base leading-[1.4] m-0 p-0"> | |
| 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. | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="box-border text-center m-0 px-12 py-6 max-sm:px-5 max-sm:py-6"> | |
| <div class="box-border flex gap-2.5 justify-center mb-10 m-0 p-0"> | |
| <a href="#" class="box-border w-10 h-10 flex items-center justify-center bg-black rounded hover:bg-[#111] transition-colors"> | |
| <img src="public/images/twitter-icon.png" alt="Twitter icon" class="w-5 h-5" /> | |
| </a> | |
| <a href="#" class="box-border w-10 h-10 flex items-center justify-center bg-black rounded hover:bg-[#111] transition-colors"> | |
| <img src="public/images/facebook-icon.png" alt="Facebook icon" class="w-5 h-5" /> | |
| </a> | |
| <a href="#" class="box-border w-10 h-10 flex items-center justify-center bg-black rounded hover:bg-[#111] transition-colors"> | |
| <img src="public/images/instagram-icon.png" alt="Instagram icon" class="w-5 h-5" /> | |
| </a> | |
| </div> | |
| <div class="box-border flex gap-4 justify-center text-xs text-white m-0 p-0"> | |
| <span>© Copyright</span> | |
| <span>2025</span> | |
| <span>by</span> | |
| <span>TRAR</span> | |
| <span>|</span> | |
| <a href="#" class="text-white no-underline hover:underline">Privacy Policy</a> | |
| <a href="#" class="text-white no-underline hover:underline">Cookie Policy</a> | |
| </div> | |
| </footer> | |
| </main> | |
| </div> | |
| <script src="js/script.js"></script> | |
| </body> | |
| </html> |