<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: 'Arial', sans-serif;
        background-color: #000;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        box-sizing: border-box;
      }
      .form-container {
        background: #111;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
        max-width: 400px;
        width: 100%;
        text-align: center;
      }
      h1 {
        margin-bottom: 20px;
        font-size: 24px;
        text-transform: uppercase;
        color: #ff0000;
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
      }
      form {
        display: flex;
        flex-direction: column;
      }
      input, textarea {
        margin-bottom: 15px;
        padding: 10px;
        font-size: 16px;
        color: #fff;
        background-color: transparent;
        border: 2px solid #ff0000;
        border-radius: 5px;
        width: 100%;
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
      }
      input::placeholder, textarea::placeholder {
        color: #ffcccc;
        font-style: italic;
      }
      button {
        padding: 10px;
        font-size: 16px;
        color: #fff;
        background-color: #111;
        border: 2px solid #ff0000;
        border-radius: 5px;
        cursor: pointer;
        text-transform: uppercase;
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
        transition: all 0.3s ease;
      }
      button:hover {
        background-color: #ff0000;
        color: #000;
        box-shadow: 0 0 15px rgba(255, 0, 0, 1);
      }
      #responseMessage {
        margin-top: 20px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="form-container">
      <h1>Contact Me</h1>
      <form id="contactForm">
        <input type="text" id="name" name="name" placeholder="e.g.: John Doe" required>
        <input type="email" id="email" name="email" placeholder="e.g.: john.doe@example.com" required>
        <input type="text" id="title" name="title" placeholder="e.g.: Feedback or Question" required>
        <textarea id="message" name="message" rows="5" placeholder="e.g.: Hello, I would like to discuss..." required></textarea>
        <button type="submit">Send Message</button>
      </form>
      <div id="responseMessage"></div>
    </div>

    <script>
      const form = document.getElementById("contactForm");
      const responseMessage = document.getElementById("responseMessage");

      form.addEventListener("submit", async (e) => {
        e.preventDefault();

        const formData = new FormData(form);
        const data = {
          name: formData.get("name"),
          email: formData.get("email"),
          title: formData.get("title"),
          message: formData.get("message")
        };

        try {
          const response = await fetch("https://script.google.com/macros/s/AKfycby0cPH4wt_hNLYM7kr7eF2fzRHkJAXGn-pbYF7hiX3MKOHV7UyVKanN_ChYcrDif0BvEg/exec", { // Remplacez par l'URL de votre Web App
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(data)
          });

          const result = await response.json();
          responseMessage.textContent = result.message;
          responseMessage.style.color = result.success ? "green" : "red";

          if (result.success) {
            form.reset();
          }
        } catch (error) {
          responseMessage.textContent = "An error occurred: " + error.message;
          responseMessage.style.color = "red";
        }
      });
    </script>
  </body>
</html>