421 lines
15 KiB
HTML
421 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>TAI – AGE | Legislación</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
.leyes-layout {
|
||
display: flex;
|
||
height: calc(100vh - var(--topbar-h));
|
||
margin-top: var(--topbar-h);
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ── Panel izquierdo ─── */
|
||
.leyes-sidebar {
|
||
width: 320px;
|
||
flex-shrink: 0;
|
||
background: var(--bg-alt);
|
||
border-right: 1px solid var(--border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
.leyes-sidebar-header {
|
||
padding: 1rem 1.1rem .8rem;
|
||
border-bottom: 1px solid var(--border);
|
||
flex-shrink: 0;
|
||
}
|
||
.leyes-sidebar-header h2 {
|
||
font-size: .9rem;
|
||
font-weight: 700;
|
||
color: var(--accent-2);
|
||
text-transform: uppercase;
|
||
letter-spacing: .06em;
|
||
margin-bottom: .5rem;
|
||
}
|
||
.leyes-search {
|
||
display: flex;
|
||
align-items: center;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
padding: .35rem .7rem;
|
||
gap: .5rem;
|
||
}
|
||
.leyes-search i { color: var(--text-muted); font-size: .85rem; }
|
||
.leyes-search input {
|
||
background: none;
|
||
border: none;
|
||
outline: none;
|
||
color: var(--text);
|
||
font-size: .85rem;
|
||
width: 100%;
|
||
}
|
||
.leyes-search input::placeholder { color: var(--text-muted); }
|
||
|
||
.leyes-list {
|
||
overflow-y: auto;
|
||
flex: 1;
|
||
padding: .5rem 0;
|
||
}
|
||
|
||
.ley-grupo-label {
|
||
font-size: .7rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: .07em;
|
||
color: var(--text-muted);
|
||
padding: .7rem 1.1rem .3rem;
|
||
}
|
||
.ley-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: .2rem;
|
||
padding: .6rem 1.1rem;
|
||
cursor: pointer;
|
||
border-left: 3px solid transparent;
|
||
transition: background .12s, border-color .12s;
|
||
}
|
||
.ley-item:hover { background: var(--bg-hover); }
|
||
.ley-item.active {
|
||
background: var(--bg-hover);
|
||
border-left-color: var(--accent);
|
||
}
|
||
.ley-item.hidden { display: none; }
|
||
.ley-nombre {
|
||
font-size: .87rem;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
line-height: 1.3;
|
||
}
|
||
.ley-subtitulo {
|
||
font-size: .75rem;
|
||
color: var(--text-muted);
|
||
}
|
||
.ley-badge {
|
||
display: inline-block;
|
||
font-size: .68rem;
|
||
font-weight: 700;
|
||
padding: .1rem .4rem;
|
||
border-radius: 4px;
|
||
background: rgba(0,122,204,.15);
|
||
color: var(--accent);
|
||
margin-top: .1rem;
|
||
width: fit-content;
|
||
}
|
||
|
||
/* ── Panel derecho ─── */
|
||
.leyes-viewer {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
.leyes-viewer-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .8rem;
|
||
padding: .75rem 1.2rem;
|
||
background: var(--bg-alt);
|
||
border-bottom: 1px solid var(--border);
|
||
flex-shrink: 0;
|
||
}
|
||
.leyes-viewer-title {
|
||
font-size: .9rem;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
flex: 1;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.leyes-viewer-actions {
|
||
display: flex;
|
||
gap: .5rem;
|
||
flex-shrink: 0;
|
||
}
|
||
.leyes-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .4rem;
|
||
font-size: .8rem;
|
||
font-weight: 600;
|
||
padding: .35rem .8rem;
|
||
border-radius: 6px;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
color: var(--text);
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
transition: background .12s, border-color .12s;
|
||
}
|
||
.leyes-btn:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent-2); }
|
||
.leyes-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||
.leyes-btn.primary:hover { background: #0090e8; }
|
||
|
||
.leyes-viewer iframe {
|
||
flex: 1;
|
||
border: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.leyes-placeholder {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 1rem;
|
||
color: var(--text-muted);
|
||
}
|
||
.leyes-placeholder i { font-size: 3rem; opacity: .3; }
|
||
.leyes-placeholder p { font-size: .95rem; }
|
||
|
||
/* ── Responsive ─── */
|
||
@media (max-width: 700px) {
|
||
.leyes-layout { flex-direction: column; height: auto; overflow: auto; }
|
||
.leyes-sidebar { width: 100%; height: 260px; border-right: none; border-bottom: 1px solid var(--border); }
|
||
.leyes-viewer { height: calc(100vh - var(--topbar-h) - 260px); min-height: 400px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ── Topbar ─────────────────────────────────────────── -->
|
||
<nav class="topbar">
|
||
<span class="topbar-brand"><i class="fas fa-graduation-cap"></i> TAI – AGE</span>
|
||
<nav class="topbar-nav">
|
||
<a href="index.html">Inicio</a>
|
||
<a href="curso.html">Temario</a>
|
||
<a href="cuestionarios/index.html">Cuestionarios</a>
|
||
<a href="leyes.html" class="active">Leyes</a>
|
||
<a href="noticias.html">Noticias</a>
|
||
</nav>
|
||
</nav>
|
||
|
||
<!-- ── Layout ─────────────────────────────────────────── -->
|
||
<div class="leyes-layout">
|
||
|
||
<!-- Sidebar con lista de leyes -->
|
||
<aside class="leyes-sidebar">
|
||
<div class="leyes-sidebar-header">
|
||
<h2><i class="fas fa-landmark"></i> Legislación TAI</h2>
|
||
<div class="leyes-search">
|
||
<i class="fas fa-search"></i>
|
||
<input type="text" id="search-leyes" placeholder="Buscar ley…" autocomplete="off">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="leyes-list" id="leyes-list">
|
||
|
||
<div class="ley-grupo-label">Bloque I · Tema 1 — Constitución</div>
|
||
|
||
<div class="ley-item" data-pdf="leyes/BOE-A-1978-31229-consolidado.pdf"
|
||
data-titulo="Constitución Española de 1978">
|
||
<span class="ley-nombre">Constitución Española de 1978</span>
|
||
<span class="ley-subtitulo">La Constitución Española de 1978. Derechos y deberes fundamentales. La Corona: funciones constitucionales del Rey.</span>
|
||
<span class="ley-badge">B1 · T1</span>
|
||
</div>
|
||
|
||
<div class="ley-item" data-pdf="leyes/BOE-A-1981-12774-consolidado-estados-alarma-excepcion-sitio.pdf"
|
||
data-titulo="LO 4/1981 – Estados de alarma, excepción y sitio">
|
||
<span class="ley-nombre">LO 4/1981 – Estados de alarma, excepción y sitio</span>
|
||
<span class="ley-subtitulo">Art. 55 CE · Suspensión de derechos</span>
|
||
<span class="ley-badge">B1 · T1</span>
|
||
</div>
|
||
|
||
<div class="ley-grupo-label">Bloque I · Tema 2 — Cortes, TC, Defensor</div>
|
||
|
||
<div class="ley-item" data-pdf="leyes/BOE-A-1981-10325-consolidado-defensor-del-pueblo.pdf"
|
||
data-titulo="LO 3/1981 – El Defensor del Pueblo">
|
||
<span class="ley-nombre">LO 3/1981 – El Defensor del Pueblo</span>
|
||
<span class="ley-subtitulo">Composición, funciones y procedimiento</span>
|
||
<span class="ley-badge">B1 · T2</span>
|
||
</div>
|
||
|
||
<div class="ley-grupo-label">Bloque I · Tema 3 — El Gobierno</div>
|
||
|
||
<div class="ley-item" data-pdf="leyes/BOE-A-1997-25336-consolidado-gobierno.pdf"
|
||
data-titulo="Ley 50/1997 – Del Gobierno">
|
||
<span class="ley-nombre">Ley 50/1997 – Del Gobierno</span>
|
||
<span class="ley-subtitulo">Composición, organización y funcionamiento</span>
|
||
<span class="ley-badge">B1 · T3</span>
|
||
</div>
|
||
|
||
<div class="ley-grupo-label">Bloque I · Tema 4 — Empleado Público</div>
|
||
|
||
<div class="ley-item" data-pdf="leyes/01 Retribuciones personal funcionario 2023.pdf"
|
||
data-titulo="Retribuciones personal funcionario 2023">
|
||
<span class="ley-nombre">Retribuciones del personal funcionario 2023</span>
|
||
<span class="ley-subtitulo">Ley de Presupuestos – Capítulo retributivo</span>
|
||
<span class="ley-badge">B1 · T4</span>
|
||
</div>
|
||
|
||
<div class="ley-grupo-label">Bloque I · Tema 5 — Igualdad, violencia y dependencia</div>
|
||
|
||
<div class="ley-item" data-pdf="leyes/BOE-A-2007-6115-consolidado igualdad de genero.pdf"
|
||
data-titulo="LO 3/2007 – Igualdad efectiva de mujeres y hombres">
|
||
<span class="ley-nombre">LO 3/2007 – Igualdad efectiva de mujeres y hombres</span>
|
||
<span class="ley-subtitulo">Principios, derechos y medidas de igualdad</span>
|
||
<span class="ley-badge">B1 · T5</span>
|
||
</div>
|
||
|
||
<div class="ley-item" data-pdf="leyes/BOE-A-2004-21760-consolidado-violencia-genero.pdf"
|
||
data-titulo="LO 1/2004 – Medidas de protección integral contra la violencia de género">
|
||
<span class="ley-nombre">LO 1/2004 – Violencia de género</span>
|
||
<span class="ley-subtitulo">Medidas de protección integral</span>
|
||
<span class="ley-badge">B1 · T5</span>
|
||
</div>
|
||
|
||
<div class="ley-item" data-pdf="leyes/BOE-A-2006-21990-consolidado-dependencia.pdf"
|
||
data-titulo="Ley 39/2006 – Promoción de la autonomía personal y atención a la dependencia">
|
||
<span class="ley-nombre">Ley 39/2006 – Dependencia (LAPAD)</span>
|
||
<span class="ley-subtitulo">Autonomía personal y atención a la dependencia</span>
|
||
<span class="ley-badge">B1 · T5</span>
|
||
</div>
|
||
|
||
<div class="ley-grupo-label">Bloque I · Tema 6 — Sociedad de la información</div>
|
||
|
||
<div class="ley-item" data-pdf="leyes/1-6-Sociedad-de-la-informacion-BOE-A-2002-13758-consolidado.pdf"
|
||
data-titulo="Ley 34/2002 – LSSI – Servicios de la Sociedad de la Información">
|
||
<span class="ley-nombre">Ley 34/2002 – LSSI</span>
|
||
<span class="ley-subtitulo">Servicios de la sociedad de la información y comercio electrónico</span>
|
||
<span class="ley-badge">B1 · T6</span>
|
||
</div>
|
||
|
||
<div class="ley-item" data-pdf="leyes/1-6-firma-electronica-BOE-A-2003-23399-consolidado.pdf"
|
||
data-titulo="Ley 59/2003 – Firma Electrónica">
|
||
<span class="ley-nombre">Ley 59/2003 – Firma Electrónica</span>
|
||
<span class="ley-subtitulo">Tipos de firma, certificados y prestadores</span>
|
||
<span class="ley-badge">B1 · T6</span>
|
||
</div>
|
||
|
||
<div class="ley-grupo-label">Bloque I · Tema 7 — Protección de datos</div>
|
||
|
||
<div class="ley-item" data-pdf="leyes/1-7-BOE-A-2018-16673-consolidado.pdf"
|
||
data-titulo="LO 3/2018 – LOPDGDD – Protección de datos personales">
|
||
<span class="ley-nombre">LO 3/2018 – LOPDGDD</span>
|
||
<span class="ley-subtitulo">Protección de datos personales y garantía de derechos digitales</span>
|
||
<span class="ley-badge">B1 · T7</span>
|
||
</div>
|
||
|
||
</div><!-- /leyes-list -->
|
||
</aside>
|
||
|
||
<!-- Visor PDF -->
|
||
<div class="leyes-viewer" id="leyes-viewer">
|
||
<div class="leyes-viewer-header">
|
||
<i class="fas fa-file-pdf" style="color:var(--error);font-size:1rem;flex-shrink:0"></i>
|
||
<span class="leyes-viewer-title" id="viewer-title">Selecciona una ley</span>
|
||
<div class="leyes-viewer-actions">
|
||
<a id="btn-temario" href="#" class="leyes-btn" style="display:none">
|
||
<i class="fas fa-book-open"></i> Ver tema
|
||
</a>
|
||
<a id="btn-download" href="#" download class="leyes-btn primary" style="display:none">
|
||
<i class="fas fa-download"></i> Descargar PDF
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="leyes-placeholder" id="viewer-placeholder">
|
||
<i class="fas fa-landmark"></i>
|
||
<p>Selecciona una ley del panel izquierdo para leerla aquí.</p>
|
||
</div>
|
||
<iframe id="pdf-frame" src="" style="display:none" title="Visor PDF de ley"></iframe>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
// Mapa ley → URL del tema en curso.html
|
||
const LEY_TEMA_MAP = {
|
||
'BOE-A-1981-12774': 'curso.html?bloque=1&tema=1',
|
||
'BOE-A-1981-10325': 'curso.html?bloque=1&tema=2',
|
||
'BOE-A-1997-25336': 'curso.html?bloque=1&tema=3',
|
||
'Retribuciones': 'curso.html?bloque=1&tema=4',
|
||
'BOE-A-2007-6115': 'curso.html?bloque=1&tema=5',
|
||
'BOE-A-2004-21760': 'curso.html?bloque=1&tema=5',
|
||
'BOE-A-2006-21990': 'curso.html?bloque=1&tema=5',
|
||
'BOE-A-2002-13758': 'curso.html?bloque=1&tema=6',
|
||
'BOE-A-2003-23399': 'curso.html?bloque=1&tema=6',
|
||
'BOE-A-2018-16673': 'curso.html?bloque=1&tema=7',
|
||
};
|
||
|
||
function getTemaUrl(pdfPath) {
|
||
for (const [key, url] of Object.entries(LEY_TEMA_MAP)) {
|
||
if (pdfPath.includes(key)) return url;
|
||
}
|
||
return null;
|
||
}
|
||
|
||
// Abrir ley
|
||
document.querySelectorAll('.ley-item').forEach(item => {
|
||
item.addEventListener('click', () => {
|
||
const pdf = item.dataset.pdf;
|
||
const titulo = item.dataset.titulo;
|
||
|
||
// Activo visual
|
||
document.querySelectorAll('.ley-item').forEach(i => i.classList.remove('active'));
|
||
item.classList.add('active');
|
||
|
||
// Mostrar iframe
|
||
const frame = document.getElementById('pdf-frame');
|
||
const placeholder = document.getElementById('viewer-placeholder');
|
||
const titleEl = document.getElementById('viewer-title');
|
||
const btnDown = document.getElementById('btn-download');
|
||
const btnTema = document.getElementById('btn-temario');
|
||
|
||
frame.src = pdf;
|
||
frame.style.display = 'block';
|
||
placeholder.style.display = 'none';
|
||
titleEl.textContent = titulo;
|
||
|
||
btnDown.href = pdf;
|
||
btnDown.style.display = 'inline-flex';
|
||
|
||
const temaUrl = getTemaUrl(pdf);
|
||
if (temaUrl) {
|
||
btnTema.href = temaUrl;
|
||
btnTema.style.display = 'inline-flex';
|
||
} else {
|
||
btnTema.style.display = 'none';
|
||
}
|
||
});
|
||
});
|
||
|
||
// Búsqueda
|
||
document.getElementById('search-leyes').addEventListener('input', function () {
|
||
const q = this.value.toLowerCase().trim();
|
||
document.querySelectorAll('.ley-item').forEach(item => {
|
||
const text = item.textContent.toLowerCase();
|
||
item.classList.toggle('hidden', q.length > 0 && !text.includes(q));
|
||
});
|
||
// Ocultar etiquetas de grupo si todos sus items están ocultos
|
||
document.querySelectorAll('.ley-grupo-label').forEach(label => {
|
||
let sibling = label.nextElementSibling;
|
||
let allHidden = true;
|
||
while (sibling && !sibling.classList.contains('ley-grupo-label')) {
|
||
if (!sibling.classList.contains('hidden')) { allHidden = false; break; }
|
||
sibling = sibling.nextElementSibling;
|
||
}
|
||
label.style.display = allHidden ? 'none' : '';
|
||
});
|
||
});
|
||
|
||
// Si viene con ?ley= en la URL, autoseleccionar
|
||
const params = new URLSearchParams(location.search);
|
||
const leyParam = params.get('ley');
|
||
if (leyParam) {
|
||
const target = document.querySelector(`.ley-item[data-pdf*="${leyParam}"]`);
|
||
if (target) target.click();
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|