Volver al índice

docs/visor/index.html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#111414">
  <meta name="description" content="El huésped de Raps: evolución, movimientos, modelos y voz.">
  <title>Raps · El huésped</title>
  <link rel="stylesheet" href="style.css">
  <script src="viewer.js" defer></script>
</head>
<body>
  <header><a class="brand" href="#">RAPS<span>EL HUÉSPED</span></a><label class="safe-switch"><input type="checkbox" id="safe"> Modo sensible</label></header>
  <main>
    <section class="intro"><p class="eyebrow">ALGO VOLVIÓ CON LA PIEDRA</p><h1>La piel todavía<br>recuerda su nombre.</h1><p class="description">Un huésped que cambia con los días. La misma piel; un cuerpo que ya no puede reconocerse.</p><a class="primary-link" href="#movimiento">Ver sus movimientos <span aria-hidden="true">↓</span></a></section>
    <section class="portrait" aria-label="Aspecto del huésped"><img id="hero" src="media/parasito-modelos.png" alt="El huésped de cuerpo completo"><div class="caption"><span>El huésped</span><span id="phase-name">Fase 4</span></div></section>
    <section class="evolution" aria-label="Etapas de transformación"><div class="section-title"><h2>Lo que queda de él</h2><p>Elegí una etapa.</p></div><div id="stages" class="tabs"></div><img id="stage-image" src="media/parasito-fase-4.png" alt="Etapa de transformación seleccionada" loading="lazy"></section>
    <section id="movimiento" class="movement"><div class="section-title"><h2>El cuerpo se adapta</h2><p>Miralo caminar, plegarse y trepar.</p></div><div id="modes" class="tabs"></div><div id="clearance-panel" hidden><p>Altura del paso</p><div id="clearance" class="tabs"></div></div><label class="playback-speed">Velocidad <select id="playback-speed"><option value="0.5">0,5×</option><option value="1" selected>1×</option><option value="1.5">1,5×</option><option value="2">2×</option><option value="3">3×</option></select></label><div class="motion-frame"><button id="motion-play" type="button" aria-label="Reproducir animación"><span aria-hidden="true">▶</span></button><video id="motion" controls muted loop playsinline preload="metadata" poster="media/parasito-modelos.png"><source src="media/parasito-idle.mp4" type="video/mp4"></video></div><p id="motion-description" class="caption">Quieto, pero nunca inmóvil.</p></section>
    <section class="detail"><div><p class="eyebrow">SU ROSTRO</p><h2>Alguien vivía<br>detrás de esos ojos.</h2><p>El pelo, la ropa y la piel pertenecen al huésped. La transformación deja rastros de quien fue.</p></div><img id="face" src="media/parasito-rostro.png" alt="Rostro del huésped" loading="lazy"></section>
    <section id="voice-panel" class="voice"><div><p class="eyebrow">SU VOZ</p><h2>Escuchá lo que recuerda.</h2></div><audio id="voice" controls preload="none" src="media/parasito-voz.mp3"></audio><a href="media/parasito-encuentro-voz.mp4">Ver el encuentro con voz</a></section>
    <section id="sounds-panel" class="sounds" aria-labelledby="sounds-title"><div class="section-title"><h2 id="sounds-title">Sonidos del huésped</h2><p>Pasos, ataque, trepada y persecución.</p></div><div id="sounds" class="sound-grid"></div></section>
    <section class="evolution"><div class="section-title"><h2>El cuerpo que fabrican</h2><p>Placas y refuerzos sobre la piel del huésped.</p></div><div class="prefab-grid"><figure><img src="media/parasito-prefab-obsidian.png" loading="lazy" alt="Piezas articuladas de obsidian"><figcaption>Placas oscuras</figcaption></figure><figure><img src="media/parasito-prefab-iron.png" loading="lazy" alt="Piezas articuladas de iron"><figcaption>Hierro</figcaption></figure><figure><img src="media/parasito-prefab-diamond.png" loading="lazy" alt="Piezas articuladas de diamond"><figcaption>Diamante</figcaption></figure><figure><img src="media/parasito-prefab-copper.png" loading="lazy" alt="Piezas articuladas de copper"><figcaption>Cobre</figcaption></figure></div></section><section class="downloads"><div><h2>Para mirar más de cerca</h2><p>Modelos texturados, imágenes y animaciones.</p></div><a href="modelos-3d.zip" download>Descargar modelos 3D <span aria-hidden="true">↗</span></a><a href="media/parasito-evolucion.png" target="_blank" rel="noopener">Ver todas las fases <span aria-hidden="true">↗</span></a></section>
  </main>
  <footer><span>Raps · El huésped</span><a href="visual/">Galería visual</a><a href="auditoria/">Código y documentación</a><a href="#">Volver arriba ↑</a></footer>
</body>
</html>