Embed

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AE Sync Demo</title>

<style>
* {
    box-sizing: border-box;
}

body {
    margin:0;
    font-family: Inter, sans-serif;
    background:#ffffff;
    color:#111;
    overflow-x:hidden;
}

.wrapper {
    width:100%;
    display:block !important;
    clear:both !important;
}

/* HERO */
.hero {
    text-align:center;
    padding:50px 20px;
    background:#f4f6fb;
    width:100% !important;
}

.hero img {
    width:140px;
    margin-bottom:20px;
}

.hero h1 {
    font-size:26px;
    font-weight:800;
    line-height:34px;
    margin-bottom:10px;
}

.hero p {
    font-size:16px;
    color:#444;
    max-width:380px;
    margin:auto;
}

.start-btn {
    margin-top:20px;
    background:#0E66D7;
    color:white;
    padding:14px 22px;
    border-radius:8px;
    border:none;
    font-size:16px;
    width:100%;
    max-width:260px;
}

/* WIZARD */
#wizardContainer {
    margin:20px auto;
    max-width:500px;
    width:100%;
    padding:0 20px;
    display:none;
}

.wizard-box {
    background:#fff;
    padding:25px;
    border-radius:14px;
    box-shadow:0 3px 14px rgba(0,0,0,0.1);
}

h2 {
    font-size:22px;
    font-weight:700;
    margin-bottom:15px;
}

label {
    font-weight:600;
    margin-top:14px;
    display:block;
    font-size:15px;
}

input, select {
    width:100%;
    padding:12px;
    border-radius:6px;
    border:1px solid #ccc;
    margin-top:6px;
    font-size:16px;
}

.next-btn, .prev-btn, .submit-btn {
    width:100%;
    padding:14px;
    border-radius:8px;
    border:none;
    font-size:16px;
    margin-top:18px;
}

.next-btn, .submit-btn {
    background:#0E66D7;
    color:white;
}

.prev-btn {
    background:#ddd;
    color:#333;
}

/* SUCCESS */
#successScreen {
    text-align:center;
    padding:40px 20px;
    display:none;
}

#successScreen h2 {
    color:#0E66D7;
}

/* MOBILE FIX */
@media (max-width: 900px) {
    body, html { overflow-x:hidden !important; }

    .hero, #wizardContainer, .wizard-box {
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        float:none !important;
        clear:both !important;
    }

    h1, h2, p, label {
        word-break:normal !important;
        white-space:normal !important;
        overflow-wrap:break-word !important;
    }
}
</style>
</head>

<body>

<div class="wrapper">


<section class="hero">

    
    <img src="https://cdn-icons-png.flaticon.com/512/4712/4712109.png" 
         alt="AI Robot">

    <h1>AE Sync Demo: Automatisering voor Moderne Bedrijven</h1>

    <p>
        Vraag een demo aan en ontvang automatisch een offerte op maat,
        gebaseerd op uw bedrijfsdoelen en automatiseringsbehoeften.
    </p>

    <button class="start-btn" onclick="startWizard()">Start aanvraag</button>
</section>



<section id="wizardContainer">
<div class="wizard-box">


<div id="step1">
<h2>Bedrijfsinformatie</h2>

<label>Bedrijfsnaam</label>
<input id="companyName">

<label>Sectoor</label>
<select id="sector">
<option>Zakelijke dienstverlening</option>
<option>Vastgoed / Makelaardij</option>
<option>E-commerce</option>
<option>Retail</option>
<option>Consultancy</option>
<option>Technologie</option>
<option>Overig</option>
</select>

<label>Uw functie</label>
<input id="role">

<button class="next-btn" onclick="goStep(2)">Volgende</button>
</div>


<div id="step2" style="display:none;">
<h2>Teamgrootte</h2>

<select id="teamSize">
<option>1–5 medewerkers</option>
<option>6–20 medewerkers</option>
<option>20–50 medewerkers</option>
<option>50+ medewerkers</option>
</select>

<button class="prev-btn" onclick="goStep(1)">Terug</button>
<button class="next-btn" onclick="goStep(3)">Volgende</button>
</div>


<div id="step3" style="display:none;">
<h2>Automatiseringsdoelen</h2>

