Cursor Agentandmathieumoran1
7ff02207f6
This commit introduces the ability to select and manage the active Oscar year. This change affects page titles, API requests, and data filtering across the application, ensuring that all views and statistics are relevant to the chosen year. Co-authored-by: mathieumoran1 <[email protected]>
128 lines
4.0 KiB
HTML
128 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pool Oscars - Films</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="./css/app.css" rel="stylesheet">
|
|
<style>
|
|
.navbar-custom {
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
.navbar-custom .navbar-brand,
|
|
.navbar-custom .nav-link {
|
|
color: white;
|
|
}
|
|
.navbar-custom .nav-link:hover {
|
|
color: #ddd;
|
|
}
|
|
|
|
/* Style for the 'WATCHED' banner */
|
|
.watched-banner {
|
|
background-color: green;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 5px;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
top: 10px;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Centering checkbox and making card look better */
|
|
.movie-card {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
}
|
|
.card-body {
|
|
position: relative;
|
|
}
|
|
|
|
#movies-list {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Style for the filter button */
|
|
#filter-button {
|
|
margin-left: 15px;
|
|
}
|
|
|
|
/* Style for the ratio display */
|
|
.ratio {
|
|
font-weight: bold;
|
|
margin-top: 10px;
|
|
}
|
|
.navbar-toggler {
|
|
border-color: white; /* Make the border white */
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-light">
|
|
|
|
<!-- Black banner with buttons and user info -->
|
|
<nav class="navbar navbar-expand-lg navbar-custom">
|
|
<div class="container">
|
|
<a class="navbar-brand" style="margin-left: -7px;">
|
|
<img src="img/logo_w.png" style="max-width: 220px; height: 70px; object-fit: contain;">
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<div class="navbar-nav">
|
|
<a href="movies.html" class="nav-link btn btn-outline-light me-2">Films</a>
|
|
<a href="checklist.html" class="nav-link btn btn-outline-light me-2">Checklist</a>
|
|
<a href="user-stat.html" class="nav-link btn btn-outline-light me-2">Statistiques</a>
|
|
<a id="admin-control-link" href="control.html" class="nav-link btn btn-warning me-2 d-none">Admin</a>
|
|
</div>
|
|
<!-- Move user info inside collapsible navbar and align it properly -->
|
|
<div class="d-flex ms-auto mt-2 mt-lg-0 align-items-center">
|
|
<span id="user-name" class="navbar-text me-3"></span>
|
|
<button id="log-off" class="btn btn-danger">Déconnexion</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container mt-5">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h2>Films</h2>
|
|
</div>
|
|
|
|
<!-- Displaying last updated vod_links -->
|
|
<div class="alert alert-warning fade show" role="alert">
|
|
Dernière mise à jour des films: <strong id="movies-last-updated">—</strong>
|
|
</div>
|
|
|
|
<!-- Displaying the ratio of watched movies -->
|
|
<div id="watched-ratio" class="ratio">
|
|
<!-- This will display the ratio -->
|
|
</div>
|
|
|
|
<h3 class="fs-6">Temps avant les Oscars (15 mars <span id="oscar-year">—</span>) - <span id="time-left"></span></h3>
|
|
<h3 class="fs-6 mb-0">
|
|
|
|
</h3>
|
|
<br>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
|
|
<label class="form-check-label" for="flexSwitchCheckDefault">Films non regardés seulement</label>
|
|
</div>
|
|
<div id="movies-list" class="row">
|
|
<!-- Movies will be displayed here -->
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="./js/app_movies.js"></script>
|
|
|
|
</body>
|
|
</html>
|