Add 3 files
Browse files- README.md +7 -5
- index.html +420 -19
- prompts.txt +8 -0
README.md
CHANGED
@@ -1,10 +1,12 @@
|
|
1 |
---
|
2 |
-
title:
|
3 |
-
emoji:
|
4 |
-
colorFrom:
|
5 |
-
colorTo:
|
6 |
sdk: static
|
7 |
pinned: false
|
|
|
|
|
8 |
---
|
9 |
|
10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
1 |
---
|
2 |
+
title: cin-auto
|
3 |
+
emoji: 🐳
|
4 |
+
colorFrom: green
|
5 |
+
colorTo: yellow
|
6 |
sdk: static
|
7 |
pinned: false
|
8 |
+
tags:
|
9 |
+
- deepsite
|
10 |
---
|
11 |
|
12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
@@ -1,19 +1,420 @@
|
|
1 |
-
<!
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="fr">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8">
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
+
<title>CinéAuto - 784,574 Films avec Vraies Images</title>
|
7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
9 |
+
<style>
|
10 |
+
.hero-gradient {
|
11 |
+
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
12 |
+
}
|
13 |
+
.film-card:hover {
|
14 |
+
transform: translateY(-5px);
|
15 |
+
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
|
16 |
+
}
|
17 |
+
.player-container {
|
18 |
+
aspect-ratio: 16/9;
|
19 |
+
}
|
20 |
+
.blur-bg {
|
21 |
+
background: rgba(0, 0, 0, 0.7);
|
22 |
+
backdrop-filter: blur(10px);
|
23 |
+
}
|
24 |
+
.loading-spinner {
|
25 |
+
border: 4px solid rgba(255, 255, 255, 0.3);
|
26 |
+
border-radius: 50%;
|
27 |
+
border-top: 4px solid #fff;
|
28 |
+
width: 30px;
|
29 |
+
height: 30px;
|
30 |
+
animation: spin 1s linear infinite;
|
31 |
+
}
|
32 |
+
@keyframes spin {
|
33 |
+
0% { transform: rotate(0deg); }
|
34 |
+
100% { transform: rotate(360deg); }
|
35 |
+
}
|
36 |
+
.fade-in {
|
37 |
+
animation: fadeIn 0.5s ease-in;
|
38 |
+
}
|
39 |
+
@keyframes fadeIn {
|
40 |
+
from { opacity: 0; }
|
41 |
+
to { opacity: 1; }
|
42 |
+
}
|
43 |
+
</style>
|
44 |
+
</head>
|
45 |
+
<body class="font-sans bg-gray-900 text-white">
|
46 |
+
<!-- Header/Navigation -->
|
47 |
+
<header class="blur-bg shadow-sm sticky top-0 z-50">
|
48 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
49 |
+
<div class="flex justify-between items-center h-16">
|
50 |
+
<div class="flex items-center">
|
51 |
+
<div class="flex-shrink-0 flex items-center">
|
52 |
+
<i class="fas fa-film text-2xl text-red-500 mr-2"></i>
|
53 |
+
<span class="text-xl font-bold">CinéAuto</span>
|
54 |
+
</div>
|
55 |
+
</div>
|
56 |
+
<div class="hidden md:block">
|
57 |
+
<div class="ml-10 flex items-center space-x-4">
|
58 |
+
<a href="#nouveautes" class="text-gray-300 hover:text-white px-3 py-2 font-medium">Nouveautés</a>
|
59 |
+
<a href="#bibliotheque" class="text-gray-300 hover:text-white px-3 py-2 font-medium">Bibliothèque</a>
|
60 |
+
<a href="#autoplay" class="text-gray-300 hover:text-white px-3 py-2 font-medium">Pilotage Auto</a>
|
61 |
+
</div>
|
62 |
+
</div>
|
63 |
+
<div class="flex items-center space-x-4">
|
64 |
+
<button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300">
|
65 |
+
Connexion
|
66 |
+
</button>
|
67 |
+
</div>
|
68 |
+
</div>
|
69 |
+
</div>
|
70 |
+
</header>
|
71 |
+
|
72 |
+
<!-- Hero Section -->
|
73 |
+
<section class="hero-gradient">
|
74 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
|
75 |
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
76 |
+
<div>
|
77 |
+
<h1 class="text-4xl md:text-5xl font-bold mb-6">Films avec vraies affiches</h1>
|
78 |
+
<p class="text-xl text-gray-300 max-w-2xl mb-8">
|
79 |
+
Découvrez notre collection de films avec les vraies images originales grâce à l'API TMDb.
|
80 |
+
</p>
|
81 |
+
<div class="flex flex-col sm:flex-row gap-4">
|
82 |
+
<button id="load-popular" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300">
|
83 |
+
Films populaires
|
84 |
+
</button>
|
85 |
+
<button id="load-top-rated" class="bg-transparent border-2 border-gray-300 hover:bg-gray-800 font-bold py-3 px-8 rounded-lg transition duration-300">
|
86 |
+
<i class="fas fa-star mr-2"></i> Mieux notés
|
87 |
+
</button>
|
88 |
+
</div>
|
89 |
+
</div>
|
90 |
+
<div class="player-container bg-gray-800 rounded-xl overflow-hidden shadow-2xl relative">
|
91 |
+
<div class="w-full h-full flex items-center justify-center">
|
92 |
+
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent z-10"></div>
|
93 |
+
<img id="featured-movie-poster" src="https://image.tmdb.org/t/p/original/8Y43POKjjKDGI9MH89NW0NAzzp8.jpg" alt="Film vedette" class="absolute w-full h-full object-cover">
|
94 |
+
<div class="absolute bottom-0 left-0 right-0 p-6 z-20">
|
95 |
+
<h3 id="featured-movie-title" class="text-xl font-bold mb-1">Chargement...</h3>
|
96 |
+
<p id="featured-movie-info" class="text-gray-300 text-sm">Découvrez notre sélection</p>
|
97 |
+
</div>
|
98 |
+
<button class="bg-red-600 hover:bg-red-700 text-white rounded-full w-16 h-16 flex items-center justify-center z-20">
|
99 |
+
<i class="fas fa-play text-xl"></i>
|
100 |
+
</button>
|
101 |
+
</div>
|
102 |
+
</div>
|
103 |
+
</div>
|
104 |
+
</div>
|
105 |
+
</section>
|
106 |
+
|
107 |
+
<!-- Bibliothèque Section -->
|
108 |
+
<section id="bibliotheque" class="py-16 bg-gray-900">
|
109 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
110 |
+
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
|
111 |
+
<div>
|
112 |
+
<h2 class="text-2xl font-bold">Collection de Films</h2>
|
113 |
+
<p class="text-gray-400">Affiches originales via API TMDb</p>
|
114 |
+
</div>
|
115 |
+
<div class="mt-4 md:mt-0 flex space-x-4">
|
116 |
+
<div class="relative">
|
117 |
+
<select id="sort-by" class="bg-gray-800 text-white px-4 py-2 rounded-lg appearance-none pr-8 focus:outline-none">
|
118 |
+
<option value="popularity.desc">Popularité</option>
|
119 |
+
<option value="vote_average.desc">Note</option>
|
120 |
+
<option value="release_date.desc">Date de sortie</option>
|
121 |
+
<option value="revenue.desc">Box-office</option>
|
122 |
+
</select>
|
123 |
+
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
124 |
+
<i class="fas fa-chevron-down text-gray-400"></i>
|
125 |
+
</div>
|
126 |
+
</div>
|
127 |
+
<div class="relative">
|
128 |
+
<select id="genre-filter" class="bg-gray-800 text-white px-4 py-2 rounded-lg appearance-none pr-8 focus:outline-none">
|
129 |
+
<option value="">Tous genres</option>
|
130 |
+
<!-- Genres will be loaded by JS -->
|
131 |
+
</select>
|
132 |
+
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
133 |
+
<i class="fas fa-chevron-down text-gray-400"></i>
|
134 |
+
</div>
|
135 |
+
</div>
|
136 |
+
</div>
|
137 |
+
</div>
|
138 |
+
|
139 |
+
<div id="film-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
|
140 |
+
<!-- Films will be loaded here by JavaScript -->
|
141 |
+
<div class="col-span-full flex justify-center py-12">
|
142 |
+
<div class="loading-spinner"></div>
|
143 |
+
</div>
|
144 |
+
</div>
|
145 |
+
|
146 |
+
<div class="mt-12 flex justify-center">
|
147 |
+
<nav class="flex items-center space-x-2">
|
148 |
+
<button id="prev-page" class="px-4 py-2 border border-gray-700 rounded-lg text-gray-400 hover:bg-gray-800 disabled:opacity-50" disabled>
|
149 |
+
<i class="fas fa-chevron-left"></i>
|
150 |
+
</button>
|
151 |
+
<span id="current-page" class="px-4 py-2">1</span>
|
152 |
+
<button id="next-page" class="px-4 py-2 border border-gray-700 rounded-lg text-gray-400 hover:bg-gray-800">
|
153 |
+
<i class="fas fa-chevron-right"></i>
|
154 |
+
</button>
|
155 |
+
</nav>
|
156 |
+
</div>
|
157 |
+
</div>
|
158 |
+
</section>
|
159 |
+
|
160 |
+
<!-- Footer -->
|
161 |
+
<footer class="bg-gray-950 text-gray-400 py-12">
|
162 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
163 |
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
164 |
+
<div>
|
165 |
+
<div class="flex items-center mb-4">
|
166 |
+
<i class="fas fa-film text-2xl text-red-500 mr-2"></i>
|
167 |
+
<span class="text-xl font-bold text-white">CinéAuto</span>
|
168 |
+
</div>
|
169 |
+
<p class="mb-4">
|
170 |
+
Collection de films avec vraies affiches via l'API TMDb.
|
171 |
+
</p>
|
172 |
+
</div>
|
173 |
+
|
174 |
+
<div>
|
175 |
+
<h4 class="text-lg font-semibold text-white mb-4">Navigation</h4>
|
176 |
+
<ul class="space-y-2">
|
177 |
+
<li><a href="#" class="hover:text-white">Accueil</a></li>
|
178 |
+
<li><a href="#bibliotheque" class="hover:text-white">Bibliothèque</a></li>
|
179 |
+
</ul>
|
180 |
+
</div>
|
181 |
+
|
182 |
+
<div>
|
183 |
+
<h4 class="text-lg font-semibold text-white mb-4">Legal</h4>
|
184 |
+
<ul class="space-y-2">
|
185 |
+
<li><a href="#" class="hover:text-white">Conditions générales</a></li>
|
186 |
+
<li><a href="#" class="hover:text-white">Confidentialité</a></li>
|
187 |
+
</ul>
|
188 |
+
</div>
|
189 |
+
|
190 |
+
<div>
|
191 |
+
<h4 class="text-lg font-semibold text-white mb-4">À propos</h4>
|
192 |
+
<p>
|
193 |
+
Ce site utilise l'API TMDb mais n'est pas approuvé ou certifié par TMDb.
|
194 |
+
</p>
|
195 |
+
</div>
|
196 |
+
</div>
|
197 |
+
|
198 |
+
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-sm">
|
199 |
+
<p>© 2023 CinéAuto. Données fournies par TMDb.</p>
|
200 |
+
</div>
|
201 |
+
</div>
|
202 |
+
</footer>
|
203 |
+
|
204 |
+
<script>
|
205 |
+
// Configuration
|
206 |
+
const TMDB_API_KEY = '3fd2be6f0c70a2a598f084ddfb75487c'; // Clé API publique TMDb
|
207 |
+
const BASE_URL = 'https://api.themoviedb.org/3';
|
208 |
+
const IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/';
|
209 |
+
|
210 |
+
// Variables d'état
|
211 |
+
let currentPage = 1;
|
212 |
+
let totalPages = 1;
|
213 |
+
let currentSort = 'popularity.desc';
|
214 |
+
let currentGenre = '';
|
215 |
+
let genres = [];
|
216 |
+
|
217 |
+
// Éléments DOM
|
218 |
+
const filmGrid = document.getElementById('film-grid');
|
219 |
+
const prevPageBtn = document.getElementById('prev-page');
|
220 |
+
const nextPageBtn = document.getElementById('next-page');
|
221 |
+
const currentPageSpan = document.getElementById('current-page');
|
222 |
+
const sortSelect = document.getElementById('sort-by');
|
223 |
+
const genreSelect = document.getElementById('genre-filter');
|
224 |
+
const loadPopularBtn = document.getElementById('load-popular');
|
225 |
+
const loadTopRatedBtn = document.getElementById('load-top-rated');
|
226 |
+
const featuredMoviePoster = document.getElementById('featured-movie-poster');
|
227 |
+
const featuredMovieTitle = document.getElementById('featured-movie-title');
|
228 |
+
const featuredMovieInfo = document.getElementById('featured-movie-info');
|
229 |
+
|
230 |
+
// Charger les genres
|
231 |
+
async function loadGenres() {
|
232 |
+
try {
|
233 |
+
const response = await fetch(`${BASE_URL}/genre/movie/list?api_key=${TMDB_API_KEY}&language=fr-FR`);
|
234 |
+
const data = await response.json();
|
235 |
+
genres = data.genres;
|
236 |
+
|
237 |
+
// Remplir le select des genres
|
238 |
+
genreSelect.innerHTML = '<option value="">Tous genres</option>' +
|
239 |
+
genres.map(genre =>
|
240 |
+
`<option value="${genre.id}">${genre.name}</option>`
|
241 |
+
).join('');
|
242 |
+
|
243 |
+
// Charger un film vedette aléatoire
|
244 |
+
loadRandomFeaturedMovie();
|
245 |
+
} catch (error) {
|
246 |
+
console.error('Erreur lors du chargement des genres:', error);
|
247 |
+
}
|
248 |
+
}
|
249 |
+
|
250 |
+
// Charger un film vedette aléatoire
|
251 |
+
async function loadRandomFeaturedMovie() {
|
252 |
+
try {
|
253 |
+
// Charger les films populaires
|
254 |
+
const response = await fetch(`${BASE_URL}/movie/popular?api_key=${TMDB_API_KEY}&language=fr-FR&page=${Math.floor(Math.random() * 10) + 1}`);
|
255 |
+
const data = await response.json();
|
256 |
+
|
257 |
+
if (data.results && data.results.length > 0) {
|
258 |
+
// Choisir un film aléatoire
|
259 |
+
const randomMovie = data.results[Math.floor(Math.random() * data.results.length)];
|
260 |
+
|
261 |
+
// Mettre à jour l'interface
|
262 |
+
featuredMoviePoster.src = IMAGE_BASE_URL + 'original' + randomMovie.poster_path;
|
263 |
+
featuredMovieTitle.textContent = randomMovie.title;
|
264 |
+
|
265 |
+
const year = randomMovie.release_date ? new Date(randomMovie.release_date).getFullYear() : '';
|
266 |
+
const rating = randomMovie.vote_average ? randomMovie.vote_average.toFixed(1) : '';
|
267 |
+
featuredMovieInfo.textContent = `${year} • Note: ${rating}/10`;
|
268 |
+
}
|
269 |
+
} catch (error) {
|
270 |
+
console.error('Erreur lors du chargement du film vedette:', error);
|
271 |
+
}
|
272 |
+
}
|
273 |
+
|
274 |
+
// Charger les films
|
275 |
+
async function loadMovies(page = 1, sortBy = 'popularity.desc', genre = '') {
|
276 |
+
try {
|
277 |
+
// Afficher le spinner de chargement
|
278 |
+
filmGrid.innerHTML = '<div class="col-span-full flex justify-center py-12"><div class="loading-spinner"></div></div>';
|
279 |
+
|
280 |
+
// Construire l'URL
|
281 |
+
let url = `${BASE_URL}/discover/movie?api_key=${TMDB_API_KEY}&language=fr-FR&sort_by=${sortBy}&page=${page}`;
|
282 |
+
|
283 |
+
if (genre) {
|
284 |
+
url += `&with_genres=${genre}`;
|
285 |
+
}
|
286 |
+
|
287 |
+
// Faire la requête
|
288 |
+
const response = await fetch(url);
|
289 |
+
const data = await response.json();
|
290 |
+
|
291 |
+
// Mettre à jour les informations de pagination
|
292 |
+
currentPage = data.page;
|
293 |
+
totalPages = data.total_pages > 500 ? 500 : data.total_pages; // L'API limite à 500 pages
|
294 |
+
|
295 |
+
updatePaginationUI();
|
296 |
+
|
297 |
+
// Afficher les films
|
298 |
+
displayMovies(data.results);
|
299 |
+
} catch (error) {
|
300 |
+
console.error('Erreur lors du chargement des films:', error);
|
301 |
+
filmGrid.innerHTML = '<div class="col-span-full text-center py-12 text-red-400">Erreur lors du chargement des films. Veuillez réessayer.</div>';
|
302 |
+
}
|
303 |
+
}
|
304 |
+
|
305 |
+
// Afficher les films dans la grille
|
306 |
+
function displayMovies(movies) {
|
307 |
+
if (!movies || movies.length === 0) {
|
308 |
+
filmGrid.innerHTML = '<div class="col-span-full text-center py-12">Aucun film trouvé avec ces critères.</div>';
|
309 |
+
return;
|
310 |
+
}
|
311 |
+
|
312 |
+
filmGrid.innerHTML = movies.map(movie => `
|
313 |
+
<div class="film-card bg-gray-800 rounded-lg overflow-hidden shadow-md transition duration-300 fade-in">
|
314 |
+
<div class="relative pb-[150%]">
|
315 |
+
${movie.poster_path ?
|
316 |
+
`<img src="${IMAGE_BASE_URL}w500${movie.poster_path}" alt="${movie.title}" class="absolute h-full w-full object-cover">` :
|
317 |
+
`<div class="absolute h-full w-full bg-gray-700 flex items-center justify-center">
|
318 |
+
<i class="fas fa-film text-4xl text-gray-500"></i>
|
319 |
+
</div>`
|
320 |
+
}
|
321 |
+
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
|
322 |
+
${movie.release_date ?
|
323 |
+
`<span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">${new Date(movie.release_date).getFullYear()}</span>` :
|
324 |
+
''
|
325 |
+
}
|
326 |
+
</div>
|
327 |
+
<div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 bg-black bg-opacity-60 transition duration-300">
|
328 |
+
<button class="bg-red-600 hover:bg-red-700 text-white rounded-full w-12 h-12 flex items-center justify-center">
|
329 |
+
<i class="fas fa-play"></i>
|
330 |
+
</button>
|
331 |
+
</div>
|
332 |
+
</div>
|
333 |
+
<div class="p-4">
|
334 |
+
<h3 class="font-bold text-white mb-1 truncate">${movie.title}</h3>
|
335 |
+
<div class="flex items-center text-gray-400 text-sm">
|
336 |
+
${movie.release_date ?
|
337 |
+
`<span>${new Date(movie.release_date).getFullYear()}</span>` :
|
338 |
+
'<span>Date inconnue</span>'
|
339 |
+
}
|
340 |
+
${movie.vote_average ?
|
341 |
+
`<span class="mx-2">•</span>
|
342 |
+
<span class="flex items-center">
|
343 |
+
<i class="fas fa-star text-yellow-400 mr-1"></i>
|
344 |
+
${movie.vote_average.toFixed(1)}
|
345 |
+
</span>` :
|
346 |
+
''
|
347 |
+
}
|
348 |
+
</div>
|
349 |
+
</div>
|
350 |
+
</div>
|
351 |
+
`).join('');
|
352 |
+
}
|
353 |
+
|
354 |
+
// Mettre à jour l'interface de pagination
|
355 |
+
function updatePaginationUI() {
|
356 |
+
currentPageSpan.textContent = currentPage;
|
357 |
+
prevPageBtn.disabled = currentPage === 1;
|
358 |
+
nextPageBtn.disabled = currentPage === totalPages;
|
359 |
+
}
|
360 |
+
|
361 |
+
// Gestionnaires d'événements
|
362 |
+
prevPageBtn.addEventListener('click', () => {
|
363 |
+
if (currentPage > 1) {
|
364 |
+
currentPage--;
|
365 |
+
loadMovies(currentPage, currentSort, currentGenre);
|
366 |
+
}
|
367 |
+
});
|
368 |
+
|
369 |
+
nextPageBtn.addEventListener('click', () => {
|
370 |
+
if (currentPage < totalPages) {
|
371 |
+
currentPage++;
|
372 |
+
loadMovies(currentPage, currentSort, currentGenre);
|
373 |
+
}
|
374 |
+
});
|
375 |
+
|
376 |
+
sortSelect.addEventListener('change', () => {
|
377 |
+
currentSort = sortSelect.value;
|
378 |
+
currentPage = 1;
|
379 |
+
loadMovies(currentPage, currentSort, currentGenre);
|
380 |
+
});
|
381 |
+
|
382 |
+
genreSelect.addEventListener('change', () => {
|
383 |
+
currentGenre = genreSelect.value;
|
384 |
+
currentPage = 1;
|
385 |
+
loadMovies(currentPage, currentSort, currentGenre);
|
386 |
+
});
|
387 |
+
|
388 |
+
loadPopularBtn.addEventListener('click', () => {
|
389 |
+
currentSort = 'popularity.desc';
|
390 |
+
currentPage = 1;
|
391 |
+
sortSelect.value = currentSort;
|
392 |
+
loadMovies(currentPage, currentSort, currentGenre);
|
393 |
+
});
|
394 |
+
|
395 |
+
loadTopRatedBtn.addEventListener('click', () => {
|
396 |
+
currentSort = 'vote_average.desc';
|
397 |
+
currentPage = 1;
|
398 |
+
sortSelect.value = currentSort;
|
399 |
+
loadMovies(currentPage, currentSort, currentGenre);
|
400 |
+
});
|
401 |
+
|
402 |
+
// Initialisation
|
403 |
+
document.addEventListener('DOMContentLoaded', () => {
|
404 |
+
loadGenres();
|
405 |
+
loadMovies();
|
406 |
+
|
407 |
+
// Smooth scrolling for anchor links
|
408 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
409 |
+
anchor.addEventListener('click', function (e) {
|
410 |
+
e.preventDefault();
|
411 |
+
|
412 |
+
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
413 |
+
behavior: 'smooth'
|
414 |
+
});
|
415 |
+
});
|
416 |
+
});
|
417 |
+
});
|
418 |
+
</script>
|
419 |
+
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/cin-auto" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
420 |
+
</html>
|
prompts.txt
ADDED
@@ -0,0 +1,8 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
je veux un gnerateur hyper puissant au monde capable de creer des vrais site imense de 1600 ligne et 10 page uniquement que des sites de cours en ligne
|
2 |
+
creer une Une application d'IA jamais vue auparavant nous permet de détourner légalement n'importe quel site Web, entonnoir, page de vente ou page de destination et de les transformer en notre machine à générer des profits… le toute en systeme automatique
|
3 |
+
commencer directement
|
4 |
+
je veux un crerateur de site a partir d image et de titre du site uniquement
|
5 |
+
https://darkslategrey-lark-981722.hostingersite.com/ : crrer moi se site en pilotage automatique
|
6 |
+
https://plateformecinema.com ? ACTIVER LES FILMS EN PILOTE AUTOMATIQUE AVEC UNE GROSSE BASE DE FILMS DE 78954 FILM NOUVEAUTE
|
7 |
+
ajouter 784574 film complet avec leur images des film d'origine en pilotage automatique
|
8 |
+
afficher toutes les images des film reelement
|