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` +