Hugging Face's logo

Spaces:
docto41
/
megatv
Running

App Files Community
docto41 commited on
Commit
4fc2df3
·
verified ·
1 Parent(s): f5d58f1

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1444 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Megatv
3
- emoji: 🐢
4
  colorFrom: yellow
5
- colorTo: yellow
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: megatv
3
+ emoji: 🐳
4
  colorFrom: yellow
5
+ colorTo: green
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,1444 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>MegaTV - Plateforme de Streaming Professionnelle</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #0f172a;
15
+ color: white;
16
+ }
17
+
18
+ .hero-gradient {
19
+ background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
20
+ }
21
+
22
+ .channel-card:hover {
23
+ transform: translateY(-5px);
24
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
25
+ }
26
+
27
+ .live-indicator {
28
+ animation: pulse 1.5s infinite;
29
+ }
30
+
31
+ @keyframes pulse {
32
+ 0% { opacity: 1; }
33
+ 50% { opacity: 0.5; }
34
+ 100% { opacity: 1; }
35
+ }
36
+
37
+ .video-thumbnail::after {
38
+ content: '';
39
+ position: absolute;
40
+ top: 0;
41
+ left: 0;
42
+ right: 0;
43
+ bottom: 0;
44
+ background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
45
+ }
46
+
47
+ /* Custom scrollbar */
48
+ ::-webkit-scrollbar {
49
+ width: 8px;
50
+ }
51
+ ::-webkit-scrollbar-track {
52
+ background: #1e293b;
53
+ }
54
+ ::-webkit-scrollbar-thumb {
55
+ background: #3b82f6;
56
+ border-radius: 4px;
57
+ }
58
+
59
+ /* Dashboard styles */
60
+ .dashboard-card {
61
+ transition: all 0.3s ease;
62
+ }
63
+
64
+ .dashboard-card:hover {
65
+ transform: translateY(-3px);
66
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
67
+ }
68
+
69
+ /* Data table styles */
70
+ .data-table {
71
+ width: 100%;
72
+ border-collapse: collapse;
73
+ }
74
+
75
+ .data-table th, .data-table td {
76
+ padding: 12px 15px;
77
+ text-align: left;
78
+ border-bottom: 1px solid #334155;
79
+ }
80
+
81
+ .data-table th {
82
+ background-color: #1e293b;
83
+ color: #e2e8f0;
84
+ font-weight: 600;
85
+ text-transform: uppercase;
86
+ font-size: 0.75rem;
87
+ letter-spacing: 0.05em;
88
+ }
89
+
90
+ .data-table tr:hover {
91
+ background-color: #1e293b;
92
+ }
93
+
94
+ /* Pagination styles */
95
+ .pagination .page-item.active .page-link {
96
+ background-color: #3b82f6;
97
+ border-color: #3b82f6;
98
+ }
99
+
100
+ .pagination .page-link {
101
+ color: #e2e8f0;
102
+ background-color: #1e293b;
103
+ border: 1px solid #334155;
104
+ }
105
+
106
+ .pagination .page-link:hover {
107
+ background-color: #334155;
108
+ }
109
+ </style>
110
+ </head>
111
+ <body>
112
+ <!-- Navigation -->
113
+ <nav class="bg-gray-900 border-b border-gray-800 fixed w-full z-50">
114
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
115
+ <div class="flex items-center justify-between h-16">
116
+ <div class="flex items-center">
117
+ <div class="flex-shrink-0">
118
+ <span class="text-blue-500 text-2xl font-bold">Mega<span class="text-white">TV</span></span>
119
+ </div>
120
+ <div class="hidden md:block">
121
+ <div class="ml-10 flex items-baseline space-x-4">
122
+ <a href="#" class="bg-blue-600 text-white px-3 py-2 rounded-md text-sm font-medium">Accueil</a>
123
+ <a href="#dashboard" class="text-gray-300 hover:bg-gray-800 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Tableau de bord</a>
124
+ <a href="#movies" class="text-gray-300 hover:bg-gray-800 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Base de films</a>
125
+ <a href="#import" class="text-gray-300 hover:bg-gray-800 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Import automatique</a>
126
+ <a href="#analytics" class="text-gray-300 hover:bg-gray-800 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Analytiques</a>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ <div class="hidden md:block">
131
+ <div class="ml-4 flex items-center md:ml-6">
132
+ <div class="relative mx-4">
133
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
134
+ <i class="fas fa-search text-gray-400"></i>
135
+ </div>
136
+ <input type="text" id="globalSearch" class="bg-gray-700 text-white pl-10 pr-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Rechercher...">
137
+ </div>
138
+ <div class="ml-3 relative">
139
+ <div>
140
+ <button type="button" class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
141
+ <span class="sr-only">Open user menu</span>
142
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=80&h=80&q=80" alt="">
143
+ </button>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ <div class="-mr-2 flex md:hidden">
149
+ <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
150
+ <span class="sr-only">Open main menu</span>
151
+ <i class="fas fa-bars"></i>
152
+ </button>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </nav>
157
+
158
+ <!-- Main Content -->
159
+ <main class="pt-20 pb-12">
160
+ <!-- Dashboard Section -->
161
+ <section id="dashboard" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
162
+ <h2 class="text-3xl font-bold mb-8">Tableau de bord</h2>
163
+
164
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
165
+ <!-- Total Movies Card -->
166
+ <div class="dashboard-card bg-gray-800 rounded-lg p-6 shadow">
167
+ <div class="flex items-center">
168
+ <div class="p-3 rounded-full bg-blue-600 bg-opacity-20 text-blue-400 mr-4">
169
+ <i class="fas fa-film text-2xl"></i>
170
+ </div>
171
+ <div>
172
+ <p class="text-gray-400 text-sm">Films total</p>
173
+ <h3 class="text-2xl font-bold" id="totalMovies">127,453</h3>
174
+ </div>
175
+ </div>
176
+ <div class="mt-4 pt-4 border-t border-gray-700">
177
+ <span class="text-green-400 text-sm font-medium"><i class="fas fa-arrow-up mr-1"></i> 12.5%</span>
178
+ <span class="text-gray-400 text-sm ml-2">vs mois dernier</span>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- New This Week Card -->
183
+ <div class="dashboard-card bg-gray-800 rounded-lg p-6 shadow">
184
+ <div class="flex items-center">
185
+ <div class="p-3 rounded-full bg-green-600 bg-opacity-20 text-green-400 mr-4">
186
+ <i class="fas fa-calendar-plus text-2xl"></i>
187
+ </div>
188
+ <div>
189
+ <p class="text-gray-400 text-sm">Nouveautés cette semaine</p>
190
+ <h3 class="text-2xl font-bold" id="newThisWeek">342</h3>
191
+ </div>
192
+ </div>
193
+ <div class="mt-4 pt-4 border-t border-gray-700">
194
+ <span class="text-green-400 text-sm font-medium"><i class="fas fa-arrow-up mr-1"></i> 8.3%</span>
195
+ <span class="text-gray-400 text-sm ml-2">vs semaine dernière</span>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Active Users Card -->
200
+ <div class="dashboard-card bg-gray-800 rounded-lg p-6 shadow">
201
+ <div class="flex items-center">
202
+ <div class="p-3 rounded-full bg-purple-600 bg-opacity-20 text-purple-400 mr-4">
203
+ <i class="fas fa-users text-2xl"></i>
204
+ </div>
205
+ <div>
206
+ <p class="text-gray-400 text-sm">Utilisateurs actifs</p>
207
+ <h3 class="text-2xl font-bold" id="activeUsers">24,589</h3>
208
+ </div>
209
+ </div>
210
+ <div class="mt-4 pt-4 border-t border-gray-700">
211
+ <span class="text-green-400 text-sm font-medium"><i class="fas fa-arrow-up mr-1"></i> 5.7%</span>
212
+ <span class="text-gray-400 text-sm ml-2">vs hier</span>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Streaming Hours Card -->
217
+ <div class="dashboard-card bg-gray-800 rounded-lg p-6 shadow">
218
+ <div class="flex items-center">
219
+ <div class="p-3 rounded-full bg-red-600 bg-opacity-20 text-red-400 mr-4">
220
+ <i class="fas fa-play-circle text-2xl"></i>
221
+ </div>
222
+ <div>
223
+ <p class="text-gray-400 text-sm">Heures de streaming</p>
224
+ <h3 class="text-2xl font-bold" id="streamingHours">1.2M</h3>
225
+ </div>
226
+ </div>
227
+ <div class="mt-4 pt-4 border-t border-gray-700">
228
+ <span class="text-green-400 text-sm font-medium"><i class="fas fa-arrow-up mr-1"></i> 15.2%</span>
229
+ <span class="text-gray-400 text-sm ml-2">vs hier</span>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Charts Row -->
235
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
236
+ <!-- Movies Added Chart -->
237
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
238
+ <div class="flex justify-between items-center mb-4">
239
+ <h3 class="text-lg font-medium">Films ajoutés (30 derniers jours)</h3>
240
+ <div class="flex space-x-2">
241
+ <button class="bg-gray-700 text-white px-3 py-1 rounded text-xs">Mois</button>
242
+ <button class="bg-gray-800 text-gray-400 px-3 py-1 rounded text-xs">Année</button>
243
+ </div>
244
+ </div>
245
+ <div class="h-64">
246
+ <canvas id="moviesAddedChart"></canvas>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Genres Distribution Chart -->
251
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
252
+ <h3 class="text-lg font-medium mb-4">Répartition par genres</h3>
253
+ <div class="h-64">
254
+ <canvas id="genresChart"></canvas>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Recent Activity -->
260
+ <div class="bg-gray-800 rounded-lg p-6 shadow mb-8">
261
+ <h3 class="text-lg font-medium mb-4">Activité récente</h3>
262
+ <div class="overflow-x-auto">
263
+ <table class="min-w-full divide-y divide-gray-700">
264
+ <thead class="bg-gray-900">
265
+ <tr>
266
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Utilisateur</th>
267
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Action</th>
268
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Film</th>
269
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Heure</th>
270
+ </tr>
271
+ </thead>
272
+ <tbody class="bg-gray-800 divide-y divide-gray-700" id="recentActivity">
273
+ <!-- Filled by JavaScript -->
274
+ </tbody>
275
+ </table>
276
+ </div>
277
+ </div>
278
+ </section>
279
+
280
+ <!-- Movies Database Section -->
281
+ <section id="movies" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 bg-gray-900">
282
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
283
+ <h2 class="text-3xl font-bold mb-4 md:mb-0">Base de données de films</h2>
284
+ <div class="flex space-x-3">
285
+ <div class="relative">
286
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
287
+ <i class="fas fa-search text-gray-400"></i>
288
+ </div>
289
+ <input type="text" id="movieSearch" class="bg-gray-800 text-white pl-10 pr-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Rechercher un film...">
290
+ </div>
291
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
292
+ <i class="fas fa-plus mr-2"></i> Ajouter
293
+ </button>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Filters -->
298
+ <div class="bg-gray-800 rounded-lg p-4 mb-6">
299
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
300
+ <div>
301
+ <label for="genreFilter" class="block text-sm font-medium text-gray-300 mb-1">Genre</label>
302
+ <select id="genreFilter" class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
303
+ <option value="">Tous les genres</option>
304
+ <!-- Filled by JavaScript -->
305
+ </select>
306
+ </div>
307
+ <div>
308
+ <label for="yearFilter" class="block text-sm font-medium text-gray-300 mb-1">Année</label>
309
+ <select id="yearFilter" class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
310
+ <option value="">Toutes les années</option>
311
+ <!-- Filled by JavaScript -->
312
+ </select>
313
+ </div>
314
+ <div>
315
+ <label for="ratingFilter" class="block text-sm font-medium text-gray-300 mb-1">Note</label>
316
+ <select id="ratingFilter" class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
317
+ <option value="">Toutes les notes</option>
318
+ <option value="9">9+</option>
319
+ <option value="8">8+</option>
320
+ <option value="7">7+</option>
321
+ <option value="6">6+</option>
322
+ <option value="5">5+</option>
323
+ </select>
324
+ </div>
325
+ <div>
326
+ <label for="sortBy" class="block text-sm font-medium text-gray-300 mb-1">Trier par</label>
327
+ <select id="sortBy" class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
328
+ <option value="popularity">Popularité</option>
329
+ <option value="release_date">Date de sortie</option>
330
+ <option value="vote_average">Note moyenne</option>
331
+ <option value="title">Titre</option>
332
+ </select>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- Movies Table -->
338
+ <div class="bg-gray-800 rounded-lg shadow overflow-hidden">
339
+ <div class="overflow-x-auto">
340
+ <table class="data-table">
341
+ <thead>
342
+ <tr>
343
+ <th class="w-16">Poster</th>
344
+ <th>Titre</th>
345
+ <th>Genre</th>
346
+ <th>Année</th>
347
+ <th>Note</th>
348
+ <th>Actions</th>
349
+ </tr>
350
+ </thead>
351
+ <tbody id="moviesTableBody">
352
+ <!-- Filled by JavaScript -->
353
+ </tbody>
354
+ </table>
355
+ </div>
356
+
357
+ <!-- Pagination -->
358
+ <div class="px-6 py-4 bg-gray-900 border-t border-gray-700 flex items-center justify-between">
359
+ <div class="text-sm text-gray-400">
360
+ Affichage de <span id="moviesFrom">1</span> à <span id="moviesTo">20</span> sur <span id="totalMoviesCount">127,453</span> films
361
+ </div>
362
+ <nav class="pagination flex space-x-1">
363
+ <button class="page-item page-link px-3 py-1 rounded" id="prevPage">Précédent</button>
364
+ <!-- Page numbers filled by JavaScript -->
365
+ <button class="page-item page-link px-3 py-1 rounded" id="nextPage">Suivant</button>
366
+ </nav>
367
+ </div>
368
+ </div>
369
+ </section>
370
+
371
+ <!-- Auto Import Section -->
372
+ <section id="import" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
373
+ <h2 class="text-3xl font-bold mb-8">Import automatique</h2>
374
+
375
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
376
+ <!-- Import Sources -->
377
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
378
+ <h3 class="text-xl font-medium mb-4">Sources d'import</h3>
379
+ <div class="space-y-4">
380
+ <div class="flex items-center justify-between p-4 bg-gray-700 rounded-lg">
381
+ <div class="flex items-center">
382
+ <img src="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg" alt="TMDB" class="h-8 mr-3">
383
+ <div>
384
+ <h4 class="font-medium">The Movie Database (TMDB)</h4>
385
+ <p class="text-sm text-gray-400">Base de données complète de films et séries</p>
386
+ </div>
387
+ </div>
388
+ <div class="flex items-center space-x-2">
389
+ <span class="text-green-400 text-sm font-medium"><i class="fas fa-check-circle mr-1"></i> Connecté</span>
390
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">Configurer</button>
391
+ </div>
392
+ </div>
393
+
394
+ <div class="flex items-center justify-between p-4 bg-gray-700 rounded-lg">
395
+ <div class="flex items-center">
396
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/IMDB_Logo_2016.svg/320px-IMDB_Logo_2016.svg.png" alt="IMDb" class="h-8 mr-3">
397
+ <div>
398
+ <h4 class="font-medium">IMDb</h4>
399
+ <p class="text-sm text-gray-400">Base de données de films et notes</p>
400
+ </div>
401
+ </div>
402
+ <div class="flex items-center space-x-2">
403
+ <span class="text-yellow-400 text-sm font-medium"><i class="fas fa-exclamation-circle mr-1"></i> API Key requise</span>
404
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">Configurer</button>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="flex items-center justify-between p-4 bg-gray-700 rounded-lg">
409
+ <div class="flex items-center">
410
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Logo_of_Netflix.png/320px-Logo_of_Netflix.png" alt="Netflix" class="h-8 mr-3">
411
+ <div>
412
+ <h4 class="font-medium">Netflix</h4>
413
+ <p class="text-sm text-gray-400">Catalogue Netflix</p>
414
+ </div>
415
+ </div>
416
+ <button class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded text-sm">Connecter</button>
417
+ </div>
418
+
419
+ <div class="flex items-center justify-between p-4 bg-gray-700 rounded-lg">
420
+ <div class="flex items-center">
421
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Amazon_Prime_Video_logo.svg/320px-Amazon_Prime_Video_logo.svg.png" alt="Prime Video" class="h-8 mr-3">
422
+ <div>
423
+ <h4 class="font-medium">Amazon Prime Video</h4>
424
+ <p class="text-sm text-gray-400">Catalogue Prime Video</p>
425
+ </div>
426
+ </div>
427
+ <button class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded text-sm">Connecter</button>
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <!-- Import Settings -->
433
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
434
+ <h3 class="text-xl font-medium mb-4">Paramètres d'import</h3>
435
+
436
+ <div class="space-y-6">
437
+ <div>
438
+ <h4 class="font-medium mb-2">Fréquence d'import</h4>
439
+ <div class="grid grid-cols-3 gap-2">
440
+ <button class="bg-blue-600 text-white py-2 rounded text-sm">Quotidien</button>
441
+ <button class="bg-gray-700 hover:bg-gray-600 text-white py-2 rounded text-sm">Hebdomadaire</button>
442
+ <button class="bg-gray-700 hover:bg-gray-600 text-white py-2 rounded text-sm">Mensuel</button>
443
+ </div>
444
+ </div>
445
+
446
+ <div>
447
+ <h4 class="font-medium mb-2">Types de contenu</h4>
448
+ <div class="space-y-2">
449
+ <div class="flex items-center">
450
+ <input id="import-movies" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2" checked>
451
+ <label for="import-movies" class="ml-2 text-sm font-medium text-gray-300">Films</label>
452
+ </div>
453
+ <div class="flex items-center">
454
+ <input id="import-tvshows" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2" checked>
455
+ <label for="import-tvshows" class="ml-2 text-sm font-medium text-gray-300">Séries TV</label>
456
+ </div>
457
+ <div class="flex items-center">
458
+ <input id="import-documentaries" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2">
459
+ <label for="import-documentaries" class="ml-2 text-sm font-medium text-gray-300">Documentaires</label>
460
+ </div>
461
+ </div>
462
+ </div>
463
+
464
+ <div>
465
+ <h4 class="font-medium mb-2">Dernier import</h4>
466
+ <div class="bg-gray-700 rounded-lg p-4">
467
+ <div class="flex items-center justify-between mb-2">
468
+ <span class="text-gray-300">Statut:</span>
469
+ <span class="text-green-400 font-medium"><i class="fas fa-check-circle mr-1"></i> Terminé</span>
470
+ </div>
471
+ <div class="flex items-center justify-between mb-2">
472
+ <span class="text-gray-300">Date:</span>
473
+ <span class="text-gray-300">Aujourd'hui, 03:45</span>
474
+ </div>
475
+ <div class="flex items-center justify-between">
476
+ <span class="text-gray-300">Nouveaux films:</span>
477
+ <span class="text-gray-300">127</span>
478
+ </div>
479
+ </div>
480
+ </div>
481
+
482
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium flex items-center justify-center">
483
+ <i class="fas fa-sync-alt mr-2"></i> Lancer l'import maintenant
484
+ </button>
485
+ </div>
486
+ </div>
487
+ </div>
488
+
489
+ <!-- Import Logs -->
490
+ <div class="mt-8 bg-gray-800 rounded-lg p-6 shadow">
491
+ <h3 class="text-xl font-medium mb-4">Historique des imports</h3>
492
+ <div class="overflow-x-auto">
493
+ <table class="min-w-full divide-y divide-gray-700">
494
+ <thead class="bg-gray-900">
495
+ <tr>
496
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Date</th>
497
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Source</th>
498
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Type</th>
499
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Nouveaux</th>
500
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Mis à jour</th>
501
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Statut</th>
502
+ </tr>
503
+ </thead>
504
+ <tbody class="bg-gray-800 divide-y divide-gray-700" id="importLogs">
505
+ <!-- Filled by JavaScript -->
506
+ </tbody>
507
+ </table>
508
+ </div>
509
+ </div>
510
+ </section>
511
+
512
+ <!-- Analytics Section -->
513
+ <section id="analytics" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 bg-gray-900">
514
+ <h2 class="text-3xl font-bold mb-8">Analytiques</h2>
515
+
516
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
517
+ <!-- Popular Genres -->
518
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
519
+ <h3 class="text-xl font-medium mb-4">Genres les plus populaires</h3>
520
+ <div class="h-80">
521
+ <canvas id="popularGenresChart"></canvas>
522
+ </div>
523
+ </div>
524
+
525
+ <!-- Release Years -->
526
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
527
+ <h3 class="text-xl font-medium mb-4">Répartition par année</h3>
528
+ <div class="h-80">
529
+ <canvas id="releaseYearsChart"></canvas>
530
+ </div>
531
+ </div>
532
+ </div>
533
+
534
+ <!-- Top Rated Movies -->
535
+ <div class="bg-gray-800 rounded-lg p-6 shadow mb-8">
536
+ <div class="flex justify-between items-center mb-4">
537
+ <h3 class="text-xl font-medium">Films les mieux notés</h3>
538
+ <div class="flex space-x-2">
539
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm">Cette année</button>
540
+ <button class="bg-blue-600 text-white px-3 py-1 rounded text-sm">Tous les temps</button>
541
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm">Par décennie</button>
542
+ </div>
543
+ </div>
544
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4" id="topRatedMovies">
545
+ <!-- Filled by JavaScript -->
546
+ </div>
547
+ </div>
548
+
549
+ <!-- Viewing Statistics -->
550
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
551
+ <h3 class="text-xl font-medium mb-4">Statistiques de visionnage</h3>
552
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
553
+ <div>
554
+ <h4 class="font-medium mb-2">Heures de visionnage par jour</h4>
555
+ <div class="bg-gray-700 rounded-lg p-4 h-64">
556
+ <canvas id="viewingHoursChart"></canvas>
557
+ </div>
558
+ </div>
559
+ <div>
560
+ <h4 class="font-medium mb-2">Appareils utilisés</h4>
561
+ <div class="bg-gray-700 rounded-lg p-4 h-64">
562
+ <canvas id="devicesChart"></canvas>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
567
+ <div class="bg-gray-700 rounded-lg p-4">
568
+ <h4 class="font-medium mb-2">Pays les plus actifs</h4>
569
+ <div class="space-y-2" id="topCountries">
570
+ <!-- Filled by JavaScript -->
571
+ </div>
572
+ </div>
573
+ <div class="bg-gray-700 rounded-lg p-4">
574
+ <h4 class="font-medium mb-2">Groupes d'âge</h4>
575
+ <div class="h-40">
576
+ <canvas id="ageGroupsChart"></canvas>
577
+ </div>
578
+ </div>
579
+ <div class="bg-gray-700 rounded-lg p-4">
580
+ <h4 class="font-medium mb-2">Taux de rétention</h4>
581
+ <div class="flex items-center justify-center h-40">
582
+ <div class="text-center">
583
+ <div class="text-4xl font-bold text-blue-400">87%</div>
584
+ <div class="text-gray-400">Utilisateurs actifs mensuels</div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ </div>
589
+ </div>
590
+ </section>
591
+ </main>
592
+
593
+ <!-- Footer -->
594
+ <footer class="bg-gray-900 border-t border-gray-800">
595
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
596
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
597
+ <div>
598
+ <h3 class="text-white font-bold mb-4">MegaTV</h3>
599
+ <ul class="space-y-2">
600
+ <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
601
+ <li><a href="#" class="text-gray-400 hover:text-white">Carrières</a></li>
602
+ <li><a href="#" class="text-gray-400 hover:text-white">Presse</a></li>
603
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
604
+ </ul>
605
+ </div>
606
+ <div>
607
+ <h3 class="text-white font-bold mb-4">Aide</h3>
608
+ <ul class="space-y-2">
609
+ <li><a href="#" class="text-gray-400 hover:text-white">Centre d'aide</a></li>
610
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
611
+ <li><a href="#" class="text-gray-400 hover:text-white">Accessibilité</a></li>
612
+ <li><a href="#" class="text-gray-400 hover:text-white">Assistance</a></li>
613
+ </ul>
614
+ </div>
615
+ <div>
616
+ <h3 class="text-white font-bold mb-4">Légal</h3>
617
+ <ul class="space-y-2">
618
+ <li><a href="#" class="text-gray-400 hover:text-white">Conditions</a></li>
619
+ <li><a href="#" class="text-gray-400 hover:text-white">Confidentialité</a></li>
620
+ <li><a href="#" class="text-gray-400 hover:text-white">Cookies</a></li>
621
+ <li><a href="#" class="text-gray-400 hover:text-white">Copyright</a></li>
622
+ </ul>
623
+ </div>
624
+ <div>
625
+ <h3 class="text-white font-bold mb-4">Suivez-nous</h3>
626
+ <div class="flex space-x-4">
627
+ <a href="#" class="text-gray-400 hover:text-white">
628
+ <i class="fab fa-facebook-f text-xl"></i>
629
+ </a>
630
+ <a href="#" class="text-gray-400 hover:text-white">
631
+ <i class="fab fa-twitter text-xl"></i>
632
+ </a>
633
+ <a href="#" class="text-gray-400 hover:text-white">
634
+ <i class="fab fa-instagram text-xl"></i>
635
+ </a>
636
+ <a href="#" class="text-gray-400 hover:text-white">
637
+ <i class="fab fa-youtube text-xl"></i>
638
+ </a>
639
+ </div>
640
+ <div class="mt-6">
641
+ <h4 class="text-white font-bold mb-2">Téléchargez l'application</h4>
642
+ <div class="flex space-x-2">
643
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium flex items-center">
644
+ <i class="fab fa-apple mr-2"></i> App Store
645
+ </a>
646
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium flex items-center">
647
+ <i class="fab fa-google-play mr-2"></i> Play Store
648
+ </a>
649
+ </div>
650
+ </div>
651
+ </div>
652
+ </div>
653
+ <div class="mt-12 pt-8 border-t border-gray-800">
654
+ <p class="text-gray-400 text-sm text-center">© 2023 MegaTV. Tous droits réservés. MegaTV est une marque déposée.</p>
655
+ </div>
656
+ </div>
657
+ </footer>
658
+
659
+ <!-- Scripts -->
660
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
661
+ <script>
662
+ // Sample data for demonstration
663
+ const sampleMovies = [
664
+ {
665
+ id: 1,
666
+ title: "The Shawshank Redemption",
667
+ poster: "https://m.media-amazon.com/images/M/MV5BNDE3ODcxYzMtY2YzZC00NmNlLWJiNDMtZDViZWM2MzIxZDYwXkEyXkFqcGdeQXVyNjAwNDUxODI@._V1_.jpg",
668
+ genres: ["Drame"],
669
+ year: 1994,
670
+ rating: 9.3,
671
+ popularity: 100
672
+ },
673
+ {
674
+ id: 2,
675
+ title: "The Godfather",
676
+ poster: "https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_.jpg",
677
+ genres: ["Crime", "Drame"],
678
+ year: 1972,
679
+ rating: 9.2,
680
+ popularity: 95
681
+ },
682
+ {
683
+ id: 3,
684
+ title: "The Dark Knight",
685
+ poster: "https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_.jpg",
686
+ genres: ["Action", "Crime", "Drame"],
687
+ year: 2008,
688
+ rating: 9.0,
689
+ popularity: 98
690
+ },
691
+ {
692
+ id: 4,
693
+ title: "Pulp Fiction",
694
+ poster: "https://m.media-amazon.com/images/M/MV5BNGNhMDIzZTUtNTBlZi00MTRlLWFjM2ItYzViMjE3YzI5MjljXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_.jpg",
695
+ genres: ["Crime", "Drame"],
696
+ year: 1994,
697
+ rating: 8.9,
698
+ popularity: 90
699
+ },
700
+ {
701
+ id: 5,
702
+ title: "Fight Club",
703
+ poster: "https://m.media-amazon.com/images/M/MV5BMmEzNTkxYjQtZTc0MC00YTVjLTg5ZTEtZWMwOWVlYzY0NWIwXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_.jpg",
704
+ genres: ["Drame"],
705
+ year: 1999,
706
+ rating: 8.8,
707
+ popularity: 88
708
+ },
709
+ {
710
+ id: 6,
711
+ title: "Inception",
712
+ poster: "https://m.media-amazon.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_.jpg",
713
+ genres: ["Action", "Aventure", "Sci-Fi"],
714
+ year: 2010,
715
+ rating: 8.8,
716
+ popularity: 92
717
+ },
718
+ {
719
+ id: 7,
720
+ title: "The Matrix",
721
+ poster: "https://m.media-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_.jpg",
722
+ genres: ["Action", "Sci-Fi"],
723
+ year: 1999,
724
+ rating: 8.7,
725
+ popularity: 85
726
+ },
727
+ {
728
+ id: 8,
729
+ title: "Goodfellas",
730
+ poster: "https://m.media-amazon.com/images/M/MV5BY2NkZjEzMDgtN2RjYy00YzM1LWI4ZmQtMjIwYjFjNmI3ZGEwXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_.jpg",
731
+ genres: ["Biographie", "Crime", "Drame"],
732
+ year: 1990,
733
+ rating: 8.7,
734
+ popularity: 82
735
+ },
736
+ {
737
+ id: 9,
738
+ title: "The Silence of the Lambs",
739
+ poster: "https://m.media-amazon.com/images/M/MV5BNjNhZTk0ZmEtNjJhMi00YzFlLWE1MmEtYzM1M2ZmMGMwMTU4XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_.jpg",
740
+ genres: ["Crime", "Drame", "Thriller"],
741
+ year: 1991,
742
+ rating: 8.6,
743
+ popularity: 80
744
+ },
745
+ {
746
+ id: 10,
747
+ title: "Interstellar",
748
+ poster: "https://m.media-amazon.com/images/M/MV5BZjdkOTU3MDktN2IxOS00OGEyLWFmMjktY2FiMmZkNWIyODZiXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg",
749
+ genres: ["Aventure", "Drame", "Sci-Fi"],
750
+ year: 2014,
751
+ rating: 8.6,
752
+ popularity: 89
753
+ }
754
+ ];
755
+
756
+ // Generate more sample data (total 100 movies for demo)
757
+ for (let i = 11; i <= 100; i++) {
758
+ const genres = [
759
+ ["Action"], ["Aventure"], ["Animation"], ["Comédie"], ["Crime"],
760
+ ["Documentaire"], ["Drame"], ["Familial"], ["Fantastique"],
761
+ ["Histoire"], ["Horreur"], ["Musique"], ["Mystère"], ["Romance"],
762
+ ["Sci-Fi"], ["Téléfilm"], ["Thriller"], ["Guerre"], ["Western"]
763
+ ];
764
+
765
+ const randomGenres = [];
766
+ const numGenres = Math.floor(Math.random() * 3) + 1;
767
+ for (let j = 0; j < numGenres; j++) {
768
+ const randomIndex = Math.floor(Math.random() * genres.length);
769
+ randomGenres.push(genres[randomIndex][0]);
770
+ }
771
+
772
+ sampleMovies.push({
773
+ id: i,
774
+ title: `Movie ${i}`,
775
+ poster: `https://via.placeholder.com/300x450?text=Movie+${i}`,
776
+ genres: randomGenres,
777
+ year: Math.floor(Math.random() * (2023 - 1950 + 1)) + 1950,
778
+ rating: (Math.random() * 3 + 7).toFixed(1),
779
+ popularity: Math.floor(Math.random() * 100)
780
+ });
781
+ }
782
+
783
+ // All unique genres for filter
784
+ const allGenres = [...new Set(sampleMovies.flatMap(movie => movie.genres))];
785
+
786
+ // All unique years for filter
787
+ const allYears = [...new Set(sampleMovies.map(movie => movie.year))].sort((a, b) => b - a);
788
+
789
+ // Initialize charts
790
+ function initCharts() {
791
+ // Movies Added Chart
792
+ const moviesAddedCtx = document.getElementById('moviesAddedChart').getContext('2d');
793
+ new Chart(moviesAddedCtx, {
794
+ type: 'line',
795
+ data: {
796
+ labels: Array.from({length: 30}, (_, i) => `${i+1} Jun`),
797
+ datasets: [{
798
+ label: 'Films ajoutés',
799
+ data: Array.from({length: 30}, () => Math.floor(Math.random() * 100) + 20),
800
+ borderColor: '#3b82f6',
801
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
802
+ borderWidth: 2,
803
+ tension: 0.3,
804
+ fill: true
805
+ }]
806
+ },
807
+ options: {
808
+ responsive: true,
809
+ maintainAspectRatio: false,
810
+ plugins: {
811
+ legend: {
812
+ display: false
813
+ }
814
+ },
815
+ scales: {
816
+ y: {
817
+ beginAtZero: true,
818
+ grid: {
819
+ color: 'rgba(255, 255, 255, 0.1)'
820
+ },
821
+ ticks: {
822
+ color: '#e2e8f0'
823
+ }
824
+ },
825
+ x: {
826
+ grid: {
827
+ display: false
828
+ },
829
+ ticks: {
830
+ color: '#e2e8f0'
831
+ }
832
+ }
833
+ }
834
+ }
835
+ });
836
+
837
+ // Genres Distribution Chart
838
+ const genresCtx = document.getElementById('genresChart').getContext('2d');
839
+ new Chart(genresCtx, {
840
+ type: 'doughnut',
841
+ data: {
842
+ labels: allGenres.slice(0, 8),
843
+ datasets: [{
844
+ data: allGenres.slice(0, 8).map(() => Math.floor(Math.random() * 100) + 10),
845
+ backgroundColor: [
846
+ '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
847
+ '#ec4899', '#14b8a6', '#f97316'
848
+ ],
849
+ borderWidth: 0
850
+ }]
851
+ },
852
+ options: {
853
+ responsive: true,
854
+ maintainAspectRatio: false,
855
+ plugins: {
856
+ legend: {
857
+ position: 'right',
858
+ labels: {
859
+ color: '#e2e8f0'
860
+ }
861
+ }
862
+ },
863
+ cutout: '70%'
864
+ }
865
+ });
866
+
867
+ // Popular Genres Chart
868
+ const popularGenresCtx = document.getElementById('popularGenresChart').getContext('2d');
869
+ new Chart(popularGenresCtx, {
870
+ type: 'bar',
871
+ data: {
872
+ labels: allGenres.slice(0, 10),
873
+ datasets: [{
874
+ label: 'Vues (milliers)',
875
+ data: allGenres.slice(0, 10).map(() => Math.floor(Math.random() * 900) + 100),
876
+ backgroundColor: '#3b82f6'
877
+ }]
878
+ },
879
+ options: {
880
+ responsive: true,
881
+ maintainAspectRatio: false,
882
+ plugins: {
883
+ legend: {
884
+ display: false
885
+ }
886
+ },
887
+ scales: {
888
+ y: {
889
+ beginAtZero: true,
890
+ grid: {
891
+ color: 'rgba(255, 255, 255, 0.1)'
892
+ },
893
+ ticks: {
894
+ color: '#e2e8f0'
895
+ }
896
+ },
897
+ x: {
898
+ grid: {
899
+ display: false
900
+ },
901
+ ticks: {
902
+ color: '#e2e8f0'
903
+ }
904
+ }
905
+ }
906
+ }
907
+ });
908
+
909
+ // Release Years Chart
910
+ const releaseYearsCtx = document.getElementById('releaseYearsChart').getContext('2d');
911
+ new Chart(releaseYearsCtx, {
912
+ type: 'line',
913
+ data: {
914
+ labels: ['2020s', '2010s', '2000s', '1990s', '1980s', '1970s', '1960s', '1950s'],
915
+ datasets: [{
916
+ label: 'Films',
917
+ data: [3421, 5678, 4321, 3456, 2345, 1234, 567, 234],
918
+ borderColor: '#10b981',
919
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
920
+ borderWidth: 2,
921
+ tension: 0.3,
922
+ fill: true
923
+ }]
924
+ },
925
+ options: {
926
+ responsive: true,
927
+ maintainAspectRatio: false,
928
+ plugins: {
929
+ legend: {
930
+ display: false
931
+ }
932
+ },
933
+ scales: {
934
+ y: {
935
+ beginAtZero: true,
936
+ grid: {
937
+ color: 'rgba(255, 255, 255, 0.1)'
938
+ },
939
+ ticks: {
940
+ color: '#e2e8f0'
941
+ }
942
+ },
943
+ x: {
944
+ grid: {
945
+ display: false
946
+ },
947
+ ticks: {
948
+ color: '#e2e8f0'
949
+ }
950
+ }
951
+ }
952
+ }
953
+ });
954
+
955
+ // Viewing Hours Chart
956
+ const viewingHoursCtx = document.getElementById('viewingHoursChart').getContext('2d');
957
+ new Chart(viewingHoursCtx, {
958
+ type: 'line',
959
+ data: {
960
+ labels: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'],
961
+ datasets: [{
962
+ label: 'Heures',
963
+ data: [12000, 19000, 15000, 18000, 22000, 25000, 20000],
964
+ borderColor: '#8b5cf6',
965
+ backgroundColor: 'rgba(139, 92, 246, 0.1)',
966
+ borderWidth: 2,
967
+ tension: 0.3,
968
+ fill: true
969
+ }]
970
+ },
971
+ options: {
972
+ responsive: true,
973
+ maintainAspectRatio: false,
974
+ plugins: {
975
+ legend: {
976
+ display: false
977
+ }
978
+ },
979
+ scales: {
980
+ y: {
981
+ beginAtZero: true,
982
+ grid: {
983
+ color: 'rgba(255, 255, 255, 0.1)'
984
+ },
985
+ ticks: {
986
+ color: '#e2e8f0'
987
+ }
988
+ },
989
+ x: {
990
+ grid: {
991
+ display: false
992
+ },
993
+ ticks: {
994
+ color: '#e2e8f0'
995
+ }
996
+ }
997
+ }
998
+ }
999
+ });
1000
+
1001
+ // Devices Chart
1002
+ const devicesCtx = document.getElementById('devicesChart').getContext('2d');
1003
+ new Chart(devicesCtx, {
1004
+ type: 'pie',
1005
+ data: {
1006
+ labels: ['Mobile', 'Tablette', 'Ordinateur', 'TV', 'Console'],
1007
+ datasets: [{
1008
+ data: [35, 15, 25, 20, 5],
1009
+ backgroundColor: [
1010
+ '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'
1011
+ ],
1012
+ borderWidth: 0
1013
+ }]
1014
+ },
1015
+ options: {
1016
+ responsive: true,
1017
+ maintainAspectRatio: false,
1018
+ plugins: {
1019
+ legend: {
1020
+ position: 'right',
1021
+ labels: {
1022
+ color: '#e2e8f0'
1023
+ }
1024
+ }
1025
+ }
1026
+ }
1027
+ });
1028
+
1029
+ // Age Groups Chart
1030
+ const ageGroupsCtx = document.getElementById('ageGroupsChart').getContext('2d');
1031
+ new Chart(ageGroupsCtx, {
1032
+ type: 'bar',
1033
+ data: {
1034
+ labels: ['13-17', '18-24', '25-34', '35-44', '45-54', '55-64', '65+'],
1035
+ datasets: [{
1036
+ label: 'Utilisateurs',
1037
+ data: [5, 25, 35, 20, 10, 3, 2],
1038
+ backgroundColor: '#3b82f6'
1039
+ }]
1040
+ },
1041
+ options: {
1042
+ responsive: true,
1043
+ maintainAspectRatio: false,
1044
+ plugins: {
1045
+ legend: {
1046
+ display: false
1047
+ }
1048
+ },
1049
+ scales: {
1050
+ y: {
1051
+ beginAtZero: true,
1052
+ grid: {
1053
+ display: false
1054
+ },
1055
+ ticks: {
1056
+ color: '#e2e8f0'
1057
+ }
1058
+ },
1059
+ x: {
1060
+ grid: {
1061
+ display: false
1062
+ },
1063
+ ticks: {
1064
+ color: '#e2e8f0'
1065
+ }
1066
+ }
1067
+ }
1068
+ }
1069
+ });
1070
+ }
1071
+
1072
+ // Fill recent activity
1073
+ function fillRecentActivity() {
1074
+ const activities = [
1075
+ { user: "Jean Dupont", action: "A regardé", movie: "Inception", time: "Il y a 2 minutes" },
1076
+ { user: "Marie Martin", action: "A ajouté", movie: "The Shawshank Redemption à sa liste", time: "Il y a 10 minutes" },
1077
+ { user: "Pierre Bernard", action: "A noté", movie: "The Godfather (5 étoiles)", time: "Il y a 25 minutes" },
1078
+ { user: "Sophie Leroy", action: "A partagé", movie: "Pulp Fiction", time: "Il y a 1 heure" },
1079
+ { user: "Thomas Moreau", action: "A commencé", movie: "The Dark Knight", time: "Il y a 2 heures" }
1080
+ ];
1081
+
1082
+ const recentActivityEl = document.getElementById('recentActivity');
1083
+ recentActivityEl.innerHTML = '';
1084
+
1085
+ activities.forEach(activity => {
1086
+ const tr = document.createElement('tr');
1087
+ tr.innerHTML = `
1088
+ <td class="px-6 py-4 whitespace-nowrap">
1089
+ <div class="flex items-center">
1090
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-600 flex items-center justify-center text-white">
1091
+ ${activity.user.split(' ').map(name => name[0]).join('')}
1092
+ </div>
1093
+ <div class="ml-4">
1094
+ <div class="text-sm font-medium text-white">${activity.user}</div>
1095
+ </div>
1096
+ </div>
1097
+ </td>
1098
+ <td class="px-6 py-4 whitespace-nowrap">
1099
+ <div class="text-sm text-gray-300">${activity.action}</div>
1100
+ </td>
1101
+ <td class="px-6 py-4 whitespace-nowrap">
1102
+ <div class="text-sm text-blue-400">${activity.movie}</div>
1103
+ </td>
1104
+ <td class="px-6 py-4 whitespace-nowrap">
1105
+ <div class="text-sm text-gray-400">${activity.time}</div>
1106
+ </td>
1107
+ `;
1108
+ recentActivityEl.appendChild(tr);
1109
+ });
1110
+ }
1111
+
1112
+ // Fill import logs
1113
+ function fillImportLogs() {
1114
+ const logs = [
1115
+ { date: "Aujourd'hui, 03:45", source: "TMDB", type: "Films", new: 127, updated: 342, status: "Terminé" },
1116
+ { date: "Hier, 03:45", source: "IMDb", type: "Notes", new: 0, updated: 1253, status: "Terminé" },
1117
+ { date: "Lundi, 03:45", source: "TMDB", type: "Films & Séries", new: 89, updated: 231, status: "Terminé" },
1118
+ { date: "Dimanche, 03:45", source: "Netflix", type: "Catalogue", new: 42, updated: 0, status: "Terminé" },
1119
+ { date: "Samedi, 03:45", source: "TMDB", type: "Films", new: 56, updated: 187, status: "Terminé" }
1120
+ ];
1121
+
1122
+ const importLogsEl = document.getElementById('importLogs');
1123
+ importLogsEl.innerHTML = '';
1124
+
1125
+ logs.forEach(log => {
1126
+ const tr = document.createElement('tr');
1127
+ tr.innerHTML = `
1128
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">${log.date}</td>
1129
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">${log.source}</td>
1130
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">${log.type}</td>
1131
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-400">${log.new}</td>
1132
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-400">${log.updated}</td>
1133
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
1134
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-100">
1135
+ ${log.status}
1136
+ </span>
1137
+ </td>
1138
+ `;
1139
+ importLogsEl.appendChild(tr);
1140
+ });
1141
+ }
1142
+
1143
+ // Fill top rated movies
1144
+ function fillTopRatedMovies() {
1145
+ const topRatedMoviesEl = document.getElementById('topRatedMovies');
1146
+ topRatedMoviesEl.innerHTML = '';
1147
+
1148
+ // Sort by rating and get top 10
1149
+ const topMovies = [...sampleMovies].sort((a, b) => b.rating - a.rating).slice(0, 10);
1150
+
1151
+ topMovies.forEach(movie => {
1152
+ const div = document.createElement('div');
1153
+ div.className = 'group cursor-pointer';
1154
+ div.innerHTML = `
1155
+ <div class="relative overflow-hidden rounded-lg mb-2">
1156
+ <img src="${movie.poster}" alt="${movie.title}" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
1157
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition duration-300 flex items-center justify-center">
1158
+ <button class="opacity-0 group-hover:opacity-100 bg-blue-600 text-white p-3 rounded-full transform translate-y-2 group-hover:translate-y-0 transition duration-300">
1159
+ <i class="fas fa-play"></i>
1160
+ </button>
1161
+ </div>
1162
+ <div class="absolute top-2 right-2 bg-yellow-600 text-white px-2 py-1 rounded-md text-xs font-bold">
1163
+ ${movie.rating}
1164
+ </div>
1165
+ </div>
1166
+ <h3 class="text-white font-medium">${movie.title}</h3>
1167
+ <div class="flex items-center text-gray-400 text-sm">
1168
+ <span>${movie.year}</span>
1169
+ <span class="mx-1">•</span>
1170
+ <span>${movie.genres.join(', ')}</span>
1171
+ </div>
1172
+ `;
1173
+ topRatedMoviesEl.appendChild(div);
1174
+ });
1175
+ }
1176
+
1177
+ // Fill top countries
1178
+ function fillTopCountries() {
1179
+ const countries = [
1180
+ { name: "France", percentage: 32 },
1181
+ { name: "États-Unis", percentage: 25 },
1182
+ { name: "Allemagne", percentage: 12 },
1183
+ { name: "Royaume-Uni", percentage: 8 },
1184
+ { name: "Canada", percentage: 6 }
1185
+ ];
1186
+
1187
+ const topCountriesEl = document.getElementById('topCountries');
1188
+ topCountriesEl.innerHTML = '';
1189
+
1190
+ countries.forEach(country => {
1191
+ const div = document.createElement('div');
1192
+ div.className = 'flex items-center justify-between';
1193
+ div.innerHTML = `
1194
+ <span class="text-gray-300">${country.name}</span>
1195
+ <div class="w-1/2 bg-gray-600 rounded-full h-2">
1196
+ <div class="bg-blue-600 h-2 rounded-full" style="width: ${country.percentage}%"></div>
1197
+ </div>
1198
+ <span class="text-gray-400 text-sm">${country.percentage}%</span>
1199
+ `;
1200
+ topCountriesEl.appendChild(div);
1201
+ });
1202
+ }
1203
+
1204
+ // Fill movies table
1205
+ function fillMoviesTable(movies, page = 1, pageSize = 10) {
1206
+ const moviesTableBody = document.getElementById('moviesTableBody');
1207
+ moviesTableBody.innerHTML = '';
1208
+
1209
+ const start = (page - 1) * pageSize;
1210
+ const end = start + pageSize;
1211
+ const paginatedMovies = movies.slice(start, end);
1212
+
1213
+ paginatedMovies.forEach(movie => {
1214
+ const tr = document.createElement('tr');
1215
+ tr.className = 'hover:bg-gray-700';
1216
+ tr.innerHTML = `
1217
+ <td class="py-3">
1218
+ <img src="${movie.poster}" alt="${movie.title}" class="w-12 h-16 object-cover rounded">
1219
+ </td>
1220
+ <td class="font-medium text-white">${movie.title}</td>
1221
+ <td>${movie.genres.join(', ')}</td>
1222
+ <td>${movie.year}</td>
1223
+ <td>
1224
+ <div class="flex items-center">
1225
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
1226
+ <span>${movie.rating}</span>
1227
+ </div>
1228
+ </td>
1229
+ <td>
1230
+ <div class="flex space-x-2">
1231
+ <button class="text-blue-400 hover:text-blue-300">
1232
+ <i class="fas fa-eye"></i>
1233
+ </button>
1234
+ <button class="text-green-400 hover:text-green-300">
1235
+ <i class="fas fa-edit"></i>
1236
+ </button>
1237
+ <button class="text-red-400 hover:text-red-300">
1238
+ <i class="fas fa-trash"></i>
1239
+ </button>
1240
+ </div>
1241
+ </td>
1242
+ `;
1243
+ moviesTableBody.appendChild(tr);
1244
+ });
1245
+
1246
+ // Update pagination info
1247
+ document.getElementById('moviesFrom').textContent = start + 1;
1248
+ document.getElementById('moviesTo').textContent = Math.min(end, movies.length);
1249
+ document.getElementById('totalMoviesCount').textContent = movies.length;
1250
+
1251
+ // Update pagination buttons
1252
+ updatePaginationButtons(movies.length, page, pageSize);
1253
+ }
1254
+
1255
+ // Update pagination buttons
1256
+ function updatePaginationButtons(totalItems, currentPage, pageSize) {
1257
+ const totalPages = Math.ceil(totalItems / pageSize);
1258
+ const paginationEl = document.querySelector('.pagination');
1259
+
1260
+ // Clear existing page numbers (keep Prev and Next)
1261
+ const prevBtn = document.getElementById('prevPage');
1262
+ const nextBtn = document.getElementById('nextPage');
1263
+ paginationEl.innerHTML = '';
1264
+ paginationEl.appendChild(prevBtn);
1265
+
1266
+ // Add page numbers
1267
+ const maxVisiblePages = 5;
1268
+ let startPage, endPage;
1269
+
1270
+ if (totalPages <= maxVisiblePages) {
1271
+ startPage = 1;
1272
+ endPage = totalPages;
1273
+ } else {
1274
+ const maxVisibleBeforeCurrent = Math.floor(maxVisiblePages / 2);
1275
+ const maxVisibleAfterCurrent = Math.ceil(maxVisiblePages / 2) - 1;
1276
+
1277
+ if (currentPage <= maxVisibleBeforeCurrent) {
1278
+ startPage = 1;
1279
+ endPage = maxVisiblePages;
1280
+ } else if (currentPage + maxVisibleAfterCurrent >= totalPages) {
1281
+ startPage = totalPages - maxVisiblePages + 1;
1282
+ endPage = totalPages;
1283
+ } else {
1284
+ startPage = currentPage - maxVisibleBeforeCurrent;
1285
+ endPage = currentPage + maxVisibleAfterCurrent;
1286
+ }
1287
+ }
1288
+
1289
+ // Add first page and ellipsis if needed
1290
+ if (startPage > 1) {
1291
+ addPageButton(1);
1292
+ if (startPage > 2) {
1293
+ const ellipsis = document.createElement('span');
1294
+ ellipsis.className = 'px-3 py-1';
1295
+ ellipsis.textContent = '...';
1296
+ paginationEl.appendChild(ellipsis);
1297
+ }
1298
+ }
1299
+
1300
+ // Add page buttons
1301
+ for (let i = startPage; i <= endPage; i++) {
1302
+ addPageButton(i);
1303
+ }
1304
+
1305
+ // Add last page and ellipsis if needed
1306
+ if (endPage < totalPages) {
1307
+ if (endPage < totalPages - 1) {
1308
+ const ellipsis = document.createElement('span');
1309
+ ellipsis.className = 'px-3 py-1';
1310
+ ellipsis.textContent = '...';
1311
+ paginationEl.appendChild(ellipsis);
1312
+ }
1313
+ addPageButton(totalPages);
1314
+ }
1315
+
1316
+ paginationEl.appendChild(nextBtn);
1317
+
1318
+ // Update prev/next button states
1319
+ prevBtn.disabled = currentPage === 1;
1320
+ nextBtn.disabled = currentPage === totalPages;
1321
+
1322
+ function addPageButton(pageNumber) {
1323
+ const button = document.createElement('button');
1324
+ button.className = `page-item page-link px-3 py-1 rounded ${currentPage === pageNumber ? 'bg-blue-600 text-white' : ''}`;
1325
+ button.textContent = pageNumber;
1326
+ button.addEventListener('click', () => {
1327
+ fillMoviesTable(sampleMovies, pageNumber, pageSize);
1328
+ });
1329
+ paginationEl.appendChild(button);
1330
+ }
1331
+ }
1332
+
1333
+ // Initialize filters
1334
+ function initFilters() {
1335
+ const genreFilter = document.getElementById('genreFilter');
1336
+ allGenres.forEach(genre => {
1337
+ const option = document.createElement('option');
1338
+ option.value = genre;
1339
+ option.textContent = genre;
1340
+ genreFilter.appendChild(option);
1341
+ });
1342
+
1343
+ const yearFilter = document.getElementById('yearFilter');
1344
+ allYears.forEach(year => {
1345
+ const option = document.createElement('option');
1346
+ option.value = year;
1347
+ option.textContent = year;
1348
+ yearFilter.appendChild(option);
1349
+ });
1350
+
1351
+ // Add event listeners for filters
1352
+ genreFilter.addEventListener('change', filterMovies);
1353
+ yearFilter.addEventListener('change', filterMovies);
1354
+ document.getElementById('ratingFilter').addEventListener('change', filterMovies);
1355
+ document.getElementById('sortBy').addEventListener('change', filterMovies);
1356
+ document.getElementById('movieSearch').addEventListener('input', filterMovies);
1357
+
1358
+ // Pagination button events
1359
+ document.getElementById('prevPage').addEventListener('click', () => {
1360
+ const currentPage = parseInt(document.querySelector('.pagination .bg-blue-600')?.textContent || '1');
1361
+ if (currentPage > 1) {
1362
+ fillMoviesTable(filteredMovies || sampleMovies, currentPage - 1, 10);
1363
+ }
1364
+ });
1365
+
1366
+ document.getElementById('nextPage').addEventListener('click', () => {
1367
+ const currentPage = parseInt(document.querySelector('.pagination .bg-blue-600')?.textContent || '1');
1368
+ const totalPages = Math.ceil((filteredMovies || sampleMovies).length / 10);
1369
+ if (currentPage < totalPages) {
1370
+ fillMoviesTable(filteredMovies || sampleMovies, currentPage + 1, 10);
1371
+ }
1372
+ });
1373
+ }
1374
+
1375
+ // Filter movies based on filters
1376
+ let filteredMovies = null;
1377
+ function filterMovies() {
1378
+ const genreFilter = document.getElementById('genreFilter').value;
1379
+ const yearFilter = document.getElementById('yearFilter').value;
1380
+ const ratingFilter = document.getElementById('ratingFilter').value;
1381
+ const sortBy = document.getElementById('sortBy').value;
1382
+ const searchQuery = document.getElementById('movieSearch').value.toLowerCase();
1383
+
1384
+ filteredMovies = sampleMovies.filter(movie => {
1385
+ // Genre filter
1386
+ if (genreFilter && !movie.genres.includes(genreFilter)) {
1387
+ return false;
1388
+ }
1389
+
1390
+ // Year filter
1391
+ if (yearFilter && movie.year !== parseInt(yearFilter)) {
1392
+ return false;
1393
+ }
1394
+
1395
+ // Rating filter
1396
+ if (ratingFilter && movie.rating < parseFloat(ratingFilter)) {
1397
+ return false;
1398
+ }
1399
+
1400
+ // Search query
1401
+ if (searchQuery && !movie.title.toLowerCase().includes(searchQuery)) {
1402
+ return false;
1403
+ }
1404
+
1405
+ return true;
1406
+ });
1407
+
1408
+ // Sort movies
1409
+ if (sortBy === 'popularity') {
1410
+ filteredMovies.sort((a, b) => b.popularity - a.popularity);
1411
+ } else if (sortBy === 'release_date') {
1412
+ filteredMovies.sort((a, b) => b.year - a.year);
1413
+ } else if (sortBy === 'vote_average') {
1414
+ filteredMovies.sort((a, b) => b.rating - a.rating);
1415
+ } else if (sortBy === 'title') {
1416
+ filteredMovies.sort((a, b) => a.title.localeCompare(b.title));
1417
+ }
1418
+
1419
+ // Update table with filtered movies
1420
+ fillMoviesTable(filteredMovies, 1, 10);
1421
+ }
1422
+
1423
+ // Initialize the page
1424
+ document.addEventListener('DOMContentLoaded', () => {
1425
+ initCharts();
1426
+ fillRecentActivity();
1427
+ fillImportLogs();
1428
+ fillTopRatedMovies();
1429
+ fillTopCountries();
1430
+ fillMoviesTable(sampleMovies, 1, 10);
1431
+ initFilters();
1432
+
1433
+ // Global search functionality
1434
+ document.getElementById('globalSearch').addEventListener('input', (e) => {
1435
+ const query = e.target.value.toLowerCase();
1436
+ if (query.length > 2) {
1437
+ // In a real app, this would search across all sections
1438
+ console.log('Searching for:', query);
1439
+ }
1440
+ });
1441
+ });
1442
+ </script>
1443
+ <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/megatv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1444
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ creer un super puissant chaine de télévision
2
+ je veut une base de données complet de film intégré en automatic je veux plus de 100000 film avec un big tableau de bord avec possibilité importe des films en automatique