Hugging Face's logo

Spaces:
Really-amin
/
Datasourceforcryptocurrency
Running

App Files Community
Datasourceforcryptocurrency / hf-data-engine /templates /unified_dashboard.html
Really-amin's picture
Really-amin
Upload 317 files
eebf5c4 verified
raw
history blame contribute delete
224 kB
 <!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/[email protected]/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 */
.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 */
.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 */
.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 Table */
.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);
}
/* Charts */
.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 */
.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);
}
}
/* Forms */
.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;
}
/* Badges */
.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 */
.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);
}
/* Responsive */
@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 Styles */
.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);
}
}
/* Improved Button Styles */
.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 Effect */
.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);
}
/* Improved Empty States */
.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;
}
/* Loading States */
.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;
}
}
/* Scrollbar */
::-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 Notifications */
.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;
}
}
/* === Connection Status Indicator === */
.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;
}
/* === توسط Badge === */
.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;
}
}
/* === Glassmorphism برای کارت‌ها === */
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* === Progress Bar انیمیت شده === */
.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%);
}
}
/* === Modern UI Enhancements === */
/* Ripple Effect for Buttons */
.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;
}
/* Enhanced Card Animations */
.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 Animation */
.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 Loading */
.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%;
}
/* Enhanced Table Row Animations */
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);
}
}
/* Enhanced Hover Effects */
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 Bar */
.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 */
.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);
}
/* Enhanced Toast Notifications */
.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 */
.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; }
}
/* Floating Action Button */
.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);
}
/* Success/Error Feedback */
.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 Animation for Live Data */
.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);
}
}
/* Smooth Scroll */
html {
scroll-behavior: smooth;
}
/* Enhanced Focus States */
*:focus-visible {
outline: 2px solid var(--accent-blue);
outline-offset: 2px;
border-radius: 4px;
}
/* Loading Overlay */
.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 */
.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 Animation */
.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 */
.badge-pulse {
animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Smooth Transitions for All Interactive Elements */
button, a, input, select, textarea {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Enhanced Table Styling */
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;
}
/* SVG Icon Styles */
.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 Icons */
.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 Icons */
.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 Icon Definitions -->
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
<!-- Success Icon -->
<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>
<!-- Error Icon -->
<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>
<!-- Warning Icon -->
<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>
<!-- Info Icon -->
<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>
<!-- Market/Chart Icon -->
<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>
<!-- Monitor/API Icon -->
<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>
<!-- Advanced/Flash Icon -->
<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>
<!-- Settings/Gear Icon -->
<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>
<!-- HuggingFace Icon -->
<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>
<!-- Pools/Refresh Icon -->
<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>
<!-- Logs/File Icon -->
<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>
<!-- Resources/Box Icon -->
<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>
<!-- Reports/Chart Icon -->
<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>
<!-- Search Icon -->
<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>
<!-- Refresh Icon -->
<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>
<!-- Trending Up Icon -->
<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>
<!-- Trending Down Icon -->
<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>
<!-- Volume Icon -->
<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>
<!-- Diamond/Gem Icon -->
<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>
<!-- Fire/Trending Icon -->
<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>
<!-- Link/Chain Icon -->
<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>
<!-- Export/Download Icon -->
<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>
<!-- Delete/Trash Icon -->
<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>
<!-- Brain/AI Icon -->
<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>
<!-- Arrow Up Icon -->
<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>
<!-- Live/Dot Icon -->
<symbol id="icon-live" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" fill="currentColor"/>
</symbol>
</svg>
</head>
<body>
<!-- Progress Indicator -->
<div class="progress-indicator" id="progressIndicator">
<div class="progress-bar" id="progressBar"></div>
</div>
<!-- Toast Container -->
<div class="toast-container" id="toastContainer"></div>
<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay">
<div class="loading-spinner-large"></div>
<div class="loading-text" id="loadingText">در حال بارگذاری...</div>
</div>
<!-- Feedback Overlay -->
<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>
<!-- Floating Action Button -->
<button class="fab ripple" onclick="scrollToTop()" title="بازگشت به بالا">
↑
</button>
<!-- WebSocket Status Indicator -->
<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">
<!-- Header -->
<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>
<!-- Tabs -->
<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>
<!-- Market Tab -->
<div id="tab-market" class="tab-content active">
<!-- Stats Grid -->
<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>
<!-- Market Table -->
<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>
<!-- Search Bar -->
<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>
<!-- Filter Chips -->
<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>
<!-- Charts Row -->
<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>
<!-- Trending Section -->
<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>
<!-- DeFi Section -->
<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>
<!-- API Monitor Tab -->
<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&#10;ETH looks weak&#10;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>
<!-- Advanced Tab -->
<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>
<!-- Admin Tab -->
<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>
<!-- HuggingFace Tab -->
<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&#10;ETH looks weak&#10;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>
<!-- Logs Tab -->
<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>
<!-- Filters -->
<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>
<!-- Log Stats -->
<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>
<!-- Logs Table -->
<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>
<!-- Resources Tab -->
<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>
<!-- Resource Stats -->
<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>
<!-- Category Filter -->
<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>
<!-- Resources Grid -->
<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>
<!-- Import Modal -->
<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>
<!-- Reports Tab -->
<div id="tab-reports" class="tab-content">
<!-- System Status Alerts -->
<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>
<!-- Diagnostics Results -->
<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>
<!-- Pools Tab -->
<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>
<!-- Create Pool Modal -->
<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>
<!-- Add Member Modal -->
<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>
// Global variables
let charts = {};
let wsConnection = null;
let currentTab = 'market';
// Tab switching
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');
// Load data for specific tabs
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();
}
}
// Initialize
document.addEventListener('DOMContentLoaded', async () => {
await loadMarketData();
initCharts();
connectWebSocket();
setInterval(() => {
if (currentTab === 'market') loadMarketData();
else if (currentTab === 'monitor') loadMonitorData();
}, 60000);
});
// Market Data Functions
async function loadMarketData() {
try {
// Show loading state
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);
// Check if responses are OK
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()
]);
// Validate data with more detailed checks
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');
}
// Check if stats.market exists and is an object
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');
}
// Note: sentiment can have different structures:
// - sentiment.fear_greed_index (from /api/sentiment)
// - sentiment.fear_greed_value (from /api/stats)
// So we don't validate the exact structure here
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');
}
// Call updateStats with validated data - double check before calling
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 {
// More robust validation with detailed checks
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;
}
// Use safe property access for market data with additional checks
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) + '%';
}
// Handle sentiment data - support both structures:
// 1. sentiment.fear_greed_index.value (from /api/sentiment)
// 2. sentiment.fear_greed_value (from /api/stats)
let fg = 50;
let classification = 'Neutral';
if (sentiment.fear_greed_index && typeof sentiment.fear_greed_index === 'object') {
// Structure from /api/sentiment endpoint
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') {
// Structure from /api/stats endpoint
fg = sentiment.fear_greed_value;
classification = sentiment.classification || 'Neutral';
} else if (typeof sentiment.value !== 'undefined') {
// Fallback structure
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;
// Store data for filtering
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;
}
// استفاده از WebSocket Client جدید
let wsConnectAttempts = 0;
const MAX_WS_CONNECT_ATTEMPTS = 10; // حداکثر 10 تلاش (10 ثانیه)
let wsStatsInterval = null;
function connectWebSocket() {
// WebSocket client از websocket-client.js استفاده می‌شود
// که به صورت خودکار اتصال برقرار می‌کند
// بررسی وجود wsClient و متدهای مورد نیاز
if (window.wsClient && typeof window.wsClient.on === 'function' && typeof window.wsClient.requestStats === 'function') {
console.log('✅ WebSocket Client آماده است');
wsConnectAttempts = 0; // Reset counter on success
// ثبت handler برای به‌روزرسانی آمار
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);
// درخواست آمار هر 10 ثانیه (فقط یک بار تنظیم شود)
if (!wsStatsInterval) {
wsStatsInterval = setInterval(() => {
if (window.wsClient && window.wsClient.isConnected) {
window.wsClient.requestStats();
}
}, 10000);
}
} else {
wsConnectAttempts++;
if (wsConnectAttempts < MAX_WS_CONNECT_ATTEMPTS) {
// فقط هر 5 ثانیه یک بار لاگ کنیم تا console پر نشود
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 به درستی لود شده باشد.');
// تلاش نهایی بعد از 5 ثانیه
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;
}
}
// تابع برای به‌روزرسانی نمایش آمار Provider
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;
}
}
}
// Monitor Functions
async function loadMonitorData() {
try {
// Show loading state
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')
]);
// Check if responses are OK
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()
]);
// Validate data
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;
}
}
// Advanced Functions
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);
}
}
// Admin Functions
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');
}
// HuggingFace Functions
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>';
// Mock data for now
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>';
// Mock data for now
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>`;
// Mock search
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>`;
// Mock search
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}`;
}
}
// Pools Functions
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('');
}
// Load rotation history
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);
}
}
// Toast notification function
// Enhanced Toast Notification System
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);
// Auto remove after 5 seconds
setTimeout(() => {
toast.style.animation = 'toastSlideIn 0.3s reverse';
setTimeout(() => toast.remove(), 300);
}, 5000);
// Add click to dismiss
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);
}
});
}
// Progress Indicator Functions
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%';
}
}
// Loading Overlay Functions
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');
}
}
// Feedback Overlay Functions
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');
// Auto hide after 3 seconds
setTimeout(() => {
hideFeedback();
}, 3000);
}
}
function hideFeedback() {
const overlay = document.getElementById('feedbackOverlay');
if (overlay) {
overlay.classList.remove('show');
}
}
// Scroll to Top Function
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
// Show FAB when scrolling down
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;
}
});
// Filter Market Table Function
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;
// Remove existing no-results row
const existingNoResults = tbody.querySelector('tr[data-no-results]');
if (existingNoResults) {
existingNoResults.remove();
}
rows.forEach((row, index) => {
if (row.querySelector('td[colspan]')) {
return; // Skip loading/error rows
}
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') {
// This would need volume data - for now show all
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';
}
});
// Show message if no results
if (visibleCount === 0 && rows.length > 0 && !searchTerm && currentFilter === 'all') {
// Don't show message if no search/filter is applied
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;
// Update active chip
document.querySelectorAll('.filter-chip').forEach(chip => {
chip.classList.remove('active');
});
if (event && event.target) {
event.target.classList.add('active');
}
filterMarketTable();
}
// Number Counter Animation
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);
// Easing function
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);
}
// Close modals when clicking outside
document.addEventListener('click', (e) => {
if (e.target.classList.contains('modal')) {
e.target.style.display = 'none';
}
});
// ===== Log Management Functions =====
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();
// Update stats
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;
}
// Update table
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);
}
}
// ===== Resource Management Functions =====
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();
// Update stats
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;
}
// Update grid
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();
}
// Import form handler
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);
}
});
}
// ===== Reports Functions =====
async function loadReports() {
await Promise.all([
loadDiscoveryReport(),
loadModelsReport(),
loadLastDiagnostics()
]);
}
// Load System Alerts
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. بررسی کنید که /static-proxy?url=https%3A%2F%2Fapi.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');
// Update system alerts
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);
// Load system alerts
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>