static/pages/trading-assistant/MODAL_SYSTEM_GUIDE.md

🎯 راهنمای سیستم Modal (پاپ‌آپ)

✨ ویژگی‌های جدید

🎨 3 نوع Modal خیره‌کننده

1️⃣ Crypto Details Modal

• نمایش اطلاعات کامل ارز
• قیمت، تغییرات، حجم، مارکت کپ
• اندیکاتورهای تکنیکال (RSI, MACD, EMA)
• سطوح Support و Resistance
• دکمه Analyze مستقیم

2️⃣ Strategy Details Modal

• جزئیات کامل استراتژی
• Success Rate، Timeframe، Risk Level
• وزن هر کامپوننت (RSI+MACD 40%, SMC 25%, ...)
• توضیحات کامل
• دکمه انتخاب استراتژی

3️⃣ Signal Details Modal

• اطلاعات کامل سیگنال
• Entry، Stop Loss، Take Profit
• Confidence و Risk/Reward Ratio
• تحلیل جزئی (Score breakdown)
• دکمه Copy سیگنال

---

🎮 نحوه استفاده

باز کردن Modal ها:

روش 1: Double Click

🖱️ دوبار کلیک روی کارت ارز → باز شدن Crypto Modal
🖱️ دوبار کلیک روی کارت استراتژی → باز شدن Strategy Modal
🖱️ دوبار کلیک روی کارت سیگنال → باز شدن Signal Modal

روش 2: Single Click (انتخاب)

🖱️ یک بار کلیک → انتخاب (بدون باز شدن Modal)

بستن Modal ها:

✖️ کلیک روی دکمه Close
🖱️ کلیک روی پس‌زمینه تیره (overlay)
⌨️ فشردن کلید ESC

---

🎨 طراحی و انیمیشن‌ها

Glass Morphism

✅ backdrop-filter: blur(30px)
✅ پس‌زمینه شیشه‌ای
✅ Border های نورانی
✅ Shadow های چند لایه

انیمیشن‌های ورود

✅ Scale از 0.9 به 1
✅ TranslateY از 30px به 0
✅ Opacity از 0 به 1
✅ مدت: 500ms (smooth)

انیمیشن‌های خاص

✅ Gradient Shift در header
✅ Icon Pulse در logo
✅ Hover effects روی items
✅ Close button rotation

---

📊 ساختار Modal

Header

┌─────────────────────────────────────┐
│ 🔷 Icon  Title          ✖️ Close   │
└─────────────────────────────────────┘

• آیکون SVG متحرک
• عنوان با gradient
• دکمه Close با hover effect

Body

┌─────────────────────────────────────┐
│  📊 Info Grid (2 columns)           │
│  ┌──────────┐  ┌──────────┐        │
│  │ Item 1   │  │ Item 2   │        │
│  └──────────┘  └──────────┘        │
│                                     │
│  📋 Details List                    │
│  • Item 1                           │
│  • Item 2                           │
│  • Item 3                           │
└─────────────────────────────────────┘

• Grid 2 ستونه برای اطلاعات
• لیست جزئیات با آیکون
• Scrollable برای محتوای زیاد

Footer

┌─────────────────────────────────────┐
│              [Action] [Close]       │
└─────────────────────────────────────┘

• دکمه‌های اکشن (Analyze, Select, Copy)
• دکمه Close

---

🎯 Info Grid Items

ساختار هر Item:

┌─────────────────┐
│ 📊 Label        │
│ $43,250.00      │ ← Value (بزرگ و bold)
└─────────────────┘

رنگ‌بندی Values:

✅ .primary → آبی فیروزه‌ای (قیمت)
✅ .success → سبز (تغییرات مثبت)
✅ .danger → قرمز (تغییرات منفی)
✅ default → سفید

Hover Effect:

✅ Border color تغییر می‌کنه
✅ Background روشن می‌شه
✅ TranslateY(-2px)

---

📋 Details List

ساختار:

┌────────────────────────────────────┐
│ 📊 Label              Value        │
├────────────────────────────────────┤
│ 📈 RSI (14)           65.4         │
│ 📉 MACD               Bullish      │
│ 🔷 EMA (50)           $42,100      │
└────────────────────────────────────┘

