borcsokistvanmilan/PeePal
1
0
Fork 0
forked from magonysandormate/PeePal
Code Pull Requests Activity

Frontend hozzáadva

Browse Source
This commit is contained in:
Sándor Máté Magony
2025-03-25 09:51:14 +01:00
parent 8fb5e07573
commit 6c12240c6c
30 changed files with 18263 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend

Submodule frontend deleted from 4c60078551

29
frontend/peepal_react/src/WC_Komponens/Bejel_Regisz/Bejelentkezes.jsx Normal file
View File

@@ -0,0 +1,29 @@
export default function Bejelentkezes() {
return (
<div className="flex justify-center items-center min-h-screen bg-gray-100">
<form className="bg-white p-6 rounded-lg shadow-lg w-80 space-y-4">
<h2 className="text-2xl font-bold text-center">Bejelentkezés</h2>
<input
type="text"
placeholder="Felhasználónév"
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<input
type="password"
placeholder="Jelszó"
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
type="submit"
className="w-full bg-yellow-600 text-white py-2 rounded-lg hover:bg-yellow-700 transition"
>
Bejelentkezés
</button>
</form>
</div>
);
}

52
frontend/peepal_react/src/WC_Komponens/Bejel_Regisz/Regisztracio.jsx Normal file
View File

@@ -0,0 +1,52 @@
export default function Regisztracio() {
return (
<div className="flex justify-center items-center min-h-screen bg-gray-100">
<form className="bg-white p-6 rounded-lg shadow-lg w-96 space-y-4">
<h2 className="text-2xl font-bold text-center">Regisztráció</h2>
<label className="block text-gray-700">Név:</label>
<input
type="text"
placeholder="Név"
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<label className="block text-gray-700">E-mail cím:</label>
<input
type="email"
placeholder="E-mail cím"
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<label className="block text-gray-700">Felhasználónév:</label>
<input
type="text"
placeholder="Felhasználónév"
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<label className="block text-gray-700">Jelszó:</label>
<input
type="password"
placeholder="Jelszó"
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<label className="block text-gray-700">Jelszó újra:</label>
<input
type="password"
placeholder="Jelszó újra"
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
type="submit"
className="w-full bg-yellow-600 text-white py-2 rounded-lg hover:bg-yellow-700 transition"
>
Regisztráció
</button>
</form>
</div>
);
}

69
frontend/peepal_react/src/WC_Komponens/Budi_Blokk/Csempe.jsx Normal file
View File

@@ -0,0 +1,69 @@
import React, { useState, useEffect } from "react";
import { mosdokFetch } from "../../apiFetch";
export default function Csempe() {
const [mosdok, setMosdok] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const getData = async () => {
setLoading(true);
setError(null);
const data = await mosdokFetch();
if (data) {
setMosdok(data);
} else {
setError("Nem sikerült betölteni az adatokat.");
}
setLoading(false);
};
getData();
}, []);
if (loading) {
return(
<div className="flex justify-center items-center h-32">
<div className="w-12 h-12 border-4 border-gray-300 border-t-yellow-500 rounded-full animate-spin"></div>
</div>
);
}
if (error) {
return <div className="text-center text-red-600 p-4">{error}</div>;
}
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-4">
{mosdok.map((mosdo, index) => (
<div key={index} className="bg-white shadow-lg rounded-xl p-6 border border-gray-200 relative">
<h1 className="text-xl font-semibold text-gray-800 mb-3">{mosdo.nev}</h1>
<div className="text-gray-600 space-y-1">
<p><span className="font-medium text-gray-800">Kerület:</span> {mosdo.kerulet}</p>
<p><span className="font-medium text-gray-800">Legközelebbi megálló:</span> {mosdo.kozeli_megall}</p>
<p><span className="font-medium text-gray-800">Ár:</span> {mosdo.ar} Ft</p>
<p><span className="font-medium text-gray-800">Nyitvatartás:</span> {mosdo.nyitva}</p>
</div>
{mosdo.akadalym && (
<img
width="32"
height="32"
src="https://img.icons8.com/ios-filled/50/wheelchair.png"
alt="wheelchair"
className="absolute bottom-10 right-10"
/>
)}
<a
href={mosdo.utvonal}
target="_blank"
rel="noopener noreferrer"
className="font-bold mt-4 inline-block bg-yellow-500 text-white py-2 px-4 rounded-lg shadow-md hover:bg-yellow-600 transition"
>
Útvonalterv
</a>
</div>
))}
</div>
);
}

18
frontend/peepal_react/src/WC_Komponens/Fejlec/Fejlec.jsx Normal file
View File

@@ -0,0 +1,18 @@
export default function Fejlec() {
return (
<header
className="fixed top-0 left-0 w-full h-[60vh] bg-no-repeat bg-cover bg-top z-10"
style={{ backgroundImage: "url('/fejlec_hatter.jpg')" }}
>
<div className="absolute inset-0 bg-black/40 flex flex-col items-center justify-center text-white text-center p-6">
<h1 className="text-3xl font-bold mb-2 bg-black/50 p-3 rounded-lg inline-block">
Üdvözöljük a PeePal weboldalán!
</h1>
<h2 className="text-lg font-medium max-w-md bg-black/40 p-3 rounded-lg">
Találja meg a hozzá legközelebb eső nyilvános mosdót egy kattintással (vagy kettővel)
</h2>
</div>
</header>
);
}

9
frontend/peepal_react/src/WC_Komponens/Kereso/Legkozelebbi.jsx Normal file
View File

@@ -0,0 +1,9 @@
import Csempe from "../Budi_Blokk/Csempe";
export default function LegkozelebbiMosdo(){
return(
<>
<Csempe />
</>
)
}

19
frontend/peepal_react/src/WC_Komponens/Kereso/WC_Kereso.jsx Normal file
View File

@@ -0,0 +1,19 @@
export default function Kereso() {
return (
<div className="flex flex-col items-center justify-center h-screen bg-gray-100">
<div className="bg-white p-6 rounded-lg shadow-lg w-80 space-y-4 text-center">
<h2 className="text-xl font-bold">Helyzetmeghatározás</h2>
<p className="text-gray-700">Engedélyezed a helyzetmeghatározást?</p>
<div className="flex justify-center space-x-4">
<button className="px-5 py-2 bg-green-600 text-white font-bold text-lg rounded-lg shadow-md hover:bg-green-700 transition">
Igen
</button>
<button className="px-4 py-2 bg-gray-400 text-white rounded-lg hover:bg-gray-500 transition">
Nem
</button>
</div>
</div>
</div>
);
}

9
frontend/peepal_react/src/WC_Komponens/Kezdolap/Kezdolap.jsx Normal file
View File

@@ -0,0 +1,9 @@
import Csempe from "../Budi_Blokk/Csempe";
export default function Kezdolap(){
return(
<>
<Csempe />
</>
)
}