| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DashX - Modern API Dashboard</title> |
| <meta name="description" content="DashX is a modern REST API dashboard platform that allows you to manage, monitor, and utilize various API tools with ease. Fully featured for developers with an intuitive interface and powerful analytics."> |
| <meta name="keywords" content="API Dashboard, REST API, DashX, API Management, Developer Tools, API Analytics"> |
| <meta name="author" content="DashX Team"> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> |
| <link rel="icon" type="image/webp" href="/icon.webp"> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.8/sweetalert2.min.css" rel="stylesheet"> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"> |
| <link href="styles.css" rel="stylesheet"> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> |
| <style> |
| i.fas, i.fa, i.far, i.fab, i.fal, |
| .fas, .fa, .far, .fab, .fal, |
| i[class*="fa-"] { |
| font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome" !important; |
| font-weight: 900 !important; |
| font-style: normal !important; |
| font-variant: normal !important; |
| text-rendering: auto !important; |
| line-height: 1 !important; |
| -webkit-font-smoothing: antialiased !important; |
| -moz-osx-font-smoothing: grayscale !important; |
| display: inline-block !important; |
| } |
| |
| .stat-item { |
| text-align: center; |
| padding: 1.5rem; |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 12px; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .stat-item .stat-value { |
| display: block; |
| font-size: 1.8rem; |
| font-weight: 700; |
| color: rgba(133, 48, 48, 0.9); |
| margin-bottom: 0.5rem; |
| } |
| |
| .stat-item .stat-label { |
| display: block; |
| font-size: 0.9rem; |
| color: rgba(255, 255, 255, 0.7); |
| } |
| |
| .stat-icon { |
| font-size: 3rem !important; |
| color: rgba(255, 168, 168, 0.9) !important; |
| min-width: 80px !important; |
| text-align: center !important; |
| display: flex !important; |
| align-items: center !important; |
| justify-content: center !important; |
| } |
| |
| .stat-icon i { |
| font-size: 3rem !important; |
| display: block !important; |
| } |
| |
| .stat-info { |
| flex: 1; |
| } |
| |
| .stat-number { |
| font-size: 2rem; |
| font-weight: 700; |
| color: rgba(255, 255, 255, 0.9); |
| margin-bottom: 0.25rem; |
| word-break: break-all; |
| } |
| |
| .stat-label { |
| font-size: 0.9rem; |
| color: rgba(255, 255, 255, 0.7); |
| } |
| |
| .section h2 i { |
| color: #e74c3c !important; |
| } |
| |
| .navbar { |
| background: rgba(44, 62, 80, 0.95) !important; |
| backdrop-filter: blur(10px); |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
| box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); |
| } |
| |
| .navbar-brand { |
| font-size: 1.5rem; |
| font-weight: 700; |
| color: #fff !important; |
| } |
| |
| .navbar-brand i { |
| color: #e74c3c; |
| font-size: 1.8rem; |
| margin-right: 0.5rem; |
| } |
| |
| .nav-link { |
| color: #ecf0f1 !important; |
| font-weight: 500; |
| transition: all 0.3s ease; |
| padding: 0.5rem 1rem !important; |
| border-radius: 8px; |
| margin: 0 0.25rem; |
| } |
| |
| .nav-link:hover { |
| background: rgba(255, 255, 255, 0.1); |
| transform: translateY(-1px); |
| } |
| |
| .nav-link.text-danger { |
| color: #e74c3c !important; |
| } |
| |
| .nav-link.text-danger:hover { |
| background: rgba(231, 76, 60, 0.1); |
| color: #ff6b6b !important; |
| } |
| |
| .glassmorphism { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| border-radius: 16px; |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); |
| } |
| |
| .reset-timer-card { |
| margin-top: 2rem; |
| padding: 1.5rem; |
| border-radius: 12px; |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); |
| } |
| |
| .timer-header { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| margin-bottom: 1rem; |
| } |
| |
| .timer-header i { |
| font-size: 1.5rem; |
| color: #853030; |
| } |
| |
| .timer-header h3 { |
| margin: 0; |
| font-size: 1.2rem; |
| color: rgba(255, 255, 255, 0.9); |
| } |
| |
| .timer-header p { |
| margin: 0; |
| opacity: 0.7; |
| font-size: 0.9rem; |
| } |
| |
| .countdown-display { |
| text-align: center; |
| padding: 2rem 1rem; |
| } |
| |
| .countdown-time { |
| font-size: 3rem; |
| font-weight: bold; |
| color: #853030; |
| font-family: 'Courier New', monospace; |
| letter-spacing: 0.1em; |
| text-shadow: 0 0 20px rgba(133, 48, 48, 0.3); |
| } |
| |
| .countdown-label { |
| margin-top: 0.5rem; |
| opacity: 0.6; |
| font-size: 0.9rem; |
| color: rgba(255, 255, 255, 0.8); |
| } |
| |
| .reset-progress-container { |
| width: 100%; |
| height: 8px; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 4px; |
| overflow: hidden; |
| margin-top: 1rem; |
| } |
| |
| .reset-progress { |
| height: 100%; |
| background: linear-gradient(90deg, #853030, #ff6b6b); |
| transition: width 1s linear; |
| width: 0%; |
| box-shadow: 0 0 10px rgba(133, 48, 48, 0.5); |
| } |
| |
| .reset-info { |
| margin-top: 1rem; |
| padding: 1rem; |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 8px; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .reset-info i { |
| color: #853030; |
| margin-right: 0.5rem; |
| } |
| |
| .reset-info span { |
| font-size: 0.9rem; |
| color: rgba(255, 255, 255, 0.8); |
| } |
| |
| .reset-info div:last-child { |
| font-weight: bold; |
| color: #853030; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.7; } |
| } |
| |
| .reset-countdown { |
| animation: pulse 2s ease-in-out infinite; |
| } |
| |
| .usage-overview { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); |
| gap: 1.5rem; |
| margin-top: 1rem; |
| } |
| |
| .usage-section { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| padding: 1.5rem; |
| border-radius: 16px; |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2); |
| transition: all 0.3s ease; |
| } |
| |
| .usage-section:hover { |
| background: rgba(255, 255, 255, 0.08); |
| transform: translateY(-2px); |
| box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3); |
| } |
| |
| .usage-section h4 { |
| margin-bottom: 1rem; |
| color: rgba(255, 255, 255, 0.9); |
| font-size: 1.1rem; |
| font-weight: 600; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .usage-section h4 i { |
| color: rgba(133, 48, 48, 0.8); |
| } |
| |
| .endpoint-list, .ip-list { |
| display: flex; |
| flex-direction: column; |
| gap: 0.5rem; |
| } |
| |
| .endpoint-item, .ip-item { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 0.75rem; |
| background: rgba(255, 255, 255, 0.08); |
| backdrop-filter: blur(5px); |
| border-radius: 8px; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| transition: all 0.3s ease; |
| } |
| |
| .endpoint-item:hover, .ip-item:hover { |
| background: rgba(255, 255, 255, 0.12); |
| transform: translateX(4px); |
| } |
| |
| .endpoint-name, .ip-address { |
| font-family: 'Courier New', monospace; |
| font-weight: 500; |
| color: rgba(255, 255, 255, 0.8); |
| font-size: 0.9rem; |
| } |
| |
| .endpoint-count, .ip-count { |
| color: rgba(133, 48, 48, 0.9); |
| font-weight: 600; |
| background: rgba(133, 48, 48, 0.1); |
| padding: 0.25rem 0.5rem; |
| border-radius: 12px; |
| font-size: 0.8rem; |
| } |
| |
| .ip-time { |
| font-size: 0.75rem; |
| color: rgba(255, 255, 255, 0.6); |
| font-style: italic; |
| } |
| |
| .daily-usage { |
| display: flex; |
| flex-direction: column; |
| gap: 0.75rem; |
| } |
| |
| .usage-day { |
| display: grid; |
| grid-template-columns: 70px 1fr 50px; |
| align-items: center; |
| gap: 1rem; |
| padding: 0.5rem; |
| border-radius: 8px; |
| transition: all 0.3s ease; |
| } |
| |
| .usage-day:hover { |
| background: rgba(255, 255, 255, 0.05); |
| } |
| |
| .usage-date { |
| font-size: 0.85rem; |
| font-weight: 500; |
| color: rgba(255, 255, 255, 0.8); |
| } |
| |
| .usage-bar-container { |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 10px; |
| height: 8px; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .usage-bar { |
| height: 100%; |
| background: linear-gradient(90deg, rgba(133, 48, 48, 0.8), rgba(166, 69, 69, 0.9)); |
| border-radius: 10px; |
| transition: width 0.6s ease; |
| position: relative; |
| } |
| |
| .usage-bar::after { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); |
| animation: shimmer 2s infinite; |
| } |
| |
| @keyframes shimmer { |
| 0% { transform: translateX(-100%); } |
| 100% { transform: translateX(100%); } |
| } |
| |
| .usage-count { |
| font-size: 0.85rem; |
| font-weight: 600; |
| color: rgba(133, 48, 48, 0.9); |
| text-align: center; |
| } |
| |
| .no-data { |
| text-align: center; |
| padding: 2rem; |
| color: rgba(255, 255, 255, 0.5); |
| font-style: italic; |
| } |
| |
| .no-data-state, .error-state { |
| text-align: center; |
| padding: 3rem 2rem; |
| color: rgba(255, 255, 255, 0.6); |
| } |
| |
| .error-state i { |
| color: #ff6b6b; |
| font-size: 2.5rem; |
| margin-bottom: 1rem; |
| } |
| |
| .search-container { |
| margin-bottom: 2rem; |
| position: relative; |
| } |
| |
| .search-input { |
| width: 100%; |
| padding: 1rem 1rem 1rem 3rem; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| border-radius: 16px; |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| font-size: 1rem; |
| transition: all 0.3s ease; |
| color: rgba(255, 255, 255, 0.9); |
| } |
| |
| .search-input::placeholder { |
| color: rgba(255, 255, 255, 0.5); |
| } |
| |
| .search-input:focus { |
| outline: none; |
| border-color: rgba(133, 48, 48, 0.8); |
| background: rgba(255, 255, 255, 0.08); |
| box-shadow: 0 0 0 3px rgba(133, 48, 48, 0.1); |
| } |
| |
| .search-icon { |
| position: absolute; |
| left: 1rem; |
| top: 50%; |
| transform: translateY(-50%); |
| color: rgba(133, 48, 48, 0.8); |
| font-size: 1.2rem; |
| } |
| |
| .plugin-card { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 16px; |
| overflow: hidden; |
| transition: all 0.3s ease; |
| margin-bottom: 1rem; |
| } |
| |
| .plugin-card:hover { |
| background: rgba(255, 255, 255, 0.08); |
| transform: translateY(-2px); |
| box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3); |
| } |
| |
| .plugin-info { |
| margin-top: 0.5rem; |
| font-size: 0.85rem; |
| } |
| |
| .limit-info { |
| background: rgba(133, 48, 48, 0.1); |
| color: #853030; |
| padding: 0.25rem 0.5rem; |
| border-radius: 4px; |
| font-weight: 500; |
| } |
| |
| .user-item { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| padding: 1.5rem; |
| border-radius: 16px; |
| margin-bottom: 1rem; |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| transition: all 0.3s ease; |
| } |
| |
| .user-item:hover { |
| background: rgba(255, 255, 255, 0.08); |
| transform: translateY(-2px); |
| box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3); |
| } |
| |
| .user-item.temp-banned { |
| border-left: 4px solid rgba(255, 193, 7, 0.8); |
| background: rgba(255, 193, 7, 0.05); |
| } |
| |
| .user-item.banned { |
| border-left: 4px solid rgba(220, 53, 69, 0.8); |
| background: rgba(220, 53, 69, 0.05); |
| } |
| |
| .user-info { |
| flex: 1; |
| } |
| |
| .user-name { |
| font-size: 1.2rem; |
| font-weight: 600; |
| color: rgba(255, 255, 255, 0.9); |
| margin-bottom: 0.5rem; |
| } |
| |
| .user-details { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.75rem; |
| margin-bottom: 0.75rem; |
| } |
| |
| .user-email { |
| color: rgba(255, 255, 255, 0.7); |
| font-size: 0.9rem; |
| } |
| |
| .user-role { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(5px); |
| color: rgba(255, 255, 255, 0.8); |
| padding: 0.25rem 0.75rem; |
| border-radius: 12px; |
| font-size: 0.8rem; |
| font-weight: 500; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .premium-badge { |
| background: linear-gradient(45deg, rgba(255, 215, 0, 0.3), rgba(255, 237, 78, 0.3)); |
| backdrop-filter: blur(5px); |
| color: rgba(255, 215, 0, 1); |
| padding: 0.25rem 0.75rem; |
| border-radius: 12px; |
| font-size: 0.8rem; |
| font-weight: 600; |
| border: 1px solid rgba(255, 215, 0, 0.3); |
| box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); |
| } |
| |
| .user-stats { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 1rem; |
| font-size: 0.85rem; |
| color: rgba(255, 255, 255, 0.7); |
| margin-bottom: 0.75rem; |
| } |
| |
| .ban-info { |
| background: rgba(255, 193, 7, 0.1); |
| backdrop-filter: blur(5px); |
| border: 1px solid rgba(255, 193, 7, 0.3); |
| padding: 0.75rem; |
| border-radius: 8px; |
| font-size: 0.85rem; |
| color: rgba(255, 193, 7, 0.9); |
| margin-top: 0.5rem; |
| } |
| |
| .user-actions { |
| display: flex; |
| gap: 0.5rem; |
| flex-wrap: wrap; |
| } |
| |
| .pagination-controls { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 1rem; |
| margin-top: 1rem; |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| border-radius: 12px; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .page-info { |
| color: rgba(255, 255, 255, 0.8); |
| font-weight: 500; |
| } |
| |
| .users-pagination-info { |
| color: rgba(255, 255, 255, 0.6); |
| font-size: 0.9rem; |
| margin-bottom: 1rem; |
| text-align: center; |
| padding: 0.5rem; |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 8px; |
| backdrop-filter: blur(5px); |
| } |
| |
| .btn { |
| padding: 0.5rem 1rem; |
| border: none; |
| border-radius: 8px; |
| font-weight: 500; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| text-decoration: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| font-size: 0.9rem; |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .btn:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| transform: none !important; |
| } |
| |
| .btn-primary { |
| background: rgba(133, 48, 48, 0.8); |
| color: white; |
| border: 1px solid rgba(133, 48, 48, 0.3); |
| } |
| |
| .btn-primary:hover:not(:disabled) { |
| background: rgba(133, 48, 48, 1); |
| transform: translateY(-1px); |
| box-shadow: 0 4px 12px rgba(133, 48, 48, 0.3); |
| } |
| |
| .btn-secondary { |
| background: rgba(108, 117, 125, 0.8); |
| color: white; |
| border: 1px solid rgba(108, 117, 125, 0.3); |
| } |
| |
| .btn-secondary:hover:not(:disabled) { |
| background: rgba(108, 117, 125, 1); |
| transform: translateY(-1px); |
| } |
| |
| .btn-warning { |
| background: rgba(255, 193, 7, 0.8); |
| color: rgba(133, 100, 4, 1); |
| border: 1px solid rgba(255, 193, 7, 0.3); |
| } |
| |
| .btn-warning:hover:not(:disabled) { |
| background: rgba(255, 193, 7, 1); |
| transform: translateY(-1px); |
| box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3); |
| } |
| |
| .btn-success { |
| background: rgba(40, 167, 69, 0.8); |
| color: white; |
| border: 1px solid rgba(40, 167, 69, 0.3); |
| } |
| |
| .btn-success:hover:not(:disabled) { |
| background: rgba(40, 167, 69, 1); |
| transform: translateY(-1px); |
| box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); |
| } |
| |
| .btn-danger { |
| background: rgba(220, 53, 69, 0.8); |
| color: white; |
| border: 1px solid rgba(220, 53, 69, 0.3); |
| } |
| |
| .btn-danger:hover:not(:disabled) { |
| background: rgba(220, 53, 69, 1); |
| transform: translateY(-1px); |
| box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3); |
| } |
| |
| .no-users-state { |
| text-align: center; |
| padding: 3rem; |
| color: rgba(255, 255, 255, 0.6); |
| } |
| |
| .admin-card { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 16px; |
| padding: 2rem; |
| margin-bottom: 2rem; |
| transition: all 0.3s ease; |
| } |
| |
| .admin-card:hover { |
| background: rgba(255, 255, 255, 0.08); |
| transform: translateY(-2px); |
| box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3); |
| } |
| |
| .admin-card h3 { |
| color: rgba(255, 255, 255, 0.9); |
| margin-bottom: 1.5rem; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .admin-card h3 i { |
| color: rgba(133, 48, 48, 0.8); |
| } |
| |
| .stats-cards { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 1.5rem; |
| margin-bottom: 2rem; |
| } |
| |
| .stat-card { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| padding: 2rem; |
| border-radius: 16px; |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| transition: all 0.3s ease; |
| } |
| |
| .stat-card:hover { |
| background: rgba(255, 255, 255, 0.08); |
| transform: translateY(-3px); |
| box-shadow: 0 15px 50px 0 rgba(31, 38, 135, 0.4); |
| } |
| |
| .form-row { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 1rem; |
| margin-bottom: 1.5rem; |
| } |
| |
| .form-group { |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .form-group label { |
| color: rgba(255, 255, 255, 0.9); |
| margin-bottom: 0.5rem; |
| font-weight: 500; |
| font-size: 0.9rem; |
| } |
| |
| .form-group .required { |
| color: #ff6b6b; |
| margin-left: 0.25rem; |
| } |
| |
| .form-group input, |
| .form-group select { |
| padding: 0.75rem; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.05); |
| color: rgba(255, 255, 255, 0.9); |
| font-size: 0.95rem; |
| transition: all 0.3s ease; |
| } |
| |
| .form-group input:focus, |
| .form-group select:focus { |
| outline: none; |
| border-color: rgba(133, 48, 48, 0.8); |
| background: rgba(255, 255, 255, 0.08); |
| box-shadow: 0 0 0 3px rgba(133, 48, 48, 0.1); |
| } |
| |
| .form-group input::placeholder { |
| color: rgba(255, 255, 255, 0.4); |
| } |
| |
| .form-group small { |
| color: rgba(255, 255, 255, 0.5); |
| font-size: 0.8rem; |
| margin-top: 0.25rem; |
| } |
| |
| @media (max-width: 768px) { |
| .countdown-time { |
| font-size: 2rem; |
| } |
| |
| .reset-timer-card { |
| padding: 1rem; |
| } |
| |
| .usage-overview { |
| grid-template-columns: 1fr; |
| } |
| |
| .usage-day { |
| grid-template-columns: 60px 1fr 40px; |
| gap: 0.5rem; |
| } |
| |
| .user-item { |
| flex-direction: column; |
| gap: 1rem; |
| } |
| |
| .user-actions { |
| width: 100%; |
| justify-content: flex-end; |
| } |
| |
| .pagination-controls { |
| flex-direction: column; |
| gap: 1rem; |
| } |
| |
| .dashboard-container { |
| flex-direction: column; |
| } |
| |
| .sidebar { |
| width: 100%; |
| position: static; |
| height: auto; |
| } |
| |
| .form-row { |
| grid-template-columns: 1fr; |
| } |
| |
| .stats-cards { |
| grid-template-columns: 1fr; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <nav class="navbar navbar-expand-lg navbar-dark"> |
| <div class="container"> |
| <a class="navbar-brand" href="/"> |
| <i class="fas fa-bolt"></i> DashX |
| </a> |
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> |
| <span class="navbar-toggler-icon"></span> |
| </button> |
| <div class="collapse navbar-collapse" id="navbarNav"> |
| <ul class="navbar-nav ms-auto"> |
| <li class="nav-item"> |
| <a class="nav-link" href="/profile" onclick="goToProfile()"> |
| <i class="fas fa-user"></i> Profile |
| </a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link text-danger" href="#" onclick="logout()"> |
| <i class="fas fa-sign-out-alt"></i> Logout |
| </a> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </nav> |
|
|
| <div class="dashboard-container"> |
| <div class="sidebar"> |
| <div class="sidebar-menu"> |
| <a href="#overview" class="menu-item active" onclick="showSection('overview')"> |
| <i class="fas fa-chart-line"></i> Overview |
| </a> |
| <a href="#api-stats" class="menu-item" onclick="showSection('api-stats')"> |
| <i class="fas fa-chart-area"></i> API Stats |
| </a> |
| <a href="#plugins" class="menu-item" onclick="showSection('plugins')"> |
| <i class="fas fa-plug"></i> API Plugins |
| </a> |
| <a href="#server-stats" class="menu-item" onclick="showSection('server-stats')"> |
| <i class="fas fa-server"></i> Server Stats |
| </a> |
| <a href="#events" class="menu-item" onclick="showSection('events')"> |
| <i class="fas fa-calendar"></i> Events |
| </a> |
| <a href="#settings" class="menu-item" onclick="showSection('settings')"> |
| <i class="fas fa-cog"></i> Settings |
| </a> |
| <div id="adminMenu" style="display: none;"> |
| <a href="#management" class="menu-item" onclick="showSection('management')"> |
| <i class="fas fa-users-cog"></i> Management |
| </a> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="main-content"> |
| <div id="overview" class="section active"> |
| <h2><i class="fas fa-tachometer-alt"></i> Dashboard Overview</h2> |
| <div class="stats-cards"> |
| <div class="stat-card"> |
| <div class="stat-icon"> |
| <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/svgs/solid/key.svg" alt="key" style="width: 3rem; height: 3rem; filter: invert(78%) sepia(45%) saturate(548%) hue-rotate(314deg) brightness(101%) contrast(101%);"> |
| </div> |
| <div class="stat-info"> |
| <div class="stat-number" id="userApiKey">Loading...</div> |
| <div class="stat-label">API Key</div> |
| </div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-icon"> |
| <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/svgs/solid/chart-pie.svg" alt="chart" style="width: 3rem; height: 3rem; filter: invert(78%) sepia(45%) saturate(548%) hue-rotate(314deg) brightness(101%) contrast(101%);"> |
| </div> |
| <div class="stat-info"> |
| <div class="stat-number" id="userRequests">0</div> |
| <div class="stat-label">Total Requests</div> |
| </div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-icon"> |
| <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/svgs/solid/cloud.svg" alt="cloud" style="width: 3rem; height: 3rem; filter: invert(78%) sepia(45%) saturate(548%) hue-rotate(314deg) brightness(101%) contrast(101%);"> |
| </div> |
| <div class="stat-info"> |
| <div class="stat-number" id="userRequestsToday">0</div> |
| <div class="stat-label">Today's Requests</div> |
| </div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-icon"> |
| <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/svgs/solid/gauge-high.svg" alt="gauge" style="width: 3rem; height: 3rem; filter: invert(78%) sepia(45%) saturate(548%) hue-rotate(314deg) brightness(101%) contrast(101%);"> |
| </div> |
| <div class="stat-info"> |
| <div class="stat-number" id="userLimit">30</div> |
| <div class="stat-label">Daily Limit</div> |
| </div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-icon"> |
| <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/svgs/solid/battery-three-quarters.svg" alt="battery" style="width: 3rem; height: 3rem; filter: invert(78%) sepia(45%) saturate(548%) hue-rotate(314deg) brightness(101%) contrast(101%);"> |
| </div> |
| <div class="stat-info"> |
| <div class="stat-number" id="userLimitToday">30</div> |
| <div class="stat-label">Remaining Limit (Personal)</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="reset-timer-card glassmorphism"> |
| <div class="timer-header"> |
| <i class="fas fa-clock"></i> |
| <div> |
| <h3>Next Reset</h3> |
| <p>Daily limit resets at 00:00</p> |
| </div> |
| </div> |
|
|
| <div class="countdown-display"> |
| <div class="countdown-time"> |
| <span class="reset-countdown">00:00:00</span> |
| </div> |
| <div class="countdown-label"> |
| Hours : Minutes : Seconds |
| </div> |
| </div> |
|
|
| <div class="reset-progress-container"> |
| <div class="reset-progress"></div> |
| </div> |
|
|
| <div class="reset-info"> |
| <div> |
| <i class="fas fa-info-circle"></i> |
| <span>Your limit will be restored to maximum</span> |
| </div> |
| <div> |
| <i class="fas fa-sync-alt"></i> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="usage-overview"> |
| <div class="usage-section"> |
| <h4><i class="fas fa-chart-bar"></i> API Usage Overview</h4> |
| <div class="endpoint-list"> |
| <div class="endpoint-item"> |
| <span class="endpoint-name">Loading...</span> |
| <span class="endpoint-count">0 requests</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
|
|
| <div class="usage-section"> |
| <h4><i class="fas fa-calendar-alt"></i> Daily Usage (Last 7 Days)</h4> |
| <div class="daily-usage"> |
| <div class="usage-day"> |
| <span class="usage-date">Loading...</span> |
| <div class="usage-bar-container"> |
| <div class="usage-bar" style="width: 0%;"></div> |
| </div> |
| <span class="usage-count">0</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="usage-section"> |
| <h4><i class="fas fa-network-wired"></i> Recent IP Addresses</h4> |
| <div class="ip-list"> |
| <div class="ip-item"> |
| <div> |
| <span class="ip-address">Loading...</span> |
| <div class="ip-time">Just now</div> |
| </div> |
| <span class="ip-count">0 requests</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="plugins" class="section"> |
| <h2><i class="fas fa-plug"></i> Available API Plugins</h2> |
| <p style="margin-bottom: 2rem; opacity: 0.8;">Discover and test our API endpoints with interactive documentation</p> |
|
|
| <div class="search-container"> |
| <i class="fas fa-search search-icon"></i> |
| <input type="text" |
| class="search-input" |
| placeholder="Search plugins by name, description, or tags..." |
| oninput="searchPlugins(this.value)" |
| id="pluginSearch"> |
| </div> |
|
|
| <div class="plugins-grid" id="pluginsGrid"> |
| <div class="loading"> |
| <i class="fas fa-spinner fa-spin" style="margin-right: 0.5rem;"></i> |
| Loading plugins... |
| </div> |
| </div> |
| </div> |
|
|
| |
|
|
| <div id="server-stats" class="section"> |
| <h2><i class="fas fa-server"></i> Server Statistics</h2> |
|
|
| |
|
|
| <div class="stats-cards"> |
| <div class="stat-card"> |
| <div class="stat-icon"> |
| <img src="https://api.iconify.design/mdi/account-group.svg?color=%23ba68c8&width=48&height=48" alt="users"> |
| </div> |
| <div class="stat-info"> |
| <div class="stat-number" id="totalUsersCount">0</div> |
| <div class="stat-label">Total Users</div> |
| </div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-icon"> |
| <img src="https://api.iconify.design/mdi/account.svg?color=%23ce93d8&width=48&height=48" alt="user"> |
| </div> |
| <div class="stat-info"> |
| <div class="stat-number" id="regularUsersCount">0</div> |
| <div class="stat-label">Regular Users</div> |
| </div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-icon"> |
| <img src="https://api.iconify.design/mdi/crown.svg?color=%23ba68c8&width=48&height=48" alt="crown"> |
| </div> |
| <div class="stat-info"> |
| <div class="stat-number" id="premiumUsersCount">0</div> |
| <div class="stat-label">Premium Users</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="admin-card"> |
| <h3><i class="fas fa-chart-pie"></i> User Role Distribution</h3> |
| <canvas id="roleChart" style="max-height: 300px;"></canvas> |
| </div> |
|
|
| <div class="admin-card"> |
| <h3><i class="fas fa-database"></i> Database Statistics</h3> |
| <div class="stats-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem;"> |
| <div class="stat-item"> |
| <i class="fas fa-hdd" style="font-size: 2rem; color: rgba(133, 48, 48, 0.8); margin-bottom: 0.5rem;"></i> |
| <span class="stat-value" id="dbSize">0 MB</span> |
| <span class="stat-label">Database Size</span> |
| </div> |
| <div class="stat-item"> |
| <i class="fas fa-memory" style="font-size: 2rem; color: rgba(133, 48, 48, 0.8); margin-bottom: 0.5rem;"></i> |
| <span class="stat-value" id="ramUsage">0 MB</span> |
| <span class="stat-label">RAM Usage</span> |
| </div> |
| <div class="stat-item"> |
| <i class="fas fa-microchip" style="font-size: 2rem; color: rgba(133, 48, 48, 0.8); margin-bottom: 0.5rem;"></i> |
| <span class="stat-value" id="cpuUsage">0%</span> |
| <span class="stat-label">CPU Usage</span> |
| </div> |
| <div class="stat-item"> |
| <i class="fas fa-server" style="font-size: 2rem; color: rgba(133, 48, 48, 0.8); margin-bottom: 0.5rem;"></i> |
| <span class="stat-value" id="storageUsed">0 GB</span> |
| <span class="stat-label">Storage Used</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="admin-card"> |
| <h3><i class="fas fa-chart-bar"></i> Role Distribution Details</h3> |
| <div class="stats-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;"> |
| <div class="stat-item"> |
| <span class="stat-value" id="cheapCount">0</span> |
| <span class="stat-label">Cheap Role</span> |
| </div> |
| <div class="stat-item"> |
| <span class="stat-value" id="premiumCount">0</span> |
| <span class="stat-label">Premium Role</span> |
| </div> |
| <div class="stat-item"> |
| <span class="stat-value" id="vipCount">0</span> |
| <span class="stat-label">VIP Role</span> |
| </div> |
| <div class="stat-item"> |
| <span class="stat-value" id="supremeCount">0</span> |
| <span class="stat-label">Supreme Role</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="api-stats" class="section"> |
| <h2><i class="fas fa-chart-area"></i> API Statistics</h2> |
| <p style="margin-bottom: 2rem; opacity: 0.8;">Global API usage statistics and analytics</p> |
|
|
| <div class="stats-cards"> |
| <div class="stat-card"> |
| <div class="stat-icon"> |
| <i class="fas fa-globe"></i> |
| </div> |
| <div class="stat-info"> |
| <div class="stat-number" id="globalTotalRequests">0</div> |
| <div class="stat-label">Total Requests (All Users)</div> |
| </div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-icon"> |
| <i class="fas fa-calendar-day"></i> |
| </div> |
| <div class="stat-info"> |
| <div class="stat-number" id="globalTodayRequests">0</div> |
| <div class="stat-label">Today's Requests (All Users)</div> |
| </div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-icon"> |
| <i class="fas fa-check-circle"></i> |
| </div> |
| <div class="stat-info"> |
| <div class="stat-number" id="successRate">0%</div> |
| <div class="stat-label">Success Rate</div> |
| </div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-icon"> |
| <i class="fas fa-times-circle"></i> |
| </div> |
| <div class="stat-info"> |
| <div class="stat-number" id="failRate">0%</div> |
| <div class="stat-label">Fail Rate</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="charts-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem; margin-top: 2rem;"> |
| <div class="admin-card"> |
| <h3><i class="fas fa-chart-pie"></i> Top Endpoints Distribution</h3> |
| <canvas id="topEndpointsChart" style="max-height: 350px;"></canvas> |
| </div> |
|
|
| <div class="admin-card"> |
| <h3><i class="fas fa-percentage"></i> Success vs Fail Rate</h3> |
| <canvas id="successFailChart" style="max-height: 350px;"></canvas> |
| </div> |
| </div> |
|
|
| <div class="admin-card" style="margin-top: 2rem;"> |
| <h3><i class="fas fa-chart-bar"></i> Daily Request Statistics (Last 7 Days)</h3> |
| <canvas id="dailyRequestsChart" style="max-height: 400px;"></canvas> |
| </div> |
|
|
| <div class="admin-card" style="margin-top: 2rem;"> |
| <h3><i class="fas fa-chart-line"></i> Hourly Trends (Last 24 Hours)</h3> |
| <canvas id="hourlyTrendsChart" style="max-height: 400px;"></canvas> |
| </div> |
|
|
| <div class="admin-card" style="margin-top: 2rem;"> |
| <h3><i class="fas fa-list-ol"></i> Top 10 Most Used Endpoints</h3> |
| <div id="topEndpointsList"> |
| <div class="loading"> |
| <i class="fas fa-spinner fa-spin"></i> Loading... |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="events" class="section"> |
| <h2><i class="fas fa-calendar"></i> Events & Rewards</h2> |
| <div class="events-container"> |
| <div class="redeem-section"> |
| <h3><i class="fas fa-gift"></i> Redeem Code</h3> |
| <p style="margin-bottom: 1.5rem; opacity: 0.8;">Enter a redeem code to unlock premium features or additional limits</p> |
| <div class="form-group"> |
| <input type="text" id="redeemCode" placeholder="Enter your redeem code" style="text-transform: uppercase;"> |
| <button onclick="redeemCode()" class="btn btn-primary"> |
| <i class="fas fa-magic"></i> Redeem |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="settings" class="section"> |
| <h2><i class="fas fa-cog"></i> Settings</h2> |
| <div class="settings-container"> |
| <div class="setting-card"> |
| <h3><i class="fas fa-user-edit"></i> Profile Settings</h3> |
| <div class="form-group"> |
| <label>Username</label> |
| <input type="text" id="usernameInput" placeholder="Enter new username"> |
| </div> |
| <button onclick="updateProfile()" class="btn btn-primary"> |
| <i class="fas fa-save"></i> Update Profile |
| </button> |
| </div> |
|
|
| <div class="setting-card" id="premiumSettings" style="display: none;"> |
| <h3><i class="fas fa-crown"></i> Premium Features</h3> |
| <button onclick="regenerateApiKey()" class="btn btn-warning"> |
| <i class="fas fa-sync"></i> Regenerate API Key |
| </button> |
| <p class="text-muted">Generate a new API key (Premium only)</p> |
| </div> |
|
|
| <div class="setting-card danger-zone"> |
| <h3><i class="fas fa-exclamation-triangle"></i> Danger Zone</h3> |
| <button onclick="deleteAccount()" class="btn btn-danger"> |
| <i class="fas fa-trash"></i> Delete Account |
| </button> |
| <p class="text-muted">This action cannot be undone</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="management" class="section"> |
| <h2><i class="fas fa-users-cog"></i> Admin Management</h2> |
| <div class="admin-container"> |
| <div class="admin-card"> |
| <h3><i class="fas fa-users"></i> User Management</h3> |
| <div id="adminUsersList"> |
| <div class="loading"> |
| <i class="fas fa-spinner fa-spin"></i> Loading users... |
| </div> |
| </div> |
| </div> |
|
|
| <div class="admin-card"> |
| <h3><i class="fas fa-user-tag"></i> Set User Role</h3> |
| <div class="form-row"> |
| <div class="form-group" style="grid-column: 1 / -1;"> |
| <label>Search User <span class="required">*</span></label> |
| <input type="text" id="searchUserInput" placeholder="Search by username or email" oninput="searchUsersForRole(this.value)"> |
| <div id="userSearchResults" style="display: none; margin-top: 0.5rem; background: rgba(255,255,255,0.05); border-radius: 8px; max-height: 200px; overflow-y: auto;"></div> |
| </div> |
| <div class="form-group"> |
| <label>Selected User</label> |
| <input type="text" id="selectedUserDisplay" placeholder="No user selected" readonly> |
| <input type="hidden" id="selectedUserId"> |
| </div> |
| <div class="form-group"> |
| <label>Role <span class="required">*</span></label> |
| <select id="assignRoleType"> |
| <option value="cheap">Cheap (Limit 500)</option> |
| <option value="premium">Premium (Limit 1500)</option> |
| <option value="vip">VIP (Limit 2500)</option> |
| <option value="supreme">Supreme (Limit 3000)</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label>Custom API Key <span style="color: #666; font-size: 0.85em;">(Optional)</span></label> |
| <input type="text" id="customApiKey" placeholder="Leave empty for current key"> |
| <small>All roles support custom API keys</small> |
| </div> |
| </div> |
| <button onclick="assignUserRole()" class="btn btn-primary"> |
| <i class="fas fa-user-check"></i> Assign Role |
| </button> |
| </div> |
|
|
| <div class="admin-card"> |
| <h3><i class="fas fa-ticket-alt"></i> Create Redeem Code</h3> |
| <div class="form-row"> |
| <div class="form-group"> |
| <label>Type <span class="required">*</span></label> |
| <select id="redeemType"> |
| <option value="limit">Limit Only</option> |
| <option value="premium">Premium Only</option> |
| <option value="both">Both</option> |
| </select> |
| </div> |
| <div class="form-group" id="limitContainer" style="display: none;"> |
| <label>Limit Value</label> |
| <input type="number" id="limitValue" min="0" placeholder="Additional limit"> |
| <small>Optional for Premium Only</small> |
| </div> |
| <div class="form-group" id="codeExpiredContainer" style="display: none;"> |
| <label>Code Expired <span class="required">*</span></label> |
| <input type="datetime-local" id="codeExpired" required> |
| <small>When the code expires</small> |
| </div> |
| <div class="form-group" id="premiumExpiredContainer" style="display: none;"> |
| <label>Premium Expired <span class="required">*</span></label> |
| <input type="datetime-local" id="premiumExpired"> |
| <small>When premium access expires</small> |
| </div> |
| </div> |
| <button onclick="createRedeemCode()" class="btn btn-primary"> |
| <i class="fas fa-plus"></i> Create Code |
| </button> |
| </div> |
|
|
| <div class="admin-card"> |
| <h3><i class="fas fa-chart-pie"></i> System Statistics</h3> |
| <div class="stats-grid"> |
| <div class="stat-item"> |
| <span class="stat-value" id="adminTotalUsers">0</span> |
| <span class="stat-label">Total Users</span> |
| </div> |
| <div class="stat-item"> |
| <span class="stat-value" id="adminTotalRequests">0</span> |
| <span class="stat-label">Total Requests</span> |
| </div> |
| <div class="stat-item"> |
| <span class="stat-value" id="adminTodayRequests">0</span> |
| <span class="stat-label">Today's Requests</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| (function(){ |
| function detectDevTools(){ |
| const threshold = 160; |
| const widthThreshold = window.outerWidth - window.innerWidth > threshold; |
| const heightThreshold = window.outerHeight - window.innerHeight > threshold; |
| if(widthThreshold || heightThreshold) window.location.href = "/denied"; |
| } |
| |
| document.addEventListener("contextmenu", e => e.preventDefault()); |
| document.onkeydown = function(e){ |
| if(e.keyCode === 123 || (e.ctrlKey && e.shiftKey && ['I','C','J'].includes(e.key?.toUpperCase())) || (e.ctrlKey && e.key?.toUpperCase() === 'U')){ |
| e.preventDefault(); |
| window.location.href = "/denied"; |
| } |
| }; |
| |
| setInterval(() => { |
| if(window.eruda) window.location.href = "/denied"; |
| detectDevTools(); |
| try{ |
| console.profile(); |
| console.profileEnd(); |
| }catch(e){} |
| try{ |
| if(console.clear.toString().length > 100) window.location.href = "/denied"; |
| }catch(e){} |
| }, 1000); |
| })(); |
| </script> |
|
|
| <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.8/sweetalert2.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script> |
| <script src="dashboard.js"></script> |
| </body> |
| </html> |
