Hugging Face's logo

Spaces:
saeidmp
/
anycoder-61da358f
Running

App Files Community
saeidmp commited on
Commit
492f48b
·
verified ·
1 Parent(s): 8e41a15

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +799 -19
index.html CHANGED
@@ -1,19 +1,799 @@
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="fa" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>دیزاینس | پلتفرم جامع سیستم دیزاین</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --bg-primary: #0a0a0f;
13
+ --bg-secondary: #12121a;
14
+ --bg-card: #1a1a24;
15
+ --text-primary: #ffffff;
16
+ --text-secondary: #a0a0b0;
17
+ --accent: #6366f1;
18
+ --accent-glow: rgba(99, 102, 241, 0.4);
19
+ --border: rgba(255, 255, 255, 0.08);
20
+ }
21
+
22
+ * {
23
+ font-family: 'Vazirmatn', sans-serif;
24
+ box-sizing: border-box;
25
+ }
26
+
27
+ body {
28
+ background: var(--bg-primary);
29
+ color: var(--text-primary);
30
+ min-height: 100vh;
31
+ overflow-x: hidden;
32
+ }
33
+
34
+ /* Background Effects */
35
+ .bg-mesh {
36
+ position: fixed;
37
+ inset: 0;
38
+ z-index: -1;
39
+ background:
40
+ radial-gradient(ellipse 80% 50% at 20% 40%, rgba(99, 102, 241, 0.15), transparent),
41
+ radial-gradient(ellipse 60% 40% at 80% 60%, rgba(236, 72, 153, 0.1), transparent),
42
+ radial-gradient(ellipse 50% 30% at 50% 90%, rgba(34, 211, 238, 0.08), transparent);
43
+ }
44
+
45
+ .noise-overlay {
46
+ position: fixed;
47
+ inset: 0;
48
+ z-index: -1;
49
+ opacity: 0.03;
50
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
51
+ }
52
+
53
+ /* Glassmorphism */
54
+ .glass {
55
+ background: rgba(26, 26, 36, 0.6);
56
+ backdrop-filter: blur(20px);
57
+ border: 1px solid var(--border);
58
+ }
59
+
60
+ .glass-light {
61
+ background: rgba(255, 255, 255, 0.03);
62
+ backdrop-filter: blur(10px);
63
+ border: 1px solid var(--border);
64
+ }
65
+
66
+ /* Custom Scrollbar */
67
+ ::-webkit-scrollbar {
68
+ width: 6px;
69
+ height: 6px;
70
+ }
71
+
72
+ ::-webkit-scrollbar-track {
73
+ background: var(--bg-secondary);
74
+ }
75
+
76
+ ::-webkit-scrollbar-thumb {
77
+ background: var(--accent);
78
+ border-radius: 3px;
79
+ }
80
+
81
+ /* Animations */
82
+ @keyframes float {
83
+ 0%, 100% { transform: translateY(0) rotate(0deg); }
84
+ 50% { transform: translateY(-20px) rotate(2deg); }
85
+ }
86
+
87
+ @keyframes pulse-glow {
88
+ 0%, 100% { box-shadow: 0 0 20px var(--accent-glow); }
89
+ 50% { box-shadow: 0 0 40px var(--accent-glow), 0 0 60px var(--accent-glow); }
90
+ }
91
+
92
+ @keyframes slide-up {
93
+ from { opacity: 0; transform: translateY(30px); }
94
+ to { opacity: 1; transform: translateY(0); }
95
+ }
96
+
97
+ @keyframes fade-in {
98
+ from { opacity: 0; }
99
+ to { opacity: 1; }
100
+ }
101
+
102
+ @keyframes gradient-shift {
103
+ 0% { background-position: 0% 50%; }
104
+ 50% { background-position: 100% 50%; }
105
+ 100% { background-position: 0% 50%; }
106
+ }
107
+
108
+ .animate-float {
109
+ animation: float 6s ease-in-out infinite;
110
+ }
111
+
112
+ .animate-pulse-glow {
113
+ animation: pulse-glow 3s ease-in-out infinite;
114
+ }
115
+
116
+ .animate-slide-up {
117
+ animation: slide-up 0.6s ease-out forwards;
118
+ }
119
+
120
+ .animate-fade-in {
121
+ animation: fade-in 0.4s ease-out forwards;
122
+ }
123
+
124
+ .gradient-animated {
125
+ background-size: 200% 200%;
126
+ animation: gradient-shift 4s ease infinite;
127
+ }
128
+
129
+ /* Staggered Animation */
130
+ .stagger-1 { animation-delay: 0.1s; }
131
+ .stagger-2 { animation-delay: 0.2s; }
132
+ .stagger-3 { animation-delay: 0.3s; }
133
+ .stagger-4 { animation-delay: 0.4s; }
134
+ .stagger-5 { animation-delay: 0.5s; }
135
+ .stagger-6 { animation-delay: 0.6s; }
136
+
137
+ /* Hover Effects */
138
+ .hover-lift {
139
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
140
+ }
141
+
142
+ .hover-lift:hover {
143
+ transform: translateY(-5px);
144
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
145
+ }
146
+
147
+ .hover-glow:hover {
148
+ box-shadow: 0 0 30px var(--accent-glow);
149
+ }
150
+
151
+ /* Color Swatch */
152
+ .color-swatch {
153
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
154
+ }
155
+
156
+ .color-swatch:hover {
157
+ transform: scale(1.05);
158
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
159
+ }
160
+
161
+ /* Tab System */
162
+ .tab-btn {
163
+ position: relative;
164
+ transition: color 0.3s ease;
165
+ }
166
+
167
+ .tab-btn::after {
168
+ content: '';
169
+ position: absolute;
170
+ bottom: -2px;
171
+ right: 0;
172
+ width: 0;
173
+ height: 2px;
174
+ background: var(--accent);
175
+ transition: width 0.3s ease;
176
+ }
177
+
178
+ .tab-btn.active::after {
179
+ width: 100%;
180
+ }
181
+
182
+ .tab-btn.active {
183
+ color: var(--accent);
184
+ }
185
+
186
+ /* Component Card */
187
+ .component-card {
188
+ transition: all 0.3s ease;
189
+ }
190
+
191
+ .component-card:hover {
192
+ border-color: var(--accent);
193
+ }
194
+
195
+ /* Sidebar */
196
+ .sidebar-link {
197
+ position: relative;
198
+ transition: all 0.3s ease;
199
+ }
200
+
201
+ .sidebar-link::before {
202
+ content: '';
203
+ position: absolute;
204
+ right: 0;
205
+ top: 50%;
206
+ transform: translateY(-50%);
207
+ width: 3px;
208
+ height: 0;
209
+ background: var(--accent);
210
+ border-radius: 3px;
211
+ transition: height 0.3s ease;
212
+ }
213
+
214
+ .sidebar-link:hover::before,
215
+ .sidebar-link.active::before {
216
+ height: 60%;
217
+ }
218
+
219
+ .sidebar-link:hover,
220
+ .sidebar-link.active {
221
+ background: rgba(99, 102, 241, 0.1);
222
+ color: var(--accent);
223
+ }
224
+
225
+ /* Mobile Menu */
226
+ .mobile-menu {
227
+ transform: translateX(100%);
228
+ transition: transform 0.3s ease;
229
+ }
230
+
231
+ .mobile-menu.open {
232
+ transform: translateX(0);
233
+ }
234
+
235
+ /* Toast */
236
+ .toast {
237
+ transform: translateX(120%);
238
+ transition: transform 0.3s ease;
239
+ }
240
+
241
+ .toast.show {
242
+ transform: translateX(0);
243
+ }
244
+
245
+ /* Focus States */
246
+ *:focus-visible {
247
+ outline: 2px solid var(--accent);
248
+ outline-offset: 2px;
249
+ }
250
+
251
+ /* Reduced Motion */
252
+ @media (prefers-reduced-motion: reduce) {
253
+ *, *::before, *::after {
254
+ animation-duration: 0.01ms !important;
255
+ animation-iteration-count: 1 !important;
256
+ transition-duration: 0.01ms !important;
257
+ }
258
+ }
259
+
260
+ /* Grid Pattern */
261
+ .grid-pattern {
262
+ background-image:
263
+ linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
264
+ linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
265
+ background-size: 40px 40px;
266
+ }
267
+ </style>
268
+ </head>
269
+ <body class="grid-pattern">
270
+ <div class="bg-mesh"></div>
271
+ <div class="noise-overlay"></div>
272
+
273
+ <!-- Toast Notification -->
274
+ <div id="toast" class="toast fixed top-6 left-6 z-50 glass rounded-xl px-6 py-4 flex items-center gap-3">
275
+ <i data-lucide="check-circle" class="w-5 h-5 text-emerald-400"></i>
276
+ <span id="toast-message">رنگ با موفقیت کپی شد!</span>
277
+ </div>
278
+
279
+ <!-- Header -->
280
+ <header class="fixed top-0 right-0 left-0 z-40 glass">
281
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
282
+ <div class="flex items-center justify-between h-16 sm:h-20">
283
+ <!-- Logo -->
284
+ <div class="flex items-center gap-3">
285
+ <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center animate-pulse-glow">
286
+ <i data-lucide="layers" class="w-5 h-5"></i>
287
+ </div>
288
+ <div>
289
+ <h1 class="text-lg sm:text-xl font-bold bg-gradient-to-l from-indigo-400 to-purple-400 bg-clip-text text-transparent">دیزاینس</h1>
290
+ <p class="text-[10px] text-gray-500 hidden sm:block">پلتفرم جامع سیستم دیزاین</p>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Navigation -->
295
+ <nav class="hidden md:flex items-center gap-8">
296
+ <a href="#palettes" class="text-sm text-gray-400 hover:text-white transition-colors">پالت رنگی</a>
297
+ <a href="#typography" class="text-sm text-gray-400 hover:text-white transition-colors">تایپوگرافی</a>
298
+ <a href="#components" class="text-sm text-gray-400 hover:text-white transition-colors">کامپوننت‌ها</a>
299
+ <a href="#templates" class="text-sm text-gray-400 hover:text-white transition-colors">قالب‌ها</a>
300
+ </nav>
301
+
302
+ <!-- Actions -->
303
+ <div class="flex items-center gap-3">
304
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="hidden sm:flex items-center gap-2 text-xs text-gray-400 hover:text-white transition-colors">
305
+ <span>Built with anycoder</span>
306
+ <i data-lucide="external-link" class="w-3 h-3"></i>
307
+ </a>
308
+ <button id="theme-toggle" class="w-10 h-10 rounded-xl glass-light flex items-center justify-center hover:bg-white/10 transition-colors">
309
+ <i data-lucide="moon" class="w-5 h-5"></i>
310
+ </button>
311
+ <button id="mobile-menu-btn" class="md:hidden w-10 h-10 rounded-xl glass-light flex items-center justify-center">
312
+ <i data-lucide="menu" class="w-5 h-5"></i>
313
+ </button>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </header>
318
+
319
+ <!-- Mobile Menu -->
320
+ <div id="mobile-menu" class="mobile-menu fixed inset-y-0 left-0 w-72 z-50 glass p-6">
321
+ <div class="flex justify-between items-center mb-8">
322
+ <span class="font-bold text-lg">منو</span>
323
+ <button id="close-menu" class="w-10 h-10 rounded-xl glass-light flex items-center justify-center">
324
+ <i data-lucide="x" class="w-5 h-5"></i>
325
+ </button>
326
+ </div>
327
+ <nav class="space-y-2">
328
+ <a href="#palettes" class="sidebar-link block px-4 py-3 rounded-xl text-gray-300">پالت رنگی</a>
329
+ <a href="#typography" class="sidebar-link block px-4 py-3 rounded-xl text-gray-300">تایپوگرافی</a>
330
+ <a href="#components" class="sidebar-link block px-4 py-3 rounded-xl text-gray-300">کامپوننت‌ها</a>
331
+ <a href="#templates" class="sidebar-link block px-4 py-3 rounded-xl text-gray-300">قالب‌ها</a>
332
+ </nav>
333
+ </div>
334
+
335
+ <!-- Main Content -->
336
+ <main class="pt-24 sm:pt-28 pb-16">
337
+ <!-- Hero Section -->
338
+ <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-20">
339
+ <div class="text-center mb-16 opacity-0 animate-slide-up">
340
+ <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-light text-sm text-gray-400 mb-6">
341
+ <i data-lucide="sparkles" class="w-4 h-4 text-indigo-400"></i>
342
+ <span>نسخه ۲.۰ منتشر شد</span>
343
+ </div>
344
+ <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
345
+ <span class="bg-gradient-to-l from-white via-indigo-200 to-purple-200 bg-clip-text text-transparent">سیستم دیزاین</span>
346
+ <br>
347
+ <span class="text-white">حرفه‌ای و جامع</span>
348
+ </h1>
349
+ <p class="text-lg text-gray-400 max-w-2xl mx-auto mb-8">
350
+ مجموعه‌ای کامل از پالت‌های رنگی، سیستم تایپوگرافی، کامپوننت‌های UI و قالب‌های آماده برای طراحی و پیاده‌سازی انواع نرم‌افزار، اپلیکیشن و وبسایت
351
+ </p>
352
+ <div class="flex flex-wrap justify-center gap-4">
353
+ <button class="px-8 py-4 rounded-xl bg-gradient-to-l from-indigo-500 to-purple-600 font-medium hover-lift hover-glow">
354
+ شروع کنید
355
+ </button>
356
+ <button class="px-8 py-4 rounded-xl glass font-medium hover-lift flex items-center gap-2">
357
+ <i data-lucide="play" class="w-4 h-4"></i>
358
+ مشاهده دمو
359
+ </button>
360
+ </div>
361
+ </div>
362
+
363
+ <!-- Stats -->
364
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 opacity-0 animate-slide-up stagger-1">
365
+ <div class="glass rounded-2xl p-6 text-center hover-lift">
366
+ <div class="text-3xl font-bold text-indigo-400 mb-2">۵۰۰+</div>
367
+ <div class="text-sm text-gray-400">پالت رنگی</div>
368
+ </div>
369
+ <div class="glass rounded-2xl p-6 text-center hover-lift">
370
+ <div class="text-3xl font-bold text-purple-400 mb-2">۱۲۰+</div>
371
+ <div class="text-sm text-gray-400">کامپوننت</div>
372
+ </div>
373
+ <div class="glass rounded-2xl p-6 text-center hover-lift">
374
+ <div class="text-3xl font-bold text-pink-400 mb-2">۸۰+</div>
375
+ <div class="text-sm text-gray-400">قالب آماده</div>
376
+ </div>
377
+ <div class="glass rounded-2xl p-6 text-center hover-lift">
378
+ <div class="text-3xl font-bold text-cyan-400 mb-2">۱۵۰۰+</div>
379
+ <div class="text-sm text-gray-400">کاربر فعال</div>
380
+ </div>
381
+ </div>
382
+ </section>
383
+
384
+ <!-- Color Palettes Section -->
385
+ <section id="palettes" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24">
386
+ <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
387
+ <div>
388
+ <h2 class="text-2xl sm:text-3xl font-bold mb-2">پالت‌های رنگی</h2>
389
+ <p class="text-gray-400">مجموعه‌ای از پالت‌های رنگی حرفه‌ای و هماهنگ</p>
390
+ </div>
391
+ <div class="flex gap-2">
392
+ <button class="tab-btn active px-4 py-2 text-sm" data-tab="all">همه</button>
393
+ <button class="tab-btn px-4 py-2 text-sm text-gray-400" data-tab="light">روشن</button>
394
+ <button class="tab-btn px-4 py-2 text-sm text-gray-400" data-tab="dark">تیره</button>
395
+ <button class="tab-btn px-4 py-2 text-sm text-gray-400" data-tab="vibrant">شاد</button>
396
+ </div>
397
+ </div>
398
+
399
+ <!-- Palette Generator -->
400
+ <div class="glass rounded-2xl p-6 sm:p-8 mb-8">
401
+ <div class="flex flex-col lg:flex-row gap-8">
402
+ <div class="flex-1">
403
+ <h3 class="text-lg font-bold mb-4">تولیدکننده پالت رنگی</h3>
404
+ <p class="text-sm text-gray-400 mb-6">رنگ پایه را انتخاب کنید تا پالت رنگی متناسب تولید شود</p>
405
+
406
+ <div class="mb-6">
407
+ <label class="block text-sm text-gray-400 mb-2">رنگ پایه</label>
408
+ <div class="flex gap-3">
409
+ <input type="color" id="base-color" value="#6366f1" class="w-16 h-12 rounded-xl cursor-pointer bg-transparent border-2 border-white/10">
410
+ <input type="text" id="base-color-text" value="#6366f1" class="flex-1 bg-white/5 border border-white/10 rounded-xl px-4 text-sm focus:border-indigo-500 transition-colors">
411
+ </div>
412
+ </div>
413
+
414
+ <div class="mb-6">
415
+ <label class="block text-sm text-gray-400 mb-2">نوع پالت</label>
416
+ <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
417
+ <button class="palette-type active px-4 py-2 rounded-xl glass-light text-sm" data-type="analogous">آنالوگ</button>
418
+ <button class="palette-type px-4 py-2 rounded-xl glass-light text-sm text-gray-400" data-type="complementary">مکمل</button>
419
+ <button class="palette-type px-4 py-2 rounded-xl glass-light text-sm text-gray-400" data-type="triadic">سه‌گانه</button>
420
+ <button class="palette-type px-4 py-2 rounded-xl glass-light text-sm text-gray-400" data-type="monochromatic">تک‌رنگ</button>
421
+ </div>
422
+ </div>
423
+
424
+ <button id="generate-palette" class="w-full px-6 py-3 rounded-xl bg-gradient-to-l from-indigo-500 to-purple-600 font-medium hover-lift">
425
+ تولید پالت
426
+ </button>
427
+ </div>
428
+
429
+ <div class="flex-1">
430
+ <label class="block text-sm text-gray-400 mb-4">پالت تولید شده</label>
431
+ <div id="generated-palette" class="grid grid-cols-5 gap-2">
432
+ <!-- Generated colors will be inserted here -->
433
+ </div>
434
+ <button id="copy-palette" class="mt-4 w-full px-4 py-2 rounded-xl glass-light text-sm text-gray-400 hover:text-white transition-colors flex items-center justify-center gap-2">
435
+ <i data-lucide="copy" class="w-4 h-4"></i>
436
+ کپی کد رنگ‌ها
437
+ </button>
438
+ </div>
439
+ </div>
440
+ </div>
441
+
442
+ <!-- Pre-made Palettes -->
443
+ <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4" id="palettes-grid">
444
+ <!-- Palettes will be inserted here -->
445
+ </div>
446
+ </section>
447
+
448
+ <!-- Typography Section -->
449
+ <section id="typography" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24">
450
+ <div class="mb-8">
451
+ <h2 class="text-2xl sm:text-3xl font-bold mb-2">سیستم تایپوگرافی</h2>
452
+ <p class="text-gray-400">مقیاس و استانداردهای تایپوگرافی</p>
453
+ </div>
454
+
455
+ <div class="grid lg:grid-cols-2 gap-6">
456
+ <!-- Type Scale -->
457
+ <div class="glass rounded-2xl p-6 sm:p-8">
458
+ <h3 class="text-lg font-bold mb-6 flex items-center gap-2">
459
+ <i data-lucide="type" class="w-5 h-5 text-indigo-400"></i>
460
+ مقیاس تایپوگرافی
461
+ </h3>
462
+ <div class="space-y-4" id="type-scale">
463
+ <!-- Type scale items will be inserted here -->
464
+ </div>
465
+ </div>
466
+
467
+ <!-- Font Weights -->
468
+ <div class="glass rounded-2xl p-6 sm:p-8">
469
+ <h3 class="text-lg font-bold mb-6 flex items-center gap-2">
470
+ <i data-lucide="bold" class="w-5 h-5 text-purple-400"></i>
471
+ وزن فونت
472
+ </h3>
473
+ <div class="space-y-4" id="font-weights">
474
+ <!-- Font weights will be inserted here -->
475
+ </div>
476
+ </div>
477
+
478
+ <!-- Line Heights -->
479
+ <div class="glass rounded-2xl p-6 sm:p-8">
480
+ <h3 class="text-lg font-bold mb-6 flex items-center gap-2">
481
+ <i data-lucide="align-justify" class="w-5 h-5 text-pink-400"></i>
482
+ ارتفاع خط
483
+ </h3>
484
+ <div class="space-y-3" id="line-heights">
485
+ <!-- Line heights will be inserted here -->
486
+ </div>
487
+ </div>
488
+
489
+ <!-- Letter Spacing -->
490
+ <div class="glass rounded-2xl p-6 sm:p-8">
491
+ <h3 class="text-lg font-bold mb-6 flex items-center gap-2">
492
+ <i data-lucide="space" class="w-5 h-5 text-cyan-400"></i>
493
+ فاصله حروف
494
+ </h3>
495
+ <div class="space-y-3" id="letter-spacing">
496
+ <!-- Letter spacing will be inserted here -->
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </section>
501
+
502
+ <!-- Components Section -->
503
+ <section id="components" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24">
504
+ <div class="mb-8">
505
+ <h2 class="text-2xl sm:text-3xl font-bold mb-2">کامپوننت‌های UI</h2>
506
+ <p class="text-gray-400">مجموعه‌ای از کامپوننت‌های قابل استفاده مجدد</p>
507
+ </div>
508
+
509
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
510
+ <!-- Buttons -->
511
+ <div class="component-card glass rounded-2xl p-6">
512
+ <h3 class="text-sm font-bold text-gray-400 mb-4">دکمه‌ها</h3>
513
+ <div class="space-y-3">
514
+ <button class="w-full px-6 py-3 rounded-xl bg-gradient-to-l from-indigo-500 to-purple-600 font-medium hover:opacity-90 transition-opacity">دکمه اصلی</button>
515
+ <button class="w-full px-6 py-3 rounded-xl glass-light font-medium hover:bg-white/10 transition-colors">دکمه ثانویه</button>
516
+ <button class="w-full px-6 py-3 rounded-xl border-2 border-indigo-500 text-indigo-400 font-medium hover:bg-indigo-500/10 transition-colors">دکمه طرح‌دار</button>
517
+ <button class="w-full px-6 py-3 rounded-xl text-indigo-400 font-medium hover:bg-indigo-500/10 transition-colors">دکمه متنی</button>
518
+ </div>
519
+ </div>
520
+
521
+ <!-- Inputs -->
522
+ <div class="component-card glass rounded-2xl p-6">
523
+ <h3 class="text-sm font-bold text-gray-400 mb-4">ورودی‌ها</h3>
524
+ <div class="space-y-3">
525
+ <input type="text" placeholder="ورودی متن" class="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 focus:border-indigo-500 transition-colors text-sm">
526
+ <div class="relative">
527
+ <input type="text" placeholder="جستجو..." class="w-full pl-4 pr-12 py-3 rounded-xl bg-white/5 border border-white/10 focus:border-indigo-500 transition-colors text-sm">
528
+ <i data-lucide="search" class="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500"></i>
529
+ </div>
530
+ <textarea placeholder="متن طولانی..." rows="3" class="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 focus:border-indigo-500 transition-colors text-sm resize-none"></textarea>
531
+ </div>
532
+ </div>
533
+
534
+ <!-- Cards -->
535
+ <div class="component-card glass rounded-2xl p-6">
536
+ <h3 class="text-sm font-bold text-gray-400 mb-4">کارت‌ها</h3>
537
+ <div class="glass-light rounded-xl p-4">
538
+ <div class="flex items-center gap-3 mb-3">
539
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600"></div>
540
+ <div>
541
+ <div class="font-medium text-sm">عنوان کارت</div>
542
+ <div class="text-xs text-gray-500">توضیحات کوتاه</div>
543
+ </div>
544
+ </div>
545
+ <p class="text-xs text-gray-400">این یک نمونه کارت ساده است که می‌توانید در پروژه‌های خود استفاده کنید.</p>
546
+ </div>
547
+ </div>
548
+
549
+ <!-- Badges -->
550
+ <div class="component-card glass rounded-2xl p-6">
551
+ <h3 class="text-sm font-bold text-gray-400 mb-4">نشان‌ها</h3>
552
+ <div class="flex flex-wrap gap-2">
553
+ <span class="px-3 py-1 rounded-full bg-indigo-500/20 text-indigo-400 text-xs">پیش‌فرض</span>
554
+ <span class="px-3 py-1 rounded-full bg-emerald-500/20 text-emerald-400 text-xs">موفقیت</span>
555
+ <span class="px-3 py-1 rounded-full bg-amber-500/20 text-amber-400 text-xs">هشدار</span>
556
+ <span class="px-3 py-1 rounded-full bg-rose-500/20 text-rose-400 text-xs">خطا</span>
557
+ <span class="px-3 py-1 rounded-full bg-cyan-500/20 text-cyan-400 text-xs">اطلاعات</span>
558
+ </div>
559
+ </div>
560
+
561
+ <!-- Avatars -->
562
+ <div class="component-card glass rounded-2xl p-6">
563
+ <h3 class="text-sm font-bold text-gray-400 mb-4">آواتارها</h3>
564
+ <div class="flex items-center gap-4">
565
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-xs">XS</div>
566
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center text-sm">SM</div>
567
+ <div class="w-12 h-12 rounded-full bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center">MD</div>
568
+ <div class="w-14 h-14 rounded-full bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center text-lg">LG</div>
569
+ </div>
570
+ <div class="mt-4 flex items-center -space-x-2 space-x-reverse">
571
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 border-2 border-gray-900"></div>
572
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-600 border-2 border-gray-900"></div>
573
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-pink-500 to-rose-600 border-2 border-gray-900"></div>
574
+ <div class="w-10 h-10 rounded-full bg-white/10 border-2 border-gray-900 flex items-center justify-center text-xs">+۵</div>
575
+ </div>
576
+ </div>
577
+
578
+ <!-- Progress -->
579
+ <div class="component-card glass rounded-2xl p-6">
580
+ <h3 class="text-sm font-bold text-gray-400 mb-4">پیشرفت</h3>
581
+ <div class="space-y-4">
582
+ <div>
583
+ <div class="flex justify-between text-xs mb-2">
584
+ <span>پیشرفت پروژه</span>
585
+ <span>۷۵٪</span>
586
+ </div>
587
+ <div class="h-2 bg-white/5 rounded-full overflow-hidden">
588
+ <div class="h-full w-3/4 bg-gradient-to-l from-indigo-500 to-purple-600 rounded-full"></div>
589
+ </div>
590
+ </div>
591
+ <div>
592
+ <div class="flex justify-between text-xs mb-2">
593
+ <span>بارگذاری</span>
594
+ <span>۴۵٪</span>
595
+ </div>
596
+ <div class="h-2 bg-white/5 rounded-full overflow-hidden">
597
+ <div class="h-full w-[45%] bg-gradient-to-l from-cyan-500 to-blue-600 rounded-full"></div>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ </section>
604
+
605
+ <!-- Templates Section -->
606
+ <section id="templates" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24">
607
+ <div class="mb-8">
608
+ <h2 class="text-2xl sm:text-3xl font-bold mb-2">قالب‌های آماده</h2>
609
+ <p class="text-gray-400">قالب‌های از پیش طراحی شده برای شروع سریع</p>
610
+ </div>
611
+
612
+ <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6" id="templates-grid">
613
+ <!-- Templates will be inserted here -->
614
+ </div>
615
+ </section>
616
+
617
+ <!-- Spacing Section -->
618
+ <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24">
619
+ <div class="mb-8">
620
+ <h2 class="text-2xl sm:text-3xl font-bold mb-2">سیستم فاصله‌گذاری</h2>
621
+ <p class="text-gray-400">مقیاس استاندارد فاصله‌گذاری</p>
622
+ </div>
623
+
624
+ <div class="glass rounded-2xl p-6 sm:p-8">
625
+ <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-4" id="spacing-grid">
626
+ <!-- Spacing items will be inserted here -->
627
+ </div>
628
+ </div>
629
+ </section>
630
+
631
+ <!-- Shadows Section -->
632
+ <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24">
633
+ <div class="mb-8">
634
+ <h2 class="text-2xl sm:text-3xl font-bold mb-2">سیستم سایه</h2>
635
+ <p class="text-gray-400">مجموعه‌ای از سایه‌های آماده</p>
636
+ </div>
637
+
638
+ <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6" id="shadows-grid">
639
+ <!-- Shadows will be inserted here -->
640
+ </div>
641
+ </section>
642
+ </main>
643
+
644
+ <!-- Footer -->
645
+ <footer class="border-t border-white/5">
646
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
647
+ <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
648
+ <div>
649
+ <div class="flex items-center gap-3 mb-4">
650
+ <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
651
+ <i data-lucide="layers" class="w-5 h-5"></i>
652
+ </div>
653
+ <span class="font-bold text-lg">دیزاینس</span>
654
+ </div>
655
+ <p class="text-sm text-gray-400">پلتفرم جامع سیستم دیزاین برای طراحی و پیاده‌سازی انواع نرم‌افزار و وبسایت</p>
656
+ </div>
657
+ <div>
658
+ <h4 class="font-bold mb-4">لینک‌های سریع</h4>
659
+ <ul class="space-y-2 text-sm text-gray-400">
660
+ <li><a href="#" class="hover:text-white transition-colors">مستندات</a></li>
661
+ <li><a href="#" class="hover:text-white transition-colors">راهنما</a></li>
662
+ <li><a href="#" class="hover:text-white transition-colors">نمونه‌کارها</a></li>
663
+ <li><a href="#" class="hover:text-white transition-colors">بلاگ</a></li>
664
+ </ul>
665
+ </div>
666
+ <div>
667
+ <h4 class="font-bold mb-4">منابع</h4>
668
+ <ul class="space-y-2 text-sm text-gray-400">
669
+ <li><a href="#" class="hover:text-white transition-colors">آیکون‌ها</a></li>
670
+ <li><a href="#" class="hover:text-white transition-colors">فونت‌ها</a></li>
671
+ <li><a href="#" class="hover:text-white transition-colors">تصاویر</a></li>
672
+ <li><a href="#" class="hover:text-white transition-colors">ابزارها</a></li>
673
+ </ul>
674
+ </div>
675
+ <div>
676
+ <h4 class="font-bold mb-4">ارتباط با ما</h4>
677
+ <ul class="space-y-2 text-sm text-gray-400">
678
+ <li><a href="#" class="hover:text-white transition-colors">پشتیبانی</a></li>
679
+ <li><a href="#" class="hover:text-white transition-colors">تماس</a></li>
680
+ <li><a href="#" class="hover:text-white transition-colors">همکاری</a></li>
681
+ </ul>
682
+ </div>
683
+ </div>
684
+ <div class="border-t border-white/5 mt-8 pt-8 flex flex-col sm:flex-row justify-between items-center gap-4">
685
+ <p class="text-sm text-gray-500">تمامی حقوق محفوظ است © ۱۴۰۳</p>
686
+ <div class="flex gap-4">
687
+ <a href="#" class="w-10 h-10 rounded-xl glass-light flex items-center justify-center hover:bg-white/10 transition-colors">
688
+ <i data-lucide="twitter" class="w-5 h-5"></i>
689
+ </a>
690
+ <a href="#" class="w-10 h-10 rounded-xl glass-light flex items-center justify-center hover:bg-white/10 transition-colors">
691
+ <i data-lucide="github" class="w-5 h-5"></i>
692
+ </a>
693
+ <a href="#" class="w-10 h-10 rounded-xl glass-light flex items-center justify-center hover:bg-white/10 transition-colors">
694
+ <i data-lucide="linkedin" class="w-5 h-5"></i>
695
+ </a>
696
+ </div>
697
+ </div>
698
+ </div>
699
+ </footer>
700
+
701
+ <script>
702
+ // Initialize Lucide Icons
703
+ lucide.createIcons();
704
+
705
+ // Data
706
+ const palettes = [
707
+ {
708
+ name: 'سایبرپانک',
709
+ type: 'vibrant',
710
+ colors: ['#ff00ff', '#00ffff', '#ff0080', '#8000ff', '#00ff80']
711
+ },
712
+ {
713
+ name: 'غروب طلایی',
714
+ type: 'light',
715
+ colors: ['#ffd700', '#ff8c00', '#ff6347', '#ff4500', '#dc143c']
716
+ },
717
+ {
718
+ name: 'جنگل مرموز',
719
+ type: 'dark',
720
+ colors: ['#0d1117', '#161b22', '#21262d', '#30363d', '#8b949e']
721
+ },
722
+ {
723
+ name: 'اقیانوس آرام',
724
+ type: 'light',
725
+ colors: ['#0077b6', '#00b4d8', '#90e0ef', '#caf0f8', '#023e8a']
726
+ },
727
+ {
728
+ name: 'شب ستاره‌ای',
729
+ type: 'dark',
730
+ colors: ['#1a1a2e', '#16213e', '#0f3460', '#533483', '#e94560']
731
+ },
732
+ {
733
+ name: 'بهار نوروز',
734
+ type: 'vibrant',
735
+ colors: ['#7cb518', '#588157', '#3a5a40', '#344e41', '#a3b18a']
736
+ },
737
+ {
738
+ name: 'صحرای طلایی',
739
+ type: 'light',
740
+ colors: ['#f4e285', '#f2b705', '#f28c0f', '#f27405', '#8c6a03']
741
+ },
742
+ {
743
+ name: 'نیلِ کبود',
744
+ type: 'dark',
745
+ colors: ['#1d3557', '#457b9d', '#a8dadc', '#f1faee', '#e63946']
746
+ },
747
+ {
748
+ name: 'بنفش سلطنتی',
749
+ type: 'vibrant',
750
+ colors: ['#7400b8', '#6930c3', '#5e60ce', '#5390d9', '#4ea8de']
751
+ }
752
+ ];
753
+
754
+ const typeScale = [
755
+ { name: 'نمایش', size: '4rem', class: 'text-6xl' },
756
+ { name: 'عنوان ۱', size: '2.25rem', class: 'text-4xl' },
757
+ { name: 'عنوان ۲', size: '1.875rem', class: 'text-3xl' },
758
+ { name: 'عنوان ۳', size: '1.5rem', class: 'text-2xl' },
759
+ { name: 'عنوان ۴', size: '1.25rem', class: 'text-xl' },
760
+ { name: 'عنوان ۵', size: '1.125rem', class: 'text-lg' },
761
+ { name: 'بدنه', size: '1rem', class: 'text-base' },
762
+ { name: 'کوچک', size: '0.875rem', class: 'text-sm' },
763
+ { name: 'ریزه', size: '0.75rem', class: 'text-xs' }
764
+ ];
765
+
766
+ const fontWeights = [
767
+ { name: 'نازک', weight: '100' },
768
+ { name: 'خیلی سبک', weight: '200' },
769
+ { name: 'سبک', weight: '300' },
770
+ { name: 'معمولی', weight: '400' },
771
+ { name: 'متوسط', weight: '500' },
772
+ { name: 'نیمه‌بولد', weight: '600' },
773
+ { name: 'بولد', weight: '700' },
774
+ { name: 'خیلی بولد', weight: '800' },
775
+ { name: 'سیاه', weight: '900' }
776
+ ];
777
+
778
+ const lineHeights = [
779
+ { name: 'فشرده', value: '1', class: 'leading-none' },
780
+ { name: 'نزدیک', value: '1.25', class: 'leading-tight' },
781
+ { name: 'تک‌فاصله', value: '1.5', class: 'leading-normal' },
782
+ { name: 'راحت', value: '1.75', class: 'leading-relaxed' },
783
+ { name: 'باز', value: '2', class: 'leading-loose' }
784
+ ];
785
+
786
+ const letterSpacing = [
787
+ { name: 'فشرده‌تر', value: '-0.05em' },
788
+ { name: 'فشرده', value: '-0.025em' },
789
+ { name: 'معمولی', value: '0' },
790
+ { name: 'باز', value: '0.025em' },
791
+ { name: 'بازتر', value: '0.05em' },
792
+ { name: 'وسیع', value: '0.1em' }
793
+ ];
794
+
795
+ const spacing = [
796
+ { name: '۰', value: '0', px: '0px' },
797
+ { name: '۱', value: '0.25rem', px: '4px' },
798
+ { name: '۲', value: '0.5rem', px: '8px' },
799
+ { name: '۳',