<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reparto Puntos PremierLeague</title>
<!-- CSS -->
<link rel="stylesheet" href="clasificacion.css">
<!-- fuente bebas neue -->
<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=Bebas+Neue&display=swap" rel="stylesheet">
<!-- D3 -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="clasificacion.js" defer></script>
</head>
<body>
<div class="header">
<h1>Clasificaciones premier league</h1>
<h4>PABLO MARTÍN DE BENITO</h4>
</div>
<div class="content">
<div class="sideNav">
<h3>Menu</h4>
<button class="navButton">Clasificacion</button>
<button class="navButton" onclick="window.location.href='/src/equipo/equipo.html'">Equipo</button>
</div>
<div class="mainContent">
<div class="table">
<div class="headerTable">
<h2 id="tableTitle">Tabla</h2>
<div class="seasonInfo">
<label id="season">temporada</label>
<label id="seasonNumber"">2023/2024</label>
</div>
</div>
<div id="graphContainer">
<div id="graph"></div>
<div class="sliderContainer">
<label id="seasonLabel" for="verticalSlider">Temporada:</label>
<input type="range" min="1993" max="2024" value="2024" class="slider" id="verticalSlider" orient="vertical" onchange="onChangeSeason()">
</div>
</div>
</div>
</div>
</div>
<div id="bottom">
<p>
Pablo Martín de Benito | Creado con
<a href="https://d3js.org/">D3.js</a>
| Fuente:
<a href="https://www.kaggle.com/datasets/evangower/english-premier-league-standings">Premier League Standings</a>
</p>
<p>
Diseño y Evaluación de Sistemas Interactivos - Escuela de Ingeniería Informática - Universidad de Valladolid
</p>
</div>
</body>
</html>