Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>دیزاینس | پلتفرم جامع سیستم دیزاین</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-primary: #0a0a0f; | |
| --bg-secondary: #12121a; | |
| --bg-card: #1a1a24; | |
| --text-primary: #ffffff; | |
| --text-secondary: #a0a0b0; | |
| --accent: #6366f1; | |
| --accent-glow: rgba(99, 102, 241, 0.4); | |
| --border: rgba(255, 255, 255, 0.08); | |
| } | |
| * { | |
| font-family: 'Vazirmatn', sans-serif; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Background Effects */ | |
| .bg-mesh { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| background: | |
| radial-gradient(ellipse 80% 50% at 20% 40%, rgba(99, 102, 241, 0.15), transparent), | |
| radial-gradient(ellipse 60% 40% at 80% 60%, rgba(236, 72, 153, 0.1), transparent), | |
| radial-gradient(ellipse 50% 30% at 50% 90%, rgba(34, 211, 238, 0.08), transparent); | |
| } | |
| .noise-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| opacity: 0.03; | |
| 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"); | |
| } | |
| /* Glassmorphism */ | |
| .glass { | |
| background: rgba(26, 26, 36, 0.6); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid var(--border); | |
| } | |
| .glass-light { | |
| background: rgba(255, 255, 255, 0.03); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--border); | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-secondary); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--accent); | |
| border-radius: 3px; | |
| } | |
| /* Animations */ | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-20px) rotate(2deg); } | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 0 20px var(--accent-glow); } | |
| 50% { box-shadow: 0 0 40px var(--accent-glow), 0 0 60px var(--accent-glow); } | |
| } | |
| @keyframes slide-up { | |
| from { opacity: 0; transform: translateY(30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fade-in { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes gradient-shift { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .animate-pulse-glow { | |
| animation: pulse-glow 3s ease-in-out infinite; | |
| } | |
| .animate-slide-up { | |
| animation: slide-up 0.6s ease-out forwards; | |
| } | |
| .animate-fade-in { | |
| animation: fade-in 0.4s ease-out forwards; | |
| } | |
| .gradient-animated { | |
| background-size: 200% 200%; | |
| animation: gradient-shift 4s ease infinite; | |
| } | |
| /* Staggered Animation */ | |
| .stagger-1 { animation-delay: 0.1s; } | |
| .stagger-2 { animation-delay: 0.2s; } | |
| .stagger-3 { animation-delay: 0.3s; } | |
| .stagger-4 { animation-delay: 0.4s; } | |
| .stagger-5 { animation-delay: 0.5s; } | |
| .stagger-6 { animation-delay: 0.6s; } | |
| /* Hover Effects */ | |
| .hover-lift { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .hover-lift:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); | |
| } | |
| .hover-glow:hover { | |
| box-shadow: 0 0 30px var(--accent-glow); | |
| } | |
| /* Color Swatch */ | |
| .color-swatch { | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .color-swatch:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| /* Tab System */ | |
| .tab-btn { | |
| position: relative; | |
| transition: color 0.3s ease; | |
| } | |
| .tab-btn::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| right: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--accent); | |
| transition: width 0.3s ease; | |
| } | |
| .tab-btn.active::after { | |
| width: 100%; | |
| } | |
| .tab-btn.active { | |
| color: var(--accent); | |
| } | |
| /* Component Card */ | |
| .component-card { | |
| transition: all 0.3s ease; | |
| } | |
| .component-card:hover { | |
| border-color: var(--accent); | |
| } | |
| /* Sidebar */ | |
| .sidebar-link { | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-link::before { | |
| content: ''; | |
| position: absolute; | |
| right: 0; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 3px; | |
| height: 0; | |
| background: var(--accent); | |
| border-radius: 3px; | |
| transition: height 0.3s ease; | |
| } | |
| .sidebar-link:hover::before, | |
| .sidebar-link.active::before { | |
| height: 60%; | |
| } | |
| .sidebar-link:hover, | |
| .sidebar-link.active { | |
| background: rgba(99, 102, 241, 0.1); | |
| color: var(--accent); | |
| } | |
| /* Mobile Menu */ | |
| .mobile-menu { | |
| transform: translateX(100%); | |
| transition: transform 0.3s ease; | |
| } | |
| .mobile-menu.open { | |
| transform: translateX(0); | |
| } | |
| /* Toast */ | |
| .toast { | |
| transform: translateX(120%); | |
| transition: transform 0.3s ease; | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| } | |
| /* Focus States */ | |
| *:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| } | |
| /* Reduced Motion */ | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |
| /* Grid Pattern */ | |
| .grid-pattern { | |
| background-image: | |
| linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| } | |
| </style> | |
| </head> | |
| <body class="grid-pattern"> | |
| <div class="bg-mesh"></div> | |
| <div class="noise-overlay"></div> | |
| <!-- Toast Notification --> | |
| <div id="toast" class="toast fixed top-6 left-6 z-50 glass rounded-xl px-6 py-4 flex items-center gap-3"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-emerald-400"></i> | |
| <span id="toast-message">رنگ با موفقیت کپی شد!</span> | |
| </div> | |
| <!-- Header --> | |
| <header class="fixed top-0 right-0 left-0 z-40 glass"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16 sm:h-20"> | |
| <!-- Logo --> | |
| <div class="flex items-center gap-3"> | |
| <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"> | |
| <i data-lucide="layers" class="w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <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> | |
| <p class="text-[10px] text-gray-500 hidden sm:block">پلتفرم جامع سیستم دیزاین</p> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="hidden md:flex items-center gap-8"> | |
| <a href="#palettes" class="text-sm text-gray-400 hover:text-white transition-colors">پالت رنگی</a> | |
| <a href="#typography" class="text-sm text-gray-400 hover:text-white transition-colors">تایپوگرافی</a> | |
| <a href="#components" class="text-sm text-gray-400 hover:text-white transition-colors">کامپوننتها</a> | |
| <a href="#templates" class="text-sm text-gray-400 hover:text-white transition-colors">قالبها</a> | |
| </nav> | |
| <!-- Actions --> | |
| <div class="flex items-center gap-3"> | |
| <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"> | |
| <span>Built with anycoder</span> | |
| <i data-lucide="external-link" class="w-3 h-3"></i> | |
| </a> | |
| <button id="theme-toggle" class="w-10 h-10 rounded-xl glass-light flex items-center justify-center hover:bg-white/10 transition-colors"> | |
| <i data-lucide="moon" class="w-5 h-5"></i> | |
| </button> | |
| <button id="mobile-menu-btn" class="md:hidden w-10 h-10 rounded-xl glass-light flex items-center justify-center"> | |
| <i data-lucide="menu" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="mobile-menu fixed inset-y-0 left-0 w-72 z-50 glass p-6"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <span class="font-bold text-lg">منو</span> | |
| <button id="close-menu" class="w-10 h-10 rounded-xl glass-light flex items-center justify-center"> | |
| <i data-lucide="x" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <nav class="space-y-2"> | |
| <a href="#palettes" class="sidebar-link block px-4 py-3 rounded-xl text-gray-300">پالت رنگی</a> | |
| <a href="#typography" class="sidebar-link block px-4 py-3 rounded-xl text-gray-300">تایپوگرافی</a> | |
| <a href="#components" class="sidebar-link block px-4 py-3 rounded-xl text-gray-300">کامپوننتها</a> | |
| <a href="#templates" class="sidebar-link block px-4 py-3 rounded-xl text-gray-300">قالبها</a> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="pt-24 sm:pt-28 pb-16"> | |
| <!-- Hero Section --> | |
| <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-20"> | |
| <div class="text-center mb-16 opacity-0 animate-slide-up"> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-light text-sm text-gray-400 mb-6"> | |
| <i data-lucide="sparkles" class="w-4 h-4 text-indigo-400"></i> | |
| <span>نسخه ۲.۰ منتشر شد</span> | |
| </div> | |
| <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 leading-tight"> | |
| <span class="bg-gradient-to-l from-white via-indigo-200 to-purple-200 bg-clip-text text-transparent">سیستم دیزاین</span> | |
| <br> | |
| <span class="text-white">حرفهای و جامع</span> | |
| </h1> | |
| <p class="text-lg text-gray-400 max-w-2xl mx-auto mb-8"> | |
| مجموعهای کامل از پالتهای رنگی، سیستم تایپوگرافی، کامپوننتهای UI و قالبهای آماده برای طراحی و پیادهسازی انواع نرمافزار، اپلیکیشن و وبسایت | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <button class="px-8 py-4 rounded-xl bg-gradient-to-l from-indigo-500 to-purple-600 font-medium hover-lift hover-glow"> | |
| شروع کنید | |
| </button> | |
| <button class="px-8 py-4 rounded-xl glass font-medium hover-lift flex items-center gap-2"> | |
| <i data-lucide="play" class="w-4 h-4"></i> | |
| مشاهده دمو | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats --> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 opacity-0 animate-slide-up stagger-1"> | |
| <div class="glass rounded-2xl p-6 text-center hover-lift"> | |
| <div class="text-3xl font-bold text-indigo-400 mb-2">۵۰۰+</div> | |
| <div class="text-sm text-gray-400">پالت رنگی</div> | |
| </div> | |
| <div class="glass rounded-2xl p-6 text-center hover-lift"> | |
| <div class="text-3xl font-bold text-purple-400 mb-2">۱۲۰+</div> | |
| <div class="text-sm text-gray-400">کامپوننت</div> | |
| </div> | |
| <div class="glass rounded-2xl p-6 text-center hover-lift"> | |
| <div class="text-3xl font-bold text-pink-400 mb-2">۸۰+</div> | |
| <div class="text-sm text-gray-400">قالب آماده</div> | |
| </div> | |
| <div class="glass rounded-2xl p-6 text-center hover-lift"> | |
| <div class="text-3xl font-bold text-cyan-400 mb-2">۱۵۰۰+</div> | |
| <div class="text-sm text-gray-400">کاربر فعال</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Color Palettes Section --> | |
| <section id="palettes" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24"> | |
| <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8"> | |
| <div> | |
| <h2 class="text-2xl sm:text-3xl font-bold mb-2">پالتهای رنگی</h2> | |
| <p class="text-gray-400">مجموعهای از پالتهای رنگی حرفهای و هماهنگ</p> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button class="tab-btn active px-4 py-2 text-sm" data-tab="all">همه</button> | |
| <button class="tab-btn px-4 py-2 text-sm text-gray-400" data-tab="light">روشن</button> | |
| <button class="tab-btn px-4 py-2 text-sm text-gray-400" data-tab="dark">تیره</button> | |
| <button class="tab-btn px-4 py-2 text-sm text-gray-400" data-tab="vibrant">شاد</button> | |
| </div> | |
| </div> | |
| <!-- Palette Generator --> | |
| <div class="glass rounded-2xl p-6 sm:p-8 mb-8"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <div class="flex-1"> | |
| <h3 class="text-lg font-bold mb-4">تولیدکننده پالت رنگی</h3> | |
| <p class="text-sm text-gray-400 mb-6">رنگ پایه را انتخاب کنید تا پالت رنگی متناسب تولید شود</p> | |
| <div class="mb-6"> | |
| <label class="block text-sm text-gray-400 mb-2">رنگ پایه</label> | |
| <div class="flex gap-3"> | |
| <input type="color" id="base-color" value="#6366f1" class="w-16 h-12 rounded-xl cursor-pointer bg-transparent border-2 border-white/10"> | |
| <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"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm text-gray-400 mb-2">نوع پالت</label> | |
| <div class="grid grid-cols-2 sm:grid-cols-4 gap-2"> | |
| <button class="palette-type active px-4 py-2 rounded-xl glass-light text-sm" data-type="analogous">آنالوگ</button> | |
| <button class="palette-type px-4 py-2 rounded-xl glass-light text-sm text-gray-400" data-type="complementary">مکمل</button> | |
| <button class="palette-type px-4 py-2 rounded-xl glass-light text-sm text-gray-400" data-type="triadic">سهگانه</button> | |
| <button class="palette-type px-4 py-2 rounded-xl glass-light text-sm text-gray-400" data-type="monochromatic">تکرنگ</button> | |
| </div> | |
| </div> | |
| <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"> | |
| تولید پالت | |
| </button> | |
| </div> | |
| <div class="flex-1"> | |
| <label class="block text-sm text-gray-400 mb-4">پالت تولید شده</label> | |
| <div id="generated-palette" class="grid grid-cols-5 gap-2"> | |
| <!-- Generated colors will be inserted here --> | |
| </div> | |
| <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"> | |
| <i data-lucide="copy" class="w-4 h-4"></i> | |
| کپی کد رنگها | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pre-made Palettes --> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4" id="palettes-grid"> | |
| <!-- Palettes will be inserted here --> | |
| </div> | |
| </section> | |
| <!-- Typography Section --> | |
| <section id="typography" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24"> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl sm:text-3xl font-bold mb-2">سیستم تایپوگرافی</h2> | |
| <p class="text-gray-400">مقیاس و استانداردهای تایپوگرافی</p> | |
| </div> | |
| <div class="grid lg:grid-cols-2 gap-6"> | |
| <!-- Type Scale --> | |
| <div class="glass rounded-2xl p-6 sm:p-8"> | |
| <h3 class="text-lg font-bold mb-6 flex items-center gap-2"> | |
| <i data-lucide="type" class="w-5 h-5 text-indigo-400"></i> | |
| مقیاس تایپوگرافی | |
| </h3> | |
| <div class="space-y-4" id="type-scale"> | |
| <!-- Type scale items will be inserted here --> | |
| </div> | |
| </div> | |
| <!-- Font Weights --> | |
| <div class="glass rounded-2xl p-6 sm:p-8"> | |
| <h3 class="text-lg font-bold mb-6 flex items-center gap-2"> | |
| <i data-lucide="bold" class="w-5 h-5 text-purple-400"></i> | |
| وزن فونت | |
| </h3> | |
| <div class="space-y-4" id="font-weights"> | |
| <!-- Font weights will be inserted here --> | |
| </div> | |
| </div> | |
| <!-- Line Heights --> | |
| <div class="glass rounded-2xl p-6 sm:p-8"> | |
| <h3 class="text-lg font-bold mb-6 flex items-center gap-2"> | |
| <i data-lucide="align-justify" class="w-5 h-5 text-pink-400"></i> | |
| ارتفاع خط | |
| </h3> | |
| <div class="space-y-3" id="line-heights"> | |
| <!-- Line heights will be inserted here --> | |
| </div> | |
| </div> | |
| <!-- Letter Spacing --> | |
| <div class="glass rounded-2xl p-6 sm:p-8"> | |
| <h3 class="text-lg font-bold mb-6 flex items-center gap-2"> | |
| <i data-lucide="space" class="w-5 h-5 text-cyan-400"></i> | |
| فاصله حروف | |
| </h3> | |
| <div class="space-y-3" id="letter-spacing"> | |
| <!-- Letter spacing will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Components Section --> | |
| <section id="components" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24"> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl sm:text-3xl font-bold mb-2">کامپوننتهای UI</h2> | |
| <p class="text-gray-400">مجموعهای از کامپوننتهای قابل استفاده مجدد</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Buttons --> | |
| <div class="component-card glass rounded-2xl p-6"> | |
| <h3 class="text-sm font-bold text-gray-400 mb-4">دکمهها</h3> | |
| <div class="space-y-3"> | |
| <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> | |
| <button class="w-full px-6 py-3 rounded-xl glass-light font-medium hover:bg-white/10 transition-colors">دکمه ثانویه</button> | |
| <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> | |
| <button class="w-full px-6 py-3 rounded-xl text-indigo-400 font-medium hover:bg-indigo-500/10 transition-colors">دکمه متنی</button> | |
| </div> | |
| </div> | |
| <!-- Inputs --> | |
| <div class="component-card glass rounded-2xl p-6"> | |
| <h3 class="text-sm font-bold text-gray-400 mb-4">ورودیها</h3> | |
| <div class="space-y-3"> | |
| <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"> | |
| <div class="relative"> | |
| <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"> | |
| <i data-lucide="search" class="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500"></i> | |
| </div> | |
| <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> | |
| </div> | |
| </div> | |
| <!-- Cards --> | |
| <div class="component-card glass rounded-2xl p-6"> | |
| <h3 class="text-sm font-bold text-gray-400 mb-4">کارتها</h3> | |
| <div class="glass-light rounded-xl p-4"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600"></div> | |
| <div> | |
| <div class="font-medium text-sm">عنوان کارت</div> | |
| <div class="text-xs text-gray-500">توضیحات کوتاه</div> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-400">این یک نمونه کارت ساده است که میتوانید در پروژههای خود استفاده کنید.</p> | |
| </div> | |
| </div> | |
| <!-- Badges --> | |
| <div class="component-card glass rounded-2xl p-6"> | |
| <h3 class="text-sm font-bold text-gray-400 mb-4">نشانها</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 rounded-full bg-indigo-500/20 text-indigo-400 text-xs">پیشفرض</span> | |
| <span class="px-3 py-1 rounded-full bg-emerald-500/20 text-emerald-400 text-xs">موفقیت</span> | |
| <span class="px-3 py-1 rounded-full bg-amber-500/20 text-amber-400 text-xs">هشدار</span> | |
| <span class="px-3 py-1 rounded-full bg-rose-500/20 text-rose-400 text-xs">خطا</span> | |
| <span class="px-3 py-1 rounded-full bg-cyan-500/20 text-cyan-400 text-xs">اطلاعات</span> | |
| </div> | |
| </div> | |
| <!-- Avatars --> | |
| <div class="component-card glass rounded-2xl p-6"> | |
| <h3 class="text-sm font-bold text-gray-400 mb-4">آواتارها</h3> | |
| <div class="flex items-center gap-4"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| <div class="mt-4 flex items-center -space-x-2 space-x-reverse"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 border-2 border-gray-900"></div> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-600 border-2 border-gray-900"></div> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-pink-500 to-rose-600 border-2 border-gray-900"></div> | |
| <div class="w-10 h-10 rounded-full bg-white/10 border-2 border-gray-900 flex items-center justify-center text-xs">+۵</div> | |
| </div> | |
| </div> | |
| <!-- Progress --> | |
| <div class="component-card glass rounded-2xl p-6"> | |
| <h3 class="text-sm font-bold text-gray-400 mb-4">پیشرفت</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-xs mb-2"> | |
| <span>پیشرفت پروژه</span> | |
| <span>۷۵٪</span> | |
| </div> | |
| <div class="h-2 bg-white/5 rounded-full overflow-hidden"> | |
| <div class="h-full w-3/4 bg-gradient-to-l from-indigo-500 to-purple-600 rounded-full"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs mb-2"> | |
| <span>بارگذاری</span> | |
| <span>۴۵٪</span> | |
| </div> | |
| <div class="h-2 bg-white/5 rounded-full overflow-hidden"> | |
| <div class="h-full w-[45%] bg-gradient-to-l from-cyan-500 to-blue-600 rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Templates Section --> | |
| <section id="templates" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24"> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl sm:text-3xl font-bold mb-2">قالبهای آماده</h2> | |
| <p class="text-gray-400">قالبهای از پیش طراحی شده برای شروع سریع</p> | |
| </div> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6" id="templates-grid"> | |
| <!-- Templates will be inserted here --> | |
| </div> | |
| </section> | |
| <!-- Spacing Section --> | |
| <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24"> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl sm:text-3xl font-bold mb-2">سیستم فاصلهگذاری</h2> | |
| <p class="text-gray-400">مقیاس استاندارد فاصلهگذاری</p> | |
| </div> | |
| <div class="glass rounded-2xl p-6 sm:p-8"> | |
| <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-4" id="spacing-grid"> | |
| <!-- Spacing items will be inserted here --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Shadows Section --> | |
| <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24"> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl sm:text-3xl font-bold mb-2">سیستم سایه</h2> | |
| <p class="text-gray-400">مجموعهای از سایههای آماده</p> | |
| </div> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6" id="shadows-grid"> | |
| <!-- Shadows will be inserted here --> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="border-t border-white/5"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center gap-3 mb-4"> | |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center"> | |
| <i data-lucide="layers" class="w-5 h-5"></i> | |
| </div> | |
| <span class="font-bold text-lg">دیزاینس</span> | |
| </div> | |
| <p class="text-sm text-gray-400">پلتفرم جامع سیستم دیزاین برای طراحی و پیادهسازی انواع نرمافزار و وبسایت</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">لینکهای سریع</h4> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition-colors">مستندات</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">راهنما</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">نمونهکارها</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">بلاگ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">منابع</h4> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition-colors">آیکونها</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">فونتها</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">تصاویر</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">ابزارها</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">ارتباط با ما</h4> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition-colors">پشتیبانی</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">تماس</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">همکاری</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-white/5 mt-8 pt-8 flex flex-col sm:flex-row justify-between items-center gap-4"> | |
| <p class="text-sm text-gray-500">تمامی حقوق محفوظ است © ۱۴۰۳</p> | |
| <div class="flex gap-4"> | |
| <a href="#" class="w-10 h-10 rounded-xl glass-light flex items-center justify-center hover:bg-white/10 transition-colors"> | |
| <i data-lucide="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-xl glass-light flex items-center justify-center hover:bg-white/10 transition-colors"> | |
| <i data-lucide="github" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-xl glass-light flex items-center justify-center hover:bg-white/10 transition-colors"> | |
| <i data-lucide="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Lucide Icons | |
| lucide.createIcons(); | |
| // Data | |
| const palettes = [ | |
| { | |
| name: 'سایبرپانک', | |
| type: 'vibrant', | |
| colors: ['#ff00ff', '#00ffff', '#ff0080', '#8000ff', '#00ff80'] | |
| }, | |
| { | |
| name: 'غروب طلایی', | |
| type: 'light', | |
| colors: ['#ffd700', '#ff8c00', '#ff6347', '#ff4500', '#dc143c'] | |
| }, | |
| { | |
| name: 'جنگل مرموز', | |
| type: 'dark', | |
| colors: ['#0d1117', '#161b22', '#21262d', '#30363d', '#8b949e'] | |
| }, | |
| { | |
| name: 'اقیانوس آرام', | |
| type: 'light', | |
| colors: ['#0077b6', '#00b4d8', '#90e0ef', '#caf0f8', '#023e8a'] | |
| }, | |
| { | |
| name: 'شب ستارهای', | |
| type: 'dark', | |
| colors: ['#1a1a2e', '#16213e', '#0f3460', '#533483', '#e94560'] | |
| }, | |
| { | |
| name: 'بهار نوروز', | |
| type: 'vibrant', | |
| colors: ['#7cb518', '#588157', '#3a5a40', '#344e41', '#a3b18a'] | |
| }, | |
| { | |
| name: 'صحرای طلایی', | |
| type: 'light', | |
| colors: ['#f4e285', '#f2b705', '#f28c0f', '#f27405', '#8c6a03'] | |
| }, | |
| { | |
| name: 'نیلِ کبود', | |
| type: 'dark', | |
| colors: ['#1d3557', '#457b9d', '#a8dadc', '#f1faee', '#e63946'] | |
| }, | |
| { | |
| name: 'بنفش سلطنتی', | |
| type: 'vibrant', | |
| colors: ['#7400b8', '#6930c3', '#5e60ce', '#5390d9', '#4ea8de'] | |
| } | |
| ]; | |
| const typeScale = [ | |
| { name: 'نمایش', size: '4rem', class: 'text-6xl' }, | |
| { name: 'عنوان ۱', size: '2.25rem', class: 'text-4xl' }, | |
| { name: 'عنوان ۲', size: '1.875rem', class: 'text-3xl' }, | |
| { name: 'عنوان ۳', size: '1.5rem', class: 'text-2xl' }, | |
| { name: 'عنوان ۴', size: '1.25rem', class: 'text-xl' }, | |
| { name: 'عنوان ۵', size: '1.125rem', class: 'text-lg' }, | |
| { name: 'بدنه', size: '1rem', class: 'text-base' }, | |
| { name: 'کوچک', size: '0.875rem', class: 'text-sm' }, | |
| { name: 'ریزه', size: '0.75rem', class: 'text-xs' } | |
| ]; | |
| const fontWeights = [ | |
| { name: 'نازک', weight: '100' }, | |
| { name: 'خیلی سبک', weight: '200' }, | |
| { name: 'سبک', weight: '300' }, | |
| { name: 'معمولی', weight: '400' }, | |
| { name: 'متوسط', weight: '500' }, | |
| { name: 'نیمهبولد', weight: '600' }, | |
| { name: 'بولد', weight: '700' }, | |
| { name: 'خیلی بولد', weight: '800' }, | |
| { name: 'سیاه', weight: '900' } | |
| ]; | |
| const lineHeights = [ | |
| { name: 'فشرده', value: '1', class: 'leading-none' }, | |
| { name: 'نزدیک', value: '1.25', class: 'leading-tight' }, | |
| { name: 'تکفاصله', value: '1.5', class: 'leading-normal' }, | |
| { name: 'راحت', value: '1.75', class: 'leading-relaxed' }, | |
| { name: 'باز', value: '2', class: 'leading-loose' } | |
| ]; | |
| const letterSpacing = [ | |
| { name: 'فشردهتر', value: '-0.05em' }, | |
| { name: 'فشرده', value: '-0.025em' }, | |
| { name: 'معمولی', value: '0' }, | |
| { name: 'باز', value: '0.025em' }, | |
| { name: 'بازتر', value: '0.05em' }, | |
| { name: 'وسیع', value: '0.1em' } | |
| ]; | |
| const spacing = [ | |
| { name: '۰', value: '0', px: '0px' }, | |
| { name: '۱', value: '0.25rem', px: '4px' }, | |
| { name: '۲', value: '0.5rem', px: '8px' }, | |
| { name: '۳', |