Created
July 3, 2025 17:24
-
-
Save kakashi-1337/11621b3420d533c976c0aa859387ed76 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GuiTools Dashboard - Multi-Tool Security Platform</title> | |
| <!-- ProjectDiscovery CSS Files --> | |
| <link rel="stylesheet" href="https://cloud.projectdiscovery.io/_next/static/css/edac949dc43b31dd.css?dpl=dpl_Eam15VfhospDqwe8JSSqsatXPUeE"> | |
| <link rel="stylesheet" href="https://cloud.projectdiscovery.io/_next/static/css/946ce838c0a30211.css?dpl=dpl_Eam15VfhospDqwe8JSSqsatXPUeE"> | |
| <!--link rel="stylesheet" href="resources/css/946ce838c0a30211.css?dpl=dpl_Eam15VfhospDqwe8JSSqsatXPUeE"> | |
| <link rel="stylesheet" href="resources/css/edac949dc43b31dd.css?dpl=dpl_Eam15VfhospDqwe8JSSqsatXPUeE"/--> | |
| <style> | |
| /* Custom overrides and additions for our dashboard */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: #0a0a0b; | |
| color: #e4e4e7; | |
| font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .app-container { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Custom Top Navigation */ | |
| .custom-nav { | |
| background: rgba(10, 10, 11, 0.95); | |
| backdrop-filter: blur(20px); | |
| border-bottom: 1px solid rgba(39, 39, 42, 0.4); | |
| padding: 8px 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .logo-section { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo { | |
| width: 24px; | |
| height: 24px; | |
| background: linear-gradient(135deg, #00f5d4 0%, #00d4aa 100%); | |
| border-radius: 6px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| color: #000; | |
| font-size: 12px; | |
| } | |
| .app-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: #ffffff; | |
| } | |
| .user-section { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| } | |
| .user-btn { | |
| padding: 6px 12px; | |
| background: rgba(39, 39, 42, 0.5); | |
| border: 1px solid rgba(63, 63, 70, 0.5); | |
| border-radius: 4px; | |
| color: #e4e4e7; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 12px; | |
| text-decoration: none; | |
| } | |
| .user-btn:hover { | |
| background: rgba(0, 245, 212, 0.1); | |
| border-color: #00f5d4; | |
| transform: translateY(-1px); | |
| } | |
| /* Main Layout */ | |
| .main-layout { | |
| display: flex; | |
| flex: 1; | |
| min-height: calc(100vh - 120px); | |
| } | |
| /* Sidebar */ | |
| .custom-sidebar { | |
| width: 240px; | |
| background: rgba(17, 17, 18, 0.8); | |
| backdrop-filter: blur(20px); | |
| border-right: 1px solid rgba(39, 39, 42, 0.4); | |
| padding: 16px; | |
| overflow-y: auto; | |
| } | |
| /* Collapsible Menu Sections */ | |
| .nav-section { | |
| margin-bottom: 20px; | |
| } | |
| .nav-title { | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| color: #71717a; | |
| margin-bottom: 8px; | |
| font-weight: 600; | |
| letter-spacing: 0.5px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 4px 0; | |
| transition: all 0.3s ease; | |
| user-select: none; | |
| } | |
| .nav-title:hover { | |
| color: #00f5d4; | |
| } | |
| .nav-title .collapse-icon { | |
| font-size: 10px; | |
| transition: transform 0.3s ease; | |
| } | |
| .nav-section.collapsed .collapse-icon { | |
| transform: rotate(-90deg); | |
| } | |
| .nav-items { | |
| max-height: 500px; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease; | |
| } | |
| .nav-section.collapsed .nav-items { | |
| max-height: 0; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 10px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| margin-bottom: 2px; | |
| color: #a1a1aa; | |
| font-size: 13px; | |
| } | |
| .nav-item:hover { | |
| background: rgba(39, 39, 42, 0.6); | |
| color: #00f5d4; | |
| } | |
| .nav-item.active { | |
| background: rgba(0, 245, 212, 0.1); | |
| border: 1px solid rgba(0, 245, 212, 0.2); | |
| color: #00f5d4; | |
| } | |
| .nav-icon { | |
| width: 14px; | |
| height: 14px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| } | |
| /* Content Area */ | |
| .content-area { | |
| flex: 1; | |
| padding: 20px; | |
| overflow-y: auto; | |
| } | |
| .page-header { | |
| margin-bottom: 20px; | |
| } | |
| .page-title { | |
| font-size: 20px; | |
| font-weight: 600; | |
| color: #ffffff; | |
| margin-bottom: 4px; | |
| } | |
| .page-subtitle { | |
| color: #71717a; | |
| font-size: 13px; | |
| } | |
| /* Tools Grid */ | |
| .tools-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 20px; | |
| } | |
| .tool-card { | |
| background: rgba(39, 39, 42, 0.6); | |
| border: 1px solid rgba(63, 63, 70, 0.3); | |
| border-radius: 8px; | |
| padding: 16px; | |
| transition: all 0.4s ease; | |
| cursor: pointer; | |
| backdrop-filter: blur(20px); | |
| } | |
| .tool-card:hover { | |
| border-color: rgba(0, 245, 212, 0.4); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 32px rgba(0, 245, 212, 0.1); | |
| } | |
| .tool-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 12px; | |
| } | |
| .tool-icon { | |
| width: 32px; | |
| height: 32px; | |
| background: linear-gradient(135deg, #00f5d4 0%, #00d4aa 100%); | |
| border-radius: 6px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 16px; | |
| color: #000; | |
| } | |
| .tool-info h3 { | |
| color: #ffffff; | |
| font-size: 14px; | |
| margin-bottom: 2px; | |
| font-weight: 600; | |
| } | |
| .tool-info p { | |
| color: #71717a; | |
| font-size: 12px; | |
| } | |
| .tool-stats { | |
| display: flex; | |
| gap: 16px; | |
| margin-top: 12px; | |
| } | |
| .stat { | |
| text-align: center; | |
| flex: 1; | |
| } | |
| .stat-value { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: #00f5d4; | |
| } | |
| .stat-label { | |
| font-size: 10px; | |
| color: #71717a; | |
| text-transform: uppercase; | |
| } | |
| /* Tool Detail Forms with Glow Animation */ | |
| .tool-detail { | |
| background: rgba(39, 39, 42, 0.6); | |
| border: 1px solid rgba(63, 63, 70, 0.3); | |
| border-radius: 8px; | |
| padding: 16px; | |
| margin-bottom: 16px; | |
| backdrop-filter: blur(20px); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .tool-detail::before { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| background: linear-gradient(45deg, | |
| transparent, | |
| rgba(0, 245, 212, 0.1), | |
| rgba(59, 130, 246, 0.1), | |
| rgba(168, 85, 247, 0.1), | |
| rgba(236, 72, 153, 0.1), | |
| transparent | |
| ); | |
| border-radius: 8px; | |
| z-index: -1; | |
| animation: borderGlow 3s linear infinite; | |
| } | |
| .tool-detail::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, | |
| transparent, | |
| rgba(0, 245, 212, 0.03), | |
| transparent | |
| ); | |
| animation: shimmer 2s infinite; | |
| } | |
| .tool-controls { | |
| display: flex; | |
| gap: 12px; | |
| margin-bottom: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .input-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| min-width: 160px; | |
| } | |
| .input-label { | |
| color: #e4e4e7; | |
| font-size: 12px; | |
| font-weight: 500; | |
| } | |
| .input-field { | |
| background: rgba(17, 17, 18, 0.8); | |
| border: 1px solid rgba(63, 63, 70, 0.5); | |
| border-radius: 4px; | |
| padding: 8px 10px; | |
| color: #e4e4e7; | |
| font-size: 12px; | |
| transition: all 0.3s ease; | |
| } | |
| .input-field:focus { | |
| outline: none; | |
| border-color: #00f5d4; | |
| box-shadow: 0 0 0 2px rgba(0, 245, 212, 0.1); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #00f5d4, #00d4aa); | |
| color: #000; | |
| border: none; | |
| padding: 8px 16px; | |
| border-radius: 4px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 12px; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 12px rgba(0, 245, 212, 0.3); | |
| } | |
| .results-area { | |
| background: rgba(10, 10, 11, 0.8); | |
| border: 1px solid rgba(63, 63, 70, 0.3); | |
| border-radius: 4px; | |
| padding: 12px; | |
| min-height: 160px; | |
| font-family: 'Courier New', monospace; | |
| font-size: 11px; | |
| color: #e4e4e7; | |
| overflow-y: auto; | |
| } | |
| /* Scan Results Table Styling */ | |
| .scan-results-container { | |
| background: rgba(39, 39, 42, 0.6); | |
| border: 1px solid rgba(63, 63, 70, 0.3); | |
| border-radius: 8px; | |
| padding: 16px; | |
| margin-bottom: 16px; | |
| backdrop-filter: blur(20px); | |
| } | |
| .scan-summary { | |
| background: rgba(17, 17, 18, 0.8); | |
| border-radius: 8px; | |
| padding: 16px; | |
| margin-bottom: 16px; | |
| border-left: 3px solid #00f5d4; | |
| } | |
| .summary-text { | |
| color: #e4e4e7; | |
| font-size: 13px; | |
| margin-bottom: 8px; | |
| } | |
| .severity-indicators { | |
| display: flex; | |
| gap: 16px; | |
| margin-top: 12px; | |
| } | |
| .severity-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 11px; | |
| } | |
| .severity-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| } | |
| .severity-dot.critical { background: #ef4444; } | |
| .severity-dot.high { background: #f97316; } | |
| .severity-dot.medium { background: #eab308; } | |
| .severity-dot.low { background: #3b82f6; } | |
| .severity-dot.unknown { background: #6b7280; } | |
| .scan-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 11px; | |
| } | |
| .scan-table th { | |
| background: rgba(17, 17, 18, 0.6); | |
| color: #71717a; | |
| padding: 10px 8px; | |
| text-align: left; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| border-bottom: 1px solid rgba(63, 63, 70, 0.3); | |
| } | |
| .scan-table td { | |
| padding: 10px 8px; | |
| border-bottom: 1px solid rgba(63, 63, 70, 0.2); | |
| color: #e4e4e7; | |
| } | |
| .scan-table tr:hover { | |
| background: rgba(0, 245, 212, 0.05); | |
| } | |
| .scan-name { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .scan-status { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: #10b981; | |
| } | |
| .severity-breakdown { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .severity-count { | |
| padding: 2px 6px; | |
| border-radius: 10px; | |
| font-size: 9px; | |
| font-weight: 600; | |
| min-width: 16px; | |
| text-align: center; | |
| } | |
| .severity-count.critical { background: rgba(239, 68, 68, 0.2); color: #f87171; } | |
| .severity-count.high { background: rgba(249, 115, 22, 0.2); color: #fb923c; } | |
| .severity-count.medium { background: rgba(234, 179, 8, 0.2); color: #fbbf24; } | |
| .severity-count.low { background: rgba(59, 130, 246, 0.2); color: #60a5fa; } | |
| .severity-count.zero { background: rgba(107, 114, 128, 0.2); color: #9ca3af; } | |
| /* Activity Section */ | |
| .activity-section { | |
| background: rgba(39, 39, 42, 0.6); | |
| border: 1px solid rgba(63, 63, 70, 0.3); | |
| border-radius: 8px; | |
| padding: 16px; | |
| backdrop-filter: blur(20px); | |
| } | |
| .section-title { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: #ffffff; | |
| margin-bottom: 12px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .activity-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .activity-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 8px; | |
| background: rgba(17, 17, 18, 0.6); | |
| border-radius: 4px; | |
| transition: all 0.3s ease; | |
| } | |
| .activity-item:hover { | |
| background: rgba(0, 245, 212, 0.05); | |
| transform: translateX(2px); | |
| } | |
| .activity-dot { | |
| width: 6px; | |
| height: 6px; | |
| background: #00f5d4; | |
| border-radius: 50%; | |
| animation: pulse 2s infinite; | |
| } | |
| .activity-text { | |
| flex: 1; | |
| color: #e4e4e7; | |
| font-size: 12px; | |
| } | |
| .activity-time { | |
| color: #71717a; | |
| font-size: 11px; | |
| } | |
| /* Success/Status Button Colors */ | |
| .status-success { | |
| background: #dc2626 !important; | |
| color: white !important; | |
| } | |
| .status-success:hover { | |
| background: #b91c1c !important; | |
| box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important; | |
| } | |
| /* Nuclei-specific styles */ | |
| .nuclei-header { | |
| text-align: center; | |
| margin-bottom: 24px; | |
| padding: 20px; | |
| } | |
| .nuclei-title { | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| color: #71717a; | |
| margin-bottom: 12px; | |
| letter-spacing: 1px; | |
| } | |
| .nuclei-stats { | |
| display: flex; | |
| justify-content: center; | |
| gap: 32px; | |
| margin-bottom: 24px; | |
| } | |
| .nuclei-stat { | |
| text-align: center; | |
| } | |
| .nuclei-stat-number { | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: #ffffff; | |
| } | |
| .nuclei-stat-label { | |
| font-size: 11px; | |
| color: #71717a; | |
| } | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 16px; | |
| margin-bottom: 20px; | |
| } | |
| .dashboard-card { | |
| background: rgba(39, 39, 42, 0.6); | |
| border: 1px solid rgba(63, 63, 70, 0.3); | |
| border-radius: 8px; | |
| padding: 16px; | |
| backdrop-filter: blur(20px); | |
| transition: all 0.3s ease; | |
| } | |
| .dashboard-card:hover { | |
| border-color: rgba(0, 245, 212, 0.4); | |
| } | |
| .card-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: #ffffff; | |
| margin-bottom: 8px; | |
| } | |
| .card-subtitle { | |
| font-size: 11px; | |
| color: #71717a; | |
| margin-bottom: 12px; | |
| } | |
| .chart-container { | |
| height: 120px; | |
| background: rgba(17, 17, 18, 0.6); | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .area-chart { | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| } | |
| .chart-line { | |
| fill: none; | |
| stroke: #00f5d4; | |
| stroke-width: 2; | |
| opacity: 0.8; | |
| } | |
| .chart-area { | |
| fill: url(#chartGradient); | |
| opacity: 0.3; | |
| } | |
| .toggle-container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-top: 16px; | |
| } | |
| .toggle-switch { | |
| width: 44px; | |
| height: 24px; | |
| background: #00f5d4; | |
| border-radius: 12px; | |
| position: relative; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .toggle-switch.inactive { | |
| background: rgba(63, 63, 70, 0.5); | |
| } | |
| .toggle-handle { | |
| width: 20px; | |
| height: 20px; | |
| background: #ffffff; | |
| border-radius: 50%; | |
| position: absolute; | |
| top: 2px; | |
| right: 2px; | |
| transition: all 0.3s ease; | |
| } | |
| .toggle-switch.inactive .toggle-handle { | |
| right: 22px; | |
| } | |
| .tags-section { | |
| margin-bottom: 20px; | |
| } | |
| .tags-header { | |
| font-size: 10px; | |
| color: #71717a; | |
| margin-bottom: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .tags-grid { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .tag { | |
| padding: 4px 10px; | |
| background: rgba(39, 39, 42, 0.6); | |
| border: 1px solid rgba(63, 63, 70, 0.3); | |
| border-radius: 12px; | |
| color: #e4e4e7; | |
| font-size: 11px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .tag:hover { | |
| background: rgba(0, 245, 212, 0.1); | |
| border-color: #00f5d4; | |
| } | |
| .vuln-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .vuln-card { | |
| background: rgba(39, 39, 42, 0.6); | |
| border: 1px solid rgba(63, 63, 70, 0.3); | |
| border-radius: 8px; | |
| padding: 16px; | |
| transition: all 0.3s ease; | |
| } | |
| .vuln-card:hover { | |
| border-color: rgba(0, 245, 212, 0.4); | |
| } | |
| .vuln-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 8px; | |
| } | |
| .severity-badge { | |
| padding: 2px 8px; | |
| border-radius: 10px; | |
| font-size: 9px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .severity-critical { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: #f87171; | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| } | |
| .severity-medium { | |
| background: rgba(245, 158, 11, 0.2); | |
| color: #fbbf24; | |
| border: 1px solid rgba(245, 158, 11, 0.3); | |
| } | |
| .cve-id { | |
| color: #71717a; | |
| font-family: 'Courier New', monospace; | |
| font-size: 10px; | |
| } | |
| .vuln-title { | |
| color: #ffffff; | |
| font-size: 13px; | |
| font-weight: 600; | |
| margin-bottom: 6px; | |
| } | |
| .vuln-description { | |
| color: #a1a1aa; | |
| line-height: 1.4; | |
| margin-bottom: 12px; | |
| font-size: 11px; | |
| } | |
| .vuln-tags { | |
| display: flex; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| } | |
| .vuln-tag { | |
| padding: 2px 6px; | |
| background: rgba(0, 245, 212, 0.1); | |
| border: 1px solid rgba(0, 245, 212, 0.2); | |
| border-radius: 8px; | |
| color: #00f5d4; | |
| font-size: 9px; | |
| } | |
| /* Assets Overview Styles */ | |
| .assets-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 16px; | |
| margin-bottom: 20px; | |
| } | |
| .asset-card { | |
| background: rgba(39, 39, 42, 0.6); | |
| border: 1px solid rgba(63, 63, 70, 0.3); | |
| border-radius: 8px; | |
| padding: 16px; | |
| backdrop-filter: blur(20px); | |
| } | |
| .asset-number { | |
| font-size: 28px; | |
| font-weight: 700; | |
| color: #ffffff; | |
| margin-bottom: 4px; | |
| } | |
| .asset-label { | |
| font-size: 11px; | |
| color: #71717a; | |
| } | |
| .chart-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 16px; | |
| margin-bottom: 20px; | |
| } | |
| .chart-card { | |
| background: rgba(39, 39, 42, 0.6); | |
| border: 1px solid rgba(63, 63, 70, 0.3); | |
| border-radius: 8px; | |
| padding: 16px; | |
| backdrop-filter: blur(20px); | |
| min-height: 200px; | |
| } | |
| .chart-card-title { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: #ffffff; | |
| margin-bottom: 4px; | |
| } | |
| .chart-card-subtitle { | |
| font-size: 10px; | |
| color: #71717a; | |
| margin-bottom: 16px; | |
| } | |
| .donut-chart { | |
| width: 120px; | |
| height: 120px; | |
| margin: 0 auto; | |
| position: relative; | |
| } | |
| .donut-center { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| text-align: center; | |
| } | |
| .donut-number { | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: #ffffff; | |
| } | |
| .donut-label { | |
| font-size: 9px; | |
| color: #71717a; | |
| } | |
| .no-data { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 120px; | |
| color: #71717a; | |
| font-size: 11px; | |
| } | |
| /* Status Bar */ | |
| .status-bar { | |
| background: rgba(17, 17, 18, 0.95); | |
| backdrop-filter: blur(20px); | |
| border-top: 1px solid rgba(39, 39, 42, 0.4); | |
| padding: 6px 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| position: sticky; | |
| bottom: 0; | |
| z-index: 100; | |
| } | |
| .status-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .status-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 11px; | |
| color: #71717a; | |
| transition: all 0.3s ease; | |
| } | |
| .status-item:hover { | |
| color: #00f5d4; | |
| } | |
| .status-value { | |
| color: #e4e4e7; | |
| font-weight: 600; | |
| margin-left: 2px; | |
| } | |
| .status-bar-chart { | |
| width: 30px; | |
| height: 8px; | |
| background: rgba(63, 63, 70, 0.3); | |
| border-radius: 2px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .status-bar-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #00f5d4, #00d4aa); | |
| border-radius: 2px; | |
| transition: width 0.5s ease; | |
| } | |
| .network-indicator { | |
| display: flex; | |
| gap: 1px; | |
| align-items: end; | |
| } | |
| .network-bar { | |
| width: 2px; | |
| background: #00f5d4; | |
| border-radius: 1px; | |
| animation: networkPulse 2s infinite ease-in-out; | |
| } | |
| .network-bar:nth-child(1) { height: 3px; animation-delay: 0s; } | |
| .network-bar:nth-child(2) { height: 6px; animation-delay: 0.2s; } | |
| .network-bar:nth-child(3) { height: 4px; animation-delay: 0.4s; } | |
| .network-bar:nth-child(4) { height: 8px; animation-delay: 0.6s; } | |
| /* View States */ | |
| .view { | |
| display: none; | |
| } | |
| .view.active { | |
| display: block; | |
| } | |
| /* Mobile Menu */ | |
| .mobile-menu-btn { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: #e4e4e7; | |
| font-size: 18px; | |
| cursor: pointer; | |
| padding: 8px; | |
| border-radius: 4px; | |
| } | |
| .mobile-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.5); | |
| z-index: 40; | |
| display: none; | |
| } | |
| /* Animations */ | |
| @keyframes borderGlow { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| @keyframes shimmer { | |
| 0% { left: -100%; } | |
| 100% { left: 100%; } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| @keyframes networkPulse { | |
| 0%, 100% { | |
| opacity: 0.3; | |
| transform: scaleY(0.5); | |
| } | |
| 50% { | |
| opacity: 1; | |
| transform: scaleY(1); | |
| } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .custom-nav { | |
| padding: 6px 12px; | |
| } | |
| .mobile-menu-btn { | |
| display: block; | |
| } | |
| .custom-sidebar { | |
| position: fixed; | |
| left: -240px; | |
| top: 50px; | |
| height: calc(100vh - 50px); | |
| z-index: 50; | |
| transition: left 0.3s ease; | |
| } | |
| .custom-sidebar.mobile-open { | |
| left: 0; | |
| } | |
| .content-area { | |
| padding: 12px; | |
| margin-left: 0; | |
| } | |
| .main-layout { | |
| flex-direction: column; | |
| } | |
| .tools-grid { | |
| grid-template-columns: 1fr; | |
| gap: 12px; | |
| } | |
| .tool-controls { | |
| flex-direction: column; | |
| } | |
| .input-group { | |
| min-width: auto; | |
| } | |
| .status-bar { | |
| padding: 4px 12px; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .status-group { | |
| gap: 12px; | |
| } | |
| .mobile-overlay.active { | |
| display: block; | |
| } | |
| .page-title { | |
| font-size: 18px; | |
| } | |
| .page-subtitle { | |
| font-size: 12px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Top Navigation --> | |
| <nav class="custom-nav"> | |
| <div class="logo-section"> | |
| <button class="mobile-menu-btn" onclick="toggleMobileMenu()">≡</button> | |
| <div class="logo">◆</div> | |
| <div class="app-title">GuiTools Dashboard</div> | |
| </div> | |
| <div class="user-section"> | |
| <button class="user-btn">Settings</button> | |
| <button class="user-btn">Help</button> | |
| <button class="user-btn">⚡ Pro</button> | |
| </div> | |
| </nav> | |
| <div class="main-layout"> | |
| <!-- Mobile Overlay --> | |
| <div class="mobile-overlay" onclick="toggleMobileMenu()"></div> | |
| <!-- Sidebar --> | |
| <aside class="custom-sidebar" id="sidebar"> | |
| <div class="nav-section"> | |
| <h4 class="nav-title" onclick="toggleSection(this)"> | |
| Overview | |
| <span class="collapse-icon">▼</span> | |
| </h4> | |
| <div class="nav-items"> | |
| <div class="nav-item active" onclick="showView('dashboard')"> | |
| <div class="nav-icon">◆</div> | |
| <span>Dashboard</span> | |
| </div> | |
| <div class="nav-item" onclick="showView('analytics')"> | |
| <div class="nav-icon">▲</div> | |
| <span>Analytics</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="nav-section"> | |
| <h4 class="nav-title" onclick="toggleSection(this)"> | |
| Nuclei | |
| <span class="collapse-icon">▼</span> | |
| </h4> | |
| <div class="nav-items"> | |
| <div class="nav-item" onclick="showView('nuclei-templates')"> | |
| <div class="nav-icon">◉</div> | |
| <span>Templates Feed</span> | |
| </div> | |
| <div class="nav-item" onclick="showView('nuclei-scanner')"> | |
| <div class="nav-icon">◐</div> | |
| <span>Scanner</span> | |
| </div> | |
| <div class="nav-item" onclick="showView('assets-overview')"> | |
| <div class="nav-icon">◆</div> | |
| <span>Assets Overview</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="nav-section"> | |
| <h4 class="nav-title" onclick="toggleSection(this)"> | |
| Security Tools | |
| <span class="collapse-icon">▼</span> | |
| </h4> | |
| <div class="nav-items"> | |
| <div class="nav-item" onclick="showView('network-scanner')"> | |
| <div class="nav-icon">●</div> | |
| <span>Network Scanner</span> | |
| </div> | |
| <div class="nav-item" onclick="showView('port-scanner')"> | |
| <div class="nav-icon">◇</div> | |
| <span>Port Scanner</span> | |
| </div> | |
| <div class="nav-item"> | |
| <div class="nav-icon">■</div> | |
| <span>Vulnerability Scanner</span> | |
| </div> | |
| <div class="nav-item"> | |
| <div class="nav-icon">▼</div> | |
| <span>SSL Checker</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="nav-section"> | |
| <h4 class="nav-title" onclick="toggleSection(this)"> | |
| Development | |
| <span class="collapse-icon">▼</span> | |
| </h4> | |
| <div class="nav-items"> | |
| <div class="nav-item"> | |
| <div class="nav-icon">▶</div> | |
| <span>API Tester</span> | |
| </div> | |
| <div class="nav-item"> | |
| <div class="nav-icon">{ }</div> | |
| <span>JSON Formatter</span> | |
| </div> | |
| <div class="nav-item"> | |
| <div class="nav-icon">64</div> | |
| <span>Base64 Tools</span> | |
| </div> | |
| <div class="nav-item"> | |
| <div class="nav-icon">#</div> | |
| <span>Hash Generator</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="nav-section"> | |
| <h4 class="nav-title" onclick="toggleSection(this)"> | |
| System | |
| <span class="collapse-icon">▼</span> | |
| </h4> | |
| <div class="nav-items"> | |
| <div class="nav-item"> | |
| <div class="nav-icon">⚙</div> | |
| <span>Process Monitor</span> | |
| </div> | |
| <div class="nav-item"> | |
| <div class="nav-icon">□</div> | |
| <span>File Manager</span> | |
| </div> | |
| <div class="nav-item"> | |
| <div class="nav-icon">$</div> | |
| <span>Terminal</span> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="content-area"> | |
| <!-- Dashboard View --> | |
| <div class="view active" id="dashboard"> | |
| <div class="page-header"> | |
| <h1 class="page-title">Dashboard</h1> | |
| <p class="page-subtitle">Quick access to your most used tools and recent activity</p> | |
| </div> | |
| <div class="tools-grid"> | |
| <div class="tool-card" onclick="showView('network-scanner')"> | |
| <div class="tool-header"> | |
| <div class="tool-icon">◉</div> | |
| <div class="tool-info"> | |
| <h3>Network Scanner</h3> | |
| <p>Discover devices on your network</p> | |
| </div> | |
| </div> | |
| <div class="tool-stats"> | |
| <div class="stat"> | |
| <div class="stat-value">247</div> | |
| <div class="stat-label">Scans</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-value">15</div> | |
| <div class="stat-label">Devices</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tool-card" onclick="showView('port-scanner')"> | |
| <div class="tool-header"> | |
| <div class="tool-icon">◈</div> | |
| <div class="tool-info"> | |
| <h3>Port Scanner</h3> | |
| <p>Check open ports and services</p> | |
| </div> | |
| </div> | |
| <div class="tool-stats"> | |
| <div class="stat"> | |
| <div class="stat-value">89</div> | |
| <div class="stat-label">Scans</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-value">12</div> | |
| <div class="stat-label">Open</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tool-card" onclick="showView('nuclei-scanner')"> | |
| <div class="tool-header"> | |
| <div class="tool-icon">◆</div> | |
| <div class="tool-info"> | |
| <h3>Nuclei Scanner</h3> | |
| <p>Vulnerability scanning with templates</p> | |
| </div> | |
| </div> | |
| <div class="tool-stats"> | |
| <div class="stat"> | |
| <div class="stat-value">34</div> | |
| <div class="stat-label">Scans</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-value">3</div> | |
| <div class="stat-label">Issues</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tool-card"> | |
| <div class="tool-header"> | |
| <div class="tool-icon">▲</div> | |
| <div class="tool-info"> | |
| <h3>API Tester</h3> | |
| <p>Test REST APIs and endpoints</p> | |
| </div> | |
| </div> | |
| <div class="tool-stats"> | |
| <div class="stat"> | |
| <div class="stat-value">156</div> | |
| <div class="stat-label">Requests</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-value">94%</div> | |
| <div class="stat-label">Success</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="activity-section"> | |
| <h2 class="section-title">Recent Activity</h2> | |
| <div class="activity-list"> | |
| <div class="activity-item"> | |
| <div class="activity-dot"></div> | |
| <div class="activity-text">Nuclei scan completed on example.com</div> | |
| <div class="activity-time">2 minutes ago</div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-dot"></div> | |
| <div class="activity-text">Port scan found 3 open ports on target</div> | |
| <div class="activity-time">5 minutes ago</div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-dot status-success"></div> | |
| <div class="activity-text">Templates updated - 15 new templates</div> | |
| <div class="activity-time">12 minutes ago</div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-dot"></div> | |
| <div class="activity-text">JSON validation completed successfully</div> | |
| <div class="activity-time">18 minutes ago</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Nuclei Templates Feed View --> | |
| <div class="view" id="nuclei-templates"> | |
| <div class="nuclei-header"> | |
| <div class="nuclei-title">Real-Time Nuclei Templates Feed</div> | |
| <div class="nuclei-stats"> | |
| <div class="nuclei-stat"> | |
| <div class="nuclei-stat-number">10853</div> | |
| <div class="nuclei-stat-label">Templates</div> | |
| </div> | |
| <div class="nuclei-stat"> | |
| <div class="nuclei-stat-number">111</div> | |
| <div class="nuclei-stat-label">In last 30 days</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-grid"> | |
| <div class="dashboard-card"> | |
| <div class="card-title">Template Activity</div> | |
| <div class="card-subtitle">Jun 25 — 7 templates</div> | |
| <div class="chart-container"> | |
| <svg class="area-chart" viewBox="0 0 300 80"> | |
| <defs> | |
| <linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#00f5d4;stop-opacity:0.3" /> | |
| <stop offset="100%" style="stop-color:#00f5d4;stop-opacity:0" /> | |
| </linearGradient> | |
| </defs> | |
| <path class="chart-area" d="M0,60 L30,55 L60,45 L90,50 L120,35 L150,40 L180,25 L210,30 L240,20 L270,25 L300,15 L300,80 L0,80 Z" /> | |
| <path class="chart-line" d="M0,60 L30,55 L60,45 L90,50 L120,35 L150,40 L180,25 L210,30 L240,20 L270,25 L300,15" /> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="dashboard-card"> | |
| <div class="card-title">Real-time AutoScan</div> | |
| <div class="card-subtitle">Automatically scan your infrastructure when new Nuclei templates are released</div> | |
| <div class="toggle-container"> | |
| <div class="toggle-switch" onclick="toggleAutoScan(this)"> | |
| <div class="toggle-handle"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tags-section"> | |
| <h4 class="tags-header">● TOP PRODUCTS</h4> | |
| <div class="tags-grid"> | |
| <div class="tag">Coldfusion</div> | |
| <div class="tag">Experience Manager</div> | |
| <div class="tag">Gitlab</div> | |
| <div class="tag">Rukovoditel</div> | |
| <div class="tag">Xwiki</div> | |
| </div> | |
| </div> | |
| <div class="tags-section"> | |
| <h4 class="tags-header">■ TOP VENDORS</h4> | |
| <div class="tags-grid"> | |
| <div class="tag">Adobe</div> | |
| <div class="tag">Apache</div> | |
| <div class="tag">Atlassian</div> | |
| <div class="tag">Oracle</div> | |
| <div class="tag">Vmware</div> | |
| </div> | |
| </div> | |
| <div class="tags-section"> | |
| <h4 class="tags-header">◆ TYPE</h4> | |
| <div class="tags-grid"> | |
| <div class="tag">XSS</div> | |
| <div class="tag">SQLI</div> | |
| <div class="tag">RCE</div> | |
| <div class="tag">CVE</div> | |
| <div class="tag">KEV</div> | |
| <div class="tag">SSRF</div> | |
| </div> | |
| </div> | |
| <div class="tool-detail"> | |
| <input type="text" class="input-field" placeholder="Search vulnerabilities" style="width: 100%; margin-bottom: 16px;"> | |
| </div> | |
| <div class="vuln-list"> | |
| <div class="vuln-card"> | |
| <div class="vuln-header"> | |
| <div class="severity-badge severity-medium">MEDIUM</div> | |
| <div class="cve-id">CVE-2025-47813</div> | |
| </div> | |
| <h3 class="vuln-title">Wing FTP Server <= 7.4.3 - Path Disclosure via Overlong UID Cookie</h3> | |
| <p class="vuln-description">Wing FTP Server versions prior to 7.4.4 are vulnerable to an authenticated information disclosure vulnerability (CVE-2025-47813). The vulnerability occurs due to improper validation of the 'UID' session cookie in the /login/ok.html... read more</p> | |
| <div class="vuln-tags"> | |
| <div class="vuln-tag">UNRELEASED</div> | |
| <div class="vuln-tag">#FTPSERVER</div> | |
| </div> | |
| </div> | |
| <div class="vuln-card"> | |
| <div class="vuln-header"> | |
| <div class="severity-badge severity-critical">CRITICAL</div> | |
| <div class="cve-id">CVE-2025-47812</div> | |
| </div> | |
| <h3 class="vuln-title">Wing FTP Server <= 7.4.3 - Remote Code Execution</h3> | |
| <p class="vuln-description">Wing FTP Server versions prior to 7.4.4 are vulnerable to an unauthenticated remote code execution (RCE) flaw (CVE-2025-47812). The vulnerability arises from improper NULL byte handling in the 'username' parameter during... read more</p> | |
| <div class="vuln-tags"> | |
| <div class="vuln-tag">UNRELEASED</div> | |
| <div class="vuln-tag">#FTPSERVER</div> | |
| </div> | |
| </div> | |
| <div class="vuln-card"> | |
| <div class="vuln-header"> | |
| <div class="severity-badge severity-critical">CRITICAL</div> | |
| <div class="cve-id">CVE-2024-51978</div> | |
| </div> | |
| <h3 class="vuln-title">Brother Printers - Authentication Bypass via Default Admin Password</h3> | |
| <p class="vuln-description">By leaking a target device's serial number, a remote attacker can generate the target device's default administrator password. The target device may leak its serial number via unauthenticated HTTP, HTTPS, IPP... read more</p> | |
| <div class="vuln-tags"> | |
| <div class="vuln-tag">KEV</div> | |
| <div class="vuln-tag">#BROTHER</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Nuclei Scanner View --> | |
| <!-- Add this button to your dashboard.html for testing --> | |
| <div id="debug-section" style="position: fixed; top: 10px; right: 10px; background: #333; color: white; padding: 10px; border-radius: 5px; z-index: 9999;"> | |
| <h4>Debug Panel</h4> | |
| <button id="debug-test-scan" style="margin: 5px; padding: 5px 10px;">Test Scan</button> | |
| <button id="debug-check-api" style="margin: 5px; padding: 5px 10px;">Check API</button> | |
| <div id="debug-output" style="margin-top: 10px; font-family: monospace; font-size: 12px; max-height: 200px; overflow-y: auto;"></div> | |
| </div> | |
| <script> | |
| // Debug Test Script - Add this to the end of your dashboard.html | |
| document.addEventListener('DOMContentLoaded', function() { | |
| console.log('🧪 Debug panel loaded'); | |
| const debugOutput = document.getElementById('debug-output'); | |
| const logDebug = (message) => { | |
| console.log(message); | |
| if (debugOutput) { | |
| debugOutput.innerHTML += `${new Date().toLocaleTimeString()}: ${message}<br>`; | |
| debugOutput.scrollTop = debugOutput.scrollHeight; | |
| } | |
| }; | |
| // Test API availability | |
| document.getElementById('debug-check-api')?.addEventListener('click', () => { | |
| logDebug('🔍 Checking electronAPI...'); | |
| if (typeof window.electronAPI === 'undefined') { | |
| logDebug('❌ window.electronAPI is undefined'); | |
| return; | |
| } | |
| logDebug('✅ window.electronAPI exists'); | |
| logDebug(`Methods: ${Object.keys(window.electronAPI).join(', ')}`); | |
| // Test a simple call | |
| window.electronAPI.getSystemStats() | |
| .then(stats => { | |
| logDebug(`✅ getSystemStats works: CPU ${stats.cpu}%, RAM ${stats.memory}%`); | |
| }) | |
| .catch(err => { | |
| logDebug(`❌ getSystemStats failed: ${err.message}`); | |
| }); | |
| }); | |
| // Test simple scan | |
| document.getElementById('debug-test-scan')?.addEventListener('click', async () => { | |
| logDebug('🚀 Starting debug test scan...'); | |
| if (!window.electronAPI) { | |
| logDebug('❌ electronAPI not available'); | |
| return; | |
| } | |
| try { | |
| const testOptions = { | |
| target: 'https://httpbin.org', | |
| tags: '', | |
| severity: 'All Severities', | |
| concurrency: 5, | |
| customTemplates: '', | |
| outputFormat: 'jsonl' | |
| }; | |
| logDebug(`📋 Test options: ${JSON.stringify(testOptions)}`); | |
| logDebug('📡 Calling startNucleiScan...'); | |
| const result = await window.electronAPI.startNucleiScan(testOptions); | |
| logDebug(`✅ Scan result: ${JSON.stringify(result)}`); | |
| } catch (error) { | |
| logDebug(`❌ Scan error: ${error.message}`); | |
| logDebug(`Stack: ${error.stack}`); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <div class="view" id="nuclei-scanner"> | |
| <div class="page-header"> | |
| <h1 class="page-title">Nuclei Scanner</h1> | |
| <p class="page-subtitle">Fast and customizable vulnerability scanner powered by community templates</p> | |
| </div> | |
| <div class="tool-detail"> | |
| <div class="tool-controls"> | |
| <div class="input-group"> | |
| <label class="input-label">Target URL/Domain</label> | |
| <input type="text" class="input-field" placeholder="https://example.com" value=""> | |
| </div> | |
| <div class="input-group"> | |
| <label class="input-label">Template Tags</label> | |
| <input type="text" class="input-field" placeholder="cve,rce,sqli" value=""> | |
| </div> | |
| <div class="input-group"> | |
| <label class="input-label">Severity</label> | |
| <select class="input-field"> | |
| <option>All Severities</option> | |
| <option>Critical</option> | |
| <option>High</option> | |
| <option>Medium</option> | |
| <option>Low</option> | |
| </select> | |
| </div> | |
| <div class="input-group"> | |
| <label class="input-label">Concurrency</label> | |
| <input type="number" class="input-field" value="25" min="1" max="100"> | |
| </div> | |
| <div style="display: flex; align-items: end; gap: 8px;"> | |
| <button class="btn-primary" onclick="startNucleiScan()">Start Scan</button> | |
| <button class="user-btn" onclick="updateTemplates()">Update Templates</button> | |
| </div> | |
| </div> | |
| <div class="tool-controls"> | |
| <div class="input-group" style="flex: 1;"> | |
| <label class="input-label">Custom Templates Path</label> | |
| <input type="text" class="input-field" placeholder="/path/to/custom/templates" value=""> | |
| </div> | |
| <div class="input-group"> | |
| <label class="input-label">Output Format</label> | |
| <select class="input-field"> | |
| <option>JSON</option> | |
| <option>YAML</option> | |
| <option>Table</option> | |
| <option>Markdown</option> | |
| </select> | |
| </div> | |
| <div style="display: flex; align-items: end;"> | |
| <button class="user-btn">Load Config</button> | |
| </div> | |
| </div> | |
| <div class="results-area" style="min-height: 300px;"> | |
| <div style="color: #00f5d4; margin-bottom: 12px;">[INF] Current nuclei version: v3.2.8 (latest)</div> | |
| <div style="color: #00f5d4; margin-bottom: 12px;">[INF] Loading templates...</div> | |
| <div>[INF] Templates loaded: 10853</div> | |
| <div>[INF] Targets loaded: 1</div> | |
| <div style="color: #888; margin-top: 12px;">Ready to scan. Click 'Start Scan' to begin vulnerability assessment.</div> | |
| <div style="margin-top: 20px; padding-top: 12px; border-top: 1px solid rgba(63, 63, 70, 0.3);"> | |
| <div style="color: #fbbf24; margin-bottom: 8px;">[WRN] Template statistics:</div> | |
| <div style="margin-left: 12px;"> | |
| <div>Critical: 1,247 templates</div> | |
| <div>High: 2,891 templates</div> | |
| <div>Medium: 4,562 templates</div> | |
| <div>Low: 2,153 templates</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scan Results Container --> | |
| <div class="scan-results-container" style="display: none;" id="scan-results"> | |
| <div class="scan-summary"> | |
| <div class="summary-text">You have <strong>12</strong> open vulnerabilities.</div> | |
| <div class="summary-text"><strong>12 new</strong> in the last 30 days.</div> | |
| <div class="severity-indicators"> | |
| <div class="severity-indicator"> | |
| <div class="severity-dot critical"></div> | |
| <span>0 Critical</span> | |
| </div> | |
| <div class="severity-indicator"> | |
| <div class="severity-dot high"></div> | |
| <span>0 High</span> | |
| </div> | |
| <div class="severity-indicator"> | |
| <div class="severity-dot medium"></div> | |
| <span>0 Medium</span> | |
| </div> | |
| <div class="severity-indicator"> | |
| <div class="severity-dot low"></div> | |
| <span>12 Low</span> | |
| </div> | |
| <div class="severity-indicator"> | |
| <div class="severity-dot unknown"></div> | |
| <span>0 Unknown</span> | |
| </div> | |
| </div> | |
| </div> | |
| <table class="scan-table"> | |
| <thead> | |
| <tr> | |
| <th>SCAN NAME</th> | |
| <th>SEVERITY BREAKDOWN</th> | |
| <th>TEMPLATES</th> | |
| <th>ASSETS</th> | |
| <th>DURATION</th> | |
| <th>LAST UPDATED</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td> | |
| <div class="scan-name"> | |
| <div class="scan-status"></div> | |
| <span>Free monthly scan of example.com</span> | |
| </div> | |
| </td> | |
| <td> | |
| <div class="severity-breakdown"> | |
| <span class="severity-count zero">0</span> | |
| <span class="severity-count zero">0</span> | |
| <span class="severity-count zero">0</span> | |
| <span class="severity-count low">12</span> | |
| <span class="severity-count zero">0</span> | |
| </div> | |
| </td> | |
| <td>5.29k templates</td> | |
| <td>6 assets</td> | |
| <td>7m 37s</td> | |
| <td>2d ago</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="scan-name"> | |
| <div class="scan-status"></div> | |
| <span>Free monthly scan of test.com</span> | |
| </div> | |
| </td> | |
| <td> | |
| <div class="severity-breakdown"> | |
| <span class="severity-count zero">0</span> | |
| <span class="severity-count zero">0</span> | |
| <span class="severity-count zero">0</span> | |
| <span class="severity-count low">10</span> | |
| <span class="severity-count zero">0</span> | |
| </div> | |
| </td> | |
| <td>5.19k templates</td> | |
| <td>6 assets</td> | |
| <td>7m 40s</td> | |
| <td>1mo ago</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Assets Overview View --> | |
| <div class="view" id="assets-overview"> | |
| <div class="page-header"> | |
| <h1 class="page-title">Assets Overview</h1> | |
| <p class="page-subtitle">Exposure insights across all your discovered assets</p> | |
| <button class="btn-primary" style="float: right; margin-top: -40px;">Start Discovery</button> | |
| </div> | |
| <div class="assets-grid"> | |
| <div class="asset-card"> | |
| <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;"> | |
| <span style="color: #71717a;">◆</span> | |
| <span style="color: #ffffff; font-weight: 600; font-size: 12px;">Assets</span> | |
| </div> | |
| <div class="asset-number">13</div> | |
| <div class="asset-label">Unique total assets with internet exposure</div> | |
| </div> | |
| <div class="asset-card"> | |
| <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;"> | |
| <span style="color: #f87171;">●</span> | |
| <span style="color: #ffffff; font-weight: 600; font-size: 12px;">Vulnerabilities</span> | |
| </div> | |
| <div class="asset-number">12</div> | |
| <div class="asset-label">Detected exploitable vulnerabilities</div> | |
| </div> | |
| <div class="asset-card"> | |
| <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;"> | |
| <span style="color: #71717a;">◐</span> | |
| <span style="color: #ffffff; font-weight: 600; font-size: 12px;">Technologies</span> | |
| </div> | |
| <div class="asset-number">3</div> | |
| <div class="asset-label">Unique tech stacks identified across assets</div> | |
| </div> | |
| </div> | |
| <div class="chart-grid"> | |
| <div class="chart-card"> | |
| <div class="chart-card-title">Exposed assets over time</div> | |
| <div class="chart-card-subtitle">Visualizes the number of exposed assets over time</div> | |
| <div class="no-data">No data available</div> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="chart-card-title">Open vulnerabilities over time</div> | |
| <div class="chart-card-subtitle">Visualizes the number of open vulnerabilities over time</div> | |
| <div class="chart-container"> | |
| <svg class="area-chart" viewBox="0 0 200 80"> | |
| <defs> | |
| <linearGradient id="vulnGradient" x1="0%" y1="0%" x2="0%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.3" /> | |
| <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:0" /> | |
| </linearGradient> | |
| </defs> | |
| <path class="chart-area" d="M0,60 L25,55 L50,45 L75,40 L100,35 L125,30 L150,25 L175,20 L200,15 L200,80 L0,80 Z" style="fill: url(#vulnGradient)" /> | |
| <path class="chart-line" d="M0,60 L25,55 L50,45 L75,40 L100,35 L125,30 L150,25 L175,20 L200,15" style="stroke: #3b82f6" /> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="chart-card-title">Exposed technologies over time</div> | |
| <div class="chart-card-subtitle">Visualizes the number of exposed technologies over time</div> | |
| <div class="no-data">No data available</div> | |
| </div> | |
| </div> | |
| <div class="chart-grid"> | |
| <div class="chart-card"> | |
| <div class="chart-card-title">Technology distribution</div> | |
| <div class="chart-card-subtitle">Identifies and categorizes the top 10 technologies</div> | |
| <div class="donut-chart"> | |
| <svg width="120" height="120" viewBox="0 0 120 120"> | |
| <circle cx="60" cy="60" r="40" fill="none" stroke="#00f5d4" stroke-width="20" | |
| stroke-dasharray="125.6 251.2" stroke-dashoffset="0" transform="rotate(-90 60 60)" /> | |
| <circle cx="60" cy="60" r="40" fill="none" stroke="#3b82f6" stroke-width="20" | |
| stroke-dasharray="62.8 314" stroke-dashoffset="-125.6" transform="rotate(-90 60 60)" /> | |
| </svg> | |
| <div class="donut-center"> | |
| <div class="donut-number">3</div> | |
| <div class="donut-label">Unique Technologies</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="chart-card-title">Webserver distribution</div> | |
| <div class="chart-card-subtitle">Analyzes the top 10 types of web servers discovered</div> | |
| <div class="donut-chart"> | |
| <svg width="120" height="120" viewBox="0 0 120 120"> | |
| <circle cx="60" cy="60" r="40" fill="none" stroke="#00f5d4" stroke-width="20" | |
| stroke-dasharray="157 94.2" stroke-dashoffset="0" transform="rotate(-90 60 60)" /> | |
| <circle cx="60" cy="60" r="40" fill="none" stroke="#3b82f6" stroke-width="20" | |
| stroke-dasharray="94.2 157" stroke-dashoffset="-157" transform="rotate(-90 60 60)" /> | |
| </svg> | |
| <div class="donut-center"> | |
| <div class="donut-number">4</div> | |
| <div class="donut-label">Unique Web Servers</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="chart-card-title">Port distribution</div> | |
| <div class="chart-card-subtitle">Highlights the top 10 open ports discovered</div> | |
| <div class="donut-chart"> | |
| <svg width="120" height="120" viewBox="0 0 120 120"> | |
| <circle cx="60" cy="60" r="40" fill="none" stroke="#00f5d4" stroke-width="20" | |
| stroke-dasharray="188.4 62.8" stroke-dashoffset="0" transform="rotate(-90 60 60)" /> | |
| <circle cx="60" cy="60" r="40" fill="none" stroke="#3b82f6" stroke-width="20" | |
| stroke-dasharray="62.8 188.4" stroke-dashoffset="-188.4" transform="rotate(-90 60 60)" /> | |
| </svg> | |
| <div class="donut-center"> | |
| <div class="donut-number">3</div> | |
| <div class="donut-label">Unique Ports</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chart-grid"> | |
| <div class="chart-card"> | |
| <div class="chart-card-title">CNAME distribution</div> | |
| <div class="chart-card-subtitle">Classifies domains by their top 10 respective</div> | |
| <div class="donut-chart"> | |
| <svg width="120" height="120" viewBox="0 0 120 120"> | |
| <circle cx="60" cy="60" r="40" fill="none" stroke="#f87171" stroke-width="20" | |
| stroke-dasharray="75.36 175.84" stroke-dashoffset="0" transform="rotate(-90 60 60)" /> | |
| <circle cx="60" cy="60" r="40" fill="none" stroke="#00f5d4" stroke-width="20" | |
| stroke-dasharray="87.92 163.28" stroke-dashoffset="-75.36" transform="rotate(-90 60 60)" /> | |
| <circle cx="60" cy="60" r="40" fill="none" stroke="#3b82f6" stroke-width="20" | |
| stroke-dasharray="87.92 163.28" stroke-dashoffset="-163.28" transform="rotate(-90 60 60)" /> | |
| </svg> | |
| <div class="donut-center"> | |
| <div class="no-data" style="font-size: 9px;">No data available</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="chart-card-title">Page title distribution</div> | |
| <div class="chart-card-subtitle">Organizes assets based on the top 10 webpage</div> | |
| <div class="donut-chart"> | |
| <svg width="120" height="120" viewBox="0 0 120 120"> | |
| <circle cx="60" cy="60" r="40" fill="none" stroke="#00f5d4" stroke-width="20" | |
| stroke-dasharray="125.6 125.6" stroke-dashoffset="0" transform="rotate(-90 60 60)" /> | |
| <circle cx="60" cy="60" r="40" fill="none" stroke="#3b82f6" stroke-width="20" | |
| stroke-dasharray="125.6 125.6" stroke-dashoffset="-125.6" transform="rotate(-90 60 60)" /> | |
| </svg> | |
| <div class="donut-center"> | |
| <div class="donut-number">3</div> | |
| <div class="donut-label">Unique Titles</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="chart-card-title">Status code distribution</div> | |
| <div class="chart-card-subtitle">Summarizes insights into the top 10 HTTP status</div> | |
| <div class="donut-chart"> | |
| <svg width="120" height="120" viewBox="0 0 120 120"> | |
| <circle cx="60" cy="60" r="40" fill="none" stroke="#00f5d4" stroke-width="20" | |
| stroke-dasharray="188.4 62.8" stroke-dashoffset="0" transform="rotate(-90 60 60)" /> | |
| <circle cx="60" cy="60" r="40" fill="none" stroke="#3b82f6" stroke-width="20" | |
| stroke-dasharray="62.8 188.4" stroke-dashoffset="-188.4" transform="rotate(-90 60 60)" /> | |
| </svg> | |
| <div class="donut-center"> | |
| <div class="donut-number">2</div> | |
| <div class="donut-label">Unique Status Codes</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Network Scanner View --> | |
| <div class="view" id="network-scanner"> | |
| <div class="page-header"> | |
| <h1 class="page-title">Network Scanner</h1> | |
| <p class="page-subtitle">Discover devices and services on your network</p> | |
| </div> | |
| <div class="tool-detail"> | |
| <div class="tool-controls"> | |
| <div class="input-group"> | |
| <label class="input-label">Target Network</label> | |
| <input type="text" class="input-field" placeholder="192.168.1.0/24" value="192.168.1.0/24"> | |
| </div> | |
| <div class="input-group"> | |
| <label class="input-label">Scan Type</label> | |
| <select class="input-field"> | |
| <option>Ping Sweep</option> | |
| <option>TCP Connect</option> | |
| <option>UDP Scan</option> | |
| </select> | |
| </div> | |
| <div class="input-group"> | |
| <label class="input-label">Timeout (ms)</label> | |
| <input type="number" class="input-field" value="1000"> | |
| </div> | |
| <div style="display: flex; align-items: end;"> | |
| <button class="btn-primary">Start Scan</button> | |
| </div> | |
| </div> | |
| <div class="results-area"> | |
| <div style="color: #00f5d4; margin-bottom: 12px;">Scanning 192.168.1.0/24...</div> | |
| <div>192.168.1.1 ✓ Online [Router/Gateway]</div> | |
| <div>192.168.1.10 ✓ Online [Unknown Device]</div> | |
| <div>192.168.1.15 ✓ Online [Windows PC]</div> | |
| <div>192.168.1.25 ✓ Online [MacBook Pro]</div> | |
| <div>192.168.1.50 ✓ Online [Printer]</div> | |
| <div style="color: #71717a; margin-top: 12px;">Scan completed in 2.3 seconds. Found 5 active devices.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Port Scanner View --> | |
| <div class="view" id="port-scanner"> | |
| <div class="page-header"> | |
| <h1 class="page-title">Port Scanner</h1> | |
| <p class="page-subtitle">Check for open ports and running services</p> | |
| </div> | |
| <div class="tool-detail"> | |
| <div class="tool-controls"> | |
| <div class="input-group"> | |
| <label class="input-label">Target Host</label> | |
| <input type="text" class="input-field" placeholder="192.168.1.1" value="example.com"> | |
| </div> | |
| <div class="input-group"> | |
| <label class="input-label">Port Range</label> | |
| <input type="text" class="input-field" placeholder="1-1000" value="1-1000"> | |
| </div> | |
| <div class="input-group"> | |
| <label class="input-label">Scan Type</label> | |
| <select class="input-field"> | |
| <option>TCP Connect</option> | |
| <option>TCP SYN</option> | |
| <option>UDP</option> | |
| </select> | |
| </div> | |
| <div style="display: flex; align-items: end;"> | |
| <button class="btn-primary">Start Scan</button> | |
| </div> | |
| </div> | |
| <div class="results-area"> | |
| <div style="color: #00f5d4; margin-bottom: 12px;">Scanning example.com (ports 1-1000)...</div> | |
| <div>Port 22/tcp ✓ OPEN SSH</div> | |
| <div>Port 80/tcp ✓ OPEN HTTP</div> | |
| <div>Port 443/tcp ✓ OPEN HTTPS</div> | |
| <div>Port 993/tcp ✓ OPEN IMAPS</div> | |
| <div style="color: #666;">Port 21/tcp ✗ CLOSED FTP</div> | |
| <div style="color: #666;">Port 23/tcp ✗ CLOSED Telnet</div> | |
| <div style="color: #71717a; margin-top: 12px;">Scan completed. 4 open ports found out of 1000 scanned.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Analytics View --> | |
| <div class="view" id="analytics"> | |
| <div class="page-header"> | |
| <h1 class="page-title">Analytics</h1> | |
| <p class="page-subtitle">Usage statistics and performance metrics</p> | |
| </div> | |
| <div class="tools-grid"> | |
| <div class="tool-card"> | |
| <div class="tool-header"> | |
| <div class="tool-icon">▲</div> | |
| <div class="tool-info"> | |
| <h3>Tool Usage</h3> | |
| <p>Most frequently used tools</p> | |
| </div> | |
| </div> | |
| <div class="results-area" style="min-height: 120px; background: rgba(17, 17, 18, 0.6);"> | |
| <div>1. Nuclei Scanner - 247 uses</div> | |
| <div>2. Network Scanner - 156 uses</div> | |
| <div>3. Port Scanner - 89 uses</div> | |
| <div>4. Hash Generator - 67 uses</div> | |
| </div> | |
| </div> | |
| <div class="tool-card"> | |
| <div class="tool-header"> | |
| <div class="tool-icon">◐</div> | |
| <div class="tool-info"> | |
| <h3>Performance</h3> | |
| <p>Average execution times</p> | |
| </div> | |
| </div> | |
| <div class="results-area" style="min-height: 120px; background: rgba(17, 17, 18, 0.6);"> | |
| <div>Nuclei Scan: 45.2s avg</div> | |
| <div>Network Scan: 2.3s avg</div> | |
| <div>Port Scan: 15.7s avg</div> | |
| <div>SSL Check: 1.2s avg</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Status Bar --> | |
| <div class="status-bar"> | |
| <div class="status-group"> | |
| <div class="status-item"> | |
| <span>●</span> | |
| <span>Network:</span> | |
| <span class="status-value">24.7 MB/s</span> | |
| <div class="network-indicator"> | |
| <div class="network-bar"></div> | |
| <div class="network-bar"></div> | |
| <div class="network-bar"></div> | |
| <div class="network-bar"></div> | |
| </div> | |
| </div> | |
| <div class="status-item"> | |
| <span>◐</span> | |
| <span>CPU:</span> | |
| <span class="status-value">23%</span> | |
| <div class="status-bar-chart"> | |
| <div class="status-bar-fill" style="width: 23%"></div> | |
| </div> | |
| </div> | |
| <div class="status-item"> | |
| <span>■</span> | |
| <span>RAM:</span> | |
| <span class="status-value">67%</span> | |
| <div class="status-bar-chart"> | |
| <div class="status-bar-fill" style="width: 67%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="status-group"> | |
| <div class="status-item"> | |
| <span>◇</span> | |
| <span>C: 45GB free</span> | |
| </div> | |
| <div class="status-item"> | |
| <span>⚡</span> | |
| <span>Power: AC</span> | |
| </div> | |
| <div class="status-item"> | |
| <span>◷</span> | |
| <span id="current-time">12:34 PM</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function toggleSection(element) { | |
| const section = element.closest('.nav-section'); | |
| section.classList.toggle('collapsed'); | |
| } | |
| function toggleAutoScan(element) { | |
| element.classList.toggle('inactive'); | |
| } | |
| function updateTemplates() { | |
| const resultsArea = document.querySelector('#nuclei-scanner .results-area'); | |
| resultsArea.innerHTML = ` | |
| <div style="color: #00f5d4; margin-bottom: 12px;">[INF] Updating nuclei templates...</div> | |
| <div style="color: #fbbf24;">[WRN] Downloading templates from GitHub...</div> | |
| <div>[INF] Templates downloaded: 10853</div> | |
| <div>[INF] New templates: 15</div> | |
| <div style="color: #00f5d4; margin-top: 12px;">[INF] Templates updated successfully!</div> | |
| `; | |
| } | |
| function startNucleiScan() { | |
| const resultsArea = document.querySelector('#nuclei-scanner .results-area'); | |
| const scanResults = document.getElementById('scan-results'); | |
| const targetInput = document.querySelector('#nuclei-scanner input[placeholder="https://example.com"]'); | |
| const target = targetInput.value || 'https://example.com'; | |
| resultsArea.innerHTML = ` | |
| <div style="color: #00f5d4; margin-bottom: 12px;">[INF] Starting Nuclei scan on ${target}</div> | |
| <div>[INF] Loading templates...</div> | |
| <div>[INF] Templates loaded: 10853</div> | |
| <div>[INF] Starting scan with 25 concurrent threads</div> | |
| <div style="color: #888; margin-top: 12px; animation: pulse 2s infinite;">● Scanning in progress...</div> | |
| `; | |
| // Show scan results after 3 seconds | |
| setTimeout(() => { | |
| resultsArea.innerHTML += ` | |
| <div style="color: #f87171; margin-top: 12px;">[CRITICAL] CVE-2023-12345 detected on ${target}</div> | |
| <div style="color: #fbbf24;">[HIGH] SQL Injection vulnerability found</div> | |
| <div style="color: #fbbf24;">[MEDIUM] Exposed .git directory</div> | |
| <div style="color: #00f5d4; margin-top: 12px;">[INF] Scan completed. 3 vulnerabilities found.</div> | |
| `; | |
| // Show the beautiful scan results table | |
| scanResults.style.display = 'block'; | |
| }, 3000); | |
| } | |
| function showView(viewName) { | |
| // Hide all views | |
| const views = document.querySelectorAll('.view'); | |
| views.forEach(view => view.classList.remove('active')); | |
| // Show selected view | |
| const targetView = document.getElementById(viewName); | |
| if (targetView) { | |
| targetView.classList.add('active'); | |
| } | |
| // Update nav items | |
| const navItems = document.querySelectorAll('.nav-item'); | |
| navItems.forEach(item => item.classList.remove('active')); | |
| // Find and activate the corresponding nav item | |
| const clickedItem = event?.target?.closest?.('.nav-item'); | |
| if (clickedItem) { | |
| clickedItem.classList.add('active'); | |
| } | |
| // Close mobile menu if open | |
| if (window.innerWidth <= 768) { | |
| toggleMobileMenu(); | |
| } | |
| } | |
| function toggleMobileMenu() { | |
| const sidebar = document.getElementById('sidebar'); | |
| const overlay = document.querySelector('.mobile-overlay'); | |
| sidebar.classList.toggle('mobile-open'); | |
| overlay.classList.toggle('active'); | |
| } | |
| // Update time | |
| function updateTime() { | |
| const now = new Date(); | |
| const timeString = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); | |
| document.getElementById('current-time').textContent = timeString; | |
| } | |
| // Update system stats | |
| function updateSystemStats() { | |
| // Simulate real-time CPU usage | |
| const cpuElement = document.querySelector('.status-item:nth-child(2) .status-value'); | |
| const cpuBar = document.querySelector('.status-item:nth-child(2) .status-bar-fill'); | |
| const newCpu = Math.floor(Math.random() * 40) + 10; | |
| cpuElement.textContent = newCpu + '%'; | |
| cpuBar.style.width = newCpu + '%'; | |
| // Simulate network activity | |
| const networkElement = document.querySelector('.status-item:nth-child(1) .status-value'); | |
| const newNetwork = (Math.random() * 50 + 5).toFixed(1); | |
| networkElement.textContent = newNetwork + ' MB/s'; | |
| // Simulate RAM usage | |
| const ramElement = document.querySelector('.status-item:nth-child(3) .status-value'); | |
| const ramBar = document.querySelector('.status-item:nth-child(3) .status-bar-fill'); | |
| const newRam = Math.floor(Math.random() * 30) + 50; | |
| ramElement.textContent = newRam + '%'; | |
| ramBar.style.width = newRam + '%'; | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| updateTime(); | |
| setInterval(updateTime, 1000); | |
| setInterval(updateSystemStats, 3000); | |
| // Close mobile menu when clicking outside | |
| document.addEventListener('click', function(e) { | |
| const sidebar = document.getElementById('sidebar'); | |
| const mobileBtn = document.querySelector('.mobile-menu-btn'); | |
| if (window.innerWidth <= 768 && | |
| !sidebar.contains(e.target) && | |
| !mobileBtn.contains(e.target) && | |
| sidebar.classList.contains('mobile-open')) { | |
| toggleMobileMenu(); | |
| } | |
| }); | |
| }); | |
| // Handle window resize | |
| window.addEventListener('resize', function() { | |
| if (window.innerWidth > 768) { | |
| const sidebar = document.getElementById('sidebar'); | |
| const overlay = document.querySelector('.mobile-overlay'); | |
| sidebar.classList.remove('mobile-open'); | |
| overlay.classList.remove('active'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment