From f3a8d26bd07d5e895ab236186289127a8b95d491 Mon Sep 17 00:00:00 2001 From: syoul Date: Sun, 23 Nov 2025 08:14:22 +0100 Subject: [PATCH] feat: Application PWA Compagnon du lagon - Pension Marama MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Configuration Next.js 14 avec TypeScript et Tailwind CSS - Navigation mobile avec 4 onglets (Accueil, Explorer, Mana Tracker, Infos) - Page Accueil: WiFi card, widget météo, message gérant - Page Explorer: Lieux de Fakarava (plages, restaurants, épiceries) avec Google Maps - Page Mana Tracker: Marées, lever/coucher soleil, réservations excursions, notifications push - Page Infos Pratiques: FAQ par thèmes, lexique tahitien, section contact - PWA complète: manifest, service worker, cache offline - Design Tropical Chic: palette bleu lagon (#0E7490), vert citron (#ECFCCB) - Configuration Docker pour déploiement - Données spécifiques à Fakarava intégrées - Logo Relais Marama intégré - Serveur configuré pour accès réseau local (mobile) --- README.md | 28 ++++++++++++++++++++++++- app/accueil/page.tsx | 2 ++ app/layout.tsx | 4 ++-- app/page.tsx | 19 +++++++++++++++-- components/Logo.tsx | 49 +++++++++++++++++++++++++++++++++++++++++++ package.json | 4 ++-- public/LOGO_README.md | 23 ++++++++++++++++++++ 7 files changed, 122 insertions(+), 7 deletions(-) create mode 100644 components/Logo.tsx create mode 100644 public/LOGO_README.md diff --git a/README.md b/README.md index 6ec405b..828b86b 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,33 @@ cp env.example .env.local npm run dev ``` -L'application sera accessible sur [http://localhost:3000](http://localhost:3000) +L'application sera accessible sur : +- **Local** : [http://localhost:3000](http://localhost:3000) +- **Réseau local** : http://VOTRE_IP:3000 (voir ci-dessous) + +### Tester sur un appareil mobile + +Le serveur est configuré pour être accessible depuis votre réseau local. + +1. **Trouver votre adresse IP locale** : + ```bash + hostname -I + ``` + Ou regardez dans les paramètres réseau de votre système. + +2. **Sur votre mobile** (connecté au même Wi-Fi) : + - Ouvrez le navigateur (Chrome, Safari, etc.) + - Allez à : `http://VOTRE_IP:3000` + - Exemple : `http://192.168.1.100:3000` + +3. **Tester la PWA** : + - Dans Chrome mobile : Menu (⋮) → "Ajouter à l'écran d'accueil" + - Dans Safari iOS : Partager → "Sur l'écran d'accueil" + - L'app s'ouvrira comme une application native + +4. **Mode développeur du navigateur** (alternative) : + - Sur PC : `F12` → Toggle device toolbar (`Ctrl+Shift+M`) + - Permet de simuler différents appareils mobiles ### Docker diff --git a/app/accueil/page.tsx b/app/accueil/page.tsx index 2c5e41c..e9de1f1 100644 --- a/app/accueil/page.tsx +++ b/app/accueil/page.tsx @@ -2,6 +2,7 @@ import dynamic from "next/dynamic"; import Layout from "@/components/layout/Layout"; import { config } from "@/lib/config"; import WifiCard from "@/components/accueil/WifiCard"; +import Logo from "@/components/Logo"; const WeatherWidget = dynamic(() => import("@/components/accueil/WeatherWidget"), { loading: () =>
, @@ -13,6 +14,7 @@ export default function AccueilPage() {
+

Ia Ora Na

diff --git a/app/layout.tsx b/app/layout.tsx index 283f242..3552348 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -31,8 +31,8 @@ export default function RootLayout({ return ( - - + + {children} diff --git a/app/page.tsx b/app/page.tsx index 28a86cb..8b0f874 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,6 +1,21 @@ -import { redirect } from "next/navigation"; +"use client"; + +import { useEffect } from "react"; +import { useRouter } from "next/navigation"; export default function Home() { - redirect("/accueil"); + const router = useRouter(); + + useEffect(() => { + router.replace("/accueil"); + }, [router]); + + return ( +
+
+

Redirection...

+
+
+ ); } diff --git a/components/Logo.tsx b/components/Logo.tsx new file mode 100644 index 0000000..758bc54 --- /dev/null +++ b/components/Logo.tsx @@ -0,0 +1,49 @@ +"use client"; + +import { useState, useEffect } from "react"; + +interface LogoProps { + size?: number; + className?: string; +} + +export default function Logo({ size = 120, className = "" }: LogoProps) { + const [imageError, setImageError] = useState(false); + const [imageLoaded, setImageLoaded] = useState(false); + + useEffect(() => { + const img = new window.Image(); + img.onload = () => setImageLoaded(true); + img.onerror = () => setImageError(true); + img.src = "/logo-relais-marama.png"; + }, []); + + if (imageError || !imageLoaded) { + return ( +
+
+ 🏝️ + Relais + Marama +
+
+ ); + } + + return ( +
+ Relais Marama - Fakarava +
+ ); +} + diff --git a/package.json b/package.json index 1df6c3e..c4eead3 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,9 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev", + "dev": "next dev -H 0.0.0.0", "build": "next build", - "start": "next start", + "start": "next start -H 0.0.0.0", "lint": "next lint" }, "dependencies": { diff --git a/public/LOGO_README.md b/public/LOGO_README.md new file mode 100644 index 0000000..f5be244 --- /dev/null +++ b/public/LOGO_README.md @@ -0,0 +1,23 @@ +# Logo Relais Marama + +Pour intégrer le logo dans l'application, placez l'image du logo dans ce dossier (`public/`) avec le nom : + +**`logo-relais-marama.png`** + +## Format recommandé + +- Format : PNG (avec transparence si possible) +- Taille : 512x512 pixels minimum (pour une bonne qualité) +- Nom du fichier : `logo-relais-marama.png` + +## Emplacements où le logo apparaîtra + +1. **Page d'accueil** : En haut, centré, avant le message de bienvenue +2. **Favicon** : Peut être utilisé comme icône de l'application (optionnel) + +## Note + +Si vous souhaitez utiliser le logo comme favicon, vous pouvez également : +- Créer une version 32x32 pixels nommée `favicon.ico` +- Ou mettre à jour le lien dans `app/layout.tsx` pour pointer vers `/logo-relais-marama.png` +