| <!DOCTYPE html>
|
| <html lang="en">
|
|
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Crypto Monitor ULTIMATE - Unified Dashboard</title>
|
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
|
| rel="stylesheet">
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
| <link rel="stylesheet" href="/static/css/connection-status.css">
|
| <script src="/static/js/websocket-client.js"></script>
|
| <style>
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| }
|
|
|
| :root {
|
| --bg-dark: #0a0e1a;
|
| --bg-card: #111827;
|
| --bg-card-hover: #1f2937;
|
| --text-primary: #f9fafb;
|
| --text-secondary: #9ca3af;
|
| --accent-blue: #3b82f6;
|
| --accent-green: #10b981;
|
| --accent-red: #ef4444;
|
| --accent-yellow: #f59e0b;
|
| --accent-purple: #8b5cf6;
|
| --accent-pink: #ec4899;
|
| --border: rgba(255, 255, 255, 0.1);
|
| --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
| }
|
|
|
| body {
|
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
| background: var(--bg-dark);
|
| color: var(--text-primary);
|
| line-height: 1.6;
|
| overflow-x: hidden;
|
| }
|
|
|
| body::before {
|
| content: '';
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| right: 0;
|
| bottom: 0;
|
| background:
|
| radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 40%),
|
| radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.15) 0%, transparent 40%),
|
| radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.1) 0%, transparent 30%);
|
| pointer-events: none;
|
| z-index: 0;
|
| }
|
|
|
| .container {
|
| max-width: 1920px;
|
| margin: 0 auto;
|
| padding: 20px;
|
| position: relative;
|
| z-index: 1;
|
| }
|
|
|
|
|
| .header {
|
| background: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(31, 41, 55, 0.4) 100%);
|
| backdrop-filter: blur(20px);
|
| border: 1px solid var(--border);
|
| border-radius: 24px;
|
| padding: 30px;
|
| margin-bottom: 30px;
|
| box-shadow: var(--shadow);
|
| }
|
|
|
| .header-top {
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| flex-wrap: wrap;
|
| gap: 20px;
|
| margin-bottom: 20px;
|
| }
|
|
|
| .logo {
|
| display: flex;
|
| align-items: center;
|
| gap: 15px;
|
| }
|
|
|
| .logo-icon {
|
| width: 60px;
|
| height: 60px;
|
| background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
|
| border-radius: 16px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-size: 32px;
|
| box-shadow: 0 10px 40px rgba(59, 130, 246, 0.4);
|
| animation: pulse-glow 3s ease-in-out infinite;
|
| }
|
|
|
| @keyframes pulse-glow {
|
|
|
| 0%,
|
| 100% {
|
| box-shadow: 0 10px 40px rgba(59, 130, 246, 0.4);
|
| }
|
|
|
| 50% {
|
| box-shadow: 0 10px 60px rgba(139, 92, 246, 0.6);
|
| }
|
| }
|
|
|
| .logo-text h1 {
|
| font-size: 32px;
|
| font-weight: 900;
|
| background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
|
| -webkit-background-clip: text;
|
| -webkit-text-fill-color: transparent;
|
| background-clip: text;
|
| letter-spacing: -1px;
|
| }
|
|
|
| .logo-text p {
|
| font-size: 14px;
|
| color: var(--text-secondary);
|
| font-weight: 500;
|
| }
|
|
|
| .header-actions {
|
| display: flex;
|
| gap: 12px;
|
| align-items: center;
|
| flex-wrap: wrap;
|
| }
|
|
|
| .status-badge {
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| padding: 12px 24px;
|
| background: rgba(16, 185, 129, 0.15);
|
| border: 1px solid rgba(16, 185, 129, 0.3);
|
| border-radius: 12px;
|
| font-size: 14px;
|
| font-weight: 600;
|
| }
|
|
|
| .status-dot {
|
| width: 10px;
|
| height: 10px;
|
| background: var(--accent-green);
|
| border-radius: 50%;
|
| animation: pulse 2s infinite;
|
| }
|
|
|
| @keyframes pulse {
|
|
|
| 0%,
|
| 100% {
|
| opacity: 1;
|
| transform: scale(1);
|
| }
|
|
|
| 50% {
|
| opacity: 0.5;
|
| transform: scale(1.2);
|
| }
|
| }
|
|
|
| .live-indicator {
|
| padding: 8px 16px;
|
| background: rgba(239, 68, 68, 0.15);
|
| border: 1px solid rgba(239, 68, 68, 0.3);
|
| border-radius: 8px;
|
| font-size: 12px;
|
| font-weight: 700;
|
| text-transform: uppercase;
|
| color: var(--accent-red);
|
| animation: blink 2s infinite;
|
| }
|
|
|
| @keyframes blink {
|
|
|
| 0%,
|
| 50%,
|
| 100% {
|
| opacity: 1;
|
| }
|
|
|
| 25%,
|
| 75% {
|
| opacity: 0.3;
|
| }
|
| }
|
|
|
|
|
| .tabs {
|
| display: flex;
|
| gap: 10px;
|
| margin-bottom: 30px;
|
| flex-wrap: wrap;
|
| border-bottom: 2px solid var(--border);
|
| padding-bottom: 10px;
|
| }
|
|
|
| .tab {
|
| padding: 12px 24px;
|
| background: transparent;
|
| border: none;
|
| border-radius: 12px 12px 0 0;
|
| color: var(--text-secondary);
|
| font-weight: 600;
|
| cursor: pointer;
|
| transition: all 0.3s;
|
| font-size: 14px;
|
| position: relative;
|
| }
|
|
|
| .tab:hover {
|
| color: var(--text-primary);
|
| background: rgba(255, 255, 255, 0.05);
|
| }
|
|
|
| .tab.active {
|
| color: var(--accent-blue);
|
| background: rgba(59, 130, 246, 0.1);
|
| }
|
|
|
| .tab.active::after {
|
| content: '';
|
| position: absolute;
|
| bottom: -12px;
|
| left: 0;
|
| right: 0;
|
| height: 3px;
|
| background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
|
| border-radius: 2px;
|
| }
|
|
|
| .tab-content {
|
| display: none;
|
| animation: fadeIn 0.3s;
|
| }
|
|
|
| .tab-content.active {
|
| display: block;
|
| }
|
|
|
| @keyframes fadeIn {
|
| from {
|
| opacity: 0;
|
| transform: translateY(10px);
|
| }
|
|
|
| to {
|
| opacity: 1;
|
| transform: translateY(0);
|
| }
|
| }
|
|
|
|
|
| .stats-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
|
| gap: 16px;
|
| margin-bottom: 24px;
|
| align-items: stretch;
|
| }
|
|
|
| @media (min-width: 1280px) {
|
| .stats-grid--market {
|
| grid-template-columns: repeat(5, minmax(180px, 1fr));
|
| }
|
| }
|
|
|
| .stat-card {
|
| background: rgba(17, 24, 39, 0.6);
|
| backdrop-filter: blur(10px);
|
| border: 1px solid var(--border);
|
| border-radius: 20px;
|
| padding: 20px;
|
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
| position: relative;
|
| overflow: hidden;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 12px;
|
| }
|
|
|
| .stat-card::before {
|
| content: '';
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| right: 0;
|
| height: 4px;
|
| background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple), var(--accent-pink));
|
| transform: scaleX(0);
|
| transition: transform 0.3s ease;
|
| }
|
|
|
| .stat-card:hover {
|
| transform: translateY(-8px) scale(1.02);
|
| border-color: rgba(59, 130, 246, 0.5);
|
| box-shadow: 0 20px 50px rgba(59, 130, 246, 0.3);
|
| }
|
|
|
| .stat-card:hover::before {
|
| transform: scaleX(1);
|
| }
|
|
|
| .stat-header {
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| margin-bottom: 8px;
|
| }
|
|
|
| .stat-icon {
|
| width: 44px;
|
| height: 44px;
|
| border-radius: 14px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
|
| color: var(--accent-blue);
|
| }
|
|
|
| .stat-icon svg {
|
| width: 24px;
|
| height: 24px;
|
| stroke: currentColor;
|
| stroke-width: 1.6;
|
| stroke-linecap: round;
|
| stroke-linejoin: round;
|
| fill: none;
|
| }
|
|
|
| .stat-value {
|
| font-size: 30px;
|
| font-weight: 900;
|
| margin-bottom: 0;
|
| background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
|
| -webkit-background-clip: text;
|
| -webkit-text-fill-color: transparent;
|
| background-clip: text;
|
| }
|
|
|
| .stat-label {
|
| font-size: 13px;
|
| color: var(--text-secondary);
|
| text-transform: uppercase;
|
| letter-spacing: 1px;
|
| font-weight: 600;
|
| }
|
|
|
| .stat-change {
|
| font-size: 14px;
|
| font-weight: 700;
|
| margin-top: 12px;
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| }
|
|
|
| .stat-change.positive {
|
| color: var(--accent-green);
|
| }
|
|
|
| .stat-change.negative {
|
| color: var(--accent-red);
|
| }
|
|
|
|
|
| .market-section {
|
| background: rgba(17, 24, 39, 0.6);
|
| backdrop-filter: blur(10px);
|
| border: 1px solid var(--border);
|
| border-radius: 24px;
|
| padding: 30px;
|
| margin-bottom: 30px;
|
| box-shadow: var(--shadow);
|
| }
|
|
|
| .section-header {
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| margin-bottom: 25px;
|
| flex-wrap: wrap;
|
| gap: 15px;
|
| }
|
|
|
| .section-title {
|
| font-size: 24px;
|
| font-weight: 800;
|
| background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
|
| -webkit-background-clip: text;
|
| -webkit-text-fill-color: transparent;
|
| background-clip: text;
|
| }
|
|
|
| .refresh-btn {
|
| padding: 10px 20px;
|
| background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
|
| border: none;
|
| border-radius: 10px;
|
| color: white;
|
| font-weight: 600;
|
| cursor: pointer;
|
| transition: all 0.3s ease;
|
| }
|
|
|
| .refresh-btn:hover {
|
| transform: scale(1.05);
|
| box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
|
| }
|
|
|
| table {
|
| width: 100%;
|
| border-collapse: collapse;
|
| }
|
|
|
| thead {
|
| background: rgba(59, 130, 246, 0.1);
|
| }
|
|
|
| th {
|
| padding: 16px;
|
| text-align: left;
|
| font-size: 12px;
|
| font-weight: 700;
|
| color: var(--text-secondary);
|
| text-transform: uppercase;
|
| letter-spacing: 1px;
|
| }
|
|
|
| td {
|
| padding: 16px;
|
| border-top: 1px solid var(--border);
|
| font-size: 14px;
|
| }
|
|
|
| tr:hover {
|
| background: rgba(59, 130, 246, 0.05);
|
| }
|
|
|
| .crypto-name {
|
| display: flex;
|
| align-items: center;
|
| gap: 12px;
|
| }
|
|
|
| .crypto-img {
|
| width: 36px;
|
| height: 36px;
|
| border-radius: 10px;
|
| object-fit: cover;
|
| }
|
|
|
| .price {
|
| font-weight: 700;
|
| font-size: 15px;
|
| }
|
|
|
| .change {
|
| padding: 6px 12px;
|
| border-radius: 8px;
|
| font-weight: 700;
|
| font-size: 13px;
|
| }
|
|
|
| .change.positive {
|
| background: rgba(16, 185, 129, 0.15);
|
| color: var(--accent-green);
|
| }
|
|
|
| .change.negative {
|
| background: rgba(239, 68, 68, 0.15);
|
| color: var(--accent-red);
|
| }
|
|
|
|
|
| .chart-container {
|
| background: rgba(17, 24, 39, 0.6);
|
| backdrop-filter: blur(10px);
|
| border: 1px solid var(--border);
|
| border-radius: 24px;
|
| padding: 30px;
|
| margin-bottom: 30px;
|
| }
|
|
|
| canvas {
|
| max-height: 350px;
|
| }
|
|
|
|
|
| .loading {
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| padding: 60px;
|
| }
|
|
|
| .spinner {
|
| width: 50px;
|
| height: 50px;
|
| border: 4px solid var(--border);
|
| border-top-color: var(--accent-blue);
|
| border-radius: 50%;
|
| animation: spin 1s linear infinite;
|
| }
|
|
|
| @keyframes spin {
|
| to {
|
| transform: rotate(360deg);
|
| }
|
| }
|
|
|
|
|
| .form-group {
|
| margin-bottom: 20px;
|
| }
|
|
|
| .form-label {
|
| display: block;
|
| margin-bottom: 8px;
|
| font-weight: 600;
|
| color: var(--text-primary);
|
| }
|
|
|
| .form-input,
|
| .form-select,
|
| .form-textarea {
|
| width: 100%;
|
| padding: 12px;
|
| background: rgba(17, 24, 39, 0.6);
|
| border: 1px solid var(--border);
|
| border-radius: 8px;
|
| color: var(--text-primary);
|
| font-family: inherit;
|
| font-size: 14px;
|
| }
|
|
|
| .form-input:focus,
|
| .form-select:focus,
|
| .form-textarea:focus {
|
| outline: none;
|
| border-color: var(--accent-blue);
|
| }
|
|
|
| .form-textarea {
|
| resize: vertical;
|
| min-height: 100px;
|
| }
|
|
|
|
|
| .badge {
|
| display: inline-block;
|
| padding: 4px 12px;
|
| border-radius: 12px;
|
| font-size: 12px;
|
| font-weight: 600;
|
| }
|
|
|
| .badge-success {
|
| background: rgba(16, 185, 129, 0.15);
|
| color: var(--accent-green);
|
| }
|
|
|
| .badge-warning {
|
| background: rgba(245, 158, 11, 0.15);
|
| color: var(--accent-yellow);
|
| }
|
|
|
| .badge-danger {
|
| background: rgba(239, 68, 68, 0.15);
|
| color: var(--accent-red);
|
| }
|
|
|
| .badge-info {
|
| background: rgba(59, 130, 246, 0.15);
|
| color: var(--accent-blue);
|
| }
|
|
|
|
|
| .alert {
|
| padding: 12px 16px;
|
| border-radius: 8px;
|
| margin-bottom: 16px;
|
| font-size: 14px;
|
| }
|
|
|
| .alert-success {
|
| background: rgba(16, 185, 129, 0.15);
|
| color: var(--accent-green);
|
| border-left: 4px solid var(--accent-green);
|
| }
|
|
|
| .alert-error {
|
| background: rgba(239, 68, 68, 0.15);
|
| color: var(--accent-red);
|
| border-left: 4px solid var(--accent-red);
|
| }
|
|
|
|
|
| @media (max-width: 768px) {
|
| .stats-grid {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .header-top {
|
| flex-direction: column;
|
| align-items: flex-start;
|
| }
|
|
|
| table {
|
| font-size: 12px;
|
| }
|
|
|
| th,
|
| td {
|
| padding: 10px;
|
| }
|
|
|
| .tabs {
|
| overflow-x: auto;
|
| }
|
| }
|
|
|
|
|
| .modal {
|
| display: none;
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background: rgba(0, 0, 0, 0.8);
|
| backdrop-filter: blur(5px);
|
| z-index: 1000;
|
| justify-content: center;
|
| align-items: center;
|
| animation: fadeIn 0.3s;
|
| }
|
|
|
| .modal.active {
|
| display: flex;
|
| }
|
|
|
| .modal-content {
|
| background: var(--bg-card);
|
| border-radius: 20px;
|
| padding: 30px;
|
| max-width: 600px;
|
| width: 90%;
|
| max-height: 90vh;
|
| overflow-y: auto;
|
| border: 1px solid var(--border);
|
| box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
|
| animation: slideUp 0.3s;
|
| }
|
|
|
| @keyframes slideUp {
|
| from {
|
| opacity: 0;
|
| transform: translateY(30px);
|
| }
|
|
|
| to {
|
| opacity: 1;
|
| transform: translateY(0);
|
| }
|
| }
|
|
|
|
|
| .btn-icon {
|
| padding: 8px 12px;
|
| border-radius: 8px;
|
| border: 1px solid;
|
| cursor: pointer;
|
| font-size: 12px;
|
| font-weight: 600;
|
| transition: all 0.3s;
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 6px;
|
| }
|
|
|
| .btn-icon:hover {
|
| transform: translateY(-2px);
|
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
| }
|
|
|
|
|
| .pool-card-hover {
|
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
| }
|
|
|
| .pool-card-hover:hover {
|
| transform: translateY(-5px);
|
| box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
|
| }
|
|
|
|
|
| .empty-state {
|
| text-align: center;
|
| padding: 60px 20px;
|
| background: rgba(17, 24, 39, 0.6);
|
| border-radius: 20px;
|
| border: 2px dashed var(--border);
|
| }
|
|
|
| .empty-state-icon {
|
| font-size: 64px;
|
| margin-bottom: 20px;
|
| opacity: 0.5;
|
| }
|
|
|
|
|
| .skeleton {
|
| background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
|
| background-size: 200% 100%;
|
| animation: loading 1.5s infinite;
|
| }
|
|
|
| @keyframes loading {
|
| 0% {
|
| background-position: 200% 0;
|
| }
|
|
|
| 100% {
|
| background-position: -200% 0;
|
| }
|
| }
|
|
|
|
|
| ::-webkit-scrollbar {
|
| width: 10px;
|
| height: 10px;
|
| }
|
|
|
| ::-webkit-scrollbar-track {
|
| background: var(--bg-dark);
|
| }
|
|
|
| ::-webkit-scrollbar-thumb {
|
| background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
|
| border-radius: 5px;
|
| }
|
|
|
| ::-webkit-scrollbar-thumb:hover {
|
| background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
|
| }
|
|
|
|
|
| .toast {
|
| position: fixed;
|
| bottom: 20px;
|
| right: 20px;
|
| background: var(--bg-card);
|
| border: 1px solid var(--border);
|
| border-radius: 12px;
|
| padding: 16px 20px;
|
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
| z-index: 2000;
|
| display: flex;
|
| align-items: center;
|
| gap: 12px;
|
| min-width: 300px;
|
| animation: slideInRight 0.3s;
|
| }
|
|
|
| @keyframes slideInRight {
|
| from {
|
| opacity: 0;
|
| transform: translateX(100%);
|
| }
|
|
|
| to {
|
| opacity: 1;
|
| transform: translateX(0);
|
| }
|
| }
|
|
|
| .toast-success {
|
| border-left: 4px solid var(--accent-green);
|
| }
|
|
|
| .toast-error {
|
| border-left: 4px solid var(--accent-red);
|
| }
|
|
|
| .toast-info {
|
| border-left: 4px solid var(--accent-blue);
|
| }
|
|
|
|
|
| .online-users-card {
|
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
|
| backdrop-filter: blur(10px);
|
| border: 2px solid rgba(59, 130, 246, 0.3);
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .online-users-card::before {
|
| content: '';
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| right: 0;
|
| height: 4px;
|
| background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
|
| }
|
|
|
| .online-users-card:hover {
|
| border-color: rgba(59, 130, 246, 0.6);
|
| box-shadow: 0 20px 50px rgba(59, 130, 246, 0.4);
|
| }
|
|
|
| .pulse-ring {
|
| position: absolute;
|
| top: 50%;
|
| right: 20px;
|
| transform: translateY(-50%);
|
| width: 60px;
|
| height: 60px;
|
| }
|
|
|
| .pulse-ring::before,
|
| .pulse-ring::after {
|
| content: '';
|
| position: absolute;
|
| border: 2px solid var(--accent-blue);
|
| border-radius: 50%;
|
| width: 100%;
|
| height: 100%;
|
| opacity: 0;
|
| animation: pulse-ring-animation 3s infinite;
|
| }
|
|
|
| .pulse-ring::after {
|
| animation-delay: 1.5s;
|
| }
|
|
|
| @keyframes pulse-ring-animation {
|
| 0% {
|
| transform: scale(0.5);
|
| opacity: 1;
|
| }
|
|
|
| 100% {
|
| transform: scale(1.5);
|
| opacity: 0;
|
| }
|
| }
|
|
|
|
|
| .ws-status-indicator {
|
| position: fixed;
|
| top: 20px;
|
| right: 20px;
|
| z-index: 10000;
|
| background: rgba(17, 24, 39, 0.95);
|
| backdrop-filter: blur(20px);
|
| border: 1px solid var(--border);
|
| border-radius: 16px;
|
| padding: 12px 20px;
|
| display: flex;
|
| align-items: center;
|
| gap: 12px;
|
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
| transition: all 0.3s ease;
|
| }
|
|
|
| .ws-status-indicator:hover {
|
| transform: translateY(-2px);
|
| box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
|
| }
|
|
|
| .ws-status-indicator.connected {
|
| border-color: rgba(16, 185, 129, 0.5);
|
| }
|
|
|
| .ws-status-indicator.disconnected {
|
| border-color: rgba(239, 68, 68, 0.5);
|
| }
|
|
|
|
|
| .stat-value {
|
| animation: fadeInUp 0.5s ease;
|
| }
|
|
|
| @keyframes fadeInUp {
|
| from {
|
| opacity: 0;
|
| transform: translateY(20px);
|
| }
|
|
|
| to {
|
| opacity: 1;
|
| transform: translateY(0);
|
| }
|
| }
|
|
|
| .shimmer {
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .shimmer::after {
|
| content: '';
|
| position: absolute;
|
| top: 0;
|
| right: 0;
|
| bottom: 0;
|
| left: 0;
|
| background: linear-gradient(90deg,
|
| transparent,
|
| rgba(255, 255, 255, 0.1),
|
| transparent);
|
| animation: shimmer 2s infinite;
|
| }
|
|
|
| @keyframes shimmer {
|
| 0% {
|
| transform: translateX(-100%);
|
| }
|
|
|
| 100% {
|
| transform: translateX(100%);
|
| }
|
| }
|
|
|
|
|
| .stat-icon {
|
| position: relative;
|
| }
|
|
|
| .stat-icon::after {
|
| content: '';
|
| position: absolute;
|
| inset: -10px;
|
| background: inherit;
|
| filter: blur(20px);
|
| opacity: 0;
|
| transition: opacity 0.3s ease;
|
| z-index: -1;
|
| }
|
|
|
| .stat-card:hover .stat-icon::after {
|
| opacity: 0.6;
|
| }
|
|
|
| .count-updated {
|
| animation: pop-scale 0.4s ease;
|
| }
|
|
|
| @keyframes pop-scale {
|
| 0% {
|
| transform: scale(1);
|
| }
|
|
|
| 50% {
|
| transform: scale(1.08);
|
| }
|
|
|
| 100% {
|
| transform: scale(1);
|
| }
|
| }
|
|
|
|
|
| .refresh-btn {
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .refresh-btn::before {
|
| content: '';
|
| position: absolute;
|
| top: 50%;
|
| left: 50%;
|
| width: 0;
|
| height: 0;
|
| border-radius: 50%;
|
| background: rgba(255, 255, 255, 0.3);
|
| transform: translate(-50%, -50%);
|
| transition: width 0.6s, height 0.6s;
|
| }
|
|
|
| .refresh-btn:active::before {
|
| width: 300px;
|
| height: 300px;
|
| }
|
|
|
|
|
| .live-indicator {
|
| position: relative;
|
| }
|
|
|
| .live-indicator::before {
|
| content: '';
|
| position: absolute;
|
| left: -20px;
|
| top: 50%;
|
| transform: translateY(-50%);
|
| width: 12px;
|
| height: 12px;
|
| background: var(--accent-red);
|
| border-radius: 50%;
|
| animation: live-pulse 2s infinite;
|
| }
|
|
|
| @keyframes live-pulse {
|
|
|
| 0%,
|
| 100% {
|
| box-shadow: 0 0 0 0 var(--accent-red);
|
| }
|
|
|
| 50% {
|
| box-shadow: 0 0 0 8px transparent;
|
| }
|
| }
|
|
|
|
|
| .glass-card {
|
| background: rgba(255, 255, 255, 0.05);
|
| backdrop-filter: blur(10px) saturate(180%);
|
| border: 1px solid rgba(255, 255, 255, 0.1);
|
| }
|
|
|
|
|
| .animated-progress {
|
| position: relative;
|
| height: 4px;
|
| background: rgba(255, 255, 255, 0.1);
|
| border-radius: 2px;
|
| overflow: hidden;
|
| }
|
|
|
| .animated-progress::after {
|
| content: '';
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| height: 100%;
|
| width: 30%;
|
| background: linear-gradient(90deg,
|
| transparent,
|
| var(--accent-blue),
|
| transparent);
|
| animation: progress-slide 2s infinite;
|
| }
|
|
|
| @keyframes progress-slide {
|
| 0% {
|
| transform: translateX(-100%);
|
| }
|
|
|
| 100% {
|
| transform: translateX(400%);
|
| }
|
| }
|
|
|
|
|
|
|
|
|
| .ripple {
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .ripple::after {
|
| content: '';
|
| position: absolute;
|
| top: 50%;
|
| left: 50%;
|
| width: 0;
|
| height: 0;
|
| border-radius: 50%;
|
| background: rgba(255, 255, 255, 0.5);
|
| transform: translate(-50%, -50%);
|
| transition: width 0.6s, height 0.6s;
|
| }
|
|
|
| .ripple:active::after {
|
| width: 300px;
|
| height: 300px;
|
| }
|
|
|
|
|
| .stat-card,
|
| .market-section,
|
| .chart-container {
|
| animation: cardFadeIn 0.6s ease-out;
|
| animation-fill-mode: both;
|
| }
|
|
|
| .stat-card:nth-child(1) { animation-delay: 0.1s; }
|
| .stat-card:nth-child(2) { animation-delay: 0.2s; }
|
| .stat-card:nth-child(3) { animation-delay: 0.3s; }
|
| .stat-card:nth-child(4) { animation-delay: 0.4s; }
|
| .stat-card:nth-child(5) { animation-delay: 0.5s; }
|
|
|
| @keyframes cardFadeIn {
|
| from {
|
| opacity: 0;
|
| transform: translateY(30px) scale(0.95);
|
| }
|
| to {
|
| opacity: 1;
|
| transform: translateY(0) scale(1);
|
| }
|
| }
|
|
|
|
|
| .number-counter {
|
| display: inline-block;
|
| transition: all 0.3s ease;
|
| }
|
|
|
| .number-counter.updated {
|
| animation: numberPop 0.5s ease;
|
| }
|
|
|
| @keyframes numberPop {
|
| 0%, 100% { transform: scale(1); }
|
| 50% { transform: scale(1.15); color: var(--accent-blue); }
|
| }
|
|
|
|
|
| .skeleton-loader {
|
| background: linear-gradient(
|
| 90deg,
|
| rgba(255, 255, 255, 0.05) 25%,
|
| rgba(255, 255, 255, 0.15) 50%,
|
| rgba(255, 255, 255, 0.05) 75%
|
| );
|
| background-size: 200% 100%;
|
| animation: skeleton-loading 1.5s ease-in-out infinite;
|
| border-radius: 8px;
|
| }
|
|
|
| @keyframes skeleton-loading {
|
| 0% { background-position: 200% 0; }
|
| 100% { background-position: -200% 0; }
|
| }
|
|
|
| .skeleton-text {
|
| height: 16px;
|
| margin-bottom: 8px;
|
| }
|
|
|
| .skeleton-title {
|
| height: 24px;
|
| width: 60%;
|
| margin-bottom: 16px;
|
| }
|
|
|
| .skeleton-avatar {
|
| width: 40px;
|
| height: 40px;
|
| border-radius: 50%;
|
| }
|
|
|
|
|
| table tbody tr {
|
| animation: rowSlideIn 0.4s ease-out;
|
| animation-fill-mode: both;
|
| }
|
|
|
| table tbody tr:nth-child(1) { animation-delay: 0.05s; }
|
| table tbody tr:nth-child(2) { animation-delay: 0.1s; }
|
| table tbody tr:nth-child(3) { animation-delay: 0.15s; }
|
| table tbody tr:nth-child(4) { animation-delay: 0.2s; }
|
| table tbody tr:nth-child(5) { animation-delay: 0.25s; }
|
| table tbody tr:nth-child(n+6) { animation-delay: 0.3s; }
|
|
|
| @keyframes rowSlideIn {
|
| from {
|
| opacity: 0;
|
| transform: translateX(-20px);
|
| }
|
| to {
|
| opacity: 1;
|
| transform: translateX(0);
|
| }
|
| }
|
|
|
|
|
| tr {
|
| transition: all 0.2s ease;
|
| cursor: pointer;
|
| }
|
|
|
| tr:hover {
|
| background: rgba(59, 130, 246, 0.1) !important;
|
| transform: translateX(5px);
|
| box-shadow: -5px 0 0 var(--accent-blue);
|
| }
|
|
|
|
|
| .search-container {
|
| position: relative;
|
| margin-bottom: 20px;
|
| }
|
|
|
| .search-input {
|
| width: 100%;
|
| padding: 14px 20px 14px 50px;
|
| background: rgba(17, 24, 39, 0.8);
|
| border: 2px solid var(--border);
|
| border-radius: 12px;
|
| color: var(--text-primary);
|
| font-size: 14px;
|
| transition: all 0.3s ease;
|
| }
|
|
|
| .search-input:focus {
|
| outline: none;
|
| border-color: var(--accent-blue);
|
| box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
|
| background: rgba(17, 24, 39, 0.95);
|
| }
|
|
|
| .search-icon {
|
| position: absolute;
|
| left: 18px;
|
| top: 50%;
|
| transform: translateY(-50%);
|
| color: var(--text-secondary);
|
| font-size: 18px;
|
| pointer-events: none;
|
| }
|
|
|
|
|
| .filter-chips {
|
| display: flex;
|
| gap: 10px;
|
| flex-wrap: wrap;
|
| margin-bottom: 20px;
|
| }
|
|
|
| .filter-chip {
|
| padding: 8px 16px;
|
| background: rgba(17, 24, 39, 0.6);
|
| border: 1px solid var(--border);
|
| border-radius: 20px;
|
| color: var(--text-secondary);
|
| font-size: 13px;
|
| font-weight: 600;
|
| cursor: pointer;
|
| transition: all 0.3s ease;
|
| }
|
|
|
| .filter-chip:hover {
|
| border-color: var(--accent-blue);
|
| color: var(--accent-blue);
|
| transform: translateY(-2px);
|
| }
|
|
|
| .filter-chip.active {
|
| background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
|
| border-color: transparent;
|
| color: white;
|
| box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
|
| }
|
|
|
|
|
| .toast-container {
|
| position: fixed;
|
| top: 20px;
|
| right: 20px;
|
| z-index: 10000;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 12px;
|
| max-width: 400px;
|
| }
|
|
|
| .toast {
|
| position: relative;
|
| padding: 16px 20px;
|
| background: var(--bg-card);
|
| border: 1px solid var(--border);
|
| border-radius: 12px;
|
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
| display: flex;
|
| align-items: center;
|
| gap: 12px;
|
| min-width: 300px;
|
| animation: toastSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
| backdrop-filter: blur(20px);
|
| }
|
|
|
| @keyframes toastSlideIn {
|
| from {
|
| opacity: 0;
|
| transform: translateX(400px) scale(0.8);
|
| }
|
| to {
|
| opacity: 1;
|
| transform: translateX(0) scale(1);
|
| }
|
| }
|
|
|
| .toast-icon {
|
| font-size: 24px;
|
| flex-shrink: 0;
|
| }
|
|
|
| .toast-content {
|
| flex: 1;
|
| }
|
|
|
| .toast-title {
|
| font-weight: 700;
|
| font-size: 14px;
|
| margin-bottom: 4px;
|
| }
|
|
|
| .toast-message {
|
| font-size: 13px;
|
| color: var(--text-secondary);
|
| }
|
|
|
| .toast-close {
|
| background: none;
|
| border: none;
|
| color: var(--text-secondary);
|
| font-size: 20px;
|
| cursor: pointer;
|
| padding: 0;
|
| width: 24px;
|
| height: 24px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| border-radius: 6px;
|
| transition: all 0.2s ease;
|
| }
|
|
|
| .toast-close:hover {
|
| background: rgba(255, 255, 255, 0.1);
|
| color: var(--text-primary);
|
| }
|
|
|
|
|
| .progress-indicator {
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 3px;
|
| background: rgba(255, 255, 255, 0.1);
|
| z-index: 10001;
|
| overflow: hidden;
|
| }
|
|
|
| .progress-bar {
|
| height: 100%;
|
| background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple), var(--accent-pink));
|
| width: 0%;
|
| transition: width 0.3s ease;
|
| animation: progress-shimmer 2s infinite;
|
| }
|
|
|
| @keyframes progress-shimmer {
|
| 0% { background-position: -200% 0; }
|
| 100% { background-position: 200% 0; }
|
| }
|
|
|
|
|
| .fab {
|
| position: fixed;
|
| bottom: 30px;
|
| right: 30px;
|
| width: 60px;
|
| height: 60px;
|
| border-radius: 50%;
|
| background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
|
| border: none;
|
| color: white;
|
| font-size: 24px;
|
| cursor: pointer;
|
| box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
|
| transition: all 0.3s ease;
|
| z-index: 1000;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| }
|
|
|
| .fab:hover {
|
| transform: scale(1.1) rotate(90deg);
|
| box-shadow: 0 15px 40px rgba(59, 130, 246, 0.6);
|
| }
|
|
|
| .fab:active {
|
| transform: scale(0.95);
|
| }
|
|
|
|
|
| .feedback-overlay {
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background: rgba(0, 0, 0, 0.7);
|
| backdrop-filter: blur(5px);
|
| z-index: 10002;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| opacity: 0;
|
| pointer-events: none;
|
| transition: opacity 0.3s ease;
|
| }
|
|
|
| .feedback-overlay.show {
|
| opacity: 1;
|
| pointer-events: all;
|
| }
|
|
|
| .feedback-card {
|
| background: var(--bg-card);
|
| border-radius: 20px;
|
| padding: 40px;
|
| text-align: center;
|
| max-width: 400px;
|
| border: 2px solid var(--border);
|
| transform: scale(0.8);
|
| transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
| }
|
|
|
| .feedback-overlay.show .feedback-card {
|
| transform: scale(1);
|
| }
|
|
|
| .feedback-icon {
|
| font-size: 64px;
|
| margin-bottom: 20px;
|
| animation: feedbackBounce 0.6s ease;
|
| }
|
|
|
| @keyframes feedbackBounce {
|
| 0%, 100% { transform: scale(1); }
|
| 50% { transform: scale(1.2); }
|
| }
|
|
|
| .feedback-title {
|
| font-size: 24px;
|
| font-weight: 800;
|
| margin-bottom: 10px;
|
| }
|
|
|
| .feedback-message {
|
| color: var(--text-secondary);
|
| margin-bottom: 30px;
|
| }
|
|
|
|
|
| .pulse-data {
|
| animation: pulseGlow 2s ease-in-out infinite;
|
| }
|
|
|
| @keyframes pulseGlow {
|
| 0%, 100% {
|
| box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
|
| }
|
| 50% {
|
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.4);
|
| }
|
| }
|
|
|
|
|
| html {
|
| scroll-behavior: smooth;
|
| }
|
|
|
|
|
| *:focus-visible {
|
| outline: 2px solid var(--accent-blue);
|
| outline-offset: 2px;
|
| border-radius: 4px;
|
| }
|
|
|
|
|
| .loading-overlay {
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background: rgba(10, 14, 26, 0.9);
|
| backdrop-filter: blur(10px);
|
| z-index: 10003;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| gap: 20px;
|
| opacity: 0;
|
| pointer-events: none;
|
| transition: opacity 0.3s ease;
|
| }
|
|
|
| .loading-overlay.show {
|
| opacity: 1;
|
| pointer-events: all;
|
| }
|
|
|
| .loading-spinner-large {
|
| width: 80px;
|
| height: 80px;
|
| border: 6px solid var(--border);
|
| border-top-color: var(--accent-blue);
|
| border-radius: 50%;
|
| animation: spin 1s linear infinite;
|
| }
|
|
|
| .loading-text {
|
| font-size: 18px;
|
| font-weight: 600;
|
| color: var(--text-primary);
|
| }
|
|
|
|
|
| .tooltip {
|
| position: relative;
|
| cursor: help;
|
| }
|
|
|
| .tooltip::before {
|
| content: attr(data-tooltip);
|
| position: absolute;
|
| bottom: 100%;
|
| left: 50%;
|
| transform: translateX(-50%) translateY(-10px);
|
| padding: 8px 12px;
|
| background: var(--bg-card);
|
| border: 1px solid var(--border);
|
| border-radius: 8px;
|
| font-size: 12px;
|
| white-space: nowrap;
|
| opacity: 0;
|
| pointer-events: none;
|
| transition: all 0.3s ease;
|
| z-index: 1000;
|
| }
|
|
|
| .tooltip:hover::before {
|
| opacity: 1;
|
| transform: translateX(-50%) translateY(-5px);
|
| }
|
|
|
|
|
| .gradient-text {
|
| background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple), var(--accent-pink));
|
| background-size: 200% 200%;
|
| -webkit-background-clip: text;
|
| -webkit-text-fill-color: transparent;
|
| background-clip: text;
|
| animation: gradientShift 3s ease infinite;
|
| }
|
|
|
| @keyframes gradientShift {
|
| 0%, 100% { background-position: 0% 50%; }
|
| 50% { background-position: 100% 50%; }
|
| }
|
|
|
|
|
| .badge-pulse {
|
| animation: badgePulse 2s ease-in-out infinite;
|
| }
|
|
|
| @keyframes badgePulse {
|
| 0%, 100% { transform: scale(1); }
|
| 50% { transform: scale(1.1); }
|
| }
|
|
|
|
|
| button, a, input, select, textarea {
|
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
| }
|
|
|
|
|
| table {
|
| border-collapse: separate;
|
| border-spacing: 0;
|
| }
|
|
|
| thead th:first-child {
|
| border-top-left-radius: 12px;
|
| }
|
|
|
| thead th:last-child {
|
| border-top-right-radius: 12px;
|
| }
|
|
|
| tbody tr:last-child td:first-child {
|
| border-bottom-left-radius: 12px;
|
| }
|
|
|
| tbody tr:last-child td:last-child {
|
| border-bottom-right-radius: 12px;
|
| }
|
|
|
|
|
| .icon {
|
| width: 20px;
|
| height: 20px;
|
| display: inline-flex;
|
| align-items: center;
|
| justify-content: center;
|
| flex-shrink: 0;
|
| }
|
|
|
| .icon-sm {
|
| width: 16px;
|
| height: 16px;
|
| }
|
|
|
| .icon-md {
|
| width: 24px;
|
| height: 24px;
|
| }
|
|
|
| .icon-lg {
|
| width: 32px;
|
| height: 32px;
|
| }
|
|
|
| .icon-xl {
|
| width: 48px;
|
| height: 48px;
|
| }
|
|
|
| .icon svg {
|
| width: 100%;
|
| height: 100%;
|
| stroke: currentColor;
|
| fill: none;
|
| stroke-width: 2;
|
| stroke-linecap: round;
|
| stroke-linejoin: round;
|
| }
|
|
|
| .icon-filled svg {
|
| fill: currentColor;
|
| stroke: none;
|
| }
|
|
|
| .icon-gradient {
|
| background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
|
| -webkit-background-clip: text;
|
| -webkit-text-fill-color: transparent;
|
| background-clip: text;
|
| }
|
|
|
|
|
| .tab-icon {
|
| width: 18px;
|
| height: 18px;
|
| margin-right: 8px;
|
| display: inline-flex;
|
| align-items: center;
|
| justify-content: center;
|
| }
|
|
|
| .tab-icon svg {
|
| width: 100%;
|
| height: 100%;
|
| }
|
|
|
|
|
| .status-icon {
|
| width: 20px;
|
| height: 20px;
|
| display: inline-flex;
|
| align-items: center;
|
| justify-content: center;
|
| }
|
|
|
| .status-icon-success svg {
|
| color: var(--accent-green);
|
| }
|
|
|
| .status-icon-error svg {
|
| color: var(--accent-red);
|
| }
|
|
|
| .status-icon-warning svg {
|
| color: var(--accent-yellow);
|
| }
|
|
|
| .status-icon-info svg {
|
| color: var(--accent-blue);
|
| }
|
| </style>
|
|
|
|
|
| <svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
|
|
|
| <symbol id="icon-success" viewBox="0 0 24 24">
|
| <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
|
| <path d="M8 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-error" viewBox="0 0 24 24">
|
| <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
|
| <path d="M12 8v4M12 16h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-warning" viewBox="0 0 24 24">
|
| <path d="M12 2L2 22h20L12 2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| <path d="M12 9v4M12 17h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-info" viewBox="0 0 24 24">
|
| <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
|
| <path d="M12 16v-4M12 8h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-market" viewBox="0 0 24 24">
|
| <path d="M3 3v18h18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| <path d="M7 12l4-4 4 4 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-monitor" viewBox="0 0 24 24">
|
| <rect x="2" y="3" width="20" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
|
| <path d="M8 21h8M12 17v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-advanced" viewBox="0 0 24 24">
|
| <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-settings" viewBox="0 0 24 24">
|
| <circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="2"/>
|
| <path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-hf" viewBox="0 0 24 24">
|
| <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" fill="none" stroke="currentColor" stroke-width="2"/>
|
| <path d="M8 12h8M12 8v8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-pools" viewBox="0 0 24 24">
|
| <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-logs" viewBox="0 0 24 24">
|
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-resources" viewBox="0 0 24 24">
|
| <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| <path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-reports" viewBox="0 0 24 24">
|
| <path d="M3 3v18h18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| <path d="M18 17V9M12 17V5M6 17v-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-search" viewBox="0 0 24 24">
|
| <circle cx="11" cy="11" r="8" fill="none" stroke="currentColor" stroke-width="2"/>
|
| <path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-refresh" viewBox="0 0 24 24">
|
| <path d="M23 4v6h-6M1 20v-6h6M3.51 9a10 10 0 0 1 17.8-4.3M20.49 15a10 10 0 0 1-17.8 4.3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-trending-up" viewBox="0 0 24 24">
|
| <path d="M23 6l-9.5 9.5-5-5L1 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| <path d="M17 6h6v6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-trending-down" viewBox="0 0 24 24">
|
| <path d="M23 18l-9.5-9.5-5 5L1 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| <path d="M17 18h6v-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-volume" viewBox="0 0 24 24">
|
| <path d="M11 5L6 9H2v6h4l5 4V5z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-diamond" viewBox="0 0 24 24">
|
| <path d="M6 3h12l4 6-10 12L2 9l4-6z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| <path d="M11 3l1 18M13 3l-1 18M6 3l5 18M18 3l-5 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-fire" viewBox="0 0 24 24">
|
| <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-link" viewBox="0 0 24 24">
|
| <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-export" viewBox="0 0 24 24">
|
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| <path d="M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-delete" viewBox="0 0 24 24">
|
| <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| <path d="M10 11v6M14 11v6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-brain" viewBox="0 0 24 24">
|
| <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44L2 22v-4a2.5 2.5 0 0 1 2.5-2.5h5z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44L22 22v-4a2.5 2.5 0 0 0-2.5-2.5h-5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-arrow-up" viewBox="0 0 24 24">
|
| <path d="M12 19V5M5 12l7-7 7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </symbol>
|
|
|
|
|
| <symbol id="icon-live" viewBox="0 0 24 24">
|
| <circle cx="12" cy="12" r="10" fill="currentColor"/>
|
| </symbol>
|
| </svg>
|
| </head>
|
|
|
| <body>
|
|
|
| <div class="progress-indicator" id="progressIndicator">
|
| <div class="progress-bar" id="progressBar"></div>
|
| </div>
|
|
|
|
|
| <div class="toast-container" id="toastContainer"></div>
|
|
|
|
|
| <div class="loading-overlay" id="loadingOverlay">
|
| <div class="loading-spinner-large"></div>
|
| <div class="loading-text" id="loadingText">در حال بارگذاری...</div>
|
| </div>
|
|
|
|
|
| <div class="feedback-overlay" id="feedbackOverlay">
|
| <div class="feedback-card">
|
| <div class="feedback-icon" id="feedbackIcon">✅</div>
|
| <div class="feedback-title" id="feedbackTitle">موفق!</div>
|
| <div class="feedback-message" id="feedbackMessage">عملیات با موفقیت انجام شد</div>
|
| <button class="refresh-btn ripple" onclick="hideFeedback()">بستن</button>
|
| </div>
|
| </div>
|
|
|
|
|
| <button class="fab ripple" onclick="scrollToTop()" title="بازگشت به بالا">
|
| ↑
|
| </button>
|
|
|
|
|
| <div id="ws-connection-status" class="ws-status-indicator disconnected">
|
| <div id="ws-status-dot" class="status-dot status-dot-offline"></div>
|
| <span id="ws-status-text" class="ws-status-text">در حال اتصال...</span>
|
| <div id="online-users-badge" class="badge badge-info badge-pulse" style="margin-left: 10px;">0</div>
|
| </div>
|
|
|
| <div class="container">
|
|
|
| <div class="header">
|
| <div class="header-top">
|
| <div class="logo">
|
| <div class="logo-icon">₿</div>
|
| <div class="logo-text">
|
| <h1>Crypto Monitor ULTIMATE</h1>
|
| <p>Unified Dashboard • Real-time data from 100+ free APIs</p>
|
| </div>
|
| </div>
|
| <div class="header-actions">
|
| <div class="live-indicator">
|
| <span class="status-icon"><svg><use href="#icon-live"></use></svg></span>
|
| LIVE
|
| </div>
|
| <div class="status-badge">
|
| <div class="status-dot"></div>
|
| <span id="statusText">All Systems Operational</span>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="tabs">
|
| <button class="tab active" onclick="switchTab('market')">
|
| <span class="tab-icon"><svg><use href="#icon-market"></use></svg></span>
|
| Market
|
| </button>
|
| <button class="tab" onclick="switchTab('monitor')">
|
| <span class="tab-icon"><svg><use href="#icon-monitor"></use></svg></span>
|
| API Monitor
|
| </button>
|
| <button class="tab" onclick="switchTab('advanced')">
|
| <span class="tab-icon"><svg><use href="#icon-advanced"></use></svg></span>
|
| Advanced
|
| </button>
|
| <button class="tab" onclick="switchTab('admin')">
|
| <span class="tab-icon"><svg><use href="#icon-settings"></use></svg></span>
|
| Admin
|
| </button>
|
| <button class="tab" onclick="switchTab('hf')">
|
| <span class="tab-icon"><svg><use href="#icon-hf"></use></svg></span>
|
| HuggingFace
|
| </button>
|
| <button class="tab" onclick="switchTab('pools')">
|
| <span class="tab-icon"><svg><use href="#icon-pools"></use></svg></span>
|
| Pools
|
| </button>
|
| <button class="tab" onclick="switchTab('logs')">
|
| <span class="tab-icon"><svg><use href="#icon-logs"></use></svg></span>
|
| Logs
|
| </button>
|
| <button class="tab" onclick="switchTab('resources')">
|
| <span class="tab-icon"><svg><use href="#icon-resources"></use></svg></span>
|
| Resources
|
| </button>
|
| <button class="tab" onclick="switchTab('reports')">
|
| <span class="tab-icon"><svg><use href="#icon-reports"></use></svg></span>
|
| Reports
|
| </button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="tab-market" class="tab-content active">
|
|
|
| <div class="stats-grid stats-grid--market">
|
| <div class="stat-card online-users-card">
|
| <div class="pulse-ring"></div>
|
| <div class="stat-header">
|
| <div class="stat-icon">
|
| <svg viewBox="0 0 24 24" aria-hidden="true">
|
| <circle cx="9" cy="8" r="3" />
|
| <circle cx="17" cy="9" r="2.5" />
|
| <path d="M4 19v-1.5A4.5 4.5 0 018.5 13h1A4.5 4.5 0 0114 17.5V19" />
|
| <path d="M17 19v-1a3 3 0 00-3-3h-1.5" />
|
| </svg>
|
| </div>
|
| </div>
|
| <div class="stat-value shimmer" id="active-users-count">0</div>
|
| <div class="stat-label">کاربران آنلاین</div>
|
| <div class="stat-change positive">
|
| <span>📊</span>
|
| <span>کل نشستها: <span id="total-sessions-count">0</span></span>
|
| </div>
|
| <div class="animated-progress"></div>
|
| </div>
|
|
|
| <div class="stat-card">
|
| <div class="stat-header">
|
| <div class="stat-icon">
|
| <svg viewBox="0 0 24 24" aria-hidden="true">
|
| <circle cx="12" cy="12" r="6" />
|
| <path d="M12 8v8" />
|
| <path d="M9.5 10.5h5" />
|
| <path d="M9.5 13.5h5" />
|
| </svg>
|
| </div>
|
| </div>
|
| <div class="stat-value" id="totalMarketCap">$0.00T</div>
|
| <div class="stat-label">Total Market Cap</div>
|
| <div class="stat-change positive" id="mcapChange">
|
| <span>↑</span> <span>0.0%</span>
|
| </div>
|
| </div>
|
|
|
| <div class="stat-card">
|
| <div class="stat-header">
|
| <div class="stat-icon">
|
| <svg viewBox="0 0 24 24" aria-hidden="true">
|
| <path d="M6 16V9" />
|
| <path d="M12 16V5" />
|
| <path d="M18 16v-7" />
|
| <path d="M4 16h16" />
|
| </svg>
|
| </div>
|
| </div>
|
| <div class="stat-value" id="totalVolume">$0.00B</div>
|
| <div class="stat-label">24h Trading Volume</div>
|
| <div class="stat-change positive">
|
| <span>↑</span> <span>Volume spike</span>
|
| </div>
|
| </div>
|
|
|
| <div class="stat-card">
|
| <div class="stat-header">
|
| <div class="stat-icon">
|
| <svg viewBox="0 0 24 24" aria-hidden="true">
|
| <circle cx="12" cy="12" r="6" />
|
| <path d="M10 8h3a2 2 0 010 4h-3h3a2 2 0 010 4h-3" />
|
| <path d="M11 6v2" />
|
| <path d="M11 16v2" />
|
| </svg>
|
| </div>
|
| </div>
|
| <div class="stat-value" id="btcDominance">0.0%</div>
|
| <div class="stat-label">BTC Dominance</div>
|
| <div class="stat-change">
|
| <span id="btcDomIcon">↑</span> <span id="btcDomChange">0.0%</span>
|
| </div>
|
| </div>
|
|
|
| <div class="stat-card">
|
| <div class="stat-header">
|
| <div class="stat-icon">
|
| <svg viewBox="0 0 24 24" aria-hidden="true">
|
| <path
|
| d="M5.5 15c0 3.6 3 5.5 6.5 5.5s6.5-1.9 6.5-5.5c0-2.6-1.7-4.4-3.4-6.4-.4-.5-.8-1-1.1-1.6-.3-.6-.6-1.3-.8-2-1.6 1.4-3.3 3.2-3.3 5.1-1.2-.8-2.4-2-2.4-3.6C7 9 5.5 11.4 5.5 13.5Z" />
|
| <path d="M10.5 18.5c-1.1-.7-1.8-1.7-1.8-3 0-1.1.5-2 1.2-2.8" />
|
| </svg>
|
| </div>
|
| </div>
|
| <div class="stat-value" id="fearGreed">50</div>
|
| <div class="stat-label">Fear & Greed Index</div>
|
| <div class="stat-change" id="sentimentLabel">
|
| <span>Neutral</span>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="market-section">
|
| <div class="section-header">
|
| <div class="section-title gradient-text">
|
| <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-diamond"></use></svg></span>
|
| Live Market Data
|
| </div>
|
| <button class="refresh-btn ripple" onclick="loadMarketData()" data-tooltip="بهروزرسانی دادههای بازار">
|
| <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
|
| Refresh
|
| </button>
|
| </div>
|
|
|
|
|
| <div class="search-container">
|
| <span class="search-icon icon"><svg><use href="#icon-search"></use></svg></span>
|
| <input type="text" class="search-input" id="marketSearch" placeholder="جستجوی ارز دیجیتال (مثال: Bitcoin, BTC, Ethereum)..." oninput="filterMarketTable()">
|
| </div>
|
|
|
|
|
| <div class="filter-chips">
|
| <button class="filter-chip active" onclick="filterByCategory('all')">همه</button>
|
| <button class="filter-chip" onclick="filterByCategory('top10')">Top 10</button>
|
| <button class="filter-chip" onclick="filterByCategory('gainers')">
|
| <span class="icon icon-sm status-icon-success"><svg><use href="#icon-trending-up"></use></svg></span>
|
| در حال رشد
|
| </button>
|
| <button class="filter-chip" onclick="filterByCategory('losers')">
|
| <span class="icon icon-sm status-icon-error"><svg><use href="#icon-trending-down"></use></svg></span>
|
| در حال سقوط
|
| </button>
|
| <button class="filter-chip" onclick="filterByCategory('volume')">
|
| <span class="icon icon-sm"><svg><use href="#icon-volume"></use></svg></span>
|
| حجم بالا
|
| </button>
|
| </div>
|
| <div style="overflow-x: auto;">
|
| <table id="marketTable">
|
| <thead>
|
| <tr>
|
| <th>#</th>
|
| <th>Name</th>
|
| <th>Price</th>
|
| <th>24h Change</th>
|
| <th>Market Cap</th>
|
| <th>Volume 24h</th>
|
| </tr>
|
| </thead>
|
| <tbody id="marketTableBody">
|
| <tr>
|
| <td colspan="6">
|
| <div class="loading">
|
| <div class="spinner"></div>
|
| </div>
|
| </td>
|
| </tr>
|
| </tbody>
|
| </table>
|
| </div>
|
| </div>
|
|
|
|
|
| <div
|
| style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin-bottom: 30px;">
|
| <div class="chart-container">
|
| <div class="section-title" style="margin-bottom: 20px;">📈 Market Dominance</div>
|
| <canvas id="dominanceChart"></canvas>
|
| </div>
|
|
|
| <div class="chart-container">
|
| <div class="section-title" style="margin-bottom: 20px;">😱 Fear & Greed Index</div>
|
| <div style="text-align: center;">
|
| <canvas id="gaugeChart"></canvas>
|
| <div style="font-size: 48px; font-weight: 900; margin: 20px 0 10px;" id="sentimentValue">50
|
| </div>
|
| <div style="color: var(--text-secondary); font-size: 16px; font-weight: 600;"
|
| id="sentimentText">Neutral</div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="market-section">
|
| <div class="section-title" style="margin-bottom: 20px;">
|
| <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-fire"></use></svg></span>
|
| Trending Now
|
| </div>
|
| <div id="trendingGrid"
|
| style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
|
| <div class="loading">
|
| <div class="spinner"></div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="market-section">
|
| <div class="section-title" style="margin-bottom: 20px;">🏦 Top DeFi Protocols</div>
|
| <div id="defiList">
|
| <div class="loading">
|
| <div class="spinner"></div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="tab-monitor" class="tab-content">
|
| <div class="stats-grid">
|
| <div class="stat-card">
|
| <div class="stat-header">
|
| <div class="stat-icon">
|
| <svg viewBox="0 0 24 24" aria-hidden="true">
|
| <rect x="4" y="4" width="16" height="5" rx="2" />
|
| <rect x="4" y="11" width="16" height="5" rx="2" />
|
| <path d="M8 6h.01" />
|
| <path d="M8 13h.01" />
|
| <path d="M12 16v4" />
|
| <path d="M10 20h4" />
|
| </svg>
|
| </div>
|
| </div>
|
| <div class="stat-value" id="totalAPIs">0</div>
|
| <div class="stat-label">Total APIs</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-header">
|
| <div class="stat-icon">
|
| <svg viewBox="0 0 24 24" aria-hidden="true">
|
| <circle cx="12" cy="12" r="7.5" />
|
| <path d="M9.2 12.2l2 2 4-4" />
|
| </svg>
|
| </div>
|
| </div>
|
| <div class="stat-value" id="onlineAPIs" style="color: var(--accent-green);">0</div>
|
| <div class="stat-label">Online</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-header">
|
| <div class="stat-icon">
|
| <svg viewBox="0 0 24 24" aria-hidden="true">
|
| <circle cx="12" cy="12" r="7.5" />
|
| <path d="M9 9l6 6" />
|
| <path d="M15 9l-6 6" />
|
| </svg>
|
| </div>
|
| </div>
|
| <div class="stat-value" id="offlineAPIs" style="color: var(--accent-red);">0</div>
|
| <div class="stat-label">Offline</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-header">
|
| <div class="stat-icon">
|
| <svg viewBox="0 0 24 24" aria-hidden="true">
|
| <path d="M11 3L6 13h5l-1 8 8-14h-5l1-4z" />
|
| </svg>
|
| </div>
|
| </div>
|
| <div class="stat-value" id="avgResponse" style="font-size: 28px;">0ms</div>
|
| <div class="stat-label">Avg Response</div>
|
| </div>
|
| </div>
|
|
|
| <div class="market-section">
|
| <div class="section-header">
|
| <div class="section-title">
|
| <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-monitor"></use></svg></span>
|
| API Providers Status
|
| </div>
|
| <button class="refresh-btn ripple" onclick="loadMonitorData()">
|
| <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
|
| Refresh
|
| </button>
|
| </div>
|
| <div style="overflow-x: auto;">
|
| <table>
|
| <thead>
|
| <tr>
|
| <th>Provider</th>
|
| <th>Category</th>
|
| <th>Status</th>
|
| <th>Response Time</th>
|
| <th>Last Check</th>
|
| </tr>
|
| </thead>
|
| <tbody id="providersTable">
|
| <tr>
|
| <td colspan="5" style="text-align: center;">Loading...</td>
|
| </tr>
|
| </tbody>
|
| </table>
|
| </div>
|
| </div>
|
|
|
| <div class="market-section">
|
| <div class="section-title" style="margin-bottom: 20px;">
|
| <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-brain"></use></svg></span>
|
| HuggingFace Sentiment Analysis
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">Enter crypto-related text (one per line):</label>
|
| <textarea class="form-textarea" id="sentimentText" rows="5"
|
| placeholder="BTC strong breakout ETH looks weak Market is bullish">BTC strong breakout
|
| ETH looks weak
|
| Market is bullish today</textarea>
|
| </div>
|
| <button class="refresh-btn ripple" onclick="runSentiment()">
|
| <span class="icon icon-sm"><svg><use href="#icon-brain"></use></svg></span>
|
| Analyze Sentiment
|
| </button>
|
| <div id="sentimentResult"
|
| style="margin-top: 20px; padding: 20px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; text-align: center; font-size: 36px; font-weight: 900;">
|
| —</div>
|
| <pre id="sentimentDetails"
|
| style="background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 8px; overflow-x: auto; font-size: 12px; margin-top: 15px; max-height: 300px; overflow-y: auto;"></pre>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="tab-advanced" class="tab-content">
|
| <div class="stats-grid">
|
| <div class="stat-card">
|
| <div class="stat-header">
|
| <div class="stat-icon">
|
| <svg viewBox="0 0 24 24" aria-hidden="true">
|
| <rect x="4" y="4" width="16" height="5" rx="2" />
|
| <rect x="4" y="11" width="16" height="5" rx="2" />
|
| <path d="M8 6h.01" />
|
| <path d="M8 13h.01" />
|
| <path d="M12 16v4" />
|
| <path d="M10 20h4" />
|
| </svg>
|
| </div>
|
| </div>
|
| <div class="stat-value" id="totalApis">0</div>
|
| <div class="stat-label">Total APIs</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-header">
|
| <div class="stat-icon">
|
| <svg viewBox="0 0 24 24" aria-hidden="true">
|
| <path d="M6 4v7m0 5v4" />
|
| <circle cx="6" cy="11" r="2" />
|
| <path d="M12 4v2m0 4v10" />
|
| <circle cx="12" cy="8" r="2" />
|
| <path d="M18 4v9m0 4v3" />
|
| <circle cx="18" cy="15" r="2" />
|
| </svg>
|
| </div>
|
| </div>
|
| <div class="stat-value" id="activeTasks">0</div>
|
| <div class="stat-label">Active Tasks</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-header">
|
| <div class="stat-icon">
|
| <svg viewBox="0 0 24 24" aria-hidden="true">
|
| <ellipse cx="12" cy="6" rx="7" ry="3" />
|
| <path d="M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6" />
|
| <path d="M5 12c0 1.7 3.1 3 7 3s7-1.3 7-3" />
|
| </svg>
|
| </div>
|
| </div>
|
| <div class="stat-value" id="cachedData">0</div>
|
| <div class="stat-label">Cached Data</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-header">
|
| <div class="stat-icon">
|
| <svg viewBox="0 0 24 24" aria-hidden="true">
|
| <path d="M8 3v4" />
|
| <path d="M16 3v4" />
|
| <path d="M6 11h12" />
|
| <path d="M10 15h4v6" />
|
| <path d="M8 7h8v4a6 6 0 01-12 0V7z" />
|
| </svg>
|
| </div>
|
| </div>
|
| <div class="stat-value" id="wsConnections">0</div>
|
| <div class="stat-label">WS Connections</div>
|
| </div>
|
| </div>
|
|
|
| <div class="market-section">
|
| <div class="section-header">
|
| <div class="section-title">🔧 Advanced Actions</div>
|
| </div>
|
| <div style="display: flex; gap: 15px; flex-wrap: wrap;">
|
| <button class="refresh-btn" onclick="exportJSON()">💾 Export JSON</button>
|
| <button class="refresh-btn" onclick="exportCSV()">📊 Export CSV</button>
|
| <button class="refresh-btn" onclick="createBackup()">🔄 Create Backup</button>
|
| <button class="refresh-btn" onclick="clearCache()">🗑️ Clear Cache</button>
|
| <button class="refresh-btn" onclick="forceUpdateAll()">🔃 Force Update All</button>
|
| </div>
|
| </div>
|
|
|
| <div class="market-section">
|
| <div class="section-title" style="margin-bottom: 20px;">📈 Recent Activity</div>
|
| <div id="activityLog"
|
| style="max-height: 400px; overflow-y: auto; font-family: monospace; font-size: 12px;">
|
| <div style="padding: 10px; border-left: 3px solid var(--accent-blue); margin-bottom: 8px;">
|
| <span style="opacity: 0.6;">--:--:--</span> Waiting for updates...
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="market-section">
|
| <div class="section-title" style="margin-bottom: 20px;">🔌 API Sources</div>
|
| <div id="apiList">
|
| <div class="loading">
|
| <div class="spinner"></div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="tab-admin" class="tab-content">
|
| <div class="market-section">
|
| <div class="section-title" style="margin-bottom: 20px;">➕ Add New API Source</div>
|
| <div class="form-group">
|
| <label class="form-label">API Name</label>
|
| <input type="text" class="form-input" id="newApiName" placeholder="e.g., CoinGecko">
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">API URL</label>
|
| <input type="text" class="form-input" id="newApiUrl" placeholder="https://api.example.com/endpoint">
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">Category</label>
|
| <select class="form-select" id="newApiCategory">
|
| <option value="market_data">Market Data</option>
|
| <option value="blockchain_explorers">Blockchain Explorers</option>
|
| <option value="news">News & Social</option>
|
| <option value="sentiment">Sentiment</option>
|
| <option value="defi">DeFi</option>
|
| <option value="nft">NFT</option>
|
| </select>
|
| </div>
|
| <button class="refresh-btn" onclick="addNewAPI()">➕ Add API Source</button>
|
| </div>
|
|
|
| <div class="market-section">
|
| <div class="section-title" style="margin-bottom: 20px;">
|
| <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-logs"></use></svg></span>
|
| Current API Sources
|
| </div>
|
| <div id="apisList">Loading...</div>
|
| </div>
|
|
|
| <div class="market-section">
|
| <div class="section-title" style="margin-bottom: 20px;">
|
| <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-settings"></use></svg></span>
|
| Settings
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">API Check Interval (seconds)</label>
|
| <input type="number" class="form-input" id="checkInterval" value="30" min="10" max="300">
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">Dashboard Auto-Refresh (seconds)</label>
|
| <input type="number" class="form-input" id="dashboardRefresh" value="30" min="5" max="300">
|
| </div>
|
| <button class="refresh-btn" onclick="saveSettings()">💾 Save Settings</button>
|
| </div>
|
|
|
| <div class="market-section">
|
| <div class="section-title" style="margin-bottom: 20px;">
|
| <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-reports"></use></svg></span>
|
| Statistics
|
| </div>
|
| <div class="stats-grid">
|
| <div class="stat-card">
|
| <div class="stat-value" id="statTotal">0</div>
|
| <div class="stat-label">Total API Sources</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value" id="statOnline" style="color: var(--accent-green);">0</div>
|
| <div class="stat-label">Currently Online</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value" id="statOffline" style="color: var(--accent-red);">0</div>
|
| <div class="stat-label">Currently Offline</div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="tab-hf" class="tab-content">
|
| <div class="market-section">
|
| <div class="section-header">
|
| <div class="section-title">
|
| <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-reports"></use></svg></span>
|
| Health Status
|
| </div>
|
| <button class="refresh-btn ripple" onclick="loadHFHealth()">
|
| <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
|
| Refresh
|
| </button>
|
| </div>
|
| <pre id="healthOutput"
|
| style="background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 8px; overflow-x: auto; font-size: 12px; max-height: 200px; overflow-y: auto;">Loading...</pre>
|
| </div>
|
|
|
| <div
|
| style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px;">
|
| <div class="market-section">
|
| <div class="section-title" style="margin-bottom: 20px;">🤖 Models Registry</div>
|
| <button class="refresh-btn" onclick="loadModels()" style="margin-bottom: 15px;">Load Models</button>
|
| <div id="modelsList"
|
| style="max-height: 300px; overflow-y: auto; background: rgba(17, 24, 39, 0.6); padding: 15px; border-radius: 8px;">
|
| <p style="color: var(--text-secondary);">Click "Load Models" to fetch...</p>
|
| </div>
|
| </div>
|
|
|
| <div class="market-section">
|
| <div class="section-title" style="margin-bottom: 20px;">📚 Datasets Registry</div>
|
| <button class="refresh-btn" onclick="loadDatasets()" style="margin-bottom: 15px;">Load
|
| Datasets</button>
|
| <div id="datasetsList"
|
| style="max-height: 300px; overflow-y: auto; background: rgba(17, 24, 39, 0.6); padding: 15px; border-radius: 8px;">
|
| <p style="color: var(--text-secondary);">Click "Load Datasets" to fetch...</p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="market-section">
|
| <div class="section-title" style="margin-bottom: 20px;">🔍 Search Registry</div>
|
| <div class="form-group">
|
| <input type="text" class="form-input" id="searchQuery"
|
| placeholder="Search query (e.g., crypto, bitcoin, sentiment)" value="crypto">
|
| </div>
|
| <div style="display: flex; gap: 10px; margin-bottom: 15px;">
|
| <button class="refresh-btn" onclick="doSearch()">Search Models</button>
|
| <button class="refresh-btn" onclick="doSearchDatasets()">Search Datasets</button>
|
| </div>
|
| <div id="searchResults"
|
| style="max-height: 300px; overflow-y: auto; background: rgba(17, 24, 39, 0.6); padding: 15px; border-radius: 8px;">
|
| <p style="color: var(--text-secondary);">Enter a query and click search...</p>
|
| </div>
|
| </div>
|
|
|
| <div class="market-section">
|
| <div class="section-title" style="margin-bottom: 20px;">
|
| <span class="icon icon-md"><svg><use href="#icon-brain"></use></svg></span>
|
| Sentiment Analysis
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">Enter text samples (one per line):</label>
|
| <textarea class="form-textarea" id="sentimentTexts" rows="5"
|
| placeholder="BTC strong breakout ETH looks weak Market sentiment is bullish">BTC strong breakout
|
| ETH looks weak
|
| Crypto market is bullish today</textarea>
|
| </div>
|
| <button class="refresh-btn ripple" onclick="doSentiment()">
|
| <span class="icon icon-sm"><svg><use href="#icon-brain"></use></svg></span>
|
| Run Sentiment Analysis
|
| </button>
|
| <div id="voteDisplay"
|
| style="margin-top: 20px; padding: 20px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; text-align: center; font-size: 36px; font-weight: 900;">
|
| —</div>
|
| <pre id="sentimentOutput"
|
| style="background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 8px; overflow-x: auto; font-size: 12px; margin-top: 15px; max-height: 300px; overflow-y: auto;">Results will appear here...</pre>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="tab-logs" class="tab-content">
|
| <div class="market-section">
|
| <div class="section-header">
|
| <div class="section-title">
|
| <span class="icon icon-md"><svg><use href="#icon-logs"></use></svg></span>
|
| Log Management
|
| </div>
|
| <div style="display: flex; gap: 10px;">
|
| <button class="refresh-btn ripple" onclick="loadLogs()">
|
| <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
|
| Refresh
|
| </button>
|
| <button class="refresh-btn ripple" onclick="exportLogsJSON()"
|
| style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">
|
| <span class="icon icon-sm"><svg><use href="#icon-export"></use></svg></span>
|
| Export JSON
|
| </button>
|
| <button class="refresh-btn ripple" onclick="exportLogsCSV()"
|
| style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">
|
| <span class="icon icon-sm"><svg><use href="#icon-reports"></use></svg></span>
|
| Export CSV
|
| </button>
|
| <button class="refresh-btn ripple" onclick="clearAllLogs()"
|
| style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red);">
|
| <span class="icon icon-sm"><svg><use href="#icon-delete"></use></svg></span>
|
| Clear
|
| </button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div
|
| style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;">
|
| <div class="form-group">
|
| <label class="form-label">Level</label>
|
| <select class="form-select" id="logLevelFilter" onchange="loadLogs()">
|
| <option value="">All Levels</option>
|
| <option value="debug">Debug</option>
|
| <option value="info">Info</option>
|
| <option value="warning">Warning</option>
|
| <option value="error">Error</option>
|
| <option value="critical">Critical</option>
|
| </select>
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">Category</label>
|
| <select class="form-select" id="logCategoryFilter" onchange="loadLogs()">
|
| <option value="">All Categories</option>
|
| <option value="provider">Provider</option>
|
| <option value="pool">Pool</option>
|
| <option value="api">API</option>
|
| <option value="system">System</option>
|
| <option value="health_check">Health Check</option>
|
| </select>
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">Search</label>
|
| <input type="text" class="form-input" id="logSearch" placeholder="Search logs..."
|
| onkeyup="loadLogs()">
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">Limit</label>
|
| <input type="number" class="form-input" id="logLimit" value="100" min="10" max="1000"
|
| onchange="loadLogs()">
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="stats-grid" style="margin-bottom: 20px;">
|
| <div class="stat-card">
|
| <div class="stat-value" id="totalLogs">0</div>
|
| <div class="stat-label">Total Logs</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value" id="errorLogs" style="color: var(--accent-red);">0</div>
|
| <div class="stat-label">Errors</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value" id="infoLogs" style="color: var(--accent-blue);">0</div>
|
| <div class="stat-label">Info</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value" id="warningLogs" style="color: var(--accent-yellow);">0</div>
|
| <div class="stat-label">Warnings</div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div style="overflow-x: auto;">
|
| <table>
|
| <thead>
|
| <tr>
|
| <th>Time</th>
|
| <th>Level</th>
|
| <th>Category</th>
|
| <th>Message</th>
|
| <th>Provider</th>
|
| <th>Response Time</th>
|
| </tr>
|
| </thead>
|
| <tbody id="logsTableBody">
|
| <tr>
|
| <td colspan="6" style="text-align: center;">Loading logs...</td>
|
| </tr>
|
| </tbody>
|
| </table>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="tab-resources" class="tab-content">
|
| <div class="market-section">
|
| <div class="section-header">
|
| <div class="section-title">📦 Resource Management</div>
|
| <div style="display: flex; gap: 10px;">
|
| <button class="refresh-btn" onclick="loadResources()">🔄 Refresh</button>
|
| <button class="refresh-btn" onclick="exportResourcesJSON()"
|
| style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">💾 Export
|
| JSON</button>
|
| <button class="refresh-btn" onclick="exportResourcesCSV()"
|
| style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">📊 Export
|
| CSV</button>
|
| <button class="refresh-btn" onclick="backupResources()"
|
| style="background: rgba(59, 130, 246, 0.2); color: var(--accent-blue);">💾 Backup</button>
|
| <button class="refresh-btn" onclick="showImportModal()"
|
| style="background: rgba(139, 92, 246, 0.2); color: var(--accent-purple);">📥 Import</button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="stats-grid" style="margin-bottom: 20px;">
|
| <div class="stat-card">
|
| <div class="stat-value" id="totalResources">0</div>
|
| <div class="stat-label">Total Resources</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value" id="freeResources" style="color: var(--accent-green);">0</div>
|
| <div class="stat-label">Free APIs</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value" id="paidResources" style="color: var(--accent-yellow);">0</div>
|
| <div class="stat-label">Paid APIs</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value" id="authResources">0</div>
|
| <div class="stat-label">Requires Auth</div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div style="margin-bottom: 20px;">
|
| <label class="form-label">Filter by Category</label>
|
| <select class="form-select" id="resourceCategoryFilter" onchange="loadResources()"
|
| style="max-width: 300px;">
|
| <option value="">All Categories</option>
|
| <option value="market_data">Market Data</option>
|
| <option value="exchange">Exchange</option>
|
| <option value="blockchain_explorer">Block Explorer</option>
|
| <option value="rpc">RPC</option>
|
| <option value="defi">DeFi</option>
|
| <option value="news">News</option>
|
| <option value="sentiment">Sentiment</option>
|
| <option value="analytics">Analytics</option>
|
| </select>
|
| </div>
|
|
|
|
|
| <div id="resourcesGrid"
|
| style="display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px;">
|
| <div class="loading">
|
| <div class="spinner"></div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="importModal" class="modal">
|
| <div class="modal-content">
|
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
| <h2 style="font-size: 24px; font-weight: 800;">📥 Import Resources</h2>
|
| <button onclick="closeImportModal()"
|
| style="background: none; border: none; color: var(--text-secondary); font-size: 28px; cursor: pointer;">×</button>
|
| </div>
|
| <form id="importForm">
|
| <div class="form-group">
|
| <label class="form-label">File Path</label>
|
| <input type="text" class="form-input" id="importFilePath" placeholder="path/to/file.json"
|
| required>
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">Import Mode</label>
|
| <select class="form-select" id="importMode">
|
| <option value="true">Merge (Add to existing)</option>
|
| <option value="false">Replace (Overwrite all)</option>
|
| </select>
|
| </div>
|
| <div style="display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px;">
|
| <button type="button" class="refresh-btn" onclick="closeImportModal()"
|
| style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red);">Cancel</button>
|
| <button type="submit" class="refresh-btn">Import</button>
|
| </div>
|
| </form>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="tab-reports" class="tab-content">
|
|
|
| <div class="market-section" id="systemAlertsSection" style="display: none;">
|
| <div class="section-header">
|
| <div class="section-title">
|
| <span class="icon icon-md status-icon-warning"><svg><use href="#icon-warning"></use></svg></span>
|
| System Status & Alerts
|
| </div>
|
| <button class="refresh-btn ripple" onclick="loadSystemAlerts()">
|
| <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
|
| Refresh
|
| </button>
|
| </div>
|
| <div id="systemAlertsContainer"></div>
|
| </div>
|
|
|
| <div class="market-section">
|
| <div class="section-header">
|
| <div class="section-title">
|
| <span class="icon icon-md"><svg><use href="#icon-search"></use></svg></span>
|
| System Diagnostics
|
| </div>
|
| <div style="display: flex; gap: 10px;">
|
| <button class="refresh-btn ripple" onclick="runDiagnostics(false)"
|
| style="background: rgba(59, 130, 246, 0.2); color: var(--accent-blue);">
|
| <span class="icon icon-sm"><svg><use href="#icon-search"></use></svg></span>
|
| بررسی
|
| </button>
|
| <button class="refresh-btn ripple" onclick="runDiagnostics(true)"
|
| style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">
|
| <span class="icon icon-sm"><svg><use href="#icon-settings"></use></svg></span>
|
| بررسی و تعمیر
|
| </button>
|
| <button class="refresh-btn ripple" onclick="loadReports()">
|
| <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
|
| بهروزرسانی
|
| </button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="diagnosticsResults" style="margin-top: 20px;">
|
| <div class="loading">
|
| <div class="spinner"></div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="market-section">
|
| <div class="section-header">
|
| <div class="section-title">
|
| <span class="icon icon-md"><svg><use href="#icon-pools"></use></svg></span>
|
| Auto-Discovery Service Report
|
| </div>
|
| <button class="refresh-btn ripple" onclick="loadDiscoveryReport()">
|
| <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
|
| بهروزرسانی
|
| </button>
|
| </div>
|
| <div id="discoveryReport">
|
| <div class="loading">
|
| <div class="spinner"></div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="market-section">
|
| <div class="section-header">
|
| <div class="section-title">
|
| <span class="icon icon-md"><svg><use href="#icon-brain"></use></svg></span>
|
| HuggingFace Models Status Report
|
| </div>
|
| <button class="refresh-btn ripple" onclick="loadModelsReport()">
|
| <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
|
| بهروزرسانی
|
| </button>
|
| </div>
|
| <div id="modelsReport">
|
| <div class="loading">
|
| <div class="spinner"></div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="tab-pools" class="tab-content">
|
| <div class="market-section">
|
| <div class="section-header">
|
| <div class="section-title">🔄 Source Pool Management</div>
|
| <div style="display: flex; gap: 10px;">
|
| <button class="refresh-btn" onclick="showCreatePoolModal()">➕ Create Pool</button>
|
| <button class="refresh-btn" onclick="loadPools()">🔄 Refresh</button>
|
| </div>
|
| </div>
|
| <div id="poolsContainer"
|
| style="display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 20px;">
|
| <div class="loading">
|
| <div class="spinner"></div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="market-section">
|
| <div class="section-title" style="margin-bottom: 20px;">📜 Rotation History</div>
|
| <div id="rotationHistory" style="max-height: 400px; overflow-y: auto;">
|
| <div class="loading">
|
| <div class="spinner"></div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="createPoolModal" class="modal">
|
| <div class="modal-content">
|
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
| <h2 style="font-size: 24px; font-weight: 800;">➕ Create New Pool</h2>
|
| <button onclick="closeCreatePoolModal()"
|
| style="background: none; border: none; color: var(--text-secondary); font-size: 28px; cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">×</button>
|
| </div>
|
| <form id="createPoolForm">
|
| <div class="form-group">
|
| <label class="form-label">Pool Name</label>
|
| <input type="text" class="form-input" id="poolName" required
|
| placeholder="e.g., Market Data Pool">
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">Category</label>
|
| <select class="form-select" id="poolCategory" required>
|
| <option value="market_data">Market Data</option>
|
| <option value="blockchain_explorers">Blockchain Explorers</option>
|
| <option value="news">News & Social</option>
|
| <option value="sentiment">Sentiment</option>
|
| <option value="defi">DeFi</option>
|
| <option value="nft">NFT</option>
|
| </select>
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">Rotation Strategy</label>
|
| <select class="form-select" id="rotationStrategy" required>
|
| <option value="round_robin">Round Robin</option>
|
| <option value="priority">Priority Based</option>
|
| <option value="weighted">Weighted</option>
|
| <option value="least_used">Least Used</option>
|
| </select>
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">Description (optional)</label>
|
| <textarea class="form-textarea" id="poolDescription" rows="3"
|
| placeholder="Pool description..."></textarea>
|
| </div>
|
| <div style="display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px;">
|
| <button type="button" class="refresh-btn" onclick="closeCreatePoolModal()"
|
| style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red);">Cancel</button>
|
| <button type="submit" class="refresh-btn">Create Pool</button>
|
| </div>
|
| </form>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="addMemberModal" class="modal">
|
| <div class="modal-content">
|
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
| <h2 style="font-size: 24px; font-weight: 800;">➕ Add Provider to Pool</h2>
|
| <button onclick="closeAddMemberModal()"
|
| style="background: none; border: none; color: var(--text-secondary); font-size: 28px; cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">×</button>
|
| </div>
|
| <form id="addMemberForm">
|
| <div class="form-group">
|
| <label class="form-label">Provider</label>
|
| <select class="form-select" id="memberProvider" required>
|
| <option value="">Select a provider...</option>
|
| </select>
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">Priority (1-10, higher = better)</label>
|
| <input type="number" class="form-input" id="memberPriority" value="1" min="1" max="10">
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label">Weight (1-100, for weighted strategy)</label>
|
| <input type="number" class="form-input" id="memberWeight" value="1" min="1" max="100">
|
| </div>
|
| <div style="display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px;">
|
| <button type="button" class="refresh-btn" onclick="closeAddMemberModal()"
|
| style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red);">Cancel</button>
|
| <button type="submit" class="refresh-btn">Add Member</button>
|
| </div>
|
| </form>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script>
|
|
|
| let charts = {};
|
| let wsConnection = null;
|
| let currentTab = 'market';
|
|
|
|
|
| function switchTab(tabName) {
|
| currentTab = tabName;
|
| document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
| document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
|
|
|
| event.target.classList.add('active');
|
| document.getElementById(`tab-${tabName}`).classList.add('active');
|
|
|
|
|
| if (tabName === 'market') {
|
| loadMarketData();
|
| } else if (tabName === 'monitor') {
|
| loadMonitorData();
|
| } else if (tabName === 'advanced') {
|
| loadAdvancedData();
|
| } else if (tabName === 'admin') {
|
| loadAdminData();
|
| } else if (tabName === 'hf') {
|
| loadHFHealth();
|
| } else if (tabName === 'pools') {
|
| loadPools();
|
| } else if (tabName === 'logs') {
|
| loadLogs();
|
| } else if (tabName === 'resources') {
|
| loadResources();
|
| } else if (tabName === 'reports') {
|
| loadReports();
|
| }
|
| }
|
|
|
|
|
| document.addEventListener('DOMContentLoaded', async () => {
|
| await loadMarketData();
|
| initCharts();
|
| connectWebSocket();
|
| setInterval(() => {
|
| if (currentTab === 'market') loadMarketData();
|
| else if (currentTab === 'monitor') loadMonitorData();
|
| }, 60000);
|
| });
|
|
|
|
|
| async function loadMarketData() {
|
| try {
|
|
|
| const marketTableBody = document.getElementById('marketTableBody');
|
| if (marketTableBody) {
|
| marketTableBody.innerHTML = '<tr><td colspan="6" style="text-align: center; padding: 40px;"><div class="loading"><div class="spinner"></div></div><div style="margin-top: 10px; color: var(--text-secondary);">در حال بارگذاری دادههای بازار...</div></td></tr>';
|
| }
|
|
|
| showProgress(60);
|
|
|
| const [marketRes, statsRes, sentimentRes, trendingRes, defiRes] = await Promise.all([
|
| fetch('/api/market'),
|
| fetch('/api/stats'),
|
| fetch('/api/sentiment'),
|
| fetch('/api/trending'),
|
| fetch('/api/defi')
|
| ]);
|
|
|
| showProgress(80);
|
|
|
|
|
| if (!marketRes.ok) throw new Error(`خطا در دریافت دادههای بازار: ${marketRes.status}`);
|
| if (!statsRes.ok) throw new Error(`خطا در دریافت آمار: ${statsRes.status}`);
|
| if (!sentimentRes.ok) throw new Error(`خطا در دریافت احساسات: ${sentimentRes.status}`);
|
| if (!trendingRes.ok) throw new Error(`خطا در دریافت ترندها: ${trendingRes.status}`);
|
| if (!defiRes.ok) throw new Error(`خطا در دریافت DeFi: ${defiRes.status}`);
|
|
|
| const [market, stats, sentiment, trending, defi] = await Promise.all([
|
| marketRes.json(),
|
| statsRes.json(),
|
| sentimentRes.json(),
|
| trendingRes.json(),
|
| defiRes.json()
|
| ]);
|
|
|
|
|
| if (!market || !Array.isArray(market.cryptocurrencies)) {
|
| throw new Error('دادههای بازار نامعتبر است: cryptocurrencies array not found');
|
| }
|
| if (!stats || typeof stats !== 'object' || stats === null) {
|
| console.error('Invalid stats:', stats);
|
| throw new Error('آمار نامعتبر است: stats object not found');
|
| }
|
|
|
| if (!stats.market || typeof stats.market !== 'object' || stats.market === null || Array.isArray(stats.market)) {
|
| console.error('Invalid stats.market:', stats.market);
|
| console.error('Full stats object:', JSON.stringify(stats, null, 2));
|
| throw new Error('آمار نامعتبر است: stats.market object not found');
|
| }
|
| if (!sentiment || typeof sentiment !== 'object' || sentiment === null) {
|
| throw new Error('دادههای احساسات نامعتبر است: sentiment object not found');
|
| }
|
|
|
|
|
|
|
|
|
| if (!trending || !Array.isArray(trending.trending)) {
|
| throw new Error('دادههای ترند نامعتبر است: trending array not found');
|
| }
|
| if (!defi || typeof defi !== 'object' || defi === null) {
|
| throw new Error('دادههای DeFi نامعتبر است: defi object not found');
|
| }
|
|
|
|
|
| if (stats && stats.market && typeof stats.market === 'object' && !Array.isArray(stats.market)) {
|
| updateStats(stats, sentiment);
|
| } else {
|
| console.error('Failed final validation before updateStats:', { stats, sentiment });
|
| throw new Error('دادههای stats.market نامعتبر است');
|
| }
|
| updateMarketTable(market.cryptocurrencies);
|
| updateTrending(trending.trending);
|
| updateDeFi(defi);
|
| updateCharts(market, sentiment);
|
| } catch (error) {
|
| console.error('Error loading market data:', error);
|
| const marketTableBody = document.getElementById('marketTableBody');
|
| if (marketTableBody) {
|
| marketTableBody.innerHTML = `<tr><td colspan="6" style="text-align: center; padding: 40px; color: var(--accent-red);">
|
| <div style="font-size: 24px; margin-bottom: 10px;">❌</div>
|
| <div style="font-weight: 600; margin-bottom: 5px;">خطا در بارگذاری دادهها</div>
|
| <div style="font-size: 14px; color: var(--text-secondary);">${error.message || 'خطای نامشخص'}</div>
|
| <button onclick="loadMarketData()" style="margin-top: 15px; padding: 10px 20px; background: var(--accent-blue); border: none; border-radius: 8px; color: white; cursor: pointer; font-weight: 600;">تلاش مجدد</button>
|
| </td></tr>`;
|
| }
|
| showToast('❌ خطا در بارگذاری دادههای بازار: ' + (error.message || 'خطای نامشخص'), 'error');
|
| }
|
| }
|
|
|
| function updateStats(stats, sentiment) {
|
| try {
|
|
|
| if (!stats || typeof stats !== 'object' || stats === null) {
|
| console.warn('updateStats: stats is undefined, null, or not an object', stats);
|
| return;
|
| }
|
| if (!stats.market || typeof stats.market !== 'object' || stats.market === null || Array.isArray(stats.market)) {
|
| console.warn('updateStats: stats.market is invalid', { stats, market: stats.market });
|
| return;
|
| }
|
| if (!sentiment || typeof sentiment !== 'object' || sentiment === null) {
|
| console.warn('updateStats: sentiment is undefined, null, or not an object', sentiment);
|
| return;
|
| }
|
|
|
|
|
| const marketObj = stats.market;
|
| if (!marketObj || typeof marketObj !== 'object' || marketObj === null) {
|
| console.warn('updateStats: marketObj is invalid', marketObj);
|
| return;
|
| }
|
|
|
| const mcap = (typeof marketObj.total_market_cap !== 'undefined' && marketObj.total_market_cap !== null) ? marketObj.total_market_cap : 0;
|
| const totalMarketCapEl = document.getElementById('totalMarketCap');
|
| if (totalMarketCapEl) {
|
| totalMarketCapEl.textContent = '$' + (mcap / 1e12).toFixed(2) + 'T';
|
| }
|
|
|
| const volume = (typeof marketObj.total_volume !== 'undefined' && marketObj.total_volume !== null) ? marketObj.total_volume : 0;
|
| const totalVolumeEl = document.getElementById('totalVolume');
|
| if (totalVolumeEl) {
|
| totalVolumeEl.textContent = '$' + (volume / 1e9).toFixed(2) + 'B';
|
| }
|
|
|
| const btcDom = (typeof marketObj.btc_dominance !== 'undefined' && marketObj.btc_dominance !== null) ? marketObj.btc_dominance : 0;
|
| const btcDominanceEl = document.getElementById('btcDominance');
|
| if (btcDominanceEl) {
|
| btcDominanceEl.textContent = btcDom.toFixed(1) + '%';
|
| }
|
|
|
|
|
|
|
|
|
| let fg = 50;
|
| let classification = 'Neutral';
|
|
|
| if (sentiment.fear_greed_index && typeof sentiment.fear_greed_index === 'object') {
|
|
|
| fg = (typeof sentiment.fear_greed_index.value !== 'undefined') ? sentiment.fear_greed_index.value : 50;
|
| classification = sentiment.fear_greed_index.classification || 'Neutral';
|
| } else if (typeof sentiment.fear_greed_value !== 'undefined') {
|
|
|
| fg = sentiment.fear_greed_value;
|
| classification = sentiment.classification || 'Neutral';
|
| } else if (typeof sentiment.value !== 'undefined') {
|
|
|
| fg = sentiment.value;
|
| classification = sentiment.classification || 'Neutral';
|
| }
|
|
|
| const fearGreedEl = document.getElementById('fearGreed');
|
| if (fearGreedEl) {
|
| fearGreedEl.textContent = fg;
|
| }
|
| const sentimentLabelEl = document.getElementById('sentimentLabel');
|
| if (sentimentLabelEl) {
|
| sentimentLabelEl.innerHTML = `<span>${classification}</span>`;
|
|
|
| if (fg < 25) {
|
| sentimentLabelEl.style.color = 'var(--accent-red)';
|
| } else if (fg < 45) {
|
| sentimentLabelEl.style.color = 'var(--accent-yellow)';
|
| } else if (fg < 55) {
|
| sentimentLabelEl.style.color = 'var(--text-secondary)';
|
| } else if (fg < 75) {
|
| sentimentLabelEl.style.color = 'var(--accent-blue)';
|
| } else {
|
| sentimentLabelEl.style.color = 'var(--accent-green)';
|
| }
|
| }
|
| } catch (error) {
|
| console.error('Error updating stats:', error);
|
| console.error('Stats object:', stats);
|
| console.error('Sentiment object:', sentiment);
|
| }
|
| }
|
|
|
| function updateMarketTable(cryptos) {
|
| try {
|
| if (!cryptos || !Array.isArray(cryptos) || cryptos.length === 0) {
|
| const tbody = document.getElementById('marketTableBody');
|
| if (tbody) {
|
| tbody.innerHTML = '<tr><td colspan="6" style="text-align: center; padding: 40px; color: var(--text-secondary);">هیچ دادهای یافت نشد</td></tr>';
|
| }
|
| return;
|
| }
|
|
|
| const tbody = document.getElementById('marketTableBody');
|
| if (!tbody) return;
|
|
|
|
|
| marketDataCache = cryptos;
|
|
|
| tbody.innerHTML = cryptos.map((crypto, index) => {
|
| const price = crypto.price || 0;
|
| const change24h = crypto.change_24h || 0;
|
| const marketCap = crypto.market_cap || 0;
|
| const volume24h = crypto.volume_24h || 0;
|
| const symbol = crypto.symbol || 'N/A';
|
| const name = crypto.name || 'نامشخص';
|
| const changeClass = change24h >= 0 ? 'positive' : 'negative';
|
| const changeIcon = change24h >= 0 ? '📈' : '📉';
|
|
|
| return `
|
| <tr data-name="${name.toLowerCase()}" data-symbol="${symbol.toLowerCase()}" data-change="${change24h}" data-rank="${crypto.rank || index + 1}">
|
| <td style="font-weight: 700; color: var(--text-secondary);">${crypto.rank || index + 1}</td>
|
| <td>
|
| <div class="crypto-name">
|
| ${crypto.image ? `<img src="${crypto.image}" class="crypto-img" alt="${symbol}" onerror="this.style.display='none'">` :
|
| `<div class="crypto-img" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6); display: flex; align-items: center; justify-content: center; font-weight: 700; color: white;">${symbol[0] || '?'}</div>`}
|
| <div>
|
| <div style="font-weight: 600;">${name}</div>
|
| <div class="crypto-symbol">${symbol}</div>
|
| </div>
|
| </div>
|
| </td>
|
| <td class="price number-counter">$${price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 })}</td>
|
| <td><span class="change ${changeClass} pulse-data">${changeIcon} ${change24h >= 0 ? '+' : ''}${change24h.toFixed(2)}%</span></td>
|
| <td style="font-weight: 600;">$${(marketCap / 1e9).toFixed(2)}B</td>
|
| <td style="color: var(--text-secondary);">$${(volume24h / 1e9).toFixed(2)}B</td>
|
| </tr>
|
| `;
|
| }).join('');
|
| } catch (error) {
|
| console.error('Error updating market table:', error);
|
| const tbody = document.getElementById('marketTableBody');
|
| if (tbody) {
|
| tbody.innerHTML = '<tr><td colspan="6" style="text-align: center; padding: 40px; color: var(--accent-red);">خطا در نمایش دادهها</td></tr>';
|
| }
|
| }
|
| }
|
|
|
| function updateTrending(trending) {
|
| try {
|
| const grid = document.getElementById('trendingGrid');
|
| if (!grid) return;
|
|
|
| if (!trending || !Array.isArray(trending) || trending.length === 0) {
|
| grid.innerHTML = '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">هیچ ترندی یافت نشد</div>';
|
| return;
|
| }
|
|
|
| grid.innerHTML = trending.map((coin, index) => {
|
| const name = coin.name || 'نامشخص';
|
| const symbol = coin.symbol || 'N/A';
|
| return `
|
| <div style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 12px; padding: 15px; display: flex; align-items: center; gap: 12px;">
|
| <div style="font-size: 20px; font-weight: 900; color: var(--accent-yellow);">#${index + 1}</div>
|
| ${coin.thumb ? `<img src="${coin.thumb}" style="width: 32px; height: 32px; border-radius: 8px;" onerror="this.style.display='none'">` : ''}
|
| <div>
|
| <div style="font-weight: 600;">${name}</div>
|
| <div style="font-size: 12px; color: var(--text-secondary);">${symbol}</div>
|
| </div>
|
| </div>
|
| `;
|
| }).join('');
|
| } catch (error) {
|
| console.error('Error updating trending:', error);
|
| const grid = document.getElementById('trendingGrid');
|
| if (grid) {
|
| grid.innerHTML = '<div style="text-align: center; padding: 40px; color: var(--accent-red);">خطا در نمایش ترندها</div>';
|
| }
|
| }
|
| }
|
|
|
| function updateDeFi(defi) {
|
| try {
|
| const list = document.getElementById('defiList');
|
| if (!list) return;
|
|
|
| const protocols = defi && defi.protocols ? defi.protocols : [];
|
| const totalTvl = defi && defi.total_tvl ? defi.total_tvl : 0;
|
|
|
| list.innerHTML = `
|
| <div class="stat-card" style="margin-bottom: 20px; text-align: center; background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));">
|
| <div class="stat-value gradient-text" style="font-size: 42px; margin-bottom: 8px;">$${(totalTvl / 1e9).toFixed(2)}B</div>
|
| <div class="stat-label" style="font-size: 16px;">Total Value Locked</div>
|
| </div>
|
| <div style="display: grid; gap: 12px;">
|
| ${protocols.length > 0 ? protocols.map((p, i) => {
|
| const name = p.name || 'نامشخص';
|
| const chain = p.chain || 'N/A';
|
| const tvl = p.tvl || 0;
|
| const change24h = p.change_24h || 0;
|
| const changeClass = change24h >= 0 ? 'positive' : 'negative';
|
| return `
|
| <div class="stat-card" style="animation-delay: ${i * 0.05}s; cursor: pointer;" onclick="showToast('${name}: $${(tvl / 1e9).toFixed(2)}B TVL', 'info', 'DeFi Protocol')">
|
| <div style="display: flex; justify-content: space-between; align-items: center;">
|
| <div>
|
| <div style="font-weight: 700; font-size: 16px; margin-bottom: 4px;">${i + 1}. ${name}</div>
|
| <div style="font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px;">
|
| <span>🔗</span> <span>${chain}</span>
|
| </div>
|
| </div>
|
| <div style="text-align: right;">
|
| <div class="stat-value" style="font-size: 18px; margin-bottom: 4px;">$${(tvl / 1e9).toFixed(2)}B</div>
|
| <div class="stat-change ${changeClass}" style="font-size: 13px;">
|
| ${change24h >= 0 ? '📈' : '📉'} ${change24h >= 0 ? '+' : ''}${change24h.toFixed(2)}%
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| `;
|
| }).join('') : '<div class="empty-state"><div class="empty-state-icon">📦</div><div>هیچ پروتکلی یافت نشد</div></div>'}
|
| </div>
|
| `;
|
| } catch (error) {
|
| console.error('Error updating DeFi:', error);
|
| const list = document.getElementById('defiList');
|
| if (list) {
|
| list.innerHTML = '<div style="text-align: center; padding: 40px; color: var(--accent-red);">خطا در نمایش دادههای DeFi</div>';
|
| }
|
| }
|
| }
|
|
|
| function initCharts() {
|
| Chart.defaults.color = '#9ca3af';
|
| Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.1)';
|
|
|
| charts.dominance = new Chart(document.getElementById('dominanceChart'), {
|
| type: 'doughnut',
|
| data: {
|
| labels: ['Bitcoin', 'Ethereum', 'Others'],
|
| datasets: [{
|
| data: [45, 18, 37],
|
| backgroundColor: ['#f7931a', '#627eea', '#8b5cf6'],
|
| borderWidth: 0
|
| }]
|
| },
|
| options: {
|
| responsive: true,
|
| plugins: {
|
| legend: { position: 'bottom', labels: { padding: 15, font: { size: 12, weight: 600 } } }
|
| }
|
| }
|
| });
|
|
|
| charts.gauge = new Chart(document.getElementById('gaugeChart'), {
|
| type: 'doughnut',
|
| data: {
|
| datasets: [{
|
| data: [50, 50],
|
| backgroundColor: ['#3b82f6', 'rgba(255, 255, 255, 0.1)'],
|
| borderWidth: 0
|
| }]
|
| },
|
| options: {
|
| rotation: -90,
|
| circumference: 180,
|
| cutout: '75%',
|
| plugins: { legend: { display: false }, tooltip: { enabled: false } }
|
| }
|
| });
|
| }
|
|
|
| function updateCharts(market, sentiment) {
|
| const btcDom = market.global.btc_dominance;
|
| const ethDom = market.global.eth_dominance;
|
| charts.dominance.data.datasets[0].data = [btcDom, ethDom, 100 - btcDom - ethDom];
|
| charts.dominance.update();
|
|
|
| const fg = sentiment.fear_greed_index.value;
|
| charts.gauge.data.datasets[0].data = [fg, 100 - fg];
|
|
|
| if (fg < 25) {
|
| charts.gauge.data.datasets[0].backgroundColor[0] = '#ef4444';
|
| } else if (fg < 45) {
|
| charts.gauge.data.datasets[0].backgroundColor[0] = '#f59e0b';
|
| } else if (fg < 55) {
|
| charts.gauge.data.datasets[0].backgroundColor[0] = '#6b7280';
|
| } else if (fg < 75) {
|
| charts.gauge.data.datasets[0].backgroundColor[0] = '#3b82f6';
|
| } else {
|
| charts.gauge.data.datasets[0].backgroundColor[0] = '#10b981';
|
| }
|
|
|
| charts.gauge.update();
|
| document.getElementById('sentimentValue').textContent = fg;
|
| document.getElementById('sentimentText').textContent = sentiment.fear_greed_index.classification;
|
| }
|
|
|
|
|
| let wsConnectAttempts = 0;
|
| const MAX_WS_CONNECT_ATTEMPTS = 10;
|
| let wsStatsInterval = null;
|
|
|
| function connectWebSocket() {
|
|
|
|
|
|
|
|
|
| if (window.wsClient && typeof window.wsClient.on === 'function' && typeof window.wsClient.requestStats === 'function') {
|
| console.log('✅ WebSocket Client آماده است');
|
| wsConnectAttempts = 0;
|
|
|
|
|
| window.wsClient.on('stats_update', (message) => {
|
| console.log('📊 Stats update:', message.data);
|
| if (typeof updateOnlineStats === 'function') {
|
| updateOnlineStats(message.data);
|
| }
|
| });
|
|
|
| window.wsClient.on('provider_stats', (message) => {
|
| console.log('📡 Provider stats:', message.data);
|
| if (currentTab === 'monitor' && typeof updateProviderStatsDisplay === 'function') {
|
| updateProviderStatsDisplay(message.data);
|
| }
|
| });
|
|
|
| window.wsClient.on('market_update', (message) => {
|
| console.log('💰 Market update');
|
| if (currentTab === 'market') {
|
| loadMarketData();
|
| }
|
| });
|
|
|
|
|
| setTimeout(() => {
|
| if (window.wsClient && window.wsClient.isConnected) {
|
| window.wsClient.requestStats();
|
| }
|
| }, 1000);
|
|
|
|
|
| if (!wsStatsInterval) {
|
| wsStatsInterval = setInterval(() => {
|
| if (window.wsClient && window.wsClient.isConnected) {
|
| window.wsClient.requestStats();
|
| }
|
| }, 10000);
|
| }
|
| } else {
|
| wsConnectAttempts++;
|
| if (wsConnectAttempts < MAX_WS_CONNECT_ATTEMPTS) {
|
|
|
| if (wsConnectAttempts % 5 === 0 || wsConnectAttempts === 1) {
|
| console.log(`⏳ در انتظار WebSocket Client... (${wsConnectAttempts}/${MAX_WS_CONNECT_ATTEMPTS})`);
|
| }
|
| setTimeout(connectWebSocket, 1000);
|
| } else {
|
| console.warn('⚠️ WebSocket Client پس از ' + MAX_WS_CONNECT_ATTEMPTS + ' تلاش آماده نشد. ممکن است فایل websocket-client.js لود نشده باشد یا WebSocket پشتیبانی نشود.');
|
| console.warn('⚠️ بررسی کنید که فایل /static/js/websocket-client.js به درستی لود شده باشد.');
|
|
|
| setTimeout(() => {
|
| if (!window.wsClient) {
|
| console.warn('⚠️ WebSocket Client غیرفعال است. برخی ویژگیهای real-time ممکن است کار نکنند.');
|
| console.warn('⚠️ برای فعال کردن WebSocket، صفحه را refresh کنید (Ctrl+F5 برای clear cache).');
|
| }
|
| }, 5000);
|
|
|
| return;
|
| }
|
| }
|
| }
|
|
|
|
|
| function updateOnlineStats(data) {
|
| const activeEl = document.getElementById('active-users-count');
|
| const totalEl = document.getElementById('total-sessions-count');
|
|
|
| if (data.active_connections !== undefined && activeEl) {
|
| activeEl.textContent = data.active_connections;
|
|
|
| activeEl.classList.add('count-updated');
|
| setTimeout(() => activeEl.classList.remove('count-updated'), 500);
|
| }
|
|
|
| if (data.total_sessions !== undefined && totalEl) {
|
| totalEl.textContent = data.total_sessions;
|
| }
|
| }
|
|
|
|
|
| function updateProviderStatsDisplay(stats) {
|
| if (stats.summary) {
|
| const summary = stats.summary;
|
| if (document.getElementById('totalAPIs')) {
|
| document.getElementById('totalAPIs').textContent = summary.total_providers || 0;
|
| }
|
| if (document.getElementById('onlineAPIs')) {
|
| document.getElementById('onlineAPIs').textContent = summary.online || 0;
|
| }
|
| if (document.getElementById('offlineAPIs')) {
|
| document.getElementById('offlineAPIs').textContent = summary.offline || 0;
|
| }
|
| }
|
| }
|
|
|
|
|
| async function loadMonitorData() {
|
| try {
|
|
|
| const tbody = document.getElementById('providersTable');
|
| if (tbody) {
|
| tbody.innerHTML = '<tr><td colspan="5" style="text-align: center; padding: 40px;"><div class="loading"><div class="spinner"></div></div><div style="margin-top: 10px; color: var(--text-secondary);">در حال بارگذاری وضعیت APIها...</div></td></tr>';
|
| }
|
|
|
| const [statusRes, providersRes] = await Promise.all([
|
| fetch('/api/status'),
|
| fetch('/api/providers')
|
| ]);
|
|
|
|
|
| if (!statusRes.ok) throw new Error(`خطا در دریافت وضعیت: ${statusRes.status}`);
|
| if (!providersRes.ok) throw new Error(`خطا در دریافت لیست APIها: ${providersRes.status}`);
|
|
|
| const [status, providers] = await Promise.all([
|
| statusRes.json(),
|
| providersRes.json()
|
| ]);
|
|
|
|
|
| if (!status || typeof status.total_providers === 'undefined') throw new Error('دادههای وضعیت نامعتبر است');
|
| if (!providers || !Array.isArray(providers)) throw new Error('لیست APIها نامعتبر است');
|
|
|
| if (document.getElementById('totalAPIs')) {
|
| document.getElementById('totalAPIs').textContent = status.total_providers || 0;
|
| }
|
| if (document.getElementById('onlineAPIs')) {
|
| document.getElementById('onlineAPIs').textContent = status.online || 0;
|
| }
|
| if (document.getElementById('offlineAPIs')) {
|
| document.getElementById('offlineAPIs').textContent = status.offline || 0;
|
| }
|
| if (document.getElementById('avgResponse')) {
|
| document.getElementById('avgResponse').textContent = (status.avg_response_time_ms || 0) + 'ms';
|
| }
|
|
|
| if (tbody) {
|
| if (providers.length === 0) {
|
| tbody.innerHTML = '<tr><td colspan="5" style="text-align: center; padding: 40px; color: var(--text-secondary);">هیچ APIای یافت نشد</td></tr>';
|
| } else {
|
| tbody.innerHTML = providers.map(p => {
|
| let statusClass = 'badge-success';
|
| if (p.status === 'offline') statusClass = 'badge-danger';
|
| else if (p.status === 'degraded') statusClass = 'badge-warning';
|
|
|
| return `
|
| <tr>
|
| <td><strong>${p.name || 'نامشخص'}</strong></td>
|
| <td><span class="badge badge-info">${p.category || 'نامشخص'}</span></td>
|
| <td><span class="badge ${statusClass}">${(p.status || 'unknown').toUpperCase()}</span></td>
|
| <td>${p.response_time_ms || p.avg_response_time_ms || 0}ms</td>
|
| <td style="color: var(--text-secondary); font-size: 13px;">${p.last_fetch ? new Date(p.last_fetch).toLocaleTimeString() : 'نامشخص'}</td>
|
| </tr>
|
| `;
|
| }).join('');
|
| }
|
| }
|
| } catch (error) {
|
| console.error('Error loading monitor data:', error);
|
| const tbody = document.getElementById('providersTable');
|
| if (tbody) {
|
| tbody.innerHTML = `<tr><td colspan="5" style="text-align: center; padding: 40px; color: var(--accent-red);">
|
| <div style="font-size: 24px; margin-bottom: 10px;">❌</div>
|
| <div style="font-weight: 600; margin-bottom: 5px;">خطا در بارگذاری دادهها</div>
|
| <div style="font-size: 14px; color: var(--text-secondary);">${error.message || 'خطای نامشخص'}</div>
|
| <button onclick="loadMonitorData()" style="margin-top: 15px; padding: 10px 20px; background: var(--accent-blue); border: none; border-radius: 8px; color: white; cursor: pointer; font-weight: 600;">تلاش مجدد</button>
|
| </td></tr>`;
|
| }
|
| showToast('❌ خطا در بارگذاری دادههای مانیتور: ' + (error.message || 'خطای نامشخص'), 'error');
|
| }
|
| }
|
|
|
| async function runSentiment() {
|
| const text = document.getElementById('sentimentText').value;
|
| const texts = text.split('\n').filter(t => t.trim());
|
|
|
| if (texts.length === 0) {
|
| showToast('Please enter at least one line of text', 'info');
|
| return;
|
| }
|
|
|
| try {
|
| document.getElementById('sentimentResult').textContent = '⏳ Analyzing...';
|
| document.getElementById('sentimentDetails').textContent = '';
|
|
|
| const res = await fetch('/api/hf/run-sentiment', {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' },
|
| body: JSON.stringify({ texts })
|
| });
|
|
|
| const data = await res.json();
|
| const vote = data.vote || 0;
|
| let emoji = '😐';
|
| let color = 'var(--text-secondary)';
|
|
|
| if (vote > 0.2) {
|
| emoji = '📈';
|
| color = 'var(--accent-green)';
|
| } else if (vote < -0.2) {
|
| emoji = '📉';
|
| color = 'var(--accent-red)';
|
| }
|
|
|
| document.getElementById('sentimentResult').innerHTML = `<span style="color: ${color};">${emoji} ${vote.toFixed(3)}</span>`;
|
| document.getElementById('sentimentDetails').textContent = JSON.stringify(data, null, 2);
|
| } catch (error) {
|
| document.getElementById('sentimentResult').innerHTML = '<span style="color: var(--accent-red);">❌ Error</span>';
|
| document.getElementById('sentimentDetails').textContent = 'Error: ' + error.message;
|
| }
|
| }
|
|
|
|
|
| async function loadAdvancedData() {
|
| try {
|
| const response = await fetch('/api/v2/status');
|
| const data = await response.json();
|
|
|
| document.getElementById('totalApis').textContent = data.services.config_loader.apis_loaded;
|
| document.getElementById('activeTasks').textContent = data.services.scheduler.total_tasks;
|
| document.getElementById('cachedData').textContent = data.services.persistence.cached_apis;
|
| document.getElementById('wsConnections').textContent = data.services.websocket.total_connections;
|
|
|
| const apisResponse = await fetch('/api/v2/config/apis');
|
| const apisData = await apisResponse.json();
|
| displayAPIs(apisData.apis);
|
| } catch (error) {
|
| console.error('Error loading advanced data:', error);
|
| }
|
| }
|
|
|
| function displayAPIs(apis) {
|
| const listElement = document.getElementById('apiList');
|
| listElement.innerHTML = '';
|
|
|
| for (const [apiId, api] of Object.entries(apis)) {
|
| const item = document.createElement('div');
|
| item.style.cssText = 'background: rgba(17, 24, 39, 0.6); padding: 15px; border-radius: 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;';
|
| item.innerHTML = `
|
| <div>
|
| <div style="font-weight: 600;">${api.name}</div>
|
| <div style="font-size: 12px; color: var(--text-secondary);">${api.category}</div>
|
| </div>
|
| <button class="refresh-btn" onclick="forceUpdate('${apiId}')" style="padding: 6px 12px; font-size: 12px;">🔄 Update</button>
|
| `;
|
| listElement.appendChild(item);
|
| }
|
| }
|
|
|
| async function exportJSON() {
|
| try {
|
| const response = await fetch('/api/v2/export/json', {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' },
|
| body: JSON.stringify({ include_history: true })
|
| });
|
| const data = await response.json();
|
| showToast('✅ JSON export created!', 'success');
|
| addLog(`Exported to JSON: ${data.filepath}`);
|
| } catch (error) {
|
| showToast('❌ Export failed', 'error');
|
| console.error(error);
|
| }
|
| }
|
|
|
| async function exportCSV() {
|
| try {
|
| const response = await fetch('/api/v2/export/csv', {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' },
|
| body: JSON.stringify({ flatten: true })
|
| });
|
| const data = await response.json();
|
| showToast('✅ CSV export created!', 'success');
|
| addLog(`Exported to CSV: ${data.filepath}`);
|
| } catch (error) {
|
| showToast('❌ Export failed', 'error');
|
| console.error(error);
|
| }
|
| }
|
|
|
| async function createBackup() {
|
| try {
|
| const response = await fetch('/api/v2/backup', { method: 'POST' });
|
| const data = await response.json();
|
| showToast('✅ Backup created!', 'success');
|
| addLog(`Backup created: ${data.backup_file}`);
|
| } catch (error) {
|
| showToast('❌ Backup failed', 'error');
|
| console.error(error);
|
| }
|
| }
|
|
|
| async function clearCache() {
|
| if (!confirm('Clear all cached data?')) return;
|
| try {
|
| await fetch('/api/v2/cleanup/cache', { method: 'POST' });
|
| showToast('✅ Cache cleared!', 'success');
|
| addLog('Cache cleared');
|
| } catch (error) {
|
| showToast('❌ Failed to clear cache', 'error');
|
| console.error(error);
|
| }
|
| }
|
|
|
| async function forceUpdateAll() {
|
| try {
|
| const response = await fetch('/api/v2/config/apis');
|
| const data = await response.json();
|
| for (const apiId of Object.keys(data.apis)) {
|
| await forceUpdate(apiId);
|
| await new Promise(resolve => setTimeout(resolve, 100));
|
| }
|
| showToast('✅ All APIs updated!', 'success');
|
| } catch (error) {
|
| showToast('❌ Update failed', 'error');
|
| console.error(error);
|
| }
|
| }
|
|
|
| async function forceUpdate(apiId) {
|
| try {
|
| await fetch(`/api/v2/schedule/tasks/${apiId}/force-update`, { method: 'POST' });
|
| addLog(`Forced update: ${apiId}`);
|
| } catch (error) {
|
| console.error(error);
|
| }
|
| }
|
|
|
| function addLog(text) {
|
| const logContainer = document.getElementById('activityLog');
|
| const time = new Date().toLocaleTimeString();
|
| const entry = document.createElement('div');
|
| entry.style.cssText = 'padding: 10px; border-left: 3px solid var(--accent-blue); margin-bottom: 8px;';
|
| entry.innerHTML = `<span style="opacity: 0.6;">${time}</span> ${text}`;
|
| logContainer.insertBefore(entry, logContainer.firstChild);
|
| while (logContainer.children.length > 50) {
|
| logContainer.removeChild(logContainer.lastChild);
|
| }
|
| }
|
|
|
|
|
| async function loadAdminData() {
|
| try {
|
| const [status, providers] = await Promise.all([
|
| fetch('/api/status').then(r => r.json()),
|
| fetch('/api/providers').then(r => r.json())
|
| ]);
|
|
|
| document.getElementById('statTotal').textContent = status.total_providers;
|
| document.getElementById('statOnline').textContent = status.online;
|
| document.getElementById('statOffline').textContent = status.offline;
|
|
|
| const list = document.getElementById('apisList');
|
| list.innerHTML = providers.map(api => `
|
| <div style="background: rgba(17, 24, 39, 0.6); padding: 15px; border-radius: 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
|
| <div>
|
| <div style="font-weight: 600;">${api.name}</div>
|
| <div style="font-size: 12px; color: var(--text-secondary);">${api.category}</div>
|
| </div>
|
| <span class="badge ${api.status === 'online' ? 'badge-success' : 'badge-danger'}">${api.status.toUpperCase()}</span>
|
| </div>
|
| `).join('');
|
| } catch (error) {
|
| console.error('Error loading admin data:', error);
|
| }
|
| }
|
|
|
| async function addNewAPI() {
|
| const name = document.getElementById('newApiName').value;
|
| const url = document.getElementById('newApiUrl').value;
|
| const category = document.getElementById('newApiCategory').value;
|
|
|
| if (!name || !url) {
|
| showToast('Please fill in API name and URL', 'info');
|
| return;
|
| }
|
|
|
| showToast('✅ API added! Note: Restart server to activate.', 'success');
|
| document.getElementById('newApiName').value = '';
|
| document.getElementById('newApiUrl').value = '';
|
| loadAdminData();
|
| }
|
|
|
| function saveSettings() {
|
| const interval = document.getElementById('checkInterval').value;
|
| const refresh = document.getElementById('dashboardRefresh').value;
|
| localStorage.setItem('monitorSettings', JSON.stringify({ interval, refresh }));
|
| showToast('✅ Settings saved!', 'success');
|
| }
|
|
|
|
|
| async function loadHFHealth() {
|
| try {
|
| const data = await fetch('/api/hf/health').then(r => r.json());
|
| document.getElementById('healthOutput').textContent = JSON.stringify(data, null, 2);
|
| } catch (err) {
|
| document.getElementById('healthOutput').textContent = `Error: ${err.message}`;
|
| }
|
| }
|
|
|
| async function loadModels() {
|
| try {
|
| document.getElementById('modelsList').innerHTML = '<p style="color: var(--text-secondary);">Loading...</p>';
|
|
|
| document.getElementById('modelsList').innerHTML = '<p style="color: var(--text-secondary);">Models registry endpoint not implemented</p>';
|
| } catch (err) {
|
| document.getElementById('modelsList').innerHTML = `<p style="color: var(--accent-red);">Error: ${err.message}</p>`;
|
| }
|
| }
|
|
|
| async function loadDatasets() {
|
| try {
|
| document.getElementById('datasetsList').innerHTML = '<p style="color: var(--text-secondary);">Loading...</p>';
|
|
|
| document.getElementById('datasetsList').innerHTML = '<p style="color: var(--text-secondary);">Datasets registry endpoint not implemented</p>';
|
| } catch (err) {
|
| document.getElementById('datasetsList').innerHTML = `<p style="color: var(--accent-red);">Error: ${err.message}</p>`;
|
| }
|
| }
|
|
|
| async function doSearch() {
|
| const q = document.getElementById('searchQuery').value;
|
| document.getElementById('searchResults').innerHTML = `<p style="color: var(--text-secondary);">Searching for "${q}"...</p>`;
|
|
|
| document.getElementById('searchResults').innerHTML = '<p style="color: var(--text-secondary);">Search endpoint not implemented</p>';
|
| }
|
|
|
| async function doSearchDatasets() {
|
| const q = document.getElementById('searchQuery').value;
|
| document.getElementById('searchResults').innerHTML = `<p style="color: var(--text-secondary);">Searching datasets for "${q}"...</p>`;
|
|
|
| document.getElementById('searchResults').innerHTML = '<p style="color: var(--text-secondary);">Search endpoint not implemented</p>';
|
| }
|
|
|
| async function doSentiment() {
|
| const texts = document.getElementById('sentimentTexts').value.split('\n').filter(t => t.trim());
|
| if (texts.length === 0) {
|
| showToast('Please enter at least one text sample', 'info');
|
| return;
|
| }
|
| try {
|
| document.getElementById('voteDisplay').innerHTML = '<span>⏳ Analyzing...</span>';
|
| document.getElementById('sentimentOutput').textContent = 'Running sentiment analysis...';
|
|
|
| const data = await fetch('/api/hf/run-sentiment', {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' },
|
| body: JSON.stringify({ texts })
|
| }).then(r => r.json());
|
|
|
| const vote = data.vote || 0;
|
| let voteClass = 'vote-neutral';
|
| let voteEmoji = '😐';
|
| if (vote > 0.2) { voteClass = 'vote-positive'; voteEmoji = '📈'; }
|
| else if (vote < -0.2) { voteClass = 'vote-negative'; voteEmoji = '📉'; }
|
|
|
| document.getElementById('voteDisplay').innerHTML = `<span style="color: ${voteClass === 'vote-positive' ? 'var(--accent-green)' : voteClass === 'vote-negative' ? 'var(--accent-red)' : 'var(--text-secondary)'};">${voteEmoji} ${vote.toFixed(3)}</span>`;
|
| document.getElementById('sentimentOutput').textContent = JSON.stringify(data, null, 2);
|
| } catch (err) {
|
| document.getElementById('voteDisplay').innerHTML = '<span style="color: var(--accent-red);">Error</span>';
|
| document.getElementById('sentimentOutput').textContent = `Error: ${err.message}`;
|
| }
|
| }
|
|
|
|
|
| let currentPoolId = null;
|
| let allProvidersList = [];
|
|
|
| async function loadPools() {
|
| try {
|
| const [poolsRes, historyRes] = await Promise.all([
|
| fetch('/api/pools').then(r => r.json()),
|
| fetch('/api/pools/history?limit=20').then(r => r.json())
|
| ]);
|
|
|
| const pools = poolsRes.pools || [];
|
| const container = document.getElementById('poolsContainer');
|
|
|
| if (pools.length === 0) {
|
| container.innerHTML = `
|
| <div style="grid-column: 1/-1; text-align: center; padding: 40px; background: rgba(17, 24, 39, 0.6); border-radius: 20px; border: 2px dashed var(--border);">
|
| <div style="font-size: 48px; margin-bottom: 15px;">🔄</div>
|
| <div style="font-size: 18px; font-weight: 600; margin-bottom: 10px; color: var(--text-primary);">No pools configured</div>
|
| <div style="color: var(--text-secondary); margin-bottom: 20px;">Create your first pool to get started with API source rotation</div>
|
| <button class="refresh-btn" onclick="showCreatePoolModal()">➕ Create Pool</button>
|
| </div>
|
| `;
|
| } else {
|
| container.innerHTML = pools.map(pool => createPoolCard(pool)).join('');
|
| }
|
|
|
|
|
| const history = historyRes.history || [];
|
| const historyContainer = document.getElementById('rotationHistory');
|
| if (history.length === 0) {
|
| historyContainer.innerHTML = '<p style="color: var(--text-secondary); text-align: center; padding: 20px;">No rotation history yet</p>';
|
| } else {
|
| historyContainer.innerHTML = history.map(h => `
|
| <div style="padding: 15px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; margin-bottom: 10px; border-left: 3px solid var(--accent-blue);">
|
| <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
|
| <div>
|
| <div style="font-weight: 600; margin-bottom: 5px;">${h.pool_name}</div>
|
| <div style="font-size: 12px; color: var(--text-secondary);">Rotated to: <strong>${h.provider_name}</strong></div>
|
| </div>
|
| <div style="text-align: right;">
|
| <div style="font-size: 12px; color: var(--text-secondary);">${new Date(h.timestamp).toLocaleString()}</div>
|
| <span class="badge badge-info" style="margin-top: 5px; display: inline-block;">${h.reason}</span>
|
| </div>
|
| </div>
|
| </div>
|
| `).join('');
|
| }
|
| } catch (error) {
|
| console.error('Error loading pools:', error);
|
| document.getElementById('poolsContainer').innerHTML = `
|
| <div style="grid-column: 1/-1; text-align: center; padding: 40px; color: var(--accent-red);">
|
| <div>❌ Error loading pools: ${error.message}</div>
|
| </div>
|
| `;
|
| }
|
| }
|
|
|
| function createPoolCard(pool) {
|
| const currentProvider = pool.current_provider
|
| ? `<div style="margin-bottom: 15px; padding: 12px; background: rgba(16, 185, 129, 0.1); border-radius: 10px; border: 1px solid rgba(16, 185, 129, 0.3);">
|
| <div style="display: flex; align-items: center; gap: 8px;">
|
| <span style="width: 10px; height: 10px; background: var(--accent-green); border-radius: 50%; display: inline-block;"></span>
|
| <span style="font-weight: 600;">Current: ${pool.current_provider.name}</span>
|
| </div>
|
| </div>`
|
| : '<div style="margin-bottom: 15px; padding: 12px; background: rgba(239, 68, 68, 0.1); border-radius: 10px; border: 1px solid rgba(239, 68, 68, 0.3); color: var(--text-secondary);">No active provider</div>';
|
|
|
| const membersHTML = pool.members && pool.members.length > 0
|
| ? pool.members.map(member => {
|
| const successRate = member.success_rate || 0;
|
| const statusClass = successRate >= 90 ? 'badge-success' : successRate >= 70 ? 'badge-warning' : 'badge-danger';
|
| const rateLimit = member.rate_limit || { usage: 0, limit: 100, percentage: 0 };
|
|
|
| return `
|
| <div style="background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 10px; margin-bottom: 8px;">
|
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
| <div style="font-weight: 600;">${member.provider_name}</div>
|
| <span class="badge ${statusClass}">${successRate.toFixed(1)}%</span>
|
| </div>
|
| <div style="display: flex; gap: 15px; font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;">
|
| <span>Used: ${member.use_count || 0}</span>
|
| <span>Priority: ${member.priority || 1}</span>
|
| <span>Weight: ${member.weight || 1}</span>
|
| </div>
|
| <div>
|
| <div style="font-size: 11px; color: var(--text-secondary); margin-bottom: 4px;">
|
| Rate Limit: ${rateLimit.usage}/${rateLimit.limit} (${rateLimit.percentage}%)
|
| </div>
|
| <div style="height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden;">
|
| <div style="height: 100%; background: ${rateLimit.percentage < 70 ? 'var(--accent-green)' : rateLimit.percentage < 90 ? 'var(--accent-yellow)' : 'var(--accent-red)'}; width: ${rateLimit.percentage}%; transition: width 0.3s;"></div>
|
| </div>
|
| </div>
|
| </div>
|
| `;
|
| }).join('')
|
| : '<div style="color: var(--text-secondary); font-size: 14px; padding: 20px; text-align: center;">No members in pool</div>';
|
|
|
| return `
|
| <div class="pool-card-hover" style="background: rgba(17, 24, 39, 0.6); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 20px; padding: 25px;">
|
| <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;">
|
| <div>
|
| <div style="font-size: 20px; font-weight: 700; margin-bottom: 8px;">${pool.pool_name}</div>
|
| <span class="badge badge-info">${pool.category}</span>
|
| </div>
|
| <div style="display: flex; gap: 8px;">
|
| <button onclick="addMemberToPool(${pool.pool_id})" style="padding: 8px 12px; background: rgba(59, 130, 246, 0.2); border: 1px solid var(--accent-blue); border-radius: 8px; color: var(--accent-blue); cursor: pointer; font-size: 12px; font-weight: 600;">➕</button>
|
| <button onclick="rotatePool(${pool.pool_id})" style="padding: 8px 12px; background: rgba(16, 185, 129, 0.2); border: 1px solid var(--accent-green); border-radius: 8px; color: var(--accent-green); cursor: pointer; font-size: 12px; font-weight: 600;">🔄</button>
|
| <button onclick="deletePool(${pool.pool_id}, '${pool.pool_name}')" style="padding: 8px 12px; background: rgba(239, 68, 68, 0.2); border: 1px solid var(--accent-red); border-radius: 8px; color: var(--accent-red); cursor: pointer; font-size: 12px; font-weight: 600;">🗑️</button>
|
| </div>
|
| </div>
|
|
|
| ${currentProvider}
|
|
|
| <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0;">
|
| <div style="background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 10px;">
|
| <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">Strategy</div>
|
| <div style="font-weight: 600; font-size: 14px;">${pool.rotation_strategy.replace('_', ' ')}</div>
|
| </div>
|
| <div style="background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 10px;">
|
| <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">Rotations</div>
|
| <div style="font-weight: 600; font-size: 14px;">${pool.total_rotations || 0}</div>
|
| </div>
|
| <div style="background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 10px;">
|
| <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">Members</div>
|
| <div style="font-weight: 600; font-size: 14px;">${pool.members ? pool.members.length : 0}</div>
|
| </div>
|
| <div style="background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 10px;">
|
| <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">Status</div>
|
| <span class="badge ${pool.enabled ? 'badge-success' : 'badge-danger'}">${pool.enabled ? 'Enabled' : 'Disabled'}</span>
|
| </div>
|
| </div>
|
|
|
| <div style="margin-top: 20px;">
|
| <div style="font-weight: 600; margin-bottom: 12px; font-size: 14px;">Pool Members</div>
|
| <div style="max-height: 300px; overflow-y: auto;">
|
| ${membersHTML}
|
| </div>
|
| </div>
|
| </div>
|
| `;
|
| }
|
|
|
| async function loadProvidersForPool() {
|
| try {
|
| const providers = await fetch('/api/providers').then(r => r.json());
|
| allProvidersList = providers;
|
| const select = document.getElementById('memberProvider');
|
| select.innerHTML = '<option value="">Select a provider...</option>' + providers.map(p => {
|
| const providerId = p.name.toLowerCase().replace(/\s+/g, '_');
|
| return `<option value="${providerId}">${p.name} (${p.category})</option>`;
|
| }).join('');
|
| } catch (error) {
|
| console.error('Error loading providers:', error);
|
| }
|
| }
|
|
|
| function showCreatePoolModal() {
|
| document.getElementById('createPoolModal').classList.add('active');
|
| }
|
|
|
| function closeCreatePoolModal() {
|
| document.getElementById('createPoolModal').classList.remove('active');
|
| document.getElementById('createPoolForm').reset();
|
| }
|
|
|
| function addMemberToPool(poolId) {
|
| currentPoolId = poolId;
|
| loadProvidersForPool();
|
| document.getElementById('addMemberModal').classList.add('active');
|
| }
|
|
|
| function closeAddMemberModal() {
|
| document.getElementById('addMemberModal').classList.remove('active');
|
| document.getElementById('addMemberForm').reset();
|
| currentPoolId = null;
|
| }
|
|
|
| document.getElementById('createPoolForm').addEventListener('submit', async (e) => {
|
| e.preventDefault();
|
| const data = {
|
| name: document.getElementById('poolName').value,
|
| category: document.getElementById('poolCategory').value,
|
| rotation_strategy: document.getElementById('rotationStrategy').value,
|
| description: document.getElementById('poolDescription').value
|
| };
|
|
|
| try {
|
| const response = await fetch('/api/pools', {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' },
|
| body: JSON.stringify(data)
|
| });
|
|
|
| if (response.ok) {
|
| showToast('✅ Pool created successfully!', 'success');
|
| closeCreatePoolModal();
|
| loadPools();
|
| } else {
|
| const error = await response.json();
|
| showToast('❌ Error: ' + (error.detail || 'Failed to create pool'), 'error');
|
| }
|
| } catch (error) {
|
| showToast('❌ Error: ' + error.message, 'error');
|
| console.error(error);
|
| }
|
| });
|
|
|
| document.getElementById('addMemberForm').addEventListener('submit', async (e) => {
|
| e.preventDefault();
|
| const data = {
|
| provider_id: document.getElementById('memberProvider').value,
|
| priority: parseInt(document.getElementById('memberPriority').value),
|
| weight: parseInt(document.getElementById('memberWeight').value)
|
| };
|
|
|
| try {
|
| const response = await fetch(`/api/pools/${currentPoolId}/members`, {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' },
|
| body: JSON.stringify(data)
|
| });
|
|
|
| if (response.ok) {
|
| showToast('✅ Member added successfully!', 'success');
|
| closeAddMemberModal();
|
| loadPools();
|
| } else {
|
| const error = await response.json();
|
| showToast('❌ Error: ' + (error.detail || 'Failed to add member'), 'error');
|
| }
|
| } catch (error) {
|
| showToast('❌ Error: ' + error.message, 'error');
|
| console.error(error);
|
| }
|
| });
|
|
|
| async function rotatePool(poolId) {
|
| try {
|
| const response = await fetch(`/api/pools/${poolId}/rotate`, {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' },
|
| body: JSON.stringify({ reason: 'manual' })
|
| });
|
|
|
| if (response.ok) {
|
| const result = await response.json();
|
| showToast(`✅ Rotated to ${result.provider_name}`, 'success');
|
| loadPools();
|
| } else {
|
| const error = await response.json();
|
| showToast('❌ Error: ' + (error.detail || 'Failed to rotate'), 'error');
|
| }
|
| } catch (error) {
|
| showToast('❌ Error: ' + error.message, 'error');
|
| console.error(error);
|
| }
|
| }
|
|
|
| async function deletePool(poolId, poolName) {
|
| if (!confirm(`Are you sure you want to delete pool "${poolName}"?`)) {
|
| return;
|
| }
|
|
|
| try {
|
| const response = await fetch(`/api/pools/${poolId}`, {
|
| method: 'DELETE'
|
| });
|
|
|
| if (response.ok) {
|
| showToast('✅ Pool deleted successfully!', 'success');
|
| loadPools();
|
| } else {
|
| const error = await response.json();
|
| showToast('❌ Error: ' + (error.detail || 'Failed to delete pool'), 'error');
|
| }
|
| } catch (error) {
|
| alert('❌ Error: ' + error.message);
|
| console.error(error);
|
| }
|
| }
|
|
|
|
|
|
|
| function showToast(message, type = 'info', title = null) {
|
| const toastContainer = document.getElementById('toastContainer') || document.body;
|
| const toast = document.createElement('div');
|
| toast.className = `toast toast-${type}`;
|
|
|
| const icons = {
|
| success: '✅',
|
| error: '❌',
|
| warning: '⚠️',
|
| info: 'ℹ️'
|
| };
|
|
|
| const titles = {
|
| success: 'موفق!',
|
| error: 'خطا!',
|
| warning: 'هشدار!',
|
| info: 'اطلاعیه'
|
| };
|
|
|
| toast.innerHTML = `
|
| <div class="toast-icon">${icons[type] || icons.info}</div>
|
| <div class="toast-content">
|
| <div class="toast-title">${title || titles[type] || titles.info}</div>
|
| <div class="toast-message">${message}</div>
|
| </div>
|
| <button class="toast-close" onclick="this.parentElement.remove()">×</button>
|
| `;
|
|
|
| toastContainer.appendChild(toast);
|
|
|
|
|
| setTimeout(() => {
|
| toast.style.animation = 'toastSlideIn 0.3s reverse';
|
| setTimeout(() => toast.remove(), 300);
|
| }, 5000);
|
|
|
|
|
| toast.addEventListener('click', (e) => {
|
| if (e.target.classList.contains('toast-close') || e.target === toast) {
|
| toast.style.animation = 'toastSlideIn 0.3s reverse';
|
| setTimeout(() => toast.remove(), 300);
|
| }
|
| });
|
| }
|
|
|
|
|
| function showProgress(percent = 0) {
|
| const progressBar = document.getElementById('progressBar');
|
| if (progressBar) {
|
| progressBar.style.width = percent + '%';
|
| }
|
| }
|
|
|
| function hideProgress() {
|
| const progressBar = document.getElementById('progressBar');
|
| if (progressBar) {
|
| progressBar.style.width = '0%';
|
| }
|
| }
|
|
|
|
|
| function showLoading(message = 'در حال بارگذاری...') {
|
| const overlay = document.getElementById('loadingOverlay');
|
| const text = document.getElementById('loadingText');
|
| if (overlay) {
|
| overlay.classList.add('show');
|
| }
|
| if (text) {
|
| text.textContent = message;
|
| }
|
| }
|
|
|
| function hideLoading() {
|
| const overlay = document.getElementById('loadingOverlay');
|
| if (overlay) {
|
| overlay.classList.remove('show');
|
| }
|
| }
|
|
|
|
|
| function showFeedback(type, title, message) {
|
| const overlay = document.getElementById('feedbackOverlay');
|
| const icon = document.getElementById('feedbackIcon');
|
| const titleEl = document.getElementById('feedbackTitle');
|
| const messageEl = document.getElementById('feedbackMessage');
|
|
|
| if (overlay && icon && titleEl && messageEl) {
|
| const icons = {
|
| success: '✅',
|
| error: '❌',
|
| warning: '⚠️'
|
| };
|
|
|
| icon.textContent = icons[type] || icons.success;
|
| titleEl.textContent = title;
|
| messageEl.textContent = message;
|
|
|
| overlay.classList.add('show');
|
|
|
|
|
| setTimeout(() => {
|
| hideFeedback();
|
| }, 3000);
|
| }
|
| }
|
|
|
| function hideFeedback() {
|
| const overlay = document.getElementById('feedbackOverlay');
|
| if (overlay) {
|
| overlay.classList.remove('show');
|
| }
|
| }
|
|
|
|
|
| function scrollToTop() {
|
| window.scrollTo({
|
| top: 0,
|
| behavior: 'smooth'
|
| });
|
| }
|
|
|
|
|
| let lastScroll = 0;
|
| window.addEventListener('scroll', () => {
|
| const fab = document.querySelector('.fab');
|
| if (fab) {
|
| const currentScroll = window.pageYOffset;
|
| if (currentScroll > 300) {
|
| fab.style.opacity = '1';
|
| fab.style.pointerEvents = 'all';
|
| } else {
|
| fab.style.opacity = '0';
|
| fab.style.pointerEvents = 'none';
|
| }
|
| lastScroll = currentScroll;
|
| }
|
| });
|
|
|
|
|
| let currentFilter = 'all';
|
| let marketDataCache = [];
|
|
|
| function filterMarketTable() {
|
| const searchInput = document.getElementById('marketSearch');
|
| const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
|
| const tbody = document.getElementById('marketTableBody');
|
|
|
| if (!tbody) return;
|
|
|
| const rows = tbody.querySelectorAll('tr');
|
| let visibleCount = 0;
|
|
|
|
|
| const existingNoResults = tbody.querySelector('tr[data-no-results]');
|
| if (existingNoResults) {
|
| existingNoResults.remove();
|
| }
|
|
|
| rows.forEach((row, index) => {
|
| if (row.querySelector('td[colspan]')) {
|
| return;
|
| }
|
|
|
| const cells = row.querySelectorAll('td');
|
| if (cells.length < 4) return;
|
|
|
| const name = cells[1]?.textContent?.toLowerCase() || '';
|
| const symbol = cells[1]?.querySelector('.crypto-symbol')?.textContent?.toLowerCase() || '';
|
| const changeText = cells[3]?.textContent || '';
|
| const changeValue = parseFloat(changeText.replace(/[^0-9.-]/g, '')) || 0;
|
|
|
| let matchesSearch = !searchTerm || name.includes(searchTerm) || symbol.includes(searchTerm);
|
| let matchesFilter = true;
|
|
|
| if (currentFilter === 'top10') {
|
| matchesFilter = index < 10;
|
| } else if (currentFilter === 'gainers') {
|
| matchesFilter = changeValue > 0;
|
| } else if (currentFilter === 'losers') {
|
| matchesFilter = changeValue < 0;
|
| } else if (currentFilter === 'volume') {
|
|
|
| matchesFilter = true;
|
| }
|
|
|
| if (matchesSearch && matchesFilter) {
|
| row.style.display = '';
|
| visibleCount++;
|
| row.style.animation = `rowSlideIn 0.3s ease-out`;
|
| row.style.animationDelay = `${index * 0.05}s`;
|
| } else {
|
| row.style.display = 'none';
|
| }
|
| });
|
|
|
|
|
| if (visibleCount === 0 && rows.length > 0 && !searchTerm && currentFilter === 'all') {
|
|
|
| return;
|
| }
|
|
|
| if (visibleCount === 0) {
|
| const noResultsRow = document.createElement('tr');
|
| noResultsRow.setAttribute('data-no-results', 'true');
|
| noResultsRow.innerHTML = `<td colspan="6" style="text-align: center; padding: 40px; color: var(--text-secondary);">
|
| <div style="font-size: 48px; margin-bottom: 10px;">🔍</div>
|
| <div style="font-weight: 600; margin-bottom: 5px;">نتیجهای یافت نشد</div>
|
| <div style="font-size: 14px;">لطفاً عبارت جستجوی دیگری را امتحان کنید</div>
|
| </td>`;
|
| tbody.appendChild(noResultsRow);
|
| }
|
| }
|
|
|
| function filterByCategory(category) {
|
| currentFilter = category;
|
|
|
|
|
| document.querySelectorAll('.filter-chip').forEach(chip => {
|
| chip.classList.remove('active');
|
| });
|
| if (event && event.target) {
|
| event.target.classList.add('active');
|
| }
|
|
|
| filterMarketTable();
|
| }
|
|
|
|
|
| function animateNumber(element, from, to, duration = 1000) {
|
| if (!element) return;
|
|
|
| const start = performance.now();
|
| const difference = to - from;
|
|
|
| function update(currentTime) {
|
| const elapsed = currentTime - start;
|
| const progress = Math.min(elapsed / duration, 1);
|
|
|
|
|
| const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
| const current = from + (difference * easeOutQuart);
|
|
|
| element.textContent = typeof to === 'number' && to >= 1000
|
| ? current.toLocaleString('fa-IR', { maximumFractionDigits: 2 })
|
| : current.toFixed(2);
|
|
|
| if (progress < 1) {
|
| requestAnimationFrame(update);
|
| } else {
|
| element.classList.add('updated');
|
| setTimeout(() => element.classList.remove('updated'), 500);
|
| }
|
| }
|
|
|
| requestAnimationFrame(update);
|
| }
|
|
|
|
|
| document.addEventListener('click', (e) => {
|
| if (e.target.classList.contains('modal')) {
|
| e.target.style.display = 'none';
|
| }
|
| });
|
|
|
|
|
|
|
| async function loadLogs() {
|
| try {
|
| const level = document.getElementById('logLevelFilter')?.value || '';
|
| const category = document.getElementById('logCategoryFilter')?.value || '';
|
| const search = document.getElementById('logSearch')?.value || '';
|
| const limit = parseInt(document.getElementById('logLimit')?.value || '100');
|
|
|
| let url = `/api/logs?limit=${limit}`;
|
| if (level) url += `&level=${level}`;
|
| if (category) url += `&category=${category}`;
|
| if (search) url += `&search=${search}`;
|
|
|
| const response = await fetch(url);
|
| const data = await response.json();
|
|
|
|
|
| const statsResponse = await fetch('/api/logs/stats');
|
| const stats = await statsResponse.json();
|
|
|
| if (document.getElementById('totalLogs')) {
|
| document.getElementById('totalLogs').textContent = stats.total || 0;
|
| document.getElementById('errorLogs').textContent = stats.errors || 0;
|
| document.getElementById('infoLogs').textContent = stats.by_level?.info || 0;
|
| document.getElementById('warningLogs').textContent = stats.by_level?.warning || 0;
|
| }
|
|
|
|
|
| const tbody = document.getElementById('logsTableBody');
|
| if (data.logs && data.logs.length > 0) {
|
| tbody.innerHTML = data.logs.map(log => {
|
| const levelColor = {
|
| 'error': 'var(--accent-red)',
|
| 'critical': 'var(--accent-red)',
|
| 'warning': 'var(--accent-yellow)',
|
| 'info': 'var(--accent-blue)',
|
| 'debug': 'var(--text-secondary)'
|
| }[log.level] || 'var(--text-secondary)';
|
|
|
| return `
|
| <tr>
|
| <td style="font-size: 12px; color: var(--text-secondary);">${new Date(log.timestamp).toLocaleString()}</td>
|
| <td><span style="color: ${levelColor}; font-weight: 700;">${log.level.toUpperCase()}</span></td>
|
| <td><span class="badge badge-info">${log.category}</span></td>
|
| <td>${log.message}</td>
|
| <td>${log.provider_id || '—'}</td>
|
| <td>${log.response_time ? log.response_time.toFixed(0) + 'ms' : '—'}</td>
|
| </tr>
|
| `;
|
| }).join('');
|
| } else {
|
| tbody.innerHTML = '<tr><td colspan="6" style="text-align: center; color: var(--text-secondary);">No logs found</td></tr>';
|
| }
|
| } catch (error) {
|
| console.error('Error loading logs:', error);
|
| if (document.getElementById('logsTableBody')) {
|
| document.getElementById('logsTableBody').innerHTML = '<tr><td colspan="6" style="text-align: center; color: var(--accent-red);">Error loading logs</td></tr>';
|
| }
|
| }
|
| }
|
|
|
| async function exportLogsJSON() {
|
| try {
|
| const level = document.getElementById('logLevelFilter')?.value || '';
|
| const category = document.getElementById('logCategoryFilter')?.value || '';
|
|
|
| let url = '/api/logs/export/json?';
|
| if (level) url += `level=${level}&`;
|
| if (category) url += `category=${category}&`;
|
|
|
| const response = await fetch(url);
|
| const data = await response.json();
|
| showToast(`✅ Logs exported to ${data.filepath}`, 'success');
|
| } catch (error) {
|
| showToast('❌ Export failed', 'error');
|
| console.error(error);
|
| }
|
| }
|
|
|
| async function exportLogsCSV() {
|
| try {
|
| const level = document.getElementById('logLevelFilter')?.value || '';
|
| const category = document.getElementById('logCategoryFilter')?.value || '';
|
|
|
| let url = '/api/logs/export/csv?';
|
| if (level) url += `level=${level}&`;
|
| if (category) url += `category=${category}&`;
|
|
|
| const response = await fetch(url);
|
| const data = await response.json();
|
| showToast(`✅ Logs exported to ${data.filepath}`, 'success');
|
| } catch (error) {
|
| showToast('❌ Export failed', 'error');
|
| console.error(error);
|
| }
|
| }
|
|
|
| async function clearAllLogs() {
|
| if (!confirm('Are you sure you want to clear all logs? This cannot be undone.')) {
|
| return;
|
| }
|
| try {
|
| const response = await fetch('/api/logs', { method: 'DELETE' });
|
| if (response.ok) {
|
| showToast('✅ All logs cleared', 'success');
|
| loadLogs();
|
| } else {
|
| showToast('❌ Failed to clear logs', 'error');
|
| }
|
| } catch (error) {
|
| showToast('❌ Error clearing logs', 'error');
|
| console.error(error);
|
| }
|
| }
|
|
|
|
|
|
|
| async function loadResources() {
|
| try {
|
| const category = document.getElementById('resourceCategoryFilter')?.value || '';
|
|
|
| let url = '/api/resources';
|
| if (category) {
|
| url = `/api/resources/category/${category}`;
|
| }
|
|
|
| const response = await fetch(url);
|
| const data = await response.json();
|
|
|
|
|
| const stats = category ? { count: data.count } : data.statistics;
|
| if (stats && document.getElementById('totalResources')) {
|
| document.getElementById('totalResources').textContent = stats.total_providers || stats.count || 0;
|
| document.getElementById('freeResources').textContent = stats.by_free?.free || 0;
|
| document.getElementById('paidResources').textContent = stats.by_free?.paid || 0;
|
| document.getElementById('authResources').textContent = stats.by_auth?.requires_auth || 0;
|
| }
|
|
|
|
|
| const grid = document.getElementById('resourcesGrid');
|
| const providers = category ? data.providers : Object.values(data.providers || {});
|
|
|
| if (providers && providers.length > 0) {
|
| grid.innerHTML = providers.map(provider => {
|
| const authBadge = provider.requires_auth
|
| ? '<span class="badge badge-warning">Auth Required</span>'
|
| : '<span class="badge badge-success">No Auth</span>';
|
|
|
| const freeBadge = provider.free !== false
|
| ? '<span class="badge badge-success">Free</span>'
|
| : '<span class="badge badge-danger">Paid</span>';
|
|
|
| return `
|
| <div class="stat-card pool-card-hover">
|
| <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px;">
|
| <div>
|
| <div style="font-size: 18px; font-weight: 700; margin-bottom: 8px;">${provider.name}</div>
|
| <span class="badge badge-info">${provider.category}</span>
|
| </div>
|
| <div style="display: flex; gap: 5px; flex-direction: column;">
|
| ${authBadge}
|
| ${freeBadge}
|
| </div>
|
| </div>
|
| <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; word-break: break-all;">
|
| ${provider.base_url}
|
| </div>
|
| <div style="display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary);">
|
| <span>Priority: ${provider.priority || 5}</span>
|
| <span>Weight: ${provider.weight || 50}</span>
|
| </div>
|
| ${provider.docs_url ? `<div style="margin-top: 10px;"><a href="${provider.docs_url}" target="_blank" style="color: var(--accent-blue); font-size: 12px;">📖 Docs</a></div>` : ''}
|
| </div>
|
| `;
|
| }).join('');
|
| } else {
|
| grid.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: var(--text-secondary);">No resources found</div>';
|
| }
|
| } catch (error) {
|
| console.error('Error loading resources:', error);
|
| if (document.getElementById('resourcesGrid')) {
|
| document.getElementById('resourcesGrid').innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: var(--accent-red);">Error loading resources</div>';
|
| }
|
| }
|
| }
|
|
|
| async function exportResourcesJSON() {
|
| try {
|
| const response = await fetch('/api/resources/export/json');
|
| const data = await response.json();
|
| showToast(`✅ Resources exported to ${data.filepath}`, 'success');
|
| } catch (error) {
|
| showToast('❌ Export failed', 'error');
|
| console.error(error);
|
| }
|
| }
|
|
|
| async function exportResourcesCSV() {
|
| try {
|
| const response = await fetch('/api/resources/export/csv');
|
| const data = await response.json();
|
| showToast(`✅ Resources exported to ${data.filepath}`, 'success');
|
| } catch (error) {
|
| showToast('❌ Export failed', 'error');
|
| console.error(error);
|
| }
|
| }
|
|
|
| async function backupResources() {
|
| try {
|
| const response = await fetch('/api/resources/backup', { method: 'POST' });
|
| const data = await response.json();
|
| showToast(`✅ Backup created: ${data.filepath}`, 'success');
|
| } catch (error) {
|
| showToast('❌ Backup failed', 'error');
|
| console.error(error);
|
| }
|
| }
|
|
|
| function showImportModal() {
|
| document.getElementById('importModal').classList.add('active');
|
| }
|
|
|
| function closeImportModal() {
|
| document.getElementById('importModal').classList.remove('active');
|
| const form = document.getElementById('importForm');
|
| if (form) form.reset();
|
| }
|
|
|
|
|
| const importForm = document.getElementById('importForm');
|
| if (importForm) {
|
| importForm.addEventListener('submit', async (e) => {
|
| e.preventDefault();
|
| const filePath = document.getElementById('importFilePath').value;
|
| const merge = document.getElementById('importMode').value === 'true';
|
|
|
| try {
|
| const response = await fetch(`/api/resources/import/json?file_path=${encodeURIComponent(filePath)}&merge=${merge}`, {
|
| method: 'POST'
|
| });
|
|
|
| if (response.ok) {
|
| const data = await response.json();
|
| showToast(`✅ Resources imported successfully (${data.merged ? 'merged' : 'replaced'})`, 'success');
|
| closeImportModal();
|
| loadResources();
|
| } else {
|
| const error = await response.json();
|
| showToast(`❌ Import failed: ${error.detail}`, 'error');
|
| }
|
| } catch (error) {
|
| showToast('❌ Error importing resources', 'error');
|
| console.error(error);
|
| }
|
| });
|
| }
|
|
|
|
|
|
|
| async function loadReports() {
|
| await Promise.all([
|
| loadDiscoveryReport(),
|
| loadModelsReport(),
|
| loadLastDiagnostics()
|
| ]);
|
| }
|
|
|
|
|
| async function loadSystemAlerts() {
|
| try {
|
| const response = await fetch('/api/diagnostics/last');
|
| const report = await response.json();
|
|
|
| if (report.message || !report.issues || report.issues.length === 0) {
|
| document.getElementById('systemAlertsSection').style.display = 'none';
|
| return;
|
| }
|
|
|
| displaySystemAlerts(report.issues);
|
| document.getElementById('systemAlertsSection').style.display = 'block';
|
| } catch (error) {
|
| console.error('Error loading system alerts:', error);
|
| }
|
| }
|
|
|
| function displaySystemAlerts(issues) {
|
| const container = document.getElementById('systemAlertsContainer');
|
| if (!container) return;
|
|
|
| const severityConfig = {
|
| 'critical': {
|
| icon: 'icon-error',
|
| color: 'var(--accent-red)',
|
| bg: 'rgba(239, 68, 68, 0.1)',
|
| border: 'rgba(239, 68, 68, 0.3)'
|
| },
|
| 'warning': {
|
| icon: 'icon-warning',
|
| color: 'var(--accent-yellow)',
|
| bg: 'rgba(245, 158, 11, 0.1)',
|
| border: 'rgba(245, 158, 11, 0.3)'
|
| },
|
| 'info': {
|
| icon: 'icon-info',
|
| color: 'var(--accent-blue)',
|
| bg: 'rgba(59, 130, 246, 0.1)',
|
| border: 'rgba(59, 130, 246, 0.3)'
|
| }
|
| };
|
|
|
| const solutions = {
|
| 'HF_API_TOKEN': {
|
| title: 'تنظیم متغیر محیطی HF_API_TOKEN',
|
| steps: [
|
| '1. یک توکن از HuggingFace دریافت کنید:',
|
| ' - به https://huggingface.co/settings/tokens بروید',
|
| ' - یک توکن جدید ایجاد کنید',
|
| '2. توکن را به متغیر محیطی اضافه کنید:',
|
| ' Windows: set HF_API_TOKEN=your_token_here',
|
| ' Linux/Mac: export HF_API_TOKEN=your_token_here',
|
| ' یا در فایل .env: HF_API_TOKEN=your_token_here'
|
| ]
|
| },
|
| 'resources.json': {
|
| title: 'ایجاد فایل resources.json',
|
| steps: [
|
| 'این فایل به صورت خودکار ساخته میشود.',
|
| 'اگر نیاز به تنظیمات دستی دارید، میتوانید آن را ایجاد کنید:',
|
| '{',
|
| ' "resources": []',
|
| '}'
|
| ]
|
| },
|
| 'config.json': {
|
| title: 'ایجاد فایل config.json',
|
| steps: [
|
| 'این فایل به صورت خودکار ساخته میشود.',
|
| 'اگر نیاز به تنظیمات دستی دارید، میتوانید آن را ایجاد کنید.'
|
| ]
|
| },
|
| 'HuggingFace API': {
|
| title: 'رفع مشکل اتصال به HuggingFace',
|
| steps: [
|
| '1. بررسی اتصال اینترنت',
|
| '2. بررسی فایروال و پروکسی',
|
| '3. بررسی DNS settings',
|
| '4. اگر از VPN استفاده میکنید، آن را غیرفعال کنید',
|
| '5. بررسی کنید که https://api.huggingface.co قابل دسترسی باشد'
|
| ]
|
| },
|
| 'Auto-Discovery': {
|
| title: 'فعالسازی Auto-Discovery Service',
|
| steps: [
|
| 'برای فعالسازی سرویس Auto-Discovery:',
|
| '1. متغیر محیطی را تنظیم کنید:',
|
| ' export ENABLE_AUTO_DISCOVERY=true',
|
| '2. یا در فایل .env اضافه کنید:',
|
| ' ENABLE_AUTO_DISCOVERY=true',
|
| '3. سرور را restart کنید'
|
| ]
|
| }
|
| };
|
|
|
| let html = '';
|
| issues.forEach((issue, index) => {
|
| const config = severityConfig[issue.severity] || severityConfig['info'];
|
| const solutionKey = issue.title.includes('HF_API_TOKEN') ? 'HF_API_TOKEN' :
|
| issue.title.includes('resources.json') ? 'resources.json' :
|
| issue.title.includes('config.json') ? 'config.json' :
|
| issue.title.includes('HuggingFace') ? 'HuggingFace API' :
|
| issue.title.includes('Auto-Discovery') ? 'Auto-Discovery' : null;
|
|
|
| const solution = solutionKey ? solutions[solutionKey] : null;
|
|
|
| html += `
|
| <div class="stat-card" style="margin-bottom: 15px; border-left: 4px solid ${config.border}; background: ${config.bg}; animation-delay: ${index * 0.1}s;">
|
| <div style="display: flex; align-items: start; gap: 12px;">
|
| <div class="icon icon-md status-icon-${issue.severity}" style="flex-shrink: 0; margin-top: 2px;">
|
| <svg><use href="#${config.icon}"></use></svg>
|
| </div>
|
| <div style="flex: 1;">
|
| <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px;">
|
| <div>
|
| <h3 style="font-size: 16px; font-weight: 700; margin-bottom: 4px; color: ${config.color};">
|
| ${issue.title}
|
| </h3>
|
| <div style="font-size: 13px; color: var(--text-secondary); margin-bottom: 8px;">
|
| ${issue.description}
|
| </div>
|
| </div>
|
| <span class="badge badge-${issue.severity === 'critical' ? 'danger' : issue.severity === 'warning' ? 'warning' : 'info'}" style="flex-shrink: 0;">
|
| ${issue.category}
|
| </span>
|
| </div>
|
|
|
| ${solution ? `
|
| <div style="margin-top: 12px; padding: 12px; background: rgba(17, 24, 39, 0.6); border-radius: 8px; border: 1px solid var(--border);">
|
| <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
|
| <span class="icon icon-sm status-icon-info"><svg><use href="#icon-info"></use></svg></span>
|
| <strong style="font-size: 14px;">راهحل:</strong>
|
| </div>
|
| <div style="font-size: 12px; color: var(--text-secondary); font-family: 'Courier New', monospace; line-height: 1.8;">
|
| ${solution.steps.map(step => `<div style="margin-bottom: 4px;">${step}</div>`).join('')}
|
| </div>
|
| </div>
|
| ` : ''}
|
|
|
| <div style="margin-top: 8px; font-size: 11px; color: var(--text-secondary);">
|
| ${new Date(issue.timestamp).toLocaleString('fa-IR')}
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| `;
|
| });
|
|
|
| container.innerHTML = html || '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">هیچ هشداری یافت نشد</div>';
|
| }
|
|
|
| async function runDiagnostics(autoFix = false) {
|
| const resultsDiv = document.getElementById('diagnosticsResults');
|
| resultsDiv.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
|
|
|
| try {
|
| const response = await fetch(`/api/diagnostics/run?auto_fix=${autoFix}`, {
|
| method: 'POST'
|
| });
|
| const report = await response.json();
|
|
|
| displayDiagnosticsReport(report);
|
| showToast(`اشکالیابی انجام شد (${report.total_issues} مشکل یافت شد)`, 'success', 'Diagnostics');
|
|
|
|
|
| if (report.issues && report.issues.length > 0) {
|
| displaySystemAlerts(report.issues);
|
| document.getElementById('systemAlertsSection').style.display = 'block';
|
| }
|
| } catch (error) {
|
| resultsDiv.innerHTML = `<div class="alert alert-error">
|
| <span class="icon icon-md status-icon-error"><svg><use href="#icon-error"></use></svg></span>
|
| خطا: ${error.message}
|
| </div>`;
|
| showToast('خطا در اجرای اشکالیابی', 'error', 'Error');
|
| }
|
| }
|
|
|
| function displayDiagnosticsReport(report) {
|
| const resultsDiv = document.getElementById('diagnosticsResults');
|
|
|
| const severityColors = {
|
| 'critical': 'var(--accent-red)',
|
| 'warning': 'var(--accent-yellow)',
|
| 'info': 'var(--accent-blue)'
|
| };
|
|
|
| const severityIcons = {
|
| 'critical': '🔴',
|
| 'warning': '⚠️',
|
| 'info': 'ℹ️'
|
| };
|
|
|
| let html = `
|
| <div class="stats-grid" style="margin-bottom: 20px;">
|
| <div class="stat-card">
|
| <div class="stat-value" style="color: ${severityColors.critical};">${report.critical_issues}</div>
|
| <div class="stat-label">مشکلات بحرانی</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value" style="color: ${severityColors.warning};">${report.warnings}</div>
|
| <div class="stat-label">هشدارها</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value" style="color: ${severityColors.info};">${report.info_issues}</div>
|
| <div class="stat-label">اطلاعات</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value">${report.fixed_issues.length}</div>
|
| <div class="stat-label">تعمیر شده</div>
|
| </div>
|
| </div>
|
| `;
|
|
|
| if (report.fixed_issues && report.fixed_issues.length > 0) {
|
| html += `
|
| <div style="margin-bottom: 20px; padding: 15px; background: rgba(16, 185, 129, 0.1); border-radius: 12px; border-left: 4px solid var(--accent-green);">
|
| <h3 style="margin-bottom: 10px; color: var(--accent-green);">✅ مشکلات تعمیر شده</h3>
|
| ${report.fixed_issues.map(issue => `
|
| <div style="padding: 10px; margin-bottom: 8px; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
|
| <strong>${issue.title}</strong><br>
|
| <span style="font-size: 12px; color: var(--text-secondary);">${issue.description}</span>
|
| </div>
|
| `).join('')}
|
| </div>
|
| `;
|
| }
|
|
|
| if (report.issues && report.issues.length > 0) {
|
| html += `
|
| <div>
|
| <h3 style="margin-bottom: 15px;">📋 لیست مشکلات</h3>
|
| ${report.issues.map(issue => `
|
| <div style="padding: 15px; margin-bottom: 10px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; border-left: 4px solid ${severityColors[issue.severity]};">
|
| <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px;">
|
| <div>
|
| <span style="font-size: 20px; margin-left: 8px;">${severityIcons[issue.severity]}</span>
|
| <strong>${issue.title}</strong>
|
| </div>
|
| <span class="badge badge-${issue.severity === 'critical' ? 'danger' : issue.severity === 'warning' ? 'warning' : 'info'}">${issue.category}</span>
|
| </div>
|
| <div style="color: var(--text-secondary); margin-bottom: 8px; font-size: 14px;">
|
| ${issue.description}
|
| </div>
|
| ${issue.fixable && issue.fix_action ? `
|
| <div style="margin-top: 8px; padding: 8px; background: rgba(59, 130, 246, 0.1); border-radius: 6px; font-family: monospace; font-size: 12px;">
|
| 🔧 ${issue.fix_action}
|
| </div>
|
| ` : ''}
|
| <div style="margin-top: 8px; font-size: 11px; color: var(--text-secondary);">
|
| ${new Date(issue.timestamp).toLocaleString('fa-IR')}
|
| </div>
|
| </div>
|
| `).join('')}
|
| </div>
|
| `;
|
| } else {
|
| html += `
|
| <div style="text-align: center; padding: 40px; background: rgba(16, 185, 129, 0.1); border-radius: 12px;">
|
| <div style="font-size: 48px; margin-bottom: 15px;">✅</div>
|
| <div style="font-size: 18px; font-weight: 600; color: var(--accent-green);">هیچ مشکلی یافت نشد!</div>
|
| <div style="color: var(--text-secondary); margin-top: 10px;">سیستم شما در وضعیت مطلوب است.</div>
|
| </div>
|
| `;
|
| }
|
|
|
| html += `
|
| <div style="margin-top: 20px; padding: 15px; background: rgba(17, 24, 39, 0.6); border-radius: 12px;">
|
| <div style="font-size: 12px; color: var(--text-secondary);">
|
| <strong>زمان اجرا:</strong> ${(report.duration_ms / 1000).toFixed(2)} ثانیه<br>
|
| <strong>تاریخ:</strong> ${new Date(report.timestamp).toLocaleString('fa-IR')}
|
| </div>
|
| </div>
|
| `;
|
|
|
| resultsDiv.innerHTML = html;
|
| }
|
|
|
| async function loadLastDiagnostics() {
|
| try {
|
| const response = await fetch('/api/diagnostics/last');
|
| const report = await response.json();
|
|
|
| if (report.message) {
|
| return;
|
| }
|
|
|
| displayDiagnosticsReport(report);
|
|
|
|
|
| if (report.issues && report.issues.length > 0) {
|
| displaySystemAlerts(report.issues);
|
| document.getElementById('systemAlertsSection').style.display = 'block';
|
| }
|
| } catch (error) {
|
| console.error('Error loading last diagnostics:', error);
|
| }
|
| }
|
|
|
| async function loadDiscoveryReport() {
|
| const reportDiv = document.getElementById('discoveryReport');
|
| reportDiv.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
|
|
|
| try {
|
| const response = await fetch('/api/reports/discovery');
|
| const report = await response.json();
|
|
|
| const lastRun = report.last_run;
|
| const status = report.service_status;
|
|
|
| let html = `
|
| <div class="stats-grid" style="margin-bottom: 20px;">
|
| <div class="stat-card">
|
| <div class="stat-value" style="color: ${report.enabled ? 'var(--accent-green)' : 'var(--accent-red)'};">
|
| ${report.enabled ? '✅' : '❌'}
|
| </div>
|
| <div class="stat-label">وضعیت سرویس</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value">${report.model || 'N/A'}</div>
|
| <div class="stat-label">مدل استفاده شده</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value">${Math.floor(report.interval_seconds / 3600)}h</div>
|
| <div class="stat-label">فاصله اجرا</div>
|
| </div>
|
| ${report.next_run_estimate ? `
|
| <div class="stat-card">
|
| <div class="stat-value" style="color: var(--accent-purple);">⏰</div>
|
| <div class="stat-label">اجرای بعدی</div>
|
| <div style="font-size: 12px; color: var(--text-secondary); margin-top: 5px;">
|
| ${new Date(report.next_run_estimate).toLocaleString('fa-IR')}
|
| </div>
|
| </div>
|
| ` : ''}
|
| </div>
|
| `;
|
|
|
| if (lastRun) {
|
| html += `
|
| <div style="background: rgba(17, 24, 39, 0.6); padding: 20px; border-radius: 12px;">
|
| <h3 style="margin-bottom: 15px;">📊 آخرین اجرا</h3>
|
| <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
|
| <div>
|
| <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">شروع</div>
|
| <div style="font-weight: 600;">${new Date(lastRun.started_at).toLocaleString('fa-IR')}</div>
|
| </div>
|
| <div>
|
| <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">پایان</div>
|
| <div style="font-weight: 600;">${new Date(lastRun.finished_at).toLocaleString('fa-IR')}</div>
|
| </div>
|
| ${report.next_run_estimate ? `
|
| <div>
|
| <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">⏰ اجرای بعدی</div>
|
| <div style="font-weight: 600; color: var(--accent-purple);">${new Date(report.next_run_estimate).toLocaleString('fa-IR')}</div>
|
| </div>
|
| ` : ''}
|
| <div>
|
| <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">کاندیداها</div>
|
| <div style="font-weight: 600; color: var(--accent-blue);">${lastRun.candidates_seen || 0}</div>
|
| </div>
|
| <div>
|
| <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">پیشنهاد شده</div>
|
| <div style="font-weight: 600; color: var(--accent-yellow);">${lastRun.suggested || 0}</div>
|
| </div>
|
| <div>
|
| <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">ذخیره شده</div>
|
| <div style="font-weight: 600; color: var(--accent-green);">${lastRun.persisted || 0}</div>
|
| </div>
|
| </div>
|
| ${lastRun.persisted_ids && lastRun.persisted_ids.length > 0 ? `
|
| <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border);">
|
| <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;">Providerهای اضافه شده:</div>
|
| <div style="display: flex; flex-wrap: wrap; gap: 8px;">
|
| ${lastRun.persisted_ids.map(id => `<span class="badge badge-success">${id}</span>`).join('')}
|
| </div>
|
| </div>
|
| ` : ''}
|
| </div>
|
| `;
|
| } else {
|
| html += `
|
| <div style="text-align: center; padding: 40px; color: var(--text-secondary);">
|
| هنوز اجرایی انجام نشده است
|
| </div>
|
| `;
|
| }
|
|
|
| reportDiv.innerHTML = html;
|
| } catch (error) {
|
| reportDiv.innerHTML = `<div class="alert alert-error">❌ خطا: ${error.message}</div>`;
|
| }
|
| }
|
|
|
| async function loadModelsReport() {
|
| const reportDiv = document.getElementById('modelsReport');
|
| reportDiv.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
|
|
|
| try {
|
| const response = await fetch('/api/reports/models');
|
| const report = await response.json();
|
|
|
| if (report.error) {
|
| reportDiv.innerHTML = `
|
| <div class="alert alert-warning">
|
| ⚠️ ${report.error}
|
| </div>
|
| `;
|
| return;
|
| }
|
|
|
| let html = `
|
| <div class="stats-grid" style="margin-bottom: 20px;">
|
| <div class="stat-card">
|
| <div class="stat-value">${report.total_models}</div>
|
| <div class="stat-label">کل مدلها</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value" style="color: var(--accent-green);">${report.available}</div>
|
| <div class="stat-label">در دسترس</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value" style="color: var(--accent-red);">${report.errors}</div>
|
| <div class="stat-label">خطا</div>
|
| </div>
|
| </div>
|
| `;
|
|
|
| if (report.models && report.models.length > 0) {
|
| html += `
|
| <div style="display: grid; gap: 15px;">
|
| ${report.models.map(model => `
|
| <div style="padding: 20px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; border-left: 4px solid ${model.status === 'available' ? 'var(--accent-green)' : 'var(--accent-red)'};">
|
| <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 10px;">
|
| <div>
|
| <h3 style="margin-bottom: 5px;">${model.model_id}</h3>
|
| <span class="badge badge-${model.status === 'available' ? 'success' : 'danger'}">${model.status === 'available' ? '✅ در دسترس' : '❌ خطا'}</span>
|
| </div>
|
| </div>
|
| ${model.status === 'available' ? `
|
| <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 15px;">
|
| ${model.downloads ? `<div><span style="font-size: 12px; color: var(--text-secondary);">دانلودها:</span> <strong>${model.downloads.toLocaleString()}</strong></div>` : ''}
|
| ${model.likes ? `<div><span style="font-size: 12px; color: var(--text-secondary);">لایکها:</span> <strong>${model.likes}</strong></div>` : ''}
|
| ${model.pipeline_tag ? `<div><span style="font-size: 12px; color: var(--text-secondary);">نوع:</span> <strong>${model.pipeline_tag}</strong></div>` : ''}
|
| </div>
|
| ` : `
|
| <div style="color: var(--accent-red); margin-top: 10px;">
|
| ${model.error || 'خطای نامشخص'}
|
| </div>
|
| `}
|
| </div>
|
| `).join('')}
|
| </div>
|
| `;
|
| }
|
|
|
| reportDiv.innerHTML = html;
|
| } catch (error) {
|
| reportDiv.innerHTML = `<div class="alert alert-error">❌ خطا: ${error.message}</div>`;
|
| }
|
| }
|
| </script>
|
| </body>
|
|
|
| </html> |
