99 lines
5.1 KiB
HTML
99 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NovelasVM - Plataforma de Novelas Visuales</title>
|
|
<meta name="description" content="Descubre y juega novelas visuales directamente en tu navegador.">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/assets/styles.css">
|
|
</head>
|
|
<body>
|
|
<nav class="navbar">
|
|
<div class="container navbar-inner">
|
|
<a class="brand" href="/" aria-label="NovelasVM Inicio">
|
|
<svg class="brand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z"></path>
|
|
<path d="M2 17l10 5 10-5"></path>
|
|
<path d="M2 12l10 5 10-5"></path>
|
|
</svg>
|
|
<span class="brand-text">NovelasVM</span>
|
|
</a>
|
|
|
|
<div class="theme-switcher" role="group" aria-label="Selector de tema">
|
|
<button class="theme-btn" data-theme-value="dark" aria-label="Tema oscuro" title="Oscuro">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
|
</svg>
|
|
<span>Oscuro</span>
|
|
</button>
|
|
<button class="theme-btn" data-theme-value="light" aria-label="Tema claro" title="Claro">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="5"></circle>
|
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
|
</svg>
|
|
<span>Claro</span>
|
|
</button>
|
|
<button class="theme-btn" data-theme-value="immersive" aria-label="Tema inmersivo" title="Inmersivo">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M12 3a9 9 0 0 0-9 9v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a9 9 0 0 0-9-9z"></path>
|
|
<path d="M8 14v.01"></path>
|
|
<path d="M16 14v.01"></path>
|
|
<path d="M12 18a4 4 0 0 0 4-4H8a4 4 0 0 0 4 4z"></path>
|
|
</svg>
|
|
<span>Inmersivo</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="hero">
|
|
<div class="container">
|
|
<h1 class="hero-title">Tu biblioteca de novelas visuales</h1>
|
|
<p class="hero-subtitle">Juega, prueba y comparte novelas visuales desde el navegador. Soporta Ren'Py, Unity WebGL y proyectos web personalizados.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container main-content">
|
|
<div class="toolbar">
|
|
<div class="stats" id="stats" aria-live="polite">Cargando novelas...</div>
|
|
<div class="engine-legend" id="engineLegend"></div>
|
|
</div>
|
|
|
|
<div class="games-grid" id="gamesGrid" aria-busy="true">
|
|
<!-- Las tarjetas se renderizan desde JS -->
|
|
</div>
|
|
|
|
<div class="empty-state hidden" id="emptyState">
|
|
<div class="empty-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect>
|
|
<path d="M9 3v18"></path>
|
|
<path d="M14 9l2 2-2 2"></path>
|
|
</svg>
|
|
</div>
|
|
<h2>No hay novelas publicadas</h2>
|
|
<p>Usa el script <code>/opt/novelas/bin/build-novela.sh</code> para agregar tu primera novela.</p>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container footer-inner">
|
|
<span>NovelasVM · Plataforma aliada de Afterlife</span>
|
|
<span class="footer-meta">Multi-motor · Multi-tema</span>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="/assets/app.js" defer></script>
|
|
</body>
|
|
</html>
|