Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EDU-X 9000 - Plateforme de Génération Automatique de Cours</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #00f0ff; | |
| --secondary: #ff00f0; | |
| --tertiary: #f0ff00; | |
| --accent: #ff5500; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); opacity: 1; } | |
| 50% { transform: scale(1.1); opacity: 0.8; } | |
| } | |
| @keyframes neon { | |
| 0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--primary), 0 0 30px var(--primary); } | |
| 50% { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px var(--primary), 0 0 50px var(--primary); } | |
| } | |
| @keyframes scanline { | |
| 0% { background-position: 0 -100vh; } | |
| 100% { background-position: 0 100vh; } | |
| } | |
| @keyframes particleMove { | |
| 0% { transform: translate(0, 0); opacity: 1; } | |
| 100% { transform: translate(var(--tx), var(--ty)); opacity: 0; } | |
| } | |
| @keyframes hologram { | |
| 0%, 100% { opacity: 0.8; } | |
| 50% { opacity: 1; } | |
| } | |
| @keyframes rotate3d { | |
| 0% { transform: rotateY(0deg) rotateX(0deg); } | |
| 100% { transform: rotateY(360deg) rotateX(20deg); } | |
| } | |
| @keyframes glitch { | |
| 0% { transform: translate(0); } | |
| 20% { transform: translate(-5px, 5px); } | |
| 40% { transform: translate(-5px, -5px); } | |
| 60% { transform: translate(5px, 5px); } | |
| 80% { transform: translate(5px, -5px); } | |
| 100% { transform: translate(0); } | |
| } | |
| .neon-text { | |
| animation: neon 1.5s ease-in-out infinite alternate; | |
| } | |
| .float-animation { | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| .hologram-effect { | |
| animation: hologram 3s ease-in-out infinite; | |
| } | |
| .rotate3d { | |
| animation: rotate3d 20s linear infinite; | |
| } | |
| .glitch-effect { | |
| animation: glitch 1s linear infinite; | |
| } | |
| .scanlines { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .scanlines::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient( | |
| to bottom, | |
| rgba(255,255,255,0) 0%, | |
| rgba(255,255,255,0.05) 50%, | |
| rgba(255,255,255,0) 100% | |
| ); | |
| background-size: 100% 8px; | |
| pointer-events: none; | |
| animation: scanline 6s linear infinite; | |
| } | |
| .holographic-bg { | |
| background: radial-gradient(circle at center, rgba(0,50,100,0.2) 0%, rgba(0,0,50,0.8) 100%); | |
| box-shadow: inset 0 0 200px rgba(0,100,255,0.5); | |
| } | |
| .cyber-glass { | |
| background: rgba(0, 10, 30, 0.3); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(0, 240, 255, 0.3); | |
| box-shadow: 0 8px 32px 0 rgba(0, 240, 255, 0.2); | |
| } | |
| .cyber-btn { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 0 15px rgba(0,200,255,0.7); | |
| position: relative; | |
| overflow: hidden; | |
| cursor: pointer; | |
| border: 1px solid rgba(0,240,255,0.5); | |
| background: linear-gradient(135deg, rgba(0,50,100,0.7) 0%, rgba(0,100,150,0.5) 100%); | |
| } | |
| .cyber-btn:hover { | |
| transform: translateY(-5px) scale(1.05); | |
| box-shadow: 0 0 30px rgba(0,240,255,0.9); | |
| background: linear-gradient(135deg, rgba(0,100,150,0.7) 0%, rgba(0,150,200,0.5) 100%); | |
| } | |
| .cyber-btn::before { | |
| content: ""; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient( | |
| to bottom right, | |
| rgba(255,255,255,0) 45%, | |
| rgba(255,255,255,0.5) 50%, | |
| rgba(255,255,255,0) 55% | |
| ); | |
| transform: rotate(30deg); | |
| transition: all 0.7s ease; | |
| } | |
| .cyber-btn:hover::before { | |
| left: 100%; | |
| top: 100%; | |
| } | |
| .btn-activated { | |
| animation: pulse 0.5s infinite; | |
| border: 2px solid #00ff00 ; | |
| box-shadow: 0 0 20px rgba(0,255,0,0.8) ; | |
| } | |
| .cyber-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 15px; | |
| max-height: 70vh; | |
| overflow-y: auto; | |
| padding: 20px; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--primary) transparent; | |
| } | |
| .cyber-grid::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .cyber-grid::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .cyber-grid::-webkit-scrollbar-thumb { | |
| background-color: var(--primary); | |
| border-radius: 10px; | |
| } | |
| .particle { | |
| position: absolute; | |
| background: radial-gradient(circle, var(--primary) 0%, transparent 70%); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: 5; | |
| filter: blur(1px); | |
| } | |
| .cyber-terminal { | |
| background: rgba(0,0,20,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 5px; | |
| font-family: 'Courier New', monospace; | |
| color: var(--primary); | |
| text-shadow: 0 0 5px var(--primary); | |
| padding: 15px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .cyber-terminal::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient( | |
| to bottom, | |
| transparent 0%, | |
| rgba(0,240,255,0.05) 50%, | |
| transparent 100% | |
| ); | |
| pointer-events: none; | |
| } | |
| .terminal-text { | |
| animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| border-right: 2px solid var(--primary); | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: var(--primary) } | |
| } | |
| .cyber-card { | |
| background: rgba(0,10,30,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| padding: 15px; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cyber-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,240,255,0.5); | |
| border-color: var(--secondary); | |
| } | |
| .cyber-card::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(0,240,255,0.1) 0%, | |
| rgba(255,0,240,0.1) 100% | |
| ); | |
| z-index: 1; | |
| } | |
| .cyber-card-content { | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .cyber-input { | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: white; | |
| padding: 10px 15px; | |
| border-radius: 5px; | |
| font-family: 'Courier New', monospace; | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-input:focus { | |
| outline: none; | |
| border-color: var(--secondary); | |
| box-shadow: 0 0 10px rgba(255,0,240,0.5); | |
| } | |
| .cyber-panel { | |
| background: rgba(0,10,30,0.8); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| box-shadow: 0 0 30px rgba(0,240,255,0.3); | |
| padding: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cyber-panel::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(0,240,255,0.05) 0%, | |
| rgba(255,0,240,0.05) 100% | |
| ); | |
| pointer-events: none; | |
| } | |
| .cyber-title { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| text-shadow: 0 0 10px rgba(0,240,255,0.5); | |
| } | |
| .cyber-subtitle { | |
| font-size: 1.2rem; | |
| color: var(--primary); | |
| text-shadow: 0 0 5px var(--primary); | |
| } | |
| .cyber-text { | |
| color: rgba(200,240,255,0.9); | |
| text-shadow: 0 0 5px rgba(0,240,255,0.3); | |
| } | |
| .cyber-divider { | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--primary), transparent); | |
| margin: 20px 0; | |
| } | |
| .cyber-badge { | |
| display: inline-block; | |
| padding: 3px 8px; | |
| background: rgba(0,240,255,0.2); | |
| border: 1px solid var(--primary); | |
| border-radius: 5px; | |
| color: var(--primary); | |
| font-size: 0.8rem; | |
| font-weight: bold; | |
| } | |
| .cyber-loader { | |
| width: 50px; | |
| height: 50px; | |
| border: 5px solid rgba(0,240,255,0.2); | |
| border-radius: 50%; | |
| border-top-color: var(--primary); | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .cyber-modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0,0,30,0.9); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .cyber-modal.active { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .cyber-modal-content { | |
| background: rgba(0,10,30,0.95); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| width: 90%; | |
| max-width: 800px; | |
| max-height: 90vh; | |
| overflow: auto; | |
| box-shadow: 0 0 50px rgba(0,240,255,0.5); | |
| transform: scale(0.9); | |
| transition: transform 0.3s ease; | |
| position: relative; | |
| } | |
| .cyber-modal.active .cyber-modal-content { | |
| transform: scale(1); | |
| } | |
| .cyber-modal-header { | |
| padding: 15px; | |
| border-bottom: 1px solid var(--primary); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .cyber-modal-body { | |
| padding: 20px; | |
| } | |
| .cyber-modal-footer { | |
| padding: 15px; | |
| border-top: 1px solid var(--primary); | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .cyber-close { | |
| background: none; | |
| border: none; | |
| color: var(--primary); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| .cyber-tabs { | |
| display: flex; | |
| border-bottom: 1px solid var(--primary); | |
| } | |
| .cyber-tab { | |
| padding: 10px 20px; | |
| cursor: pointer; | |
| border-bottom: 3px solid transparent; | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-tab:hover { | |
| background: rgba(0,240,255,0.1); | |
| } | |
| .cyber-tab.active { | |
| border-bottom-color: var(--primary); | |
| background: rgba(0,240,255,0.2); | |
| } | |
| .cyber-tab-content { | |
| display: none; | |
| padding: 20px; | |
| } | |
| .cyber-tab-content.active { | |
| display: block; | |
| } | |
| .cyber-progress { | |
| height: 10px; | |
| background: rgba(0,240,255,0.2); | |
| border-radius: 5px; | |
| overflow: hidden; | |
| } | |
| .cyber-progress-bar { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| transition: width 0.3s ease; | |
| } | |
| .cyber-alert { | |
| padding: 15px; | |
| border: 1px solid var(--primary); | |
| border-radius: 5px; | |
| margin-bottom: 20px; | |
| background: rgba(0,240,255,0.1); | |
| } | |
| .cyber-alert.success { | |
| border-color: #00ff00; | |
| background: rgba(0,255,0,0.1); | |
| } | |
| .cyber-alert.error { | |
| border-color: #ff0000; | |
| background: rgba(255,0,0,0.1); | |
| } | |
| .cyber-alert.warning { | |
| border-color: #ffff00; | |
| background: rgba(255,255,0,0.1); | |
| } | |
| .cyber-alert.info { | |
| border-color: var(--primary); | |
| background: rgba(0,240,255,0.1); | |
| } | |
| .cyber-dashboard { | |
| display: grid; | |
| grid-template-columns: 250px 1fr; | |
| gap: 20px; | |
| min-height: 100vh; | |
| } | |
| .cyber-sidebar { | |
| background: rgba(0,5,15,0.8); | |
| border-right: 1px solid var(--primary); | |
| padding: 20px; | |
| } | |
| .cyber-main { | |
| padding: 20px; | |
| } | |
| .cyber-nav-item { | |
| padding: 10px; | |
| margin-bottom: 5px; | |
| border-radius: 5px; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .cyber-nav-item:hover { | |
| background: rgba(0,240,255,0.2); | |
| } | |
| .cyber-nav-item.active { | |
| background: rgba(0,240,255,0.3); | |
| border-left: 3px solid var(--primary); | |
| } | |
| .cyber-course-preview { | |
| width: 100%; | |
| height: 300px; | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cyber-course-preview::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(0,240,255,0.1) 0%, | |
| rgba(255,0,240,0.1) 100% | |
| ); | |
| pointer-events: none; | |
| } | |
| .cyber-course-preview-content { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| z-index: 2; | |
| } | |
| .cyber-course-preview-nav { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 50px; | |
| background: rgba(0,10,20,0.8); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 10px; | |
| z-index: 3; | |
| } | |
| .cyber-course-preview-nav-item { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: rgba(0,240,255,0.5); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-course-preview-nav-item.active { | |
| background: var(--primary); | |
| transform: scale(1.2); | |
| } | |
| .cyber-course-preview-nav-item:hover { | |
| transform: scale(1.2); | |
| } | |
| .cyber-course-section { | |
| margin-bottom: 30px; | |
| } | |
| .cyber-course-section-title { | |
| font-size: 1.5rem; | |
| margin-bottom: 15px; | |
| color: var(--primary); | |
| text-shadow: 0 0 5px var(--primary); | |
| } | |
| .cyber-course-item { | |
| background: rgba(0,15,30,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 5px; | |
| padding: 15px; | |
| margin-bottom: 10px; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .cyber-course-item:hover { | |
| background: rgba(0,20,40,0.7); | |
| transform: translateX(5px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.3); | |
| } | |
| .cyber-course-item-title { | |
| font-size: 1.1rem; | |
| margin-bottom: 5px; | |
| color: white; | |
| } | |
| .cyber-course-item-desc { | |
| font-size: 0.9rem; | |
| color: rgba(200,240,255,0.7); | |
| } | |
| .cyber-course-item-meta { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 10px; | |
| } | |
| .cyber-course-item-meta-item { | |
| font-size: 0.8rem; | |
| color: var(--primary); | |
| } | |
| .cyber-course-builder { | |
| display: grid; | |
| grid-template-columns: 300px 1fr; | |
| gap: 20px; | |
| } | |
| .cyber-course-builder-sidebar { | |
| background: rgba(0,10,20,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| padding: 15px; | |
| } | |
| .cyber-course-builder-main { | |
| background: rgba(0,10,20,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| padding: 15px; | |
| } | |
| .cyber-course-builder-component { | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 5px; | |
| padding: 10px; | |
| margin-bottom: 10px; | |
| cursor: move; | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-course-builder-component:hover { | |
| background: rgba(0,30,60,0.7); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.3); | |
| } | |
| .cyber-course-builder-component-title { | |
| font-size: 0.9rem; | |
| color: white; | |
| } | |
| .cyber-course-builder-component-desc { | |
| font-size: 0.8rem; | |
| color: rgba(200,240,255,0.7); | |
| } | |
| .cyber-course-builder-preview { | |
| min-height: 500px; | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| padding: 20px; | |
| position: relative; | |
| } | |
| .cyber-course-builder-preview::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(0,240,255,0.1) 0%, | |
| rgba(255,0,240,0.1) 100% | |
| ); | |
| pointer-events: none; | |
| } | |
| .cyber-course-builder-preview-placeholder { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100%; | |
| color: rgba(200,240,255,0.5); | |
| border: 2px dashed var(--primary); | |
| border-radius: 5px; | |
| padding: 20px; | |
| } | |
| .cyber-course-builder-preview-item { | |
| background: rgba(0,30,60,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 5px; | |
| padding: 15px; | |
| margin-bottom: 10px; | |
| position: relative; | |
| } | |
| .cyber-course-builder-preview-item::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(0,240,255,0.1) 0%, | |
| rgba(255,0,240,0.1) 100% | |
| ); | |
| pointer-events: none; | |
| } | |
| .cyber-course-builder-preview-item-controls { | |
| position: absolute; | |
| top: 5px; | |
| right: 5px; | |
| display: flex; | |
| gap: 5px; | |
| z-index: 2; | |
| } | |
| .cyber-course-builder-preview-item-control { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: rgba(0,240,255,0.5); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-course-builder-preview-item-control:hover { | |
| background: var(--primary); | |
| transform: scale(1.2); | |
| } | |
| .cyber-course-builder-preview-item-content { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .cyber-course-builder-preview-item-title { | |
| font-size: 1rem; | |
| color: white; | |
| margin-bottom: 10px; | |
| } | |
| .cyber-course-builder-preview-item-text { | |
| font-size: 0.9rem; | |
| color: rgba(200,240,255,0.8); | |
| } | |
| .cyber-course-builder-preview-item-media { | |
| margin-top: 10px; | |
| background: rgba(0,20,40,0.5); | |
| border: 1px solid var(--primary); | |
| border-radius: 5px; | |
| padding: 10px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100px; | |
| } | |
| .cyber-course-builder-preview-item-media-placeholder { | |
| color: rgba(200,240,255,0.5); | |
| } | |
| .cyber-course-builder-settings { | |
| margin-top: 20px; | |
| } | |
| .cyber-course-builder-settings-title { | |
| font-size: 1.2rem; | |
| color: var(--primary); | |
| margin-bottom: 15px; | |
| } | |
| .cyber-course-builder-settings-group { | |
| margin-bottom: 15px; | |
| } | |
| .cyber-course-builder-settings-label { | |
| display: block; | |
| margin-bottom: 5px; | |
| color: white; | |
| font-size: 0.9rem; | |
| } | |
| .cyber-course-builder-settings-input { | |
| width: 100%; | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: white; | |
| padding: 8px 12px; | |
| border-radius: 5px; | |
| font-family: 'Courier New', monospace; | |
| } | |
| .cyber-course-builder-settings-input:focus { | |
| outline: none; | |
| border-color: var(--secondary); | |
| box-shadow: 0 0 10px rgba(255,0,240,0.5); | |
| } | |
| .cyber-course-builder-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 10px; | |
| margin-top: 20px; | |
| } | |
| .cyber-course-builder-action { | |
| padding: 8px 15px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-course-builder-action-primary { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: black; | |
| font-weight: bold; | |
| } | |
| .cyber-course-builder-action-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.5); | |
| } | |
| .cyber-course-builder-action-secondary { | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .cyber-course-builder-action-secondary:hover { | |
| background: rgba(0,30,60,0.7); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.3); | |
| } | |
| .cyber-course-generator { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| } | |
| .cyber-course-generator-input { | |
| background: rgba(0,10,20,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| padding: 20px; | |
| } | |
| .cyber-course-generator-output { | |
| background: rgba(0,10,20,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| padding: 20px; | |
| } | |
| .cyber-course-generator-title { | |
| font-size: 1.2rem; | |
| color: var(--primary); | |
| margin-bottom: 15px; | |
| } | |
| .cyber-course-generator-textarea { | |
| width: 100%; | |
| height: 300px; | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: white; | |
| padding: 15px; | |
| border-radius: 5px; | |
| font-family: 'Courier New', monospace; | |
| resize: none; | |
| } | |
| .cyber-course-generator-textarea:focus { | |
| outline: none; | |
| border-color: var(--secondary); | |
| box-shadow: 0 0 10px rgba(255,0,240,0.5); | |
| } | |
| .cyber-course-generator-preview { | |
| width: 100%; | |
| height: 300px; | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 5px; | |
| overflow: auto; | |
| padding: 15px; | |
| } | |
| .cyber-course-generator-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 10px; | |
| margin-top: 15px; | |
| } | |
| .cyber-course-generator-action { | |
| padding: 8px 15px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-course-generator-action-primary { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: black; | |
| font-weight: bold; | |
| } | |
| .cyber-course-generator-action-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.5); | |
| } | |
| .cyber-course-generator-action-secondary { | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .cyber-course-generator-action-secondary:hover { | |
| background: rgba(0,30,60,0.7); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.3); | |
| } | |
| .cyber-course-generator-status { | |
| margin-top: 15px; | |
| padding: 10px; | |
| border-radius: 5px; | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| } | |
| .cyber-course-generator-status-title { | |
| font-size: 0.9rem; | |
| color: var(--primary); | |
| margin-bottom: 5px; | |
| } | |
| .cyber-course-generator-status-text { | |
| font-size: 0.8rem; | |
| color: rgba(200,240,255,0.8); | |
| } | |
| .cyber-course-generator-ai { | |
| margin-top: 20px; | |
| padding: 15px; | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 5px; | |
| } | |
| .cyber-course-generator-ai-title { | |
| font-size: 1rem; | |
| color: var(--primary); | |
| margin-bottom: 10px; | |
| } | |
| .cyber-course-generator-ai-desc { | |
| font-size: 0.9rem; | |
| color: rgba(200,240,255,0.8); | |
| margin-bottom: 10px; | |
| } | |
| .cyber-course-generator-ai-actions { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .cyber-course-generator-ai-action { | |
| padding: 5px 10px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 0.8rem; | |
| } | |
| .cyber-course-generator-ai-action-primary { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: black; | |
| font-weight: bold; | |
| } | |
| .cyber-course-generator-ai-action-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.5); | |
| } | |
| .cyber-course-generator-ai-action-secondary { | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .cyber-course-generator-ai-action-secondary:hover { | |
| background: rgba(0,30,60,0.7); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.3); | |
| } | |
| .cyber-course-marketplace { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .cyber-course-marketplace-item { | |
| background: rgba(0,10,20,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .cyber-course-marketplace-item:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,240,255,0.5); | |
| border-color: var(--secondary); | |
| } | |
| .cyber-course-marketplace-item-image { | |
| height: 150px; | |
| background: rgba(0,20,40,0.7); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cyber-course-marketplace-item-image::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(0,240,255,0.1) 0%, | |
| rgba(255,0,240,0.1) 100% | |
| ); | |
| pointer-events: none; | |
| } | |
| .cyber-course-marketplace-item-content { | |
| padding: 15px; | |
| } | |
| .cyber-course-marketplace-item-title { | |
| font-size: 1.2rem; | |
| color: white; | |
| margin-bottom: 10px; | |
| } | |
| .cyber-course-marketplace-item-desc { | |
| font-size: 0.9rem; | |
| color: rgba(200,240,255,0.8); | |
| margin-bottom: 15px; | |
| } | |
| .cyber-course-marketplace-item-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .cyber-course-marketplace-item-price { | |
| font-size: 1.1rem; | |
| color: var(--tertiary); | |
| font-weight: bold; | |
| } | |
| .cyber-course-marketplace-item-rating { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .cyber-course-marketplace-item-rating-stars { | |
| color: var(--tertiary); | |
| } | |
| .cyber-course-marketplace-item-rating-count { | |
| font-size: 0.8rem; | |
| color: rgba(200,240,255,0.7); | |
| } | |
| .cyber-course-marketplace-item-actions { | |
| margin-top: 15px; | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .cyber-course-marketplace-item-action { | |
| flex: 1; | |
| padding: 8px; | |
| border-radius: 5px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 0.9rem; | |
| } | |
| .cyber-course-marketplace-item-action-primary { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: black; | |
| font-weight: bold; | |
| } | |
| .cyber-course-marketplace-item-action-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.5); | |
| } | |
| .cyber-course-marketplace-item-action-secondary { | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .cyber-course-marketplace-item-action-secondary:hover { | |
| background: rgba(0,30,60,0.7); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.3); | |
| } | |
| .cyber-course-marketplace-filter { | |
| margin-bottom: 20px; | |
| background: rgba(0,10,20,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| padding: 15px; | |
| } | |
| .cyber-course-marketplace-filter-title { | |
| font-size: 1.1rem; | |
| color: var(--primary); | |
| margin-bottom: 10px; | |
| } | |
| .cyber-course-marketplace-filter-group { | |
| margin-bottom: 10px; | |
| } | |
| .cyber-course-marketplace-filter-label { | |
| display: block; | |
| margin-bottom: 5px; | |
| color: white; | |
| font-size: 0.9rem; | |
| } | |
| .cyber-course-marketplace-filter-select { | |
| width: 100%; | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: white; | |
| padding: 8px 12px; | |
| border-radius: 5px; | |
| } | |
| .cyber-course-marketplace-filter-select:focus { | |
| outline: none; | |
| border-color: var(--secondary); | |
| box-shadow: 0 0 10px rgba(255,0,240,0.5); | |
| } | |
| .cyber-course-marketplace-filter-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 10px; | |
| margin-top: 15px; | |
| } | |
| .cyber-course-marketplace-filter-action { | |
| padding: 8px 15px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-course-marketplace-filter-action-primary { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: black; | |
| font-weight: bold; | |
| } | |
| .cyber-course-marketplace-filter-action-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.5); | |
| } | |
| .cyber-course-marketplace-filter-action-secondary { | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .cyber-course-marketplace-filter-action-secondary:hover { | |
| background: rgba(0,30,60,0.7); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.3); | |
| } | |
| .cyber-course-analytics { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .cyber-course-analytics-card { | |
| background: rgba(0,10,20,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| padding: 15px; | |
| } | |
| .cyber-course-analytics-card-title { | |
| font-size: 1rem; | |
| color: var(--primary); | |
| margin-bottom: 10px; | |
| } | |
| .cyber-course-analytics-card-value { | |
| font-size: 1.5rem; | |
| color: white; | |
| margin-bottom: 5px; | |
| } | |
| .cyber-course-analytics-card-desc { | |
| font-size: 0.8rem; | |
| color: rgba(200,240,255,0.7); | |
| } | |
| .cyber-course-analytics-chart { | |
| background: rgba(0,10,20,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| height: 300px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: var(--primary); | |
| } | |
| .cyber-course-analytics-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-bottom: 20px; | |
| } | |
| .cyber-course-analytics-table th { | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| padding: 10px; | |
| text-align: left; | |
| color: var(--primary); | |
| } | |
| .cyber-course-analytics-table td { | |
| background: rgba(0,10,20,0.7); | |
| border: 1px solid var(--primary); | |
| padding: 10px; | |
| color: rgba(200,240,255,0.8); | |
| } | |
| .cyber-course-analytics-table tr:hover td { | |
| background: rgba(0,20,40,0.7); | |
| } | |
| .cyber-course-settings { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| } | |
| .cyber-course-settings-group { | |
| background: rgba(0,10,20,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .cyber-course-settings-title { | |
| font-size: 1.2rem; | |
| color: var(--primary); | |
| margin-bottom: 15px; | |
| } | |
| .cyber-course-settings-item { | |
| margin-bottom: 15px; | |
| } | |
| .cyber-course-settings-label { | |
| display: block; | |
| margin-bottom: 5px; | |
| color: white; | |
| font-size: 0.9rem; | |
| } | |
| .cyber-course-settings-input { | |
| width: 100%; | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: white; | |
| padding: 8px 12px; | |
| border-radius: 5px; | |
| } | |
| .cyber-course-settings-input:focus { | |
| outline: none; | |
| border-color: var(--secondary); | |
| box-shadow: 0 0 10px rgba(255,0,240,0.5); | |
| } | |
| .cyber-course-settings-select { | |
| width: 100%; | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: white; | |
| padding: 8px 12px; | |
| border-radius: 5px; | |
| } | |
| .cyber-course-settings-select:focus { | |
| outline: none; | |
| border-color: var(--secondary); | |
| box-shadow: 0 0 10px rgba(255,0,240,0.5); | |
| } | |
| .cyber-course-settings-textarea { | |
| width: 100%; | |
| height: 100px; | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: white; | |
| padding: 8px 12px; | |
| border-radius: 5px; | |
| resize: none; | |
| } | |
| .cyber-course-settings-textarea:focus { | |
| outline: none; | |
| border-color: var(--secondary); | |
| box-shadow: 0 0 10px rgba(255,0,240,0.5); | |
| } | |
| .cyber-course-settings-checkbox { | |
| margin-right: 10px; | |
| } | |
| .cyber-course-settings-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 10px; | |
| margin-top: 20px; | |
| } | |
| .cyber-course-settings-action { | |
| padding: 8px 15px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-course-settings-action-primary { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: black; | |
| font-weight: bold; | |
| } | |
| .cyber-course-settings-action-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.5); | |
| } | |
| .cyber-course-settings-action-secondary { | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .cyber-course-settings-action-secondary:hover { | |
| background: rgba(0,30,60,0.7); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.3); | |
| } | |
| .cyber-course-preview-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0,0,30,0.95); | |
| z-index: 1000; | |
| display: flex; | |
| flex-direction: column; | |
| padding: 20px; | |
| } | |
| .cyber-course-preview-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .cyber-course-preview-title { | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| } | |
| .cyber-course-preview-close { | |
| background: none; | |
| border: none; | |
| color: var(--primary); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| .cyber-course-preview-content { | |
| flex: 1; | |
| background: rgba(0,10,20,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| padding: 20px; | |
| overflow: auto; | |
| } | |
| .cyber-course-preview-footer { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 10px; | |
| margin-top: 20px; | |
| } | |
| .cyber-course-preview-action { | |
| padding: 8px 15px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-course-preview-action-primary { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: black; | |
| font-weight: bold; | |
| } | |
| .cyber-course-preview-action-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.5); | |
| } | |
| .cyber-course-preview-action-secondary { | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .cyber-course-preview-action-secondary:hover { | |
| background: rgba(0,30,60,0.7); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.3); | |
| } | |
| .cyber-course-preview-section { | |
| margin-bottom: 30px; | |
| } | |
| .cyber-course-preview-section-title { | |
| font-size: 1.3rem; | |
| color: var(--primary); | |
| margin-bottom: 15px; | |
| padding-bottom: 5px; | |
| border-bottom: 1px solid var(--primary); | |
| } | |
| .cyber-course-preview-lesson { | |
| background: rgba(0,15,30,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 5px; | |
| padding: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .cyber-course-preview-lesson-title { | |
| font-size: 1.1rem; | |
| color: white; | |
| margin-bottom: 10px; | |
| } | |
| .cyber-course-preview-lesson-content { | |
| font-size: 0.9rem; | |
| color: rgba(200,240,255,0.8); | |
| margin-bottom: 10px; | |
| } | |
| .cyber-course-preview-lesson-media { | |
| margin-top: 10px; | |
| background: rgba(0,20,40,0.5); | |
| border: 1px solid var(--primary); | |
| border-radius: 5px; | |
| padding: 10px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100px; | |
| } | |
| .cyber-course-preview-lesson-media-placeholder { | |
| color: rgba(200,240,255,0.5); | |
| } | |
| .cyber-course-preview-lesson-actions { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 10px; | |
| } | |
| .cyber-course-preview-lesson-action { | |
| padding: 5px 10px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 0.8rem; | |
| } | |
| .cyber-course-preview-lesson-action-primary { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: black; | |
| font-weight: bold; | |
| } | |
| .cyber-course-p preview-lesson-action-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.5); | |
| } | |
| .cyber-course-preview-lesson-action-secondary { | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .cyber-course-preview-lesson-action-secondary:hover { | |
| background: rgba(0,30,60,0.7); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.3); | |
| } | |
| .cyber-course-publish { | |
| background: rgba(0,10,20,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| padding: 20px; | |
| } | |
| .cyber-course-publish-title { | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| margin-bottom: 20px; | |
| } | |
| .cyber-course-publish-steps { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 30px; | |
| position: relative; | |
| } | |
| .cyber-course-publish-steps::before { | |
| content: ""; | |
| position: absolute; | |
| top: 15px; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| z-index: 1; | |
| } | |
| .cyber-course-publish-step { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .cyber-course-publish-step-number { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| background: rgba(0,20,40,0.7); | |
| border: 2px solid var(--primary); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: var(--primary); | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| .cyber-course-publish-step.active .cyber-course-publish-step-number { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: black; | |
| } | |
| .cyber-course-publish-step-title { | |
| font-size: 0.9rem; | |
| color: rgba(200,240,255,0.8); | |
| } | |
| .cyber-course-publish-step.active .cyber-course-publish-step-title { | |
| color: var(--primary); | |
| font-weight: bold; | |
| } | |
| .cyber-course-publish-content { | |
| margin-bottom: 30px; | |
| } | |
| .cyber-course-publish-actions { | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .cyber-course-publish-action { | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-course-publish-action-primary { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: black; | |
| font-weight: bold; | |
| } | |
| .cyber-course-publish-action-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.5); | |
| } | |
| .cyber-course-publish-action-secondary { | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .cyber-course-publish-action-secondary:hover { | |
| background: rgba(0,30,60,0.7); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.3); | |
| } | |
| .cyber-course-publish-form { | |
| margin-bottom: 20px; | |
| } | |
| .cyber-course-publish-form-group { | |
| margin-bottom: 15px; | |
| } | |
| .cyber-course-publish-form-label { | |
| display: block; | |
| margin-bottom: 5px; | |
| color: white; | |
| font-size: 0.9rem; | |
| } | |
| .cyber-course-publish-form-input { | |
| width: 100%; | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: white; | |
| padding: 8px 12px; | |
| border-radius: 5px; | |
| } | |
| .cyber-course-publish-form-input:focus { | |
| outline: none; | |
| border-color: var(--secondary); | |
| box-shadow: 0 0 10px rgba(255,0,240,0.5); | |
| } | |
| .cyber-course-publish-form-select { | |
| width: 100%; | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: white; | |
| padding: 8px 12px; | |
| border-radius: 5px; | |
| } | |
| .cyber-course-publish-form-select:focus { | |
| outline: none; | |
| border-color: var(--secondary); | |
| box-shadow: 0 0 10px rgba(255,0,240,0.5); | |
| } | |
| .cyber-course-publish-form-textarea { | |
| width: 100%; | |
| height: 100px; | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: white; | |
| padding: 8px 12px; | |
| border-radius: 5px; | |
| resize: none; | |
| } | |
| .cyber-course-publish-form-textarea:focus { | |
| outline: none; | |
| border-color: var(--secondary); | |
| box-shadow: 0 0 10px rgba(255,0,240,0.5); | |
| } | |
| .cyber-course-publish-form-checkbox { | |
| margin-right: 10px; | |
| } | |
| .cyber-course-publish-review { | |
| background: rgba(0,15,30,0.7); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .cyber-course-publish-review-title { | |
| font-size: 1.1rem; | |
| color: var(--primary); | |
| margin-bottom: 10px; | |
| } | |
| .cyber-course-publish-review-content { | |
| font-size: 0.9rem; | |
| color: rgba(200,240,255,0.8); | |
| } | |
| .cyber-course-publish-review-actions { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 10px; | |
| } | |
| .cyber-course-publish-review-action { | |
| padding: 5px 10px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 0.8rem; | |
| } | |
| .cyber-course-publish-review-action-primary { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: black; | |
| font-weight: bold; | |
| } | |
| .cyber-course-publish-review-action-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.5); | |
| } | |
| .cyber-course-publish-review-action-secondary { | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .cyber-course-publish-review-action-secondary:hover { | |
| background: rgba(0,30,60,0.7); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.3); | |
| } | |
| .cyber-course-publish-success { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| padding: 30px; | |
| } | |
| .cyber-course-publish-success-icon { | |
| font-size: 4rem; | |
| color: #00ff00; | |
| margin-bottom: 20px; | |
| animation: pulse 2s infinite; | |
| } | |
| .cyber-course-publish-success-title { | |
| font-size: 2rem; | |
| color: var(--primary); | |
| margin-bottom: 15px; | |
| } | |
| .cyber-course-publish-success-desc { | |
| font-size: 1rem; | |
| color: rgba(200,240,255,0.8); | |
| margin-bottom: 30px; | |
| max-width: 600px; | |
| } | |
| .cyber-course-publish-success-actions { | |
| display: flex; | |
| gap: 15px; | |
| } | |
| .cyber-course-publish-success-action { | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-course-publish-success-action-primary { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: black; | |
| font-weight: bold; | |
| } | |
| .cyber-course-publish-success-action-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.5); | |
| } | |
| .cyber-course-publish-success-action-secondary { | |
| background: rgba(0,20,40,0.7); | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .cyber-course-publish-success-action-secondary:hover { | |
| background: rgba(0,30,60,0.7); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,240,255,0.3); | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 1024px) { | |
| .cyber-dashboard { | |
| grid-template-columns: 1fr; | |
| } | |
| .cyber-sidebar { | |
| display: none; | |
| } | |
| .cyber-course-builder { | |
| grid-template-columns: 1fr; | |
| } | |
| .cyber-course-generator { | |
| grid-template-columns: 1fr; | |
| } | |
| .cyber-course-settings { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .cyber-course-marketplace { | |
| grid-template-columns: 1fr; | |
| } | |
| .cyber-course-analytics { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white font-sans overflow-x-hidden"> | |
| <!-- Particle Background --> | |
| <div id="particles" class="fixed top-0 left-0 w-full h-full pointer-events-none z-0"></div> | |
| <!-- Main Container --> | |
| <div class="relative z-10 min-h-screen"> | |
| <!-- Header --> | |
| <header class="cyber-glass py-4 px-6 flex justify-between items-center border-b border-primary"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-black font-bold text-xl"> | |
| EX | |
| </div> | |
| <h1 class="cyber-title text-3xl">EDU-X <span class="text-accent">9000</span></h1> | |
| </div> | |
| <nav class="flex items-center space-x-6"> | |
| <a href="#" class="cyber-text hover:text-primary transition-colors">Accueil</a> | |
| <a href="#" class="cyber-text hover:text-primary transition-colors">Créer</a> | |
| <a href="#" class="cyber-text hover:text-primary transition-colors">Marketplace</a> | |
| <a href="#" class="cyber-text hover:text-primary transition-colors">Analytics</a> | |
| <a href="#" class="cyber-text hover:text-primary transition-colors">Paramètres</a> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center cursor-pointer"> | |
| <i class="fas fa-user text-black"></i> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- Dashboard --> | |
| <div class="cyber-dashboard"> | |
| <!-- Sidebar --> | |
| <aside class="cyber-sidebar"> | |
| <div class="mb-8"> | |
| <h3 class="cyber-subtitle mb-4">Mes Cours</h3> | |
| <div class="space-y-2"> | |
| <div class="cyber-nav-item active"> | |
| <i class="fas fa-graduation-cap mr-2"></i> Tous mes cours | |
| </div> | |
| <div class="cyber-nav-item"> | |
| <i class="fas fa-book mr-2"></i> En cours | |
| </div> | |
| <div class="cyber-nav-item"> | |
| <i class="fas fa-check-circle mr-2"></i> Publiés | |
| </div> | |
| <div class="cyber-nav-item"> | |
| <i class="fas fa-archive mr-2"></i> Archivés | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="cyber-subtitle mb-4">Catégories</h3> | |
| <div class="space-y-2"> | |
| <div class="cyber-nav-item"> | |
| <i class="fas fa-code mr-2"></i> Programmation | |
| </div> | |
| <div class="cyber-nav-item"> | |
| <i class="fas fa-chart-line mr-2"></i> Business | |
| </div> | |
| <div class="cyber-nav-item"> | |
| <i class="fas fa-paint-brush mr-2"></i> Design | |
| </div> | |
| <div class="cyber-nav-item"> | |
| <i class="fas fa-camera mr-2"></i> Photographie | |
| </div> | |
| <div class="cyber-nav-item"> | |
| <i class="fas fa-music mr-2"></i> Musique | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="cyber-subtitle mb-4">Outils</h3> | |
| <div class="space-y-2"> | |
| <div class="cyber-nav-item"> | |
| <i class="fas fa-robot mr-2"></i> Générateur IA | |
| </div> | |
| <div class="cyber-nav-item"> | |
| <i class="fas fa-chart-pie mr-2"></i> Analytics | |
| </div> | |
| <div class="cyber-nav-item"> | |
| <i class="fas fa-cog mr-2"></i> Paramètres | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="cyber-main"> | |
| <!-- Hero Section --> | |
| <section class="cyber-panel mb-8 relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-primary/10 to-secondary/10 opacity-50"></div> | |
| <div class="relative z-10"> | |
| <h2 class="cyber-title text-4xl mb-4">Générateur Automatique de Cours en Ligne</h2> | |
| <p class="cyber-text text-xl mb-6">Créez des sites de cours complets en quelques clics avec notre IA avancée. Personnalisation totale, design futuriste et animations immersives.</p> | |
| <div class="flex space-x-4"> | |
| <button class="cyber-btn px-6 py-3 text-lg"> | |
| <i class="fas fa-bolt mr-2"></i> Créer un nouveau cours | |
| </button> | |
| <button class="bg-transparent border border-primary text-primary px-6 py-3 text-lg rounded-lg hover:bg-primary/10 transition-colors"> | |
| <i class="fas fa-play-circle mr-2"></i> Voir la démo | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quick Actions --> | |
| <section class="cyber-grid mb-8"> | |
| <div class="cyber-card hover:border-accent cursor-pointer"> | |
| <div class="cyber-card-content"> | |
| <div class="w-12 h-12 bg-accent/20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-robot text-accent text-xl"></i> | |
| </div> | |
| <h3 class="cyber-subtitle mb-2">Générateur IA</h3> | |
| <p class="cyber-text text-sm">Générez automatiquement un cours complet avec notre IA avancée</p> | |
| </div> | |
| </div> | |
| <div class="cyber-card cursor-pointer"> | |
| <div class="cyber-card-content"> | |
| <div class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-puzzle-piece text-primary text-xl"></i> | |
| </div> | |
| <h3 class="cyber-subtitle mb-2">Modèles Prédéfinis</h3> | |
| <p class="cyber-text text-sm">Choisissez parmi des centaines de modèles optimisés</p> | |
| </div> | |
| </div> | |
| <div class="cyber-card cursor-pointer"> | |
| <div class="cyber-card-content"> | |
| <div class="w-12 h-12 bg-secondary/20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-palette text-secondary text-xl"></i> | |
| </div> | |
| <h3 class="cyber-subtitle mb-2">Personnalisation</h3> | |
| <p class="cyber-text text-sm">Personnalisez chaque aspect de votre cours</p> | |
| </div> | |
| </div> | |
| <div class="cyber-card cursor-pointer"> | |
| <div class="cyber-card-content"> | |
| <div class="w-12 h-12 bg-tertiary/20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-rocket text-tertiary text-xl"></i> | |
| </div> | |
| <h3 class="cyber-subtitle mb-2">Publication Instantanée</h3> | |
| <p class="cyber-text text-sm">Publiez votre cours en un clic sur votre domaine</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Course Generator --> | |
| <section class="cyber-panel mb-8"> | |
| <h2 class="cyber-title text-2xl mb-6">Générateur IA de Cours</h2> | |
| <div class="cyber-course-generator"> | |
| <div class="cyber-course-generator | |
| </html> |