Hugging Face's logo

Spaces:
GuangyuanSD
/
redaigc-com
Running

App Files Community
GuangyuanSD commited on
Commit
d63e03e
·
verified ·
1 Parent(s): 30ead17

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +874 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Redaigc Com
3
- emoji: 🏆
4
- colorFrom: blue
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: redaigc-com
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,874 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>REDAIGC - AI-Powered Creative Design</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #6366f1;
14
+ --primary-dark: #4f46e5;
15
+ --secondary: #f43f5e;
16
+ --dark: #1e293b;
17
+ --light: #f8fafc;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Poppins', sans-serif;
22
+ background-color: #f1f5f9;
23
+ }
24
+
25
+ .gradient-bg {
26
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
27
+ }
28
+
29
+ .card-hover {
30
+ transition: all 0.3s ease;
31
+ }
32
+
33
+ .card-hover:hover {
34
+ transform: translateY(-5px);
35
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
36
+ }
37
+
38
+ .ai-generator-container {
39
+ background: rgba(255, 255, 255, 0.2);
40
+ backdrop-filter: blur(10px);
41
+ border: 1px solid rgba(255, 255, 255, 0.3);
42
+ }
43
+
44
+ .prompt-input:focus {
45
+ outline: none;
46
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
47
+ }
48
+
49
+ .generated-image {
50
+ transition: all 0.5s ease;
51
+ opacity: 0;
52
+ }
53
+
54
+ .generated-image.show {
55
+ opacity: 1;
56
+ }
57
+
58
+ .loading-dots {
59
+ display: inline-flex;
60
+ align-items: center;
61
+ }
62
+
63
+ .loading-dots span {
64
+ width: 8px;
65
+ height: 8px;
66
+ margin: 0 2px;
67
+ background-color: currentColor;
68
+ border-radius: 50%;
69
+ display: inline-block;
70
+ animation: bounce 1.4s infinite ease-in-out both;
71
+ }
72
+
73
+ .loading-dots span:nth-child(1) {
74
+ animation-delay: -0.32s;
75
+ }
76
+
77
+ .loading-dots span:nth-child(2) {
78
+ animation-delay: -0.16s;
79
+ }
80
+
81
+ @keyframes bounce {
82
+ 0%, 80%, 100% {
83
+ transform: scale(0);
84
+ } 40% {
85
+ transform: scale(1);
86
+ }
87
+ }
88
+
89
+ .floating-shapes {
90
+ position: absolute;
91
+ width: 100%;
92
+ height: 100%;
93
+ overflow: hidden;
94
+ top: 0;
95
+ left: 0;
96
+ z-index: -1;
97
+ }
98
+
99
+ .shape {
100
+ position: absolute;
101
+ opacity: 0.1;
102
+ border-radius: 50%;
103
+ filter: blur(40px);
104
+ }
105
+
106
+ .shape-1 {
107
+ width: 300px;
108
+ height: 300px;
109
+ background: var(--primary);
110
+ top: 10%;
111
+ left: 10%;
112
+ animation: float 15s ease-in-out infinite;
113
+ }
114
+
115
+ .shape-2 {
116
+ width: 200px;
117
+ height: 200px;
118
+ background: var(--secondary);
119
+ top: 60%;
120
+ left: 70%;
121
+ animation: float 12s ease-in-out infinite reverse;
122
+ }
123
+
124
+ .shape-3 {
125
+ width: 250px;
126
+ height: 250px;
127
+ background: #10b981;
128
+ top: 30%;
129
+ left: 50%;
130
+ animation: float 18s ease-in-out infinite;
131
+ }
132
+
133
+ @keyframes float {
134
+ 0% {
135
+ transform: translate(0, 0) rotate(0deg);
136
+ }
137
+ 50% {
138
+ transform: translate(50px, 50px) rotate(180deg);
139
+ }
140
+ 100% {
141
+ transform: translate(0, 0) rotate(360deg);
142
+ }
143
+ }
144
+ </style>
145
+ </head>
146
+ <body class="min-h-screen">
147
+ <!-- Floating background shapes -->
148
+ <div class="floating-shapes">
149
+ <div class="shape shape-1"></div>
150
+ <div class="shape shape-2"></div>
151
+ <div class="shape shape-3"></div>
152
+ </div>
153
+
154
+ <!-- Navigation -->
155
+ <nav class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50">
156
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
157
+ <div class="flex justify-between h-16 items-center">
158
+ <div class="flex items-center">
159
+ <div class="flex-shrink-0 flex items-center">
160
+ <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">R</div>
161
+ <span class="ml-2 text-xl font-bold text-gray-800">REDAIGC</span>
162
+ </div>
163
+ <div class="hidden md:ml-10 md:flex md:space-x-8">
164
+ <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>
165
+ <a href="#" 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>
166
+ <a href="#" 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>
167
+ <a href="#" 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>
168
+ </div>
169
+ </div>
170
+ <div class="hidden md:ml-4 md:flex md:items-center md:space-x-4">
171
+ <button class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-indigo-600">Sign in</button>
172
+ <button class="px-4 py-2 rounded-md text-sm font-medium text-white gradient-bg hover:opacity-90 transition">Get Started</button>
173
+ </div>
174
+ <div class="-mr-2 flex items-center md:hidden">
175
+ <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">
176
+ <span class="sr-only">Open main menu</span>
177
+ <i class="fas fa-bars"></i>
178
+ </button>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </nav>
183
+
184
+ <!-- Hero Section -->
185
+ <div class="relative overflow-hidden">
186
+ <div class="max-w-7xl mx-auto">
187
+ <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">
188
+ <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">
189
+ <div class="sm:text-center lg:text-left">
190
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
191
+ <span class="block">Create Stunning Designs</span>
192
+ <span class="block text-indigo-600">with AI Power</span>
193
+ </h1>
194
+ <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">
195
+ 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.
196
+ </p>
197
+ <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
198
+ <div class="rounded-md shadow">
199
+ <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">
200
+ Try It Now
201
+ </a>
202
+ </div>
203
+ <div class="mt-3 sm:mt-0 sm:ml-3">
204
+ <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">
205
+ <i class="fas fa-play-circle mr-2"></i> Watch Demo
206
+ </a>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </main>
211
+ </div>
212
+ </div>
213
+ <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 hidden lg:block">
214
+ <div class="h-full w-full flex items-center justify-center p-10">
215
+ <div class="relative w-full h-96 rounded-2xl overflow-hidden shadow-xl">
216
+ <div class="absolute inset-0 gradient-bg opacity-90"></div>
217
+ <div class="absolute inset-0 flex items-center justify-center">
218
+ <div class="text-white text-center px-10">
219
+ <i class="fas fa-magic text-5xl mb-4"></i>
220
+ <h3 class="text-2xl font-bold mb-2">AI-Powered Creativity</h3>
221
+ <p class="opacity-90">Generate logos, illustrations, social media posts, and more with simple text prompts.</p>
222
+ </div>
223
+ </div>
224
+ <div class="absolute bottom-0 left-0 right-0 p-4 bg-white/20 backdrop-blur-sm text-white text-sm">
225
+ <div class="flex items-center">
226
+ <div class="flex-shrink-0">
227
+ <img class="h-8 w-8 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="">
228
+ </div>
229
+ <div class="ml-3">
230
+ <p class="font-medium">Sarah Johnson</p>
231
+ <p class="text-xs opacity-80">Created with REDAIGC</p>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ <div class="absolute top-4 right-4 bg-black/50 text-white text-xs px-2 py-1 rounded">
236
+ REDAIGC.com
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Features Section -->
244
+ <div class="py-12 bg-white">
245
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
246
+ <div class="lg:text-center">
247
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
248
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
249
+ Everything you need to create amazing designs
250
+ </p>
251
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
252
+ Our AI understands your vision and brings it to life with stunning visuals.
253
+ </p>
254
+ </div>
255
+
256
+ <div class="mt-10">
257
+ <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
258
+ <!-- Feature 1 -->
259
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 border border-gray-100">
260
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
261
+ <i class="fas fa-bolt"></i>
262
+ </div>
263
+ <div class="mt-4">
264
+ <h3 class="text-lg font-medium text-gray-900">Instant Generation</h3>
265
+ <p class="mt-2 text-base text-gray-500">
266
+ Get high-quality designs in seconds. No waiting, no complicated tools - just describe what you want.
267
+ </p>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- Feature 2 -->
272
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 border border-gray-100">
273
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-pink-500 text-white">
274
+ <i class="fas fa-palette"></i>
275
+ </div>
276
+ <div class="mt-4">
277
+ <h3 class="text-lg font-medium text-gray-900">Multiple Styles</h3>
278
+ <p class="mt-2 text-base text-gray-500">
279
+ Choose from various art styles - photorealistic, cartoon, watercolor, cyberpunk, and more.
280
+ </p>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Feature 3 -->
285
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 border border-gray-100">
286
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
287
+ <i class="fas fa-edit"></i>
288
+ </div>
289
+ <div class="mt-4">
290
+ <h3 class="text-lg font-medium text-gray-900">Easy Editing</h3>
291
+ <p class="mt-2 text-base text-gray-500">
292
+ Refine your creations with simple text commands. Change colors, add elements, or adjust composition.
293
+ </p>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Feature 4 -->
298
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 border border-gray-100">
299
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
300
+ <i class="fas fa-shapes"></i>
301
+ </div>
302
+ <div class="mt-4">
303
+ <h3 class="text-lg font-medium text-gray-900">Templates Library</h3>
304
+ <p class="mt-2 text-base text-gray-500">
305
+ Start with professionally designed templates for social media, ads, logos, and presentations.
306
+ </p>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Feature 5 -->
311
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 border border-gray-100">
312
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
313
+ <i class="fas fa-file-download"></i>
314
+ </div>
315
+ <div class="mt-4">
316
+ <h3 class="text-lg font-medium text-gray-900">High-Res Export</h3>
317
+ <p class="mt-2 text-base text-gray-500">
318
+ Download your creations in multiple formats (PNG, JPG, SVG) at resolutions up to 4K.
319
+ </p>
320
+ </div>
321
+ </div>
322
+
323
+ <!-- Feature 6 -->
324
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 border border-gray-100">
325
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white">
326
+ <i class="fas fa-users"></i>
327
+ </div>
328
+ <div class="mt-4">
329
+ <h3 class="text-lg font-medium text-gray-900">Team Collaboration</h3>
330
+ <p class="mt-2 text-base text-gray-500">
331
+ Share projects with your team, leave feedback, and collaborate in real-time on designs.
332
+ </p>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+
340
+ <!-- AI Generator Section -->
341
+ <div id="generator" class="py-16 bg-gray-50">
342
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
343
+ <div class="text-center">
344
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
345
+ AI Design Generator
346
+ </h2>
347
+ <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
348
+ Try it yourself - describe what you want to create
349
+ </p>
350
+ </div>
351
+
352
+ <div class="mt-12">
353
+ <div class="ai-generator-container rounded-2xl p-6 max-w-4xl mx-auto">
354
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
355
+ <!-- Input Section -->
356
+ <div class="bg-white rounded-xl p-6 shadow-sm">
357
+ <div class="mb-4">
358
+ <label for="prompt" class="block text-sm font-medium text-gray-700">Describe your design</label>
359
+ <div class="mt-1 relative rounded-md shadow-sm">
360
+ <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>
361
+ </div>
362
+ </div>
363
+
364
+ <div class="mb-4">
365
+ <label class="block text-sm font-medium text-gray-700 mb-2">Style</label>
366
+ <div class="grid grid-cols-3 gap-2">
367
+ <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">
368
+ <i class="fas fa-camera mr-1"></i> Realistic
369
+ </button>
370
+ <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">
371
+ <i class="fas fa-paint-brush mr-1"></i> Cartoon
372
+ </button>
373
+ <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">
374
+ <i class="fas fa-shapes mr-1"></i> Minimal
375
+ </button>
376
+ <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">
377
+ <i class="fas fa-water mr-1"></i> Watercolor
378
+ </button>
379
+ <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">
380
+ <i class="fas fa-robot mr-1"></i> Cyberpunk
381
+ </button>
382
+ <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">
383
+ <i class="fas fa-dragon mr-1"></i> Fantasy
384
+ </button>
385
+ </div>
386
+ </div>
387
+
388
+ <div class="mb-4">
389
+ <label class="block text-sm font-medium text-gray-700 mb-2">Aspect Ratio</label>
390
+ <div class="flex space-x-2">
391
+ <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">
392
+ 1:1
393
+ </button>
394
+ <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">
395
+ 16:9
396
+ </button>
397
+ <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">
398
+ 9:16
399
+ </button>
400
+ <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">
401
+ 4:3
402
+ </button>
403
+ </div>
404
+ </div>
405
+
406
+ <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">
407
+ Generate Design
408
+ </button>
409
+ </div>
410
+
411
+ <!-- Output Section -->
412
+ <div class="bg-white rounded-xl p-6 shadow-sm flex flex-col">
413
+ <div class="flex justify-between items-center mb-4">
414
+ <h3 class="text-lg font-medium text-gray-900">Your Creation</h3>
415
+ <div class="flex space-x-2">
416
+ <button id="download-btn" class="hidden p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700">
417
+ <i class="fas fa-download"></i>
418
+ </button>
419
+ <button id="refresh-btn" class="hidden p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700">
420
+ <i class="fas fa-sync-alt"></i>
421
+ </button>
422
+ </div>
423
+ </div>
424
+
425
+ <div class="flex-1 flex items-center justify-center bg-gray-50 rounded-lg overflow-hidden relative">
426
+ <div id="placeholder" class="text-center p-6">
427
+ <i class="fas fa-image text-4xl text-gray-300 mb-3"></i>
428
+ <p class="text-gray-500">Your generated design will appear here</p>
429
+ </div>
430
+
431
+ <div id="loading" class="absolute inset-0 bg-white/80 flex items-center justify-center hidden">
432
+ <div class="text-center">
433
+ <div class="loading-dots text-indigo-600 mb-4">
434
+ <span></span>
435
+ <span></span>
436
+ <span></span>
437
+ </div>
438
+ <p class="text-gray-600">Generating your design...</p>
439
+ <p class="text-sm text-gray-500 mt-1">This usually takes 10-20 seconds</p>
440
+ </div>
441
+ </div>
442
+
443
+ <img id="generated-image" src="" alt="Generated design" class="generated-image w-full h-full object-cover hidden">
444
+ </div>
445
+
446
+ <div id="variations" class="mt-4 grid grid-cols-4 gap-2 hidden">
447
+ <button class="variation-btn h-16 bg-gray-100 rounded-md overflow-hidden">
448
+ <img src="" alt="Variation 1" class="w-full h-full object-cover">
449
+ </button>
450
+ <button class="variation-btn h-16 bg-gray-100 rounded-md overflow-hidden">
451
+ <img src="" alt="Variation 2" class="w-full h-full object-cover">
452
+ </button>
453
+ <button class="variation-btn h-16 bg-gray-100 rounded-md overflow-hidden">
454
+ <img src="" alt="Variation 3" class="w-full h-full object-cover">
455
+ </button>
456
+ <button class="variation-btn h-16 bg-gray-100 rounded-md overflow-hidden">
457
+ <img src="" alt="Variation 4" class="w-full h-full object-cover">
458
+ </button>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- Gallery Section -->
468
+ <div class="py-16 bg-white">
469
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
470
+ <div class="text-center">
471
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
472
+ Inspiration Gallery
473
+ </h2>
474
+ <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
475
+ See what others have created with REDAIGC
476
+ </p>
477
+ </div>
478
+
479
+ <div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
480
+ <!-- Gallery Item 1 -->
481
+ <div class="card-hover group relative bg-gray-50 rounded-xl overflow-hidden shadow-sm">
482
+ <img src="https://source.unsplash.com/random/600x400/?cyberpunk,city" alt="Cyberpunk city" class="w-full h-64 object-cover">
483
+ <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">
484
+ <div>
485
+ <p class="text-white font-medium">"Futuristic cyberpunk city at night"</p>
486
+ <p class="text-white/80 text-sm mt-1">Created by @digitaldreamer</p>
487
+ </div>
488
+ </div>
489
+ </div>
490
+
491
+ <!-- Gallery Item 2 -->
492
+ <div class="card-hover group relative bg-gray-50 rounded-xl overflow-hidden shadow-sm">
493
+ <img src="https://source.unsplash.com/random/600x400/?fantasy,landscape" alt="Fantasy landscape" class="w-full h-64 object-cover">
494
+ <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">
495
+ <div>
496
+ <p class="text-white font-medium">"Magical forest with glowing mushrooms"</p>
497
+ <p class="text-white/80 text-sm mt-1">Created by @artlover</p>
498
+ </div>
499
+ </div>
500
+ </div>
501
+
502
+ <!-- Gallery Item 3 -->
503
+ <div class="card-hover group relative bg-gray-50 rounded-xl overflow-hidden shadow-sm">
504
+ <img src="https://source.unsplash.com/random/600x400/?abstract,art" alt="Abstract art" class="w-full h-64 object-cover">
505
+ <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">
506
+ <div>
507
+ <p class="text-white font-medium">"Colorful liquid abstract composition"</p>
508
+ <p class="text-white/80 text-sm mt-1">Created by @creative_mind</p>
509
+ </div>
510
+ </div>
511
+ </div>
512
+
513
+ <!-- Gallery Item 4 -->
514
+ <div class="card-hover group relative bg-gray-50 rounded-xl overflow-hidden shadow-sm">
515
+ <img src="https://source.unsplash.com/random/600x400/?portrait,digitalart" alt="Digital portrait" class="w-full h-64 object-cover">
516
+ <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">
517
+ <div>
518
+ <p class="text-white font-medium">"Cyberpunk character portrait"</p>
519
+ <p class="text-white/80 text-sm mt-1">Created by @artificial_artist</p>
520
+ </div>
521
+ </div>
522
+ </div>
523
+
524
+ <!-- Gallery Item 5 -->
525
+ <div class="card-hover group relative bg-gray-50 rounded-xl overflow-hidden shadow-sm">
526
+ <img src="https://source.unsplash.com/random/600x400/?product,design" alt="Product design" class="w-full h-64 object-cover">
527
+ <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">
528
+ <div>
529
+ <p class="text-white font-medium">"Futuristic smartwatch concept"</p>
530
+ <p class="text-white/80 text-sm mt-1">Created by @design_ai</p>
531
+ </div>
532
+ </div>
533
+ </div>
534
+
535
+ <!-- Gallery Item 6 -->
536
+ <div class="card-hover group relative bg-gray-50 rounded-xl overflow-hidden shadow-sm">
537
+ <img src="https://source.unsplash.com/random/600x400/?logo,design" alt="Logo design" class="w-full h-64 object-cover">
538
+ <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">
539
+ <div>
540
+ <p class="text-white font-medium">"Minimal tech startup logo"</p>
541
+ <p class="text-white/80 text-sm mt-1">Created by @brand_builder</p>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+
547
+ <div class="mt-10 text-center">
548
+ <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">
549
+ Browse More Creations
550
+ </button>
551
+ </div>
552
+ </div>
553
+ </div>
554
+
555
+ <!-- Testimonials -->
556
+ <div class="py-16 bg-indigo-50">
557
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
558
+ <div class="text-center">
559
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
560
+ What Our Users Say
561
+ </h2>
562
+ <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
563
+ Join thousands of creators who are transforming their workflow
564
+ </p>
565
+ </div>
566
+
567
+ <div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
568
+ <!-- Testimonial 1 -->
569
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6">
570
+ <div class="flex items-center">
571
+ <div class="flex-shrink-0">
572
+ <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="">
573
+ </div>
574
+ <div class="ml-4">
575
+ <div class="text-lg font-medium text-gray-900">Sarah Johnson</div>
576
+ <div class="text-indigo-600">Graphic Designer</div>
577
+ </div>
578
+ </div>
579
+ <div class="mt-4">
580
+ <p class="text-gray-600">
581
+ "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."
582
+ </p>
583
+ </div>
584
+ <div class="mt-4 flex">
585
+ <i class="fas fa-star text-yellow-400"></i>
586
+ <i class="fas fa-star text-yellow-400"></i>
587
+ <i class="fas fa-star text-yellow-400"></i>
588
+ <i class="fas fa-star text-yellow-400"></i>
589
+ <i class="fas fa-star text-yellow-400"></i>
590
+ </div>
591
+ </div>
592
+
593
+ <!-- Testimonial 2 -->
594
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6">
595
+ <div class="flex items-center">
596
+ <div class="flex-shrink-0">
597
+ <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="">
598
+ </div>
599
+ <div class="ml-4">
600
+ <div class="text-lg font-medium text-gray-900">Michael Chen</div>
601
+ <div class="text-indigo-600">Marketing Director</div>
602
+ </div>
603
+ </div>
604
+ <div class="mt-4">
605
+ <p class="text-gray-600">
606
+ "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."
607
+ </p>
608
+ </div>
609
+ <div class="mt-4 flex">
610
+ <i class="fas fa-star text-yellow-400"></i>
611
+ <i class="fas fa-star text-yellow-400"></i>
612
+ <i class="fas fa-star text-yellow-400"></i>
613
+ <i class="fas fa-star text-yellow-400"></i>
614
+ <i class="fas fa-star text-yellow-400"></i>
615
+ </div>
616
+ </div>
617
+
618
+ <!-- Testimonial 3 -->
619
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6">
620
+ <div class="flex items-center">
621
+ <div class="flex-shrink-0">
622
+ <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="">
623
+ </div>
624
+ <div class="ml-4">
625
+ <div class="text-lg font-medium text-gray-900">David Wilson</div>
626
+ <div class="text-indigo-600">Startup Founder</div>
627
+ </div>
628
+ </div>
629
+ <div class="mt-4">
630
+ <p class="text-gray-600">
631
+ "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."
632
+ </p>
633
+ </div>
634
+ <div class="mt-4 flex">
635
+ <i class="fas fa-star text-yellow-400"></i>
636
+ <i class="fas fa-star text-yellow-400"></i>
637
+ <i class="fas fa-star text-yellow-400"></i>
638
+ <i class="fas fa-star text-yellow-400"></i>
639
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
640
+ </div>
641
+ </div>
642
+ </div>
643
+ </div>
644
+ </div>
645
+
646
+ <!-- CTA Section -->
647
+ <div class="bg-white">
648
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
649
+ <div class="gradient-bg rounded-2xl px-6 py-16 sm:p-16">
650
+ <div class="max-w-xl mx-auto lg:max-w-none lg:flex lg:items-center lg:justify-between">
651
+ <div>
652
+ <h2 class="text-3xl font-extrabold tracking-tight text-white">
653
+ Ready to unleash your creativity?
654
+ </h2>
655
+ <p class="mt-4 text-lg text-indigo-100">
656
+ Join thousands of creators using REDAIGC to bring their ideas to life.
657
+ </p>
658
+ </div>
659
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
660
+ <div class="inline-flex rounded-md shadow">
661
+ <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">
662
+ Get Started for Free
663
+ </a>
664
+ </div>
665
+ <div class="ml-3 inline-flex rounded-md shadow">
666
+ <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">
667
+ See Pricing
668
+ </a>
669
+ </div>
670
+ </div>
671
+ </div>
672
+ </div>
673
+ </div>
674
+ </div>
675
+
676
+ <!-- Footer -->
677
+ <footer class="bg-gray-900 text-gray-300">
678
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
679
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8">
680
+ <div class="col-span-2">
681
+ <div class="flex items-center">
682
+ <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">R</div>
683
+ <span class="ml-2 text-xl font-bold text-white">REDAIGC</span>
684
+ </div>
685
+ <p class="mt-4 text-sm">
686
+ The most powerful AI design platform for creators, marketers, and businesses.
687
+ </p>
688
+ <div class="mt-4 flex space-x-6">
689
+ <a href="#" class="text-gray-400 hover:text-white">
690
+ <i class="fab fa-twitter"></i>
691
+ </a>
692
+ <a href="#" class="text-gray-400 hover:text-white">
693
+ <i class="fab fa-instagram"></i>
694
+ </a>
695
+ <a href="#" class="text-gray-400 hover:text-white">
696
+ <i class="fab fa-discord"></i>
697
+ </a>
698
+ <a href="#" class="text-gray-400 hover:text-white">
699
+ <i class="fab fa-youtube"></i>
700
+ </a>
701
+ </div>
702
+ </div>
703
+
704
+ <div>
705
+ <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Product</h3>
706
+ <ul class="mt-4 space-y-2">
707
+ <li><a href="#" class="text-sm hover:text-white">Features</a></li>
708
+ <li><a href="#" class="text-sm hover:text-white">Templates</a></li>
709
+ <li><a href="#" class="text-sm hover:text-white">Pricing</a></li>
710
+ <li><a href="#" class="text-sm hover:text-white">API</a></li>
711
+ </ul>
712
+ </div>
713
+
714
+ <div>
715
+ <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Resources</h3>
716
+ <ul class="mt-4 space-y-2">
717
+ <li><a href="#" class="text-sm hover:text-white">Documentation</a></li>
718
+ <li><a href="#" class="text-sm hover:text-white">Tutorials</a></li>
719
+ <li><a href="#" class="text-sm hover:text-white">Blog</a></li>
720
+ <li><a href="#" class="text-sm hover:text-white">Community</a></li>
721
+ </ul>
722
+ </div>
723
+
724
+ <div>
725
+ <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Company</h3>
726
+ <ul class="mt-4 space-y-2">
727
+ <li><a href="#" class="text-sm hover:text-white">About</a></li>
728
+ <li><a href="#" class="text-sm hover:text-white">Careers</a></li>
729
+ <li><a href="#" class="text-sm hover:text-white">Privacy</a></li>
730
+ <li><a href="#" class="text-sm hover:text-white">Terms</a></li>
731
+ </ul>
732
+ </div>
733
+ </div>
734
+
735
+ <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between">
736
+ <p class="text-sm text-gray-400">
737
+ &copy; 2025 METAFILM. All rights reserved.
738
+ </p>
739
+ <div class="mt-4 md:mt-0 flex space-x-6">
740
+ <a href="https://redaigc.com" class="text-sm text-gray-400 hover:text-white">REDAIGC.com</a>
741
+ <a href="#" class="text-sm text-gray-400 hover:text-white">Privacy Policy</a>
742
+ <a href="#" class="text-sm text-gray-400 hover:text-white">Terms of Service</a>
743
+ <a href="#" class="text-sm text-gray-400 hover:text-white">Cookie Policy</a>
744
+ </div>
745
+ </div>
746
+ </div>
747
+ </footer>
748
+
749
+ <script>
750
+ // AI Generator functionality
751
+ document.addEventListener('DOMContentLoaded', function() {
752
+ const generateBtn = document.getElementById('generate-btn');
753
+ const promptInput = document.getElementById('prompt');
754
+ const placeholder = document.getElementById('placeholder');
755
+ const loading = document.getElementById('loading');
756
+ const generatedImage = document.getElementById('generated-image');
757
+ const variations = document.getElementById('variations');
758
+ const downloadBtn = document.getElementById('download-btn');
759
+ const refreshBtn = document.getElementById('refresh-btn');
760
+ const styleOptions = document.querySelectorAll('.style-option');
761
+ const aspectOptions = document.querySelectorAll('.aspect-option');
762
+
763
+ let selectedStyle = 'realistic';
764
+ let selectedAspect = '1:1';
765
+
766
+ // Style selection
767
+ styleOptions.forEach(option => {
768
+ option.addEventListener('click', function(e) {
769
+ e.preventDefault();
770
+ styleOptions.forEach(opt => {
771
+ opt.classList.remove('bg-indigo-100', 'text-indigo-700');
772
+ opt.classList.add('bg-white', 'hover:bg-gray-50');
773
+ });
774
+ this.classList.add('bg-indigo-100', 'text-indigo-700');
775
+ this.classList.remove('bg-white', 'hover:bg-gray-50');
776
+ selectedStyle = this.dataset.style;
777
+ });
778
+ });
779
+
780
+ // Aspect ratio selection
781
+ aspectOptions.forEach(option => {
782
+ option.addEventListener('click', function(e) {
783
+ e.preventDefault();
784
+ aspectOptions.forEach(opt => {
785
+ opt.classList.remove('bg-indigo-100', 'text-indigo-700');
786
+ opt.classList.add('bg-white', 'hover:bg-gray-50');
787
+ });
788
+ this.classList.add('bg-indigo-100', 'text-indigo-700');
789
+ this.classList.remove('bg-white', 'hover:bg-gray-50');
790
+ selectedAspect = this.dataset.ratio;
791
+ });
792
+ });
793
+
794
+ // Generate image
795
+ generateBtn.addEventListener('click', function() {
796
+ const prompt = promptInput.value.trim();
797
+
798
+ if (!prompt) {
799
+ alert('Please enter a description for your design');
800
+ return;
801
+ }
802
+
803
+ // Show loading state
804
+ placeholder.classList.add('hidden');
805
+ loading.classList.remove('hidden');
806
+ generatedImage.classList.remove('show');
807
+ generatedImage.classList.add('hidden');
808
+ variations.classList.add('hidden');
809
+ downloadBtn.classList.add('hidden');
810
+ refreshBtn.classList.add('hidden');
811
+
812
+ // Simulate API call with timeout
813
+ setTimeout(() => {
814
+ // Hide loading
815
+ loading.classList.add('hidden');
816
+
817
+ // Show generated image (using placeholder from unsplash)
818
+ const imageUrl = `https://source.unsplash.com/random/600x400/?${encodeURIComponent(prompt.split(' ').join(',') + ',' + selectedStyle)}`;
819
+ generatedImage.src = imageUrl;
820
+ generatedImage.classList.remove('hidden');
821
+ setTimeout(() => {
822
+ generatedImage.classList.add('show');
823
+ }, 50);
824
+
825
+ // Show variations and buttons
826
+ variations.classList.remove('hidden');
827
+ downloadBtn.classList.remove('hidden');
828
+ refreshBtn.classList.remove('hidden');
829
+
830
+ // Set variation images
831
+ const variationImages = variations.querySelectorAll('img');
832
+ variationImages.forEach((img, index) => {
833
+ img.src = `https://source.unsplash.com/random/300x200/?sig=${index + 1},${encodeURIComponent(prompt.split(' '].join(',') + ',' + selectedStyle)}`;
834
+ });
835
+ }, 3000);
836
+ });
837
+
838
+ // Download image
839
+ downloadBtn.addEventListener('click', function() {
840
+ if (generatedImage.src) {
841
+ const link = document.createElement('a');
842
+ link.href = generatedImage.src;
843
+ link.download = `redaigc-design-${Date.now()}.jpg`;
844
+ document.body.appendChild(link);
845
+ link.click();
846
+ document.body.removeChild(link);
847
+ }
848
+ });
849
+
850
+ // Refresh image
851
+ refreshBtn.addEventListener('click', function() {
852
+ if (generatedImage.src) {
853
+ const prompt = promptInput.value.trim();
854
+ generatedImage.src = `https://source.unsplash.com/random/600x400/?sig=${Math.floor(Math.random() * 1000)},${encodeURIComponent(prompt.split(' ').join(',') + ',' + selectedStyle)}`;
855
+
856
+ // Refresh variations too
857
+ const variationImages = variations.querySelectorAll('img');
858
+ variationImages.forEach((img, index) => {
859
+ img.src = `https://source.unsplash.com/random/300x200/?sig=${index + 1 + Math.floor(Math.random() * 1000)},${encodeURIComponent(prompt.split(' ').join(',') + ',' + selectedStyle)}`;
860
+ });
861
+ }
862
+ });
863
+
864
+ // Variation selection
865
+ variations.addEventListener('click', function(e) {
866
+ if (e.target.tagName === 'IMG' && e.target.closest('.variation-btn')) {
867
+ const mainImageSrc = e.target.src.replace('300x200', '600x400');
868
+ generatedImage.src = mainImageSrc;
869
+ }
870
+ });
871
+ });
872
+ </script>
873
+ <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>
874
+ </html>