Spaces:

doctorlinux
/

cibertest

Sleeping

App Files Files Community

doctorlinux commited on Oct 14, 2025

Commit

74dbd0b

verified ·

1 Parent(s): 7af2ae8

Upload index.html

Browse files

Files changed (1) hide show

index.html +336 -100

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DoctorLinux - Análisis de Seguridad</title>
     <style>
         * {
             margin: 0;
@@ -16,16 +16,12 @@
             background: linear-gradient(135deg, #1a2a6c, #2a3a7c);
             color: #fff;
             min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
             padding: 20px;
         }
         .container {
-            max-width: 800px;
-            width: 100%;
             background: rgba(255, 255, 255, 0.1);
             backdrop-filter: blur(10px);
             border-radius: 20px;
@@ -36,7 +32,7 @@
         header {
             text-align: center;
-            margin-bottom: 30px;
         }
         .logo {
@@ -49,77 +45,149 @@
         .subtitle {
             font-size: 1.2rem;
             opacity: 0.8;
-            margin-bottom: 20px;
         }
-        .content {
-            display: flex;
-            flex-direction: column;
-            gap: 30px;
         }
-        .info-section {
             background: rgba(255, 255, 255, 0.05);
             padding: 25px;
             border-radius: 15px;
             border-left: 4px solid #4fc3f7;
         }
-        .info-section h2 {
             margin-bottom: 15px;
             color: #4fc3f7;
         }
-        .info-section ul {
-            list-style-type: none;
-            padding-left: 10px;
         }
-        .info-section li {
-            margin-bottom: 10px;
-            padding-left: 25px;
-            position: relative;
         }
-        .info-section li:before {
-            content: "•";
-            color: #4fc3f7;
-            font-size: 1.5rem;
-            position: absolute;
-            left: 0;
-            top: -5px;
         }
-        .download-section {
             text-align: center;
-            background: rgba(255, 255, 255, 0.05);
-            padding: 30px;
-            border-radius: 15px;
         }
-        .download-section h2 {
-            margin-bottom: 15px;
-            color: #4fc3f7;
         }
-        .download-section p {
-            margin-bottom: 25px;
-            opacity: 0.9;
-            font-size: 1.1rem;
         }
         .download-btn {
             display: inline-block;
             background: linear-gradient(to right, #4fc3f7, #2979ff);
             color: white;
-            padding: 15px 40px;
-            font-size: 1.2rem;
             font-weight: 600;
             border: none;
             border-radius: 50px;
             cursor: pointer;
             transition: all 0.3s ease;
             text-decoration: none;
             box-shadow: 0 5px 15px rgba(41, 121, 255, 0.4);
         }
@@ -132,7 +200,7 @@
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 20px;
-            margin-top: 20px;
         }
         .feature {
@@ -147,75 +215,243 @@
             margin-bottom: 10px;
             color: #4fc3f7;
         }
-        footer {
-            margin-top: 40px;
-            text-align: center;
-            font-size: 0.9rem;
-            opacity: 0.7;
-        }
-        @media (max-width: 600px) {
-            .container {
-                padding: 25px;
-            }
-            .logo {
-                font-size: 2rem;
-            }
-            .download-btn {
-                padding: 12px 30px;
-                font-size: 1.1rem;
-            }
-        }
     </style>
 </head>
 <body>
     <div class="container">
         <header>
             <div class="logo">DoctorLinux</div>
-            <div class="subtitle">Soluciones de Seguridad Informática</div>
         </header>
-        <div class="content">
-            <div class="info-section">
-                <h2>Análisis de Seguridad Completado</h2>
-                <p>Hemos finalizado la evaluación de seguridad de tu infraestructura. El informe incluye:</p>
-                <ul>
-                    <li>Evaluación de roles NAS y gestión de parches</li>
-                    <li>Análisis de configuración de firewalls</li>
-                    <li>Verificación de estrategia de backups 3-2-1</li>
-                    <li>Revisión de políticas de acceso y MFA</li>
-                    <li>Recomendaciones de hardening</li>
-                </ul>
             </div>
-            <div class="download-section">
-                <h2>Descarga tu Informe Completo</h2>
-                <p>Obtén tu análisis detallado en PDF al instante</p>
-                <a href="#" class="download-btn">Análisis IA Detallado</a>
-                <div class="features">
-                    <div class="feature">
-                        <div class="feature-icon">📊</div>
-                        <div>Análisis Detallado</div>
-                    </div>
-                    <div class="feature">
-                        <div class="feature-icon">🔒</div>
-                        <div>Evaluación de Seguridad</div>
-                    </div>
-                    <div class="feature">
-                        <div class="feature-icon">⚡</div>
-                        <div>Descarga Inmediata</div>
-                    </div>
                 </div>
             </div>
         </div>
-        <footer>
-            <p>© 2023 DoctorLinux. Todos los derechos reservados.</p>
-        </footer>
     </div>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DoctorLinux - Cuestionario de Seguridad</title>
     <style>
         * {
             margin: 0;
             background: linear-gradient(135deg, #1a2a6c, #2a3a7c);
             color: #fff;
             min-height: 100vh;
             padding: 20px;
         }
         .container {
+            max-width: 1000px;
+            margin: 0 auto;
             background: rgba(255, 255, 255, 0.1);
             backdrop-filter: blur(10px);
             border-radius: 20px;
         header {
             text-align: center;
+            margin-bottom: 40px;
         }
         .logo {
         .subtitle {
             font-size: 1.2rem;
             opacity: 0.8;
+            margin-bottom: 10px;
         }
+        .progress-bar {
+            width: 100%;
+            height: 8px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 4px;
+            margin: 20px 0;
+            overflow: hidden;
+        }
+        .progress {
+            height: 100%;
+            background: linear-gradient(to right, #4fc3f7, #2979ff);
+            width: 0%;
+            transition: width 0.3s ease;
+        }
+        .question-section {
+            display: none;
+        }
+        .question-section.active {
+            display: block;
         }
+        .question {
             background: rgba(255, 255, 255, 0.05);
             padding: 25px;
             border-radius: 15px;
+            margin-bottom: 25px;
             border-left: 4px solid #4fc3f7;
         }
+        .question h3 {
             margin-bottom: 15px;
             color: #4fc3f7;
+            font-size: 1.3rem;
         }
+        .options {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
         }
+        .option {
+            padding: 15px 20px;
+            background: rgba(255, 255, 255, 0.1);
+            border: 2px solid rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            cursor: pointer;
+            transition: all 0.3s ease;
         }
+        .option:hover {
+            background: rgba(255, 255, 255, 0.15);
+            border-color: #4fc3f7;
+        }
+        .option.selected {
+            background: rgba(79, 195, 247, 0.2);
+            border-color: #4fc3f7;
         }
+        .text-input {
+            width: 100%;
+            padding: 15px;
+            background: rgba(255, 255, 255, 0.1);
+            border: 2px solid rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            color: white;
+            font-size: 1rem;
+            margin-top: 10px;
+        }
+        .text-input::placeholder {
+            color: rgba(255, 255, 255, 0.6);
+        }
+        .navigation {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 30px;
+        }
+        .btn {
+            padding: 15px 30px;
+            background: linear-gradient(to right, #4fc3f7, #2979ff);
+            color: white;
+            border: none;
+            border-radius: 50px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(41, 121, 255, 0.4);
+        }
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.1);
+            border: 2px solid rgba(255, 255, 255, 0.3);
+        }
+        .btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .results-section {
+            display: none;
             text-align: center;
         }
+        .results-section.active {
+            display: block;
         }
+        .results-section h2 {
+            color: #4fc3f7;
+            margin-bottom: 20px;
+            font-size: 2rem;
         }
         .download-btn {
             display: inline-block;
             background: linear-gradient(to right, #4fc3f7, #2979ff);
             color: white;
+            padding: 18px 50px;
+            font-size: 1.3rem;
             font-weight: 600;
             border: none;
             border-radius: 50px;
             cursor: pointer;
             transition: all 0.3s ease;
             text-decoration: none;
+            margin: 20px 0;
             box-shadow: 0 5px 15px rgba(41, 121, 255, 0.4);
         }
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 20px;
+            margin-top: 30px;
         }
         .feature {
             margin-bottom: 10px;
             color: #4fc3f7;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <header>
             <div class="logo">DoctorLinux</div>
+            <div class="subtitle">Cuestionario de Evaluación de Seguridad</div>
+            <div class="progress-bar">
+                <div class="progress" id="progress"></div>
+            </div>
         </header>
+        <!-- SECCIÓN 1: INFRAESTRUCTURA -->
+        <div class="question-section active" id="section-1">
+            <div class="question">
+                <h3>1. ¿Qué tipo de infraestructura utilizas principalmente?</h3>
+                <div class="options">
+                    <div class="option" data-value="onprem">Servidores físicos on-premise</div>
+                    <div class="option" data-value="cloud">Infraestructura en la nube (AWS, Azure, GCP)</div>
+                    <div class="option" data-value="hybrid">Infraestructura híbrida</div>
+                    <div class="option" data-value="virtual">Servidores virtualizados</div>
+                </div>
+            </div>
+            <div class="question">
+                <h3>2. ¿Cuántos servidores gestionas actualmente?</h3>
+                <div class="options">
+                    <div class="option" data-value="1-5">1-5 servidores</div>
+                    <div class="option" data-value="6-20">6-20 servidores</div>
+                    <div class="option" data-value="21-50">21-50 servidores</div>
+                    <div class="option" data-value="50+">Más de 50 servidores</div>
+                </div>
+            </div>
+            <div class="navigation">
+                <button class="btn btn-secondary" disabled>Anterior</button>
+                <button class="btn" onclick="nextSection(1)">Siguiente</button>
+            </div>
+        </div>
+        <!-- SECCIÓN 2: SEGURIDAD DE RED -->
+        <div class="question-section" id="section-2">
+            <div class="question">
+                <h3>3. ¿Cómo gestionas los firewalls en tu infraestructura?</h3>
+                <div class="options">
+                    <div class="option" data-value="enterprise">Firewall empresarial dedicado</div>
+                    <div class="option" data-value="cloud">Firewalls cloud nativos</div>
+                    <div class="option" data-value="basic">Firewall básico del sistema</div>
+                    <div class="option" data-value="none">Sin firewall configurado</div>
+                </div>
+            </div>
+            <div class="question">
+                <h3>4. ¿Qué políticas de acceso tienes implementadas?</h3>
+                <div class="options">
+                    <div class="option" data-value="mfa">MFA (Autenticación de múltiples factores)</div>
+                    <div class="option" data-value="vpn">Acceso solo por VPN</div>
+                    <div class="option" data-value="ip">Restricción por IP</div>
+                    <div class="option" data-value="basic">Usuario y contraseña básicos</div>
+                </div>
+            </div>
+            <div class="navigation">
+                <button class="btn btn-secondary" onclick="prevSection(2)">Anterior</button>
+                <button class="btn" onclick="nextSection(2)">Siguiente</button>
+            </div>
+        </div>
+        <!-- SECCIÓN 3: BACKUP Y RECUPERACIÓN -->
+        <div class="question-section" id="section-3">
+            <div class="question">
+                <h3>5. ¿Qué estrategia de backup implementas?</h3>
+                <div class="options">
+                    <div class="option" data-value="321">Estrategia 3-2-1 (3 copias, 2 medios, 1 externa)</div>
+                    <div class="option" data-value="cloud">Backup en la nube</div>
+                    <div class="option" data-value="local">Backup local solamente</div>
+                    <div class="option" data-value="none">Sin estrategia definida</div>
+                </div>
+            </div>
+            <div class="question">
+                <h3>6. ¿Con qué frecuencia realizas backups?</h3>
+                <div class="options">
+                    <div class="option" data-value="daily">Diariamente</div>
+                    <div class="option" data-value="weekly">Semanalmente</div>
+                    <div class="option" data-value="monthly">Mensualmente</div>
+                    <div class="option" data-value="rarely">Ocasionalmente</div>
+                </div>
             </div>
+            <div class="navigation">
+                <button class="btn btn-secondary" onclick="prevSection(3)">Anterior</button>
+                <button class="btn" onclick="nextSection(3)">Siguiente</button>
+            </div>
+        </div>
+        <!-- SECCIÓN 4: GESTIÓN DE PARCHES -->
+        <div class="question-section" id="section-4">
+            <div class="question">
+                <h3>7. ¿Cómo gestionas las actualizaciones de seguridad?</h3>
+                <div class="options">
+                    <div class="option" data-value="auto">Actualizaciones automáticas</div>
+                    <div class="option" data-value="manual">Actualizaciones manuales programadas</div>
+                    <div class="option" data-value="testing">Testing antes de implementar</div>
+                    <div class="option" data-value="rarely">Actualizaciones poco frecuentes</div>
+                </div>
+            </div>
+            <div class="question">
+                <h3>8. ¿Qué sistemas operativos utilizas principalmente?</h3>
+                <div class="options">
+                    <div class="option" data-value="linux">Distribuciones Linux</div>
+                    <div class="option" data-value="windows">Windows Server</div>
+                    <div class="option" data-value="mixed">Mixed (Linux y Windows)</div>
+                    <div class="option" data-value="other">Otros sistemas</div>
+                </div>
+            </div>
+            <div class="navigation">
+                <button class="btn btn-secondary" onclick="prevSection(4)">Anterior</button>
+                <button class="btn" onclick="nextSection(4)">Siguiente</button>
+            </div>
+        </div>
+        <!-- SECCIÓN 5: MONITOREO Y DETECCIÓN -->
+        <div class="question-section" id="section-5">
+            <div class="question">
+                <h3>9. ¿Qué sistema de monitoreo utilizas?</h3>
+                <div class="options">
+                    <div class="option" data-value="siem">SIEM empresarial</div>
+                    <div class="option" data-value="monitoring">Herramientas de monitoreo (Zabbix, Nagios)</div>
+                    <div class="option" data-value="basic">Monitoreo básico del sistema</div>
+                    <div class="option" data-value="none">Sin sistema de monitoreo</div>
+                </div>
+            </div>
+            <div class="question">
+                <h3>10. ¿Tienes políticas de respuesta a incidentes?</h3>
+                <div class="options">
+                    <div class="option" data-value="documented">Políticas documentadas y probadas</div>
+                    <div class="option" data-value="basic">Procedimientos básicos establecidos</div>
+                    <div class="option" data-value="informal">Procedimientos informales</div>
+                    <div class="option" data-value="none">Sin políticas definidas</div>
+                </div>
+            </div>
+            <div class="navigation">
+                <button class="btn btn-secondary" onclick="prevSection(5)">Anterior</button>
+                <button class="btn" onclick="showResults()">Generar Análisis</button>
+            </div>
+        </div>
+        <!-- SECCIÓN DE RESULTADOS -->
+        <div class="results-section" id="results-section">
+            <h2>Análisis de Seguridad Completado</h2>
+            <p>Hemos evaluado tu infraestructura basado en tus respuestas</p>
+            <a href="#" class="download-btn">Descargar Análisis IA Avanzado</a>
+            <div class="features">
+                <div class="feature">
+                    <div class="feature-icon">📊</div>
+                    <div>Evaluación Personalizada</div>
+                </div>
+                <div class="feature">
+                    <div class="feature-icon">🔒</div>
+                    <div>Recomendaciones de Seguridad</div>
+                </div>
+                <div class="feature">
+                    <div class="feature-icon">🤖</div>
+                    <div>Análisis con IA</div>
+                </div>
+                <div class="feature">
+                    <div class="feature-icon">⚡</div>
+                    <div>Plan de Acción</div>
                 </div>
             </div>
         </div>
     </div>
+    <script>
+        let currentSection = 1;
+        const totalSections = 5;
+        const userAnswers = {};
+        // Inicializar opciones
+        document.querySelectorAll('.option').forEach(option => {
+            option.addEventListener('click', function() {
+                // Remover selección anterior en la misma pregunta
+                const question = this.closest('.question');
+                question.querySelectorAll('.option').forEach(opt => {
+                    opt.classList.remove('selected');
+                });
+                // Seleccionar nueva opción
+                this.classList.add('selected');
+                // Guardar respuesta
+                const questionText = question.querySelector('h3').textContent;
+                userAnswers[questionText] = this.getAttribute('data-value');
+            });
+        });
+        function updateProgress() {
+            const progress = (currentSection / totalSections) * 100;
+            document.getElementById('progress').style.width = `${progress}%`;
+        }
+        function nextSection(current) {
+            if (current === currentSection) {
+                document.getElementById(`section-${currentSection}`).classList.remove('active');
+                currentSection++;
+                document.getElementById(`section-${currentSection}`).classList.add('active');
+                updateProgress();
+            }
+        }
+        function prevSection(current) {
+            if (current === currentSection) {
+                document.getElementById(`section-${currentSection}`).classList.remove('active');
+                currentSection--;
+                document.getElementById(`section-${currentSection}`).classList.add('active');
+                updateProgress();
+            }
+        }
+        function showResults() {
+            document.getElementById(`section-${currentSection}`).classList.remove('active');
+            document.getElementById('results-section').classList.add('active');
+            document.getElementById('progress').style.width = '100%';
+            // Aquí procesaríamos las respuestas y generaríamos el análisis
+            console.log('Respuestas del usuario:', userAnswers);
+        }
+        // Inicializar progreso
+        updateProgress();
+    </script>
 </body>
 </html>