Main

dist/css/signup-form.css

@@ -0,0 +1,81 @@
+* {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+   font-family: Arial, sans-serif;
+ }
+
+ body {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   height: 100vh;
+   background-color: #f3f4f6;
+ }
+
+ .container {
+   width: 100%;
+   max-width: 400px;
+   padding: 20px;
+   background-color: white;
+   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+   border-radius: 8px;
+   text-align: center;
+ }
+
+ h2 {
+   margin-bottom: 20px;
+   color: #333;
+ }
+
+ .form {
+   display: flex;
+   flex-direction: column;
+   gap: 15px;
+ }
+
+ input {
+   padding: 10px;
+   border: 1px solid #ccc;
+   border-radius: 5px;
+   font-size: 16px;
+ }
+
+ button {
+   padding: 10px;
+   border: none;
+   background-color: #007bff;
+   color: white;
+   font-size: 16px;
+   border-radius: 5px;
+   cursor: pointer;
+ }
+
+ button:hover {
+   background-color: #0056b3;
+ }
+
+ .toggle-form {
+   margin-top: 10px;
+ }
+
+ .toggle-form a {
+   color: #007bff;
+   text-decoration: none;
+ }
+
+ .toggle-form a:hover {
+   text-decoration: underline;
+ }
+
+ /* Style responsive pour les petits écrans */
+ @media (max-width: 400px) {
+   .container {
+     padding: 10px;
+     width: 90%;
+   }
+ }
+
+ .hidden {
+   display: none;
+ }

dist/css/styles.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
 * Start Bootstrap - Landing Page v6.0.6 (https://startbootstrap.com/theme/landing-page)
-* Copyright 2013-2023 Start Bootstrap
+* Copyright 2013-2024 Start Bootstrap
 * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-landing-page/blob/master/LICENSE)
 */
 /*!
@@ -10916,4 +10916,8 @@ header.masthead h1, header.masthead .h1 {
 footer.footer {
   padding-top: 4rem;
   padding-bottom: 4rem;
-}
+}
+
+.hidden {
+  display: none;
+}

dist/index.html

@@ -20,7 +20,7 @@
         <nav class="navbar navbar-light bg-light static-top">
             <div class="container">
                 <a class="navbar-brand" href="#!">Start Bootstrap</a>
-                <a class="btn btn-primary" href="#signup">Sign Up</a>
+                <a class="btn btn-primary" href="signup-form.html">Sign Up</a>
             </div>
         </nav>
         <!-- Masthead-->
@@ -45,7 +45,7 @@ <h1 class="mb-5">Generate more leads with a professional landing page!</h1>
                                     <div class="col">
                                         <input class="form-control form-control-lg" id="emailAddress" type="email" placeholder="Email Address" data-sb-validations="required,email" />
                                         <div class="invalid-feedback text-white" data-sb-feedback="emailAddress:required">Email Address is required.</div>
-                                        <div class="invalid-feedback text-white" data-sb-feedback="emailAddress:email">Email Address Email is not valid.</div>
+                                        <div class="invalid-feedback text-white hidden" data-sb-feedback="emailAddress:email">Email Address Email is not valid.</div>
                                     </div>
                                     <div class="col-auto"><button class="btn btn-primary btn-lg disabled" id="submitButton" type="submit">Submit</button></div>
                                 </div>
@@ -66,6 +66,21 @@ <h1 class="mb-5">Generate more leads with a professional landing page!</h1>
                                 <!-- an error submitting the form-->
                                 <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
                             </form>
+                            <script>
+                                function submitEmail() {
+                                    const email = document.getElementById('emailInput').value;
+
+                                    fetch('save_email.php', {
+                                        method: 'POST',
+                                        headers: { 'Content-Type': 'application/json' },
+                                        body: JSON.stringify({ email: email })
+                                    })
+                                    .then(response => response.json())
+                                    .then(data => alert(data.message))
+                                    .catch(error => console.error('Erreur:', error));
+                                }
+                            </script>
+
                         </div>
                     </div>
                 </div>

dist/js/scripts.js

@@ -1,6 +1,6 @@
 /*!
 * Start Bootstrap - Landing Page v6.0.6 (https://startbootstrap.com/theme/landing-page)
-* Copyright 2013-2023 Start Bootstrap
+* Copyright 2013-2024 Start Bootstrap
 * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-landing-page/blob/master/LICENSE)
 */
 // This file is intentionally blank

dist/save_email.php

@@ -0,0 +1,46 @@
+<?php
+// Vérifie si une adresse email a été reçue
+$data = json_decode(file_get_contents('php://input'), true);
+if (!isset($data['email'])) {
+    echo json_encode(['message' => 'Aucune adresse email reçue.']);
+    exit();
+}
+
+$email = $data['email'];
+
+// Valide le format de l'email
+if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+    echo json_encode(['message' => 'Adresse email non valide.']);
+    exit();
+}
+
+try {
+    // Connexion à la base de données SQLite
+    $db = new PDO('sqlite:email.sql');
+
+    // Crée la table si elle n'existe pas
+    $db->exec("CREATE TABLE IF NOT EXISTS emails (email TEXT UNIQUE)");
+
+    // Vérifie si l'email existe déjà
+    $query = $db->prepare("SELECT email FROM emails WHERE email = :email");
+    $query->bindParam(':email', $email);
+    $query->execute();
+
+    if ($query->fetchColumn()) {
+        echo json_encode(['message' => 'L\'adresse email existe déjà dans la base de données.']);
+    } else {
+        // Ajoute l'email et trie par ordre alphabétique
+        $insert = $db->prepare("INSERT INTO emails (email) VALUES (:email)");
+        $insert->bindParam(':email', $email);
+        $insert->execute();
+
+        // Tri des emails en ordre alphabétique
+        $emails = $db->query("SELECT email FROM emails ORDER BY email ASC")->fetchAll(PDO::FETCH_COLUMN);
+
+        echo json_encode(['message' => 'Adresse email ajoutée avec succès.', 'emails' => $emails]);
+    }
+} catch (PDOException $e) {
+    echo json_encode(['message' => 'Erreur lors de l\'ajout de l\'email : ' . $e->getMessage()]);
+}
+// Pour exécuter ce code, assure-toi d’avoir un serveur local (comme XAMPP ou WAMP) et d’activer l’extension SQLite.
+?>

dist/signup-form.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Connexion et Inscription</title>
+  <link rel="stylesheet" href="signup-form.css">
+</head>
+<body>
+  <div class="container">
+    <div class="form-box">
+      <h2 id="form-title">Inscription</h2>
+
+      <!-- Formulaire d'Inscription -->
+      <form id="signup-form" class="form" action="#" method="post">
+        <input type="text" name="username" placeholder="Nom d'utilisateur" required>
+        <input type="email" name="email" placeholder="Email" required>
+        <input type="password" name="password" placeholder="Mot de passe" required>
+        <button type="submit">S'inscrire</button>
+        <p>Déjà inscrit ? <a href="index_login.html" onclick="toggleForm(event)">Se connecter</a></p>
+      </form>
+    </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>