Embed

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T4ZMDSQB"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mori Ora – Availability</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&family=Poppins:wght@300;400;500;600&display=swap');

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --deep:     #0d1b2a;
    --ocean:    #1a3a4a;
    --mid:      #2a5568;
    --accent:   #4a9bb5;
    --white:    #ffffff;
    --offwhite: #f8f9fa;
    --border:   #e2e8ed;
    --muted:    #7a9aaa;

    --dispo:      #1a7a4a;
    --dispo-bg:   #eaf7f0;
    --dispo-bd:   #a8dfc0;
    --partiel:    #b06a00;
    --partiel-bg: #fff8ec;
    --partiel-bd: #f0c870;
    --complet:    #a01c1c;
    --complet-bg: #fdf0f0;
    --complet-bd: #e8b0b0;
  }

  body {
    font-family: 'Poppins', sans-serif;
    background: var(--offwhite);
    color: var(--deep);
    min-height: 100vh;
    padding: 2.5rem 1rem 3rem;
  }

  .widget {
    max-width: 900px;
    margin: 0 auto;
  }

  /* ── HEADER ── */
  .header {
    text-align: center;
    margin-bottom: 2.8rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
  }
  .header h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 2.1rem;
    font-weight: 900;
    color: var(--deep);
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .header p {
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 0.5rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* ── NAVIGATION SEMAINE ── */
  .nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
  }
  .nav-btn {
    background: transparent;
    color: var(--ocean);
    border: 1.5px solid var(--ocean);
    width: 36px; height: 36px;
    border-radius: 0;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
    font-weight: 300;
  }
  .nav-btn:hover { background: var(--ocean); color: white; }
  .nav-btn:disabled { border-color: var(--border); color: var(--muted); cursor: default; background: transparent; }
  .nav-label {
    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--deep);
    min-width: 220px;
    text-align: center;
    letter-spacing: 0.01em;
  }
  .today-btn {
    background: transparent;
    border: 1.5px solid var(--ocean);
    color: var(--ocean);
    padding: 0.3rem 1rem;
    border-radius: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.2s;
  }
  .today-btn:hover { background: var(--ocean); color: white; }

  /* ── SÉLECTEUR DE DATE ── */
  .date-picker-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-bottom: 1.8rem;
  }
  .date-picker-label {
    font-size: 0.74rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  #datePicker {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    color: var(--ocean);
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 0;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
  }
  #datePicker:focus, #datePicker:hover { border-color: var(--ocean); }

  /* ── LÉGENDE ── */
  .legende {
    display: flex;
    gap: 1.8rem;
    justify-content: center;
    margin-bottom: 1.8rem;
    flex-wrap: wrap;
  }
  .leg-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    color: var(--muted);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .leg-dot {
    width: 8px; height: 8px;
    border-radius: 0;
  }
  .leg-dot.dispo   { background: var(--dispo); }
  .leg-dot.partiel { background: var(--partiel); }
  .leg-dot.complet { background: var(--complet); }

  /* ── GRILLE JOURS ── */
  .grille {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    border: 1px solid var(--border);
  }

  @media (max-width: 640px) {
    .grille { grid-template-columns: repeat(2, 1fr); }
  }

  /* ── CARTE JOUR ── */
  .jour-carte {
    background: var(--white);
    border-right: 1px solid var(--border);
    overflow: hidden;
    transition: background 0.15s;
  }
  .jour-carte:last-child { border-right: none; }

  .jour-entete {
    background: var(--deep);
    padding: 0.7rem 0.4rem 0.5rem;
    text-align: center;
    border-bottom: 2px solid transparent;
  }
  .jour-nom {
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .jour-num {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    line-height: 1.1;
    margin-top: 0.1rem;
  }
  .jour-entete.aujourd-hui {
    background: var(--ocean);
    border-bottom: 2px solid var(--accent);
  }
  .jour-entete.hors-saison {
    background: #c8d8e0;
  }
  .jour-entete.hors-saison .jour-nom,
  .jour-entete.hors-saison .jour-num { color: rgba(255,255,255,0.6); }

  .jour-body {
    padding: 0.5rem 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 80px;
  }

  /* ── EVENT CARD ── */
  .evt {
    padding: 0.4rem 0.45rem;
    font-size: 0.68rem;
    line-height: 1.45;
    border-left: 2px solid transparent;
    border-bottom: 1px solid transparent;
  }
  .evt.dispo   { background: var(--dispo-bg);   border-left-color: var(--dispo);   border-bottom-color: var(--dispo-bd);   color: #14452e; }
  .evt.partiel { background: var(--partiel-bg); border-left-color: var(--partiel); border-bottom-color: var(--partiel-bd); color: #5a3800; }
  .evt.complet { background: var(--complet-bg); border-left-color: var(--complet); border-bottom-color: var(--complet-bd); color: #5a1010; }

  .evt-titre {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
    line-height: 1.2;
  }
  .evt-ligne {
    font-size: 0.64rem;
    font-weight: 400;
    opacity: 0.8;
  }

  .hors-saison-msg {
    padding: 0.7rem 0.4rem;
    text-align: center;
    font-size: 0.64rem;
    color: var(--muted);
    font-style: italic;
    font-weight: 300;
  }

  /* ── LOADING / ERREUR ── */
  .loading-wrap {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--muted);
    font-size: 0.85rem;
    background: var(--white);
  }
  .spinner {
    width: 28px; height: 28px;
    border: 2px solid var(--border);
    border-top-color: var(--ocean);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── CONTACT ── */
  .contact {
    text-align: center;
    margin-top: 2.2rem;
    padding: 1.4rem;
    border: 1px solid var(--border);
    background: var(--white);
  }
  .contact p {
    font-size: 0.72rem;
    color: var(--muted);
    margin-bottom: 0.4rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .contact a {
    color: var(--ocean);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: color 0.2s;
  }
  .contact a:hover { color: var(--accent); }
  .contact-sep { color: var(--border); margin: 0 0.6rem; }
</style>
</head>
<body>
<div class="widget">

  <div class="header">
    <h1>Mori Ora Whale Watching</h1>
    <p>Availability · Whale Season Moorea</p>
  </div>

  <div class="nav">
    <button class="nav-btn" id="btnPrev" onclick="changerSemaine(-1)">&#8249;</button>
    <span class="nav-label" id="labelSemaine"></span>
    <button class="nav-btn" id="btnNext" onclick="changerSemaine(1)">&#8250;</button>
    <button class="today-btn" onclick="allerAujourd()">Today</button>
  </div>

  <div class="date-picker-wrap">
    <span class="date-picker-label">Go to date:</span>
    <input type="date" id="datePicker" onchange="allerADate(this.value)">
  </div>

  <div class="legende">
    <div class="leg-item"><div class="leg-dot dispo"></div> Available</div>
    <div class="leg-item"><div class="leg-dot partiel"></div> Almost full</div>
    <div class="leg-item"><div class="leg-dot complet"></div> Full</div>
  </div>

  <div id="grille" class="grille">
    <div class="loading-wrap"><div class="spinner"></div>Loading...</div>
  </div>

  <div class="contact">
    <p>Bookings &amp; information</p>
    <a href="mailto:Mori.ora47@gmail.com">Mori.ora47@gmail.com</a>
    <span class="contact-sep">|</span>
    <a href="tel:+68987268096">(+689) 87 26 80 96</a>
  </div>

</div>

<script>
var API_KEY  = 'AIzaSyCUVPgxuIEZgZAoD6u4KVbvsbG1BUvFTZA';
var CAL_ID   = '2b0d13e3aae1ebfdf39f40dadc21b432b0cf9d9e740258d943fba3bc227193a6@group.calendar.google.com';
var ANNEE    = new Date().getFullYear();
var SAISON_DEBUT = new Date(ANNEE, 6, 20);
var SAISON_FIN   = new Date(ANNEE, 10, 20);
var lundiCourant = getLundi(new Date());

var picker = document.getElementById('datePicker');
picker.min = ANNEE + '-07-20';
picker.max = ANNEE + '-11-20';

afficherSemaine();

function getLundi(date) {
  var d = new Date(date);
  var jour = d.getDay();
  var diff = (jour === 0) ? -6 : 1 - jour;
  d.setDate(d.getDate() + diff);
  d.setHours(0, 0, 0, 0);
  return d;
}

function changerSemaine(delta) {
  lundiCourant = new Date(lundiCourant);
  lundiCourant.setDate(lundiCourant.getDate() + delta * 7);
  afficherSemaine();
}

function allerAujourd() {
  lundiCourant = getLundi(new Date());
  document.getElementById('datePicker').value = '';
  afficherSemaine();
}

function allerADate(valeur) {
  if (!valeur) return;
  var parts = valeur.split('-');
  var date = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]));
  lundiCourant = getLundi(date);
  afficherSemaine();
}

function afficherSemaine() {
  var lundi    = new Date(lundiCourant);
  var dimanche = new Date(lundi);
  dimanche.setDate(dimanche.getDate() + 6);

  var opts  = { day: 'numeric', month: 'long' };
  var label = lundi.toLocaleDateString('en-US', opts)
            + ' – '
            + dimanche.toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric' });
  document.getElementById('labelSemaine').textContent = label;

  document.getElementById('btnPrev').disabled =
    new Date(lundi.getTime() - 7*86400000) > SAISON_FIN || dimanche < SAISON_DEBUT;

  document.getElementById('grille').innerHTML =
    '<div class="loading-wrap"><div class="spinner"></div>Loading...</div>';

  var timeMin = lundi.toISOString();
  var timeFin = new Date(dimanche); timeFin.setHours(23, 59, 59);
  var timeMax = timeFin.toISOString();

  var url = 'https://www.googleapis.com/calendar/v3/calendars/'
           + encodeURIComponent(CAL_ID)
           + '/events?key=' + API_KEY
           + '&timeMin=' + encodeURIComponent(timeMin)
           + '&timeMax=' + encodeURIComponent(timeMax)
           + '&singleEvents=true&orderBy=startTime&maxResults=50';

  fetch(url)
    .then(function(r) { return r.json(); })
    .then(function(data) { renderSemaine(lundi, data.items || []); })
    .catch(function() {
      document.getElementById('grille').innerHTML =
        '<div class="loading-wrap">❌ Unable to load availability.</div>';
    });
}

function renderSemaine(lundi, events) {
  var parJour = {};
  events.forEach(function(ev) {
    var d = new Date(ev.start.dateTime || ev.start.date);
    var key = d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate();
    if (!parJour[key]) parJour[key] = [];
    parJour[key].push(ev);
  });

  var jours   = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  var aujourd = new Date(); aujourd.setHours(0,0,0,0);
  var html    = '';

  for (var i = 0; i < 7; i++) {
    var date = new Date(lundi);
    date.setDate(lundi.getDate() + i);
    var key        = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
    var evts       = parJour[key] || [];
    var estAujourd = date.getTime() === aujourd.getTime();
    var horsSaison = date < SAISON_DEBUT || date > SAISON_FIN;
    var entCls     = horsSaison ? 'hors-saison' : (estAujourd ? 'aujourd-hui' : '');

    html += '<div class="jour-carte">';
    html += '<div class="jour-entete ' + entCls + '">';
    html += '<div class="jour-nom">' + jours[i] + '</div>';
    html += '<div class="jour-num">' + date.getDate() + '</div>';
    html += '</div><div class="jour-body">';

    if (horsSaison) {
      html += '<div class="hors-saison-msg">Off season</div>';
    } else if (evts.length === 0) {
      html += '<div class="hors-saison-msg">No tour</div>';
    } else {
      evts.forEach(function(ev) {
        var titre = ev.summary || '';
        var desc  = ev.description || '';
        var lignes = desc.split('\n').filter(function(l) { return l.trim(); });

        var statut = 'dispo';
        if (titre.indexOf('FULL') !== -1) {
          statut = 'complet';
        } else {
          var nag = parseInt((desc.match(/(\d+) swimmer/)    || [0,99])[1]);
          var obs = parseInt((desc.match(/(\d+) non-swimmer/) || [0,99])[1]);
          if (nag === 0 || obs === 0) statut = 'partiel';
          if (nag === 0 && obs === 0) statut = 'complet';
        }

        html += '<div class="evt ' + statut + '">';
        html += '<div class="evt-titre">' + titre + '</div>';
        for (var l = 0; l < Math.min(2, lignes.length); l++) {
          html += '<div class="evt-ligne">' + lignes[l] + '</div>';
        }
        html += '</div>';
      });
    }

    html += '</div></div>';
  }

  document.getElementById('grille').innerHTML = html;
}
</script>
</body>
</html>

Contact form

<h3>Contact us </h3>
<p>Questions? Requests? you would like to book ?</p>
<p>Do not hesitate to contact us.<span style="font-family:inherit;font-weight:inherit">We will come back to you as soon as possible. </span></p>
<p><span style="font-family:inherit;font-weight:inherit">We speak fluently English, French and a little bit of German.</span></p>
<p><a href="mailto:mori.ora47@gmail.com">mori.ora47@gmail.com</a></p>
<p>+689 87 26 80 96 <br />+689 87 32 59 81</p>

name

email

phone

address:country

Anti-spam question TWO TIMES THREE :

What level do you have as a snorkeling swimmer? Beginner (no experience or a few simming with fins ans mask), middle (able to swim 200m with fins and masks in the ocean), advanced (very confortable swimming in the ocean, able to swim long distance as a steady speed)