CSS ajouté

2026-05-28 21:52:57 +02:00
parent de684d1b4c
commit a4f64862fd
3 changed files with 136 additions and 13 deletions
@@ -6,11 +6,15 @@

 ?>

-<head>

+<!-- Ajout du CSS Primaire (fait par IA) -->
+<link rel="stylesheet" href="../styles/primary_css.css">
+
+
+<!-- Header + nav -->
 <header>
    <!-- Texte qui sera dans le header -->
-    <a href="./../index.php"> Esteban MOUSSU - PortFolio</a>
+    <a href="./../index.php" class="titre-de-page">Esteban MOUSSU - PortFolio</a>

    <!-- Module de navigation -->
    <nav>
@@ -23,5 +27,3 @@
    </nav>

 </header>
-
-</head>
@@ -11,15 +11,24 @@ require_once('./../elements/header.php');

 <body>

-<!-- Formulaire de connexion -->
-<form method="POST" action="checkLogin.php">
+<!-- CSS Login (fait par Intelligence Arti) -->
+<div class="login-container">
+    <div class="login-card">

-    <!-- Deux champs de texte, un "id" et un "passwd" -->
-    <input type="text" name="id" id="id" placeholder="Votre identifiant">
-    <input type="password" name="passwd" id="passwd" placeholder="Votre mot de passe">
+    <!-- Formulaire de connexion -->
+    <form method="POST" action="../fonctions/checkLogin.php">

-    <!-- Bouton de connexion -->
-    <input type="submit" value="Se connecter">
-</form>
+        <p>Connexion</p>
+
+        <!-- Deux champs de texte, un "id" et un "passwd" -->
+        <input type="text" name="id" id="id" placeholder="Votre identifiant">
+        <input type="password" name="passwd" id="passwd" placeholder="Votre mot de passe">
+
+        <!-- Bouton de connexion -->
+        <input type="submit" value="Se connecter">
+    </form>
+
+    </div>
+</div>

 </body>
@@ -0,0 +1,112 @@
+/* ---- En général ---- */
+
+/* Background de page */
+body {
+    background-color: #0d0d0d;
+    margin: 0;
+    font-family: Arial, sans-serif;
+    color: white;
+}
+
+/* ---- Header de la page ---- */
+
+/* header */
+header {
+    background-color: #111111;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 40px;
+}
+
+/* Titre de la page ou même le Logo */
+.titre-de-page {
+    font-weight: bold;
+    font-size: 20px;
+    text-decoration: none;
+    color: white;
+}
+
+/* Barre de navigation */
+nav a {
+    color: #aaaaaa;
+    text-decoration: none;
+    margin-left: 10px;
+    padding: 8px 15px;
+    border-radius: 8px;
+}
+
+/* ---- PAGE LOGIN ---- */
+
+/* Centre la carte au milieu de la page */
+.login-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 80vh;
+}
+
+/* La carte blanche/grise */
+.login-card {
+    background-color: #1a1a2e;
+    border-radius: 16px;
+    padding: 40px;
+    width: 340px;
+    text-align: center;
+}
+
+/* Titre "EldoriaNet" dans la carte */
+.login-card .logo-blanc {
+    color: white;
+    font-size: 26px;
+    font-weight: bold;
+}
+
+.login-card .logo-violet {
+    color: #6c63ff;
+    font-size: 26px;
+    font-weight: bold;
+}
+
+/* Sous-titre */
+.login-card p {
+    color: #aaaaaa;
+    margin-bottom: 25px;
+}
+
+/* Labels */
+.login-card label {
+    display: block;
+    text-align: left;
+    color: white;
+    margin-bottom: 6px;
+}
+
+/* Champs de texte */
+.login-card input[type="text"],
+.login-card input[type="password"] {
+    width: 100%;
+    background-color: #2a2a3e;
+    border: 1px solid #3a3a5e;
+    border-radius: 8px;
+    color: white;
+    padding: 12px;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+}
+
+/* Bouton connexion */
+.login-card input[type="submit"] {
+    width: 100%;
+    background-color: #6c63ff;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 14px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.login-card input[type="submit"]:hover {
+    background-color: #5a52e0;
+}