From e22ee5ac94976ce98fb123fde15cedf342f036d7 Mon Sep 17 00:00:00 2001
From: cocaillot <corentin.caillot03@etu.uca.fr>
Date: Sat, 8 Mar 2025 23:11:22 +0100
Subject: [PATCH] improved maintenance page

---
 httpdocs/under_dev.html | 98 ++++++++++++++++++-----------------------
 1 file changed, 43 insertions(+), 55 deletions(-)
diff --git a/httpdocs/under_dev.html b/httpdocs/under_dev.html
index e5d49bf..bab351f 100644
--- a/httpdocs/under_dev.html
+++ b/httpdocs/under_dev.html
@@ -1,35 +1,45 @@
 <!DOCTYPE html>
-<html lang="fr">
+<html lang=\"fr\">
 <head>
-    <meta charset="UTF-8">
-    <link type="text/css" rel="stylesheet" href="style.css">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <meta charset=\"UTF-8\">
+    <link type=\"text/css\" rel=\"stylesheet\" href=\"style.css\">
+    <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap\" rel=\"stylesheet\">
     <title>Corentin - En Construction</title>
     <style>
+        body {
+            background-color: #1a1a1a;
+            color: #fff;
+            font-family: 'Roboto', sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+            padding: 0;
+        }
+
         .development-container {
             text-align: center;
-            padding-top: 100px;
+            animation: fadeIn 2s ease-in;
         }
 
         .dev-message {
-            font-family: 'Roboto', sans-serif;
-            font-size: 2em;
+            font-size: 2.5em;
             font-weight: bold;
-            color: #fff;
-            margin-top: 50px;
+            margin: 20px 0;
             text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
         }
 
         .dev-submessage {
-            font-family: 'Roboto', sans-serif;
-            font-size: 1.2em;
-            color: #ddd;
-            margin-top: 20px;
+            font-size: 1.3em;
+            color: #ccc;
+            margin-bottom: 40px;
         }
 
         .spinner {
-            margin-top: 60px;
-            border: 10px solid #f3f3f3;
+            margin: 40px auto;
+            border: 10px solid rgba(255, 255, 255, 0.3);
             border-top: 10px solid #3498db;
             border-radius: 50%;
             width: 100px;
@@ -42,52 +52,30 @@
             100% { transform: rotate(360deg); }
         }
 
-        .spinner {
-            animation: spin 2s linear infinite;
-        }
-
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
         }
 
-        body {
-            background-color: #1a1a1a;
+        footer {
+            position: absolute;
+            bottom: 10px;
+            width: 100%;
             text-align: center;
+            color: #666;
+            font-size: 0.9em;
         }
-        </style>
-
-</head>
-<body>
-    <nav class="navbar">
-        <ul class="navbar-list">
-            <li><a href="index.html">Accueil</a></li>
-            <li><a href="cursus.html">Cursus</a></li>
-            <li><a href="planning.html">Planning</a></li>
-            <li class="dropdown">
-                <a href="#">Gallerie</a>
-                <ul class="dropdown-content">
-                    <li><a href="images.html">Images</a></li>
-                    <li><a href="videos.html">Vidéos</a></li>
-                </ul>
-            </li>
-            <li><a href="form.php">Formulaire</a></li>
-        </ul>
-    </nav>
-    <title>En Construction</title>
-
+    </style>
 </head>
 <body>
-    <div class="development-container" style="text-align: center; padding: 20px;">
-        <h1 class="dev-message">Page en cours de développement</h1>
-        <p class="dev-message">Revenez bientôt !</p>
-
-        <div class="spinner"></div>
-
-        <p class="dev-message">Merci pour votre patience !</p>
+    <div class=\"development-container\">
+        <h1 class=\"dev-message\">Page en cours de développement</h1>
+        <p class=\"dev-submessage\">Revenez bientôt !</p>
+        <div class=\"spinner\"></div>
+        <p class=\"dev-submessage\">Merci pour votre patience !</p>
     </div>
+    <footer>
+        <p>Pied de page</p>
+    </footer>
 </body>
-<footer>
-	<p style="text-align: center;">Pied de page</p>
-</footer>
 </html>
