211 lines
11 KiB
HTML
211 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
<title>Prendre rendez-vous — WEVAL Consulting</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:'DM Sans',system-ui,sans-serif;background:#0b0d14;color:#e2e8f0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
|
|
.wrap{width:520px;max-width:100%}
|
|
.logo{text-align:center;margin-bottom:32px}
|
|
.logo a{text-decoration:none;font-size:22px;font-weight:800;color:#f1f5f9;letter-spacing:-.5px}
|
|
.logo a span{color:#d4a843}
|
|
.card{background:linear-gradient(135deg,#111827,#0f172a);border:1px solid #1e293b;border-radius:20px;padding:36px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
|
|
.card::before{content:'';display:block;height:2px;background:linear-gradient(90deg,transparent,#d4a843,transparent);margin:-36px -36px 28px;border-radius:20px 20px 0 0}
|
|
h1{font-size:22px;font-weight:700;margin-bottom:6px;text-align:center}
|
|
.sub{font-size:13px;color:#64748b;text-align:center;margin-bottom:28px}
|
|
.field{margin-bottom:18px}
|
|
label{display:block;font-size:12px;font-weight:600;color:#94a3b8;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
|
|
input,select,textarea{width:100%;padding:12px 14px;background:#0b0d14;border:1px solid #1e293b;border-radius:10px;color:#e2e8f0;font-size:14px;font-family:inherit;transition:border .2s}
|
|
input:focus,select:focus,textarea:focus{outline:none;border-color:#d4a843}
|
|
select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
|
|
select option{background:#111827;color:#e2e8f0}
|
|
textarea{resize:vertical;min-height:80px}
|
|
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
|
|
.btn{width:100%;padding:14px;background:linear-gradient(135deg,#d4a843,#b8942e);color:#0a0d13;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s;font-family:inherit;margin-top:8px}
|
|
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(212,168,67,.25)}
|
|
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
|
|
.info{margin-top:20px;padding:14px;background:rgba(212,168,67,.06);border:1px solid rgba(212,168,67,.12);border-radius:10px;font-size:12px;color:#94a3b8;text-align:center;line-height:1.5}
|
|
.info b{color:#d4a843}
|
|
.success{display:none;text-align:center;padding:40px 20px}
|
|
.success .check{width:56px;height:56px;background:linear-gradient(135deg,#22c55e,#16a34a);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:24px;color:#fff}
|
|
.success h2{font-size:20px;margin-bottom:8px;color:#f1f5f9}
|
|
.success p{font-size:13px;color:#64748b}
|
|
.back{display:inline-block;margin-top:20px;padding:10px 24px;background:transparent;border:1px solid #334155;border-radius:10px;color:#94a3b8;text-decoration:none;font-size:13px;transition:all .15s}
|
|
.back:hover{border-color:#d4a843;color:#d4a843}
|
|
::placeholder{color:#475569}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="logo"><a href="/">WE<span>VAL</span></a></div>
|
|
<div class="card">
|
|
<div id="formView">
|
|
<h1>Prendre rendez-vous</h1>
|
|
<p class="sub">Choisissez un créneau, nous vous confirmons sous 24h.</p>
|
|
<form id="bookForm" onsubmit="return submitBooking(event)">
|
|
<div class="field"><label>Nom complet</label><input aria-label="bName" type="text" id="bName" placeholder="Votre nom" required></div>
|
|
<div class="field"><label>Email</label><input aria-label="bEmail" type="email" id="bEmail" placeholder="vous@entreprise.com" required></div>
|
|
<div class="field"><label>Entreprise</label><input aria-label="bCompany" type="text" id="bCompany" placeholder="Nom de l'entreprise"></div>
|
|
<div class="row">
|
|
<div class="field"><label>Date souhaitée</label><input aria-label="bDate" type="date" id="bDate" required></div>
|
|
<div class="field"><label>Créneau</label><select aria-label="bSlot" id="bSlot" required>
|
|
<option value="">Choisir...</option>
|
|
<option value="09:00">09:00 - 09:30</option>
|
|
<option value="09:30">09:30 - 10:00</option>
|
|
<option value="10:00">10:00 - 10:30</option>
|
|
<option value="10:30">10:30 - 11:00</option>
|
|
<option value="11:00">11:00 - 11:30</option>
|
|
<option value="11:30">11:30 - 12:00</option>
|
|
<option value="14:00">14:00 - 14:30</option>
|
|
<option value="14:30">14:30 - 15:00</option>
|
|
<option value="15:00">15:00 - 15:30</option>
|
|
<option value="15:30">15:30 - 16:00</option>
|
|
<option value="16:00">16:00 - 16:30</option>
|
|
<option value="16:30">16:30 - 17:00</option>
|
|
</select></div>
|
|
</div>
|
|
<div class="field"><label>Durée</label><select aria-label="bDuration" id="bDuration">
|
|
<option value="30">30 minutes</option>
|
|
<option value="60">1 heure</option>
|
|
</select></div>
|
|
<div class="field"><label>Sujet</label><select aria-label="bSubject" id="bSubject">
|
|
<option value="Consultation générale">Consultation générale</option>
|
|
<option value="ERP / SAP">ERP / SAP</option>
|
|
<option value="Cloud & Infrastructure">Cloud & Infrastructure</option>
|
|
<option value="Cybersécurité">Cybersécurité</option>
|
|
<option value="Supply Chain">Supply Chain</option>
|
|
<option value="IA & Automatisation">IA & Automatisation</option>
|
|
<option value="Huawei Cloud">Huawei Cloud</option>
|
|
<option value="Partenariat">Partenariat</option>
|
|
</select></div>
|
|
<div class="field"><label>Message (optionnel)</label><textarea aria-label="bMsg" id="bMsg" placeholder="Décrivez brièvement votre besoin..."></textarea></div>
|
|
<button type="submit" class="btn" id="bBtn">Confirmer le rendez-vous</button>
|
|
</form>
|
|
<div class="info"><b>info@weval-consulting.com</b> — Confirmation sous 24h. Paris & Casablanca, GMT+1.</div>
|
|
</div>
|
|
<div id="successView" class="success">
|
|
<div class="check">✓</div>
|
|
<h2>Demande envoyée</h2>
|
|
<p>Nous avons reçu votre demande de rendez-vous.<br>Confirmation par email sous 24h.</p>
|
|
<a href="/" class="back">← Retour au site</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// Set min date to today
|
|
document.getElementById('bDate').min = new Date().toISOString().split('T')[0];
|
|
|
|
async function submitBooking(e) {
|
|
e.preventDefault();
|
|
const btn = document.getElementById('bBtn');
|
|
btn.disabled = true;
|
|
btn.textContent = 'Envoi...';
|
|
|
|
const data = {
|
|
name: document.getElementById('bName').value,
|
|
email: document.getElementById('bEmail').value,
|
|
company: document.getElementById('bCompany').value,
|
|
date: document.getElementById('bDate').value,
|
|
slot: document.getElementById('bSlot').value,
|
|
duration: document.getElementById('bDuration').value,
|
|
subject: document.getElementById('bSubject').value,
|
|
message: document.getElementById('bMsg').value,
|
|
};
|
|
|
|
try {
|
|
const r = await fetch('/api/booking.php', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify(data),
|
|
});
|
|
const j = await r.json();
|
|
if (j.ok) {
|
|
document.getElementById('formView').style.display = 'none';
|
|
document.getElementById('successView').style.display = 'block';
|
|
} else {
|
|
alert(j.error || 'Erreur, réessayez.');
|
|
btn.disabled = false;
|
|
btn.textContent = 'Confirmer le rendez-vous';
|
|
}
|
|
} catch(err) {
|
|
// Fallback: mailto
|
|
const subject = encodeURIComponent('RDV WEVAL — ' + data.subject + ' — ' + data.date + ' ' + data.slot);
|
|
const body = encodeURIComponent(
|
|
'Demande de rendez-vous\n\nNom: ' + data.name +
|
|
'\nEmail: ' + data.email +
|
|
'\nEntreprise: ' + data.company +
|
|
'\nDate: ' + data.date + ' à ' + data.slot +
|
|
'\nDurée: ' + data.duration + ' min' +
|
|
'\nSujet: ' + data.subject +
|
|
'\nMessage: ' + data.message
|
|
);
|
|
window.location.href = 'mailto:info@weval-consulting.com?subject=' + subject + '&body=' + body;
|
|
}
|
|
return false;
|
|
}
|
|
</script>
|
|
|
|
<!-- === OPUS UNIVERSAL DRILL-DOWN v1 19avr — append-only, doctrine #14 === -->
|
|
<script>
|
|
(function(){
|
|
if (window.__opusUniversalDrill) return; window.__opusUniversalDrill = true;
|
|
var d = document;
|
|
var m = d.createElement('div');
|
|
m.id = 'opus-udrill';
|
|
m.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.82);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:99995;padding:20px;cursor:pointer';
|
|
var inner = d.createElement('div');
|
|
inner.id = 'opus-udrill-in';
|
|
inner.style.cssText = 'max-width:900px;width:100%;max-height:90vh;overflow:auto;background:#0b0d15;border:1px solid rgba(99,102,241,0.35);border-radius:14px;padding:28px;cursor:default;box-shadow:0 20px 60px rgba(0,0,0,0.6);color:#e2e8f0;font:14px/1.55 Inter,system-ui,sans-serif';
|
|
inner.addEventListener('click', function(e){ e.stopPropagation(); });
|
|
m.appendChild(inner);
|
|
m.addEventListener('click', function(){ m.style.display='none'; });
|
|
d.addEventListener('keydown', function(e){ if(e.key==='Escape') m.style.display='none'; });
|
|
(d.body || d.documentElement).appendChild(m);
|
|
function openCard(card) {
|
|
var html = '<div style="display:flex;justify-content:flex-end;margin-bottom:14px"><button id="opus-udrill-close" style="padding:6px 14px;background:#171b2a;border:1px solid rgba(99,102,241,0.25);color:#e2e8f0;border-radius:8px;cursor:pointer;font-size:12px">✕ Fermer (Esc)</button></div>';
|
|
html += '<div style="transform-origin:top left;font-size:1.05em">' + card.outerHTML + '</div>';
|
|
inner.innerHTML = html;
|
|
d.getElementById('opus-udrill-close').onclick = function(){ m.style.display='none'; };
|
|
m.style.display = 'flex';
|
|
}
|
|
function wire(root) {
|
|
var sels = '.card,[class*="card"],.kpi,[class*="kpi"],.stat,[class*="stat"],.tile,[class*="tile"],.metric,[class*="metric"],.widget,[class*="widget"]';
|
|
var cards = root.querySelectorAll(sels);
|
|
for (var i = 0; i < cards.length; i++) {
|
|
var c = cards[i];
|
|
if (c.__opusWired) continue;
|
|
if (c.closest('button, a, input, select, textarea, #opus-udrill')) continue;
|
|
var r = c.getBoundingClientRect();
|
|
if (r.width < 60 || r.height < 40) continue;
|
|
c.__opusWired = true;
|
|
c.style.cursor = 'pointer';
|
|
c.setAttribute('role','button');
|
|
c.setAttribute('tabindex','0');
|
|
c.addEventListener('click', function(ev){
|
|
if (ev.target.closest('[data-pp-id]') && window.__opusDrillInit) return;
|
|
if (ev.target.closest('a,button,input,select')) return;
|
|
ev.preventDefault(); ev.stopPropagation();
|
|
openCard(this);
|
|
});
|
|
c.addEventListener('keydown', function(ev){ if(ev.key==='Enter'||ev.key===' '){ev.preventDefault();openCard(this);} });
|
|
}
|
|
}
|
|
var initRun = function(){ wire(d.body || d.documentElement); };
|
|
if (d.readyState === 'loading') d.addEventListener('DOMContentLoaded', initRun);
|
|
else initRun();
|
|
var mo = new MutationObserver(function(muts){
|
|
var newCard = false;
|
|
for (var i=0;i<muts.length;i++) if (muts[i].addedNodes.length) { newCard = true; break; }
|
|
if (newCard) initRun();
|
|
});
|
|
mo.observe(d.body || d.documentElement, {childList:true, subtree:true});
|
|
})();
|
|
</script>
|
|
<!-- === OPUS UNIVERSAL DRILL-DOWN END === -->
|
|
|
|
</body>
|
|
</html>
|