157 lines
6.2 KiB
HTML
157 lines
6.2 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 la zona pública de HLL Vietnam."
|
|
/>
|
|
<title>Estadísticas - HLL Vietnam</title>
|
|
<link rel="stylesheet" href="./assets/css/styles.css" />
|
|
<link rel="stylesheet" href="./assets/css/hero-header-compact.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">
|
|
Estadísticas
|
|
</a>
|
|
<a class="public-nav__link" href="./ranking.html">
|
|
Ranking
|
|
</a>
|
|
</nav>
|
|
<header class="hero hero--public-page 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">
|
|
<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 4 caracteres 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"
|
|
id="stats-search-submit"
|
|
type="submit"
|
|
aria-label="Buscar jugador por nombre o ID"
|
|
disabled
|
|
>
|
|
Buscar jugador
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<p
|
|
class="stats-state stats-state--neutral"
|
|
id="stats-search-state"
|
|
role="status"
|
|
aria-live="polite"
|
|
hidden
|
|
></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-profile-links-bar" id="stats-profile-links-bar"></div>
|
|
<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 temporada 2026</h2>
|
|
</div>
|
|
<div class="stats-annual-season" aria-label="Temporada fija del ranking anual">
|
|
<span class="stats-annual-season__label">Temporada</span>
|
|
<strong class="stats-annual-season__value">2026</strong>
|
|
</div>
|
|
<p class="stats-state stats-state--neutral" id="stats-annual-state" role="status" aria-live="polite">
|
|
Preparando ranking anual 2026 (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>
|
|
|