From 74bb0b13c7c8d721984f5019dd5b438cf644455a Mon Sep 17 00:00:00 2001 From: Benjamin <suel1u@etu.univ-lorraine.fr> Date: Thu, 9 Jan 2025 14:20:08 +0100 Subject: [PATCH] Ajout des fichiers --- frontend/login.html | 41 ++++++++++++++++++++++++ frontend/petitions.html | 39 +++++++++++++++++++++++ frontend/registration.html | 42 +++++++++++++++++++++++++ frontend/script.js | 42 +++++++++++++++++++++++++ frontend/style.css | 64 ++++++++++++++++++++++++++++++++++++++ 5 files changed, 228 insertions(+) create mode 100644 frontend/login.html create mode 100644 frontend/petitions.html create mode 100644 frontend/registration.html create mode 100644 frontend/script.js create mode 100644 frontend/style.css diff --git a/frontend/login.html b/frontend/login.html new file mode 100644 index 0000000..6a94fa3 --- /dev/null +++ b/frontend/login.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html lang="fr"> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>LookMyClaim</title> + <link rel="stylesheet" href="style.css"> + </head> + <body> + <header> + <h1>LookMyClaim!</h1> + <nav> + <ul> + <li><a href="index.html">Accueil</a></li> + <li><a href="petitions.html">Pétitions</a></li> + <li><a href="registration.html">S'enregistrer</a></li> + <li><a href="login.html">Se connecter</a></li> + </ul> + </nav> + </header> + + <main id="home"> + <section id="login"> + <h2>Connexion</h2> + <div id="authForms"> + <form id="loginForm"> + <input type="text" id="loginUsername" placeholder="Nom d'utilisateur" required> + <input type="password" id="loginPassword" placeholder="Mot de passe" required> + <button type="submit">Se connecter</button> + </form> + </div> + </section> + </main> + + <footer> + <p>© 2025 LookMyClaim. Tous droits réservés.</p> + </footer> + + <script src="script.js"></script> + </body> +</html> \ No newline at end of file diff --git a/frontend/petitions.html b/frontend/petitions.html new file mode 100644 index 0000000..8e68826 --- /dev/null +++ b/frontend/petitions.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html lang="fr"> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>LookMyClaim</title> + <link rel="stylesheet" href="style.css"> + </head> + <body> + <header> + <h1>LookMyClaim!</h1> + <nav> + <ul> + <li><a href="index.html">Accueil</a></li> + <li><a href="petitions.html">Pétitions</a></li> + <li><a href="registration.html">S'enregistrer</a></li> + <li><a href="login.html">Se connecter</a></li> + </ul> + </nav> + </header> + + <main> + <section> + <h2>Nos Pétitions</h2> + <ul> + <li>Pétition 1 : <button disabled>Signer</button></li> + <li>Pétition 2 : <button disabled>Signer</button></li> + <li>Pétition 3 : <button disabled>Signer</button></li> + </ul> + </section> + </main> + + <footer> + <p>© 2025 LookMyClaim. Tous droits réservés.</p> + </footer> + + <script src="script.js"></script> + </body> +</html> \ No newline at end of file diff --git a/frontend/registration.html b/frontend/registration.html new file mode 100644 index 0000000..c7abe75 --- /dev/null +++ b/frontend/registration.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html lang="fr"> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>LookMyClaim</title> + <link rel="stylesheet" href="style.css"> + </head> + <body> + <header> + <h1>LookMyClaim!</h1> + <nav> + <ul> + <li><a href="index.html">Accueil</a></li> + <li><a href="petitions.html">Pétitions</a></li> + <li><a href="registration.html">S'enregistrer</a></li> + <li><a href="login.html">Se connecter</a></li> + </ul> + </nav> + </header> + + <main id="home"> + <section id="registration"> + <h2>S'enregistrer</h2> + <div id="authForms"> + <form id="registerForm"> + <input type="text" id="registerUsername" placeholder="Nom d'utilisateur" required> + <input type="password" id="registerPassword" placeholder="Mot de passe" required> + <button type="submit">S'inscrire</button> + </form> + <p id="authMessage"></p> + </div> + </section> + </main> + + <footer> + <p>© 2025 LookMyClaim. Tous droits réservés.</p> + </footer> + + <script src="script.js"></script> + </body> +</html> \ No newline at end of file diff --git a/frontend/script.js b/frontend/script.js new file mode 100644 index 0000000..f17f8b8 --- /dev/null +++ b/frontend/script.js @@ -0,0 +1,42 @@ +// Simuler un système d'authentification +const users = []; + +document.getElementById('registerForm').addEventListener('submit', function (e) { + e.preventDefault(); + const username = document.getElementById('registerUsername').value; + const password = document.getElementById('registerPassword').value; + + const userExists = users.some(user => user.username === username); + if (userExists) { + document.getElementById('authMessage').textContent = "Nom d'utilisateur déjà pris."; + return; + } + + users.push({ username, password }); + document.getElementById('authMessage').textContent = "Inscription réussie ! Vous pouvez maintenant vous connecter."; + this.reset(); +}); + +document.getElementById('loginForm').addEventListener('submit', function (e) { + e.preventDefault(); + const username = document.getElementById('loginUsername').value; + const password = document.getElementById('loginPassword').value; + + const user = users.find(user => user.username === username && user.password === password); + if (user) { + document.getElementById('authMessage').textContent = `Bienvenue, ${username} ! Vous pouvez signer des pétitions.`; + enablePetitions(); + } else { + document.getElementById('authMessage').textContent = "Nom d'utilisateur ou mot de passe incorrect."; + } + this.reset(); +}); + +function enablePetitions() { + const buttons = document.querySelectorAll('button[disabled]'); + buttons.forEach(button => { + button.disabled = false; + button.style.background = '#007BFF'; + button.style.cursor = 'pointer'; + }); +} \ No newline at end of file diff --git a/frontend/style.css b/frontend/style.css new file mode 100644 index 0000000..9bce211 --- /dev/null +++ b/frontend/style.css @@ -0,0 +1,64 @@ +/* Style de base pour le site */ +body { + font-family: Arial, sans-serif; + line-height: 1.6; + margin: 0; + padding: 0; + color: #333; + background-color: #f9f9f9; +} + +header { + background: #333; + color: #fff; + padding: 1em 0; + text-align: center; +} + +header h1 { + margin: 0; +} + +nav ul { + list-style: none; + padding: 0; +} + +nav ul li { + display: inline; + margin: 0 10px; +} + +nav ul li a { + color: #fff; + text-decoration: none; +} + +main { + padding: 2em; +} + +main section { + margin-bottom: 2em; +} + +footer { + background: #333; + color: #fff; + text-align: center; + padding: 1em 0; + bottom: 0; + width: 100%; +} + +button { + background: #007BFF; + color: #fff; + border: none; + padding: 0.5em 1em; + cursor: pointer; +} + +button:hover { + background: #0056b3; +} \ No newline at end of file -- GitLab