Embed

<div class="booking-wrapper">
  <div class="logo-container">
    <img src="https://i.imgur.com/BOqyHHr.jpeg" alt="Taxi Snel Thuis logo">
  </div>

  <div class="booking-container">
    <h2>🚕 Boek eenvoudig je taxirit</h2>
    <p>Vul hieronder je gegevens in om de rit te plannen.</p>

    <div class="form-grid">
      <div class="input-group full">
        <label for="pickup">Ophaallocatie</label>
        <input type="text" id="pickup" placeholder="Van (straatnaam en huisnummer)">
      </div>

      <div class="input-group full">
        <label for="destination">Bestemming</label>
        <input type="text" id="destination" placeholder="Naar (straatnaam en huisnummer)">
      </div>

      <div class="input-group">
        <label for="stop">Tussenstop (optioneel)</label>
        <input type="text" id="stop" placeholder="Extra adres (optioneel)">
      </div>

      <div class="input-group">
        <label for="datetime">Vertrektijd</label>
        <input type="datetime-local" id="datetime">
      </div>

      <div class="input-group">
        <label for="passengers">Aantal reizigers</label>
        <input type="number" id="passengers" placeholder="1 – 4" min="1" max="4">
      </div>

      <div class="input-group">
        <label for="baggage">Extra bagage (boven gratis limiet)</label>
        <input type="number" id="baggage" placeholder="Aantal extra stuks" min="0" value="0">
      </div>

      <div class="input-group full-on-mobile">
        <label for="tripType">Type rit</label>
        <select id="tripType">
          <option value="enkel">Enkele rit</option>
          <option value="retour">Retourrit</option>
        </select>
      </div>
    </div>

    <button type="button" onclick="opslaanEnVerder()">Volgende ➜</button>
  </div>
</div>

<script>
// ---- Min. vertrektijd: nu + 30 minuten, netjes afgerond op minuten ----
function setMinDateTime() {
  const inp = document.getElementById('datetime');
  const now = new Date();
  const min = new Date(now.getTime() + 30 * 60000); // +30m

  // format yyyy-MM-ddTHH:mm (lokale tijd)
  const pad = n => String(n).padStart(2, '0');
  const fmt = d => `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;

  const minStr = fmt(min);
  inp.min = minStr;

  // als leeg of te vroeg: stilletjes corrigeren naar min
  if (!inp.value || inp.value < minStr) {
    inp.value = minStr;
  }

  // wanneer gebruiker later iets kiest dat toch < min is, corrigeer zonder foutmelding
  inp.addEventListener('change', () => {
    if (inp.value < inp.min) inp.value = inp.min;
  });
}

function opslaanEnVerder() {
  const pickup = document.getElementById('pickup').value.trim();
  const stop = document.getElementById('stop').value.trim();
  const destination = document.getElementById('destination').value.trim();
  const datetime = document.getElementById('datetime').value;
  const passengers = parseInt(document.getElementById('passengers').value) || 1;
  const baggage = parseInt(document.getElementById('baggage').value) || 0;
  const tripType = document.getElementById('tripType').value;

  if (!pickup || !destination || !datetime) {
    alert('❗ Vul alle verplichte velden in.');
    return;
  }

  // 💾 Opslaan
  sessionStorage.setItem('pickup', pickup);
  sessionStorage.setItem('stop', stop);
  sessionStorage.setItem('destination', destination);
  sessionStorage.setItem('datetime', datetime);
  sessionStorage.setItem('passengers', passengers);
  sessionStorage.setItem('baggage', baggage);
  sessionStorage.setItem('tripType', tripType);

  // 💰 Tariefinstellingen (ongewijzigd)
  const pricingData = {
    startFee: 2.50,
    baseRate: 1.40,
    blackFactor: 1.20,
    vipFactor: 1.28,
    passengerFactor: passengers > 2 ? 1.17 : 1.0,
    baggageFee: baggage > 0 ? baggage * 4.5 : 0,
    tripTypeFactor: tripType === "retour" ? 2.0 : 1.0
  };
  sessionStorage.setItem('pricingData', JSON.stringify(pricingData));

  window.location.href = "https://alltaxisnelthuis.com/voertuigkeuze";
}

// init
document.addEventListener('DOMContentLoaded', setMinDateTime);
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
body{background:radial-gradient(circle at center,#0a0a0a,#1a1a1a);color:#fff;font-family:'Poppins',sans-serif;margin:0;padding:0;}
.booking-wrapper{display:flex;justify-content:center;align-items:center;min-height:100vh;flex-wrap:wrap;gap:40px;padding:20px;}
.logo-container img{max-width:220px;border-radius:12px;filter:drop-shadow(0 0 25px rgba(255,215,0,0.5));}
.booking-container{max-width:980px;width:100%;background:linear-gradient(180deg,rgba(30,30,30,0.95),rgba(0,0,0,0.98));padding:34px;border-radius:20px;box-shadow:0 0 50px rgba(255,215,0,0.25);border:1px solid rgba(255,215,0,0.3);}
.booking-container h2{color:gold;font-weight:600;margin:0 0 12px;}
.booking-container p{margin:0 0 18px;color:#f2f2f2}

/* 2 kolommen op desktop, 1 kolom op mobiel */
.form-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:860px){ .form-grid{grid-template-columns:1fr 1fr;} .form-grid .full{grid-column:1 / -1;} }
.input-group{display:flex;flex-direction:column;}
.full-on-mobile{grid-column:auto;}
@media(min-width:860px){ .full-on-mobile{grid-column:auto;} }

/* Velden (zwart op wit tekst goed zichtbaar) */
label{display:inline-block;font-size:0.95rem;font-weight:500;color:#000;background:linear-gradient(90deg,gold,#ffdd55);padding:4px 10px;border-radius:6px;margin-bottom:6px;box-shadow:0 0 6px rgba(255,215,0,0.3);}
input,select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #333;background:#ffffff;color:#000;font-size:1rem}
input:focus,select:focus{border-color:gold;box-shadow:0 0 10px rgba(255,215,0,0.6);outline:none}

button{margin-top:16px;width:100%;padding:15px;border-radius:12px;border:none;background:linear-gradient(90deg,gold,#ffb700);color:#000;font-weight:600;font-size:1.05rem;cursor:pointer;transition:0.3s;}
button:hover{background:#000;color:gold;border:1px solid gold;transform:scale(1.03);}
</style>


TaxiSnelThuis

TaxiSnelThuis is a newly launched taxi service based in Rijen, Netherlands, offering an online booking platform that automatically calculates travel distance between pickup locations and final destinations. As a startup, the company focuses on providing convenient, distance‑aware ride scheduling for local customers.