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>ربات تحلیل رمز ارز | Crypto Analysis Bot</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" | |
| rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| :root { | |
| --primary: #00d4ff; | |
| --secondary: #7b2cbf; | |
| --success: #00ff88; | |
| --danger: #ff4757; | |
| --warning: #ffa502; | |
| --dark-bg: #0a0a1a; | |
| --darker-bg: #050510; | |
| --card-bg: #12122a; | |
| --card-border: #1e1e3f; | |
| --text-primary: #ffffff; | |
| --text-secondary: #8b8ba7; | |
| --gradient-1: linear-gradient(135deg, #00d4ff 0%, #7b2cbf 100%); | |
| --gradient-2: linear-gradient(135deg, #7b2cbf 0%, #ff0080 100%); | |
| --glow-shadow: 0 0 30px rgba(0, 212, 255, 0.3); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Vazirmatn', sans-serif; | |
| } | |
| body { | |
| background: var(--dark-bg); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Scrollbar Styling */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--darker-bg); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--primary); | |
| border-radius: 4px; | |
| } | |
| /* Header */ | |
| .header { | |
| background: linear-gradient(180deg, var(--darker-bg) 0%, transparent 100%); | |
| padding: 1rem 2rem; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 1000; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--card-border); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .logo-icon { | |
| width: 45px; | |
| height: 45px; | |
| background: var(--gradient-1); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| box-shadow: var(--glow-shadow); | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| } | |
| .logo-text { | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| background: var(--gradient-1); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .logo-text span { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| display: block; | |
| font-weight: 300; | |
| } | |
| .header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .search-box { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .search-box input { | |
| background: var(--card-bg); | |
| border: 1px solid var(--card-border); | |
| padding: 0.75rem 1rem 0.75rem 2.5rem; | |
| border-radius: 25px; | |
| color: var(--text-primary); | |
| width: 250px; | |
| transition: all 0.3s ease; | |
| } | |
| .search-box input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: var(--glow-shadow); | |
| } | |
| .search-box i { | |
| position: absolute; | |
| right: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .btn { | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 25px; | |
| border: none; | |
| cursor: pointer; | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-primary { | |
| background: var(--gradient-1); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--glow-shadow); | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| border: 2px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .btn-outline:hover { | |
| background: var(--primary); | |
| color: var(--dark-bg); | |
| } | |
| /* Main Layout */ | |
| .main-container { | |
| display: flex; | |
| margin-top: 80px; | |
| min-height: calc(100vh - 80px); | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| width: 280px; | |
| background: var(--darker-bg); | |
| border-left: 1px solid var(--card-border); | |
| padding: 1.5rem; | |
| position: fixed; | |
| right: 0; | |
| top: 80px; | |
| bottom: 0; | |
| overflow-y: auto; | |
| transition: all 0.3s ease; | |
| } | |
| .nav-menu { | |
| list-style: none; | |
| } | |
| .nav-item { | |
| margin-bottom: 0.5rem; | |
| } | |
| .nav-link { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 1rem 1.25rem; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| border-radius: 12px; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .nav-link:hover, | |
| .nav-link.active { | |
| background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, transparent 100%); | |
| color: var(--primary); | |
| } | |
| .nav-link.active { | |
| border-right: 3px solid var(--primary); | |
| } | |
| .nav-link i { | |
| width: 24px; | |
| text-align: center; | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| flex: 1; | |
| margin-right: 280px; | |
| padding: 2rem; | |
| } | |
| /* Stats Grid */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .stat-card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--card-border); | |
| border-radius: 20px; | |
| padding: 1.5rem; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: var(--gradient-1); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); | |
| border-color: var(--primary); | |
| } | |
| .stat-icon { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .stat-icon.blue { | |
| background: rgba(0, 212, 255, 0.2); | |
| color: var(--primary); | |
| } | |
| .stat-icon.purple { | |
| background: rgba(123, 44, 191, 0.2); | |
| color: var(--secondary); | |
| } | |
| .stat-icon.green { | |
| background: rgba(0, 255, 136, 0.2); | |
| color: var(--success); | |
| } | |
| .stat-icon.orange { | |
| background: rgba(255, 165, 2, 0.2); | |
| color: var(--warning); | |
| } | |
| .stat-value { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-label { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| .stat-change { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 20px; | |
| font-size: 0.85rem; | |
| margin-top: 0.5rem; | |
| } | |
| .stat-change.positive { | |
| background: rgba(0, 255, 136, 0.2); | |
| color: var(--success); | |
| } | |
| .stat-change.negative { | |
| background: rgba(255, 71, 87, 0.2); | |
| color: var(--danger); | |
| } | |
| /* Dashboard Grid */ | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr; | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--card-border); | |
| border-radius: 20px; | |
| padding: 1.5rem; | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover { | |
| border-color: var(--primary); | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .card-title { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| } | |
| .card-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .time-btn { | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| background: transparent; | |
| border: 1px solid var(--card-border); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .time-btn.active, | |
| .time-btn:hover { | |
| background: var(--primary); | |
| border-color: var(--primary); | |
| color: var(--dark-bg); | |
| } | |
| /* Chart Container */ | |
| .chart-container { | |
| position: relative; | |
| height: 350px; | |
| } | |
| /* Crypto List */ | |
| .crypto-list { | |
| max-height: 350px; | |
| overflow-y: auto; | |
| } | |
| .crypto-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 1rem; | |
| border-radius: 12px; | |
| margin-bottom: 0.5rem; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .crypto-item:hover { | |
| background: rgba(0, 212, 255, 0.05); | |
| } | |
| .crypto-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .crypto-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| background: var(--gradient-1); | |
| } | |
| .crypto-name { | |
| font-weight: 600; | |
| } | |
| .crypto-symbol { | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| } | |
| .crypto-price { | |
| text-align: left; | |
| } | |
| .price-value { | |
| font-weight: 600; | |
| } | |
| .price-change { | |
| font-size: 0.85rem; | |
| } | |
| /* Signals Panel */ | |
| .signals-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .signal-card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--card-border); | |
| border-radius: 16px; | |
| padding: 1.25rem; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| } | |
| .signal-card:hover { | |
| transform: scale(1.02); | |
| border-color: var(--primary); | |
| } | |
| .signal-icon { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| margin: 0 auto 1rem; | |
| } | |
| .signal-icon.buy { | |
| background: rgba(0, 255, 136, 0.2); | |
| color: var(--success); | |
| box-shadow: 0 0 20px rgba(0, 255, 136, 0.3); | |
| } | |
| .signal-icon.sell { | |
| background: rgba(255, 71, 87, 0.2); | |
| color: var(--danger); | |
| box-shadow: 0 0 20px rgba(255, 71, 87, 0.3); | |
| } | |
| .signal-icon.hold { | |
| background: rgba(255, 165, 2, 0.2); | |
| color: var(--warning); | |
| box-shadow: 0 0 20px rgba(255, 165, 2, 0.3); | |
| } | |
| .signal-title { | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| } | |
| .signal-desc { | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| } | |
| /* Configuration Panel */ | |
| .config-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| .form-input, | |
| .form-select { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| background: var(--dark-bg); | |
| border: 1px solid var(--card-border); | |
| border-radius: 10px; | |
| color: var(--text-primary); | |
| font-size: 1rem; | |
| transition: all 0.3s ease; | |
| } | |
| .form-input:focus, | |
| .form-select:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 10px rgba(0, 212, 255, 0.2); | |
| } | |
| .form-select { | |
| cursor: pointer; | |
| } | |
| .range-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .range-slider { | |
| flex: 1; | |
| -webkit-appearance: none; | |
| height: 6px; | |
| background: var(--card-border); | |
| border-radius: 3px; | |
| outline: none; | |
| } | |
| .range-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| background: var(--primary); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| box-shadow: 0 0 10px rgba(0, 212, 255, 0.5); | |
| } | |
| .range-value { | |
| min-width: 50px; | |
| text-align: center; | |
| font-weight: 600; | |
| color: var(--primary); | |
| } | |
| /* Indicator Tags */ | |
| .indicator-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| margin-top: 0.5rem; | |
| } | |
| .indicator-tag { | |
| padding: 0.5rem 1rem; | |
| background: var(--dark-bg); | |
| border: 1px solid var(--card-border); | |
| border-radius: 20px; | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .indicator-tag.active { | |
| background: var(--primary); | |
| border-color: var(--primary); | |
| color: var(--dark-bg); | |
| } | |
| .indicator-tag:hover:not(.active) { | |
| border-color: var(--primary); | |
| } | |
| /* News Section */ | |
| .news-list { | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .news-item { | |
| display: flex; | |
| gap: 1rem; | |
| padding: 1rem; | |
| border-bottom: 1px solid var(--card-border); | |
| transition: all 0.3s ease; | |
| } | |
| .news-item:hover { | |
| background: rgba(0, 212, 255, 0.05); | |
| } | |
| .news-image { | |
| width: 80px; | |
| height: 60px; | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| font-size: 1.5rem; | |
| } | |
| .news-content h4 { | |
| font-size: 0.95rem; | |
| margin-bottom: 0.5rem; | |
| line-height: 1.4; | |
| } | |
| .news-meta { | |
| display: flex; | |
| gap: 1rem; | |
| color: var(--text-secondary); | |
| font-size: 0.8rem; | |
| } | |
| /* Portfolio Section */ | |
| .portfolio-chart { | |
| height: 250px; | |
| } | |
| .holdings-list { | |
| margin-top: 1rem; | |
| } | |
| .holding-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 1rem; | |
| background: var(--dark-bg); | |
| border-radius: 12px; | |
| margin-bottom: 0.75rem; | |
| } | |
| .holding-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .holding-icon { | |
| width: 35px; | |
| height: 35px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1rem; | |
| } | |
| .holding-details h4 { | |
| font-size: 0.95rem; | |
| } | |
| .holding-details span { | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| } | |
| .holding-value { | |
| text-align: left; | |
| } | |
| .holding-usd { | |
| font-weight: 600; | |
| } | |
| .holding-amount { | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| } | |
| /* Bot Status */ | |
| .bot-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| padding: 1rem; | |
| background: var(--dark-bg); | |
| border-radius: 12px; | |
| margin-bottom: 1.5rem; | |
| } | |
| .status-indicator { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| animation: blink 1.5s infinite; | |
| } | |
| .status-indicator.active { | |
| background: var(--success); | |
| box-shadow: 0 0 10px var(--success); | |
| } | |
| .status-indicator.inactive { | |
| background: var(--danger); | |
| animation: none; | |
| } | |
| @keyframes blink { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| /* Toggle Switch */ | |
| .toggle-container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 1rem; | |
| background: var(--dark-bg); | |
| border-radius: 12px; | |
| margin-bottom: 0.75rem; | |
| } | |
| .toggle-label { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .toggle-switch { | |
| position: relative; | |
| width: 50px; | |
| height: 26px; | |
| } | |
| .toggle-switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .toggle-slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: var(--card-border); | |
| border-radius: 26px; | |
| transition: 0.3s; | |
| } | |
| .toggle-slider::before { | |
| position: absolute; | |
| content: ''; | |
| height: 20px; | |
| width: 20px; | |
| right: 3px; | |
| bottom: 3px; | |
| background: white; | |
| border-radius: 50%; | |
| transition: 0.3s; | |
| } | |
| .toggle-switch input:checked+.toggle-slider { | |
| background: var(--primary); | |
| } | |
| .toggle-switch input:checked+.toggle-slider::before { | |
| transform: translateX(-24px); | |
| } | |
| /* Mobile Menu */ | |
| .mobile-menu-btn { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: var(--text-primary); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| /* Footer */ | |
| .footer { | |
| text-align: center; | |
| padding: 2rem; | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| border-top: 1px solid var(--card-border); | |
| margin-top: 2rem; | |
| } | |
| .footer a { | |
| color: var(--primary); | |
| text-decoration: none; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1200px) { | |
| .dashboard-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 992px) { | |
| .sidebar { | |
| transform: translateX(100%); | |
| z-index: 999; | |
| } | |
| .sidebar.active { | |
| transform: translateX(0); | |
| } | |
| .main-content { | |
| margin-right: 0; | |
| } | |
| .mobile-menu-btn { | |
| display: block; | |
| } | |
| .search-box { | |
| display: none; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .stats-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .header { | |
| padding: 1rem; | |
| } | |
| .logo-text span { | |
| display: none; | |
| } | |
| .btn span { | |
| display: none; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Animations */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-in { | |
| animation: fadeIn 0.5s ease forwards; | |
| } | |
| .delay-1 { | |
| animation-delay: 0.1s; | |
| } | |
| .delay-2 { | |
| animation-delay: 0.2s; | |
| } | |
| .delay-3 { | |
| animation-delay: 0.3s; | |
| } | |
| .delay-4 { | |
| animation-delay: 0.4s; | |
| } | |
| /* Tabs */ | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| /* Loading Animation */ | |
| .loading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| } | |
| .loading-spinner { | |
| width: 40px; | |
| height: 40px; | |
| border: 3px solid var(--card-border); | |
| border-top-color: var(--primary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* Notification Badge */ | |
| .notification-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| background: var(--danger); | |
| color: white; | |
| font-size: 0.7rem; | |
| padding: 2px 6px; | |
| border-radius: 10px; | |
| min-width: 18px; | |
| text-align: center; | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| /* Progress Bar */ | |
| .progress-container { | |
| background: var(--dark-bg); | |
| border-radius: 10px; | |
| height: 8px; | |
| overflow: hidden; | |
| margin-top: 0.5rem; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: var(--gradient-1); | |
| border-radius: 10px; | |
| transition: width 0.3s ease; | |
| } | |
| /* Tooltip */ | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip::after { | |
| content: attr(data-tooltip); | |
| position: absolute; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: var(--darker-bg); | |
| color: var(--text-primary); | |
| padding: 0.5rem 1rem; | |
| border-radius: 8px; | |
| font-size: 0.8rem; | |
| white-space: nowrap; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| border: 1px solid var(--card-border); | |
| } | |
| .tooltip:hover::after { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| /* Modal */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.7); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 2000; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .modal { | |
| background: var(--card-bg); | |
| border: 1px solid var(--card-border); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| max-width: 500px; | |
| width: 90%; | |
| transform: scale(0.9); | |
| transition: all 0.3s ease; | |
| } | |
| .modal-overlay.active .modal { | |
| transform: scale(1); | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .modal-close { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| .modal-close:hover { | |
| color: var(--danger); | |
| } | |
| /* Table */ | |
| .data-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .data-table th, | |
| .data-table td { | |
| padding: 1rem; | |
| text-align: right; | |
| border-bottom: 1px solid var(--card-border); | |
| } | |
| .data-table th { | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| font-size: 0.9rem; | |
| } | |
| .data-table tr:hover { | |
| background: rgba(0, 212, 255, 0.05); | |
| } | |
| /* Badge */ | |
| .badge { | |
| display: inline-block; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| } | |
| .badge-success { | |
| background: rgba(0, 255, 136, 0.2); | |
| color: var(--success); | |
| } | |
| .badge-danger { | |
| background: rgba(255, 71, 87, 0.2); | |
| color: var(--danger); | |
| } | |
| .badge-warning { | |
| background: rgba(255, 165, 2, 0.2); | |
| color: var(--warning); | |
| } | |
| /* Log Console */ | |
| .log-console { | |
| background: var(--darker-bg); | |
| border: 1px solid var(--card-border); | |
| border-radius: 12px; | |
| padding: 1rem; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| font-family: 'Courier New', monospace; | |
| font-size: 0.85rem; | |
| } | |
| .log-entry { | |
| padding: 0.5rem 0; | |
| border-bottom: 1px solid var(--card-border); | |
| } | |
| .log-entry:last-child { | |
| border-bottom: none; | |
| } | |
| .log-time { | |
| color: var(--text-secondary); | |
| margin-left: 1rem; | |
| } | |
| .log-message { | |
| color: var(--text-primary); | |
| } | |
| .log-success { | |
| color: var(--success); | |
| } | |
| .log-error { | |
| color: var(--danger); | |
| } | |
| .log-warning { | |
| color: var(--warning); | |
| } | |
| /* Backtest Results */ | |
| .backtest-stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .backtest-stat { | |
| background: var(--dark-bg); | |
| border-radius: 12px; | |
| padding: 1rem; | |
| text-align: center; | |
| } | |
| .backtest-stat-value { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| } | |
| .backtest-stat-label { | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| } | |
| /* User Profile */ | |
| .user-profile { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 1rem; | |
| background: var(--card-bg); | |
| border-radius: 12px; | |
| margin-top: auto; | |
| } | |
| .user-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: var(--gradient-1); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 600; | |
| } | |
| .user-info h4 { | |
| font-size: 0.95rem; | |
| } | |
| .user-info span { | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| } | |
| .sidebar-content { | |
| display: flex; | |
| flex-direction: column; | |
| height: calc(100% - 20px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="logo"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="text-decoration: none; display: flex; align-items: center; gap: 12px;"> | |
| <div class="logo-icon"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="logo-text"> | |
| CryptoBot Pro | |
| <span>ربات تحلیل هوشمند</span> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="search-box"> | |
| <i class="fas fa-search"></i> | |
| <input type="text" placeholder="جستجوی ارز دیجیتال..." id="searchInput"> | |
| </div> | |
| <div class="header-actions"> | |
| <button class="btn btn-outline" onclick="openSettingsModal()"> | |
| <i class="fas fa-cog"></i> | |
| <span>تنظیمات</span> | |
| </button> | |
| <button class="btn btn-primary" onclick="toggleBot()"> | |
| <i class="fas fa-rocket"></i> | |
| <span>اجرای ربات</span> | |
| </button> | |
| <button class="mobile-menu-btn" onclick="toggleSidebar()"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Container --> | |
| <div class="main-container"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="sidebar-content"> | |
| <ul class="nav-menu"> | |
| <li class="nav-item"> | |
| <a class="nav-link active" onclick="switchTab('dashboard')"> | |
| <i class="fas fa-chart-line"></i> | |
| <span>داشبورد</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" onclick="switchTab('signals')"> | |
| <i class="fas fa-signal"></i> | |
| <span>سیگنالها</span> | |
| <span class="notification-badge">5</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" onclick="switchTab('config')"> | |
| <i class="fas fa-cogs"></i> | |
| <span>پیکربندی ربات</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" onclick="switchTab('portfolio')"> | |
| <i class="fas fa-wallet"></i> | |
| <span>سبد سرمایه</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" onclick="switchTab('news')"> | |
| <i class="fas fa-newspaper"></i> | |
| <span>اخبار بازار</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" onclick="switchTab('backtest')"> | |
| <i class="fas fa-history"></i> | |
| <span>بکتست</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" onclick="switchTab('logs')"> | |
| <i class="fas fa-list-alt"></i> | |
| <span>لاگها</span> | |
| </a> | |
| </li> | |
| </ul> | |
| <div class="user-profile"> | |
| <div class="user-avatar">ع</div> | |
| <div class="user-info"> | |
| <h4>علی رضایی</h4> | |
| <span>سطح: حرفهای</span> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <!-- Dashboard Tab --> | |
| <div class="tab-content active" id="dashboard"> | |
| <!-- Stats Section --> | |
| <section class="stats-grid animate-in"> | |
| <div class="stat-card delay-1"> | |
| <div class="stat-icon blue"> | |
| <i class="fas fa-dollar-sign"></i> | |
| </div> | |
| <div class="stat-value">$47,892.34</div> | |
| <div class="stat-label">کل سرمایه</div> | |
| <span class="stat-change positive"> | |
| <i class="fas fa-arrow-up"></i> +5.24% | |
| </span> | |
| </div> | |
| <div class="stat-card delay-2"> | |
| <div class="stat-icon green"> | |
| <i class="fas fa-chart-pie"></i> | |
| </div> | |
| <div class="stat-value">$12,456.78</div> | |
| <div class="stat-label">سود/زیان</div> | |
| <span class="stat-change positive"> | |
| <i class="fas fa-arrow-up"></i> +18.3% | |
| </span> | |
| </div> | |
| <div class="stat-card delay-3"> | |
| <div class="stat-icon purple"> | |
| <i class="fas fa-sync-alt"></i> | |
| </div> | |
| <div class="stat-value">156</div> | |
| <div class="stat-label">معاملات موفق</div> | |
| <span class="stat-change positive"> | |
| <i class="fas fa-arrow-up"></i> 72% | |
| </span> | |
| </div> | |
| <div class="stat-card delay-4"> | |
| <div class="stat-icon orange"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div class="stat-value">23</div> | |
| <div class="stat-label">سیگنال فعال</div> | |
| <span class="stat-change negative"> | |
| <i class="fas fa-arrow-down"></i> -2 | |
| </span> | |
| </div> | |
| </section> | |
| <!-- Dashboard Grid --> | |
| <section class="dashboard-grid animate-in"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">نمودار قیمت بیتکوین</h3> | |
| <div class="card-actions"> | |
| <button class="time-btn">1د</button> | |
| <button class="time-btn">5د</button> | |
| <button class="time-btn active">15د</button> | |
| <button class="time-btn">1س</button> | |
| <button class="time-btn">4س</button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="mainChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">ارزهای برتر</h3> | |
| </div> | |
| <div class="crypto-list"> | |
| <div class="crypto-item" onclick="selectCrypto('BTC')"> | |
| <div class="crypto-info"> | |
| <div class="crypto-icon">₿</div> | |
| <div> | |
| <div class="crypto-name">بیتکوین</div> | |
| <div class="crypto-symbol">BTC/USDT</div> | |
| </div> | |
| </div> | |
| <div class="crypto-price"> | |
| <div class="price-value">$47,892.34</div> | |
| <div class="price-change" style="color: var(--success);">+2.45%</div> | |
| </div> | |
| </div> | |
| <div class="crypto-item" onclick="selectCrypto('ETH')"> | |
| <div class="crypto-info"> | |
| <div class="crypto-icon" style="background: linear-gradient(135deg, #627eea 0%, #3c4f9e 100%);">Ξ</div> | |
| <div> | |
| <div class="crypto-name">اتریوم</div> | |
| <div class="crypto-symbol">ETH/USDT</div> | |
| </div> | |
| </div> | |
| <div class="crypto-price"> | |
| <div class="price-value">$2,567.89</div> | |
| <div class="price-change" style="color: var(--success);">+3.12%</div> | |
| </div> | |
| </div> | |
| <div class="crypto-item" onclick="selectCrypto('BNB')"> | |
| <div class="crypto-info"> | |
| <div class="crypto-icon" style="background: linear-gradient(135deg, #f7931a 0%, #e07a1a 100%);">⁽ᵇ⁾</div> | |
| <div> | |
| <div class="crypto-name">بایننس کوین</div> | |
| <div class="crypto-symbol">BNB/USDT</div> | |
| </div> | |
| </div> | |
| <div class="crypto-price"> | |
| <div class="price-value">$312.45</div> | |
| <div class="price-change" style="color: var(--danger);">-1.23%</div> | |
| </div> | |
| </div> | |
| <div class="crypto-item" onclick="selectCrypto('SOL')"> | |
| <div class="crypto-info"> | |
| <div class="crypto-icon" style="background: linear-gradient(135deg, #26a17b 0%, #1d8a6a 100%);">X</div> | |
| <div> | |
| <div class="crypto-name">سولانا</div> | |
| <div class="crypto-symbol">SOL/USDT</div> | |
| </div> | |
| </div> | |
| <div class="crypto-price"> | |
| <div class="price-value">$98.76</div> | |
| <div class="price-change" style="color: var(--success);">+5.67%</div> | |
| </div> | |
| </div> | |
| <div class="crypto-item" onclick="selectCrypto('XRP')"> | |
| <div class="crypto-info"> | |
| <div class="crypto-icon" style="background: linear-gradient(135deg, #0085c5 0%, #006699 100%);">$</div> | |
| <div> | |
| <div class="crypto-name">ریپل</div> | |
| <div class="crypto-symbol">XRP/USDT</div> | |
| </div> | |
| </div> | |
| <div class="crypto-price"> | |
| <div class="price-value">$0.6234</div> | |
| <div class="price-change" style="color: var(--success);">+0.89%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Signals Section --> | |
| <section class="signals-grid animate-in"> | |
| <div class="signal-card"> | |
| <div class="signal-icon buy"> | |
| <i class="fas fa-arrow-up"></i> | |
| </div> | |
| <div class="signal-title">خرید قوی</div> | |
| <div class="signal-desc">RSI و MACD هر دو مثبت</div> | |
| </div> | |
| <div class="signal-card"> | |
| <div class="signal-icon hold"> | |
| <i class="fas fa-pause"></i> | |
| </div> | |
| <div class="signal-title">نگهداری</div> | |
| <div class="signal-desc">در انتظار تایید</div> | |
| </div> | |
| <div class="signal-card"> | |
| <div class="signal-icon sell"> | |
| <i class="fas fa-arrow-down"></i> | |
| </div> | |
| <div class="signal-title">فروش</div> | |
| <div class="signal-desc">خروج از معامله</div> | |
| </div> | |
| <div class="signal-card"> | |
| <div class="signal-icon buy"> | |
| <i class="fas fa-bell"></i> | |
| </div> | |
| <div class="signal-title">هشدار</div> | |
| <div class="signal-desc">نوسان بالا</div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Signals Tab --> | |
| <div class="tab-content" id="signals"> | |
| <section class="card animate-in"> | |
| <div class="card-header"> | |
| <h3 class="card-title">سیگنالهای معاملاتی</h3> | |
| <div class="card-actions"> | |
| <button class="time-btn active">همه</button> | |
| <button class="time-btn">خرید</button> | |
| <button class="time-btn">فروش</button> | |
| </div> | |
| </div> | |
| <table class="data |