From 8856ca640aff707cc4533e0f5f99d871c46c262c Mon Sep 17 00:00:00 2001
From: Rassaby Ludovic <Ludovic.rassaby@gmail.com>
Date: Tue, 22 Oct 2024 20:20:52 +0400
Subject: [PATCH] Mise en forme index.html et Liste.html

---
 RASSABY Ludovic/Exercice Log HTML/Liste.html | 191 ++++++++++++-------
 RASSABY Ludovic/Exercice Log HTML/index.html |  95 ++++++---
 2 files changed, 188 insertions(+), 98 deletions(-)
diff --git a/RASSABY Ludovic/Exercice Log HTML/Liste.html b/RASSABY Ludovic/Exercice Log HTML/Liste.html
index 2ca146a..60bd752 100644
--- a/RASSABY Ludovic/Exercice Log HTML/Liste.html	
+++ b/RASSABY Ludovic/Exercice Log HTML/Liste.html	
@@ -4,85 +4,132 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Liste des Utilisateurs CDA8</title>
-    <!-- Link Data Table-->
+
+    <!-- Lien vers le CSS de Bootstrap et de ton thème -->
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://expernet.re/wp-content/themes/tm-bootstrap/style.css">
+    <link rel="stylesheet" href="https://expernet.re/wp-content/themes/tm-bootstrap/bootstrap-custom.css">
+
+    <!-- Lien vers DataTables -->
     <link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.css" />
