Spaces:
Sleeping
Sleeping
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>إضافة إشارة جديدة - لوحة إشارات التداول</title> | |
| <!-- Bootstrap RTL CSS --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css"> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Google Font - Cairo --> | |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Custom CSS --> | |
| <style> | |
| :root { | |
| --primary-color: #3498db; | |
| --secondary-color: #2c3e50; | |
| --success-color: #2ecc71; | |
| --danger-color: #e74c3c; | |
| --warning-color: #f39c12; | |
| --info-color: #1abc9c; | |
| --light-color: #f8f9fa; | |
| --dark-color: #343a40; | |
| } | |
| body { | |
| font-family: 'Cairo', sans-serif; | |
| background-color: #f5f7fa; | |
| color: #333; | |
| padding-bottom: 60px; | |
| } | |
| .navbar { | |
| background-color: var(--secondary-color); | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .navbar-brand { | |
| font-weight: 700; | |
| color: white ; | |
| } | |
| .form-card { | |
| background-color: white; | |
| border-radius: 15px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); | |
| padding: 35px; | |
| margin-bottom: 30px; | |
| } | |
| .form-title { | |
| color: var(--secondary-color); | |
| font-weight: 600; | |
| margin-bottom: 30px; | |
| padding-bottom: 15px; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .form-label { | |
| font-weight: 500; | |
| color: var(--secondary-color); | |
| margin-bottom: 8px; | |
| } | |
| .form-control, .form-select { | |
| border-radius: 10px; | |
| padding: 12px 15px; | |
| border: 1px solid #ddd; | |
| transition: all 0.3s; | |
| font-size: 15px; | |
| } | |
| .form-control:focus, .form-select:focus { | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25); | |
| } | |
| .btn-submit { | |
| background-color: var(--primary-color); | |
| border: none; | |
| border-radius: 10px; | |
| padding: 12px 25px; | |
| font-weight: 500; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-submit:hover { | |
| background-color: #2980b9; | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn-cancel { | |
| border-radius: 10px; | |
| padding: 12px 25px; | |
| font-weight: 500; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-cancel:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .form-section { | |
| margin-bottom: 30px; | |
| } | |
| .form-section-title { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--secondary-color); | |
| margin-bottom: 20px; | |
| } | |
| /* Loading spinner */ | |
| .loading-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(255, 255, 255, 0.8); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: all 0.3s; | |
| } | |
| .loading-overlay.active { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .spinner { | |
| width: 60px; | |
| height: 60px; | |
| border: 6px solid var(--light-color); | |
| border-top: 6px solid var(--primary-color); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .form-card { | |
| padding: 25px; | |
| } | |
| .form-title { | |
| font-size: 1.5rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Loading Overlay --> | |
| <div class="loading-overlay" id="loadingOverlay"> | |
| <div class="spinner"></div> | |
| </div> | |
| <!-- Navbar --> | |
| <nav class="navbar navbar-expand-lg navbar-dark mb-4"> | |
| <div class="container"> | |
| <a class="navbar-brand" href="{{ url_for('index') }}"> | |
| <i class="fas fa-chart-line me-2"></i> لوحة إشارات التداول | |
| </a> | |
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarNav"> | |
| <ul class="navbar-nav me-auto"> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="{{ url_for('index') }}"> | |
| <i class="fas fa-home me-1"></i> الرئيسية | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container"> | |
| <div class="form-card"> | |
| <h2 class="form-title"><i class="fas fa-plus-circle me-2"></i> إضافة إشارة تداول جديدة</h2> | |
| <form action="{{ url_for('add_signal') }}" method="post" id="addSignalForm" onsubmit="showLoading()"> | |
| <div class="form-section"> | |
| <div class="form-section-title">المعلومات الأساسية</div> | |
| <div class="row"> | |
| <div class="col-md-6 mb-3"> | |
| <label for="pair" class="form-label">زوج العملة</label> | |
| <input type="text" class="form-control" id="pair" name="pair" required | |
| placeholder="مثال: EURUSD, GBPJPY"> | |
| </div> | |
| <div class="col-md-6 mb-3"> | |
| <label for="timeframe" class="form-label">الإطار الزمني</label> | |
| <select class="form-select" id="timeframe" name="timeframe" required> | |
| <option value="" selected disabled>اختر الإطار الزمني</option> | |
| <option value="1min">1 دقيقة</option> | |
| <option value="5min">5 دقائق</option> | |
| <option value="15min">15 دقيقة</option> | |
| <option value="30min">30 دقيقة</option> | |
| <option value="1h">1 ساعة</option> | |
| <option value="4h">4 ساعات</option> | |
| <option value="1d">يومي</option> | |
| <option value="1w">أسبوعي</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-6 mb-3"> | |
| <label for="type" class="form-label">نوع الإشارة</label> | |
| <select class="form-select" id="type" name="type" required> | |
| <option value="" selected disabled>اختر نوع الإشارة</option> | |
| <option value="شراء (Buy)">شراء (Buy)</option> | |
| <option value="بيع (Sell)">بيع (Sell)</option> | |
| </select> | |
| </div> | |
| <div class="col-md-6 mb-3"> | |
| <label for="duration" class="form-label">المدة المتوقعة</label> | |
| <input type="text" class="form-control" id="duration" name="duration" required | |
| placeholder="مثال: 3-5 أيام، يوم واحد"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-section"> | |
| <div class="form-section-title">نقاط الدخول والخروج</div> | |
| <div class="row"> | |
| <div class="col-md-4 mb-3"> | |
| <label for="entry" class="form-label">سعر الدخول</label> | |
| <input type="text" class="form-control" id="entry" name="entry" required | |
| placeholder="مثال: 1.0500"> | |
| </div> | |
| <div class="col-md-4 mb-3"> | |
| <label for="stop_loss" class="form-label">وقف الخسارة</label> | |
| <input type="text" class="form-control" id="stop_loss" name="stop_loss" required | |
| placeholder="مثال: 1.0450"> | |
| </div> | |
| <div class="col-md-4 mb-3"> | |
| <label for="take_profit" class="form-label">جني الأرباح</label> | |
| <input type="text" class="form-control" id="take_profit" name="take_profit" required | |
| placeholder="مثال: 1.0600"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-section"> | |
| <div class="form-section-title">التحليل والحالة</div> | |
| <div class="mb-3"> | |
| <label for="reason" class="form-label">سبب التحليل</label> | |
| <textarea class="form-control" id="reason" name="reason" rows="5" required | |
| placeholder="أدخل تحليلاً مفصلاً وسبب هذه الإشارة..."></textarea> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="status" class="form-label">حالة الإشارة</label> | |
| <select class="form-select" id="status" name="status" required> | |
| <option value="starting" selected>بداية</option> | |
| <option value="active">نشط</option> | |
| <option value="completed">مكتمل</option> | |
| <option value="failed">فشل</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="d-flex justify-content-end mt-4"> | |
| <a href="{{ url_for('index') }}" class="btn btn-secondary btn-cancel me-2"> | |
| <i class="fas fa-times me-1"></i> إلغاء | |
| </a> | |
| <button type="submit" class="btn btn-primary btn-submit"> | |
| <i class="fas fa-save me-1"></i> حفظ الإشارة | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Bootstrap JS and dependencies --> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <!-- Custom JavaScript --> | |
| <script> | |
| // Show loading overlay | |
| function showLoading() { | |
| document.getElementById('loadingOverlay').classList.add('active'); | |
| } | |
| // Hide loading overlay | |
| function hideLoading() { | |
| document.getElementById('loadingOverlay').classList.remove('active'); | |
| } | |
| </script> | |
| </body> | |
| </html> |