162 lines
6.6 KiB
HTML
162 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta
|
|
name="description"
|
|
content="Consulta estadísticas personales de jugadores en el panel Stats de HLL Vietnam."
|
|
/>
|
|
<title>Stats - HLL Vietnam</title>
|
|
<link rel="stylesheet" href="./assets/css/styles.css" />
|
|
</head>
|
|
<body data-backend-base-url="http://127.0.0.1:8000">
|
|
<div class="page-shell stats-page-shell">
|
|
<nav class="public-nav" aria-label="Navegación pública principal">
|
|
<a class="public-nav__link" href="./index.html">
|
|
Inicio
|
|
</a>
|
|
<a class="public-nav__link" href="./historico.html">
|
|
Histórico
|
|
</a>
|
|
<a class="public-nav__link is-active" href="./stats.html" aria-current="page">
|
|
Stats
|
|
</a>
|
|
<a class="public-nav__link" href="./ranking.html">
|
|
Ranking
|
|
</a>
|
|
</nav>
|
|
<header class="hero stats-hero">
|
|
<div class="hero__overlay"></div>
|
|
<div class="hero__content">
|
|
<div class="hero__brand">
|
|
<div class="logo-frame">
|
|
<img
|
|
src="./assets/img/logo.png"
|
|
alt="Logo oficial de la comunidad HLL Vietnam"
|
|
class="logo-frame__image"
|
|
width="1024"
|
|
height="1044"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
<div class="hero__copy">
|
|
<p class="eyebrow eyebrow--section">Sección Stats</p>
|
|
<h1 class="hero__title">
|
|
Estadísticas
|
|
<span class="hero__title-accent">Personales</span>
|
|
</h1>
|
|
<p class="hero__text">
|
|
Busca un jugador por nombre o ID y revisa sus resultados semanales, mensuales y ranking anual.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="content stats-content">
|
|
<section class="panel">
|
|
<div class="panel__shell">
|
|
<div class="panel__header">
|
|
<p class="eyebrow eyebrow--section">Buscador de jugadores</p>
|
|
<h2>Buscar por nombre o ID</h2>
|
|
</div>
|
|
<p class="panel__intro panel__intro--tight" id="stats-search-help">
|
|
Usa al menos 1 carácter para buscar. Al seleccionar un jugador se cargarán sus
|
|
stats y ranking semanal y mensual. El ranking anual se consulta por separado.
|
|
</p>
|
|
<form class="stats-search-form" id="stats-search-form">
|
|
<label class="stats-search-form__label" for="stats-search-input">
|
|
Jugador
|
|
</label>
|
|
<div class="stats-search-form__fields">
|
|
<input
|
|
class="stats-search-input"
|
|
id="stats-search-input"
|
|
type="search"
|
|
name="query"
|
|
placeholder="Ej: Rambo o 76561198000000000"
|
|
autocomplete="off"
|
|
aria-label="Texto de búsqueda de jugadores"
|
|
/>
|
|
<button class="discord-button" type="submit" aria-label="Buscar jugador por nombre o ID">
|
|
Buscar jugador
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<p class="stats-state stats-state--neutral" id="stats-search-state" role="status" aria-live="polite">
|
|
Estado inicial: usa el buscador para encontrar jugadores.
|
|
</p>
|
|
<div class="stats-result-list" id="stats-result-list" aria-live="polite"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel stats-panel" id="stats-profile-panel" hidden>
|
|
<div class="panel__shell">
|
|
<div class="panel__header">
|
|
<p class="eyebrow eyebrow--section">Resumen de jugador</p>
|
|
<h2 id="stats-profile-title">Perfil personal</h2>
|
|
</div>
|
|
<p class="panel__intro panel__intro--tight" id="stats-profile-state">
|
|
Selecciona un jugador para ver su panel personal.
|
|
</p>
|
|
<div class="stats-comparison-grid" id="stats-comparison-grid"></div>
|
|
<div class="stats-summary-grid" id="stats-summary-grid"></div>
|
|
<div class="stats-ranking-grid">
|
|
<article class="stats-summary-card">
|
|
<p class="stats-summary-title">Resumen semanal</p>
|
|
<div id="stats-weekly-summary">
|
|
Sin datos semanales. El ranking semanal se actualiza al cargar un jugador.
|
|
</div>
|
|
</article>
|
|
<article class="stats-summary-card">
|
|
<p class="stats-summary-title">Resumen mensual</p>
|
|
<div id="stats-monthly-summary">
|
|
Sin datos mensuales. El ranking mensual se actualiza al cargar un jugador.
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="panel__shell">
|
|
<div class="panel__header">
|
|
<p class="eyebrow eyebrow--section">Ranking anual</p>
|
|
<h2>Top 20 anual</h2>
|
|
</div>
|
|
<p class="panel__intro panel__intro--tight">
|
|
El ranking anual usa snapshots pre-computados para evitar recalcular toda la temporada en cada consulta.
|
|
</p>
|
|
<form class="stats-annual-form" id="stats-annual-form">
|
|
<label class="stats-search-form__label" for="stats-annual-year">Año</label>
|
|
<div class="stats-search-form__fields">
|
|
<input
|
|
class="stats-search-input"
|
|
id="stats-annual-year"
|
|
type="number"
|
|
min="2019"
|
|
value=""
|
|
aria-label="Año del ranking anual"
|
|
aria-describedby="stats-annual-state"
|
|
/>
|
|
<button class="discord-button" type="submit" aria-label="Cargar ranking anual">
|
|
Cargar ranking anual
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<p class="stats-state stats-state--neutral" id="stats-annual-state" role="status" aria-live="polite">
|
|
Esperando año para cargar el ranking anual (Top 20 por kills).
|
|
</p>
|
|
<div class="stats-annual-table-wrap" id="stats-annual-content" aria-live="polite"></div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="./assets/js/config.js"></script>
|
|
<script src="./assets/js/stats.js"></script>
|
|
</body>
|
|
</html>
|
|
|