+
+    <style>
+        body {
+            background-color: #f8f9fa;
+            font-family: 'Roboto', sans-serif;
+        }
+        .table-container {
+            margin-top: 50px;
+        }
+        .btn-primary {
+            background-color: #007bff;
+            border-color: #007bff;
+        }
+        .btn-primary:hover {
+            background-color: #0056b3;
+            border-color: #0056b3;
+        }
+        .text-center a {
+            color: #007bff;
+        }
+        .logo {
+            display: block;
+            margin: 0 auto 1.5rem;
+            max-width: 150px;
+        }
+        h2 {
+            color: #333333;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+    </style>
 </head>
 <body>
-    <h2>Liste des étudiants de CDA8</h2>
 
-    <table id="mTable1" class="display">
-        <thead>
-            <tr>
-                <th>Nom</th>
-                <th>Prénom</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>AHOVEY</td>
-                <td>SaintGeorge</td>
-            </tr>
-            <tr>
-                <td>AHYONG</td>
-                <td>Emjy</td>
-            </tr>
-            <tr>
-                <td>BToma</td>
-                <td></td>
-            </tr>
-            <tr>
-                <td>CELEMANI</td>
-                <td>Theo</td>
-            </tr>
-            <tr>
-                <td>Cheun</td>
-                <td>RAMASSY</td>
-            </tr>
-            <tr>
-                <td>Demontis</td>
-                <td>Matisse</td>
-            </tr>
-            <tr>
-                <td>GRONDIN</td>
-                <td>Clarel</td>
-            </tr>
-            <tr>
-                <td>Jeremy</td>
-                <td>Hoarau</td>
-            </tr>
-            <tr>
-                <td>MUNIER</td>
-                <td>Jerome</td>
-            </tr>
-            <tr>
-                <td>Pedre</td>
-                <td>Gabriel</td>
-            </tr>
-            <tr>
-                <td>Sebastien</td>
-                <td>M</td>
-            </tr>
-            <tr>
-                <td>Thomy</td>
-                <td>Noel</td>
-            </tr>
-            <tr>
-                <td>Dorian</td>
-                <td></td>
-            </tr>
-            <tr>
-                <td>Lou</td>
-                <td></td>
-            </tr>
-        </tbody>
-    </table>
+    <!-- Conteneur pour la table -->
+    <div class="container table-container">
+        <!-- Logo du site -->
+        <div class="text-center">
+            <img src="https://expernet.re/wp-content/themes/tm-bootstrap/images/logo.png" alt="Logo Expernet" class="logo">
+        </div>
 
-    <!-- Bouton pour revenir à la page index.html -->
-    <br>
-    <button onclick="window.location.href='index.html'">Revenir à la page de connexion</button>
+        <h2>Liste des étudiants de CDA8</h2>
 
-    <!-- Script Data Table-->
+        <table id="mTable1" class="table table-striped display">
+            <thead>
+                <tr>
+                    <th>Nom</th>
+                    <th>Prénom</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>AHOVEY</td>
+                    <td>SaintGeorge</td>
+                </tr>
+                <tr>
+                    <td>AHYONG</td>
+                    <td>Emjy</td>
+                </tr>
+                <tr>
+                    <td>BToma</td>
+                    <td></td>
+                </tr>
+                <tr>
+                    <td>CELEMANI</td>
+                    <td>Theo</td>
+                </tr>
+                <tr>
+                    <td>Cheun</td>
+                    <td>RAMASSY</td>
+                </tr>
+                <tr>
+                    <td>Demontis</td>
+                    <td>Matisse</td>
+                </tr>
+                <tr>
+                    <td>GRONDIN</td>
+                    <td>Clarel</td>
+                </tr>
+                <tr>
+                    <td>Jeremy</td>
+                    <td>Hoarau</td>
+                </tr>
+                <tr>
+                    <td>MUNIER</td>
+                    <td>Jerome</td>
+                </tr>
+                <tr>
+                    <td>Pedre</td>
+                    <td>Gabriel</td>
+                </tr>
+                <tr>
+                    <td>Sebastien</td>
+                    <td>M</td>
+                </tr>
+                <tr>
+                    <td>Thomy</td>
+                    <td>Noel</td>
+                </tr>
+                <tr>
+                    <td>Dorian</td>
+                    <td></td>
+                </tr>
+                <tr>
+                    <td>Lou</td>
+                    <td></td>
+                </tr>
+            </tbody>
+        </table>
+
+        <!-- Bouton pour revenir à la page index.html -->
+        <br>
+        <button class="btn btn-primary btn-block" onclick="window.location.href='index.html'">Revenir à la page de connexion</button>
+    </div>
+
+    <!-- Lien vers les scripts de Bootstrap et DataTables -->
     <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>
     <script>
         $(document).ready( function () {
diff --git a/RASSABY Ludovic/Exercice Log HTML/index.html b/RASSABY Ludovic/Exercice Log HTML/index.html
index f6f5a82..45b56cf 100644
--- a/RASSABY Ludovic/Exercice Log HTML/index.html	
+++ b/RASSABY Ludovic/Exercice Log HTML/index.html	
@@ -3,41 +3,84 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Connexion</title>
+    <title>Connexion - Expernet</title>
 
-    <!-- Lien vers le CSS de Bootstrap -->
+    <!-- Lien vers le CSS de Bootstrap et de ton thème -->
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://expernet.re/wp-content/themes/tm-bootstrap/style.css">
+    <link rel="stylesheet" href="https://expernet.re/wp-content/themes/tm-bootstrap/bootstrap-custom.css">
+    
+    <style>
+        body {
+            background-color: #f8f9fa;
+            font-family: 'Roboto', sans-serif;
+        }
+        .login-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+        }
+        .login-box {
+            background-color: #ffffff;
+            padding: 2rem;
+            border-radius: 8px;
+            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
+        }
+        .login-box h2 {
+            font-size: 1.5rem;
+            margin-bottom: 1.5rem;
+            color: #333333;
+        }
+        .btn-primary {
+            background-color: #007bff;
+            border-color: #007bff;
+        }
+        .btn-primary:hover {
+            background-color: #0056b3;
+            border-color: #0056b3;
+        }
+        .text-center a {
+            color: #007bff;
+        }
+        .logo {
+            display: block;
+            margin: 0 auto 1.5rem;
+            max-width: 150px;
+        }
+    </style>
 </head>
 <body>
-    <div class="container h-100 d-flex justify-content-center align-items-center">
-        <div class="row">
-            <div class="col-md-8 offset-md-3">
-                <!-- Ajout de l'image au-dessus du formulaire -->
-                <div class="text-center mb-4">
-                    <img src="https://expernet.re/wp-content/themes/tm-bootstrap/images/logo.png" alt="Logo" class="img-fluid" style="max-width: 150px;">
-                </div>
 
-                <h2 class="text-center mb-4">Formulaire de Connexion</h2>
-                <form action="liste.html" method="POST">
-                    <div class="form-group">
-                        <label for="username">Email :</label>
-                        <input type="text" id="username" name="username" class="form-control" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="password">Mot de passe :</label>
-                        <input type="password" id="password" name="password" class="form-control" required>
-                    </div>
-                    <button type="submit" class="btn btn-primary btn-block">Se connecter</button>
-                </form>
-                <p class="text-center mt-3">
-                    Pour vous connecter anonymement, suivez le 
-                    <a href="liste.html" class="link-opacity-100">lien suivant</a>
-                </p>
+    <div class="login-container">
+        <div class="login-box col-md-4">
+            <!-- Logo du site -->
+            <div class="text-center">
+                <img src="https://expernet.re/wp-content/themes/tm-bootstrap/images/logo.png" alt="Logo Expernet" class="logo">
             </div>
+
+            <h2 class="text-center">Formulaire de Connexion</h2>
+
+            <form action="liste.html" method="POST">
+                <div class="form-group">
+                    <label for="username">Email :</label>
+                    <input type="text" id="username" name="username" class="form-control" required>
+                </div>
+                <div class="form-group">
+                    <label for="password">Mot de passe :</label>
+                    <input type="password" id="password" name="password" class="form-control" required>
+                </div>
+                <button type="submit" class="btn btn-primary btn-block">Se connecter</button>
+            </form>
+
+            <p class="text-center mt-3">
+                Pour vous connecter anonymement, suivez le 
+                <a href="liste.html">lien suivant</a>
+            </p>
         </div>
     </div>
 
-    <!-- Lien vers le JS de Bootstrap et de jQuery -->
+    <!-- Lien vers les scripts de Bootstrap -->
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
 </body>

Nom	Prénom
AHOVEY	SaintGeorge
AHYONG	Emjy
BToma
CELEMANI	Theo
Cheun	RAMASSY
Demontis	Matisse
GRONDIN	Clarel
Jeremy	Hoarau
MUNIER	Jerome
Pedre	Gabriel
Sebastien	M
Thomy	Noel
Dorian
Lou