<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ARTS.FILM × Alliance Française – Demande de code d'accès</title>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #fafafa;
color: #222;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
background: #fff;
padding: 40px;
margin: 60px auto;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
h1 {
text-align: center;
color: #111;
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
p.subtitle {
text-align: center;
color: #555;
margin-bottom: 2rem;
}
label {
display: block;
margin-top: 15px;
font-weight: 600;
}
input, select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
margin-top: 5px;
}
button {
display: block;
width: 100%;
background-color: #111;
color: #fff;
border: none;
border-radius: 6px;
padding: 14px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
margin-top: 25px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #444;
}
.message {
margin-top: 20px;
text-align: center;
font-weight: 600;
color: #006400;
}
.error {
color: #c00;
}
</style>
</head>
<body>
<div class="container">
<h1>ARTS.FILM × Alliance Française</h1>
<p class="subtitle">Demandez votre code d’accès gratuit à la plateforme ARTS.FILM</p>
<form id="artsfilm-form">
<label for="prenom">Prénom *</label>
<input type="text" id="prenom" name="prenom" required />
<label for="nom">Nom *</label>
<input type="text" id="nom" name="nom" required />
<label for="email">Courriel *</label>
<input type="email" id="email" name="email" required />
<label for="numero">Numéro de membre Alliance Française *</label>
<input type="text" id="numero" name="numero" required />
<label for="nationalite">Nationalité</label>
<input type="text" id="nationalite" name="nationalite" />
<label for="age">Groupe d’âge</label>
<select id="age" name="age">
<option value="">-- Sélectionnez --</option>
<option value="moins25">Moins de 25 ans</option>
<option value="25-34">25 à 34 ans</option>
<option value="35-44">35 à 44 ans</option>
<option value="45-54">45 à 54 ans</option>
<option value="55plus">55 ans et plus</option>
</select>
<button type="submit">Demander mon code d’accès</button>
<p class="message" id="form-message"></p>
</form>
</div>
<script>
const form = document.getElementById("artsfilm-form");
const message = document.getElementById("form-message");
form.addEventListener("submit", async (e) => {
e.preventDefault();
message.textContent = "Envoi en cours...";
message.classList.remove("error");
const formData = new FormData(form);
try {
// 🔗 Insère ici TON URL Google Apps Script déployée :
const response = await fetch("https://script.google.com/macros/s/AKfycbwqYu59E565tXACamiy1eZS0G6dTmLlnG0NgW0687GxqddT_aW63e3mAAsOvWSMTlcP/exec", {
method: "POST",
body: formData,
});
if (response.ok) {
message.textContent = "Merci ! Votre code d’accès a été envoyé à votre courriel.";
form.reset();
} else {
message.textContent = "Erreur lors de l’envoi. Veuillez réessayer.";
message.classList.add("error");
}
} catch (error) {
message.textContent = "Une erreur est survenue. Veuillez réessayer.";
message.classList.add("error");
}
});
</script>
</body>
</html>