diff --git a/frontend/login.html b/frontend/login.html new file mode 100644 index 0000000000000000000000000000000000000000..6a94fa39550e8d8ec6f586e493eff51fa08de02e --- /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 0000000000000000000000000000000000000000..8e68826414c02b270bdb79d75af1b6d440aa4a97 --- /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 0000000000000000000000000000000000000000..c7abe7559220cfbf95fbcfd86aa6d08b1a8118dd --- /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 0000000000000000000000000000000000000000..f17f8b81b9028f57dbb885a9c174922f7660f9e2 --- /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 0000000000000000000000000000000000000000..9bce2118c7877eab842e188852d3d05bf142d919 --- /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