""" Meetings Module - CSS Styles and Icons. Enthält: - BREAKPILOT_STYLES: CSS-Stile für das Meeting-Frontend - ICONS: SVG-Icon-Definitionen """ BREAKPILOT_STYLES = """ :root { --bp-primary: #6C1B1B; --bp-primary-soft: rgba(108, 27, 27, 0.1); --bp-bg: #F8F8F8; --bp-surface: #FFFFFF; --bp-surface-elevated: #FFFFFF; --bp-border: #E0E0E0; --bp-border-subtle: rgba(108, 27, 27, 0.15); --bp-accent: #5ABF60; --bp-accent-soft: rgba(90, 191, 96, 0.15); --bp-text: #4A4A4A; --bp-text-muted: #6B6B6B; --bp-danger: #ef4444; --bp-warning: #F1C40F; --bp-info: #3b82f6; --bp-gold: #F1C40F; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Manrope', system-ui, -apple-system, sans-serif; background: var(--bp-bg); color: var(--bp-text); min-height: 100vh; } /* Layout */ .app-container { display: flex; min-height: 100vh; } /* Sidebar */ .sidebar { width: 260px; background: var(--bp-surface); border-right: 1px solid var(--bp-border); padding: 1.5rem; display: flex; flex-direction: column; flex-shrink: 0; } .logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; } .logo-icon { width: 36px; height: 36px; background: var(--bp-primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; } .logo-text { font-size: 1.25rem; font-weight: 700; color: var(--bp-primary); } .nav-section { margin-bottom: 1.5rem; } .nav-section-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--bp-text-muted); margin-bottom: 0.75rem; padding-left: 0.75rem; } .nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 8px; cursor: pointer; transition: all 0.2s; color: var(--bp-text); text-decoration: none; } .nav-item:hover { background: var(--bp-primary-soft); } .nav-item.active { background: var(--bp-primary); color: white; } .nav-item svg { width: 20px; height: 20px; } /* Main Content */ .main-content { flex: 1; padding: 2rem; overflow-y: auto; } .page-header { margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: flex-start; } .page-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; } .page-subtitle { color: var(--bp-text-muted); } /* Dashboard Grid */ .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } /* Cards */ .card { background: var(--bp-surface); border-radius: 12px; border: 1px solid var(--bp-border); padding: 1.5rem; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .card-title { font-size: 1rem; font-weight: 600; } .card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .card-icon.primary { background: var(--bp-primary-soft); color: var(--bp-primary); } .card-icon.accent { background: var(--bp-accent-soft); color: var(--bp-accent); } .card-icon.warning { background: rgba(241, 196, 15, 0.15); color: var(--bp-warning); } .card-icon.info { background: rgba(59, 130, 246, 0.15); color: var(--bp-info); } .card-icon.danger { background: rgba(239, 68, 68, 0.15); color: var(--bp-danger); } .stat-value { font-size: 2rem; font-weight: 700; margin-bottom: 0.25rem; } .stat-label { color: var(--bp-text-muted); font-size: 0.875rem; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: 8px; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: all 0.2s; border: none; text-decoration: none; } .btn-primary { background: var(--bp-primary); color: white; } .btn-primary:hover { background: #5a1717; } .btn-accent { background: var(--bp-accent); color: white; } .btn-accent:hover { background: #4aa850; } .btn-secondary { background: var(--bp-bg); color: var(--bp-text); border: 1px solid var(--bp-border); } .btn-secondary:hover { background: var(--bp-border); } .btn-danger { background: var(--bp-danger); color: white; } .btn-danger:hover { background: #dc2626; } .btn-icon { padding: 0.5rem; border-radius: 8px; background: transparent; border: 1px solid var(--bp-border); cursor: pointer; color: var(--bp-text); } .btn-icon:hover { background: var(--bp-primary-soft); color: var(--bp-primary); } .btn-group { display: flex; gap: 0.5rem; } /* Meeting List */ .meeting-list { display: flex; flex-direction: column; gap: 1rem; } .meeting-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: 10px; transition: all 0.2s; } .meeting-item:hover { border-color: var(--bp-primary); box-shadow: 0 2px 8px rgba(108, 27, 27, 0.1); } .meeting-time { text-align: center; min-width: 70px; } .meeting-time-value { font-size: 1.25rem; font-weight: 700; color: var(--bp-primary); } .meeting-time-date { font-size: 0.75rem; color: var(--bp-text-muted); } .meeting-info { flex: 1; } .meeting-title { font-weight: 600; margin-bottom: 0.25rem; } .meeting-meta { display: flex; gap: 1rem; font-size: 0.875rem; color: var(--bp-text-muted); } .meeting-meta span { display: flex; align-items: center; gap: 0.25rem; } .meeting-actions { display: flex; gap: 0.5rem; } .meeting-badge { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; } .badge-live { background: var(--bp-danger); color: white; animation: pulse 2s infinite; } .badge-scheduled { background: var(--bp-info); color: white; } .badge-ended { background: var(--bp-border); color: var(--bp-text-muted); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* Video Container */ .video-container { background: #1a1a1a; border-radius: 12px; overflow: hidden; position: relative; aspect-ratio: 16/9; margin-bottom: 1.5rem; } .video-container iframe { width: 100%; height: 100%; border: none; } .video-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #888; } .video-placeholder svg { width: 64px; height: 64px; margin-bottom: 1rem; opacity: 0.5; } /* Meeting Controls */ .meeting-controls { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; } .control-btn { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .control-btn svg { width: 24px; height: 24px; } .control-btn.active { background: var(--bp-primary); color: white; } .control-btn.inactive { background: var(--bp-bg); color: var(--bp-text); } .control-btn.danger { background: var(--bp-danger); color: white; } .control-btn:hover { transform: scale(1.1); } /* Participants Panel */ .participants-panel { background: var(--bp-surface); border-radius: 12px; border: 1px solid var(--bp-border); padding: 1rem; max-height: 400px; overflow-y: auto; } .participant-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 8px; margin-bottom: 0.5rem; } .participant-item:hover { background: var(--bp-bg); } .participant-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bp-primary-soft); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--bp-primary); } .participant-info { flex: 1; } .participant-name { font-weight: 600; font-size: 0.875rem; } .participant-role { font-size: 0.75rem; color: var(--bp-text-muted); } .participant-status { display: flex; gap: 0.5rem; } .status-indicator { width: 8px; height: 8px; border-radius: 50%; } .status-indicator.mic-on { background: var(--bp-accent); } .status-indicator.mic-off { background: var(--bp-danger); } .status-indicator.video-on { background: var(--bp-accent); } .status-indicator.video-off { background: var(--bp-danger); } /* Chat Panel */ .chat-panel { background: var(--bp-surface); border-radius: 12px; border: 1px solid var(--bp-border); display: flex; flex-direction: column; height: 400px; } .chat-header { padding: 1rem; border-bottom: 1px solid var(--bp-border); font-weight: 600; } .chat-messages { flex: 1; padding: 1rem; overflow-y: auto; } .chat-message { margin-bottom: 1rem; } .chat-message-header { display: flex; gap: 0.5rem; align-items: baseline; margin-bottom: 0.25rem; } .chat-message-sender { font-weight: 600; font-size: 0.875rem; } .chat-message-time { font-size: 0.75rem; color: var(--bp-text-muted); } .chat-message-content { font-size: 0.875rem; line-height: 1.4; } .chat-input-area { padding: 1rem; border-top: 1px solid var(--bp-border); display: flex; gap: 0.5rem; } .chat-input { flex: 1; padding: 0.75rem; border: 1px solid var(--bp-border); border-radius: 8px; font-size: 0.875rem; outline: none; } .chat-input:focus { border-color: var(--bp-primary); } /* Breakout Rooms */ .breakout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .breakout-room { background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: 10px; padding: 1rem; } .breakout-room-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .breakout-room-title { font-weight: 600; } .breakout-room-count { font-size: 0.75rem; color: var(--bp-text-muted); background: var(--bp-bg); padding: 0.25rem 0.5rem; border-radius: 4px; } .breakout-participants { display: flex; flex-wrap: wrap; gap: 0.5rem; } .breakout-participant { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--bp-bg); border-radius: 20px; font-size: 0.75rem; } /* Recording Panel */ .recording-panel { background: var(--bp-surface); border-radius: 12px; border: 1px solid var(--bp-border); padding: 1.5rem; } .recording-status { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .recording-indicator { width: 12px; height: 12px; border-radius: 50%; background: var(--bp-danger); animation: blink 1s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .recording-time { font-family: monospace; font-size: 1.25rem; font-weight: 600; } .recording-list { margin-top: 1rem; } .recording-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border-bottom: 1px solid var(--bp-border); } .recording-item:last-child { border-bottom: none; } .recording-info { flex: 1; } .recording-name { font-weight: 600; font-size: 0.875rem; } .recording-meta { font-size: 0.75rem; color: var(--bp-text-muted); } /* Form Elements */ .form-group { margin-bottom: 1rem; } .form-label { display: block; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.875rem; } .form-input, .form-select, .form-textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--bp-border); border-radius: 8px; font-size: 0.875rem; background: var(--bp-surface); outline: none; transition: border-color 0.2s; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--bp-primary); } .form-textarea { resize: vertical; min-height: 100px; } /* Modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal { background: var(--bp-surface); border-radius: 12px; width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; transform: translateY(20px); transition: transform 0.3s; } .modal-overlay.active .modal { transform: translateY(0); } .modal-header { padding: 1.5rem; border-bottom: 1px solid var(--bp-border); display: flex; justify-content: space-between; align-items: center; } .modal-title { font-size: 1.25rem; font-weight: 700; } .modal-close { background: none; border: none; cursor: pointer; color: var(--bp-text-muted); padding: 0.5rem; } .modal-close:hover { color: var(--bp-text); } .modal-body { padding: 1.5rem; } .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--bp-border); display: flex; justify-content: flex-end; gap: 0.75rem; } /* Tabs */ .tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--bp-border); padding-bottom: 0.5rem; } .tab { padding: 0.75rem 1.25rem; border-radius: 8px 8px 0 0; border: none; background: transparent; cursor: pointer; font-weight: 600; color: var(--bp-text-muted); transition: all 0.2s; } .tab:hover { color: var(--bp-text); background: var(--bp-bg); } .tab.active { color: var(--bp-primary); background: var(--bp-primary-soft); } /* Training Card */ .training-card { background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: 12px; overflow: hidden; } .training-card-header { padding: 1rem 1.5rem; background: linear-gradient(135deg, var(--bp-primary), #8B2E2E); color: white; } .training-card-title { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.25rem; } .training-card-subtitle { font-size: 0.875rem; opacity: 0.9; } .training-card-body { padding: 1.5rem; } .training-card-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--bp-border); display: flex; justify-content: space-between; align-items: center; } /* Quick Action Buttons */ .quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .quick-action { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.5rem; background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: 12px; cursor: pointer; transition: all 0.2s; text-decoration: none; color: var(--bp-text); } .quick-action:hover { border-color: var(--bp-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(108, 27, 27, 0.1); } .quick-action-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .quick-action-icon svg { width: 24px; height: 24px; } .quick-action-label { font-weight: 600; font-size: 0.875rem; text-align: center; } /* Responsive */ @media (max-width: 768px) { .sidebar { display: none; } .main-content { padding: 1rem; } .dashboard-grid { grid-template-columns: 1fr; } .meeting-controls { flex-wrap: wrap; } } """ # ============================================ # SVG Icons # ============================================ ICONS = { "video": '', "video_off": '', "mic": '', "mic_off": '', "screen_share": '', "chat": '', "users": '', "calendar": '', "record": '', "phone_off": '', "settings": '', "grid": '', "plus": '', "download": '', "play": '', "trash": '', "link": '', "copy": '', "clock": '', "home": '', "graduation": '', "external": '', "file_text": '', "refresh": '', "x": '', }