Donat/SerpentRace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

telos nezet landin, home, navbar, footer

Browse Source
This commit is contained in:
mategery
2025-11-13 18:54:06 +01:00
parent 0ac5ead63a
commit 322059ace0
6 changed files with 211 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx
+26 -24
View File
@@ -38,43 +38,45 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user, setUser }) => {
return (
<section
className="w-[95%] max-w-6xl mx-auto my-16 flex flex-col md:flex-row items-center justify-center rounded-3xl shadow-2xl overflow-hidden"
className="w-[95%] max-w-6xl mx-auto my-8 md:my-16 flex flex-col md:flex-row items-center justify-center rounded-2xl md:rounded-3xl shadow-2xl overflow-hidden"
style={{
background: "linear-gradient(90deg, var(--color-surface) 30%, var(--color-mint) 100%)",
}}
>
{/* Bal oldali animáció/kép */}
<div className="flex-1 flex items-center justify-center w-full h-full py-10 md:py-0 md:pl-10">
<LogoCard
imageSrc={logoImg}
containerHeight="420px"
containerWidth="420px"
imageHeight="420px"
imageWidth="420px"
rotateAmplitude={7}
scaleOnHover={1.03}
showMobileWarning={false}
showTooltip={false}
displayOverlayContent={false}
/>
<div className="flex-1 flex items-center justify-center w-full h-full py-6 md:py-10 md:pl-10">
<div className="w-[200px] h-[200px] sm:w-[300px] sm:h-[300px] md:w-[420px] md:h-[420px]">
<LogoCard
imageSrc={logoImg}
containerHeight="100%"
containerWidth="100%"
imageHeight="100%"
imageWidth="100%"
rotateAmplitude={7}
scaleOnHover={1.03}
showMobileWarning={false}
showTooltip={false}
displayOverlayContent={false}
/>
</div>
</div>
{/* Jobb oldali panel */}
<div className="flex-1 w-full flex items-center justify-center px-6 md:px-12 py-8">
<div className="flex-1 w-full flex items-center justify-center px-4 sm:px-6 md:px-12 py-6 md:py-8">
<div
className="w-full max-w-md rounded-2xl p-6 md:p-8 flex flex-col gap-6"
className="w-full max-w-md rounded-xl md:rounded-2xl p-4 sm:p-6 md:p-8 flex flex-col gap-4 md:gap-6"
style={{ background: "rgba(0,0,0,0.15)", backdropFilter: "blur(6px)" }}
>
<div className="flex items-center justify-between">
{username ? (
<div className="flex items-center gap-3">
<div className="flex items-center gap-2 md:gap-3">
<div
className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold"
className="w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center text-xs md:text-sm font-semibold"
style={{ background: "rgba(34,197,94,0.12)", color: "var(--color-mint)" }}
>
{initials}
</div>
<div className="text-[32px]" style={{ color: "var(--color-muted, #cbd5e1)" }}>
<div className="text-xl sm:text-2xl md:text-[32px]" style={{ color: "var(--color-muted, #cbd5e1)" }}>
<span className="font-medium" style={{ color: "var(--color-text, #fff)" }}>
{username}
</span>
@@ -82,7 +84,7 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user, setUser }) => {
</div>
) : (
<div className="w-full">
<div className="font-semibold mb-3 text-text">Nincs bejelentkezve — játssz vendégként:</div>
<div className="font-semibold mb-2 md:mb-3 text-sm md:text-base text-text">Nincs bejelentkezve — játssz vendégként:</div>
<InputBoxDark
type="text"
placeholder="Nickname..."
@@ -99,7 +101,7 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user, setUser }) => {
</div>
<div>
<h2 className="font-semibold mb-3 text-text">Csatlakozás játékhoz</h2>
<h2 className="font-semibold mb-2 md:mb-3 text-sm md:text-base text-text">Csatlakozás játékhoz</h2>
<div className={`${error ? "border border-error rounded-lg p-2" : ""}`}>
<InputBoxDark
type="text"
@@ -110,15 +112,15 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user, setUser }) => {
/>
</div>
{error && <div className="text-xs mt-2 text-error">{error}</div>}
<div className="mt-4">
<div className="mt-3 md:mt-4">
<ButtonDark text="Csatlakozás" type="button" onClick={handleJoin} width="w-full" />
</div>
</div>
{username ? (
<div className="border-t border-white/10 pt-4">
<div className="border-t border-white/10 pt-3 md:pt-4">
{username && (
<div>
<h3 className="font-semibold mb-3 text-text">Új játék létrehozása</h3>
<h3 className="font-semibold mb-2 md:mb-3 text-sm md:text-base text-text">Új játék létrehozása</h3>
<ButtonDark text="Játék létrehozása" type="button" onClick={handleCreate} width="w-full" />
</div>
)}