Merge branch 'main' of github.com:Charles40130/Projet-Dev-Web-Ing1
This commit is contained in:
Charles Mendiburu
commit
0cfd237f07
@ -1,129 +1,852 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from "react";
|
||||||
import { Search, MapPin, Calendar, Bus, ArrowRight, LogIn, UserPlus } from 'lucide-react';
|
import {
|
||||||
|
UserPlus,
|
||||||
|
LogIn,
|
||||||
|
BadgePlus,
|
||||||
|
RadioTower,
|
||||||
|
Search,
|
||||||
|
Cloud,
|
||||||
|
CloudRain,
|
||||||
|
Droplets,
|
||||||
|
Wind,
|
||||||
|
Thermometer,
|
||||||
|
Sun,
|
||||||
|
Moon,
|
||||||
|
MapPin,
|
||||||
|
CalendarClock,
|
||||||
|
ArrowRight,
|
||||||
|
BellRing,
|
||||||
|
LayoutDashboard,
|
||||||
|
TowerControl,
|
||||||
|
} from "lucide-react";
|
||||||
import { useAuth } from "../AuthContext";
|
import { useAuth } from "../AuthContext";
|
||||||
|
|
||||||
|
function EnhancedWeatherHome() {
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [activeFilter, setActiveFilter] = useState("all");
|
||||||
|
const [currentTime, setCurrentTime] = useState(new Date());
|
||||||
|
const { user, token } = useAuth();
|
||||||
|
|
||||||
function Home() {
|
const isDayTime = currentTime.getHours() > 6 && currentTime.getHours() < 20;
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
|
||||||
const [activeFilter, setActiveFilter] = useState('all');
|
useEffect(() => {
|
||||||
const [name, setName] = useState([]);
|
const timer = setInterval(() => {
|
||||||
const { token, logout } = useAuth();
|
setCurrentTime(new Date());
|
||||||
const { user } = useAuth();
|
}, 60000);
|
||||||
|
|
||||||
|
return () => clearInterval(timer);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const formatDate = (date) => {
|
||||||
|
const options = { weekday: "long", day: "numeric", month: "long" };
|
||||||
|
return date.toLocaleDateString("fr-FR", options);
|
||||||
|
};
|
||||||
|
|
||||||
|
const hourlyForecast = [
|
||||||
|
{
|
||||||
|
time: "Maintenant",
|
||||||
|
temp: "21°",
|
||||||
|
icon: <Cloud className="text-indigo-500" size={24} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: "14:00",
|
||||||
|
temp: "22°",
|
||||||
|
icon: <Cloud className="text-indigo-500" size={24} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: "15:00",
|
||||||
|
temp: "22°",
|
||||||
|
icon: <Sun className="text-yellow-500" size={24} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: "16:00",
|
||||||
|
temp: "21°",
|
||||||
|
icon: <Sun className="text-yellow-500" size={24} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: "17:00",
|
||||||
|
temp: "20°",
|
||||||
|
icon: <CloudRain className="text-blue-500" size={24} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: "18:00",
|
||||||
|
temp: "19°",
|
||||||
|
icon: <CloudRain className="text-blue-500" size={24} />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const dailyForecast = [
|
||||||
|
{
|
||||||
|
day: "Lun",
|
||||||
|
temp: "21°/15°",
|
||||||
|
icon: <Cloud className="text-indigo-400" size={32} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
day: "Mar",
|
||||||
|
temp: "23°/16°",
|
||||||
|
icon: <Sun className="text-yellow-500" size={32} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
day: "Mer",
|
||||||
|
temp: "24°/17°",
|
||||||
|
icon: <Sun className="text-yellow-500" size={32} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
day: "Jeu",
|
||||||
|
temp: "22°/16°",
|
||||||
|
icon: <CloudRain className="text-blue-400" size={32} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
day: "Ven",
|
||||||
|
temp: "20°/14°",
|
||||||
|
icon: <CloudRain className="text-blue-400" size={32} />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50">
|
<div
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
className={`min-h-screen ${
|
||||||
<div className="text-center mb-12">
|
isDayTime
|
||||||
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
? "bg-gradient-to-br from-blue-100 to-sky-200"
|
||||||
Bienvenue dans ta ville intelligente.</h2>
|
: "bg-gradient-to-br from-blue-900 to-indigo-900 text-white"
|
||||||
{user ? (
|
}`}
|
||||||
<>
|
>
|
||||||
<h1>Bienvenue, {user.name} {user.surname}!</h1>
|
{" "}
|
||||||
<p>Email : {user.sub}</p>
|
<div className="relative overflow-hidden">
|
||||||
<p>Rôle : {user.role}</p>
|
<div className="absolute inset-0 z-0">
|
||||||
<p>Rôle : {user.id}</p>
|
<div
|
||||||
|
className={`absolute inset-0 ${
|
||||||
|
isDayTime
|
||||||
|
? "bg-gradient-to-r from-yellow-200/20 to-blue-300/30"
|
||||||
|
: "bg-gradient-to-r from-blue-900/50 to-purple-900/60"
|
||||||
|
}`}
|
||||||
|
></div>
|
||||||
|
{isDayTime ? (
|
||||||
|
<>
|
||||||
|
<div className="absolute top-10 right-10 w-32 h-32 rounded-full bg-yellow-300 blur-xl opacity-70 animate-pulse"></div>
|
||||||
|
<div className="absolute -top-10 left-1/4 w-16 h-16 rounded-full bg-white blur-md opacity-30"></div>
|
||||||
|
<div className="absolute top-1/3 left-1/3 w-12 h-12 rounded-full bg-white blur-md opacity-30"></div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="absolute top-10 right-14 w-20 h-20 rounded-full bg-gray-200 blur-lg opacity-70"></div>
|
||||||
|
<div className="absolute top-14 right-10 w-14 h-14 rounded-full bg-gray-900 blur-sm"></div>
|
||||||
|
<div className="absolute top-20 left-1/4 w-2 h-2 rounded-full bg-white blur-none opacity-90"></div>
|
||||||
|
<div className="absolute top-40 left-1/3 w-1 h-1 rounded-full bg-white blur-none opacity-90"></div>
|
||||||
|
<div className="absolute top-14 left-1/2 w-2 h-2 rounded-full bg-white blur-none opacity-90"></div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
</>
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-10">
|
||||||
):(
|
<div className="text-center relative">
|
||||||
<h2>Non connecté</h2>
|
<h1
|
||||||
)}
|
className={`text-5xl font-bold mb-6 ${
|
||||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
isDayTime ? "text-gray-900" : "text-white"
|
||||||
Découvrez tout ce que votre ville a à offrir - des événements locaux aux horaires de transport, le tout en un seul endroit.
|
} animate-fade-in`}
|
||||||
|
>
|
||||||
|
La météo en temps réel
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
className={`text-xl ${
|
||||||
|
isDayTime ? "text-gray-700" : "text-gray-200"
|
||||||
|
} max-w-3xl mx-auto mb-10`}
|
||||||
|
>
|
||||||
|
Prévisions précises et personnalisées pour vous aider à planifier
|
||||||
|
votre journée en toute sérénité.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
|
<div className="max-w-3xl mx-auto relative z-10 mb-16 transition-all duration-300 hover:transform hover:-translate-y-1">
|
||||||
<div className="max-w-3xl mx-auto mb-12">
|
<div className="relative">
|
||||||
<div className="relative">
|
<Search
|
||||||
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" size={24} />
|
className={`absolute left-4 top-1/2 transform -translate-y-1/2 ${
|
||||||
<input
|
isDayTime ? "text-gray-400" : "text-gray-500"
|
||||||
type="text"
|
}`}
|
||||||
placeholder="Search for locations, events, or transport..."
|
size={24}
|
||||||
className="w-full pl-12 pr-4 py-4 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
/>
|
||||||
value={searchQuery}
|
<input
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
type="text"
|
||||||
/>
|
placeholder="Rechercher une ville ou un code postal..."
|
||||||
</div>
|
className={`w-full pl-12 pr-4 py-4 rounded-xl border ${
|
||||||
<div className="flex gap-4 mt-4 justify-center">
|
isDayTime
|
||||||
<button
|
? "border-gray-200 bg-white"
|
||||||
onClick={() => setActiveFilter('all')}
|
: "border-gray-700 bg-gray-800 text-white"
|
||||||
className={`px-4 py-2 rounded-lg ${
|
} focus:outline-none focus:ring-2 focus:ring-indigo-500 shadow-lg`}
|
||||||
activeFilter === 'all' ? 'bg-indigo-600 text-white' : 'bg-white text-gray-600'
|
value={searchQuery}
|
||||||
}`}
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
>
|
/>
|
||||||
All
|
<button className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
|
||||||
</button>
|
Rechercher
|
||||||
<button
|
</button>
|
||||||
onClick={() => setActiveFilter('locations')}
|
|
||||||
className={`px-4 py-2 rounded-lg ${
|
|
||||||
activeFilter === 'locations' ? 'bg-indigo-600 text-white' : 'bg-white text-gray-600'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Locations
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setActiveFilter('events')}
|
|
||||||
className={`px-4 py-2 rounded-lg ${
|
|
||||||
activeFilter === 'events' ? 'bg-indigo-600 text-white' : 'bg-white text-gray-600'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Events
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setActiveFilter('transport')}
|
|
||||||
className={`px-4 py-2 rounded-lg ${
|
|
||||||
activeFilter === 'transport' ? 'bg-indigo-600 text-white' : 'bg-white text-gray-600'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Transport
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Features Grid */}
|
|
||||||
<div className="grid md:grid-cols-3 gap-8">
|
|
||||||
<div className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
|
||||||
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
|
|
||||||
<MapPin className="text-indigo-600" size={24} />
|
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-semibold mb-2">Points d'intérêt</h3>
|
|
||||||
<p className="text-gray-600 mb-4">
|
|
||||||
Découvrez les meilleurs endroits de votre ville, qu'il s'agisse de restaurants, de parcs ou de lieux culturels.
|
|
||||||
</p>
|
|
||||||
<a href="#" className="flex items-center text-indigo-600 hover:text-indigo-700">
|
|
||||||
Explorer les lieux <ArrowRight size={16} className="ml-2" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
|
||||||
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
|
|
||||||
<Calendar className="text-indigo-600" size={24} />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-xl font-semibold mb-2">Evenements locaux</h3>
|
|
||||||
<p className="text-gray-600 mb-4">
|
|
||||||
Restez informé des derniers événements, festivals et rassemblements communautaires dans votre région.
|
|
||||||
</p>
|
|
||||||
<a href="#" className="flex items-center text-indigo-600 hover:text-indigo-700">
|
|
||||||
Voir les événements <ArrowRight size={16} className="ml-2" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
|
||||||
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
|
|
||||||
<Bus className="text-indigo-600" size={24} />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-xl font-semibold mb-2">Transports publics</h3>
|
|
||||||
<p className="text-gray-600 mb-4">
|
|
||||||
Accédez en temps réel aux horaires et aux itinéraires des bus, des trains et des autres transports publics.
|
|
||||||
</p>
|
|
||||||
<a href="#" className="flex items-center text-indigo-600 hover:text-indigo-700">
|
|
||||||
Vérifier les horaires <ArrowRight size={16} className="ml-2" />
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 relative z-10">
|
||||||
|
<div
|
||||||
|
className={`rounded-2xl shadow-xl mb-10 overflow-hidden transition-all duration-300 hover:shadow-2xl ${
|
||||||
|
isDayTime ? "bg-white" : "bg-gray-800"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="p-8">
|
||||||
|
<div className="flex flex-col lg:flex-row justify-between">
|
||||||
|
<div className="mb-6 lg:mb-0">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<MapPin
|
||||||
|
className={`${
|
||||||
|
isDayTime ? "text-indigo-600" : "text-indigo-400"
|
||||||
|
} mr-2`}
|
||||||
|
size={20}
|
||||||
|
/>
|
||||||
|
<h3
|
||||||
|
className={`text-xl font-medium ${
|
||||||
|
isDayTime ? "text-gray-700" : "text-gray-200"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Paris, France
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
className={`text-sm ${
|
||||||
|
isDayTime ? "text-gray-500" : "text-gray-400"
|
||||||
|
} mb-6`}
|
||||||
|
>
|
||||||
|
{formatDate(currentTime)}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center">
|
||||||
|
{isDayTime ? (
|
||||||
|
<Cloud className="text-indigo-500 mr-6" size={64} />
|
||||||
|
) : (
|
||||||
|
<Moon className="text-indigo-300 mr-6" size={64} />
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<h2
|
||||||
|
className={`text-6xl font-bold ${
|
||||||
|
isDayTime ? "text-gray-900" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
21°C
|
||||||
|
</h2>
|
||||||
|
<p
|
||||||
|
className={`text-lg ${
|
||||||
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Partiellement nuageux
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-6">
|
||||||
|
<div
|
||||||
|
className={`rounded-xl p-4 ${
|
||||||
|
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className={`text-sm ${
|
||||||
|
isDayTime ? "text-gray-500" : "text-gray-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Ressenti
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center mt-1">
|
||||||
|
<Thermometer
|
||||||
|
className={`${
|
||||||
|
isDayTime ? "text-red-500" : "text-red-400"
|
||||||
|
} mr-2`}
|
||||||
|
size={18}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className={`text-lg font-medium ${
|
||||||
|
isDayTime ? "text-gray-900" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
23°C
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`rounded-xl p-4 ${
|
||||||
|
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className={`text-sm ${
|
||||||
|
isDayTime ? "text-gray-500" : "text-gray-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Humidité
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center mt-1">
|
||||||
|
<Droplets
|
||||||
|
className={`${
|
||||||
|
isDayTime ? "text-blue-500" : "text-blue-400"
|
||||||
|
} mr-2`}
|
||||||
|
size={18}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className={`text-lg font-medium ${
|
||||||
|
isDayTime ? "text-gray-900" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
68%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`rounded-xl p-4 ${
|
||||||
|
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className={`text-sm ${
|
||||||
|
isDayTime ? "text-gray-500" : "text-gray-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Vent
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center mt-1">
|
||||||
|
<Wind
|
||||||
|
className={`${
|
||||||
|
isDayTime ? "text-blue-500" : "text-blue-400"
|
||||||
|
} mr-2`}
|
||||||
|
size={18}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className={`text-lg font-medium ${
|
||||||
|
isDayTime ? "text-gray-900" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
12 km/h
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`rounded-xl p-4 ${
|
||||||
|
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className={`text-sm ${
|
||||||
|
isDayTime ? "text-gray-500" : "text-gray-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Précipitations
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center mt-1">
|
||||||
|
<CloudRain
|
||||||
|
className={`${
|
||||||
|
isDayTime ? "text-blue-500" : "text-blue-400"
|
||||||
|
} mr-2`}
|
||||||
|
size={18}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className={`text-lg font-medium ${
|
||||||
|
isDayTime ? "text-gray-900" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
30%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`rounded-xl p-4 ${
|
||||||
|
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className={`text-sm ${
|
||||||
|
isDayTime ? "text-gray-500" : "text-gray-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Lever du soleil
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center mt-1">
|
||||||
|
<Sun
|
||||||
|
className={`${
|
||||||
|
isDayTime ? "text-yellow-500" : "text-yellow-400"
|
||||||
|
} mr-2`}
|
||||||
|
size={18}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className={`text-lg font-medium ${
|
||||||
|
isDayTime ? "text-gray-900" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
06:42
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`rounded-xl p-4 ${
|
||||||
|
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className={`text-sm ${
|
||||||
|
isDayTime ? "text-gray-500" : "text-gray-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Coucher du soleil
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center mt-1">
|
||||||
|
<Moon
|
||||||
|
className={`${
|
||||||
|
isDayTime ? "text-indigo-500" : "text-indigo-400"
|
||||||
|
} mr-2`}
|
||||||
|
size={18}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className={`text-lg font-medium ${
|
||||||
|
isDayTime ? "text-gray-900" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
20:51
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`px-8 py-6 ${isDayTime ? "bg-gray-50" : "bg-gray-900"}`}
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
className={`text-lg font-semibold mb-4 ${
|
||||||
|
isDayTime ? "text-gray-800" : "text-gray-200"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Prévisions horaires
|
||||||
|
</h3>
|
||||||
|
<div className="flex overflow-x-auto pb-4 gap-6">
|
||||||
|
{hourlyForecast.map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={`flex-shrink-0 flex flex-col items-center p-4 rounded-lg ${
|
||||||
|
isDayTime ? "bg-white" : "bg-gray-800"
|
||||||
|
} shadow-sm`}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className={`text-sm font-medium ${
|
||||||
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.time}
|
||||||
|
</p>
|
||||||
|
{item.icon}
|
||||||
|
<p
|
||||||
|
className={`text-lg font-bold mt-1 ${
|
||||||
|
isDayTime ? "text-gray-900" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.temp}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`rounded-2xl shadow-xl mb-10 overflow-hidden ${
|
||||||
|
isDayTime ? "bg-white" : "bg-gray-800"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="p-8">
|
||||||
|
<h3
|
||||||
|
className={`text-xl font-semibold mb-6 ${
|
||||||
|
isDayTime ? "text-gray-800" : "text-gray-200"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Prévisions 5 jours
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-6">
|
||||||
|
{dailyForecast.map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={`flex items-center justify-between p-4 rounded-lg ${
|
||||||
|
isDayTime ? "hover:bg-gray-50" : "hover:bg-gray-700"
|
||||||
|
} transition-colors`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span
|
||||||
|
className={`text-lg font-medium w-12 ${
|
||||||
|
isDayTime ? "text-gray-700" : "text-gray-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.day}
|
||||||
|
</span>
|
||||||
|
{item.icon}
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className={`text-lg font-bold ${
|
||||||
|
isDayTime ? "text-gray-800" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.temp}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3
|
||||||
|
className={`text-2xl font-bold mb-6 ${
|
||||||
|
isDayTime ? "text-gray-800" : "text-gray-200"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Services météo
|
||||||
|
</h3>
|
||||||
|
{user?.role === "user" && (
|
||||||
|
<div
|
||||||
|
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
||||||
|
isDayTime ? "bg-white" : "bg-gray-800"
|
||||||
|
} transform hover:-translate-y-1`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`h-32 ${
|
||||||
|
isDayTime
|
||||||
|
? "bg-gradient-to-r from-blue-400 to-indigo-500"
|
||||||
|
: "bg-gradient-to-r from-blue-700 to-indigo-800"
|
||||||
|
} flex items-center justify-center`}
|
||||||
|
>
|
||||||
|
<CalendarClock className="text-white" size={48} />
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<h3
|
||||||
|
className={`text-xl font-semibold mb-2 ${
|
||||||
|
isDayTime ? "text-gray-800" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Visualisation des objets connectés météorologiques
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
className={`${
|
||||||
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||||
|
} mb-4`}
|
||||||
|
>
|
||||||
|
Consultez l'ensemble des objets connectés ainsi que leurs
|
||||||
|
données dans l'ensemble de la France
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="/gestionObjets"
|
||||||
|
className={`flex items-center ${
|
||||||
|
isDayTime
|
||||||
|
? "text-indigo-600 hover:text-indigo-700"
|
||||||
|
: "text-indigo-400 hover:text-indigo-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Voir les objets <ArrowRight size={16} className="ml-2" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!token && (
|
||||||
|
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||||
|
<div
|
||||||
|
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
||||||
|
isDayTime ? "bg-white" : "bg-gray-800"
|
||||||
|
} transform hover:-translate-y-1`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`h-32 ${
|
||||||
|
isDayTime
|
||||||
|
? "bg-gradient-to-r from-blue-400 to-indigo-500"
|
||||||
|
: "bg-gradient-to-r from-blue-700 to-indigo-800"
|
||||||
|
} flex items-center justify-center`}
|
||||||
|
>
|
||||||
|
<UserPlus className="text-white" size={48} />
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<h3
|
||||||
|
className={`text-xl font-semibold mb-2 ${
|
||||||
|
isDayTime ? "text-gray-800" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Inscrivez-vous !{" "}
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
className={`${
|
||||||
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||||
|
} mb-4`}
|
||||||
|
>
|
||||||
|
Avoir un compte sur notre site permet de consulter
|
||||||
|
l'intégralité des objets connectés météorologiques dans
|
||||||
|
l'ensemble de la France
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="/signup"
|
||||||
|
className={`flex items-center ${
|
||||||
|
isDayTime
|
||||||
|
? "text-indigo-600 hover:text-indigo-700"
|
||||||
|
: "text-indigo-400 hover:text-indigo-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
S'inscrire <ArrowRight size={16} className="ml-2" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
||||||
|
isDayTime ? "bg-white" : "bg-gray-800"
|
||||||
|
} transform hover:-translate-y-1`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`h-32 ${
|
||||||
|
isDayTime
|
||||||
|
? "bg-gradient-to-r from-yellow-300 to-orange-400"
|
||||||
|
: "bg-gradient-to-r from-blue-700 to-indigo-800"
|
||||||
|
} flex items-center justify-center`}
|
||||||
|
>
|
||||||
|
<LogIn className="text-white" size={48} />
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<h3
|
||||||
|
className={`text-xl font-semibold mb-2 ${
|
||||||
|
isDayTime ? "text-gray-800" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Connectez-vous !
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
className={`${
|
||||||
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||||
|
} mb-4`}
|
||||||
|
>
|
||||||
|
Heureux de vous retrouver ! Retrouvez votre compte tel que
|
||||||
|
vous l'avez laissez !
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="/login"
|
||||||
|
className={`flex items-center ${
|
||||||
|
isDayTime
|
||||||
|
? "text-indigo-600 hover:text-indigo-700"
|
||||||
|
: "text-indigo-400 hover:text-indigo-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Se connecter <ArrowRight size={16} className="ml-2" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{user?.role === "complexe" && (
|
||||||
|
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||||
|
<div
|
||||||
|
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
||||||
|
isDayTime ? "bg-white" : "bg-gray-800"
|
||||||
|
} transform hover:-translate-y-1`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`h-32 ${
|
||||||
|
isDayTime
|
||||||
|
? "bg-gradient-to-r from-green-400 to-teal-500"
|
||||||
|
: "bg-gradient-to-r from-green-700 to-teal-800"
|
||||||
|
} flex items-center justify-center`}
|
||||||
|
>
|
||||||
|
<RadioTower className="text-white" size={48} />
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<h3
|
||||||
|
className={`text-xl font-semibold mb-2 ${
|
||||||
|
isDayTime ? "text-gray-800" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Consulter les objets connectés météorologiques
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
className={`${
|
||||||
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||||
|
} mb-4`}
|
||||||
|
>
|
||||||
|
Accédez aux données en temps réel des objets connectés
|
||||||
|
météorologiques, modifiez leurs paramètres et consultez
|
||||||
|
l'historique des mesures.{" "}
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="/gestionObjets"
|
||||||
|
className={`flex items-center ${
|
||||||
|
isDayTime
|
||||||
|
? "text-indigo-600 hover:text-indigo-700"
|
||||||
|
: "text-indigo-400 hover:text-indigo-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Explorer les objets <ArrowRight size={16} className="ml-2" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
||||||
|
isDayTime ? "bg-white" : "bg-gray-800"
|
||||||
|
} transform hover:-translate-y-1`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`h-32 ${
|
||||||
|
isDayTime
|
||||||
|
? "bg-gradient-to-r from-red-400 to-orange-500"
|
||||||
|
: "bg-gradient-to-r from-red-700 to-orange-800"
|
||||||
|
} flex items-center justify-center`}
|
||||||
|
>
|
||||||
|
<BadgePlus className="text-white" size={48} />
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<h3
|
||||||
|
className={`text-xl font-semibold mb-2 ${
|
||||||
|
isDayTime ? "text-gray-800" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Ajouter un nouvel objet connecté
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
className={`${
|
||||||
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||||
|
} mb-4`}
|
||||||
|
>
|
||||||
|
Intégrez facilement un nouvel objet connecté en renseignant
|
||||||
|
ses informations et en configurant ses paramètres pour une
|
||||||
|
gestion optimale.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="/ajouterObjet"
|
||||||
|
className={`flex items-center ${
|
||||||
|
isDayTime
|
||||||
|
? "text-indigo-600 hover:text-indigo-700"
|
||||||
|
: "text-indigo-400 hover:text-indigo-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Ajouter un objet{" "}
|
||||||
|
<ArrowRight size={16} className="ml-2" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{user?.role === "admin" && (
|
||||||
|
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||||
|
<div
|
||||||
|
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
||||||
|
isDayTime ? "bg-white" : "bg-gray-800"
|
||||||
|
} transform hover:-translate-y-1`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`h-32 ${
|
||||||
|
isDayTime
|
||||||
|
? "bg-gradient-to-r from-green-400 to-teal-500"
|
||||||
|
: "bg-gradient-to-r from-green-700 to-teal-800"
|
||||||
|
} flex items-center justify-center`}
|
||||||
|
>
|
||||||
|
<TowerControl className="text-white" size={48} />
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<h3
|
||||||
|
className={`text-xl font-semibold mb-2 ${
|
||||||
|
isDayTime ? "text-gray-800" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Accéder au tableau d'Administration
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
className={`${
|
||||||
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||||
|
} mb-4`}
|
||||||
|
>
|
||||||
|
Vous pourrez gérer les utilisateurs du site mais aussi les objets connectés
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="/dashboard"
|
||||||
|
className={`flex items-center ${
|
||||||
|
isDayTime
|
||||||
|
? "text-indigo-600 hover:text-indigo-700"
|
||||||
|
: "text-indigo-400 hover:text-indigo-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Tableau d'Administration <ArrowRight size={16} className="ml-2" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
||||||
|
isDayTime ? "bg-white" : "bg-gray-800"
|
||||||
|
} transform hover:-translate-y-1`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`h-32 ${
|
||||||
|
isDayTime
|
||||||
|
? "bg-gradient-to-r from-red-400 to-orange-500"
|
||||||
|
: "bg-gradient-to-r from-red-700 to-orange-800"
|
||||||
|
} flex items-center justify-center`}
|
||||||
|
>
|
||||||
|
<RadioTower className="text-white" size={48} />
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<h3
|
||||||
|
className={`text-xl font-semibold mb-2 ${
|
||||||
|
isDayTime ? "text-gray-800" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Gestion des objets connectés
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
className={`${
|
||||||
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||||
|
} mb-4`}
|
||||||
|
>
|
||||||
|
Ce module vous permet de gérer les capteurs et stations connectés de France de manière simple et efficace.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="/gestion"
|
||||||
|
className={`flex items-center ${
|
||||||
|
isDayTime
|
||||||
|
? "text-indigo-600 hover:text-indigo-700"
|
||||||
|
: "text-indigo-400 hover:text-indigo-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Gestion des objets{" "}
|
||||||
|
<ArrowRight size={16} className="ml-2" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<footer className={`py-12 ${isDayTime ? "bg-gray-100" : "bg-gray-900"}`}>
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<div className="flex items-center mb-6 md:mb-0">
|
||||||
|
<Cloud
|
||||||
|
className={`${
|
||||||
|
isDayTime ? "text-indigo-600" : "text-indigo-400"
|
||||||
|
} mr-2`}
|
||||||
|
size={24}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className={`text-xl font-bold ${
|
||||||
|
isDayTime ? "text-gray-800" : "text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
VigiMétéo
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`text-sm ${
|
||||||
|
isDayTime ? "text-gray-600" : "text-gray-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
© 2025 VigiMétéo. Tous droits réservés.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Home;
|
export default EnhancedWeatherHome;
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user