<!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: 'Non me acordo do meu contrasinal, caducou o meu contrasinal, ou 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/pages/viewpage.action?pageId=205717790" 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/pages/viewpage.action?pageId=205718006" 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><a href="https://axudatic.udc.gal/pages/viewpageattachments.action?pageId=199295607&metadataLink=true&preview=/199295607/199296042/Configuracion%20MFA%20SMS.pdf" target="_blank">SMS a un número de móbil</a>.</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>
|
