Ajout Inscription page

Front-end/package-lock.json

@@ -11,7 +11,8 @@
       "dependencies": {
         "lucide-react": "^0.344.0",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^7.4.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.9.1",
@@ -1294,6 +1295,11 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
@@ -1658,6 +1664,14 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2992,6 +3006,44 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.0.tgz",
+      "integrity": "sha512-Y2g5ObjkvX3VFeVt+0CIPuYd9PpgqCslG7ASSIdN73LwA1nNWzcMLaoMRJfP3prZFI92svxFwbn7XkLJ+UPQ6A==",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.4.0.tgz",
+      "integrity": "sha512-VlksBPf3n2bijPvnA7nkTsXxMAKOj+bWp4R9c3i+bnwlSOFAGOkJkKhzy/OsRkWaBMICqcAl1JDzh9ZSOze9CA==",
+      "dependencies": {
+        "react-router": "7.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -3137,6 +3189,11 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3409,6 +3466,11 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "dev": true
     },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g=="
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

Front-end/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "lucide-react": "^0.344.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.1",

Front-end/src/App.jsx

@@ -1,133 +1,44 @@
-import React, { useState } from 'react';
-import { Search, MapPin, Calendar, Bus, ArrowRight, LogIn, UserPlus } from 'lucide-react';
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+import { LogIn, UserPlus } from 'lucide-react';
+import Home from './pages/Home';
+import AdminDashboard from './pages/AdminDashboard';
+import Inscription from './pages/Inscription';
+
 
 function App() {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [activeFilter, setActiveFilter] = useState('all');
-
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50">
-      {/* Header */}
-      <header className="bg-white shadow-sm">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-          <div className="flex justify-between items-center">
-            <h1 className="text-2xl font-bold text-indigo-600">PauCity Connect</h1>
-            <div className="flex gap-4">
-              <button className="flex items-center gap-2 text-gray-600 hover:text-indigo-600">
-                <LogIn size={20} />
-                <span>Connexion</span>
-              </button>
-              <button className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700">
-                <UserPlus size={20} />
-                <span>Inscription</span>
-              </button>
+    <Router>
+      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50">
+        {/* Header */}
+        <header className="bg-white shadow-sm">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+            <div className="flex justify-between items-center">
+              <Link to="/" className="text-2xl font-bold text-indigo-600">Meteo France</Link>
+              <div className="flex gap-4">
+                <Link to="/admin" className="text-indigo-600 hover:text-indigo-700 font-medium">
+                  Admin Dashboard
+                </Link>
+                <button className="flex items-center gap-2 text-gray-600 hover:text-indigo-600">
+                  <LogIn size={20} />
+                  <span>Login</span>
+                </button>
+                <Link to="/inscription" className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700">
+                  <UserPlus size={20} />
+                  <span>Sign Up</span>
+                </Link>
+              </div>
             </div>
           </div>
-        </div>
-      </header>
+        </header>
 
-      {/* Hero Section */}
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <div className="text-center mb-12">
-          <h2 className="text-4xl font-bold text-gray-900 mb-4">
-            Bienvenue dans ta ville intelligente.
-          </h2>
-          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
-          Découvrez tout ce que votre ville a à offrir - des événements locaux aux horaires de transport, le tout en un seul endroit.
-          </p>
-        </div>
-
-        {/* Search Section */}
-        <div className="max-w-3xl mx-auto mb-12">
-          <div className="relative">
-            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" size={24} />
-            <input
-              type="text"
-              placeholder="Search for locations, events, or transport..."
-              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}
-              onChange={(e) => setSearchQuery(e.target.value)}
-            />
-          </div>
-          <div className="flex gap-4 mt-4 justify-center">
-            <button
-              onClick={() => setActiveFilter('all')}
-              className={`px-4 py-2 rounded-lg ${
-                activeFilter === 'all' ? 'bg-indigo-600 text-white' : 'bg-white text-gray-600'
-              }`}
-            >
-              All
-            </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>
-            <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>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/admin" element={<AdminDashboard />} />
+          <Route path="/inscription" element={<Inscription/>}/>
+        </Routes>
       </div>
-    </div>
+    </Router>
   );
 }
 

Front-end/src/pages/AdminDashboard.jsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { Calendar, Settings, LayoutDashboard } from "lucide-react";
+
+function AdminDashboard() {
+
+    const [activeTab, setActiveTab] = useState('dashboard'); 
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      {/* SideMenu */}
+      <div className="w-64 bg-white rounded-lg shadow-sm p-4">
+        <h2 className="text-lg font-semibold text-gray-800 mb-4">
+          Administration
+        </h2>
+        <nav className="flex flex-col space-y-2">
+        <button
+              onClick={() => setActiveTab('events')}
+              className={`w-full flex items-center gap-2 px-4 py-2 rounded-lg ${
+                activeTab === 'events'
+                  ? 'bg-red-50 text-red-600'
+                  : 'text-gray-600 hover:bg-gray-50'
+              }`}
+            >
+              <Calendar size={20} />
+              Events
+            </button>
+
+          <button onClick="" className="">
+            <LayoutDashboard size="15" />
+            Layout
+          </button>
+
+          <button onClick="">
+            <Settings size="15" />
+            Settings
+          </button>
+        </nav>
+        <h2>Test</h2>
+      </div>
+    </div>
+  );
+}
+
+export default AdminDashboard;

Front-end/src/pages/Home.jsx

@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+import { Search, MapPin, Calendar, Bus, ArrowRight } from 'lucide-react';
+
+function Home() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeFilter, setActiveFilter] = useState('all');
+
+  return (
+
+    <div>Home
+    </div>
+  )
+}
+
+export default Home;

Front-end/src/pages/Inscription.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+function Inscription() {
+  return (
+    <div className="w-96 bg-white rounded-lg shadow-sm p-4 mx-auto text-center mt-8">
+      <h2 className="text-lg font-semibold text-gray-800 mb-4">Inscription</h2>
+      <form className="flex flex-col gap-2">
+        <label className="block">
+          Nom:
+          <input
+            className="rounded-sm border-indigo-200"
+            ype="text"
+            name="name"
+          />
+        </label>
+        <label className="block">
+          Prénom:
+          <input type="text" name="surname" />
+        </label>
+        <label>
+          Email:
+          <input type="email" name="email" />
+        </label>
+        <label>
+          Sexe:
+          <label for="homme">Homme</label>
+          <input type="radio" name="sexe" />
+          <label for="femme">Femme</label>
+          <input type="radio" name="sexe" />
+        </label>
+      </form>
+    </div>
+  );
+}
+
+export default Inscription;

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "Projet-Dev-Web-Ing1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}