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>