// ───────────────────────── Flipbook · páginas con contenido real ───────────────────────── // Each page is rendered once at a fixed 360×480 "sheet" and scaled, so the // thumbnail and the large preview are pixel-for-pixel the same page (WYSIWYG). const PAGE_DATA = { u1: { color: '#3a4fa0', sections: [ { h: 'El universo y las galaxias', p: [ 'El universo es todo lo que existe: materia, energía, espacio y tiempo. Se formó hace unos 13 800 millones de años en un acontecimiento llamado el Big Bang.', 'Las galaxias son enormes agrupaciones de estrellas, gas y polvo unidas por la gravedad. El Sol forma parte de la Vía Láctea.' ] }, { h: 'El sistema solar', p: [ 'El sistema solar está formado por el Sol y los cuerpos que giran a su alrededor: ocho planetas, sus satélites, asteroides y cometas.', 'Los planetas describen órbitas elípticas. Los interiores son rocosos y los exteriores, gaseosos.' ] }, ] }, u2: { color: '#a06a32', sections: [ { h: 'Estructura de la geosfera', p: [ 'La geosfera es la parte sólida de la Tierra. Se divide en corteza, manto y núcleo, capas con distinta composición y temperatura.', 'La corteza es la capa más externa y delgada, sobre la que se asientan los continentes y los océanos.' ] }, { h: 'Minerales y rocas', p: [ 'Un mineral es una sustancia sólida, natural e inorgánica con una composición química definida, como el cuarzo o el feldespato.', 'Las rocas son agregados de minerales. Según su origen son magmáticas, sedimentarias o metamórficas.' ] }, ] }, u3: { color: '#2f7fb0', sections: [ { h: 'La atmósfera', p: [ 'La atmósfera es la capa de gases que rodea la Tierra. Está compuesta sobre todo por nitrógeno (78 %) y oxígeno (21 %).', 'Nos protege de la radiación solar, hace posible la vida y regula la temperatura del planeta.' ] }, { h: 'La hidrosfera y el ciclo del agua', p: [ 'La hidrosfera es el conjunto del agua del planeta: océanos, ríos, lagos, glaciares y aguas subterráneas.', 'El agua circula entre la superficie y la atmósfera mediante la evaporación, la condensación y las precipitaciones.' ] }, ] }, u4: { color: '#0a8aa0', sections: [ { h: '¿Qué es la célula?', p: [ 'La célula es la unidad más pequeña capaz de realizar las funciones vitales: nutrición, relación y reproducción.', 'Según la teoría celular, todos los seres vivos están formados por células y toda célula procede de otra anterior.' ] }, { h: 'Células procariotas y eucariotas', p: [ 'Las células procariotas no tienen el núcleo definido; su material genético está disperso en el citoplasma, como en las bacterias.', 'Las células eucariotas poseen un núcleo rodeado de membrana y orgánulos como las mitocondrias o el aparato de Golgi.' ] }, ] }, u5: { color: '#3f8f3b', sections: [ { h: 'Características de los seres vivos', p: [ 'Todos los seres vivos están formados por células, intercambian materia y energía con el medio y son capaces de reproducirse.', 'Realizan tres funciones vitales: nutrición, relación y reproducción.' ] }, { h: 'La clasificación: los cinco reinos', p: [ 'La biodiversidad es la variedad de seres vivos que habitan la Tierra. Para estudiarlos se clasifican en grupos.', 'Se distinguen cinco reinos: moneras, protoctistas, hongos, plantas y animales.' ] }, ] }, u6: { color: '#c8823a', sections: [ { h: 'Animales vertebrados', p: [ 'Los animales vertebrados tienen un esqueleto interno con columna vertebral. Se agrupan en peces, anfibios, reptiles, aves y mamíferos.', 'Presentan simetría bilateral y un sistema nervioso desarrollado.' ] }, { h: 'Animales invertebrados', p: [ 'Los invertebrados carecen de columna vertebral y son la mayoría de las especies animales conocidas.', 'Incluyen grupos como los artrópodos, los moluscos, los gusanos o las medusas.' ] }, ] }, }; function pageContentFor(unit, page) { const data = PAGE_DATA[unit.id] || PAGE_DATA.u1; const sec = data.sections[page % data.sections.length]; const figure = page % 2 === 0; return { ...sec, figure, color: data.color, figN: `${unit.n}.${(page % 4) + 1}` }; } const SHEET_W = 360, SHEET_H = 480; function PageSheet({ unit, page }) { const c = pageContentFor(unit, page); return (
Unidad {unit.n} {unit.title}

{c.h}

{c.figure && (
Fig. {c.figN} · {c.h}
)} {c.p.map((t, i) => (

{t}

))}
Biología y Geología · 1.º ESO {page}
); } function ScaledSheet({ unit, page, scale }) { return (
); } const THUMB_W = 64; // Schematic thumbnail — NOT a page imitation. The hero is the page number; // a clear "Ver" button opens the full-screen viewer. function PageThumb({ unit, page, selected, onToggle, onPreview }) { return (
{/* selection checkbox */} {selected && } {/* page number */} {page} {/* Ver button — solo al pasar el ratón */}
); } function PagePreviewModal({ unit, page, selected, onToggle, onClose, onPrev, onNext, hasPrev, hasNext }) { const areaRef = React.useRef(null); const [scale, setScale] = React.useState(1.4); React.useLayoutEffect(() => { const compute = () => { const el = areaRef.current; if (!el) return; const availW = el.clientWidth - 140; // deja sitio a las flechas const availH = el.clientHeight - 36; setScale(Math.max(0.6, Math.min(availW / SHEET_W, availH / SHEET_H))); }; compute(); window.addEventListener('resize', compute); return () => window.removeEventListener('resize', compute); }, [page]); React.useEffect(() => { const h = (e) => { if (e.key === 'Escape') onClose(); else if (e.key === 'ArrowLeft' && hasPrev) onPrev(); else if (e.key === 'ArrowRight' && hasNext) onNext(); }; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }, [hasPrev, hasNext, onClose, onPrev, onNext]); return ReactDOM.createPortal((
{/* Barra superior */}

Unidad {unit.n} · {unit.title}

Página {page}

{/* Visor */}
{/* Barra inferior */}
), document.body); } Object.assign(window, { PAGE_DATA, pageContentFor, PageSheet, ScaledSheet, PageThumb, PagePreviewModal });