🔥 PROFESSIONAL VERSION - خفنترین نسخه
✨ تغییرات عظیم
1️⃣ فونتهای حرفهای
✅ Inter - فونت اصلی (وزنهای 400-900)
✅ JetBrains Mono - فونت اعداد و کدها
✅ -webkit-font-smoothing: antialiased
✅ -moz-osx-font-smoothing: grayscale
چرا این فونتها؟
- Inter: بهترین فونت برای UI (استفاده GitHub, Figma, Stripe)
- JetBrains Mono: عالی برای اعداد و قیمتها (خوانایی بالا)
- Font Smoothing: متنها خیلی واضحتر و خواناتر
2️⃣ سایزهای فونت بهینه
✅ Body: 16px (پایه)
✅ Headings: 1.25rem - 2rem (20px - 32px)
✅ Buttons: 1rem (16px)
✅ Labels: 0.8125rem - 0.9375rem (13px - 15px)
✅ Values: 1.5rem - 1.75rem (24px - 28px)
3️⃣ وزنهای فونت
✅ Regular: 400 (متن عادی)
✅ Medium: 500 (متن ثانویه)
✅ Semibold: 600 (لیبلها)
✅ Bold: 700 (مهم)
✅ Extrabold: 800 (خیلی مهم)
✅ Black: 900 (عناوین اصلی)
4️⃣ رنگبندی با کنتراست بالا
✅ --text-primary: #ffffff (سفید خالص)
✅ --text-secondary: #e2e8f0 (خاکستری روشن)
✅ --text-muted: #94a3b8 (خاکستری متوسط)
قبل:
- رنگهای کمرنگ
- خوانایی پایین
- چشم خسته میشد
بعد:
- کنتراست عالی
- خوانایی بالا
- راحت برای چشم
5️⃣ فاصلهگذاری بهتر
✅ Letter-spacing: -0.5px تا 2px
✅ Line-height: 1.2 تا 1.9
✅ Padding: 16px تا 40px
✅ Gap: 12px تا 40px
6️⃣ Border و Shadow بهتر
✅ Border: 2px (قبلاً 1px بود)
✅ Border-radius: 10px - 24px (قبلاً 8px - 16px)
✅ Shadow: 4 سطح (sm, md, lg, xl)
✅ Glow effects: برای دکمهها و کارتها
🎨 مقایسه قبل و بعد
فونتها:
| قبل | بعد |
|---|---|
| ❌ System fonts | ✅ Inter + JetBrains Mono |
| ❌ یک وزن | ✅ 6 وزن (400-900) |
| ❌ خوانایی متوسط | ✅ خوانایی عالی |
سایزها:
| قبل | بعد |
|---|---|
| ❌ 14px - 16px | ✅ 16px - 32px |
| ❌ کوچک | ✅ بزرگ و واضح |
| ❌ سخت خوندن | ✅ راحت خوندن |
رنگها:
| قبل | بعد |
|---|---|
| ❌ #f1f5f9 | ✅ #ffffff |
| ❌ کنتراست کم | ✅ کنتراست بالا |
| ❌ کمرنگ | ✅ واضح و روشن |
فاصلهگذاری:
| قبل | بعد |
|---|---|
| ❌ 20px - 24px | ✅ 24px - 40px |
| ❌ شلوغ | ✅ تمیز و منظم |
| ❌ چسبیده | ✅ فضای کافی |
📊 جزئیات تکنیکال
فونت Inter:
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-weight: 400 | 500 | 600 | 700 | 800 | 900;
استفاده:
- Logo: 900 (Black)
- Headings: 800-900 (Extrabold-Black)
- Buttons: 800 (Extrabold)
- Body: 500-600 (Medium-Semibold)
- Labels: 600-700 (Semibold-Bold)
فونت JetBrains Mono:
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-weight: 400 | 500 | 600 | 700;
استفاده:
- قیمتها
- اعداد
- Stat values
- Signal values
- Modal values
Letter Spacing:
Logo: -1px (فشرده)
Headings: -0.5px (کمی فشرده)
Buttons: 1px (باز)
Labels: 0.5px - 2px (خیلی باز)
Line Height:
Headings: 1.2 (فشرده)
Body: 1.6 (متوسط)
Descriptions: 1.7 - 1.9 (باز)
🎯 کامپوننتهای بهبود یافته
1. Logo:
Font: Inter Black (900)
Size: 2rem (32px)
Letter-spacing: -1px
Gradient: Blue → Cyan
2. Headers:
Font: Inter Extrabold (800-900)
Size: 1.25rem - 1.375rem (20px - 22px)
Letter-spacing: -0.5px
Color: #ffffff
3. Buttons:
Font: Inter Extrabold (800)
Size: 1rem (16px)
Letter-spacing: 1px
Padding: 16px 32px
Border-radius: 14px
4. Crypto Cards:
Symbol: JetBrains Mono Bold (700)
Size: 1.25rem (20px)
Price: JetBrains Mono Black (900)
Size: 1.5rem (24px)
Change: JetBrains Mono Extrabold (800)
Size: 1rem (16px)
5. Strategy Cards:
Name: Inter Black (900)
Size: 1.25rem (20px)
Description: Inter Medium (500)
Size: 0.9375rem (15px)
Line-height: 1.7
6. Signals:
Badge: Inter Black (900)
Size: 1.0625rem (17px)
Symbol: JetBrains Mono Black (900)
Size: 1.5rem (24px)
Values: JetBrains Mono Black (900)
Size: 1.5rem (24px)
7. Modals:
Title: Inter Black (900)
Size: 2rem (32px)
Labels: Inter Extrabold (800)
Size: 0.9375rem (15px)
Values: JetBrains Mono Black (900)
Size: 1.75rem (28px)
🔥 ویژگیهای خفن
1. Font Loading:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
→ فونتها سریعتر لود میشن
2. Font Smoothing:
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
→ متنها خیلی صافتر
3. Text Rendering:
text-rendering: optimizeLegibility;
→ خوانایی بهتر
4. Kerning:
font-feature-settings: "kern" 1;
→ فاصله بین حروف بهتر
📱 Responsive
Desktop (> 768px):
Logo: 2rem (32px)
Headings: 1.25rem - 1.375rem
Body: 1rem (16px)
Values: 1.5rem - 1.75rem
Mobile (< 768px):
Logo: 1.5rem (24px)
Headings: 1.125rem
Body: 0.9375rem (15px)
Values: 1.25rem - 1.5rem
🎨 رنگبندی جدید
Text Colors:
Primary: #ffffff (100% سفید)
Secondary: #e2e8f0 (93% سفید)
Muted: #94a3b8 (65% سفید)
Background Colors:
Primary: #0a0e1a (تیرهتر)
Secondary: #111827
Tertiary: #1f2937
Card: #1e293b
Accent Colors:
Primary: #3b82f6
Accent: #06b6d4
Success: #10b981
Danger: #ef4444
Warning: #f59e0b
✅ چکلیست بهبودها
فونتها:
- ✅ Inter برای UI
- ✅ JetBrains Mono برای اعداد
- ✅ 6 وزن مختلف
- ✅ Font smoothing
- ✅ Preconnect برای سرعت
سایزها:
- ✅ 16px base
- ✅ سایزهای بزرگتر
- ✅ Responsive
- ✅ خوانایی عالی
رنگها:
- ✅ کنتراست بالا
- ✅ سفید خالص
- ✅ Gradient ها
- ✅ Glow effects
فاصلهگذاری:
- ✅ Padding بیشتر
- ✅ Gap بیشتر
- ✅ Line-height بهتر
- ✅ Letter-spacing بهینه
Border & Shadow:
- ✅ Border 2px
- ✅ Radius بزرگتر
- ✅ Shadow های قویتر
- ✅ Glow effects
🚀 نتیجه
قبل:
❌ فونتهای ضعیف
❌ سایزهای کوچک
❌ رنگهای کمرنگ
❌ فاصلهگذاری کم
❌ خوانایی پایین
❌ جذابیت کم
بعد:
✅ فونتهای حرفهای (Inter + JetBrains Mono)
✅ سایزهای بزرگ و واضح
✅ رنگهای روشن با کنتراست بالا
✅ فاصلهگذاری عالی
✅ خوانایی فوقالعاده
✅ جذابیت خیرهکننده
📁 فایل:
static/pages/trading-assistant/index-pro.html
🎯 استفاده:
# باز کنید و لذت ببرید!
index-pro.html
🔥 حالا واقعاً خفنه! 🔥
با فونتهای حرفهای، سایزهای بزرگ، رنگهای روشن، و فاصلهگذاری عالی!
آخرین بهروزرسانی: 2 دسامبر 2025