Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>REDAIGC.com - AI-Powered Creative Design</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary: #f43f5e; | |
| --dark: #1e293b; | |
| --light: #f8fafc; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f1f5f9; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .ai-generator-container { | |
| background: rgba(255, 255, 255, 0.2); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .prompt-input:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); | |
| } | |
| .generated-image { | |
| transition: all 0.5s ease; | |
| opacity: 0; | |
| } | |
| .generated-image.show { | |
| opacity: 1; | |
| } | |
| .loading-dots { | |
| display: inline-flex; | |
| align-items: center; | |
| } | |
| .loading-dots span { | |
| width: 8px; | |
| height: 8px; | |
| margin: 0 2px; | |
| background-color: currentColor; | |
| border-radius: 50%; | |
| display: inline-block; | |
| animation: bounce 1.4s infinite ease-in-out both; | |
| } | |
| .loading-dots span:nth-child(1) { | |
| animation-delay: -0.32s; | |
| } | |
| .loading-dots span:nth-child(2) { | |
| animation-delay: -0.16s; | |
| } | |
| @keyframes bounce { | |
| 0%, 80%, 100% { | |
| transform: scale(0); | |
| } 40% { | |
| transform: scale(1); | |
| } | |
| } | |
| .floating-shapes { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| top: 0; | |
| left: 0; | |
| z-index: -1; | |
| } | |
| .shape { | |
| position: absolute; | |
| opacity: 0.1; | |
| border-radius: 50%; | |
| filter: blur(40px); | |
| } | |
| .shape-1 { | |
| width: 300px; | |
| height: 300px; | |
| background: var(--primary); | |
| top: 10%; | |
| left: 10%; | |
| animation: float 15s ease-in-out infinite; | |
| } | |
| .shape-2 { | |
| width: 200px; | |
| height: 200px; | |
| background: var(--secondary); | |
| top: 60%; | |
| left: 70%; | |
| animation: float 12s ease-in-out infinite reverse; | |
| } | |
| .shape-3 { | |
| width: 250px; | |
| height: 250px; | |
| background: #10b981; | |
| top: 30%; | |
| left: 50%; | |
| animation: float 18s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translate(0, 0) rotate(0deg); | |
| } | |
| 50% { | |
| transform: translate(50px, 50px) rotate(180deg); | |
| } | |
| 100% { | |
| transform: translate(0, 0) rotate(360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Floating background shapes --> | |
| <div class="floating-shapes"> | |
| <div class="shape shape-1"></div> | |
| <div class="shape shape-2"></div> | |
| <div class="shape shape-3"></div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl"><img src="METAFILM.png"></div> | |
| <span class="ml-2 text-xl font-bold text-gray-800">RED|<span class="ml-2 text-xl font-light text-gray-800">AIGC</span></span> | |
| </div> | |
| <div class="hidden md:ml-10 md:flex md:space-x-8"> | |
| <a href="#" class="text-indigo-600 border-indigo-500 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Templates</a> | |
| <a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Gallery</a> | |
| <a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Pricing</a> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-4 md:flex md:items-center md:space-x-4"> | |
| <a href="redchina.html" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-indigo-600">中文版</a> | |
| <button class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-indigo-600">Sign in</button> | |
| <button class="px-4 py-2 rounded-md text-sm font-medium text-white gradient-bg hover:opacity-90 transition">Get Started</button> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32"> | |
| <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28"> | |
| <div class="sm:text-center lg:text-left"> | |
| <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl"> | |
| <span class="block">Create Stunning Designs</span> | |
| <span class="block text-indigo-600">with AI Power</span> | |
| </h1> | |
| <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| REDAIGC transforms your ideas into beautiful visuals in seconds. No design skills needed - just describe what you want and let our AI do the magic. | |
| </p> | |
| <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> | |
| <div class="rounded-md shadow"> | |
| <a href="#generator" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white gradient-bg hover:opacity-90 md:py-4 md:text-lg md:px-10"> | |
| Try It Now | |
| </a> | |
| </div> | |
| <div class="mt-3 sm:mt-0 sm:ml-3"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10"> | |
| <i class="fas fa-play-circle mr-2"></i> Watch Demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <div class="lg:absolute lg:inset-y-0 lg:left-1/2 lg:w-1/3 hidden lg:block"> | |
| <div class="h-full w-full flex items-center justify-center p-10"> | |
| <div class="relative w-full h-96 rounded-2xl overflow-hidden shadow-xl"> | |
| <div class="absolute inset-0 gradient-bg opacity-90"></div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="text-white text-center px-10"> | |
| <i class="fas fa-magic text-5xl mb-4"></i> | |
| <h3 class="text-2xl font-bold mb-2">AI-Powered Creativity</h3> | |
| <p class="opacity-90">Generate logos, illustrations, social media posts, and more with simple text prompts.</p> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 bg-white/20 backdrop-blur-sm text-white text-sm"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-8 w-8 rounded-full" src="mini.png" alt="AiARTiST"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">AiARTiST</p> | |
| <p class="text-xs opacity-80">Manager of REDAIGC</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute top-4 right-4 bg-black/50 text-white text-xs px-2 py-1 rounded"> | |
| REDAIGC.com | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Everything you need to create amazing designs | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Our AI understands your vision and brings it to life with stunning visuals. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Feature 1 --> | |
| <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 border border-gray-100"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Instant Generation</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Get high-quality designs in seconds. No waiting, no complicated tools - just describe what you want. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 border border-gray-100"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-pink-500 text-white"> | |
| <i class="fas fa-palette"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Multiple Styles</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Choose from various art styles - photorealistic, cartoon, watercolor, cyberpunk, and more. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 border border-gray-100"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> | |
| <i class="fas fa-edit"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Easy Editing</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Refine your creations with simple text commands. Change colors, add elements, or adjust composition. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 border border-gray-100"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-shapes"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Templates Library</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Start with professionally designed templates for social media, ads, logos, and presentations. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 border border-gray-100"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white"> | |
| <i class="fas fa-file-download"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="text-lg font-medium text-gray-900">High-Res Export</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Download your creations in multiple formats (PNG, JPG, SVG) at resolutions up to 4K. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 border border-gray-100"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Team Collaboration</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Share projects with your team, leave feedback, and collaborate in real-time on designs. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Generator Section --> | |
| <div id="generator" class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| AI Design Generator | |
| </h2> | |
| <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4"> | |
| Try it yourself - describe what you want to create | |
| </p> | |
| </div> | |
| <div class="mt-12"> | |
| <div class="ai-generator-container rounded-2xl p-6 max-w-4xl mx-auto"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Input Section --> | |
| <div class="bg-white rounded-xl p-6 shadow-sm"> | |
| <div class="mb-4"> | |
| <label for="prompt" class="block text-sm font-medium text-gray-700">Describe your design</label> | |
| <div class="mt-1 relative rounded-md shadow-sm"> | |
| <textarea id="prompt" rows="4" class="prompt-input block w-full p-3 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="e.g. A futuristic cityscape at night with neon lights and flying cars, cyberpunk style"></textarea> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Style</label> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button class="style-option py-2 px-3 border rounded-md text-sm font-medium bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500" data-style="realistic"> | |
| <i class="fas fa-camera mr-1"></i> Realistic | |
| </button> | |
| <button class="style-option py-2 px-3 border rounded-md text-sm font-medium bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500" data-style="cartoon"> | |
| <i class="fas fa-paint-brush mr-1"></i> Cartoon | |
| </button> | |
| <button class="style-option py-2 px-3 border rounded-md text-sm font-medium bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500" data-style="minimal"> | |
| <i class="fas fa-shapes mr-1"></i> Minimal | |
| </button> | |
| <button class="style-option py-2 px-3 border rounded-md text-sm font-medium bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500" data-style="watercolor"> | |
| <i class="fas fa-water mr-1"></i> Watercolor | |
| </button> | |
| <button class="style-option py-2 px-3 border rounded-md text-sm font-medium bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500" data-style="cyberpunk"> | |
| <i class="fas fa-robot mr-1"></i> Cyberpunk | |
| </button> | |
| <button class="style-option py-2 px-3 border rounded-md text-sm font-medium bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500" data-style="fantasy"> | |
| <i class="fas fa-dragon mr-1"></i> Fantasy | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Aspect Ratio</label> | |
| <div class="flex space-x-2"> | |
| <button class="aspect-option py-2 px-3 border rounded-md text-sm font-medium bg-indigo-100 text-indigo-700 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-indigo-500" data-ratio="1:1"> | |
| 1:1 | |
| </button> | |
| <button class="aspect-option py-2 px-3 border rounded-md text-sm font-medium bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500" data-ratio="16:9"> | |
| 16:9 | |
| </button> | |
| <button class="aspect-option py-2 px-3 border rounded-md text-sm font-medium bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500" data-ratio="9:16"> | |
| 9:16 | |
| </button> | |
| <button class="aspect-option py-2 px-3 border rounded-md text-sm font-medium bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500" data-ratio="4:3"> | |
| 4:3 | |
| </button> | |
| </div> | |
| </div> | |
| <button id="generate-btn" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white gradient-bg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Generate Design | |
| </button> | |
| </div> | |
| <!-- Output Section --> | |
| <div class="bg-white rounded-xl p-6 shadow-sm flex flex-col"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Your Creation</h3> | |
| <div class="flex space-x-2"> | |
| <button id="download-btn" class="hidden p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button id="refresh-btn" class="hidden p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700"> | |
| <i class="fas fa-sync-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1 flex items-center justify-center bg-gray-50 rounded-lg overflow-hidden relative"> | |
| <div id="placeholder" class="text-center p-6"> | |
| <i class="fas fa-image text-4xl text-gray-300 mb-3"></i> | |
| <p class="text-gray-500">Your generated design will appear here</p> | |
| </div> | |
| <div id="loading" class="absolute inset-0 bg-white/80 flex items-center justify-center hidden"> | |
| <div class="text-center"> | |
| <div class="loading-dots text-indigo-600 mb-4"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <p class="text-gray-600">Generating your design...</p> | |
| <p class="text-sm text-gray-500 mt-1">This usually takes 10-20 seconds</p> | |
| </div> | |
| </div> | |
| <img id="generated-image" src="" alt="Generated design" class="generated-image w-full h-full object-cover hidden"> | |
| </div> | |
| <div id="variations" class="mt-4 grid grid-cols-4 gap-2 hidden"> | |
| <button class="variation-btn h-16 bg-gray-100 rounded-md overflow-hidden"> | |
| <img src="" alt="Variation 1" class="w-full h-full object-cover"> | |
| </button> | |
| <button class="variation-btn h-16 bg-gray-100 rounded-md overflow-hidden"> | |
| <img src="" alt="Variation 2" class="w-full h-full object-cover"> | |
| </button> | |
| <button class="variation-btn h-16 bg-gray-100 rounded-md overflow-hidden"> | |
| <img src="" alt="Variation 3" class="w-full h-full object-cover"> | |
| </button> | |
| <button class="variation-btn h-16 bg-gray-100 rounded-md overflow-hidden"> | |
| <img src="" alt="Variation 4" class="w-full h-full object-cover"> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Section --> | |
| <div class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Inspiration Gallery | |
| </h2> | |
| <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4"> | |
| See what others have created with REDAIGC | |
| </p> | |
| </div> | |
| <div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Gallery Item 1 --> | |
| <div class="card-hover group relative bg-gray-50 rounded-xl overflow-hidden shadow-sm"> | |
| <img src="65740049.png" alt="Japanese woman" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <p class="text-white font-medium">"A detailed and highly realistic portrait photo of a young, beautiful Japanese woman."</p> | |
| <p class="text-white/80 text-sm mt-1">Created by @digitaldreamer</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 2 --> | |
| <div class="card-hover group relative bg-gray-50 rounded-xl overflow-hidden shadow-sm"> | |
| <img src="65649704.png" alt="Buddha statue" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <p class="text-white font-medium">"A close-up of an old stone Buddha statue decked out with green ivy leaves."</p> | |
| <p class="text-white/80 text-sm mt-1">Created by @artlover</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 3 --> | |
| <div class="card-hover group relative bg-gray-50 rounded-xl overflow-hidden shadow-sm"> | |
| <img src="65651273.png" alt="Mouse baker" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <p class="text-white font-medium">"a small mouse dressed as a baker, surrounded by an assortment of sweet treats."</p> | |
| <p class="text-white/80 text-sm mt-1">Created by @creative_mind</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 4 --> | |
| <div class="card-hover group relative bg-gray-50 rounded-xl overflow-hidden shadow-sm"> | |
| <img src="65656727.png" alt="Tabby Cat" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <p class="text-white font-medium">"Tabby Cat,A tabby cat is driving with its hands on the steering wheel"</p> | |
| <p class="text-white/80 text-sm mt-1">Created by @artificial_artist</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 5 --> | |
| <div class="card-hover group relative bg-gray-50 rounded-xl overflow-hidden shadow-sm"> | |
| <img src="65548518.png" alt="vibrant red camellia flowers" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <p class="text-white font-medium">"The image depicts a person surrounded by vibrant red camellia flowers. "</p> | |
| <p class="text-white/80 text-sm mt-1">Created by @design_ai</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 6 --> | |
| <div class="card-hover group relative bg-gray-50 rounded-xl overflow-hidden shadow-sm"> | |
| <img src="65186070.png" alt="traditional Chinese hanbok" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"> | |
| <div> | |
| <p class="text-white font-medium">"An Asian woman wearing a traditional Chinese hanbok stands proudly in a vibrant autumn forest."</p> | |
| <p class="text-white/80 text-sm mt-1">Created by @brand_builder</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 text-center"> | |
| <button class="px-6 py-3 border border-gray-300 rounded-md text-base font-medium text-gray-700 bg-white hover:bg-gray-50"> | |
| Browse More Creations | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="py-16 bg-indigo-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| What Our Users Say | |
| </h2> | |
| <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4"> | |
| Join thousands of creators who are transforming their workflow | |
| </p> | |
| </div> | |
| <div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-lg font-medium text-gray-900">Sarah Johnson</div> | |
| <div class="text-indigo-600">Graphic Designer</div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600"> | |
| "REDAIGC has completely transformed how I work. I can now create concepts for clients in minutes instead of hours. The quality is professional and the time saved is incredible." | |
| </p> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-lg font-medium text-gray-900">Michael Chen</div> | |
| <div class="text-indigo-600">Marketing Director</div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600"> | |
| "Our social media engagement has doubled since we started using REDAIGC for our content creation. The ability to generate on-brand visuals so quickly is a game-changer." | |
| </p> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-lg font-medium text-gray-900">David Wilson</div> | |
| <div class="text-indigo-600">Startup Founder</div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600"> | |
| "As a non-designer, REDAIGC has been invaluable for creating professional-looking assets for my startup. The logo generator alone saved us thousands in design fees." | |
| </p> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-white"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="gradient-bg rounded-2xl px-6 py-16 sm:p-16"> | |
| <div class="max-w-xl mx-auto lg:max-w-none lg:flex lg:items-center lg:justify-between"> | |
| <div> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-white"> | |
| Ready to unleash your creativity? | |
| </h2> | |
| <p class="mt-4 text-lg text-indigo-100"> | |
| Join thousands of creators using REDAIGC to bring their ideas to life. | |
| </p> | |
| </div> | |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50"> | |
| Get Started for Free | |
| </a> | |
| </div> | |
| <div class="ml-3 inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70"> | |
| See Pricing | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-300"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8"> | |
| <div class="col-span-2"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">R</div> | |
| <span class="ml-2 text-xl font-bold text-white">RED|<span class="ml-2 text-xl font-light text-white">AIGC</span></span> | |
| </div> | |
| <p class="mt-4 text-sm"> | |
| The most powerful AI design platform for creators, marketers, and businesses. | |
| </p> | |
| <div class="mt-4 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Product</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-sm hover:text-white">Features</a></li> | |
| <li><a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-sm hover:text-white">Templates</a></li> | |
| <li><a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-sm hover:text-white">Pricing</a></li> | |
| <li><a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-sm hover:text-white">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Resources</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-sm hover:text-white">Documentation</a></li> | |
| <li><a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-sm hover:text-white">Tutorials</a></li> | |
| <li><a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-sm hover:text-white">Blog</a></li> | |
| <li><a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-sm hover:text-white">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-sm hover:text-white">About</a></li> | |
| <li><a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-sm hover:text-white">Careers</a></li> | |
| <li><a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-sm hover:text-white">Privacy</a></li> | |
| <li><a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-sm hover:text-white">Terms</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between"> | |
| <p class="text-sm text-gray-400"> | |
| © 2025 METAFILM.Ai All rights reserved. | |
| </p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-sm text-gray-400 hover:text-white">REDAIGC.com</a> | |
| <a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-sm text-gray-400 hover:text-white">Privacy Policy</a> | |
| <a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-sm text-gray-400 hover:text-white">Terms of Service</a> | |
| <a href="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-sm text-gray-400 hover:text-white">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // AI Generator functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const promptInput = document.getElementById('prompt'); | |
| const placeholder = document.getElementById('placeholder'); | |
| const loading = document.getElementById('loading'); | |
| const generatedImage = document.getElementById('generated-image'); | |
| const variations = document.getElementById('variations'); | |
| const downloadBtn = document.getElementById('download-btn'); | |
| const refreshBtn = document.getElementById('refresh-btn'); | |
| const styleOptions = document.querySelectorAll('.style-option'); | |
| const aspectOptions = document.querySelectorAll('.aspect-option'); | |
| let selectedStyle = 'realistic'; | |
| let selectedAspect = '1:1'; | |
| // Style selection | |
| styleOptions.forEach(option => { | |
| option.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| styleOptions.forEach(opt => { | |
| opt.classList.remove('bg-indigo-100', 'text-indigo-700'); | |
| opt.classList.add('bg-white', 'hover:bg-gray-50'); | |
| }); | |
| this.classList.add('bg-indigo-100', 'text-indigo-700'); | |
| this.classList.remove('bg-white', 'hover:bg-gray-50'); | |
| selectedStyle = this.dataset.style; | |
| }); | |
| }); | |
| // Aspect ratio selection | |
| aspectOptions.forEach(option => { | |
| option.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| aspectOptions.forEach(opt => { | |
| opt.classList.remove('bg-indigo-100', 'text-indigo-700'); | |
| opt.classList.add('bg-white', 'hover:bg-gray-50'); | |
| }); | |
| this.classList.add('bg-indigo-100', 'text-indigo-700'); | |
| this.classList.remove('bg-white', 'hover:bg-gray-50'); | |
| selectedAspect = this.dataset.ratio; | |
| }); | |
| }); | |
| // Generate image | |
| generateBtn.addEventListener('click', function() { | |
| const prompt = promptInput.value.trim(); | |
| if (!prompt) { | |
| alert('Please enter a description for your design'); | |
| return; | |
| } | |
| // Show loading state | |
| placeholder.classList.add('hidden'); | |
| loading.classList.remove('hidden'); | |
| generatedImage.classList.remove('show'); | |
| generatedImage.classList.add('hidden'); | |
| variations.classList.add('hidden'); | |
| downloadBtn.classList.add('hidden'); | |
| refreshBtn.classList.add('hidden'); | |
| // Simulate API call with timeout | |
| setTimeout(() => { | |
| // Hide loading | |
| loading.classList.add('hidden'); | |
| // Show generated image (using placeholder from unsplash) | |
| const imageUrl = `65191488.jpeg`; | |
| generatedImage.src = imageUrl; | |
| generatedImage.classList.remove('hidden'); | |
| setTimeout(() => { | |
| generatedImage.classList.add('show'); | |
| }, 50); | |
| // Show variations and buttons | |
| variations.classList.remove('hidden'); | |
| downloadBtn.classList.remove('hidden'); | |
| refreshBtn.classList.remove('hidden'); | |
| // Set variation images | |
| const variationImages = variations.querySelectorAll('img'); | |
| variationImages.forEach((img, index) => { | |
| img.src = `65191488.jpeg`; | |
| }); | |
| }, 3000); | |
| }); | |
| // Download image | |
| downloadBtn.addEventListener('click', function() { | |
| if (generatedImage.src) { | |
| const link = document.createElement('a'); | |
| link.href = generatedImage.src; | |
| link.download = `65656010.png`; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| } | |
| }); | |
| // Refresh image | |
| refreshBtn.addEventListener('click', function() { | |
| if (generatedImage.src) { | |
| const prompt = promptInput.value.trim(); | |
| generatedImage.src = `65191196.jpeg`; | |
| // Refresh variations too | |
| const variationImages = variations.querySelectorAll('img'); | |
| variationImages.forEach((img, index) => { | |
| img.src = `65191196.jpeg`; | |
| }); | |
| } | |
| }); | |
| // Variation selection | |
| variations.addEventListener('click', function(e) { | |
| if (e.target.tagName === 'IMG' && e.target.closest('.variation-btn')) { | |
| const mainImageSrc = e.target.src.replace('300x200', '600x400'); | |
| generatedImage.src = mainImageSrc; | |
| } | |
| }); | |
| }); | |
| </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=GuangyuanSD/redaigc-com" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |