930ce340a8
User didn't like the cloud look. Roll the button back to the gold
pill from c52ac51 (gold gradient, shine sweep, pulse halo, mouse
parallax tilt). Keep the parachute video swap, just restore the CTA
styling.
Drop assets/cloud.png — no longer referenced.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
104 lines
3.9 KiB
HTML
104 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MVA Global Fret — Bienvenue</title>
|
|
<meta name="description" content="MVA Global Fret — Le pont aérien entre Paris et Antananarivo.">
|
|
<link rel="icon" type="image/png" href="PNG MVA GLOBAL FRET.png">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
<link rel="stylesheet" href="css/parallax.css">
|
|
</head>
|
|
<body class="parallax-body">
|
|
|
|
<header class="parallax-header">
|
|
<div class="parallax-logo" aria-label="MVA Global Fret">
|
|
<img src="PNG MVA GLOBAL FRET.png" alt="MVA Global Fret">
|
|
<span>MVA Global Fret</span>
|
|
</div>
|
|
<div class="lang-switcher" role="group" aria-label="Choisir la langue">
|
|
<button data-lang="fr" class="active">FR</button>
|
|
<button data-lang="en">EN</button>
|
|
<button data-lang="mg">MG</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="stage">
|
|
|
|
<video class="layer layer-video" id="introVideo"
|
|
autoplay loop muted playsinline preload="auto"
|
|
poster="videos/parachute-poster.jpg">
|
|
<source src="videos/parachute-drop.mp4" type="video/mp4">
|
|
</video>
|
|
|
|
<div class="layer layer-tint"></div>
|
|
|
|
<a href="accueil.html" class="cta-btn">
|
|
<span class="cta-btn-shine"></span>
|
|
<span data-i18n="intro.ctaBtn">Accéder au site</span>
|
|
<i class="fa-solid fa-arrow-right"></i>
|
|
</a>
|
|
|
|
</main>
|
|
|
|
<script src="js/translations.js"></script>
|
|
<script>
|
|
/* i18n minimal ------------------------------------------------------- */
|
|
(function () {
|
|
const lang = localStorage.getItem('mva-lang') || 'fr';
|
|
applyLang(lang);
|
|
document.querySelectorAll('.lang-switcher button').forEach(btn => {
|
|
btn.addEventListener('click', () => applyLang(btn.dataset.lang));
|
|
});
|
|
function applyLang(l) {
|
|
document.documentElement.lang = l;
|
|
localStorage.setItem('mva-lang', l);
|
|
document.querySelectorAll('.lang-switcher button').forEach(b =>
|
|
b.classList.toggle('active', b.dataset.lang === l)
|
|
);
|
|
const t = window.translations?.[l];
|
|
if (!t) return;
|
|
document.querySelectorAll('[data-i18n]').forEach(el => {
|
|
const keys = el.dataset.i18n.split('.');
|
|
let v = t;
|
|
for (const k of keys) v = v?.[k];
|
|
if (v != null) el.textContent = v;
|
|
});
|
|
}
|
|
})();
|
|
|
|
/* Parallaxe souris : la vidéo et le bouton se décalent légèrement.
|
|
--mx, --my sont des floats dans [-1, +1] mappés sur la position
|
|
souris, avec easing. Sur mobile, on utilise l'orientation du device. */
|
|
(function () {
|
|
const root = document.documentElement;
|
|
let targetX = 0, targetY = 0, currentX = 0, currentY = 0;
|
|
const ease = 0.08;
|
|
|
|
function loop() {
|
|
currentX += (targetX - currentX) * ease;
|
|
currentY += (targetY - currentY) * ease;
|
|
root.style.setProperty('--mx', currentX.toFixed(4));
|
|
root.style.setProperty('--my', currentY.toFixed(4));
|
|
requestAnimationFrame(loop);
|
|
}
|
|
loop();
|
|
|
|
window.addEventListener('mousemove', (e) => {
|
|
targetX = (e.clientX / window.innerWidth - 0.5) * 2;
|
|
targetY = (e.clientY / window.innerHeight - 0.5) * 2;
|
|
}, { passive: true });
|
|
|
|
window.addEventListener('deviceorientation', (e) => {
|
|
if (e.gamma == null || e.beta == null) return;
|
|
targetX = Math.max(-1, Math.min(1, e.gamma / 30));
|
|
targetY = Math.max(-1, Math.min(1, (e.beta - 45) / 30));
|
|
}, { passive: true });
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|