<!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: Activación da conta de usuario da UDC",
subtituloGuia: "Se es un novo membro da UDC, esta guía axudarache a activar a túa conta para acceder aos servizos dixitais. Imos paso a paso.",
pasoInicialId: "pasoInicial",
pasos: [
{
id: "pasoInicial",
tipo: "pregunta",
titulo: 'Primeiro, imos comprobar os requisitos <span aria-hidden="true">📋</span>',
contidoHTML: `<p style="${STYLES.pasoTexto}">Para poder activar a túa conta, debes ter en conta:</p>
<ul style="${STYLES.pasoLista}">
<li><strong>Se es estudante: </strong> Debes ter a matrícula formalizada e <strong>agardar alomenos 24 horas</strong> para que o sistema se actualice.</li>
<li><strong>Se es traballador/a: </strong> Debes ter o teu contrato ou nomeamento xa rexistrado.</li>
</ul>
<p style="${STYLES.pasoTexto}">Cal é a túa situación?</p>`,
opcions: [
{ texto_boton: "Cumpro os requisitos", destino_id: "irActivar" },
{ texto_boton: "Aínda non me matriculei ou non teño contrato", destino_id: "solucionSenRequisito" },
{ texto_boton: "Matriculeime hai MENOS de 24 horas", destino_id: "solucionAgardar24h" }
]
},
{
id: "solucionSenRequisito",
tipo: "solucion",
titulo: 'Acción Requirida: Formaliza a túa vinculación <span aria-hidden="true">✍️</span>',
contidoHTML: `<p style="${STYLES.pasoTexto}">Non é posible activar unha conta de usuario sen ter unha matrícula ou un contrato/nomeamento en vigor.</p>
<p style="${STYLES.pasoTexto}">Por favor, completa primeiro ese trámite. Unha vez feito, volve a esta guía.</p>`
},
{
id: "solucionAgardar24h",
tipo: "solucion",
titulo: 'Só un pouco de paciencia... <span aria-hidden="true">⏳</span>',
contidoHTML: `<p style="${STYLES.pasoTexto}">É normal que os sistemas informáticos precisen dun tempo para procesar a túa alta.</p>
<p style="${STYLES.pasoTexto}">Por favor, agarda a que se cumpran alomenos <strong>24 horas</strong> desde a túa matrícula antes de intentar a activación.</p>
<div style="${STYLES.highlight}">
<p style="${STYLES.pasoTexto}">Se pasado ese tempo segues a ter problemas, volve a esta guía e selecciona a primeira opción.</p>
</div>`
},
{
id: "irActivar",
tipo: "pregunta",
titulo: 'Imos aló! Proceso de activación <span aria-hidden="true">🚀</span>',
contidoHTML: `<p style="${STYLES.pasoTexto}">Perfecto. Para activar a túa conta, debes acceder á seguinte páxina: <a href="https://servizos.udc.es/activacion/activacion-novo-usuario" target="_blank"> activar a miña conta</a>. </p>
<p style="${STYLES.pasoTexto}">O formulario pedirache 3 datos:</p>
<ol style="${STYLES.pasoLista}">
<li>Código de activación</li>
<li>Tipo de documento (DNI, NIE, Pasaporte...)</li>
<li>Número de documento</li>
</ol>
<p style="${STYLES.pasoTexto}">Tes algunha dúbida sobre estes datos?</p>`,
opcions: [
{ texto_boton: "Teño todos os datos, que fago despois?", destino_id: "pasoResultado" },
{ texto_boton: "Non teño o código de activación ou non sei onde atopalo", destino_id: "axudaCodigo" },
{ texto_boton: "Teño dúbidas sobre o documento que debo usar", destino_id: "axudaDocumento" }
]
},
{
id: "axudaCodigo",
tipo: "solucion",
titulo: 'Onde atopar o teu código de activación <span aria-hidden="true">🔍</span>',
contidoHTML: `<h3 style="${STYLES.pasoH3}">Onde conseguir o código:</h3>
<ul style="${STYLES.pasoLista}">
<li><strong>Estudantes:</strong> O código de activación entrégase xunto co <strong>resgardo de matrícula</strong>.
<img
src="https://axudatic.udc.gal/pages/viewpageattachments.action?pageId=199295866&metadataLink=true&preview=/199295866/207192702/matr%C3%ADcula.png"
alt="Captura de pantalla de exemplo mostrando onde se atopa o NIA no resgardo de matrícula."
style="${STYLES.guiaImagen}"
>
Se non o atopas, podes solicitalo de novo na secretaría do teu centro.</li>
<li><strong>PAS, PDI, Persoal de Convenios e Contratos ou FUAC:</strong> Atoparalo xunto coa <strong>copia do teu contrato</strong> ou documento de nomeamento. Se non o tes, podes solicitalo de novo no servizo de persoal correspondente (Servizo de PAS, Servizo de PDI...).</li>
</ul>`
},
{
id: "axudaDocumento",
tipo: "solucion",
titulo: 'Que documento de identidade utilizar? <span aria-hidden="true">🆔</span>',
contidoHTML: `<p style="${STYLES.pasoTexto}">É moi importante que utilices <strong>exactamente o mesmo documento</strong> (mesmo tipo e mesmo número) que presentaches na UDC no momento de formalizar a túa matrícula ou o teu contrato.</p>
<div style="${STYLES.highlight}">
<p style="${STYLES.pasoTexto}"><span aria-hidden="true">⚠️</span> <strong>Atención:</strong> Se te identificaches cun pasaporte pero agora intentas usar un NIE, o sistema non te recoñecerá. Debes usar o documento que consta no teu expediente.</p>
</div>
<p style="${STYLES.pasoTexto}">Se tes dúbidas sobre que documento figura no teu expediente, contacta coa secretaría do teu centro (se es estudante) ou co servizo de persoal correspondente (se es traballador/a).</p>`
},
{
id: "pasoResultado",
tipo: "pregunta",
titulo: 'E o resultado foi... <span aria-hidden="true">🤔</span>',
contidoHTML: `<p style="${STYLES.pasoTexto}">Unha vez que enches os datos no formulario de activación e premes en "Activar", que sucedeu?</p>`,
opcions: [
{ texto_boton: "Todo foi ben! A conta activouse correctamente.", destino_id: "solucionExito" },
{ texto_boton: "Apareceu unha mensaxe de erro na activación.", destino_id: "solucionErro" }
]
},
{
id: "solucionExito",
tipo: "solucion",
titulo: 'Noraboa! A túa conta xa está activa <span aria-hidden="true">🎉</span>',
contidoHTML: `<p style="${STYLES.pasoTexto}">Xa tes as túas credenciais corporativas da UDC.</p>
<p style="${STYLES.pasoTexto}">E agora que? O seguinte paso é coñecer os servizos básicos e configuralos correctamente.</p>
<p style="${STYLES.pasoTexto}">Recomendámosche que visites a nosa páxina de benvida, para guiarte nos teus <a href="https://axudatic.udc.gal/display/CSU/Primeiros+pasos+na+UDC" target="_blank"> primeiros pasos</a>.</p>`
},
{
id: "solucionErro",
tipo: "solucion",
titulo: 'Erro durante a activación <span aria-hidden="true">🔧</span>',
contidoHTML: `<p style="${STYLES.pasoTexto}">Se despois de seguir todos os pasos e comprobar que os datos son correctos segues a recibir unha mensaxe de erro, o mellor é que contactes directamente co noso equipo de soporte para que o revisen.</p>
<p style="${STYLES.pasoTexto}">Envía un correo electrónico a <strong>cau.sic@udc.es</strong> explicando o teu caso. Non esquezas incluír o teu nome completo e o NIA para axilizar a resolución.</p>`
}
],
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> |
