172 lines
7.2 KiB
HTML
172 lines
7.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="Ranking global de HLL Vietnam con filtros por periodo, servidor y límite."
|
|
/>
|
|
<title>Ranking - 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" href="./stats.html">
|
|
Stats
|
|
</a>
|
|
<a class="public-nav__link is-active" href="./ranking.html" aria-current="page">
|
|
Ranking
|
|
</a>
|
|
</nav>
|
|
<header class="hero stats-hero ranking-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 Ranking</p>
|
|
<h1 class="hero__title">
|
|
Ranking
|
|
<span class="hero__title-accent">Global</span>
|
|
</h1>
|
|
<p class="hero__text">
|
|
Consulta los líderes públicos de la comunidad, cambia de periodo y servidor sin salir de la página y revisa quién destaca en cada ventana.
|
|
</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">Filtros de lectura</p>
|
|
<h2>Top público por ventana</h2>
|
|
</div>
|
|
<p class="panel__intro panel__intro--tight">
|
|
El ranking expone la lectura pública de líderes. Para búsqueda individual usa la sección Stats.
|
|
</p>
|
|
<form class="ranking-form" id="ranking-form">
|
|
<div class="ranking-form__grid">
|
|
<label class="stats-search-form__label" for="ranking-timeframe">
|
|
Periodo
|
|
<select class="ranking-select" id="ranking-timeframe" name="timeframe">
|
|
<option value="weekly">Semanal</option>
|
|
<option value="monthly">Mensual</option>
|
|
<option value="annual">Anual</option>
|
|
</select>
|
|
</label>
|
|
<label class="stats-search-form__label" for="ranking-server">
|
|
Servidor
|
|
<select class="ranking-select" id="ranking-server" name="server_id">
|
|
<option value="all">Todos</option>
|
|
<option value="comunidad-hispana-01">Comunidad Hispana #01</option>
|
|
<option value="comunidad-hispana-02">Comunidad Hispana #02</option>
|
|
</select>
|
|
</label>
|
|
<label class="stats-search-form__label" for="ranking-metric">
|
|
Métrica
|
|
<select class="ranking-select" id="ranking-metric" name="metric">
|
|
<option value="kills">Kills totales</option>
|
|
<option value="deaths">Deaths</option>
|
|
<option value="teamkills">Teamkills</option>
|
|
<option value="matches_considered">Partidas jugadas</option>
|
|
<option value="kd_ratio">K/D</option>
|
|
<option value="kills_per_match">Kills por partida</option>
|
|
</select>
|
|
</label>
|
|
<label class="stats-search-form__label" for="ranking-limit">
|
|
Límite
|
|
<select class="ranking-select" id="ranking-limit" name="limit">
|
|
<option value="5">Top 5</option>
|
|
<option value="10">Top 10</option>
|
|
<option value="20" selected>Top 20</option>
|
|
<option value="50">Top 50</option>
|
|
<option value="100">Top 100</option>
|
|
</select>
|
|
</label>
|
|
<label class="stats-search-form__label" for="ranking-year" id="ranking-year-wrap" hidden>
|
|
Año
|
|
<input
|
|
class="stats-search-input"
|
|
id="ranking-year"
|
|
name="year"
|
|
type="number"
|
|
min="1"
|
|
step="1"
|
|
inputmode="numeric"
|
|
aria-describedby="ranking-state"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<p class="ranking-form__note" id="ranking-filter-note">
|
|
Consulta líderes públicos y cambia de periodo o servidor sin salir de la página.
|
|
</p>
|
|
<div class="hero__actions ranking-form__actions">
|
|
<button class="discord-button" type="submit">Actualizar ranking</button>
|
|
<a class="secondary-button secondary-button--compact" href="./stats.html">
|
|
Buscar jugador en Stats
|
|
</a>
|
|
</div>
|
|
</form>
|
|
<p class="stats-state stats-state--neutral" id="ranking-state" role="status" aria-live="polite">
|
|
Esperando filtros para cargar el ranking global.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="panel__shell">
|
|
<div class="panel__header">
|
|
<p class="eyebrow eyebrow--section">Resultados</p>
|
|
<h2 id="ranking-title">Tabla activa</h2>
|
|
</div>
|
|
<div class="ranking-meta" id="ranking-meta"></div>
|
|
<div class="ranking-table-shell">
|
|
<table class="historical-table ranking-table" id="ranking-table" hidden>
|
|
<thead>
|
|
<tr>
|
|
<th>Pos.</th>
|
|
<th>Jugador</th>
|
|
<th id="ranking-metric-heading">Valor activo</th>
|
|
<th>Kills</th>
|
|
<th>Deaths</th>
|
|
<th>Teamkills</th>
|
|
<th>Partidas</th>
|
|
<th>K/D</th>
|
|
<th>Kills/partida</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="ranking-table-body"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="ranking-empty" id="ranking-empty" hidden></div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="./assets/js/config.js"></script>
|
|
<script src="./assets/js/ranking.js"></script>
|
|
</body>
|
|
</html>
|
|
|