ویژگی‌ها:

✅ آیکون SVG برای هر item
✅ Label در سمت چپ
✅ Value در سمت راست
✅ Hover effect
✅ Background تیره

---

🎨 رنگ‌بندی Modal

Background:

Overlay: rgba(0, 0, 0, 0.8) + blur(10px)
Modal: linear-gradient(135deg, rgba(30,41,59,0.98), rgba(15,23,42,0.98))

Borders:

Main: 1px solid rgba(255, 255, 255, 0.1)
Top: 3px gradient (blue → cyan → purple)

Shadows:

Main: 0 25px 100px rgba(0, 0, 0, 0.5)
Glow: 0 0 0 1px rgba(255, 255, 255, 0.05)

---

🎬 انیمیشن‌های کلیدی

1. Modal Gradient Shift

@keyframes modalGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

• مدت: 3 ثانیه
• تکرار: بی‌نهایت
• محل: Border بالای modal

2. Modal Icon Pulse

@keyframes modalIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

• مدت: 2 ثانیه
• تکرار: بی‌نهایت
• محل: آیکون title

3. Modal Open/Close

/* Open */
opacity: 0 → 1
transform: scale(0.9) translateY(30px) → scale(1) translateY(0)

/* Close */
همان مسیر به صورت معکوس

---

📱 Responsive Design

Desktop (> 768px):

✅ Max-width: 800px
✅ Grid: 2 columns
✅ Padding: 32px

Mobile (< 768px):

✅ Max-width: 100%
✅ Grid: 1 column
✅ Padding: 20px
✅ Font sizes کوچک‌تر

---

⌨️ Keyboard Shortcuts

ESC → بستن همه Modal های باز

---

🎯 دکمه‌های اکشن

Crypto Modal:

⚡ ANALYZE → تحلیل فوری ارز
✖️ CLOSE → بستن modal

Strategy Modal:

✅ SELECT STRATEGY → انتخاب استراتژی
✖️ CLOSE → بستن modal

Signal Modal:

📋 COPY → کپی اطلاعات سیگنال
✖️ CLOSE → بستن modal

---

🔧 تنظیمات CSS

Variables:

--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1)
--radius-xl: 24px
--shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.4)

Z-index:

Modal Overlay: 10000
Modal: relative (در overlay)

Backdrop Filter:

Overlay: blur(10px)
Modal: blur(30px) saturate(180%)

---

📊 آمار فنی

CSS:

Lines: ~400 خط جدید
Animations: 3 keyframe
Transitions: 20+
Hover effects: 15+

HTML:

Modals: 3 عدد
Info items: 6 per modal
Detail items: 5+ per modal
Buttons: 2 per modal

JavaScript:

Functions: 3 (openCryptoModal, openStrategyModal, openSignalModal)
Event listeners: Double click, ESC key, Overlay click

---

✨ نکات مهم

1. Performance:

✅ GPU acceleration با transform
✅ will-change برای انیمیشن‌ها
✅ Debounce برای double click

2. Accessibility:

✅ ESC برای بستن
✅ Focus management
✅ ARIA labels (قابل اضافه شدن)

3. UX:

✅ Click outside برای بستن
✅ Smooth animations
✅ Visual feedback
✅ Loading states

---

🚀 استفاده در کد

باز کردن Modal:

// از داخل کلاس
this.openCryptoModal('BTC');
this.openStrategyModal('hts-hybrid');
this.openSignalModal(0);

// از خارج
window.ultimateSystem.openCryptoModal('BTC');

بستن Modal:

// از HTML
onclick="closeModal('crypto-modal')"

// از JavaScript
window.closeModal('crypto-modal');

---

🎉 نتیجه

قبل:

❌ کارت‌های ساده
❌ اطلاعات محدود
❌ جذابیت کم

بعد:

✅ Modal های خیره‌کننده
✅ اطلاعات کامل و جزئی
✅ انیمیشن‌های حرفه‌ای
✅ UX عالی
✅ جذابیت بصری بالا

---

🎯 حالا سیستم Modal کاملاً حرفه‌ای و جذاب است!

آخرین به‌روزرسانی: 2 دسامبر 2025