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
|
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
|
### Docker
|
||||||
|
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import dynamic from "next/dynamic";
|
|||||||
import Layout from "@/components/layout/Layout";
|
import Layout from "@/components/layout/Layout";
|
||||||
import { config } from "@/lib/config";
|
import { config } from "@/lib/config";
|
||||||
import WifiCard from "@/components/accueil/WifiCard";
|
import WifiCard from "@/components/accueil/WifiCard";
|
||||||
|
import Logo from "@/components/Logo";
|
||||||
|
|
||||||
const WeatherWidget = dynamic(() => import("@/components/accueil/WeatherWidget"), {
|
const WeatherWidget = dynamic(() => import("@/components/accueil/WeatherWidget"), {
|
||||||
loading: () => <div className="h-32 bg-gray-100 rounded-2xl animate-pulse" />,
|
loading: () => <div className="h-32 bg-gray-100 rounded-2xl animate-pulse" />,
|
||||||
@ -13,6 +14,7 @@ export default function AccueilPage() {
|
|||||||
<Layout>
|
<Layout>
|
||||||
<div className="px-4 py-6 space-y-6">
|
<div className="px-4 py-6 space-y-6">
|
||||||
<header className="text-center py-4">
|
<header className="text-center py-4">
|
||||||
|
<Logo size={140} className="mb-4" />
|
||||||
<h1 className="text-2xl font-bold text-primary mb-2">
|
<h1 className="text-2xl font-bold text-primary mb-2">
|
||||||
Ia Ora Na
|
Ia Ora Na
|
||||||
</h1>
|
</h1>
|
||||||
|
|||||||
@ -31,8 +31,8 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/logo-relais-marama.png" />
|
||||||
<link rel="apple-touch-icon" href="/icon-192x192.png" />
|
<link rel="apple-touch-icon" href="/logo-relais-marama.png" />
|
||||||
</head>
|
</head>
|
||||||
<body className={inter.className}>
|
<body className={inter.className}>
|
||||||
{children}
|
{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() {
|
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",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev -H 0.0.0.0",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start",
|
"start": "next start -H 0.0.0.0",
|
||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"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