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>

<script>
var API_KEY  = 'AIzaSyCUVPgxuIEZgZAoD6u4KVbvsbG1BUvFTZA';
var CAL_ID   = '2b0d13e3aae1ebfdf39f40dadc21b432b0cf9d9e740258d943fba3bc227193a6@group.calendar.google.com';

/* ─────────────────────────────────────────────────────────────
   FIX TIMEZONE (identique au widget FR morioramoorea.com)
   Tout le widget raisonne en "dates Tahiti sous forme de chaînes"
   (YYYY-MM-DD), jamais en objets Date reconvertis dans le fuseau
   du visiteur. C'est CE qui manquait ici : l'ancienne version
   faisait new Date(...).getDate(), qui renvoyait le jour dans le
   fuseau du visiteur (ex : Italie UTC+2) → décalage de l'après-midi.
   ───────────────────────────────────────────────────────────── */

// Date du jour À TAHITI, "YYYY-MM-DD", peu importe où est le visiteur.
function aujourdTahitiStr() {
  // en-CA donne nativement le format YYYY-MM-DD
  return new Date().toLocaleDateString('en-CA', { timeZone: 'Pacific/Tahiti' });
}

// Clé "YYYY-MM-DD" depuis année/mois/jour (mois 0-indexé)
function clePourYMD(y, m, d) {
  var mm = String(m + 1).padStart(2, '0');
  var dd = String(d).padStart(2, '0');
  return y + '-' + mm + '-' + dd;
}

// Ajoute n jours à une clé "YYYY-MM-DD" SANS Date local
// (Date à midi UTC pour éviter tout glissement de jour, relecture en UTC).
function ajouterJours(cle, n) {
  var parts = cle.split('-').map(Number);
  var d = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2], 12, 0, 0));
  d.setUTCDate(d.getUTCDate() + n);
  return clePourYMD(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
}

function compareCles(a, b) {
  return a < b ? -1 : (a > b ? 1 : 0);
}

// Lundi de la semaine contenant la clé donnée
function getLundiCle(cle) {
  var parts = cle.split('-').map(Number);
  var d = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2], 12, 0, 0));
  var jour = d.getUTCDay(); // 0 = dimanche
  var diff = (jour === 0) ? -6 : 1 - jour;
  d.setUTCDate(d.getUTCDate() + diff);
  return clePourYMD(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
}

// Affichage lisible "August 27" (+ année optionnelle) depuis une clé
var NOMS_MOIS = ['January','February','March','April','May','June','July','August','September','October','November','December'];
function formatLisible(cle, avecAnnee) {
  var parts = cle.split('-').map(Number);
  var jour  = parts[2];
  var mois  = NOMS_MOIS[parts[1] - 1];
  return mois + ' ' + jour + (avecAnnee ? ', ' + parts[0] : '');
}

var ANNEE_REF        = Number(aujourdTahitiStr().split('-')[0]);
var SAISON_DEBUT_CLE = clePourYMD(ANNEE_REF, 6, 20);  // 20 juillet
var SAISON_FIN_CLE   = clePourYMD(ANNEE_REF, 10, 20); // 20 novembre

var lundiCourantCle = getLundiCle(aujourdTahitiStr());

var picker = document.getElementById('datePicker');
picker.min = SAISON_DEBUT_CLE;
picker.max = SAISON_FIN_CLE;

afficherSemaine();

function changerSemaine(delta) {
  lundiCourantCle = ajouterJours(lundiCourantCle, delta * 7);
  afficherSemaine();
}

function allerAujourd() {
  lundiCourantCle = getLundiCle(aujourdTahitiStr());
  document.getElementById('datePicker').value = '';
  afficherSemaine();
}

function allerADate(valeur) {
  if (!valeur) return;
  lundiCourantCle = getLundiCle(valeur); // <input type="date"> renvoie déjà "YYYY-MM-DD"
  afficherSemaine();
}

function afficherSemaine() {
  var lundiCle    = lundiCourantCle;
  var dimancheCle = ajouterJours(lundiCle, 6);

  var label = formatLisible(lundiCle, false) + ' – ' + formatLisible(dimancheCle, true);
  document.getElementById('labelSemaine').textContent = label;

  document.getElementById('btnPrev').disabled =
    compareCles(ajouterJours(lundiCle, -7), SAISON_FIN_CLE) > 0 ||
    compareCles(dimancheCle, SAISON_DEBUT_CLE) < 0;

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

  // Bornes API en heure Tahiti (-10:00), marge d'1 jour à droite,
  // puis on filtre nous-mêmes par clé de date Tahiti dans renderSemaine().
  var timeMin = lundiCle + 'T00:00:00-10:00';
  var timeMax = ajouterJours(dimancheCle, 1) + 'T00:00:00-10:00';

  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(lundiCle, data.items || []); })
    .catch(function() {
      document.getElementById('grille').innerHTML =
        '<div class="loading-wrap">❌ Unable to load availability.</div>';
    });
}

function renderSemaine(lundiCle, events) {
  var parJour = {};

  events.forEach(function(ev) {
    var brut = ev.start.dateTime || ev.start.date;
    // FIX : on lit la date Tahiti directement dans la chaîne ISO
    // (10 premiers caractères "YYYY-MM-DD"), jamais via un objet Date
    // qui serait réinterprété dans le fuseau du visiteur.
    var key = brut.substring(0, 10);
    if (!parJour[key]) parJour[key] = [];
    parJour[key].push(ev);
  });

  // Tri explicite Matin avant Après-midi (via la chaîne ISO, pas un Date)
  Object.keys(parJour).forEach(function(key) {
    parJour[key].sort(function(a, b) {
      var ta = (a.start.dateTime || a.start.date);
      var tb = (b.start.dateTime || b.start.date);
      return ta < tb ? -1 : (ta > tb ? 1 : 0);
    });
  });

  var jours      = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  var aujourdCle = aujourdTahitiStr();
  var html       = '';

  for (var i = 0; i < 7; i++) {
    var cle        = ajouterJours(lundiCle, i);
    var evts       = parJour[cle] || [];
    var estAujourd = cle === aujourdCle;
    var horsSaison = compareCles(cle, SAISON_DEBUT_CLE) < 0 || compareCles(cle, SAISON_FIN_CLE) > 0;
    var entCls     = horsSaison ? 'hors-saison' : (estAujourd ? 'aujourd-hui' : '');
    var jourNum    = Number(cle.split('-')[2]);

    html += '<div class="jour-carte">';
    html += '<div class="jour-entete ' + entCls + '">';
    html += '<div class="jour-nom">' + jours[i] + '</div>';
    html += '<div class="jour-num">' + jourNum + '</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 22 33 42</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)