190 lines
7.8 KiB
HTML
190 lines
7.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link href="./src/styles/index.css" rel="stylesheet" />
|
|
<title>Inicio</title>
|
|
</head>
|
|
|
|
<body class="min-h-screen bg-slate-50 p-2">
|
|
|
|
|
|
|
|
|
|
<div class="flex w-full flex-col items-center mt-6">
|
|
<h1 class="mb-6 text-4xl font-bold">Breaking Bad</h1>
|
|
|
|
<div class="mb-6 rounded-lg bg-white p-6 shadow-sm border border-gray-200">
|
|
<div class="mb-4 text-center">
|
|
<span class="text-gray-600">IMDb ID: </span>
|
|
<span class="font-semibold text-gray-800">tt0903747</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-8">
|
|
<ul class="space-y-2">
|
|
<li>
|
|
<span class="text-gray-600">Title:</span>
|
|
<span class="font-semibold text-gray-800">Breaking Bad</span>
|
|
</li>
|
|
<li>
|
|
<span class="text-gray-600">Runtime:</span>
|
|
<span class="font-semibold text-gray-800">49 min</span>
|
|
</li>
|
|
<li>
|
|
<span class="text-gray-600">Seasons:</span>
|
|
<span class="font-semibold text-gray-800">5</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="space-y-2">
|
|
<li>
|
|
<span class="text-gray-600">Total votes:</span>
|
|
<span class="font-semibold text-gray-800">1970456</span>
|
|
</li>
|
|
<li>
|
|
<span class="text-gray-600">Average rating:</span>
|
|
<span class="font-semibold text-gray-800">8.95</span>
|
|
</li>
|
|
<li>
|
|
<span class="text-gray-600">Median rating:</span>
|
|
<span class="font-semibold text-gray-800">8.85</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-6 w-2/3">
|
|
<h2 class="mb-6 text-center text-2xl font-bold">Seasons overall</h2>
|
|
<canvas id="seasons"></canvas>
|
|
</div>
|
|
|
|
<div class="mb-6 w-2/3">
|
|
<div x-data="{ selectedSeasonNumber: 1}">
|
|
<h2 class="mb-6 text-center text-2xl font-bold">
|
|
Season <span x-text="selectedSeasonNumber"></span>
|
|
</h2>
|
|
<canvas id="episodes"></canvas>
|
|
<div class="mt-4 flex items-center justify-center space-x-2">
|
|
<button
|
|
x-on:click="selectedSeasonNumber = 1; loadSeason(1)"
|
|
class="rounded-md border-2 border-black px-4 py-2 font-semibold text-black hover:bg-black hover:text-white"
|
|
:class="selectedSeasonNumber === 1 ? 'bg-black text-white' : 'text-black'"
|
|
>
|
|
S1
|
|
</button>
|
|
<button
|
|
x-on:click="selectedSeasonNumber = 2; loadSeason(2)"
|
|
class="rounded-md border-2 border-black px-4 py-2 font-semibold text-black hover:bg-black hover:text-white"
|
|
:class="selectedSeasonNumber === 2 ? 'bg-black text-white' : 'text-black'"
|
|
>
|
|
S2
|
|
</button>
|
|
<button
|
|
x-on:click="selectedSeasonNumber = 3; loadSeason(3)"
|
|
class="rounded-md border-2 border-black px-4 py-2 font-semibold text-black hover:bg-black hover:text-white"
|
|
:class="selectedSeasonNumber === 3 ? 'bg-black text-white' : 'text-black'"
|
|
>
|
|
S3
|
|
</button>
|
|
<button
|
|
x-on:click="selectedSeasonNumber = 4; loadSeason(4)"
|
|
class="rounded-md border-2 border-black px-4 py-2 font-semibold text-black hover:bg-black hover:text-white"
|
|
:class="selectedSeasonNumber === 4 ? 'bg-black text-white' : 'text-black'"
|
|
>
|
|
S4
|
|
</button>
|
|
<button
|
|
x-on:click="selectedSeasonNumber = 5; loadSeason(5)"
|
|
class="rounded-md border-2 border-black px-4 py-2 font-semibold text-black hover:bg-black hover:text-white"
|
|
:class="selectedSeasonNumber === 5 ? 'bg-black text-white' : 'text-black'"
|
|
>
|
|
S5
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="bg-gray-200" aria-label="Site Footer">
|
|
<ul class="mt-12 flex justify-center gap-6 p-12">
|
|
<li>
|
|
<a
|
|
class="text-gray-700 transition hover:text-gray-700/75"
|
|
href="https://www.instagram.com/modelektor/"
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
>
|
|
<span class="sr-only">Instagram</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-instagram"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
class="text-gray-700 transition hover:text-gray-700/75"
|
|
href="https://github.com/zepyrshut"
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
>
|
|
<span class="sr-only">GitHub</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
class="text-gray-700 transition hover:text-gray-700/75"
|
|
href="https://pedroperez.dev/"
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
>
|
|
<span class="sr-only">Website</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="text-gray-700 transition hover:text-gray-700/75"
|
|
href="https://github.com/zepyrshut/rating-orama"
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
>
|
|
<span class="sr-only">Source</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</footer>
|
|
|
|
<script src="./src/main.js" type="module"></script>
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js"
|
|
integrity="sha512-vCUbejtS+HcWYtDHRF2T5B0BKwVG/CLeuew5uT2AiX4SJ2Wff52+kfgONvtdATqkqQMC9Ye5K+Td0OTaz+P7cw=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"
|
|
></script>
|
|
<script type="module">
|
|
import {
|
|
initCharts,
|
|
loadSpecificSeason,
|
|
} from "./src/components/charts.js";
|
|
import { data } from "./src/data/breaking-bad.js";
|
|
|
|
const tvShowParsed = data;
|
|
|
|
function loadSeason(season) {
|
|
const currentScrollY = window.scrollY;
|
|
loadSpecificSeason(tvShowParsed, season);
|
|
window.scrollTo(0, currentScrollY);
|
|
}
|
|
|
|
window.loadSeason = loadSeason;
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
initCharts(tvShowParsed);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|