feat: Application PWA Compagnon du lagon - Pension Marama
- 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)
This commit is contained in:
28
README.md
28
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
|
||||
|
||||
|
||||
@ -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: () => <div className="h-32 bg-gray-100 rounded-2xl animate-pulse" />,
|
||||
@ -13,6 +14,7 @@ export default function AccueilPage() {
|
||||
<Layout>
|
||||
<div className="px-4 py-6 space-y-6">
|
||||
<header className="text-center py-4">
|
||||
<Logo size={140} className="mb-4" />
|
||||
<h1 className="text-2xl font-bold text-primary mb-2">
|
||||
Ia Ora Na
|
||||
</h1>
|
||||
|
||||
@ -31,8 +31,8 @@ export default function RootLayout({
|
||||
return (
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" href="/icon-192x192.png" />
|
||||
<link rel="icon" href="/logo-relais-marama.png" />
|
||||
<link rel="apple-touch-icon" href="/logo-relais-marama.png" />
|
||||
</head>
|
||||
<body className={inter.className}>
|
||||
{children}
|
||||
|
||||
19
app/page.tsx
19
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 (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<div className="text-center">
|
||||
<p className="text-gray-600">Redirection...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
49
components/Logo.tsx
Normal file
49
components/Logo.tsx
Normal file
@ -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 (
|
||||
<div className={`flex items-center justify-center ${className}`}>
|
||||
<div
|
||||
className="bg-gradient-to-br from-primary/20 to-secondary rounded-full flex flex-col items-center justify-center text-primary font-bold border-2 border-primary/30"
|
||||
style={{ width: size, height: size }}
|
||||
>
|
||||
<span className="text-2xl mb-1">🏝️</span>
|
||||
<span style={{ fontSize: size * 0.2 }}>Relais</span>
|
||||
<span style={{ fontSize: size * 0.15 }}>Marama</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`flex items-center justify-center ${className}`}>
|
||||
<img
|
||||
src="/logo-relais-marama.png"
|
||||
alt="Relais Marama - Fakarava"
|
||||
width={size}
|
||||
height={size}
|
||||
className="object-contain"
|
||||
style={{ maxWidth: `${size}px`, maxHeight: `${size}px` }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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": {
|
||||
|
||||
23
public/LOGO_README.md
Normal file
23
public/LOGO_README.md
Normal file
@ -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`
|
||||
|
||||
Reference in New Issue
Block a user