interface_app_web_python/films.html at main · Imed7223/interface_app_web_python · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JustStreamIt</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-900">

<main  class="max-w-6xl mx-auto p-4" >
    <div class="container">
    <!-- Logo juste au-dessus de la section "Meilleur film" -->
    <div class="flex justify-left items-center mb-4">
        <img src="logo.png" alt="Logo Vidéos à la demande" class="w-[5000px] " > <!-- Ajuste la largeur selon besoin -->
    </div>

    <!-- Meilleur film -->
    <section id="best-movie" class="mb-20">
        <h2 class="text-xl font-semibold mb-4">Meilleur film</h2>
        <div id="best-movie-container" class="flex justify-start"></div>
    </section>

    <!-- Catégories de films -->
    <section id="categories">
        <h2 class="text-xl font-semibold mb-4">Films les mieux notés</h2>
        <div id="top-rated-movies" class="grid grid-cols-3 gap-2"></div>

        <h2 class="text-xl font-semibold mt-6 mb-4">Mystry</h2>
        <div id="category-1" class="grid grid-cols-3 gap-2"></div>

        <h2 class="text-xl font-semibold mt-6 mb-4">Catégorie 2</h2>
        <div id="category-2" class="grid grid-cols-3 gap-2"></div>
        <h2 class="text-xl font-semibold mt-6 mb-4">Catégorie libre</h2>
        <select id="category-select" class="p-2 border rounded mb-4">
            <option value="">-- Choisissez une catégorie --</option>
        </select>
        <div id="category-custom" class="grid grid-cols-3 gap-2"></div>
    </section></div>
</main>

<!-- Modale d'affichage des détails du film -->
<div id="movie-modal" class="relative inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
    <div class="bg-white p-6 pb-14 rounded-lg shadow-lg  relative">
        <div id="modal-content"></div>

    </div>
</div>
</body>
</html>