📚 Oposiciones CAM — Plataforma de Estudio

Plataforma web ultraligera, instalable como app y completamente offline para preparar las oposiciones de la Comunidad Autónoma de Madrid. Temario íntegro cifrado con AES-256, +780 preguntas tipo test, modo oscuro y seguimiento personal de progreso.

🔗 Web pública: angelcasta1.github.io/Oposiciones-CAM

---

✨ ¿Qué es?

Una web estática + PWA (Progressive Web App) que se puede instalar como aplicación en móvil y PC y funciona sin conexión. Sin servidor, sin frameworks, sin build step.

El contenido del temario está cifrado con AES‑GCM 256 y solo se descifra en el navegador al introducir la clave de acceso, de forma que el código fuente público en GitHub no expone el material de estudio.

---

🔐 Privacidad y cifrado

El proyecto utiliza un doble candado:

1. Pantalla de bloqueo (privacy.js) — la web pide una clave antes de mostrar el contenido. Se desbloquea por URL mágica (?acceso=...) o por formulario modal, validándose contra un archivo canary cifrado, y el estado se guarda en localStorage.
2. Cifrado AES del contenido (crypto.js) — el contenido de cada tema viaja cifrado en archivos .json dentro de temas-cifrados/ y se descifra en el navegador con Web Crypto API nativa:
   • Algoritmo: AES‑GCM con clave de 256 bits
   • Derivación de clave: PBKDF2 + SHA‑256, 100 000 iteraciones
   • Formato: salt (16 B) + IV (12 B) + ciphertext + authTag (16 B), codificado en base64

💡 La clave nunca se sube al repositorio en texto plano. El acceso se gestiona compartiendo la URL con el parámetro de acceso únicamente con personas autorizadas.

---

📁 Estructura del proyecto

oposiciones-cam/
├── index.html                  # Portada / landing con estadísticas globales
├── tema1.html                  # Tema 1: Constitución Española de 1978 (61 arts)
├── tema2.html                  # Tema 2: Estatuto de Autonomía CAM (28 arts)
├── tema3.html                  # Tema 3: Asamblea, Procedimiento Leg. y Gobierno CAM (184 arts)
├── tema4.html                  # Tema 4: La Administración de la CAM (94 arts)
├── tema5.html                  # Tema 5: Info y Administración Electrónica (71 arts)
├── tema6.html                  # Tema 6: Protección de Datos Personales — RGPD y LOPDGDD (191 arts)
├── tema7.html                  # Tema 7: El Personal al Servicio de las AAPP — TREBEP (35 arts)
├── tema8.html                  # Tema 8: Derechos, Deberes, Disciplinario e Incompatibilidades (68 arts)
├── tema9.html                  # Tema 9: Convenio Colectivo Único del Personal Laboral CAM (284 arts/disp)
├── tema1-esp.html              # Tema 1 Específico: Modalidades de Atención a la Infancia y Pedagogía (17 arts)
├── tema2-esp.html              # Tema 2 Específico: La Escuela Infantil y Protección a la Infancia (20 arts)
├── tema3-esp.html              # Tema 3 Específico: Riesgo Social y Maltrato Infantil (18 arts)
├── tema4-esp.html              # Tema 4 Específico: Sentido, Desarrollo 0-6 y Reflejos Primarios (9 arts/secc)
├── tema5-esp.html              # Tema 5 Específico: Organización de las Escuelas de Educación Infantil (12 arts)
├── tema6-esp.html              # Tema 6 Específico: La Evaluación en la Escuela Infantil (16 arts)
├── tema8-esp.html              # Tema 8 Específico: Teoría Curricular y DUA (10 arts)
├── tema9-esp.html              # Tema 9 Específico: Propuesta Pedagógica y Programación (8 arts)
├── tests.html                  # Tests interactivos (estudio + examen + flashcards + falladas)
├── progreso.html               # Racha, logros, gráfico SVG y diagnóstico por tema
├── 404.html                    # Página de error personalizada
├── assets/
│   ├── app.js                  # Storage, modo oscuro, toasts, racha, logros, notas
│   ├── crypto.js               # Cifrado/descifrado AES‑GCM + PBKDF2
│   ├── privacy.js              # Validación de acceso y pantalla de bloqueo
│   ├── privacy.css             # Estilos de pantalla de bloqueo
│   ├── tema-extras.js          # Copiar texto, siguiente artículo, atajos
│   └── theme.css               # Paleta rosa pastel + componentes + modo oscuro
├── temas-cifrados/
│   ├── canary.json             # Testigo para validar la clave de acceso
│   ├── tema1.json              # Contenido cifrado del Tema 1
│   ├── tema2.json              # Contenido cifrado del Tema 2
│   ├── tema3.json              # Contenido cifrado del Tema 3
│   ├── tema4.json              # Contenido cifrado del Tema 4
│   ├── tema5.json              # Contenido cifrado del Tema 5
│   ├── tema6.json              # Contenido cifrado del Tema 6
│   ├── tema7.json              # Contenido cifrado del Tema 7
│   ├── tema8.json              # Contenido cifrado del Tema 8
│   ├── tema9.json              # Contenido cifrado del Tema 9
│   ├── tema1-esp.json          # Contenido cifrado del Tema 1 Específico
│   ├── tema2-esp.json          # Contenido cifrado del Tema 2 Específico
│   ├── tema3-esp.json          # Contenido cifrado del Tema 3 Específico
│   ├── tema4-esp.json          # Contenido cifrado del Tema 4 Específico
│   ├── tema5-esp.json          # Contenido cifrado del Tema 5 Específico
│   ├── tema6-esp.json          # Contenido cifrado del Tema 6 Específico
│   ├── tema8-esp.json          # Contenido cifrado del Tema 8 Específico
│   └── tema9-esp.json          # Contenido cifrado del Tema 9 Específico
├── icons/
│   ├── icon-192.png
│   └── icon-512.png
├── favicon.svg
├── og-image.png                # Preview para redes sociales
├── manifest.webmanifest        # PWA manifest
├── sw.js                       # Service Worker (offline cache v31)
└── README.md

