Upload index.html

index.html

@@ -18,7 +18,8 @@
   .dlx-pill input{display:none}
   .dlx-pill.active{background:#214424;color:#fff;border-color:#214424}
   .dlx-nav{display:flex;gap:10px;justify-content:space-between;margin-top:8px}
-  .dlx-btn{background:#214424;color:#fff;border:none;border-radius:10px;padding:12px 16px;cursor:pointer}
+  .dlx-btn{background:#214424;color:#fff;border:none;border-radius:10px;padding:12px 16px;cursor:pointer;transition:all 0.3s}
+  .dlx-btn:hover{background:#1a361c}
   .dlx-btn[disabled]{opacity:.5;cursor:not-allowed}
   .dlx-meter{display:grid;grid-template-columns:1fr auto;gap:6px 10px;margin:8px 0}
   .dlx-badge{font-weight:600}
@@ -26,6 +27,10 @@
   .dlx-note{color:#6a786d}
   .dlx-score{font-size:40px;font-weight:800;color:#214424}
   .dlx-muted{color:#7b8b7f}
+
+  /* Modal Styles */
+  .modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;justify-content:center;align-items:center}
+  .modal-content{background:white;padding:30px;border-radius:15px;width:90%;max-width:400px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,0.2)}
 </style>
 </head>
 
@@ -47,6 +52,29 @@
     </div>
   </div>
 
+  <!-- MODAL PARA CAPTURAR EMAIL -->
+  <div id="emailModal" class="modal">
+    <div class="modal-content">
+      <h3 style="color: #214424; margin-bottom: 15px;">📧 Recibe tu Informe Completo</h3>
+      <p style="color: #5c6b5f; margin-bottom: 20px;">Ingresa tu email y te enviaremos el análisis detallado a gerencia@doctorlinux.com</p>
+      
+      <input type="email" id="userEmail" placeholder="tu.email@empresa.com" 
+             style="width: 100%; padding: 12px; border: 2px solid #e6ebef; border-radius: 8px; margin-bottom: 15px; font-size: 16px;"
+             onkeypress="if(event.key=='Enter') sendResultsToEmail()">
+      
+      <div style="display: flex; gap: 10px; justify-content: center;">
+        <button onclick="closeEmailModal()" 
+                style="background: #6a786d; color: white; border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer;">
+          Cancelar
+        </button>
+        <button onclick="sendResultsToEmail()" 
+                style="background: #214424; color: white; border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer; font-weight: bold;">
+          Enviar Informe
+        </button>
+      </div>
+    </div>
+  </div>
+
   <div class="dlx-card" id="dlxResult" style="display:none">
     <h3 class="dlx-title">Tu diagnóstico</h3>
     <div class="dlx-sub">Este resultado es orientativo. Si quieres un informe firmado por ingeniería, solicita el <b>diagnóstico gratuito</b>.</div>
@@ -73,20 +101,22 @@
       <div class="dlx-note" style="margin-top:8px">Tip: prioriza los dominios con menor puntaje. Podemos ayudarte a cerrar brechas con <b>hardening, firewalls, backups 3-2-1 y monitoreo 24/7</b>.</div>
     </div>
 
-    <div class="dlx-nav">
+    <!-- BOTONES DE ACCIÓN MEJORADOS -->
+    <div class="dlx-nav" style="margin-top:25px">
       <button class="dlx-btn" onclick="window.location.reload()">Refrescar test</button>
-      <button class="dlx-btn" id="analyzeBtn">🔍 Análisis Detallado</button>
+      <button class="dlx-btn" id="analyzeBtn">🔍 Analizar con IA</button>
+      <button class="dlx-btn" onclick="openEmailModal()" style="background:#3aa655">📧 Recibir Informe PDF</button>
     </div>
 
-    <div id="iaBox" class="dlx-card" style="display:none;margin-top:16px;">
-      <h4>Análisis Generado por IA</h4>
-      <pre id="iaOutput" style="white-space:pre-wrap;font-family:inherit;"></pre>
+    <div id="iaBox" class="dlx-card" style="display:none;margin-top:16px">
+      <h4>Análisis generado por IA</h4>
+      <pre id="iaOutput" style="white-space:pre-wrap;"></pre>
     </div>
   </div>
 </div>
 
 <script>
-/* === lógica actualizada === */
+/* === CONFIGURACIÓN INICIAL === */
 const DOMAINS = [
   { id:'perimetro',  name:'Perímetro / Firewall', qs:[
     '¿Usas un firewall dedicado (Mikrotik/OPNsense/etc.) con reglas mínimas por servicio?',
@@ -126,15 +156,14 @@ const DOMAINS = [
   ]}
 ];
 
-// 🟢 Ahora "No sé" no suma ni resta
-const SCALE=[
+const SCALE = [
   {label:'No',score:0},
   {label:'Parcial',score:50},
   {label:'Sí',score:100},
   {label:'No sé',score:null}
 ];
 
-const RECS={
+const RECS = {
   perimetro:'Endurecer perímetro: reglas mínimo necesario, VPN 2FA, IDS/IPS y protección DoS.',
   servers:'Aplicar hardening, cuentas/roles y mantener parches al día.',
   backups:'Implementar 3-2-1 con pruebas de restauración y backups inmutables.',
@@ -144,106 +173,105 @@ const RECS={
   webmail:'Forzar HTTPS, cabeceras OWASP, SPF+DKIM+DMARC y WAF.'
 };
 
-let current=0,answers={};
-const bar=document.getElementById('dlxBar'),
-steps=document.getElementById('dlxSteps'),
-note=document.getElementById('dlxStepNote'),
-prev=document.getElementById('prevBtn'),
-next=document.getElementById('nextBtn'),
-result=document.getElementById('dlxResult'),
-nav=document.getElementById('dlxNavBox');
+let current = 0, answers = {};
+const steps = document.getElementById('dlxSteps'),
+      bar = document.getElementById('dlxBar'),
+      note = document.getElementById('dlxStepNote'),
+      prev = document.getElementById('prevBtn'),
+      next = document.getElementById('nextBtn'),
+      result = document.getElementById('dlxResult'),
+      nav = document.getElementById('dlxNavBox');
 
-function render(){
-steps.innerHTML='';
-const d=DOMAINS[current];
-note.innerHTML=`<b>${current+1}/${DOMAINS.length}</b> · ${d.name}`;
-const card=document.createElement('div');
-card.className='dlx-card';
-card.innerHTML=`<h3 class="dlx-title">${d.name}</h3>`;
-d.qs.forEach((q,i)=>{
-  const b=document.createElement('div');
-  b.className='dlx-q';
-  b.innerHTML=`<h4>${q}</h4>`;
-  const row=document.createElement('div');
-  row.className='dlx-options';
-  SCALE.forEach(opt=>{
-    const lbl=document.createElement('label');
-    lbl.className='dlx-pill';
-    lbl.textContent=opt.label;
-    lbl.onclick=()=>{
-      row.querySelectorAll('.dlx-pill').forEach(p=>p.classList.remove('active'));
-      lbl.classList.add('active');
-      if(!answers[d.id])answers[d.id]=[];
-      answers[d.id][i]=opt.score;
-      updateButtons();
-    };
-    if(answers[d.id]&&answers[d.id][i]===opt.score)lbl.classList.add('active');
-    row.appendChild(lbl);
+/* === FUNCIONES PRINCIPALES === */
+function render() {
+  steps.innerHTML = '';
+  const d = DOMAINS[current];
+  note.innerHTML = `<b>${current+1}/${DOMAINS.length}</b> · ${d.name}`;
+  const card = document.createElement('div');
+  card.className = 'dlx-card';
+  card.innerHTML = `<h3 class="dlx-title">${d.name}</h3>`;
+  d.qs.forEach((q, i) => {
+    const b = document.createElement('div');
+    b.className = 'dlx-q';
+    b.innerHTML = `<h4>${q}</h4>`;
+    const row = document.createElement('div');
+    row.className = 'dlx-options';
+    SCALE.forEach(opt => {
+      const lbl = document.createElement('label');
+      lbl.className = 'dlx-pill';
+      lbl.textContent = opt.label;
+      lbl.onclick = () => {
+        row.querySelectorAll('.dlx-pill').forEach(p => p.classList.remove('active'));
+        lbl.classList.add('active');
+        if (!answers[d.id]) answers[d.id] = [];
+        answers[d.id][i] = opt.score;
+        updateButtons();
+      };
+      if (answers[d.id] && answers[d.id][i] === opt.score) lbl.classList.add('active');
+      row.appendChild(lbl);
+    });
+    b.appendChild(row);
+    card.appendChild(b);
   });
-  b.appendChild(row);
-  card.appendChild(b);
-});
-steps.appendChild(card);
-bar.style.width=Math.round(current/DOMAINS.length*100)+'%';
-updateButtons();
+  steps.appendChild(card);
+  bar.style.width = Math.round(current / DOMAINS.length * 100) + '%';
+  updateButtons();
 }
 
-// ✅ Acepta "No sé" como respuesta
-function allAnswered(i){
-  const d=DOMAINS[i];
-  return answers[d.id] && answers[d.id].length===d.qs.length && answers[d.id].every(v=>v!==undefined);
+function allAnswered(i) {
+  const d = DOMAINS[i];
+  return answers[d.id] && answers[d.id].length === d.qs.length && answers[d.id].every(v => v !== undefined);
 }
 
-// ✅ Ignora "No sé" al promediar
-function avg(a){
-  const nums=a.filter(v=>typeof v==='number' && isFinite(v));
-  if(nums.length===0) return 0;
-  return nums.reduce((x,y)=>x+y,0)/nums.length;
+function avg(a) {
+  const nums = a.filter(v => typeof v === 'number' && isFinite(v));
+  if (nums.length === 0) return 0;
+  return nums.reduce((x, y) => x + y, 0) / nums.length;
 }
 
-function updateButtons(){
-  prev.disabled=current===0;
-  const last=current===DOMAINS.length-1;
-  next.textContent=last?'Ver resultado →':'Siguiente →';
-  next.disabled=!allAnswered(current);
+function updateButtons() {
+  prev.disabled = current === 0;
+  const last = current === DOMAINS.length - 1;
+  next.textContent = last ? 'Ver resultado →' : 'Siguiente →';
+  next.disabled = !allAnswered(current);
 }
 
-prev.onclick=()=>{if(current>0){current--;render();}};
-next.onclick=()=>{
-  if(current<DOMAINS.length-1){
-    if(!allAnswered(current))return;
-    current++;render();
-  }else{
-    if(!allAnswered(current))return;
+prev.onclick = () => { if (current > 0) { current--; render(); } };
+next.onclick = () => {
+  if (current < DOMAINS.length - 1) {
+    if (!allAnswered(current)) return;
+    current++; render();
+  } else {
+    if (!allAnswered(current)) return;
     showResult();
   }
 };
 
-function showResult(){
-  bar.style.width='100%';
-  nav.style.display='none';
-  steps.style.display='none';
-  note.style.display='none';
-  result.style.display='block';
-  let weighted=0,total=0;
-  const breakdown=document.getElementById('dlxBreakdown'),
-        recs=document.getElementById('dlxRecs');
-  breakdown.innerHTML='';
-  recs.innerHTML='';
-  DOMAINS.forEach(d=>{
-    const a=answers[d.id]?avg(answers[d.id]):0;
-    weighted+=a;total+=100;
-    const pct=Math.round(a);
-    breakdown.innerHTML+=`<div>${d.name}</div><div><b>${pct}%</b></div>`;
-    if(pct<75){recs.innerHTML+=`<div class="dlx-tag">• ${RECS[d.id]}</div>`;}
+function showResult() {
+  bar.style.width = '100%';
+  nav.style.display = 'none';
+  steps.style.display = 'none';
+  note.style.display = 'none';
+  result.style.display = 'block';
+  let weighted = 0, total = 0;
+  const breakdown = document.getElementById('dlxBreakdown'),
+        recs = document.getElementById('dlxRecs');
+  breakdown.innerHTML = '';
+  recs.innerHTML = '';
+  DOMAINS.forEach(d => {
+    const a = answers[d.id] ? avg(answers[d.id]) : 0;
+    weighted += a; total += 100;
+    const pct = Math.round(a);
+    breakdown.innerHTML += `<div>${d.name}</div><div><b>${pct}%</b></div>`;
+    if (pct < 75) { recs.innerHTML += `<div class="dlx-tag">• ${RECS[d.id]}</div>`; }
   });
-  const global=Math.round(weighted/DOMAINS.length);
-  document.getElementById('dlxScore').textContent=global+'%';
-  document.getElementById('dlxBarFinal').style.width=global+'%';
-  const label=document.getElementById('dlxLabel');
-  if(global>=80){label.textContent='Nivel Sólido';label.style.background='#e7f7e7';}
-  else if(global>=60){label.textContent='Nivel Medio (revisar)';label.style.background='#fff6e1';}
-  else{label.textContent='Riesgo Alto';label.style.background='#ffe9e9';}
+  const global = Math.round(weighted / DOMAINS.length);
+  document.getElementById('dlxScore').textContent = global + '%';
+  document.getElementById('dlxBarFinal').style.width = global + '%';
+  const label = document.getElementById('dlxLabel');
+  if (global >= 80) { label.textContent = 'Nivel Sólido'; label.style.background = '#e7f7e7'; }
+  else if (global >= 60) { label.textContent = 'Nivel Medio (revisar)'; label.style.background = '#fff6e1'; }
+  else { label.textContent = 'Riesgo Alto'; label.style.background = '#ffe9e9'; }
   
   // Guardar datos para el análisis IA
   window.finalData = {
@@ -255,7 +283,41 @@ function showResult(){
   };
 }
 
-// 🔍 Análisis con IA
+/* === FUNCIONES DE EMAIL === */
+function openEmailModal() {
+  document.getElementById('emailModal').style.display = 'flex';
+  document.getElementById('userEmail').focus();
+}
+
+function closeEmailModal() {
+  document.getElementById('emailModal').style.display = 'none';
+  document.getElementById('userEmail').value = '';
+}
+
+async function sendResultsToEmail() {
+  const email = document.getElementById('userEmail').value;
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  
+  if (!email || !emailRegex.test(email)) {
+    alert('⚠️ Por favor ingresa un email válido');
+    return;
+  }
+
+  // Simular envío (en producción esto se conectaría a un backend)
+  const submitBtn = event.target;
+  const originalText = submitBtn.textContent;
+  submitBtn.textContent = 'Enviando...';
+  submitBtn.disabled = true;
+
+  setTimeout(() => {
+    alert(`✅ Informe enviado correctamente a:\n${email}\n\nTambién se envió copia a: gerencia@doctorlinux.com\n\nRevisa tu bandeja de entrada en los próximos minutos.`);
+    closeEmailModal();
+    submitBtn.textContent = originalText;
+    submitBtn.disabled = false;
+  }, 2000);
+}
+
+/* === ANÁLISIS CON IA === */
 document.getElementById('analyzeBtn').onclick = async function() {
   const box = document.getElementById('iaBox');
   const out = document.getElementById('iaOutput');
@@ -285,6 +347,7 @@ document.getElementById('analyzeBtn').onclick = async function() {
   }
 };
 
+// Inicializar aplicación
 render();
 </script>
 </body>