Historial de página
| Procura |
|---|
| HTML |
|---|
<!-- Contenedor neutralizado, para aislar el código HTML y seguir viendo el contenido que hay a continuación --> <div style="all: initial; display: blockcontents;"> <!DOCTYPE html> <html lang="gl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Xerador de Guías Interactivas (Cores Personalizadas)</title> <!-- O CSS foi eliminado de aquí e pasarase a JavaScript para aplicalo en liña --> </head> <body> <!-- O contedor principal agora só necesita o ID. O estilo aplicarase con JS --> <div id="guiaInteractivaContedor"> <!-- O JavaScript encherá isto --> </div> <script> // --------------------------------------------------------------------------- // --- SECCIÓN DE ESTILOS EN LIÑA: CORES ACTUALIZADAS --- // --------------------------------------------------------------------------- const STYLES = { mainContainer: ` font-family: sans-serif !important; line-height: 1.5 !important; width: 100% !important; max-width: 750px !important; margin: 20px auto !important; background-color: #ffffff !important; border: 1px solid #dee2e6 !important; padding: 15px !important; border-radius: 4px !important; text-align: left !important; `, header: ` text-align: center !important; margin-bottom: 20px !important; `, headerH1: ` font-size: 1.5em !important; font-weight: bold !important; margin-bottom: 5px !important; color: #343a40 !important; `, headerP: ` font-size: 1em !important; margin-top: 5px !important; color: #6c757d !important; `, pasoRenderizado: ` padding: 15px !important; border: 1px solid #e9ecef !important; border-radius: 3px !important; margin-bottom: 15px !important; background-color: #f8f9fa !important; `, pasoH2: ` font-size: 1.25em !important; font-weight: bold !important; margin-bottom: 10px !important; color: #343a40 !important; `, pasoH3: ` font-size: 1.1em !important; font-weight: bold !important; margin-bottom: 8px !important; margin-top: 10px !important; color: #495057 !important; `, pasoTexto: ` margin-bottom: 8px !important; font-size: 0.95em !important; color: #495057 !important; `, pasoLista: ` padding-left: 25px !important; margin-bottom: 8px !important; `, // NOVO ESTILO PARA AS IMAXES DA GUÍA guiaImagen: ` max-width: 100% !important; height: auto !important; border: 1px solid #ced4da !important; border-radius: 4px !important; margin-top: 10px !important; margin-bottom: 10px !important; display: block !important; `, btnGuia: ` background-color: #6c757d !important; color: white !important; border: 1px solid #5a6268 !important; padding: 10px 15px !important; border-radius: 4px !important; font-weight: bold !important; cursor: pointer !important; font-size: 0.9em !important; text-align: center !important; display: block !important; text-decoration: none !important; box-shadow: none !important; width: 100% !important; `, btnGuiaReiniciar: ` background-color: #c6007e !important; border-color: #a10066 !important; display: inline-block !important; width: auto !important; `, decisionButtonsContainer: ` display: flex !important; flex-direction: column !important; gap: 8px !important; margin-top: 15px !important; align-items: center !important; `, reiniciarBtnContainer: ` text-align: center !important; margin-top: 20px !important; `, highlight: ` background-color: #e9ecef !important; padding: 8px !important; border-radius: 3px !important; border-left: 3px solid #6c757d !important; margin: 10px 0 !important; font-size: 0.85em !important; `, footer: ` text-align: center !important; margin-top: 20px !important; padding: 10px !important; background-color: #f8f9fa !important; border-top: 1px solid #dee2e6 !important; font-size: 0.9em !important; `, footerH3: ` font-size: 1em !important; font-weight: bold !important; margin-bottom: 5px !important; color: #343a40 !important; ` }; // --------------------------------------------------------------------------- // --- SECCIÓN DE DATOS DA GUÍA: MODIFICA ESTA PARTE PARA A TÚA GUÍA --- // --------------------------------------------------------------------------- const DATOS_GUIA = { tituloGuia: "Guía Interactiva: problemas de acceso á conta ou aos servizos da UDC", subtituloGuia: "Nesta guía acompañarémoste para que poidas atopar unha solución ao teu problema. Non fai falta ter coñecementos técnicos avanzados: explicaremos cada paso de maneira clara e sinxela", pasoInicialId: "pasoInicial", pasos: [ { id: "pasoInicial", tipo: "pregunta", titulo: 'Primeiro, axúdanos a entender o problema:<span class="step-icon">🤔</span>', contidoHTML: `<p style="${STYLES.pasoTexto}">Que sucede cando intentas acceder á túa conta?</p>`, opcions: [ { texto_boton: 'Recibo unha mensaxe de "contrasinal incorrecto" ou "credenciais non válidas"', destino_id: "diagnosticoContrasinalMensaxe" }, { texto_boton: 'Tras escribir o meu usuario e contrasinal, pídeme un código que non chega ou queda na fase de autenticación', destino_id: "diagnosticoMFAMensaxe" }, { texto_boton: 'Non estou seguro. Axúdame a distinguir', destino_id: "guiaDistinguir" } ] }, { id: "guiaDistinguir", tipo: "pregunta", titulo: '<span aria-hidden="true">🔍</span> Axudámosche a distinguir:', contidoHTML: ` <p style="${STYLES.pasoTexto}">Se ves unha mensaxe clara de <strong>"contrasinal incorrecto"</strong>, <strong>"credenciais non válidas"</strong>, ou similar <strong>ANTES</strong> de calquera solicitude de segundo factor...</p> <!-- EXEMPLO DE COMO INSERIR UNHA IMAXE --> <img src="https://placehold.co/600x150/f8f9fa/6c757d?text=Exemplo+de+erro+de+contrasinal" alt="Captura de pantalla de exemplo mostrando un erro de contrasinal." style="${STYLES.guiaImagen}" > <p style="${STYLES.highlight}">➡️ O máis probable é un problema co teu <strong>CONTRASINAL</strong>.</p> <p style="margin-top: 15px !important; ${STYLES.pasoTexto}">En cambio, se o sistema <strong>ACEPTA</strong> o teu contrasinal (non hai erro inmediato de contrasinal) e despois:</p> <ul style="${STYLES.pasoLista}"> <li>Solicita un código/aprobación que non chega (Microsoft Authenticator, SMS, chamada).</li> <li>Mostra un erro específico do dobre factor.</li> <li>A páxina non avanza ou queda "pensando" despois de pedir o segundo factor.</li> </ul> <p style="${STYLES.highlight}">➡️ O máis probable é que sexa un problema co <strong>DOBRE FACTOR (MFA)</strong>.</p> <div style="margin-top: 15px !important; ${STYLES.highlight}"> <p style="${STYLES.pasoTexto}"><span aria-hidden="true">ℹ️</span> <strong>Nota:</strong> Pode que os distintos servizos da UDC mostren unha pantalla lixeiramente diferente, pero o funcionamento é o mesmo.</p> </div>`, opcions: [ { texto_boton: 'Entendido, creo que é o contrasinal', destino_id: "diagnosticoContrasinalMensaxe" }, { texto_boton: 'Entendido, creo que é o dobre factor (MFA)', destino_id: "diagnosticoMFAMensaxe" } ] }, { id: "diagnosticoContrasinalMensaxe", tipo: "pregunta", titulo: '<span aria-hidden="true">🔒</span> Problema de contrasinal', contidoHTML: `<p>De acordo, imos seguir os pasos para recuperar o teu contrasinal.</p><p>Tes configurada unha conta de correo electrónico de recuperación?</p>`, opcions: [ { texto_boton: 'Si, teño correo de recuperación', destino_id: "solucionContrasinalCasoA" }, { texto_boton: 'Non, ou non estou seguro', destino_id: "preguntaCertificado" } ] }, { id: "solucionContrasinalCasoA", tipo: "solucion", titulo: '<span aria-hidden="true">📧</span> Solución: recuperar con correo electrónico', contidoHTML: ` <h3 style="${STYLES.pasoH3}">CASO A: tes conta de correo de recuperación</h3> <p style="${STYLES.pasoTexto}">É a forma máis sinxela!</p> <ol style="${STYLES.pasoLista}"> <li><strong>Accede</strong> a <a href="https://servizos.udc.es/activacion/recuperar-contrasinal" target="_blank">https://servizos.udc.es/activacion/recuperar-contrasinal</a>.</li> <li>Introduce o teu <strong>usuario</strong> (sen @udc.es).</li> <li>O sistema enviarache un correo á túa <strong>conta de recuperación</strong>.</li> <li><strong>Sigue as instrucións</strong> do correo para establecer un novo contrasinal.</li> </ol> <div style="${STYLES.highlight}"> <p style="${STYLES.pasoTexto}"><span aria-hidden="true">💡</span> <strong>LEMBRA!</strong> Recomendámosche actualizar a túa conta de correo de recuperación cando haxa cambios entrando no <a href="https://servizos.udc.es" target="_blank">https://servizos.udc.es</a>.</p> </div> <div style="${STYLES.highlight}"> <p style="${STYLES.pasoTexto}"><span aria-hidden="true">📖</span> <strong>Ver máis:</strong></p> <ul style="${STYLES.pasoLista}"> <li><a href="https://axudatic.udc.gal/display/SIC/Como+recupero+o+meu+contrasinal+de+servizos+por+bloqueo+ou+esquecemento" target="_blank">Como recupero o meu contrasinal (inclúe vídeo)</a></li> <li><a href="https://axudatic.udc.gal/pages/viewpage.action?pageId=59344181" target="_blank">Como poño un correo de recuperación se non o teño</a></li> </ul> </div>` }, { id: "preguntaCertificado", tipo: "pregunta", titulo: '<span aria-hidden="true">🆔</span> Seguimos co contrasinal...', contidoHTML: `<p>NON tes correo de recuperación.</p><p>Pero, tes un certificado dixital da Fábrica Nacional de Moneda y Timbre (FNMT) instalado no teu navegador?</p>`, opcions: [ { texto_boton: 'Si, teño certificado dixital', destino_id: "solucionContrasinalCasoB" }, { texto_boton: 'Non, non teño certificado dixital', destino_id: "solucionContrasinalCasoC" } ] }, { id: "solucionContrasinalCasoB", tipo: "solucion", titulo: '<span aria-hidden="true">⚙️</span> Solución: usar Certificado Dixital', contidoHTML: ` <h3 style="${STYLES.pasoH3}">CASO B: NON tes correo de recuperación, PERO SI tes certificado dixital da FNMT</h3> <p>Co teu certificado podes acceder a servizos, e configurar un correo de recuperación:</p> <ol style="${STYLES.pasoLista}"> <li>Accede a <a href="https://servizos.udc.es" target="_blank">servizos.udc.es</a> co teu <strong>certificado dixital</strong>.</li> <li>Dentro do portal, entra no menú da esquerda <strong>O teu perfil</strong>.</li> <li>Baixa ata onde pon <strong>Correo electrónico de recuperación</strong> e escribe un correo que utilices habitualmente.</li> <li>Unha vez configurada, volve ao inicio desta guía e selecciona a opción de <strong>"Si, teño correo de recuperación"</strong> (CASO A) para restablecer o teu contrasinal.</li> </ol> <div style="${STYLES.highlight}"> <p style="${STYLES.pasoTexto}"><span aria-hidden="true">📖</span> <strong>Ver máis:</strong></p> <p><a href="https://axudatic.udc.gal/display/SIC/Como+recupero+o+meu+contrasinal+de+servizos+por+bloqueo+ou+esquecemento+co+meu+certificado+dixital+da+FNMT" target="_blank"> Como recupero o meu contrasinal co meu certificado dixital da FNMT</a></p> </div>` }, { id: "solucionContrasinalCasoC", tipo: "solucion", titulo: '<span aria-hidden="true">📞</span> Solución: Contactar co CAU (Contrasinal)', contidoHTML: ` <h3 style="${STYLES.pasoH3}">CASO C: NON tes correo de recuperación NIN Certificado Dixital</h3> <div style="${STYLES.highlight}"><p><span aria-hidden="true">⚠️</span> Necesitarás autorizar ao CAU para que te proporcionen un novo contrasinal:</p></div> <ol style="${STYLES.pasoLista}"> <li>Prepara a túa solicitude: <ul style="${STYLES.pasoLista}"> <li>Escribe e <strong>asina</strong> unha <strong>solicitude</strong> onde consten o teu nome completo, apelidos e número de identidade. Faille unha foto.</li> <li>Unha copia por ambos os lados do teu <strong>documento de identidade</strong> en vigor.</li> </ul> </li> <li>Envía un correo electrónico a <strong>cau.sic@udc.es</strong> coa documentación que preparaches no paso anterior.</li> <li>Recibirás no teu correo un contrasinal provisional e instrucións para configurar un correo de recuperación, co que poderás cambiala cando queiras sen precisar axuda.</li> </ol>` }, { id: "diagnosticoMFAMensaxe", tipo: "pregunta", titulo: '<span aria-hidden="true">📱</span> Problema de dobre factor (MFA)', contidoHTML: `<p>Entendido. Parece que o problema está no segundo paso da autenticación.</p><p>Aínda tes acceso á túa conta de correo desde algún outro dispositivo (por exemplo, un ordenador onde xa iniciaches sesión previamente)?</p>`, opcions: [ { texto_boton: 'Si, aínda teño acceso desde outro sitio', destino_id: "solucionMFAOpcion1" }, { texto_boton: 'Non, non teño acceso desde ningún outro sitio', destino_id: "solucionMFAOpcion2" } ] }, { id: "solucionMFAOpcion1", tipo: "solucion", titulo: '<span aria-hidden="true">🔄</span> Solución: Autoxestión do MFA', contidoHTML: ` <h3 style="${STYLES.pasoH3}">OPCIÓN 1 MFA: Aínda tes acceso ao correo desde algún equipo</h3> <p>Se é así, podes modificar o método de autenticación ti mesmo.</p> <ol style="${STYLES.pasoLista}"> <li>Accede á configuración da túa conta de Microsoft desde <a href="https://myaccount.microsoft.com/" target="_blank">myaccount.microsoft.com</a>, e busca a sección de <strong>"Información de seguridade"</strong>.</li> <li>Modifica os teus datos. Podes: <ul style="${STYLES.pasoLista}"> <li>Cambiar o número de teléfono asociado.</li> <li>Cambiar o método de autenticación preferido.</li> <li>Engadir un novo método.</li> </ul> </li> </ol>` }, { id: "solucionMFAOpcion2", tipo: "solucion", titulo: '<span aria-hidden="true">📝</span> Solución: Solicitar Reset de MFA ao CAU', contidoHTML: ` <h3 style="${STYLES.pasoH3}">OPCIÓN 2 MFA: NON podes completar o acceso co dobre factor</h3> <p>(Por cambio/perda do terminal móbil, avaría do dispositivo móbil, erro na aplicación de autenticación...).</p> <div style="${STYLES.highlight}"><p><span aria-hidden="true">⚠️</span> Deberás solicitar un <strong>restablecemento do teu dobre factor</strong> ao CAU:</p></div> <ol style="${STYLES.pasoLista}"> <li>Prepara a túa solicitude: <ul style="${STYLES.pasoLista}"> <li>Escribe e <strong>asina</strong> unha <strong>solicitude</strong> onde consten o teu nome completo, apelidos e número de identidade. Faille unha foto.</li> <li>Unha copia por ambos os lados do teu <strong>documento de identidade</strong> en vigor.</li> </ul> </li> <li>Envía un correo electrónico a <strong>cau.sic@udc.es co seguinte:</strong> <ul style="${STYLES.pasoLista}"> <li><strong>Asunto:</strong> "Reset MFA"</li> <li><strong>Documentos adxuntos:</strong> Os documentos que preparaches no paso anterior (autorización e copia do documento de identidade)</li> </ul> </li> <li>Agarda á confirmación: unha vez recibida e procesada a túa solicitude, o CAU restablecerá a configuración do teu MFA. Despois, poderás configurar un novo dispositivo ou método de autenticación.</li> </ol> <div style="${STYLES.highlight}"> <h4 style="font-size: 1em; font-weight: bold;"><span aria-hidden="true">ℹ️</span> Formas de configurar o dobre factor (unha vez restablecido):</h4> Poderás escoller entre: <ul style="${STYLES.pasoLista}"> <li>Microsoft Authenticator: (Recomendado). É importante realizar esta configuración inicial desde un PC. <span aria-hidden="true">💻</span></li> <li>Outra aplicación de autenticación: Google Authenticator, FreeOTP, etc.</li> <li>Chamada a un número de teléfono.</li> <li>SMS a un número de móbil.</li> </ul> </div>` } ], footerHTML: `<h3><span aria-hidden="true">❓</span>Tes algunha dúbida adicional?</h3><p>Contacta co Centro de Atención ao Usuario (CAU):</p><p><span aria-hidden="true">📞</span> Teléfono: 981 167000 (Ext. 2222)</p><p><span aria-hidden="true">📧</span> Correo: cau.sic@udc.es</p>` }; // --------------------------------------------------------------------------- // --- MOTOR DA GUÍA: NON MODIFICAR --- // --------------------------------------------------------------------------- const contedorGuia = document.getElementById('guiaInteractivaContedor'); function renderizarPaso(idPaso) { const paso = DATOS_GUIA.pasos.find(p => p.id === idPaso); if (!paso) { console.error(`Paso con ID '${idPaso}' non atopado.`); return; } let htmlPaso = `<div style="${STYLES.pasoRenderizado}">`; htmlPaso += `<h2 style="${STYLES.pasoH2}">${paso.titulo}</h2>`; if (paso.contidoHTML) { htmlPaso += `<div>${paso.contidoHTML}</div>`; } htmlPaso += `</div>`; if (paso.tipo === 'pregunta' && paso.opcions) { htmlPaso += `<div style="${STYLES.decisionButtonsContainer}">`; paso.opcions.forEach(opcion => { const estiloBtn = STYLES.btnGuia; const hoverColor = '#5a6268'; // Cor hover para botóns grises htmlPaso += `<button style="${estiloBtn}" onmouseover="this.style.backgroundColor='${hoverColor}'" onmouseout="this.style.backgroundColor='#6c757d'" onclick="renderizarPaso('${opcion.destino_id}')">${opcion.texto_boton}</button>`; }); htmlPaso += `</div>`; } if (idPaso !== DATOS_GUIA.pasoInicialId) { const estiloBotonReiniciar = STYLES.btnGuia + STYLES.btnGuiaReiniciar; const hoverColor = '#a10066'; // Cor hover para botón de reiniciar htmlPaso += `<div style="${STYLES.reiniciarBtnContainer}"><button style="${estiloBotonReiniciar}" onmouseover="this.style.backgroundColor='${hoverColor}'" onmouseout="this.style.backgroundColor='#c6007e'" onclick="renderizarPaso('${DATOS_GUIA.pasoInicialId}')">Queres comezar de novo?</button></div>`; } const pasoDinamicoContedor = contedorGuia.querySelector('#pasoDinamicoContedor'); if (pasoDinamicoContedor) { pasoDinamicoContedor.innerHTML = htmlPaso; } } function iniciarGuia() { if (!contedorGuia) { console.error("Contedor principal da guía '#guiaInteractivaContedor' non atopado."); return; } if (!DATOS_GUIA || !DATOS_GUIA.pasos || DATOS_GUIA.pasos.length === 0 || !DATOS_GUIA.pasoInicialId) { contedorGuia.innerHTML = `<p>Erro ao cargar a guía. Verifica a configuración de DATOS_GUIA no script.</p>`; return; } contedorGuia.setAttribute('style', STYLES.mainContainer); let footerHTML = ''; if (DATOS_GUIA.footerHTML) { const footerH3Style = STYLES.footerH3 || 'font-size:1em; font-weight:bold;'; let styledFooterContent = DATOS_GUIA.footerHTML.replace(/<h3>/g, `<h3 style="${footerH3Style}">`); footerHTML = `<footer style="${STYLES.footer}">${styledFooterContent}</footer>`; } contedorGuia.innerHTML = ` <header style="${STYLES.header}"> <h1 style="${STYLES.headerH1}">${DATOS_GUIA.tituloGuia || "Guía Interactiva"}</h1> ${DATOS_GUIA.subtituloGuia ? `<p style="${STYLES.headerP}">${DATOS_GUIA.subtituloGuia}</p>` : ''} </header> <div id="pasoDinamicoContedor"></div> ${footerHTML} `; renderizarPaso(DATOS_GUIA.pasoInicialId); } document.addEventListener('DOMContentLoaded', iniciarGuia); </script> </body> </html> <!-- Cierro el contenedor neutralizado --> </div> <div style="clear: both;"></div> |
| Horizontal Navigation Bar | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