---

🎯 Funcionalidades destacadas

📖 Modo Estudio

• Texto íntegro y oficial de cada artículo (sin resúmenes ni recortes)
• Doble bloque temático: Selector rápido entre Bloque Común (Temas 1–9) y Bloque Específico (Educador Infantil)
• Acordeón por artículo, con índice lateral + scrollspy
• Buscador con resaltado de coincidencias en tiempo real + contador
• Marcadores 🤔 Dudoso y ⭐ Importante persistentes
• Auto‑marcado de artículos como leídos al interactuar con ellos
• Notas personales por artículo
• Mini‑mapa lateral en pantallas amplias
• Atajos de teclado: / buscar · ↑/↓ navegar · Esc cerrar · ? ayuda
• Botón copiar texto y navegación rápida dentro de cada artículo
• Hash deep‑linking que abre y resalta el artículo de destino

✅ Tests Interactivos (782 preguntas)

• Bancos específicos por tema + Test Mixto (20 aleatorias) + Mis falladas (repaso inteligente)
• Modo Estudio con feedback inmediato y fundamentación legal detallada
• Modo Examen con cronómetro configurable (15/30/45/60 min) y minimapa interactivo
• Modo Flashcards 🎴 para memorización rápida con atajos Space / S / N
• Marcas 🤔 / ⭐ persistentes también en las preguntas del test
• Atajos de teclado: A/B/C/D o 1–4, Enter, Esc, D, I
• Vista de revisión con filtros (todas / falladas / acertadas / marcadas)
• 🎉 Confeti al superar el 90 % de aciertos

📊 Mi Progreso

• 🔥 Racha de estudio con calendario visual de actividad
• 🏆 Sistema de logros desbloqueables
• 📈 Gráfico SVG con la evolución de los últimos tests
• Histórico detallado de puntuaciones e intentos
• Estadísticas reales en vivo: 17 temas · 1126 artículos · 782 preguntas
• 📥 Exportar/importar datos en JSON (copia de seguridad)
• 🗑 Borrado selectivo o reinicio de estadísticas

🌙 Modo Oscuro

• Selector en la barra superior de cada página
• Paleta completa adaptada a tonos noche/burdeos suaves
• Persistente y respeta prefers-color-scheme por defecto
• theme-color dinámico para la barra del navegador móvil

📱 PWA (Offline)

• Manifest completo con accesos directos (Shortcuts)
• Service Worker con caché de todos los assets esenciales y JSON cifrados
• Funciona en metro / tren / modo avión sin conexión
• Detector de conexión integrado
• Open Graph y Twitter Cards configurados

---

🛠 Stack

• HTML5 semántico
• CSS3 con custom properties, Grid, Flexbox y data-theme switch
• JavaScript Vanilla (sin dependencias externas ni compilación)
• Web Crypto API (AES‑GCM 256 + PBKDF2 SHA‑256 100 k)
• localStorage para persistencia total en el cliente
• Service Worker para PWA y soporte offline
• Google Fonts: Playfair Display + Source Serif 4

---

🎨 Paleta de Color

Token	Color	Muestra	Uso
#fce4ec	Rosa pastel	🌸	Fondos suaves y tarjetas
#f06292	Rosa medio	🌷	Acentos, tags y bordes
#e05a80	Rosa intenso	🌹	Hover y botones de acción
#c0305a	Burdeos	🍷	Títulos principales, marcas y enlaces

---

🚀 Uso local

# Clona el repo
git clone https://github.com/AngelCasta1/Oposiciones-CAM.git
cd Oposiciones-CAM

# Inicia un servidor estático local
python3 -m http.server 8080
# o bien:  npx serve .

# Abre en el navegador
http://localhost:8080/?acceso=TU_CLAVE

Para descifrar el contenido necesitas la clave de acceso. Si no la tienes, contacta con el autor.

---

📜 Licencia

Uso personal. El temario referencia normativa de dominio público (BOE, BOCM, DOUE); la transcripción, estructuración, maquetación, banco de preguntas y diseño de esta plataforma son de autoría propia.

---

👤 Autor

Ángel Castaño · @AngelCasta1

Hecho con 🌸 para preparar las oposiciones a la Comunidad de Madrid.