<label><input type="checkbox" class="goal" value="Sales automatisering"> Sales automatisering</label>
<label><input type="checkbox" class="goal" value="Lead generatie"> Lead generatie</label>
<label><input type="checkbox" class="goal" value="Klantenservice automatisering"> Klantenservice automatisering</label>
<label><input type="checkbox" class="goal" value="Workflow automatisering"> Workflow automatisering</label>
<label><input type="checkbox" class="goal" value="Multichannel communicatie"> Multichannel communicatie</label>
<label><input type="checkbox" class="goal" value="Deal closing automatisering"> Deal closing automatisering</label>
<label><input type="checkbox" class="goal" value="Rapportage dashboards"> Rapportage dashboards</label>

<button class="prev-btn" onclick="goStep(2)">Terug</button>
<button class="next-btn" onclick="goStep(4)">Volgende</button>
</div>


<div id="step4" style="display:none;">
<h2>Implementatie</h2>

<select id="urgency">
<option>Zo snel mogelijk</option>
<option>Binnen 1–2 weken</option>
<option>Binnen 1 maand</option>
<option>Binnen 3 maanden</option>
</select>

<button class="prev-btn" onclick="goStep(3)">Terug</button>
<button class="next-btn" onclick="goStep(5)">Volgende</button>
</div>


<div id="step5" style="display:none;">
<h2>Contactgegevens</h2>

<label>Naam</label>
<input id="fullName">

<label>E-mail</label>
<input id="email">

<label>Telefoonnummer</label>
<input id="phone">

<button class="prev-btn" onclick="goStep(4)">Terug</button>
<button class="next-btn" onclick="goStep(6)">Volgende</button>
</div>


<div id="step6" style="display:none;">
<h2>Demotijd kiezen</h2>

<select id="timeslot">
<option>Maandag 10:00</option>
<option>Dinsdag 14:30</option>
<option>Donderdag 09:30</option>
<option>Vrijdag 13:00</option>
<option>Ander moment</option>
</select>

<button class="prev-btn" onclick="goStep(5)">Terug</button>
<button class="submit-btn" onclick="submitData()">Aanvraag indienen</button>
</div>

</div>
</section>



<div id="successScreen">
<h2>Uw aanvraag is ontvangen!</h2>
<p>Download nu uw offerte.</p>
<button class="start-btn" onclick="downloadPDF()">Download Offerte (PDF)</button>
</div>

</div> 


<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

<script>
function startWizard(){
    document.getElementById("wizardContainer").style.display="block";
    window.scrollTo(0, document.getElementById("wizardContainer").offsetTop);
}

function goStep(step){
    for(let i=1;i<=6;i++){
        document.getElementById("step"+i).style.display="none";
    }
    document.getElementById("step"+step).style.display="block";
}

function getGoals(){
    let g=[];
    document.querySelectorAll(".goal:checked").forEach(el=>g.push(el.value));
    return g.join(", ");
}

function choosePackage(){
    let t=document.getElementById("teamSize").value;
    if(t.includes("1–5")) return "Starter – €349 p/m";
    if(t.includes("6–20")) return "Pro – €499 p/m";
    return "Enterprise – €999+ p/m";
}

function submitData(){
    document.getElementById("wizardContainer").style.display="none";
    document.getElementById("successScreen").style.display="block";
}

function downloadPDF(){
let doc={
content:[
{text:"AE Sync – Offerte op maat", style:"header"},
" ",
"Bedrijf: "+document.getElementById("companyName").value,
"Sectoor: "+document.getElementById("sector").value,
"Functie: "+document.getElementById("role").value,
"Teamgrootte: "+document.getElementById("teamSize").value,
"Doelen: "+getGoals(),
" ",
"Aanbevolen pakket: "+choosePackage(),
"Implementatie: "+document.getElementById("urgency").value,
"Demotijd: "+document.getElementById("timeslot").value,
" ",
"Naam: "+document.getElementById("fullName").value,
"E-mail: "+document.getElementById("email").value,
"Telefoon: "+document.getElementById("phone").value
],
styles:{header:{fontSize:22,bold:true}}
};
pdfMake.createPdf(doc).download("AE-Sync-Offerte.pdf");
}
</script>

</body>
</html>