Hugging Face's logo

Spaces:
GuangyuanSD
/
redaigc-com
Running

App Files Community
redaigc-com / redchina.html
GuangyuanSD's picture
GuangyuanSD
Update redchina.html
4b7d278 verified
raw
history blame contribute delete
50.7 kB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>REDAIGC.com - AI创意设计平台</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=Noto+Sans+SC:wght@300;400;500;700&display=swap');
:root {
 --primary: #6366f1;
 --primary-dark: #4f46e5;
 --secondary: #f43f5e;
 --dark: #1e293b;
 --light: #f8fafc;
 }
body {
 font-family: 'Noto Sans SC', 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="https://civitai.com/user/METAFILM_Ai" target="_blank" class="text-indigo-600 border-indigo-500 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">首页</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">模板</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">作品集</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">定价</a>
 </div>
 </div>
 <div class="hidden md:ml-4 md:flex md:items-center md:space-x-4">
 <a href="index.html" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-indigo-600">EN</a>
 <button class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-indigo-600">登录</button>
 <button class="px-4 py-2 rounded-md text-sm font-medium text-white gradient-bg hover:opacity-90 transition">免费试用</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">打开菜单</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">用AI创造惊艳设计</span>
 <span class="block text-indigo-600">释放你的创意潜能</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将您的想法在几秒内转化为精美视觉作品。无需设计技能 - 只需描述您想要的内容，让我们的AI施展魔法。
 </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">
 立即体验
 </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> 观看演示
 </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驱动的创意设计</h3>
 <p class="opacity-90">通过简单的文字描述生成标志、插画、社交媒体内容等各种设计。</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">元影光远</p>
 <p class="text-xs opacity-80">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">核心功能</h2>
 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 创作惊艳设计所需的一切工具
 </p>
 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
 我们的AI理解您的愿景，并通过惊艳的视觉效果将其变为现实。
 </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">即时生成</h3>
 <p class="mt-2 text-base text-gray-500">
 几秒内获得高质量设计作品。无需等待，无需复杂工具 - 只需描述您的需求。
 </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">多种风格</h3>
 <p class="mt-2 text-base text-gray-500">
 从各种艺术风格中选择 - 写实、卡通、水彩、电影、建筑等多种风格。
 </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">轻松编辑</h3>
 <p class="mt-2 text-base text-gray-500">
 通过简单的文字指令完善您的创作。更改颜色、添加元素或调整构图。
 </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">模板库</h3>
 <p class="mt-2 text-base text-gray-500">
 从专业的社交媒体、广告、标志和演示文稿模板开始创作。
 </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">高清导出</h3>
 <p class="mt-2 text-base text-gray-500">
 以多种格式(PNG、JPG、SVG)下载您的作品，分辨率高达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">团队协作</h3>
 <p class="mt-2 text-base text-gray-500">
 与团队成员分享项目，留下反馈，实时协作完成设计。
 </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设计生成器
 </h2>
 <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
 亲自尝试 - 描述您想要创作的内容
 </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">描述您的设计</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="例如：夜晚的未来城市景观，霓虹灯光和飞行汽车，赛博朋克风格"></textarea>
 </div>
 </div>
<div class="mb-4">
 <label class="block text-sm font-medium text-gray-700 mb-2">风格</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> 写实
 </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> 卡通
 </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> 极简
 </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> 水彩
 </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> 建筑
 </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> 奇幻
 </button>
 </div>
 </div>
<div class="mb-4">
 <label class="block text-sm font-medium text-gray-700 mb-2">比例</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>
 <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">
 3:4
 </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">
 1:2
 </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">
 2:1
 </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">
 生成设计
 </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">您的作品</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">您生成的设计将在此显示</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">正在生成您的设计...</p>
 <p class="text-sm text-gray-500 mt-1">通常需要10-20秒</p>
 </div>
 </div>
<img id="generated-image" src="" alt="生成的设计" 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="变体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="变体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="变体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="变体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">
 灵感画廊
 </h2>
 <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
 看看其他人用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">
 <a href="https://civitai.com/user/METAFILM_AI" target="_blank">浏览更多作品</a>
 </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">
 用户评价
 </h2>
 <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
 加入数千名正在改变工作流程的创作者行列
 </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">雨欣</div>
 <div class="text-indigo-600">平面设计师</div>
 </div>
 </div>
 <div class="mt-4">
 <p class="text-gray-600">
 "REDAIGC彻底改变了我的工作方式。我现在可以在几分钟内为客户创建概念，而不是几小时。质量专业，节省的时间令人难以置信。"
 </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</div>
 <div class="text-indigo-600">市场总监</div>
 </div>
 </div>
 <div class="mt-4">
 <p class="text-gray-600">
 "自从我们开始使用REDAIGC创建内容以来，我们的社交媒体参与度翻了一番。能够如此快速地生成符合品牌形象的视觉效果，这改变了游戏规则。"
 </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">创业公司创始人</div>
 </div>
 </div>
 <div class="mt-4">
 <p class="text-gray-600">
 "作为一个非设计师，REDAIGC为我的创业公司创建专业外观的资产非常宝贵。仅标志生成器就为我们节省了数千元的设计费用。"
 </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">
 准备好释放您的创造力了吗？
 </h2>
 <p class="mt-4 text-lg text-indigo-100">
 加入数千名使用REDAIGC将想法变为现实的创作者行列。
 </p>
 </div>
 <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
 <div class="inline-flex rounded-md shadow">
 <a href="https://civitai.com/user/METAFILM_AI" 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" target="_blank">
 免费试用
 </a>
 </div>
 <div class="ml-3 inline-flex rounded-md shadow">
 <a href="https://civitai.com/user/METAFILM_AI" 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" target="_blank">
 查看定价
 </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">
 面向创作者、营销人员和企业的最强大AI设计平台。
 </p>
 <div class="mt-4 flex space-x-6">
 <a href="https://civitai.com/user/METAFILM_AI" target="_blank" class="text-gray-400 hover:text-white">
 <i class="fab fa-twitter"></i>
 </a>
 <a href="https://civitai.com/user/METAFILM_AI" target="_blank" class="text-gray-400 hover:text-white">
 <i class="fab fa-instagram"></i>
 </a>
 <a href="https://civitai.com/user/METAFILM_AI" target="_blank" class="text-gray-400 hover:text-white">
 <i class="fab fa-discord"></i>
 </a>
 <a href="https://civitai.com/user/METAFILM_AI" target="_blank" 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">产品</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">功能</a></li>
 <li><a href="https://civitai.com/user/METAFILM_AI" target="_blank" class="text-sm hover:text-white">模板</a></li>
 <li><a href="https://civitai.com/user/METAFILM_AI" target="_blank" class="text-sm hover:text-white">定价</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">资源</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">文档</a></li>
 <li><a href="https://civitai.com/user/METAFILM_AI" target="_blank" class="text-sm hover:text-white">教程</a></li>
 <li><a href="https://civitai.com/user/METAFILM_AI" target="_blank" class="text-sm hover:text-white">博客</a></li>
 <li><a href="https://civitai.com/user/METAFILM_AI" target="_blank" class="text-sm hover:text-white">社区</a></li>
 </ul>
 </div>
<div>
 <h3 class="text-sm font-semibold text-white tracking-wider uppercase">公司</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">关于我们</a></li>
 <li><a href="https://civitai.com/user/METAFILM_AI" target="_blank" class="text-sm hover:text-white">招聘</a></li>
 <li><a href="https://civitai.com/user/METAFILM_AI" target="_blank" class="text-sm hover:text-white">隐私政策</a></li>
 <li><a href="https://civitai.com/user/METAFILM_AI" target="_blank" class="text-sm hover:text-white">服务条款</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">
 &copy; 2025 METAFILM.Ai 保留所有权利。
 </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">隐私政策</a>
 <a href="https://civitai.com/user/METAFILM_AI" target="_blank" class="text-sm text-gray-400 hover:text-white">服务条款</a>
 <a href="https://civitai.com/user/METAFILM_AI" target="_blank" class="text-sm text-gray-400 hover:text-white">Cookie政策</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('请输入您的设计描述');
 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 = `65657455.png`;
 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 = `65274456.jpeg`;
 });
 }, 3000);
 });
// Download image
 downloadBtn.addEventListener('click', function() {
 if (generatedImage.src) {
 const link = document.createElement('a');
 link.href = generatedImage.src;
 link.download = `65657455.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 = `65186391.png`;
// Refresh variations too
 const variationImages = variations.querySelectorAll('img');
 variationImages.forEach((img, index) => {
 img.src = `65657227.png`;
 });
 }
 });
// 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>
</body>
</html>