Restructuration majeure du projet: migration de flutt vers app, ajout de l'API et mise à jour du site web
This commit is contained in:
d6soft
@@ -1,47 +1,148 @@
|
||||
<script>import "./app.css";
|
||||
import svelteLogo from './assets/svelte.svg'
|
||||
import viteLogo from '/vite.svg'
|
||||
import Counter from './lib/Counter.svelte'</script>
|
||||
<script>
|
||||
import { onMount, tick } from 'svelte';
|
||||
import './app.css';
|
||||
|
||||
<main>
|
||||
<div>
|
||||
<a href="https://vite.dev" target="_blank" rel="noreferrer">
|
||||
<img src="{viteLogo}" class="logo" alt="Vite Logo" />
|
||||
</a>
|
||||
<a href="https://svelte.dev" target="_blank" rel="noreferrer">
|
||||
<img src="{svelteLogo}" class="logo svelte" alt="Svelte Logo" />
|
||||
</a>
|
||||
// Importer les composants communs
|
||||
import Header from './components/Header.svelte';
|
||||
import Footer from './components/Footer.svelte';
|
||||
import CookieConsent from './components/CookieConsent.svelte';
|
||||
import { hasUserMadeCookieChoice, startAnonymousTracking, stopAnonymousTracking } from './lib/cookieService.js';
|
||||
import { trackPageView } from './lib/analyticsService.js';
|
||||
|
||||
// Importer les pages
|
||||
import Accueil from './pages/Accueil.svelte';
|
||||
import Fonctionnalites from './pages/Fonctionnalites.svelte';
|
||||
import Contact from './pages/Contact.svelte';
|
||||
import PolitiqueConfidentialite from './pages/PolitiqueConfidentialite.svelte';
|
||||
import ConditionsUtilisation from './pages/ConditionsUtilisation.svelte';
|
||||
import MentionsLegales from './pages/MentionsLegales.svelte';
|
||||
|
||||
// État pour la page active
|
||||
let activePage = 'accueil';
|
||||
|
||||
// État pour la modal des cookies
|
||||
let showCookieConsent = false;
|
||||
|
||||
// Fonction pour gérer le changement de page basé sur le pathname
|
||||
function handleRouteChange() {
|
||||
// Extraire le pathname sans le premier slash
|
||||
const path = window.location.pathname.slice(1) || 'accueil';
|
||||
activePage = path || 'accueil';
|
||||
|
||||
// Suivre la page vue si l'utilisateur a accepté les cookies
|
||||
trackPageView(activePage);
|
||||
}
|
||||
|
||||
// Gérer le consentement aux cookies
|
||||
function handleCookieConsent(event) {
|
||||
if (event.detail.accepted) {
|
||||
startAnonymousTracking();
|
||||
} else {
|
||||
stopAnonymousTracking();
|
||||
}
|
||||
showCookieConsent = false;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
// Initialiser la page active au chargement
|
||||
handleRouteChange();
|
||||
|
||||
// Configurer le gestionnaire de navigation pour écouter les clics sur les liens
|
||||
// et intercepter la navigation
|
||||
document.addEventListener('click', (e) => {
|
||||
// Trouver le plus proche élément <a> depuis la cible du clic
|
||||
const link = e.target.closest('a');
|
||||
|
||||
// Si nous n'avons pas de lien ou si le lien est externe ou a un attribut target,
|
||||
// laisser le navigateur gérer normalement
|
||||
if (!link || !link.href.startsWith(window.location.origin) ||
|
||||
link.target || link.hasAttribute('download') ||
|
||||
link.getAttribute('rel') === 'external') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Empêcher le comportement par défaut (navigation du navigateur)
|
||||
e.preventDefault();
|
||||
|
||||
// Extraire le chemin relatif de l'URL
|
||||
const url = new URL(link.href);
|
||||
const path = url.pathname;
|
||||
|
||||
// Mettre à jour l'historique du navigateur sans recharger la page
|
||||
window.history.pushState({}, '', path);
|
||||
|
||||
// Mettre à jour la page active
|
||||
const pagePath = path.slice(1) || 'accueil';
|
||||
activePage = pagePath;
|
||||
|
||||
// Suivre la page vue si l'utilisateur a accepté les cookies
|
||||
trackPageView(activePage);
|
||||
});
|
||||
|
||||
// Écouter les événements popstate (boutons retour/avant du navigateur)
|
||||
window.addEventListener('popstate', handleRouteChange);
|
||||
|
||||
// Vérifier si l'utilisateur a déjà fait un choix pour les cookies
|
||||
// Permettre au DOM de se charger complètement avant d'afficher la modale
|
||||
await tick();
|
||||
|
||||
// Si l'utilisateur n'a pas encore fait de choix, afficher la modal
|
||||
if (!hasUserMadeCookieChoice()) {
|
||||
showCookieConsent = true;
|
||||
} else {
|
||||
// Si l'utilisateur a déjà accepté, démarrer le suivi
|
||||
startAnonymousTracking();
|
||||
// Si l'utilisateur a déjà refusé, s'assurer que le suivi est désactivé
|
||||
stopAnonymousTracking();
|
||||
}
|
||||
|
||||
// Nettoyer les écouteurs d'événement lors du démontage
|
||||
return () => {
|
||||
window.removeEventListener('popstate', handleRouteChange);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="fixed inset-0 bg-gradient-to-t from-blue-900 to-white z-[-20]">
|
||||
<div class="absolute inset-0 z-[-10]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
|
||||
<pattern id="pattern-circles" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
|
||||
<circle id="pattern-circle" cx="10" cy="10" r="5" fill="#FFF" opacity="0.1"></circle>
|
||||
</pattern>
|
||||
<rect id="rect" x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)"></rect>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>Vite + Svelte</h1>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<Counter></Counter>
|
||||
<main class="flex flex-col min-h-screen relative" class:blur-effect={showCookieConsent}>
|
||||
<Header />
|
||||
|
||||
<div class="flex-grow">
|
||||
{#if activePage === 'accueil'}
|
||||
<Accueil />
|
||||
{:else if activePage === 'fonctionnalites'}
|
||||
<Fonctionnalites />
|
||||
{:else if activePage === 'contact'}
|
||||
<Contact />
|
||||
{:else if activePage === 'politique-confidentialite'}
|
||||
<PolitiqueConfidentialite />
|
||||
{:else if activePage === 'conditions-utilisation'}
|
||||
<ConditionsUtilisation />
|
||||
{:else if activePage === 'mentions-legales'}
|
||||
<MentionsLegales />
|
||||
{:else}
|
||||
<!-- Page 404 simple -->
|
||||
<div class="container mx-auto px-4 py-16 text-center">
|
||||
<h1 class="text-4xl font-bold mb-4">Page non trouvée</h1>
|
||||
<p class="mb-8">La page que vous recherchez n'existe pas.</p>
|
||||
<a href="/accueil" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Retour à l'accueil </a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
|
||||
</p>
|
||||
|
||||
<p class="read-the-docs">
|
||||
Click on the Vite and Svelte logos to learn more
|
||||
</p>
|
||||
<Footer />
|
||||
</main>
|
||||
|
||||
|
||||
<style>
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.svelte:hover {
|
||||
filter: drop-shadow(0 0 2em #ff3e00aa);
|
||||
}
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
{#if showCookieConsent}
|
||||
<CookieConsent on:consent={handleCookieConsent} />
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user