theo/cine-toulouse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout filtre cinéma

Browse Source
This commit is contained in:
theo
2026-02-19 14:27:29 +01:00
parent 67465d0a8f
commit 09a98775b1
1 changed files with 92 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+75 -16
View File
@@ -12,11 +12,37 @@
.main-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
/* Barre de filtres stylisée */
.filter-bar {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 35px;
flex-wrap: wrap;
}
.filter-btn {
border: 1px solid #333;
background: #161616;
color: #888;
padding: 8px 18px;
border-radius: 25px;
font-size: 0.75rem;
font-weight: 800;
transition: 0.3s;
cursor: pointer;
text-transform: uppercase;
}
.filter-btn.active { color: #000; border-color: transparent; }
.filter-btn[data-target="all"].active { background: #fff; color: #000; }
.filter-btn[data-target="ABC"].active { background: #00bcd4; color: #000; }
.filter-btn[data-target="Le Cratère"].active { background: #e62117; color: #fff; }
.filter-btn[data-target="American Cosmograph"].active { background: #ffc107; color: #000; }
/* Grille Responsive */
.movie-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr); /* 2 sur mobile */
gap: 15px;
justify-content: center;
}
@media (min-width: 768px) {
.movie-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
@@ -32,11 +58,12 @@
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.2s;
transition: transform 0.2s, border-color 0.2s;
height: 100%;
}
.movie-card:hover { transform: translateY(-5px); border-color: #ffc107; }
/* Ratio portrait 2:3 */
/* Ratio portrait 2:3 strict */
.poster-box {
position: relative;
width: 100%;
@@ -53,44 +80,54 @@
position: absolute;
top: 10px; left: 10px;
padding: 4px 10px;
font-size: 0.65rem;
font-size: 0.6rem;
font-weight: 800;
text-transform: uppercase;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0,0,0,0.7);
}
.movie-info { padding: 15px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; }
.movie-info { padding: 12px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; }
.movie-title {
font-size: 0.95rem; font-weight: 700; color: #fff;
margin-bottom: 12px; min-height: 2.4rem;
font-size: 0.9rem; font-weight: 700; color: #fff;
margin-bottom: 12px; min-height: 2.2rem;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
text-transform: uppercase;
line-height: 1.2;
}
.time-wrap { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: auto; }
.time-wrap { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: auto; }
.time-pill {
background: #ffc107; color: #000;
font-weight: 800; font-size: 0.85rem;
padding: 3px 10px; border-radius: 4px;
font-weight: 800; font-size: 0.8rem;
padding: 2px 8px; border-radius: 4px;
}
.footer-note { text-align: center; color: #444; font-size: 0.7rem; margin-top: 50px; padding-bottom: 30px; }
h1 { font-weight: 900; letter-spacing: -1px; text-align: center; color: #ffc107; margin-bottom: 30px; }
h1 { font-weight: 900; letter-spacing: -1px; text-align: center; color: #ffc107; margin-bottom: 20px; font-size: 1.5rem; }
</style>
</head>
<body>
<div class="main-container">
<h1><i class="fas fa-film me-3"></i>CINÉ TOULOUSE</h1>
<h1><i class="fas fa-film me-2"></i>CINÉ TOULOUSE</h1>
<div class="movie-grid">
<!-- Barre de Filtres -->
<div class="filter-bar">
<div class="filter-btn active" data-target="all">TOUS</div>
<div class="filter-btn" data-target="ABC">ABC</div>
<div class="filter-btn" data-target="American Cosmograph">COSMO</div>
<div class="filter-btn" data-target="Le Cratère">CRATÈRE</div>
</div>
<div class="movie-grid" id="movie-grid">
{% for film in films %}
<div class="movie-item" data-cinema="{{ film.cinema }}">
<div class="movie-card">
<div class="poster-box">
{% if film.img %}
<img src="{{ film.img }}" class="poster-img" loading="lazy">
{% else %}
<div class="poster-img d-flex align-items-center justify-content-center bg-dark text-muted small">IMAGE NON DISPONIBLE</div>
<div class="poster-img d-flex align-items-center justify-content-center bg-dark text-muted small">IMAGE INDISPONIBLE</div>
{% endif %}
<span class="cinema-label" style="background-color: {{ film.color }}; color: {{ '#000' if film.cinema != 'Le Cratère' else '#fff' }};">
{{ film.cinema }}
@@ -106,12 +143,34 @@
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="footer-note">
Auto-sync à 00:05 | Mise à jour : {{ updated }}
Auto-sync 00:05 | {{ updated }}
</div>
</div>
<script>
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const target = btn.getAttribute('data-target');
const items = document.querySelectorAll('.movie-item');
items.forEach(item => {
const cinema = item.getAttribute('data-cinema');
if (target === 'all' || cinema === target) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
});
</script>
</body>
</html>