81 lines
5.0 KiB
HTML
81 lines
5.0 KiB
HTML
<!DOCTYPE html><html lang="fr"><head>
|
|
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
<title>WEVAL — Contact</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root{--bg:#080b12;--surface:rgba(255,255,255,.02);--border:rgba(255,255,255,.06);--text:#94a3b8;--white:#f1f5f9;--accent:#3b82f6;--teal:#00c9a7;--r:12px}
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 4%}
|
|
.wrap{max-width:520px;width:100%}
|
|
.badge{display:inline-block;background:rgba(59,130,246,.1);color:var(--accent);padding:6px 18px;border-radius:20px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:1rem}
|
|
h1{font-size:1.8rem;font-weight:800;color:var(--white);margin-bottom:.5rem}
|
|
.sub{color:var(--text);font-size:.9rem;margin-bottom:2rem;line-height:1.6}
|
|
.field{margin-bottom:1rem}
|
|
label{display:block;font-size:.75rem;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
|
|
input,select,textarea{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--border);color:var(--white);border-radius:8px;padding:.7rem 1rem;font-size:.88rem;font-family:inherit;outline:none;transition:border-color .2s}
|
|
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
|
|
textarea{resize:vertical;min-height:100px}
|
|
select{cursor:pointer}
|
|
option{background:#0c1222}
|
|
.btn{display:block;width:100%;background:var(--accent);color:#fff;padding:14px;border:none;border-radius:var(--r);font-weight:700;font-size:.95rem;cursor:pointer;font-family:inherit;margin-top:1.5rem;transition:opacity .2s}
|
|
.btn:hover{opacity:.9}
|
|
.btn:disabled{opacity:.5;cursor:not-allowed}
|
|
.ok{background:rgba(0,200,150,.08);border:1px solid rgba(0,200,150,.2);border-radius:var(--r);padding:1.5rem;text-align:center;display:none}
|
|
.ok h2{color:var(--teal);font-size:1.2rem;margin-bottom:.5rem}
|
|
.ok p{font-size:.85rem}
|
|
.back{display:inline-block;margin-top:1.5rem;color:var(--accent);font-size:.85rem;cursor:pointer}
|
|
.back:hover{text-decoration:underline}
|
|
</style>
|
|
</head><body>
|
|
<div class="wrap">
|
|
<div id="formSection">
|
|
<div class="badge">Contact</div>
|
|
<h1>Parlons de votre projet</h1>
|
|
<p class="sub">Remplissez le formulaire ci-dessous. Notre équipe vous recontacte sous 24h.</p>
|
|
<div class="field"><label>Nom complet</label><input type="text" id="cName" placeholder="Votre nom" required></div>
|
|
<div class="field"><label>Email professionnel</label><input type="email" id="cEmail" placeholder="vous@entreprise.com" required></div>
|
|
<div class="field"><label>Entreprise</label><input type="text" id="cCompany" placeholder="Nom de votre entreprise"></div>
|
|
<div class="field"><label>Sujet</label>
|
|
<select id="cSubject">
|
|
<option value="demo">Demander une démo</option>
|
|
<option value="essai">Essai gratuit</option>
|
|
<option value="devis">Demander un devis</option>
|
|
<option value="partenariat">Partenariat</option>
|
|
<option value="support">Support technique</option>
|
|
<option value="autre">Autre</option>
|
|
</select></div>
|
|
<div class="field"><label>Message</label><textarea id="cMessage" placeholder="Décrivez votre besoin..."></textarea></div>
|
|
<button class="btn" id="sendBtn" onclick="sendForm()">Envoyer →</button>
|
|
</div>
|
|
<div class="ok" id="okSection">
|
|
<h2>Message envoyé ✓</h2>
|
|
<p>Merci ! Notre équipe vous recontactera sous 24h ouvrées.</p>
|
|
<div class="back" onclick="resetForm()">← Envoyer un autre message</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function sendForm(){
|
|
var n=document.getElementById('cName').value.trim();
|
|
var e=document.getElementById('cEmail').value.trim();
|
|
if(!n||!e){alert('Veuillez remplir au minimum votre nom et email.');return;}
|
|
var btn=document.getElementById('sendBtn');btn.disabled=true;btn.textContent='Envoi...';
|
|
var data={name:n,email:e,company:document.getElementById('cCompany').value.trim(),subject:document.getElementById('cSubject').value,message:document.getElementById('cMessage').value.trim(),source:'contact-page',ts:new Date().toISOString()};
|
|
fetch('/api/contact',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)}).then(function(){
|
|
document.getElementById('formSection').style.display='none';
|
|
document.getElementById('okSection').style.display='block';
|
|
}).catch(function(){
|
|
document.getElementById('formSection').style.display='none';
|
|
document.getElementById('okSection').style.display='block';
|
|
});
|
|
}
|
|
function resetForm(){
|
|
document.getElementById('formSection').style.display='block';
|
|
document.getElementById('okSection').style.display='none';
|
|
document.getElementById('sendBtn').disabled=false;
|
|
document.getElementById('sendBtn').textContent='Envoyer →';
|
|
document.getElementById('cName').value='';document.getElementById('cEmail').value='';
|
|
document.getElementById('cCompany').value='';document.getElementById('cMessage').value='';
|
|
}
|
|
</script>
|
|
</body></html>
|