Spaces:
Sleeping
Sleeping
| /* Reset and Base Styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --bg-primary: linear-gradient(135deg, #F5F5F7, #FAF9F6); | |
| --bg-secondary: rgba(255, 255, 255, 0.6); | |
| --bg-card: rgba(255, 255, 255, 0.9); | |
| --bg-hover: rgba(255, 255, 255, 0.95); | |
| --text-primary: #1a1a2e; | |
| --text-secondary: #2d2d4a; | |
| --accent-purple: #8B5CF6; | |
| --accent-blue: #3B82F6; | |
| --accent-cyan: #06B6D4; | |
| --accent-pink: #EC4899; | |
| --accent-green: #10B981; | |
| --accent-red: #EF4444; | |
| --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); | |
| --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| --shadow-card: 0 8px 32px 0 rgba(31, 38, 135, 0.1); | |
| --shadow-glow: 0 8px 32px 0 rgba(102, 126, 234, 0.3); | |
| --border-radius: 16px; | |
| --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| } | |
| /* App Container */ | |
| .app-container { | |
| display: flex; | |
| min-height: 100vh; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| width: 260px; | |
| background: var(--bg-secondary); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| padding: 20px; | |
| border-right: 1px solid rgba(255, 255, 255, 0.3); | |
| position: fixed; | |
| height: 100vh; | |
| overflow-y: auto; | |
| box-shadow: var(--shadow-card); | |
| } | |
| .sidebar-header { | |
| margin-bottom: 40px; | |
| } | |
| .sidebar-header h2 { | |
| font-size: 24px; | |
| font-weight: 700; | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 5px; | |
| } | |
| .sidebar-header .highlight { | |
| font-weight: 300; | |
| } | |
| .sidebar-header p { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .sidebar-nav { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 16px; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| border-radius: var(--border-radius); | |
| transition: var(--transition); | |
| font-size: 14px; | |
| } | |
| .nav-item:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| transform: translateX(5px); | |
| } | |
| .nav-item.active { | |
| background: var(--gradient-primary); | |
| color: var(--text-primary); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .nav-icon { | |
| font-size: 18px; | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| flex: 1; | |
| margin-left: 260px; | |
| padding: 0; | |
| } | |
| /* Navbar */ | |
| .navbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px 30px; | |
| background: var(--bg-secondary); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.3); | |
| box-shadow: var(--shadow-card); | |
| } | |
| .navbar-left, | |
| .navbar-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .search-bar { | |
| position: relative; | |
| } | |
| .search-bar input { | |
| background: rgba(255, 255, 255, 0.6); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| border-radius: var(--border-radius); | |
| padding: 10px 40px 10px 16px; | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| width: 300px; | |
| transition: var(--transition); | |
| } | |
| .search-bar input:focus { | |
| outline: none; | |
| border-color: var(--accent-purple); | |
| box-shadow: var(--shadow-glow); | |
| background: rgba(255, 255, 255, 0.9); | |
| } | |
| .search-icon { | |
| position: absolute; | |
| right: 12px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| font-size: 16px; | |
| } | |
| .theme-toggle { | |
| background: var(--bg-card); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--border-radius); | |
| padding: 10px; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .theme-toggle:hover { | |
| background: var(--bg-hover); | |
| transform: rotate(180deg); | |
| } | |
| .user-profile { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .user-avatar { | |
| font-size: 24px; | |
| } | |
| .user-name { | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| /* Dashboard Content */ | |
| .dashboard-content { | |
| padding: 30px; | |
| } | |
| /* KPI Grid */ | |
| .kpi-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .kpi-card { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-radius: var(--border-radius); | |
| padding: 24px; | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| box-shadow: var(--shadow-card); | |
| transition: var(--transition); | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| } | |
| .kpi-card:hover { | |
| transform: translateY(-8px) scale(1.02); | |
| box-shadow: var(--shadow-glow); | |
| border-color: var(--accent-purple); | |
| } | |
| .kpi-card.anomaly { | |
| background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%); | |
| border-color: var(--accent-red); | |
| } | |
| .kpi-icon { | |
| font-size: 40px; | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--gradient-primary); | |
| border-radius: 12px; | |
| } | |
| .kpi-card.anomaly .kpi-icon { | |
| background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-pink) 100%); | |
| } | |
| .kpi-info h3 { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| margin-bottom: 8px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .kpi-value { | |
| font-size: 28px; | |
| font-weight: 700; | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 4px; | |
| line-height: 1.2; | |
| } | |
| .kpi-card.anomaly .kpi-value { | |
| background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-pink) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .kpi-label { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| /* Charts Grid */ | |
| .charts-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .chart-card { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-radius: var(--border-radius); | |
| padding: 24px; | |
| box-shadow: var(--shadow-card); | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| transition: var(--transition); | |
| } | |
| .chart-card:hover { | |
| transform: translateY(-5px) scale(1.01); | |
| border-color: var(--accent-purple); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .chart-card.large { | |
| grid-column: span 2; | |
| } | |
| .chart-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .chart-header h3 { | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .btn-refresh { | |
| background: var(--bg-hover); | |
| border: none; | |
| border-radius: 8px; | |
| padding: 8px 12px; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-size: 14px; | |
| } | |
| .btn-refresh:hover { | |
| background: var(--accent-purple); | |
| transform: rotate(180deg); | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| } | |
| /* Anomalies Section */ | |
| .anomalies-section { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-radius: var(--border-radius); | |
| padding: 24px; | |
| box-shadow: var(--shadow-card); | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| margin-bottom: 30px; | |
| transition: var(--transition); | |
| } | |
| .anomalies-section:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 24px; | |
| gap: 16px; | |
| } | |
| .section-header h3 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| letter-spacing: 0.3px; | |
| } | |
| .section-actions { | |
| display: flex; | |
| gap: 12px; | |
| align-items: center; | |
| } | |
| .filter-select { | |
| background: rgba(255, 255, 255, 0.6); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| border-radius: 8px; | |
| padding: 8px 12px; | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .filter-select:hover, | |
| .filter-select:focus { | |
| border-color: var(--accent-purple); | |
| outline: none; | |
| background: rgba(255, 255, 255, 0.9); | |
| } | |
| .table-container { | |
| overflow-x: auto; | |
| } | |
| .anomalies-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .anomalies-table th { | |
| text-align: left; | |
| padding: 12px 16px; | |
| background: rgba(255, 255, 255, 0.5); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| color: var(--text-secondary); | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .anomalies-table td { | |
| padding: 12px 16px; | |
| border-bottom: 1px solid rgba(102, 126, 234, 0.15); | |
| font-size: 14px; | |
| color: var(--text-primary); | |
| } | |
| .anomalies-table tr:hover { | |
| background: rgba(255, 255, 255, 0.8); | |
| } | |
| .anomalies-table .no-data { | |
| text-align: center; | |
| color: var(--text-secondary); | |
| padding: 40px; | |
| } | |
| .status-badge { | |
| display: inline-block; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| } | |
| .status-badge.anomalous { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: var(--accent-red); | |
| border: 1px solid var(--accent-red); | |
| } | |
| .status-badge.normal { | |
| background: rgba(16, 185, 129, 0.2); | |
| color: var(--accent-green); | |
| border: 1px solid var(--accent-green); | |
| } | |
| /* Model Controls */ | |
| .model-controls { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-radius: var(--border-radius); | |
| padding: 24px; | |
| box-shadow: var(--shadow-card); | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| transition: var(--transition); | |
| } | |
| .model-controls:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .control-card h3 { | |
| font-size: 16px; | |
| font-weight: 600; | |
| margin-bottom: 20px; | |
| } | |
| .control-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| margin-bottom: 16px; | |
| } | |
| .control-row label { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| min-width: 100px; | |
| } | |
| .control-row select, | |
| .control-row input[type="range"] { | |
| flex: 1; | |
| background: rgba(255, 255, 255, 0.6); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| border-radius: 8px; | |
| padding: 8px 12px; | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| } | |
| .control-row span { | |
| font-size: 14px; | |
| color: var(--accent-cyan); | |
| min-width: 40px; | |
| } | |
| .control-buttons { | |
| display: flex; | |
| gap: 12px; | |
| margin-top: 20px; | |
| } | |
| .btn-primary { | |
| background: var(--gradient-primary); | |
| border: none; | |
| border-radius: 8px; | |
| padding: 12px 24px; | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 0 30px rgba(139, 92, 246, 0.5); | |
| } | |
| .btn-secondary { | |
| background: rgba(255, 255, 255, 0.6); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| border-radius: 8px; | |
| padding: 12px 24px; | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--accent-blue); | |
| border-color: var(--accent-blue); | |
| } | |
| /* Upload Page Styles */ | |
| .upload-content { | |
| padding: 30px; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .upload-section { | |
| margin-bottom: 40px; | |
| } | |
| .upload-header { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| } | |
| .upload-header h2 { | |
| font-size: 28px; | |
| font-weight: 700; | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 10px; | |
| } | |
| .upload-header p { | |
| color: var(--text-secondary); | |
| font-size: 16px; | |
| } | |
| .upload-card { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-radius: var(--border-radius); | |
| padding: 40px; | |
| box-shadow: var(--shadow-card); | |
| border: 2px dashed rgba(102, 126, 234, 0.3); | |
| transition: var(--transition); | |
| } | |
| .upload-card:hover { | |
| border-color: var(--accent-purple); | |
| transform: scale(1.02); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .upload-area { | |
| text-align: center; | |
| } | |
| .upload-icon { | |
| font-size: 64px; | |
| margin-bottom: 20px; | |
| } | |
| .upload-area h3 { | |
| font-size: 18px; | |
| margin-bottom: 10px; | |
| } | |
| .upload-area p { | |
| color: var(--text-secondary); | |
| margin-bottom: 20px; | |
| } | |
| .upload-area input[type="file"] { | |
| cursor: pointer; | |
| } | |
| .upload-hint { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| margin-top: 10px; | |
| } | |
| .upload-info { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px; | |
| background: rgba(255, 255, 255, 0.6); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border-radius: 8px; | |
| margin-top: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| } | |
| .file-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .file-icon { | |
| font-size: 32px; | |
| } | |
| .file-name { | |
| font-weight: 500; | |
| margin-bottom: 4px; | |
| } | |
| .file-size { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .btn-remove { | |
| background: var(--accent-red); | |
| border: none; | |
| border-radius: 8px; | |
| padding: 8px 12px; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .btn-remove:hover { | |
| background: var(--accent-pink); | |
| } | |
| .upload-progress { | |
| margin-top: 20px; | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| background: var(--bg-hover); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-bottom: 10px; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: var(--gradient-primary); | |
| width: 0%; | |
| transition: width 0.3s ease; | |
| } | |
| .progress-text { | |
| text-align: center; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| .upload-success { | |
| text-align: center; | |
| padding: 40px; | |
| } | |
| .success-icon { | |
| font-size: 64px; | |
| margin-bottom: 20px; | |
| animation: successPulse 0.5s ease; | |
| } | |
| @keyframes successPulse { | |
| 0% { transform: scale(0); } | |
| 50% { transform: scale(1.2); } | |
| 100% { transform: scale(1); } | |
| } | |
| .upload-success h3 { | |
| font-size: 20px; | |
| margin-bottom: 20px; | |
| color: var(--accent-green); | |
| } | |
| .success-stats { | |
| display: flex; | |
| justify-content: center; | |
| gap: 40px; | |
| margin-bottom: 30px; | |
| } | |
| .stat-item { | |
| text-align: center; | |
| } | |
| .stat-value { | |
| font-size: 32px; | |
| font-weight: 700; | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 4px; | |
| } | |
| .stat-label { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .sample-data-section { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-radius: var(--border-radius); | |
| padding: 24px; | |
| box-shadow: var(--shadow-card); | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| transition: var(--transition); | |
| } | |
| .sample-data-section:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .sample-data-section .section-header { | |
| margin-bottom: 20px; | |
| } | |
| .sample-data-section h3 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| } | |
| .sample-data-section p { | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| .format-table table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .format-table th, | |
| .format-table td { | |
| padding: 12px; | |
| text-align: left; | |
| border-bottom: 1px solid rgba(102, 126, 234, 0.15); | |
| } | |
| .format-table th { | |
| background: rgba(255, 255, 255, 0.5); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| color: var(--text-secondary); | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .format-table td { | |
| font-size: 14px; | |
| color: var(--text-primary); | |
| } | |
| .sample-download { | |
| margin-top: 20px; | |
| text-align: center; | |
| } | |
| .sample-download a { | |
| color: var(--accent-cyan); | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .sample-download a:hover { | |
| color: var(--accent-purple); | |
| text-decoration: underline; | |
| } | |
| /* Analytics Page Styles */ | |
| .analytics-content { | |
| padding: 30px; | |
| } | |
| .filters-section { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-radius: var(--border-radius); | |
| padding: 20px; | |
| margin-bottom: 30px; | |
| display: flex; | |
| gap: 20px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| box-shadow: var(--shadow-card); | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| transition: var(--transition); | |
| } | |
| .filters-section:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .filter-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .filter-group label { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| .filter-group input, | |
| .filter-group select { | |
| background: rgba(255, 255, 255, 0.6); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| border-radius: 8px; | |
| padding: 8px 12px; | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| } | |
| .analytics-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .stats-section { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-radius: var(--border-radius); | |
| padding: 24px; | |
| box-shadow: var(--shadow-card); | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| transition: var(--transition); | |
| } | |
| .stats-section:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| } | |
| .stat-card { | |
| background: rgba(255, 255, 255, 0.6); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border-radius: 8px; | |
| padding: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| transition: var(--transition); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .stat-card h4 { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| margin-bottom: 8px; | |
| text-transform: uppercase; | |
| } | |
| .stat-card .stat-value { | |
| font-size: 24px; | |
| font-weight: 700; | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 4px; | |
| } | |
| .stat-change { | |
| font-size: 12px; | |
| color: var(--accent-green); | |
| } | |
| .stat-change.positive { | |
| color: var(--accent-green); | |
| } | |
| .stat-change.negative { | |
| color: var(--accent-red); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 1200px) { | |
| .charts-grid, | |
| .analytics-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .chart-card.large { | |
| grid-column: span 1; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| z-index: 1000; | |
| } | |
| .main-content { | |
| margin-left: 0; | |
| } | |
| .kpi-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .navbar { | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .search-bar input { | |
| width: 100%; | |
| } | |
| .filters-section { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .section-actions { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| } | |
| /* Animations */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes slideInLeft { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes slideInRight { | |
| from { | |
| opacity: 0; | |
| transform: translateX(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| @keyframes shimmer { | |
| 0% { | |
| background-position: -1000px 0; | |
| } | |
| 100% { | |
| background-position: 1000px 0; | |
| } | |
| } | |
| @keyframes glow { | |
| 0%, 100% { | |
| box-shadow: var(--shadow-card); | |
| } | |
| 50% { | |
| box-shadow: var(--shadow-glow); | |
| } | |
| } | |
| .kpi-card, | |
| .chart-card, | |
| .anomalies-section, | |
| .model-controls { | |
| animation: fadeIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| } | |
| .kpi-card:nth-child(1) { animation-delay: 0.1s; } | |
| .kpi-card:nth-child(2) { animation-delay: 0.2s; } | |
| .kpi-card:nth-child(3) { animation-delay: 0.3s; } | |
| .kpi-card:nth-child(4) { animation-delay: 0.4s; } | |
| .chart-card:nth-child(1) { animation: slideInLeft 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } | |
| .chart-card:nth-child(2) { animation: slideInRight 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } | |
| .sidebar { | |
| animation: slideInLeft 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| } | |
| .navbar { | |
| animation: fadeIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| } | |
| .upload-card { | |
| animation: fadeIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| } | |
| .kpi-icon { | |
| animation: pulse 3s ease-in-out infinite; | |
| } | |
| .upload-icon { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .btn-primary { | |
| animation: glow 3s ease-in-out infinite; | |
| } | |
| /* Scrollbar Styling */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(255, 255, 255, 0.3); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--accent-purple); | |
| } | |
| /* About Me Modal */ | |
| .about-modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 1000; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(5px); | |
| -webkit-backdrop-filter: blur(5px); | |
| align-items: center; | |
| justify-content: center; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .about-modal-content { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-radius: var(--border-radius); | |
| padding: 0; | |
| max-width: 500px; | |
| width: 90%; | |
| box-shadow: var(--shadow-card); | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| animation: slideInUp 0.3s ease; | |
| } | |
| @keyframes slideInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .about-modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px 24px; | |
| border-bottom: 1px solid rgba(102, 126, 234, 0.15); | |
| } | |
| .about-modal-header h2 { | |
| font-size: 20px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin: 0; | |
| } | |
| .close-modal { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| padding: 4px; | |
| border-radius: 8px; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .close-modal:hover { | |
| background: rgba(102, 126, 234, 0.1); | |
| color: var(--text-primary); | |
| } | |
| .about-modal-body { | |
| padding: 32px 24px; | |
| text-align: center; | |
| } | |
| .about-avatar { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 100px; | |
| height: 100px; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| border-radius: 50%; | |
| margin-bottom: 20px; | |
| color: white; | |
| } | |
| .about-name { | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 8px; | |
| } | |
| .about-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--accent-purple); | |
| margin-bottom: 16px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .about-description { | |
| font-size: 15px; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| margin-bottom: 24px; | |
| } | |
| .about-links { | |
| display: flex; | |
| gap: 12px; | |
| justify-content: center; | |
| } | |
| .about-link { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px 20px; | |
| background: rgba(255, 255, 255, 0.6); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(102, 126, 234, 0.3); | |
| border-radius: 10px; | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| font-size: 14px; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .about-link:hover { | |
| background: rgba(102, 126, 234, 0.1); | |
| border-color: var(--accent-purple); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-glow); | |
| } | |