eb5c4f1cee
Architecture finale :
1. User remplit formulaire + passe Turnstile CAPTCHA → form-handler.js
2. form-handler.js POST au Worker avec action 'requestVerification'
3. Worker valide Turnstile, génère un token UUID, le stocke en KV (TTL 24h)
avec firstname/email/reference_client, puis envoie un email via Resend
avec un lien : confirmation.html?token=XXX
4. User reçoit email, clique 'Confirmer mon email'
5. confirmation.html lit le token de l'URL, POST au Worker avec action
'verifyToken'
6. Worker valide le token, envoie le welcome email via Resend (avec ref +
adresse Paris depuis env var), marque le token comme utilisé
7. confirmation.html affiche 'Inscription confirmée !'
Ainsi : ref + adresse Paris ne sortent JAMAIS avant validation email,
et les bots sont bloqués à l'étape 1 par Turnstile.
Setup Cloudflare requis (côté user) :
- RESEND_API_KEY : clé API Resend (re_...)
- RESEND_FROM : adresse expéditrice ('onboarding@resend.dev' pour test,
ou domain vérifié pour prod)
- SITE_URL : optionnel, défaut https://mva-global-fret.github.io/site-mva-global-fret
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
320 lines
18 KiB
HTML
320 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Contact & Inscription — MVA Global Fret</title>
|
|
<meta name="description" content="Inscrivez-vous chez MVA Global Fret pour envoyer vos colis de Paris à Antananarivo. Recevez votre numéro de référence client et l'adresse de dépôt à Paris.">
|
|
<link rel="icon" type="image/png" href="PNG MVA GLOBAL FRET.png">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<a href="#main" class="skip-link">Aller au contenu principal</a>
|
|
|
|
<header class="header" id="header">
|
|
<div class="container header-inner">
|
|
<a href="accueil.html" class="logo"><img src="PNG MVA GLOBAL FRET.png" alt="MVA Global Fret"></a>
|
|
<nav class="nav" aria-label="Navigation principale">
|
|
<a href="accueil.html" data-i18n="nav.home">Accueil</a>
|
|
<a href="about.html" data-i18n="nav.about">Qui sommes-nous</a>
|
|
<a href="tarifs.html" data-i18n="nav.pricing">Tarifs</a>
|
|
<a href="service-commande.html" data-i18n="nav.serviceCommande">Service Commande</a>
|
|
<a href="guide-envoi.html" data-i18n="nav.guide">Guide d'envoi</a>
|
|
<a href="contact.html" data-i18n="nav.contact">Contact</a>
|
|
<a href="application.html" data-i18n="nav.app">Prochainement</a>
|
|
</nav>
|
|
<div class="header-right">
|
|
<div class="lang-switcher" role="group" aria-label="Choisir la langue">
|
|
<button data-lang="fr" class="active">FR</button>
|
|
<button data-lang="en">EN</button>
|
|
<button data-lang="mg">MG</button>
|
|
</div>
|
|
<button class="menu-toggle" id="menuToggle" aria-label="Ouvrir le menu"><span></span><span></span><span></span></button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="mobile-nav" id="mobileNav">
|
|
<a href="accueil.html" data-i18n="nav.home">Accueil</a>
|
|
<a href="about.html" data-i18n="nav.about">Qui sommes-nous</a>
|
|
<a href="tarifs.html" data-i18n="nav.pricing">Tarifs</a>
|
|
<a href="guide-envoi.html" data-i18n="nav.guide">Guide d'envoi</a>
|
|
<a href="contact.html" data-i18n="nav.contact">Contact</a>
|
|
<a href="application.html" data-i18n="nav.app">Prochainement</a>
|
|
<div class="lang-switcher" style="margin-top:16px">
|
|
<button data-lang="fr" class="active">FR</button>
|
|
<button data-lang="en">EN</button>
|
|
<button data-lang="mg">MG</button>
|
|
</div>
|
|
</nav>
|
|
<div class="overlay" id="overlay"></div>
|
|
|
|
<main id="main">
|
|
|
|
<!-- HERO -->
|
|
<section class="hero hero-sub" style="background-image: url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?w=1600&q=80');">
|
|
<div class="hero-content animate-on-scroll">
|
|
<h1 data-i18n="contact.heroTitle">Contactez-Nous</h1>
|
|
<p data-i18n="contact.heroSubtitle">Inscrivez-vous et commencez à envoyer vos colis dès aujourd'hui</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CONTACT SECTION -->
|
|
<section class="section" aria-labelledby="form-title">
|
|
<div class="container">
|
|
<div class="contact-grid">
|
|
|
|
<!-- FORMULAIRE -->
|
|
<div class="animate-on-scroll">
|
|
<h2 id="form-title" data-i18n="contact.formTitle">Formulaire d'inscription</h2>
|
|
<div class="gold-line" style="margin: 16px 0 24px;"></div>
|
|
<p style="color: var(--text-light); margin-bottom: 32px;" data-i18n="contact.formSubtitle">Remplissez ce formulaire pour recevoir votre numéro de référence client et l'adresse de dépôt à Paris.</p>
|
|
|
|
<div class="form-success" id="formSuccess" role="alert">
|
|
<i class="fa-solid fa-envelope-circle-check" style="font-size: 2rem; color: var(--gold); display: block; margin-bottom: 12px;"></i>
|
|
<strong data-i18n="contact.successTitle">Vérifiez votre boîte mail !</strong><br>
|
|
<span data-i18n="contact.successMsg">Pour finaliser votre inscription, cliquez sur le lien de confirmation que nous venons de vous envoyer par email. Vous recevrez ensuite votre numéro de référence client et l'adresse de dépôt à Paris.</span>
|
|
<p style="margin-top:12px; font-size:0.85rem; color: var(--text-light);" data-i18n="contact.emailSent">📧 Email envoyé — pensez à vérifier vos spams. Le lien expire dans 24h.</p>
|
|
</div>
|
|
|
|
<!-- DÉJÀ INSCRIT -->
|
|
<div class="form-success" id="alreadyRegistered" role="alert" style="border-color: var(--gold); background: rgba(197,165,90,0.08);">
|
|
<i class="fa-solid fa-circle-info" style="font-size: 2rem; color: var(--gold); display: block; margin-bottom: 12px;"></i>
|
|
<strong data-i18n="contact.alreadyTitle">Vous êtes déjà client !</strong><br>
|
|
<span data-i18n="contact.alreadyMsg">Votre adresse email est déjà enregistrée dans notre système.</span>
|
|
<div id="existingRefBlock" style="margin-top: 16px; padding: 14px 20px; background: var(--navy); border-radius: 8px; border: 2px solid var(--gold);">
|
|
<p style="margin:0 0 4px; font-size:0.85rem; color: var(--gold); font-weight:600;" data-i18n="contact.alreadyRefLabel">VOTRE NUMÉRO DE RÉFÉRENCE EXISTANT</p>
|
|
<p id="existingRefDisplay" style="margin:0; font-size:1.6rem; font-weight:700; color:#fff; letter-spacing:2px;"></p>
|
|
</div>
|
|
<p style="margin-top:12px; font-size:0.9rem; color: var(--text-light);" data-i18n="contact.alreadyContact">Pour toute question, contactez-nous directement.</p>
|
|
</div>
|
|
|
|
<form id="contactForm" novalidate>
|
|
<div class="grid-2" style="gap: 16px;">
|
|
<div class="form-group">
|
|
<label for="lastname" data-i18n="contact.labelNom">Nom</label>
|
|
<input type="text" id="lastname" name="lastname" autocomplete="family-name" required
|
|
data-i18n-placeholder="contact.placeholderNom" placeholder="Votre nom de famille">
|
|
<div class="form-error" id="error-lastname"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="firstname" data-i18n="contact.labelPrenom">Prénom</label>
|
|
<input type="text" id="firstname" name="firstname" autocomplete="given-name" required
|
|
data-i18n-placeholder="contact.placeholderPrenom" placeholder="Votre prénom">
|
|
<div class="form-error" id="error-firstname"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="phone" data-i18n="contact.labelTel">Numéro de téléphone</label>
|
|
<input type="tel" id="phone" name="phone" autocomplete="tel" required
|
|
data-i18n-placeholder="contact.placeholderTel" placeholder="+261 38 00 000 00">
|
|
<div class="form-error" id="error-phone"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email" data-i18n="contact.labelEmail">Adresse email</label>
|
|
<input type="email" id="email" name="email" autocomplete="email" required
|
|
data-i18n-placeholder="contact.placeholderEmail" placeholder="votre@email.com">
|
|
<div class="form-error" id="error-email"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="address" data-i18n="contact.labelAdresse">Adresse de livraison</label>
|
|
<textarea id="address" name="address" required
|
|
data-i18n-placeholder="contact.placeholderAdresse" placeholder="Adresse complète..."></textarea>
|
|
<div class="form-error" id="error-address"></div>
|
|
</div>
|
|
|
|
<!-- Case CGV -->
|
|
<div class="form-group" style="margin-bottom: 20px;">
|
|
<label style="display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-weight:400; color:var(--text-light); font-size:0.9rem;">
|
|
<input type="checkbox" id="cgv" name="cgv" required
|
|
style="width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color:var(--gold); cursor:pointer;">
|
|
<span data-i18n-html="contact.cgvLabel">J'ai lu et j'accepte les <a href="cgv.html" target="_blank" style="color:var(--gold); font-weight:600; text-decoration:underline;">Conditions Générales de Vente</a> de MVA Global Fret.</span>
|
|
</label>
|
|
<div class="form-error" id="error-cgv"></div>
|
|
</div>
|
|
|
|
<!-- Cloudflare Turnstile (CAPTCHA invisible/léger pour bloquer les bots) -->
|
|
<div class="cf-turnstile" data-sitekey="0x4AAAAAADKDuc7Rmlb1svIL" data-callback="onTurnstileSuccess" data-error-callback="onTurnstileError" style="margin-bottom: 16px;"></div>
|
|
|
|
<div id="formErrorGlobal" style="display:none; color: var(--red); margin-bottom: 16px; font-size: 0.9rem;"></div>
|
|
|
|
<button type="submit" class="btn btn-primary" id="submitBtn" style="width: 100%; justify-content: center;">
|
|
<i class="fa-solid fa-paper-plane"></i>
|
|
<span id="submitText" data-i18n="contact.submitBtn">S'inscrire</span>
|
|
</button>
|
|
</form>
|
|
|
|
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
|
|
<script>
|
|
window.turnstileToken = null;
|
|
window.onTurnstileSuccess = function(token) { window.turnstileToken = token; };
|
|
window.onTurnstileError = function() { window.turnstileToken = null; };
|
|
</script>
|
|
</div>
|
|
|
|
<!-- COORDONNÉES -->
|
|
<div class="animate-on-scroll delay-2">
|
|
<h2 data-i18n="contact.infoTitle">Nos Coordonnées</h2>
|
|
<div class="gold-line" style="margin: 16px 0 24px;"></div>
|
|
|
|
<div class="contact-info-card">
|
|
<div style="text-align:center; margin-bottom: 24px;">
|
|
<div style="display:inline-flex; align-items:center; gap:8px; background: rgba(197,165,90,0.15); color: var(--gold); padding: 8px 16px; border-radius: 50px; font-size: 0.85rem; font-weight: 600;">
|
|
<i class="fa-solid fa-circle" style="font-size: 8px; animation: pulse 2s infinite;"></i>
|
|
<span data-i18n="contact.infoAvailable">Disponible tous les jours</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-info-item">
|
|
<i class="fa-solid fa-phone" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.phoneMG">Numéro Madagascar</span>
|
|
<a href="tel:+261384973751">+261 38 49 737 51</a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-info-item">
|
|
<i class="fa-solid fa-phone" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.phoneFR">Numéro France</span>
|
|
<a href="tel:+33780970825">+33 7 80 97 08 25</a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-info-item">
|
|
<i class="fa-solid fa-envelope" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.email">Email</span>
|
|
<a href="mailto:mvaglobalfret@gmail.com">mvaglobalfret@gmail.com</a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-info-item">
|
|
<i class="fa-solid fa-location-dot" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.address">Adresse</span>
|
|
<span data-i18n="contact.addressValue">Antananarivo 101, Madagascar</span>
|
|
</div>
|
|
</div>
|
|
<div class="contact-info-item">
|
|
<i class="fa-brands fa-facebook" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.facebook">Facebook</span>
|
|
<a href="https://www.facebook.com/profile.php?id=61573448820736" target="_blank" rel="noopener noreferrer">MVA Global Fret</a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-info-item">
|
|
<i class="fa-brands fa-facebook-messenger" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.messenger">Messenger</span>
|
|
<a href="https://m.me/61573448820736" target="_blank" rel="noopener noreferrer" data-i18n="contact.messengerAction">Discuter sur Messenger</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Info tarifs rapide — bloc centré pleine largeur -->
|
|
<div class="price-reminder animate-on-scroll">
|
|
<h4>
|
|
<i class="fa-solid fa-tag" style="color: var(--gold);"></i> <span data-i18n="contact.priceReminder">Rappel tarifaire</span>
|
|
</h4>
|
|
<ul>
|
|
<li><i class="fa-solid fa-check"></i><span data-i18n="contact.priceDetail1">70 000 Ar / kg</span></li>
|
|
<li><i class="fa-solid fa-check"></i><span data-i18n="contact.priceDetail2">Paiement à la réception</span></li>
|
|
<li><i class="fa-solid fa-check"></i><span data-i18n="contact.priceDetail3">2 envois / semaine</span></li>
|
|
<li><i class="fa-solid fa-check"></i><span data-i18n="contact.priceDetail4">Livraison en 2 semaines à compter du dépôt à Paris</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- CARTE -->
|
|
<div class="map-section animate-on-scroll">
|
|
<div class="section-header">
|
|
<h2 data-i18n="contact.mapTitle">Notre Localisation</h2>
|
|
<div class="gold-line"></div>
|
|
<p data-i18n="contact.mapSubtitle">Notre siège au cœur d'Antananarivo</p>
|
|
</div>
|
|
<div class="map-card">
|
|
<div class="map-card-header">
|
|
<div class="map-card-icon"><i class="fa-solid fa-location-dot"></i></div>
|
|
<div class="map-card-info">
|
|
<strong>MVA Global Fret</strong>
|
|
<span data-i18n="contact.addressValue">Antananarivo 101, Madagascar</span>
|
|
</div>
|
|
<a href="https://www.google.com/maps/place/Antananarivo,+Madagascar" target="_blank" rel="noopener noreferrer" class="map-card-cta" aria-label="Ouvrir dans Google Maps">
|
|
<i class="fa-solid fa-arrow-up-right-from-square"></i>
|
|
</a>
|
|
</div>
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d119722.82983154597!2d47.46117785!3d-18.91368105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x21f07e967738b369%3A0x3fac7a9b7c8ac!2sAntananarivo%2C%20Madagascar!5e0!3m2!1sfr!2sfr!4v1700000000000!5m2!1sfr!2sfr"
|
|
width="100%" height="420" style="border:0; display:block;" allowfullscreen="" loading="lazy"
|
|
referrerpolicy="no-referrer-when-downgrade"
|
|
title="Carte Antananarivo Madagascar — MVA Global Fret">
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="footer" role="contentinfo">
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<a href="accueil.html" class="logo"><img src="PNG MVA GLOBAL FRET.png" alt="MVA Global Fret"></a>
|
|
<p data-i18n="footer.desc">Votre partenaire de confiance pour le fret aérien entre l'Europe et Madagascar.</p>
|
|
<div class="social-links">
|
|
<a href="https://www.facebook.com/profile.php?id=61573448820736" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
|
|
<a href="https://m.me/61573448820736" target="_blank" rel="noopener noreferrer" aria-label="Messenger"><i class="fa-brands fa-facebook-messenger"></i></a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 data-i18n="footer.linksTitle">Liens Rapides</h4>
|
|
<ul class="footer-links">
|
|
<li><a href="accueil.html" data-i18n="nav.home">Accueil</a></li>
|
|
<li><a href="about.html" data-i18n="nav.about">Qui sommes-nous</a></li>
|
|
<li><a href="tarifs.html" data-i18n="nav.pricing">Tarifs</a></li>
|
|
<li><a href="service-commande.html" data-i18n="nav.serviceCommande">Service Commande</a></li>
|
|
<li><a href="guide-envoi.html" data-i18n="nav.guide">Guide d'envoi</a></li>
|
|
<li><a href="contact.html" data-i18n="nav.contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 data-i18n="footer.contactTitle">Contact</h4>
|
|
<div class="footer-contact-item"><i class="fa-solid fa-phone"></i><a href="tel:+261384973751">+261 38 49 737 51</a></div>
|
|
<div class="footer-contact-item"><i class="fa-solid fa-phone"></i><a href="tel:+33780970825">+33 7 80 97 08 25</a></div>
|
|
<div class="footer-contact-item"><i class="fa-solid fa-envelope"></i><a href="mailto:mvaglobalfret@gmail.com">mvaglobalfret@gmail.com</a></div>
|
|
<div class="footer-contact-item"><i class="fa-solid fa-location-dot"></i><span>Antananarivo 101, Madagascar</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<div class="container">
|
|
<p data-i18n="footer.copyright">© 2026 MVA Global Fret. Tous droits réservés.</p>
|
|
<p style="margin-top:4px;"><a href="cgv.html" style="color:rgba(255,255,255,0.45); font-size:0.8rem;" data-i18n="footer.cgv">Conditions Générales de Vente</a></p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
|
|
<script src="js/translations.js"></script>
|
|
<script src="js/main.js"></script>
|
|
<script src="js/form-handler.js"></script>
|
|
|
|
<style>
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|