Spaces:
Sleeping
Sleeping
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: #f5f5f5; | |
| color: #333; | |
| } | |
| .admin-container { | |
| min-height: 100vh; | |
| background: #f5f5f5; | |
| } | |
| /* Header */ | |
| .admin-header { | |
| background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); | |
| color: white; | |
| padding: 1.5rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .header-left h1 { | |
| font-size: 1.8rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| } | |
| .header-left h1 i { | |
| color: #3498db; | |
| margin-right: 10px; | |
| } | |
| .subtitle { | |
| color: #bdc3c7; | |
| font-size: 0.9rem; | |
| } | |
| .header-stats { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .stat-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 0.8rem 1.2rem; | |
| border-radius: 10px; | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .stat-item i { | |
| font-size: 1.5rem; | |
| color: #3498db; | |
| } | |
| .stat-label { | |
| display: block; | |
| font-size: 0.8rem; | |
| color: #bdc3c7; | |
| margin-bottom: 0.2rem; | |
| } | |
| .stat-value { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| color: white; | |
| } | |
| /* Tabs */ | |
| .admin-tabs { | |
| background: white; | |
| padding: 0 2rem; | |
| display: flex; | |
| gap: 0; | |
| border-bottom: 1px solid #e0e0e0; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); | |
| } | |
| .tab-btn { | |
| padding: 1rem 1.5rem; | |
| background: none; | |
| border: none; | |
| font-size: 1rem; | |
| color: #7f8c8d; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| border-bottom: 3px solid transparent; | |
| transition: all 0.3s ease; | |
| } | |
| .tab-btn:hover { | |
| color: #3498db; | |
| background: #f8f9fa; | |
| } | |
| .tab-btn.active { | |
| color: #3498db; | |
| border-bottom-color: #3498db; | |
| font-weight: 600; | |
| } | |
| /* Tab Content */ | |
| .tab-content { | |
| display: none; | |
| padding: 2rem; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .tab-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .tab-header h2 { | |
| font-size: 1.5rem; | |
| color: #2c3e50; | |
| } | |
| .tab-header h2 i { | |
| color: #3498db; | |
| margin-right: 10px; | |
| } | |
| .tab-controls { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| } | |
| .search-box { | |
| display: flex; | |
| align-items: center; | |
| background: white; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| padding: 0.5rem 1rem; | |
| gap: 10px; | |
| min-width: 250px; | |
| } | |
| .search-box i { | |
| color: #95a5a6; | |
| } | |
| .search-box input { | |
| border: none; | |
| outline: none; | |
| width: 100%; | |
| font-size: 0.9rem; | |
| color: #333; | |
| } | |
| .search-box input::placeholder { | |
| color: #95a5a6; | |
| } | |
| .btn { | |
| padding: 0.6rem 1.2rem; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary { | |
| background: #3498db; | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background: #2980b9; | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); | |
| } | |
| .btn-danger { | |
| background: #e74c3c; | |
| color: white; | |
| } | |
| .btn-danger:hover { | |
| background: #c0392b; | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3); | |
| } | |
| .btn-secondary { | |
| background: #95a5a6; | |
| color: white; | |
| } | |
| /* Photos Grid */ | |
| .photos-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 1.5rem; | |
| margin-top: 1rem; | |
| } | |
| .photo-card { | |
| background: white; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| animation: cardAppear 0.5s ease-out; | |
| } | |
| @keyframes cardAppear { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .photo-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); | |
| } | |
| .photo-card.new { | |
| animation: newPhoto 1s ease-out; | |
| } | |
| @keyframes newPhoto { | |
| 0% { transform: scale(0.95); opacity: 0; } | |
| 100% { transform: scale(1); opacity: 1; } | |
| } | |
| .photo-image { | |
| height: 200px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .photo-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.3s ease; | |
| } | |
| .photo-card:hover .photo-image img { | |
| transform: scale(1.05); | |
| } | |
| .photo-badge { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background: rgba(46, 204, 113, 0.9); | |
| color: white; | |
| padding: 0.3rem 0.6rem; | |
| border-radius: 4px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .photo-info { | |
| padding: 1rem; | |
| } | |
| .photo-title { | |
| font-weight: 600; | |
| color: #2c3e50; | |
| margin-bottom: 0.5rem; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| font-size: 0.9rem; | |
| } | |
| .photo-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.8rem; | |
| color: #7f8c8d; | |
| } | |
| .photo-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| padding: 0 1rem 1rem; | |
| } | |
| .action-btn { | |
| flex: 1; | |
| padding: 0.5rem; | |
| border: none; | |
| border-radius: 6px; | |
| font-size: 0.8rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| transition: all 0.3s ease; | |
| } | |
| .action-btn.view { | |
| background: #3498db; | |
| color: white; | |
| } | |
| .action-btn.view:hover { | |
| background: #2980b9; | |
| } | |
| .action-btn.download { | |
| background: #2ecc71; | |
| color: white; | |
| } | |
| .action-btn.download:hover { | |
| background: #27ae60; | |
| } | |
| .action-btn.delete { | |
| background: #e74c3c; | |
| color: white; | |
| } | |
| .action-btn.delete:hover { | |
| background: #c0392b; | |
| } | |
| /* Sessions List */ | |
| .sessions-list { | |
| background: white; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .session-item { | |
| padding: 1rem 1.5rem; | |
| border-bottom: 1px solid #eee; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| transition: background 0.3s ease; | |
| } | |
| .session-item:hover { | |
| background: #f8f9fa; | |
| } | |
| .session-item:last-child { | |
| border-bottom: none; | |
| } | |
| .session-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .session-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: #3498db; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 1.2rem; | |
| } | |
| .session-details h4 { | |
| font-size: 1rem; | |
| color: #2c3e50; | |
| margin-bottom: 0.3rem; | |
| } | |
| .session-details p { | |
| font-size: 0.8rem; | |
| color: #7f8c8d; | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .session-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .status-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: #2ecc71; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .session-count { | |
| background: #f8f9fa; | |
| padding: 0.3rem 0.8rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| color: #3498db; | |
| font-weight: 600; | |
| } | |
| /* Stats Grid */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .stat-card { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .stat-icon { | |
| width: 60px; | |
| height: 60px; | |
| background: #3498db; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 1.5rem; | |
| } | |
| .stat-info h3 { | |
| font-size: 1.8rem; | |
| color: #2c3e50; | |
| margin-bottom: 0.3rem; | |
| } | |
| .stat-info p { | |
| color: #7f8c8d; | |
| font-size: 0.9rem; | |
| } | |
| .charts-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .chart-box { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .chart-box h3 { | |
| font-size: 1.2rem; | |
| color: #2c3e50; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .chart-box h3 i { | |
| color: #3498db; | |
| } | |
| .chart-placeholder { | |
| height: 200px; | |
| background: #f8f9fa; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #95a5a6; | |
| font-size: 0.9rem; | |
| } | |
| /* Loading & No Content */ | |
| .loading, .no-content { | |
| text-align: center; | |
| padding: 3rem; | |
| background: white; | |
| border-radius: 12px; | |
| margin-top: 1rem; | |
| } | |
| .spinner { | |
| border: 4px solid #f3f3f3; | |
| border-top: 4px solid #3498db; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 1rem; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .no-content i { | |
| font-size: 3rem; | |
| color: #bdc3c7; | |
| margin-bottom: 1rem; | |
| } | |
| .no-content h3 { | |
| color: #7f8c8d; | |
| margin-bottom: 0.5rem; | |
| } | |
| .no-content p { | |
| color: #95a5a6; | |
| } | |
| /* Live Indicator */ | |
| .live-indicator { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background: white; | |
| padding: 0.6rem 1rem; | |
| border-radius: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.8rem; | |
| color: #2ecc71; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| border: 1px solid #e0e0e0; | |
| z-index: 100; | |
| } | |
| .live-dot { | |
| width: 8px; | |
| height: 8px; | |
| background: #2ecc71; | |
| border-radius: 50%; | |
| animation: blink 1.5s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.3; } | |
| } | |
| /* Footer */ | |
| .admin-footer { | |
| background: white; | |
| padding: 1rem 2rem; | |
| border-top: 1px solid #e0e0e0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-top: 2rem; | |
| } | |
| .admin-footer p { | |
| color: #7f8c8d; | |
| font-size: 0.9rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .admin-footer p i { | |
| color: #3498db; | |
| } | |
| .footer-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .footer-links a { | |
| color: #3498db; | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .footer-links a:hover { | |
| text-decoration: underline; | |
| } | |
| .separator { | |
| color: #bdc3c7; | |
| } | |
| #serverTime { | |
| font-size: 0.8rem; | |
| color: #95a5a6; | |
| } | |
| /* Modal */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.8); | |
| z-index: 1000; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1rem; | |
| backdrop-filter: blur(5px); | |
| } | |
| .modal.active { | |
| display: flex; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .modal-content { | |
| background: white; | |
| border-radius: 16px; | |
| max-width: 800px; | |
| width: 100%; | |
| max-height: 90vh; | |
| overflow: hidden; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); | |
| animation: modalSlideUp 0.3s ease-out; | |
| } | |
| @keyframes modalSlideUp { | |
| from { transform: translateY(50px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .modal-header { | |
| padding: 1.5rem; | |
| border-bottom: 1px solid #e0e0e0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .modal-header h3 { | |
| font-size: 1.3rem; | |
| color: #2c3e50; | |
| } | |
| .modal-header h3 i { | |
| color: #3498db; | |
| margin-right: 8px; | |
| } | |
| .close-modal { | |
| background: none; | |
| border: none; | |
| font-size: 1.8rem; | |
| color: #95a5a6; | |
| cursor: pointer; | |
| padding: 0; | |
| width: 30px; | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| transition: all 0.3s ease; | |
| } | |
| .close-modal:hover { | |
| background: #f8f9fa; | |
| color: #e74c3c; | |
| } | |
| .modal-body { | |
| padding: 1.5rem; | |
| max-height: calc(90vh - 150px); | |
| overflow-y: auto; | |
| } | |
| .modal-image-container { | |
| margin-bottom: 1.5rem; | |
| } | |
| .modal-image-container img { | |
| width: 100%; | |
| max-height: 400px; | |
| object-fit: contain; | |
| border-radius: 8px; | |
| background: #f8f9fa; | |
| border: 1px solid #e0e0e0; | |
| } | |
| .modal-info { | |
| background: #f8f9fa; | |
| border-radius: 8px; | |
| padding: 1.5rem; | |
| } | |
| .info-row { | |
| display: flex; | |
| margin-bottom: 1rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid #e0e0e0; | |
| } | |
| .info-row:last-child { | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| border-bottom: none; | |
| } | |
| .info-label { | |
| width: 120px; | |
| font-weight: 600; | |
| color: #7f8c8d; | |
| font-size: 0.9rem; | |
| } | |
| .info-value { | |
| flex: 1; | |
| color: #2c3e50; | |
| font-family: 'Courier New', monospace; | |
| font-size: 0.9rem; | |
| word-break: break-all; | |
| } | |
| .modal-footer { | |
| padding: 1.5rem; | |
| border-top: 1px solid #e0e0e0; | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: flex-end; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 1024px) { | |
| .charts-container { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .admin-header { | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| text-align: center; | |
| } | |
| .header-stats { | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .tab-header { | |
| flex-direction: column; | |
| gap: 1rem; | |
| align-items: stretch; | |
| } | |
| .tab-controls { | |
| flex-direction: column; | |
| } | |
| .search-box { | |
| min-width: auto; | |
| } | |
| .photos-grid { | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| } | |
| .admin-footer { | |
| flex-direction: column; | |
| gap: 1rem; | |
| text-align: center; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .photos-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .session-item { | |
| flex-direction: column; | |
| align-items: stretch; | |
| gap: 1rem; | |
| } | |
| .session-status { | |
| justify-content: space-between; | |
| } | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .admin-tabs { | |
| flex-direction: column; | |
| } | |
| .tab-btn { | |
| justify-content: center; | |
| } | |
| } |