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

telefonos nezet #102

Merged
Donat merged 1 commits from nemtom into main 2025-11-18 16:47:34 +01:00
Conversation 0 Commits 1 Files Changed 14
+388 -346
14 changed files with 388 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx
+18 -31
View File
@@ -189,20 +189,7 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
// Ha nincs kiválasztott kártya vagy új kártya létrehozás // Ha nincs kiválasztott kártya vagy új kártya létrehozás
if (!cardData) { if (!cardData) {
return ( return null
<div className="flex-1 flex items-center justify-center bg-[color:var(--color-background)]">
<div className="text-center">
<div className="text-6xl mb-4">🃏</div>
<div className="text-[color:var(--color-text)] text-xl font-semibold mb-2">
Válassz ki egy kártyát
</div>
<div className="text-[color:var(--color-text-muted)]">
Klikkelj egy kártyára a bal oldalon a szerkesztéshez,<br />
vagy hozz létre egy újat.
</div>
</div>
</div>
)
} }
return ( return (
@@ -231,22 +218,22 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
)} )}
{/* Header */} {/* Header */}
<div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4"> <div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-4 sm:px-6 py-3 sm:py-4">
<div className="flex items-center justify-between"> <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="text-2xl"> <div className="text-xl sm:text-2xl">
{cardData.type === 'QUESTION' && '📋'} {cardData.type === 'QUESTION' && '📋'}
{cardData.type === 'JOKER' && '🃏'} {cardData.type === 'JOKER' && '🃏'}
{cardData.type === 'LUCK' && '🎲'} {cardData.type === 'LUCK' && '🎲'}
</div> </div>
<div> <div>
<h2 className="text-xl font-bold text-[color:var(--color-text)]"> <h2 className="text-lg sm:text-xl font-bold text-[color:var(--color-text)]">
{isCreating ? 'Új' : 'Szerkesztés'} {' '} {isCreating ? 'Új' : 'Szerkesztés'} {' '}
{(isCreating ? cardType : cardData.type) === 'QUESTION' && 'Feladat kártya'} {(isCreating ? cardType : cardData.type) === 'QUESTION' && 'Feladat kártya'}
{(isCreating ? cardType : cardData.type) === 'JOKER' && 'Joker kártya'} {(isCreating ? cardType : cardData.type) === 'JOKER' && 'Joker kártya'}
{(isCreating ? cardType : cardData.type) === 'LUCK' && 'Szerencse kártya'} {(isCreating ? cardType : cardData.type) === 'LUCK' && 'Szerencse kártya'}
</h2> </h2>
<div className="text-[color:var(--color-text-muted)] text-sm"> <div className="text-[color:var(--color-text-muted)] text-xs sm:text-sm">
{cardData.type === 'QUESTION' && cardData.subType && ( {cardData.type === 'QUESTION' && cardData.subType && (
<> <>
{cardData.subType === 'quiz' && 'Quiz (A/B/C/D)'} {cardData.subType === 'quiz' && 'Quiz (A/B/C/D)'}
@@ -259,19 +246,19 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
</div> </div>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-2 sm:gap-3 flex-wrap w-full sm:w-auto">
<button <button
onClick={() => setShowPreview(!showPreview)} onClick={() => setShowPreview(!showPreview)}
className={` className={`
flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition-all duration-200 flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 rounded-lg sm:rounded-xl font-medium transition-all duration-200 text-sm
${showPreview ${showPreview
? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]' ? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]'
: 'bg-[color:var(--color-background)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]' : 'bg-[color:var(--color-background)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]'
} }
`} `}
> >
<FaEye /> <FaEye className="text-sm" />
Előnézet <span className="hidden sm:inline">Előnézet</span>
</button> </button>
<button <button
@@ -279,17 +266,17 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
notifyWarning('Kártya készítés megszakítva') notifyWarning('Kártya készítés megszakítva')
onCancel() onCancel()
}} }}
className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200" className="flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 rounded-lg sm:rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200 text-sm"
> >
<FaTimes /> <FaTimes className="text-sm" />
Mégse <span className="hidden sm:inline">Mégse</span>
</button> </button>
<button <button
onClick={handleSave} onClick={handleSave}
className="flex items-center gap-2 px-6 py-2 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg" className="flex items-center gap-1 sm:gap-2 px-4 sm:px-6 py-2 rounded-lg sm:rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg text-sm"
> >
<FaSave /> <FaSave className="text-sm" />
Mentés Mentés
</button> </button>
</div> </div>
@@ -297,13 +284,13 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
</div> </div>
{/* Content */} {/* Content */}
<div className="flex-1 overflow-hidden"> <div className="flex-1 overflow-y-auto">
{showPreview ? ( {showPreview ? (
<div className="h-full bg-[color:var(--color-background)] flex items-center justify-center p-6"> <div className="h-full bg-[color:var(--color-background)] flex items-center justify-center p-4 sm:p-6">
<CardPreview card={cardData} /> <CardPreview card={cardData} />
</div> </div>
) : ( ) : (
<div className="h-full overflow-y-auto p-6"> <div className="p-4 sm:p-6">
{cardData.type === 'QUESTION' && ( {cardData.type === 'QUESTION' && (
<TaskCardEditor <TaskCardEditor
card={cardData} card={cardData}
SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
+29 -16
View File
@@ -2,7 +2,7 @@
// Deck alapadatok szerkesztése és mentés // Deck alapadatok szerkesztése és mentés
import React, { useState, useRef, useEffect } from "react" import React, { useState, useRef, useEffect } from "react"
import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam, FaTrash } from "react-icons/fa" import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam, FaTrash, FaChevronDown, FaChevronUp } from "react-icons/fa"
const deckTypes = [ const deckTypes = [
{ value: "QUESTION", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" }, { value: "QUESTION", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" },
@@ -18,6 +18,7 @@ const privacyOptions = [
export default function DeckHeader({ deck, onUpdate, onSave, onBack, onDelete }) { export default function DeckHeader({ deck, onUpdate, onSave, onBack, onDelete }) {
const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState(false); const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState(false);
const [isPrivacyDropdownOpen, setIsPrivacyDropdownOpen] = useState(false); const [isPrivacyDropdownOpen, setIsPrivacyDropdownOpen] = useState(false);
const [isDetailsExpanded, setIsDetailsExpanded] = useState(false);
const typeDropdownRef = useRef(null); const typeDropdownRef = useRef(null);
const privacyDropdownRef = useRef(null); const privacyDropdownRef = useRef(null);
@@ -47,46 +48,56 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack, onDelete })
// Remove unused card count variables // Remove unused card count variables
return ( return (
<div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4"> <div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-4 sm:px-6 py-3 sm:py-4">
{/* Top Row - Title and Actions */} {/* Top Row - Title and Actions */}
<div className="flex items-center justify-between mb-4"> <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-3 sm:mb-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-2 sm:gap-4 w-full sm:w-auto">
<button <button
onClick={onBack} onClick={onBack}
className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200" className="flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 rounded-lg sm:rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200 text-sm"
> >
<FaArrowLeft /> <FaArrowLeft className="text-sm" />
Vissza <span className="hidden sm:inline">Vissza</span>
</button> </button>
<h1 className="text-2xl font-bold text-[color:var(--color-text)]"> <h1 className="text-lg sm:text-xl lg:text-2xl font-bold text-[color:var(--color-text)]">
📝 Pakli Szerkesztés 📝 Pakli Szerkesztés
</h1> </h1>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-2 sm:gap-3 w-full sm:w-auto">
{deck.id && ( {deck.id && (
<button <button
onClick={onDelete} onClick={onDelete}
className="flex items-center gap-2 px-6 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white font-semibold transition-all duration-200 hover:scale-105 shadow-lg" className="flex items-center gap-1 sm:gap-2 px-4 sm:px-6 py-2 rounded-lg sm:rounded-xl bg-red-600 hover:bg-red-700 text-white font-semibold transition-all duration-200 hover:scale-105 shadow-lg text-sm flex-1 sm:flex-none"
> >
<FaTrash /> <FaTrash className="text-sm" />
Törlés <span className="hidden sm:inline">Törlés</span>
</button> </button>
)} )}
<button <button
onClick={onSave} onClick={onSave}
className="flex items-center gap-2 px-6 py-2 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg" className="flex items-center justify-center gap-1 sm:gap-2 px-4 sm:px-6 py-2 rounded-lg sm:rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg text-sm flex-1 sm:flex-none"
> >
<FaSave /> <FaSave className="text-sm" />
Mentés Mentés
</button> </button>
</div> </div>
</div> </div>
{/* Main Content Row */} {/* Collapsible Details Section */}
<div className="space-y-4"> <div className="border-t border-[color:var(--color-surface-selected)] mt-3 sm:mt-4">
<button
onClick={() => setIsDetailsExpanded(!isDetailsExpanded)}
className="w-full flex items-center justify-between px-2 py-2 text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)] transition-colors rounded-lg"
>
<span className="text-sm font-medium">Pakli részletek</span>
{isDetailsExpanded ? <FaChevronUp className="text-sm" /> : <FaChevronDown className="text-sm" />}
</button>
{isDetailsExpanded && (
<div className="space-y-4 px-2 pb-3 pt-2">
{/* Two Column Layout */} {/* Two Column Layout */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* Deck Name - Takes up 2 columns */} {/* Deck Name - Takes up 2 columns */}
@@ -228,6 +239,8 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack, onDelete })
</div> </div>
</div> </div>
</div> </div>
)}
</div>
</div> </div>
) )
} }
SerpentRace_Frontend/src/components/DeckCreator/DeckManager.jsx
+22 -24
View File
@@ -147,10 +147,10 @@ const DeckManager = () => {
return ( return (
<div className="w-full flex flex-col bg-[color:var(--color-background)]"> <div className="w-full flex flex-col bg-[color:var(--color-background)]">
<div className="w-full max-w-[1200px] mx-auto px-4 py-10"> <div className="w-full max-w-[1200px] mx-auto px-4 py-10 pb-32">
{/* Filters */} {/* Filters */}
<div className="flex flex-col md:flex-row gap-3 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg"> <div className="flex flex-col gap-3 mb-6 sm:mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-xl sm:rounded-2xl px-4 sm:px-6 py-3 sm:py-4 shadow-lg">
<div className="flex gap-2 items-center w-full md:w-auto"> <div className="flex gap-2 items-center w-full flex-wrap">
<SearchBox <SearchBox
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
@@ -158,10 +158,10 @@ const DeckManager = () => {
placeholder="Keresés..." placeholder="Keresés..."
className="mr-4" className="mr-4"
/> />
<FaFilter style={{ color: "var(--color-success)" }} className="mr-2" /> <FaFilter style={{ color: "var(--color-success)" }} className="mr-1 sm:mr-2 text-sm sm:text-base" />
<span className="text-[color:var(--color-text)] font-semibold mr-2">Típus:</span> <span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 text-xs sm:text-sm">Típus:</span>
<button <button
className={`px-3 py-1 rounded-lg font-medium transition-all duration-200 ${ className={`px-2 sm:px-3 py-1 rounded-lg font-medium transition-all duration-200 text-xs sm:text-sm ${
selectedType === "All" selectedType === "All"
? "bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] border border-[color:var(--color-surface)]" ? "bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] border border-[color:var(--color-surface)]"
: "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30" : "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30"
@@ -173,7 +173,7 @@ const DeckManager = () => {
{deckTypes.map((type) => ( {deckTypes.map((type) => (
<button <button
key={type.label} key={type.label}
className={`px-3 py-1 rounded-lg font-medium transition-all duration-200 ml-1 ${ className={`px-2 sm:px-3 py-1 rounded-lg font-medium transition-all duration-200 ml-1 text-xs sm:text-sm ${
selectedType === type.label selectedType === type.label
? "text-[color:var(--color-text-inverse)] border border-[color:var(--color-surface)]" ? "text-[color:var(--color-text-inverse)] border border-[color:var(--color-surface)]"
: "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30" : "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30"
@@ -190,10 +190,9 @@ const DeckManager = () => {
: type.label} : type.label}
</button> </button>
))} ))}
<span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2">Eredet:</span> <span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 ml-1 sm:ml-2 text-xs sm:text-sm">Eredet:</span>
<select <select
className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none" className="px-2 sm:px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none text-xs sm:text-sm"
style={{ backgroundColor: "rgba(0, 255, 0, 0.10)" }}
value={selectedOrigin} value={selectedOrigin}
onChange={(e) => setSelectedOrigin(e.target.value)} onChange={(e) => setSelectedOrigin(e.target.value)}
> >
@@ -201,7 +200,7 @@ const DeckManager = () => {
<option <option
key={origin} key={origin}
value={origin} value={origin}
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }} className="bg-zinc-800 text-white"
> >
{origin === "Mind" {origin === "Mind"
? "Mind" ? "Mind"
@@ -213,7 +212,7 @@ const DeckManager = () => {
</option> </option>
))} ))}
</select> </select>
<span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2 flex items-center gap-1"> <span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 ml-1 sm:ml-2 flex items-center gap-1 text-xs sm:text-sm">
Rendezés: Rendezés:
<button <button
type="button" type="button"
@@ -226,33 +225,32 @@ const DeckManager = () => {
</button> </button>
</span> </span>
<select <select
className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none flex items-center" className="px-2 sm:px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none flex items-center text-xs sm:text-sm"
style={{ backgroundColor: "rgba(0, 255, 0, 0.10)" }}
value={sortBy} value={sortBy}
onChange={(e) => setSortBy(e.target.value)} onChange={(e) => setSortBy(e.target.value)}
aria-label="Rendezés" aria-label="Rendezés"
> >
<option <option
value="date-asc" value="date-asc"
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }} className="bg-zinc-800 text-white"
> >
📅↑ 📅↑
</option> </option>
<option <option
value="date-desc" value="date-desc"
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }} className="bg-zinc-800 text-white"
> >
📅↓ 📅↓
</option> </option>
<option <option
value="abc-asc" value="abc-asc"
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }} className="bg-zinc-800 text-white"
> >
A→Z A→Z
</option> </option>
<option <option
value="abc-desc" value="abc-desc"
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }} className="bg-zinc-800 text-white"
> >
Z→A Z→A
</option> </option>
@@ -316,14 +314,14 @@ const DeckManager = () => {
</div> </div>
{/* Decks Grid */} {/* Decks Grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 sm:gap-6 lg:gap-8 mt-6 sm:mt-8">
{/* Create New Deck (Mockup) */} {/* Create New Deck (Mockup) */}
<div <div
onClick={() => goDeckCreator()} onClick={() => goDeckCreator()}
className="flex flex-col items-center justify-center h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg" className="flex flex-col items-center justify-center h-40 sm:h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-xl sm:rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg"
> >
<FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" /> <FaPlus style={{ color: "var(--color-success)" }} className="text-4xl sm:text-5xl mb-2" />
<span className="text-[color:var(--color-text)] font-semibold">Új pakli létrehozása</span> <span className="text-[color:var(--color-text)] font-semibold text-sm sm:text-base">Új pakli létrehozása</span>
</div> </div>
{/* Existing Decks (from backend) */} {/* Existing Decks (from backend) */}
{loading && ( {loading && (
@@ -338,13 +336,13 @@ const DeckManager = () => {
return ( return (
<div <div
key={deck.id} key={deck.id}
className="flex flex-col justify-between h-48 bg-[color:var(--color-card)] rounded-2xl p-6 shadow-lg border-t-4 hover:scale-105 transition-transform duration-200 cursor-pointer" className="flex flex-col justify-between h-40 sm:h-48 bg-[color:var(--color-card)] rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg border-t-4 hover:scale-105 transition-transform duration-200 cursor-pointer"
style={{ borderTopColor: borderColor }} style={{ borderTopColor: borderColor }}
onClick={() => setSelectedDeck(deck)} onClick={() => setSelectedDeck(deck)}
> >
<div> <div>
<span <span
className="inline-block px-3 py-1 rounded-full text-xs font-bold mb-2" className="inline-block px-2 sm:px-3 py-1 rounded-full text-[10px] sm:text-xs font-bold mb-2"
style={{ style={{
background: deckType?.color, background: deckType?.color,
color: "var(--color-text-inverse)", color: "var(--color-text-inverse)",
SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
+23 -13
View File
@@ -47,7 +47,7 @@ const Navbar = () => {
</div> </div>
{/* Desktop Menu */} {/* Desktop Menu */}
<div className="hidden md:flex items-center space-x-6"> <div className="hidden lg:flex items-center space-x-6">
{/* Bal oldali linkek */} {/* Bal oldali linkek */}
<button onClick={goAbout} className={navLinkClass}> <button onClick={goAbout} className={navLinkClass}>
Rólunk Rólunk
@@ -140,7 +140,7 @@ const Navbar = () => {
</div> </div>
{/* Mobile Hamburger */} {/* Mobile Hamburger */}
<div className="md:hidden flex items-center"> <div className="lg:hidden flex items-center">
<button <button
onClick={() => setMenuOpen(!menuOpen)} onClick={() => setMenuOpen(!menuOpen)}
className="text-white focus:outline-none" className="text-white focus:outline-none"
@@ -171,7 +171,16 @@ const Navbar = () => {
{/* Mobile Menu */} {/* Mobile Menu */}
{menuOpen && ( {menuOpen && (
<div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1"> <>
{/* Overlay when menu is open */}
<div
className="lg:hidden fixed inset-0 bg-black/50 z-40 top-16"
onClick={() => setMenuOpen(false)}
/>
{/* Side Menu */}
<div className="lg:hidden fixed top-16 right-0 w-64 bg-emerald-600 shadow-2xl z-50 animate-slide-down rounded-bl-2xl">
<div className="px-4 py-4 space-y-2 flex flex-col">
<button <button
onClick={() => { onClick={() => {
goAbout() goAbout()
@@ -192,11 +201,9 @@ const Navbar = () => {
</button> </button>
{isLoggedIn && ( {isLoggedIn && (
<> <Link to="/decks" onClick={() => setMenuOpen(false)} className="px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10 block text-center">
<Link to="/decks" onClick={() => setMenuOpen(false)} className={navLinkClass}>
Paklik Paklik
</Link> </Link>
</>
)} )}
<button <button
@@ -210,29 +217,29 @@ const Navbar = () => {
</button> </button>
{!isLoggedIn ? ( {!isLoggedIn ? (
<div className="flex flex-col space-y-2"> <>
<div className="w-full h-px bg-white/30 my-2"></div>
<button <button
onClick={() => { onClick={() => {
goLogin() goLogin()
setMenuOpen(false) setMenuOpen(false)
}} }}
className="block px-3 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all" className="px-3 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
> >
Bejelentkezés Bejelentkezés
</button> </button>
{/* Elválasztó vonal mobilon */}
<div className="w-full h-px bg-white/30"></div>
<Link <Link
to="/register" to="/register"
onClick={() => setMenuOpen(false)} onClick={() => setMenuOpen(false)}
className="block px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all" className="px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all text-center"
> >
Regisztráció Regisztráció
</Link> </Link>
</div> </>
) : ( ) : (
<>
<div className="w-full h-px bg-white/30 my-2"></div>
<button <button
onClick={() => { onClick={() => {
handleLogout() handleLogout()
@@ -244,8 +251,11 @@ const Navbar = () => {
<FaSignOutAlt className="h-4 w-4" /> <FaSignOutAlt className="h-4 w-4" />
<span>Kijelentkezés</span> <span>Kijelentkezés</span>
</button> </button>
</>
)} )}
</div> </div>
</div>
</>
)} )}
</nav> </nav>
) )
SerpentRace_Frontend/src/index.css
+30
View File
@@ -50,3 +50,33 @@
--color-warning: #e6c04f; --color-warning: #e6c04f;
--color-error: #e15b64; --color-error: #e15b64;
} }
@keyframes slide-in {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-down {
from {
transform: translateY(0);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.animate-slide-in {
animation: slide-in 0.3s ease-out forwards;
}
.animate-slide-down {
animation: slide-down 0.3s ease-out forwards;
}
SerpentRace_Frontend/src/pages/About/About.jsx
+50 -50
View File
@@ -18,7 +18,7 @@ import { motion } from "framer-motion"
const baseMotion = { const baseMotion = {
initial: { opacity: 0, y: 20 }, initial: { opacity: 0, y: 20 },
whileInView: { opacity: 1, y: 0 }, whileInView: { opacity: 1, y: 0 },
viewport: { once: true, amount: 0.2 }, viewport: { once: true, amount: 0.05 },
transition: { duration: 0.8 }, transition: { duration: 0.8 },
} }
@@ -135,7 +135,7 @@ const About = () => {
</div> </div>
{/* Tartalom */} {/* Tartalom */}
<main className="flex-grow text-white px-6 pt-16 mt-0 mb-20"> <main className="flex-grow text-white px-4 sm:px-6 pt-16 mt-0 mb-20">
{/* Vissza gomb */} {/* Vissza gomb */}
<div className="fixed top-4 left-4 z-50 group"> <div className="fixed top-4 left-4 z-50 group">
<div className="absolute top-full mt-1 left-1/2 -translate-x-1/2 scale-0 group-hover:scale-100 transition transform bg-zinc-800 text-sm text-white px-3 py-1 rounded shadow-lg"> <div className="absolute top-full mt-1 left-1/2 -translate-x-1/2 scale-0 group-hover:scale-100 transition transform bg-zinc-800 text-sm text-white px-3 py-1 rounded shadow-lg">
@@ -147,7 +147,7 @@ const About = () => {
<motion.section className="max-w-5xl mx-auto" {...getMotionProps({ transition: { duration: 0.7 } })}> <motion.section className="max-w-5xl mx-auto" {...getMotionProps({ transition: { duration: 0.7 } })}>
{/* Rólunk cím */} {/* Rólunk cím */}
<motion.h1 <motion.h1
className="mt-24 text-5xl font-extrabold text-green-300 mb-10 text-center tracking-wide drop-shadow-lg" className="mt-24 text-3xl sm:text-4xl lg:text-5xl font-extrabold text-green-300 mb-6 sm:mb-10 text-center tracking-wide drop-shadow-lg"
{...getMotionProps({ transition: { duration: 0.8, delay: 0.1 } })} {...getMotionProps({ transition: { duration: 0.8, delay: 0.1 } })}
> >
<span className="inline-block animate-pulse mr-2"></span> Rólunk <span className="inline-block animate-pulse mr-2"></span> Rólunk
@@ -155,7 +155,7 @@ const About = () => {
{/* Leírás */} {/* Leírás */}
<motion.p <motion.p
className="text-lg leading-relaxed text-zinc-200 mb-10 text-center max-w-3xl mx-auto" className="text-base sm:text-lg leading-relaxed text-zinc-200 mb-6 sm:mb-10 text-center max-w-3xl mx-auto"
{...getMotionProps({ transition: { duration: 0.8, delay: 0.2 } })} {...getMotionProps({ transition: { duration: 0.8, delay: 0.2 } })}
> >
Célunk, hogy egy innovatív, közösségorientált platformot építsünk, ahol a versenyzés, játék és Célunk, hogy egy innovatív, közösségorientált platformot építsünk, ahol a versenyzés, játék és
@@ -165,57 +165,57 @@ const About = () => {
{/* Küldetésünk — most szülő variánssal, hogy a kártyák ne triggereljenek külön és ne ugorjanak */} {/* Küldetésünk — most szülő variánssal, hogy a kártyák ne triggereljenek külön és ne ugorjanak */}
<motion.div <motion.div
className="mt-12" className="mt-8 sm:mt-12"
initial="hidden" initial="hidden"
whileInView="visible" whileInView="visible"
viewport={{ once: true, amount: 0.2 }} viewport={{ once: true, amount: 0.05 }}
variants={{ variants={{
hidden: {}, hidden: {},
visible: { transition: { staggerChildren: 0.08, delayChildren: 0.12 } }, visible: { transition: { staggerChildren: 0.08, delayChildren: 0.12 } },
}} }}
> >
<h2 className="text-2xl font-bold text-green-300 mb-4">Küldetésünk</h2> <h2 className="text-xl sm:text-2xl font-bold text-green-300 mb-4">Küldetésünk</h2>
{/* Új: stilizált kártyák (egyenként animálva a szülőből) */} {/* Új: stilizált kártyák (egyenként animálva a szülőből) */}
<div className="grid gap-6 md:grid-cols-3"> <div className="grid gap-4 sm:gap-6 grid-cols-1 md:grid-cols-3">
<motion.div <motion.div
className="group bg-zinc-900/40 border border-gray-700 rounded-2xl p-6 shadow-lg transform transition hover:-translate-y-2" className="group bg-zinc-900/40 border border-gray-700 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg transform transition hover:-translate-y-2"
variants={itemVariant} variants={itemVariant}
> >
<div className="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-emerald-400 to-green-600 flex items-center justify-center mb-4"> <div className="w-12 h-12 sm:w-16 sm:h-16 mx-auto rounded-full bg-gradient-to-br from-emerald-400 to-green-600 flex items-center justify-center mb-3 sm:mb-4">
{/* ICON: Lightbulb */} {/* ICON: Lightbulb */}
<FaLightbulb className="w-8 h-8 text-black" /> <FaLightbulb className="w-6 h-6 sm:w-8 sm:h-8 text-black" />
</div> </div>
<h3 className="text-lg font-semibold text-center mb-2">Innováció</h3> <h3 className="text-base sm:text-lg font-semibold text-center mb-2">Innováció</h3>
<p className="text-zinc-300 text-center"> <p className="text-sm sm:text-base text-zinc-300 text-center">
Modern megoldásokkal gyorsítjuk a fejlődést — moduláris, skálázható rendszereket építünk. Modern megoldásokkal gyorsítjuk a fejlődést — moduláris, skálázható rendszereket építünk.
</p> </p>
</motion.div> </motion.div>
<motion.div <motion.div
className="group bg-zinc-900/40 border border-gray-700 rounded-2xl p-6 shadow-lg transform transition hover:-translate-y-2" className="group bg-zinc-900/40 border border-gray-700 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg transform transition hover:-translate-y-2"
variants={itemVariant} variants={itemVariant}
> >
<div className="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-sky-400 to-blue-600 flex items-center justify-center mb-4"> <div className="w-12 h-12 sm:w-16 sm:h-16 mx-auto rounded-full bg-gradient-to-br from-sky-400 to-blue-600 flex items-center justify-center mb-3 sm:mb-4">
{/* ICON: Users */} {/* ICON: Users */}
<FaUsers className="w-8 h-8 text-black" /> <FaUsers className="w-6 h-6 sm:w-8 sm:h-8 text-black" />
</div> </div>
<h3 className="text-lg font-semibold text-center mb-2">Közösség</h3> <h3 className="text-base sm:text-lg font-semibold text-center mb-2">Közösség</h3>
<p className="text-zinc-300 text-center"> <p className="text-sm sm:text-base text-zinc-300 text-center">
Közösségépítés és együttműködés—eszközök, amik bevonják és motiválják a felhasználókat. Közösségépítés és együttműködés—eszközök, amik bevonják és motiválják a felhasználókat.
</p> </p>
</motion.div> </motion.div>
<motion.div <motion.div
className="group bg-zinc-900/40 border border-gray-700 rounded-2xl p-6 shadow-lg transform transition hover:-translate-y-2" className="group bg-zinc-900/40 border border-gray-700 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg transform transition hover:-translate-y-2"
variants={itemVariant} variants={itemVariant}
> >
<div className="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center mb-4"> <div className="w-12 h-12 sm:w-16 sm:h-16 mx-auto rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center mb-3 sm:mb-4">
{/* ICON: Shield/Quality */} {/* ICON: Shield/Quality */}
<FaShieldAlt className="w-8 h-8 text-black" /> <FaShieldAlt className="w-6 h-6 sm:w-8 sm:h-8 text-black" />
</div> </div>
<h3 className="text-lg font-semibold text-center mb-2">Minőség</h3> <h3 className="text-base sm:text-lg font-semibold text-center mb-2">Minőség</h3>
<p className="text-zinc-300 text-center"> <p className="text-sm sm:text-base text-zinc-300 text-center">
Biztonság, megbízhatóság és gondosan tervezett UX — minden részlet számít. Biztonság, megbízhatóság és gondosan tervezett UX — minden részlet számít.
</p> </p>
</motion.div> </motion.div>
@@ -224,17 +224,17 @@ const About = () => {
{/* Csapat — a szülő kezeli a gyermekek animációját (stagger), így nincs külön "belülről" trigger */} {/* Csapat — a szülő kezeli a gyermekek animációját (stagger), így nincs külön "belülről" trigger */}
<motion.div <motion.div
className="mt-16" className="mt-12 sm:mt-16"
initial="hidden" initial="hidden"
whileInView="visible" whileInView="visible"
viewport={{ once: true, amount: 0.2 }} viewport={{ once: true, amount: 0.05 }}
variants={{ variants={{
hidden: {}, hidden: {},
visible: { transition: { staggerChildren: 0.06, delayChildren: 0.25 } }, visible: { transition: { staggerChildren: 0.06, delayChildren: 0.25 } },
}} }}
> >
<h2 className="text-2xl font-bold text-green-300 mb-6">Csapatunk</h2> <h2 className="text-xl sm:text-2xl font-bold text-green-300 mb-4 sm:mb-6">Csapatunk</h2>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8">
{teamMembers.map((member, i) => { {teamMembers.map((member, i) => {
const isLast = i === teamMembers.length - 1 const isLast = i === teamMembers.length - 1
const itemsInLastRow = teamMembers.length % 3 const itemsInLastRow = teamMembers.length % 3
@@ -242,18 +242,18 @@ const About = () => {
return ( return (
<motion.div <motion.div
key={i} key={i}
className={`flex flex-col items-center text-center bg-zinc-800 p-6 rounded-xl shadow-lg hover:shadow-green-400/20 hover:scale-105 transition ${ className={`flex flex-col items-center text-center bg-zinc-800 p-4 sm:p-6 rounded-xl shadow-lg hover:shadow-green-400/20 hover:scale-105 transition ${
shouldCenter ? "md:col-start-2" : "" shouldCenter ? "sm:col-start-2" : ""
}`} }`}
variants={itemVariant} variants={itemVariant}
> >
<img <img
src={member.photo} src={member.photo}
alt={member.name} alt={member.name}
className="w-24 h-24 rounded-full object-cover mb-4 border-4 border-green-400" className="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 sm:mb-4 border-4 border-green-400"
/> />
<h4 className="text-lg font-bold">{member.name}</h4> <h4 className="text-base sm:text-lg font-bold">{member.name}</h4>
<p className="text-zinc-400">{member.role}</p> <p className="text-sm sm:text-base text-zinc-400">{member.role}</p>
</motion.div> </motion.div>
) )
})} })}
@@ -263,42 +263,42 @@ const About = () => {
{/* Új: Kapcsolat szekció — egységes megjelenés (animálva) */} {/* Új: Kapcsolat szekció — egységes megjelenés (animálva) */}
<motion.section <motion.section
id="contact" id="contact"
className="mt-16 bg-transparent" className="mt-12 sm:mt-16 bg-transparent"
{...getMotionProps({ transition: { duration: 0.8, delay: 0.25 } })} {...getMotionProps({ transition: { duration: 0.8, delay: 0.25 } })}
> >
<div className="max-w-5xl mx-auto bg-white/5 rounded-2xl border border-gray-700 p-8 shadow-lg"> <div className="max-w-5xl mx-auto bg-white/5 rounded-xl sm:rounded-2xl border border-gray-700 p-4 sm:p-8 shadow-lg">
<h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white"> <h2 className="text-2xl sm:text-3xl font-bold mb-4 sm:mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
Kapcsolat Kapcsolat
</h2> </h2>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
{/* Bal: elérhetőségek */} {/* Bal: elérhetőségek */}
<div className="flex flex-col justify-center gap-6"> <div className="flex flex-col justify-center gap-4 sm:gap-6">
<div className="bg-zinc-800 rounded-xl p-5 shadow-md flex items-start gap-4"> <div className="bg-zinc-800 rounded-lg sm:rounded-xl p-4 sm:p-5 shadow-md flex items-start gap-3 sm:gap-4">
<div className="bg-emerald-500 text-black rounded-lg p-3 text-xl flex-shrink-0">✉️</div> <div className="bg-emerald-500 text-black rounded-lg p-2 sm:p-3 text-lg sm:text-xl flex-shrink-0">✉️</div>
<div> <div>
<div className="font-semibold">Email</div> <div className="font-semibold text-sm sm:text-base">Email</div>
<div className="text-zinc-300">hello@serpentrace.hu</div> <div className="text-zinc-300 text-sm sm:text-base">hello@serpentrace.hu</div>
</div> </div>
</div> </div>
<div className="bg-zinc-800 rounded-xl p-5 shadow-md flex items-start gap-4"> <div className="bg-zinc-800 rounded-lg sm:rounded-xl p-4 sm:p-5 shadow-md flex items-start gap-3 sm:gap-4">
<div className="bg-emerald-500 text-black rounded-lg p-3 text-xl flex-shrink-0">📞</div> <div className="bg-emerald-500 text-black rounded-lg p-2 sm:p-3 text-lg sm:text-xl flex-shrink-0">📞</div>
<div> <div>
<div className="font-semibold">Telefon</div> <div className="font-semibold text-sm sm:text-base">Telefon</div>
<div className="text-zinc-300">+36 20 123 4567</div> <div className="text-zinc-300 text-sm sm:text-base">+36 20 123 4567</div>
</div> </div>
</div> </div>
<div className="bg-zinc-800 rounded-xl p-5 shadow-md flex items-start gap-4"> <div className="bg-zinc-800 rounded-lg sm:rounded-xl p-4 sm:p-5 shadow-md flex items-start gap-3 sm:gap-4">
<div className="bg-emerald-500 text-black rounded-lg p-3 text-xl flex-shrink-0">📍</div> <div className="bg-emerald-500 text-black rounded-lg p-2 sm:p-3 text-lg sm:text-xl flex-shrink-0">📍</div>
<div> <div>
<div className="font-semibold">Iroda</div> <div className="font-semibold text-sm sm:text-base">Iroda</div>
<div className="text-zinc-300">Budapest, Magyarország</div> <div className="text-zinc-300 text-sm sm:text-base">Budapest, Magyarország</div>
</div> </div>
</div> </div>
<p className="text-zinc-400 mt-2 text-sm"> <p className="text-zinc-400 mt-2 text-xs sm:text-sm">
Általános megkeresésekre 48 órán belül válaszolunk. Ha céges együttműködésről van szó, Általános megkeresésekre 48 órán belül válaszolunk. Ha céges együttműködésről van szó,
kérjük, írj részletesen a projektedről. kérjük, írj részletesen a projektedről.
</p> </p>
SerpentRace_Frontend/src/pages/Auth/AuthCard.jsx
+4 -4
View File
@@ -15,16 +15,16 @@ export default function AuthCard({ isRegistering, setIsRegistering }) {
transition={{ duration: 0.5, ease: "easeInOut" }} transition={{ duration: 0.5, ease: "easeInOut" }}
className="absolute flex max-w-4xl w-full bg-white rounded-2xl shadow-lg overflow-hidden" className="absolute flex max-w-4xl w-full bg-white rounded-2xl shadow-lg overflow-hidden"
> >
{/* Bal oldali kép és szöveg */} {/* Bal oldali kép és szöveg - csak desktop */}
<div <div
className={`transition-all duration-500 ${ className={`hidden md:flex transition-all duration-500 ${
isRegistering ? "w-0 p-0" : "w-2/5 p-8" isRegistering ? "w-0 p-0" : "w-2/5 p-8"
} flex flex-col justify-center items-center bg-gradient-to-r from-mint-darker to-mint text-white `} } flex-col justify-center items-center bg-gradient-to-r from-mint-darker to-mint text-white `}
> >
<Logo size={100} /> <Logo size={100} />
<div className="h-6" /> <div className="h-6" />
<Animation sizePercentage={30} /> <Animation sizePercentage={30} />
<p className="text-lg mt-0 text-center font-light whitespace-nowrap overflow-hidden"> <p className="hidden md:block text-lg mt-0 text-center font-light overflow-hidden">
Lépj be és légy a legjobb! Lépj be és légy a legjobb!
</p> </p>
</div> </div>
SerpentRace_Frontend/src/pages/Auth/LoginForm.jsx
+9 -9
View File
@@ -124,23 +124,23 @@ export default function LoginForm() {
</span> </span>
</div> </div>
<h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide"> <h2 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-center mb-4 sm:mb-6 text-gray-800 tracking-wide">
Bejelentkezés Bejelentkezés
</h2> </h2>
{showSuccess && ( {showSuccess && (
<div className="fixed top-6 left-1/2 -translate-x-1/2 bg-green-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300"> <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-green-500 text-white px-4 sm:px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300 max-w-[90%] text-sm sm:text-base">
{successMessage || "Sikeres művelet!"} {successMessage || "Sikeres művelet!"}
</div> </div>
)} )}
{showErrorPopup && error && ( {showErrorPopup && error && (
<div className="fixed top-6 left-1/2 -translate-x-1/2 bg-red-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300"> <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-red-500 text-white px-4 sm:px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300 max-w-[90%] text-sm sm:text-base">
{error} {error}
</div> </div>
)} )}
<form onSubmit={handleSubmit} className="space-y-4 w-full"> <form onSubmit={handleSubmit} className="space-y-3 sm:space-y-4 w-full">
<InputBox <InputBox
type="email" type="email"
placeholder="Email cím" placeholder="Email cím"
@@ -169,14 +169,14 @@ export default function LoginForm() {
{/* Forgot Password Modal */} {/* Forgot Password Modal */}
{showForgotPasswordModal && ( {showForgotPasswordModal && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowForgotPasswordModal(false)}> <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={() => setShowForgotPasswordModal(false)}>
<div className="bg-white rounded-xl shadow-2xl p-8 w-96 max-w-full" onClick={(e) => e.stopPropagation()}> <div className="bg-white rounded-xl shadow-2xl p-6 sm:p-8 w-full max-w-md" onClick={(e) => e.stopPropagation()}>
<h3 className="text-2xl font-bold text-gray-800 mb-4">Jelszó visszaállítás</h3> <h3 className="text-xl sm:text-2xl font-bold text-gray-800 mb-3 sm:mb-4">Jelszó visszaállítás</h3>
<p className="text-gray-600 mb-6 text-sm"> <p className="text-gray-600 mb-4 sm:mb-6 text-xs sm:text-sm">
Add meg az email címed és küldünk egy jelszó visszaállító linket. Add meg az email címed és küldünk egy jelszó visszaállító linket.
</p> </p>
<form onSubmit={handleForgotPassword} className="space-y-4"> <form onSubmit={handleForgotPassword} className="space-y-3 sm:space-y-4">
<InputBox <InputBox
type="email" type="email"
placeholder="Email cím" placeholder="Email cím"
SerpentRace_Frontend/src/pages/Auth/RegisterForm.jsx
+3 -3
View File
@@ -93,17 +93,17 @@ export default function RegisterForm() {
</span> </span>
</div> </div>
<h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide"> <h2 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-center mb-4 sm:mb-6 text-gray-800 tracking-wide">
Regisztráció Regisztráció
</h2> </h2>
{showErrorPopup && error && ( {showErrorPopup && error && (
<div className="fixed top-6 left-1/2 -translate-x-1/2 bg-red-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300"> <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-red-500 text-white px-4 sm:px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300 max-w-[90%] text-sm sm:text-base">
{error} {error}
</div> </div>
)} )}
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6">
<InputBox type="text" placeholder="Vezetéknév" value={lastname} onChange={(e) => setLastname(e.target.value)} /> <InputBox type="text" placeholder="Vezetéknév" value={lastname} onChange={(e) => setLastname(e.target.value)} />
<InputBox type="text" placeholder="Keresztnév" value={firstname} onChange={(e) => setFirstname(e.target.value)} /> <InputBox type="text" placeholder="Keresztnév" value={firstname} onChange={(e) => setFirstname(e.target.value)} />
<InputBox type="text" placeholder="Felhasználónév" value={username} onChange={(e) => setUsername(e.target.value)} /> <InputBox type="text" placeholder="Felhasználónév" value={username} onChange={(e) => setUsername(e.target.value)} />
SerpentRace_Frontend/src/pages/Contacts/Contacts.jsx
+36 -36
View File
@@ -30,11 +30,11 @@ const Card = ({ icon, label, description, targetId, className }) => {
return ( return (
<div <div
onClick={handleClick} onClick={handleClick}
className={`cursor-pointer hover:scale-105 transition-all duration-300 border border-gray-400 shadow-lg rounded-2xl p-8 w-72 text-center animate-fadeInUp ${className}`} className={`cursor-pointer hover:scale-105 transition-all duration-300 border border-gray-400 shadow-lg rounded-xl sm:rounded-2xl p-4 sm:p-6 lg:p-8 w-full sm:w-72 text-center animate-fadeInUp ${className}`}
> >
<div className="text-5xl mb-4 flex justify-center">{icon}</div> <div className="text-3xl sm:text-4xl lg:text-5xl mb-3 sm:mb-4 flex justify-center">{icon}</div>
<h3 className="text-2xl font-bold mb-2">{label}</h3> <h3 className="text-xl sm:text-2xl font-bold mb-2">{label}</h3>
<p className="text-white/90 text-sm">{description}</p> <p className="text-white/90 text-xs sm:text-sm">{description}</p>
</div> </div>
) )
} }
@@ -43,10 +43,10 @@ const SectionContainer = ({ id, title, children }) => {
return ( return (
<section <section
id={id} id={id}
className="mt-20 mb-28 px-4 md:px-0 opacity-100 animate-fadeInUp" className="mt-12 sm:mt-16 lg:mt-20 mb-16 sm:mb-20 lg:mb-28 px-4 md:px-0 opacity-100 animate-fadeInUp"
> >
<div className="text-center mb-12"> <div className="text-center mb-8 sm:mb-10 lg:mb-12">
<h2 className="text-4xl font-bold border-b-4 inline-block border-emerald-400 pb-2 text-white"> <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold border-b-4 inline-block border-emerald-400 pb-2 text-white">
{title} {title}
</h2> </h2>
</div> </div>
@@ -80,14 +80,14 @@ const CompanyHub = () => {
<div className="relative z-10 flex flex-col min-h-screen"> <div className="relative z-10 flex flex-col min-h-screen">
<Navbar /> <Navbar />
<main className="flex-grow relative px-4 py-8 md:px-12 md:py-16 overflow-y-auto scroll-smooth"> <main className="flex-grow relative px-4 py-6 sm:py-8 md:px-12 md:py-16 overflow-y-auto scroll-smooth">
<section <section
ref={sectionRef} ref={sectionRef}
className={`max-w-5xl mx-auto transition-all duration-1000 ease-out ${ className={`max-w-5xl mx-auto transition-all duration-1000 ease-out ${
visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10" visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
}`} }`}
> >
<div className="flex justify-center gap-6 mt-8 flex-wrap"> <div className="flex flex-col sm:flex-row justify-center gap-4 sm:gap-6 mt-6 sm:mt-8">
<Card <Card
icon={<FaBuilding />} icon={<FaBuilding />}
label="Mit nyújtunk" label="Mit nyújtunk"
@@ -113,16 +113,16 @@ const CompanyHub = () => {
{/* Mit nyújtunk */} {/* Mit nyújtunk */}
<SectionContainer id="intro" title="Mit nyújtunk cégeknek"> <SectionContainer id="intro" title="Mit nyújtunk cégeknek">
<div className="grid grid-cols-1 md:grid-cols-3 gap-10"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
{/* Egyénre szabás */} {/* Egyénre szabás */}
<div className="bg-white/5 rounded-3xl border border-gray-700 shadow-lg p-10 flex flex-col gap-8"> <div className="bg-white/5 rounded-2xl sm:rounded-3xl border border-gray-700 shadow-lg p-6 sm:p-8 lg:p-10 flex flex-col gap-6 sm:gap-8">
<h3 className="text-2xl font-extrabold flex items-center gap-4 text-emerald-400"> <h3 className="text-xl sm:text-2xl font-extrabold flex items-center gap-3 sm:gap-4 text-emerald-400">
<FaPalette className="text-4xl" /> <FaPalette className="text-3xl sm:text-4xl" />
Egyénre szabás Egyénre szabás
</h3> </h3>
<ul className="list-disc ml-6 space-y-4 text-white/90 text-lg"> <ul className="list-disc ml-6 space-y-3 sm:space-y-4 text-white/90 text-sm sm:text-base lg:text-lg">
<li className="flex items-center gap-4"> <li className="flex items-center gap-3 sm:gap-4">
<FaUserCheck className="text-green-400 text-2xl" /> <FaUserCheck className="text-green-400 text-xl sm:text-2xl" />
Testreszabható design és színek Testreszabható design és színek
</li> </li>
<li className="flex items-center gap-4"> <li className="flex items-center gap-4">
@@ -137,12 +137,12 @@ const CompanyHub = () => {
</div> </div>
{/* Árazás */} {/* Árazás */}
<div className="bg-white/5 rounded-3xl border border-gray-700 shadow-lg p-10 flex flex-col gap-8"> <div className="bg-white/5 rounded-2xl sm:rounded-3xl border border-gray-700 shadow-lg p-6 sm:p-8 lg:p-10 flex flex-col gap-6 sm:gap-8">
<h3 className="text-2xl font-extrabold flex items-center gap-4 text-emerald-400"> <h3 className="text-xl sm:text-2xl font-extrabold flex items-center gap-3 sm:gap-4 text-emerald-400">
<FaDollarSign className="text-4xl" /> <FaDollarSign className="text-3xl sm:text-4xl" />
Árazás Árazás
</h3> </h3>
<ul className="list-disc ml-6 space-y-4 text-white/90 text-lg"> <ul className="list-disc ml-6 space-y-3 sm:space-y-4 text-white/90 text-sm sm:text-base lg:text-lg">
<li className="flex items-center gap-4"> <li className="flex items-center gap-4">
<FaUsers className="text-purple-400 text-2xl" /> <FaUsers className="text-purple-400 text-2xl" />
Kedvezményes csomagok KKV-knak Kedvezményes csomagok KKV-knak
@@ -159,9 +159,9 @@ const CompanyHub = () => {
</div> </div>
{/* Demó videó */} {/* Demó videó */}
<div className="bg-white/5 rounded-3xl border border-gray-700 shadow-lg p-10 flex flex-col gap-8"> <div className="bg-white/5 rounded-2xl sm:rounded-3xl border border-gray-700 shadow-lg p-6 sm:p-8 lg:p-10 flex flex-col gap-6 sm:gap-8">
<h3 className="text-2xl font-extrabold flex items-center gap-4 text-emerald-400"> <h3 className="text-xl sm:text-2xl font-extrabold flex items-center gap-3 sm:gap-4 text-emerald-400">
<FaVideo className="text-4xl" /> <FaVideo className="text-3xl sm:text-4xl" />
Csapatunk videó Csapatunk videó
</h3> </h3>
<video controls className="w-full rounded-xl shadow-xl"> <video controls className="w-full rounded-xl shadow-xl">
@@ -173,34 +173,34 @@ const CompanyHub = () => {
</SectionContainer> </SectionContainer>
{/* Contact + Join Section */} {/* Contact + Join Section */}
<section className="grid md:grid-cols-2 gap-10 max-w-6xl mx-auto mt-20 mb-28 px-4 md:px-0"> <section className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 lg:gap-10 max-w-6xl mx-auto mt-12 sm:mt-16 lg:mt-20 mb-16 sm:mb-20 lg:mb-28 px-4 md:px-0">
{/* Contact */} {/* Contact */}
<div <div
id="contact" id="contact"
className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg" className="bg-white/10 p-6 sm:p-8 rounded-xl border border-gray-500 shadow-lg"
> >
<h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white"> <h2 className="text-2xl sm:text-3xl font-bold mb-4 sm:mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
Kapcsolatfelvétel cégeknek Kapcsolatfelvétel cégeknek
</h2> </h2>
<form className="grid gap-6 md:grid-cols-2"> <form className="grid gap-4 sm:gap-6 md:grid-cols-2">
<input <input
type="text" type="text"
placeholder="Cég neve" placeholder="Cég neve"
className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2" className="bg-white/20 text-white placeholder-white px-4 sm:px-5 py-3 sm:py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2 text-sm sm:text-base"
/> />
<input <input
type="email" type="email"
placeholder="Email" placeholder="Email"
className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2 md:col-span-1" className="bg-white/20 text-white placeholder-white px-4 sm:px-5 py-3 sm:py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2 md:col-span-1 text-sm sm:text-base"
/> />
<textarea <textarea
placeholder="Üzenet" placeholder="Üzenet"
rows="6" rows="6"
className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2" className="bg-white/20 text-white placeholder-white px-4 sm:px-5 py-3 sm:py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2 text-sm sm:text-base"
/> />
<button <button
type="submit" type="submit"
className="bg-emerald-500 hover:bg-emerald-400 text-white px-8 py-4 rounded-lg font-bold col-span-2 md:col-span-1 transition" className="bg-emerald-500 hover:bg-emerald-400 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-lg font-bold col-span-2 md:col-span-1 transition text-sm sm:text-base"
> >
Küldés Küldés
</button> </button>
@@ -210,14 +210,14 @@ const CompanyHub = () => {
{/* Join */} {/* Join */}
<div <div
id="join" id="join"
className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg" className="bg-white/10 p-6 sm:p-8 rounded-xl border border-gray-500 shadow-lg"
> >
<h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white"> <h2 className="text-2xl sm:text-3xl font-bold mb-4 sm:mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
Csatlakozz partnerként Csatlakozz partnerként
</h2> </h2>
<ul className="list-disc space-y-4 ml-8 text-base text-white/90"> <ul className="list-disc space-y-3 sm:space-y-4 ml-6 sm:ml-8 text-sm sm:text-base text-white/90">
<li className="flex gap-3 items-center"> <li className="flex gap-2 sm:gap-3 items-center">
<FaHandsHelping className="text-green-400 text-xl flex-shrink-0" /> <FaHandsHelping className="text-green-400 text-lg sm:text-xl flex-shrink-0" />
Gamification a vállalati kultúrában Gamification a vállalati kultúrában
</li> </li>
<li className="flex gap-3 items-center"> <li className="flex gap-3 items-center">
SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
+3 -3
View File
@@ -387,9 +387,9 @@ export default function DeckCreator() {
/> />
{/* Main Content */} {/* Main Content */}
<div className="flex-1 flex"> <div className="flex-1 flex flex-col lg:flex-row overflow-hidden">
{/* Left Panel - Cards List */} {/* Left Panel - Cards List */}
<div className="w-80 bg-[color:var(--color-surface)] border-r border-[color:var(--color-surface-selected)] flex flex-col"> <div className="w-full lg:w-80 bg-[color:var(--color-surface)] border-b lg:border-b-0 lg:border-r border-[color:var(--color-surface-selected)] flex flex-col max-h-64 lg:max-h-none overflow-y-auto">
<CardsList <CardsList
cards={deck.cards} cards={deck.cards}
selectedCard={selectedCard} selectedCard={selectedCard}
@@ -403,7 +403,7 @@ export default function DeckCreator() {
</div> </div>
{/* Right Panel - Card Editor */} {/* Right Panel - Card Editor */}
<div className="flex-1 bg-[color:var(--color-background)] flex flex-col"> <div className="flex-1 flex flex-col overflow-y-auto">
<CardEditor <CardEditor
card={selectedCard} card={selectedCard}
isCreating={isCreatingCard} isCreating={isCreatingCard}
SerpentRace_Frontend/src/pages/Decks/Card_display.jsx
+30 -26
View File
@@ -183,19 +183,20 @@ const Card_display = () => {
<div className="w-full min-h-screen bg-[color:var(--color-background)] flex flex-col"> <div className="w-full min-h-screen bg-[color:var(--color-background)] flex flex-col">
<Navbar /> <Navbar />
<main className="flex-1 w-full max-w-[1200px] mx-auto px-4 py-10"> <main className="flex-1 w-full max-w-[1200px] mx-auto px-4 sm:px-6 py-6 sm:py-10">
{/* Header with back button */} {/* Header with back button */}
<div className="flex items-center gap-4 mb-6"> <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 mb-6">
<button <button
onClick={() => goDecks()} onClick={() => goDecks()}
className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-surface)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)] transition-all duration-200 shadow" className="flex items-center gap-2 px-3 sm:px-4 py-2 rounded-lg sm:rounded-xl bg-[color:var(--color-surface)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)] transition-all duration-200 shadow text-sm"
> >
<FaArrowLeft /> <FaArrowLeft />
Vissza a paklikhoz <span className="hidden sm:inline">Vissza a paklikhoz</span>
<span className="sm:hidden">Vissza</span>
</button> </button>
{deck && ( {deck && (
<div className="flex items-center gap-3"> <div className="flex flex-wrap items-center gap-2 sm:gap-3">
<h1 className="text-2xl font-bold text-[color:var(--color-text)]">{deck.name}</h1> <h1 className="text-xl sm:text-2xl font-bold text-[color:var(--color-text)]">{deck.name}</h1>
{currentDeckType && ( {currentDeckType && (
<span <span
className="inline-block px-3 py-1 rounded-full text-sm font-bold" className="inline-block px-3 py-1 rounded-full text-sm font-bold"
@@ -226,16 +227,17 @@ const Card_display = () => {
{/* Filters and controls */} {/* Filters and controls */}
{!loading && !error && ( {!loading && !error && (
<> <>
<div className="flex flex-col md:flex-row gap-3 justify-between items-center mb-6 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg"> <div className="flex flex-col gap-3 mb-6 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-xl sm:rounded-2xl px-4 sm:px-6 py-3 sm:py-4 shadow-lg">
<div className="flex gap-2 items-center w-full md:w-auto"> <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center w-full">
<SearchBox <SearchBox
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
width={300} width={300}
placeholder="Keresés kérdésben vagy válaszokban..." placeholder="Keresés..."
className="mr-4" className="w-full sm:w-auto"
/> />
<span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2 flex items-center gap-1"> <div className="flex items-center gap-2 flex-wrap">
<span className="text-[color:var(--color-text)] font-semibold text-sm sm:text-base flex items-center gap-1">
Rendezés: Rendezés:
<button <button
type="button" type="button"
@@ -248,7 +250,7 @@ const Card_display = () => {
</button> </button>
</span> </span>
<select <select
className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none" className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none text-xs sm:text-sm flex-1 sm:flex-none"
style={{ backgroundColor: "rgba(0, 255, 0, 0.10)" }} style={{ backgroundColor: "rgba(0, 255, 0, 0.10)" }}
value={sortBy} value={sortBy}
onChange={(e) => setSortBy(e.target.value)} onChange={(e) => setSortBy(e.target.value)}
@@ -287,6 +289,7 @@ const Card_display = () => {
</select> </select>
</div> </div>
</div> </div>
</div>
{showSortHelp && ( {showSortHelp && (
<PopUp onClose={() => setShowSortHelp(false)}> <PopUp onClose={() => setShowSortHelp(false)}>
@@ -318,15 +321,15 @@ const Card_display = () => {
)} )}
{/* Items per page selector and pagination info */} {/* Items per page selector and pagination info */}
<div className="flex flex-col md:flex-row gap-4 justify-between items-center mb-6 bg-[color:var(--color-surface)]/60 backdrop-blur-lg rounded-xl px-6 py-3 shadow"> <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-between items-center mb-6 bg-[color:var(--color-surface)]/60 backdrop-blur-lg rounded-xl px-4 sm:px-6 py-3 shadow">
<div className="flex items-center gap-3"> <div className="flex items-center gap-2 sm:gap-3 w-full sm:w-auto justify-between sm:justify-start">
<span className="text-[color:var(--color-text-muted)] text-sm font-medium"> <span className="text-[color:var(--color-text-muted)] text-xs sm:text-sm font-medium">
Elemek oldalanként: Oldalanként:
</span> </span>
<select <select
value={itemsPerPage} value={itemsPerPage}
onChange={(e) => setItemsPerPage(Number(e.target.value))} onChange={(e) => setItemsPerPage(Number(e.target.value))}
className="px-3 py-1.5 rounded-lg bg-[color:var(--color-background)] text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)] focus:ring-2 focus:ring-[color:var(--color-success)] outline-none transition-all duration-200" className="px-2 sm:px-3 py-1.5 rounded-lg bg-[color:var(--color-background)] text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)] focus:ring-2 focus:ring-[color:var(--color-success)] outline-none transition-all duration-200 text-sm"
> >
<option value={10}>10</option> <option value={10}>10</option>
<option value={20}>20</option> <option value={20}>20</option>
@@ -335,10 +338,11 @@ const Card_display = () => {
</select> </select>
</div> </div>
<div className="text-[color:var(--color-text-muted)] text-sm"> <div className="text-[color:var(--color-text-muted)] text-xs sm:text-sm text-center sm:text-left">
{totalCards > 0 ? ( {totalCards > 0 ? (
<> <>
{startIndex + 1}-{Math.min(endIndex, totalCards)} / {totalCards} kártya <span className="hidden sm:inline">{startIndex + 1}-{Math.min(endIndex, totalCards)} / {totalCards} kártya</span>
<span className="sm:hidden">{startIndex + 1}-{Math.min(endIndex, totalCards)} / {totalCards}</span>
</> </>
) : ( ) : (
<>0 kártya</> <>0 kártya</>
@@ -347,7 +351,7 @@ const Card_display = () => {
</div> </div>
{/* Cards Grid */} {/* Cards Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 pb-20">
{totalCards === 0 && ( {totalCards === 0 && (
<div className="col-span-full text-center text-[color:var(--color-text-muted)] py-10"> <div className="col-span-full text-center text-[color:var(--color-text-muted)] py-10">
Nincsenek kártyák ebben a pakliban. Nincsenek kártyák ebben a pakliban.
@@ -739,21 +743,21 @@ const Card_display = () => {
{/* Pagination Controls */} {/* Pagination Controls */}
{totalPages > 1 && ( {totalPages > 1 && (
<div className="flex justify-center items-center gap-2 mt-8"> <div className="flex flex-wrap justify-center items-center gap-2 mt-8">
<button <button
onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))} onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
disabled={currentPage === 1} disabled={currentPage === 1}
className={`px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2 ${ className={`px-3 sm:px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-1 sm:gap-2 text-sm ${
currentPage === 1 currentPage === 1
? 'bg-[color:var(--color-surface)] text-[color:var(--color-text-muted)] cursor-not-allowed' ? 'bg-[color:var(--color-surface)] text-[color:var(--color-text-muted)] cursor-not-allowed'
: 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] hover:bg-[color:var(--color-success)]/80 hover:scale-105' : 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] hover:bg-[color:var(--color-success)]/80 hover:scale-105'
}`} }`}
> >
<FaChevronLeft /> <FaChevronLeft />
Előző <span className="hidden sm:inline">Előző</span>
</button> </button>
<div className="flex items-center gap-2"> <div className="flex items-center gap-1 sm:gap-2">
{[...Array(totalPages)].map((_, index) => { {[...Array(totalPages)].map((_, index) => {
const pageNum = index + 1 const pageNum = index + 1
if ( if (
@@ -765,7 +769,7 @@ const Card_display = () => {
<button <button
key={pageNum} key={pageNum}
onClick={() => setCurrentPage(pageNum)} onClick={() => setCurrentPage(pageNum)}
className={`w-10 h-10 rounded-lg font-medium transition-all duration-200 ${ className={`w-8 h-8 sm:w-10 sm:h-10 rounded-lg font-medium transition-all duration-200 text-sm ${
currentPage === pageNum currentPage === pageNum
? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] scale-110 shadow-lg' ? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] scale-110 shadow-lg'
: 'bg-[color:var(--color-surface)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]' : 'bg-[color:var(--color-surface)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]'
@@ -797,7 +801,7 @@ const Card_display = () => {
: 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] hover:bg-[color:var(--color-success)]/80 hover:scale-105' : 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] hover:bg-[color:var(--color-success)]/80 hover:scale-105'
}`} }`}
> >
Következő <span className="hidden sm:inline">Következő</span>
<FaChevronRight /> <FaChevronRight />
</button> </button>
</div> </div>
SerpentRace_Frontend/src/pages/Game/ChooseDeck.jsx
+25 -25
View File
@@ -144,7 +144,7 @@ const ChooseDeck = () => {
<Navbar /> <Navbar />
</div> </div>
<main className="flex-grow text-white px-6 pt-24 pb-20"> <main className="flex-grow text-white px-4 sm:px-6 pt-20 sm:pt-24 pb-16 sm:pb-20">
<motion.section <motion.section
className="max-w-6xl mx-auto" className="max-w-6xl mx-auto"
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@@ -153,7 +153,7 @@ const ChooseDeck = () => {
> >
{/* Title */} {/* Title */}
<motion.h1 <motion.h1
className="text-5xl font-extrabold text-green-300 mb-6 text-center tracking-wide drop-shadow-lg" className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-green-300 mb-4 sm:mb-6 text-center tracking-wide drop-shadow-lg"
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.1 }} transition={{ duration: 0.8, delay: 0.1 }}
@@ -162,7 +162,7 @@ const ChooseDeck = () => {
</motion.h1> </motion.h1>
<motion.p <motion.p
className="text-lg leading-relaxed text-zinc-200 mb-10 text-center max-w-3xl mx-auto" className="text-sm sm:text-base lg:text-lg leading-relaxed text-zinc-200 mb-6 sm:mb-10 text-center max-w-3xl mx-auto"
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }} transition={{ duration: 0.8, delay: 0.2 }}
@@ -172,8 +172,8 @@ const ChooseDeck = () => {
</motion.p> </motion.p>
{/* Filters */} {/* Filters */}
<div className="flex flex-col md:flex-row gap-3 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg"> <div className="flex flex-col gap-3 mb-6 sm:mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-xl sm:rounded-2xl px-4 sm:px-6 py-3 sm:py-4 shadow-lg">
<div className="flex gap-2 items-center w-full md:w-auto flex-wrap"> <div className="flex gap-2 items-center w-full flex-wrap">
<SearchBox <SearchBox
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
@@ -181,10 +181,10 @@ const ChooseDeck = () => {
placeholder="Keresés..." placeholder="Keresés..."
className="mr-4" className="mr-4"
/> />
<FaFilter style={{ color: "var(--color-success)" }} className="mr-2" /> <FaFilter style={{ color: "var(--color-success)" }} className="mr-1 sm:mr-2 text-sm sm:text-base" />
<span className="text-[color:var(--color-text)] font-semibold mr-2">Típus:</span> <span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 text-xs sm:text-sm">Típus:</span>
<button <button
className={`px-3 py-1 rounded-lg font-medium transition-all duration-200 ${ className={`px-2 sm:px-3 py-1 rounded-lg font-medium transition-all duration-200 text-xs sm:text-sm ${
selectedType === "All" selectedType === "All"
? "bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] border border-[color:var(--color-surface)]" ? "bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] border border-[color:var(--color-surface)]"
: "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30" : "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30"
@@ -196,7 +196,7 @@ const ChooseDeck = () => {
{deckTypes.map((type) => ( {deckTypes.map((type) => (
<button <button
key={type.label} key={type.label}
className={`px-3 py-1 rounded-lg font-medium transition-all duration-200 ml-1 ${ className={`px-2 sm:px-3 py-1 rounded-lg font-medium transition-all duration-200 ml-1 text-xs sm:text-sm ${
selectedType === type.label selectedType === type.label
? "text-[color:var(--color-text-inverse)] border border-[color:var(--color-surface)]" ? "text-[color:var(--color-text-inverse)] border border-[color:var(--color-surface)]"
: "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30" : "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30"
@@ -207,9 +207,9 @@ const ChooseDeck = () => {
{type.label === "Luck" ? "Szerencse" : type.label === "Question" ? "Kérdés" : "Joker"} {type.label === "Luck" ? "Szerencse" : type.label === "Question" ? "Kérdés" : "Joker"}
</button> </button>
))} ))}
<span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2">Eredet:</span> <span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 ml-1 sm:ml-2 text-xs sm:text-sm">Eredet:</span>
<select <select
className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none" className="px-2 sm:px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none text-xs sm:text-sm"
value={selectedOrigin} value={selectedOrigin}
onChange={(e) => setSelectedOrigin(e.target.value)} onChange={(e) => setSelectedOrigin(e.target.value)}
> >
@@ -223,7 +223,7 @@ const ChooseDeck = () => {
</option> </option>
))} ))}
</select> </select>
<span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2 flex items-center gap-1"> <span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 ml-1 sm:ml-2 flex items-center gap-1 text-xs sm:text-sm">
Rendezés: Rendezés:
<button <button
type="button" type="button"
@@ -236,7 +236,7 @@ const ChooseDeck = () => {
</button> </button>
</span> </span>
<select <select
className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none" className="px-2 sm:px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none text-xs sm:text-sm"
value={sortBy} value={sortBy}
onChange={(e) => setSortBy(e.target.value)} onChange={(e) => setSortBy(e.target.value)}
> >
@@ -280,14 +280,14 @@ const ChooseDeck = () => {
)} )}
{/* Selection Info */} {/* Selection Info */}
<div className="mb-6 text-center"> <div className="mb-4 sm:mb-6 text-center">
<span className="text-[color:var(--color-text)] text-lg font-semibold"> <span className="text-[color:var(--color-text)] text-base sm:text-lg font-semibold">
Kiválasztva: {selectedDeckIds.length} pakli Kiválasztva: {selectedDeckIds.length} pakli
</span> </span>
</div> </div>
{/* Decks Grid */} {/* Decks Grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 sm:gap-6 lg:gap-8 mt-6 sm:mt-8">
{loading && ( {loading && (
<div className="col-span-full text-center text-[color:var(--color-text-muted]">Betöltés...</div> <div className="col-span-full text-center text-[color:var(--color-text-muted]">Betöltés...</div>
)} )}
@@ -305,24 +305,24 @@ const ChooseDeck = () => {
return ( return (
<div <div
key={deck.id} key={deck.id}
className={`relative flex flex-col justify-between h-48 bg-[color:var(--color-card)] rounded-2xl p-6 shadow-lg border-t-4 hover:scale-105 transition-transform duration-200 cursor-pointer ${ className={`relative flex flex-col justify-between h-40 sm:h-48 bg-[color:var(--color-card)] rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg border-t-4 hover:scale-105 transition-transform duration-200 cursor-pointer ${
isSelected ? "ring-4 ring-[color:var(--color-success)]" : "" isSelected ? "ring-2 sm:ring-4 ring-[color:var(--color-success)]" : ""
}`} }`}
style={{ borderTopColor: borderColor }} style={{ borderTopColor: borderColor }}
onClick={() => toggleDeckSelection(deck.id)} onClick={() => toggleDeckSelection(deck.id)}
> >
{/* Selection Indicator */} {/* Selection Indicator */}
<div className="absolute top-3 right-3"> <div className="absolute top-2 sm:top-3 right-2 sm:right-3">
{isSelected ? ( {isSelected ? (
<FaCheckCircle className="text-3xl text-[color:var(--color-success)]" /> <FaCheckCircle className="text-2xl sm:text-3xl text-[color:var(--color-success)]" />
) : ( ) : (
<FaCircle className="text-3xl text-[color:var(--color-text-muted)] opacity-30" /> <FaCircle className="text-2xl sm:text-3xl text-[color:var(--color-text-muted)] opacity-30" />
)} )}
</div> </div>
<div> <div>
<span <span
className="inline-block px-3 py-1 rounded-full text-xs font-bold mb-2" className="inline-block px-2 sm:px-3 py-1 rounded-full text-[10px] sm:text-xs font-bold mb-2"
style={{ style={{
background: deckType?.color, background: deckType?.color,
color: "var(--color-text-inverse)", color: "var(--color-text-inverse)",
@@ -330,11 +330,11 @@ const ChooseDeck = () => {
> >
{deck.type === "Luck" ? "Szerencse" : deck.type === "Question" ? "Kérdés" : "Joker"} {deck.type === "Luck" ? "Szerencse" : deck.type === "Question" ? "Kérdés" : "Joker"}
</span> </span>
<h2 className="text-xl font-bold text-[color:var(--color-text)] mb-1 truncate"> <h2 className="text-base sm:text-xl font-bold text-[color:var(--color-text)] mb-1 truncate">
{deck.name} {deck.name}
</h2> </h2>
</div> </div>
<div className="text-[color:var(--color-text-muted)] text-sm mt-2"> <div className="text-[color:var(--color-text-muted)] text-xs sm:text-sm mt-2">
Létrehozva: {deck.created} Létrehozva: {deck.created}
</div> </div>
</div> </div>
@@ -343,7 +343,7 @@ const ChooseDeck = () => {
</div> </div>
{/* Continue Button */} {/* Continue Button */}
<div className="flex justify-center mt-12"> <div className="flex justify-center mt-8 sm:mt-12">
<ButtonGreen <ButtonGreen
text={`Tovább (${selectedDeckIds.length} pakli kiválasztva)`} text={`Tovább (${selectedDeckIds.length} pakli kiválasztva)`}
onClick={handleContinue} onClick={handleContinue}
SerpentRace_Frontend/src/pages/Game/Lobby.jsx
+30 -30
View File
@@ -189,25 +189,25 @@ const Lobby = () => {
{/* Waiting for Approval Screen (Non-gamemaster, PRIVATE games) */} {/* Waiting for Approval Screen (Non-gamemaster, PRIVATE games) */}
{!isGamemaster && approvalStatus === "pending" && ( {!isGamemaster && approvalStatus === "pending" && (
<div className="flex-1 flex items-center justify-center px-4 py-24"> <div className="flex-1 flex items-center justify-center px-4 py-20 sm:py-24">
<div className="bg-zinc-900/95 backdrop-blur-sm rounded-3xl p-8 max-w-md w-full border border-yellow-500/50 shadow-2xl"> <div className="bg-zinc-900/95 backdrop-blur-sm rounded-2xl sm:rounded-3xl p-6 sm:p-8 max-w-md w-full border border-yellow-500/50 shadow-2xl">
<div className="text-center"> <div className="text-center">
<div className="mb-6"> <div className="mb-4 sm:mb-6">
<div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-yellow-900/30 border-4 border-yellow-500/50 animate-pulse"> <div className="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-yellow-900/30 border-4 border-yellow-500/50 animate-pulse">
<span className="text-4xl">⏳</span> <span className="text-3xl sm:text-4xl">⏳</span>
</div> </div>
</div> </div>
<h2 className="text-3xl font-bold text-yellow-300 mb-4">Várakozás jóváhagyásra</h2> <h2 className="text-2xl sm:text-3xl font-bold text-yellow-300 mb-3 sm:mb-4">Várakozás jóváhagyásra</h2>
<p className="text-zinc-300 text-lg mb-6"> <p className="text-zinc-300 text-base sm:text-lg mb-4 sm:mb-6">
A gamemaster még nem hagyta jóvá a csatlakozásodat. A gamemaster még nem hagyta jóvá a csatlakozásodat.
</p> </p>
<p className="text-zinc-400 text-sm mb-8"> <p className="text-zinc-400 text-sm mb-8">
Kérjük, várj türelemmel, amíg a gamemaster elfogadja a kérelmedet. Kérjük, várj türelemmel, amíg a gamemaster elfogadja a kérelmedet.
</p> </p>
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-2 sm:gap-3">
<div className="bg-zinc-800 rounded-lg p-4 border border-zinc-700"> <div className="bg-zinc-800 rounded-lg p-3 sm:p-4 border border-zinc-700">
<p className="text-zinc-400 text-xs mb-1">Játék kód:</p> <p className="text-zinc-400 text-xs mb-1">Játék kód:</p>
<p className="text-2xl font-mono font-bold text-green-300 tracking-widest">{gameCode}</p> <p className="text-xl sm:text-2xl font-mono font-bold text-green-300 tracking-widest">{gameCode}</p>
</div> </div>
<button <button
onClick={handleExit} onClick={handleExit}
@@ -223,28 +223,28 @@ const Lobby = () => {
{/* Normal Lobby View (Gamemaster or approved players) */} {/* Normal Lobby View (Gamemaster or approved players) */}
{(isGamemaster || approvalStatus !== "pending") && ( {(isGamemaster || approvalStatus !== "pending") && (
<div className="flex-1 flex items-center justify-center px-4 py-24"> <div className="flex-1 flex items-center justify-center px-4 py-20 sm:py-24">
<section <section
ref={sectionRef} ref={sectionRef}
className={`w-full max-w-3xl rounded-2xl p-8 md:p-10 transition-all duration-1000 ease-out backdrop-blur-md shadow-2xl ${ className={`w-full max-w-3xl rounded-xl sm:rounded-2xl p-6 sm:p-8 md:p-10 transition-all duration-1000 ease-out backdrop-blur-md shadow-2xl ${
visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10" visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
}`} }`}
style={{ background: "rgba(0,0,0,0.25)" }} style={{ background: "rgba(0,0,0,0.25)" }}
> >
<h1 className="text-4xl md:text-5xl font-extrabold text-green-300 mb-4 text-center tracking-wide drop-shadow-lg"> <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-green-300 mb-3 sm:mb-4 text-center tracking-wide drop-shadow-lg">
Játék Lobby Játék Lobby
</h1> </h1>
{/* Game Code Display */} {/* Game Code Display */}
<div className="bg-gradient-to-r from-green-600/20 to-teal-600/20 rounded-xl p-6 mb-6 border-2 border-green-400/50"> <div className="bg-gradient-to-r from-green-600/20 to-teal-600/20 rounded-lg sm:rounded-xl p-4 sm:p-6 mb-4 sm:mb-6 border-2 border-green-400/50">
<p className="text-lg text-zinc-300 mb-2 text-center font-semibold">Játék Kód:</p> <p className="text-base sm:text-lg text-zinc-300 mb-2 text-center font-semibold">Játék Kód:</p>
<div className="flex items-center justify-center gap-3"> <div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-3">
<p className="text-5xl font-mono font-extrabold text-green-300 tracking-widest drop-shadow-lg"> <p className="text-3xl sm:text-4xl lg:text-5xl font-mono font-extrabold text-green-300 tracking-widest drop-shadow-lg">
{gameCode} {gameCode}
</p> </p>
<button <button
onClick={copyGameCode} onClick={copyGameCode}
className="bg-green-600 hover:bg-green-500 text-white px-4 py-2 rounded-lg font-semibold transition-all duration-200 hover:scale-105" className="bg-green-600 hover:bg-green-500 text-white px-3 sm:px-4 py-2 rounded-lg font-semibold transition-all duration-200 hover:scale-105 text-sm sm:text-base w-full sm:w-auto"
title="Másolás vágólapra" title="Másolás vágólapra"
> >
📋 Másolás 📋 Másolás
@@ -268,33 +268,33 @@ const Lobby = () => {
</span> </span>
</div> </div>
<p className="text-lg text-zinc-300 mb-6 text-center">Játékosok ({currentPlayers.length}):</p> <p className="text-base sm:text-lg text-zinc-300 mb-4 sm:mb-6 text-center">Játékosok ({currentPlayers.length}):</p>
{/* Pending Players Section (Gamemaster only, PRIVATE games) */} {/* Pending Players Section (Gamemaster only, PRIVATE games) */}
{isGamemaster && pendingPlayers && pendingPlayers.length > 0 && ( {isGamemaster && pendingPlayers && pendingPlayers.length > 0 && (
<div className="bg-yellow-900/20 border-2 border-yellow-500/50 rounded-xl shadow-lg p-6 mb-6"> <div className="bg-yellow-900/20 border-2 border-yellow-500/50 rounded-lg sm:rounded-xl shadow-lg p-4 sm:p-6 mb-4 sm:mb-6">
<h3 className="text-xl font-bold text-yellow-300 mb-4 flex items-center gap-2"> <h3 className="text-lg sm:text-xl font-bold text-yellow-300 mb-3 sm:mb-4 flex items-center gap-2">
<span>⏳</span> <span>⏳</span>
Jóváhagyásra váró játékosok ({pendingPlayers.length}) Jóváhagyásra váró játékosok ({pendingPlayers.length})
</h3> </h3>
<ul className="flex flex-col gap-3"> <ul className="flex flex-col gap-3">
{pendingPlayers.map((player, index) => ( {pendingPlayers.map((player, index) => (
<li key={index} className="bg-zinc-700 py-3 px-4 rounded-xl flex items-center gap-4"> <li key={index} className="bg-zinc-700 py-2 sm:py-3 px-3 sm:px-4 rounded-lg sm:rounded-xl flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4">
<div className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold bg-yellow-900/30 text-yellow-300 border border-yellow-500/50"> <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-xs sm:text-sm font-semibold bg-yellow-900/30 text-yellow-300 border border-yellow-500/50">
{getInitials(player.playerName)} {getInitials(player.playerName)}
</div> </div>
<div className="flex-1"> <div className="flex-1 min-w-0">
<span className="text-white text-lg font-semibold">{player.playerName}</span> <span className="text-white text-base sm:text-lg font-semibold truncate block">{player.playerName}</span>
{player.isAuthenticated && ( {player.isAuthenticated && (
<span className="ml-2 text-xs bg-green-600/30 text-green-300 px-2 py-0.5 rounded-full border border-green-500/50"> <span className="ml-2 text-xs bg-green-600/30 text-green-300 px-2 py-0.5 rounded-full border border-green-500/50">
✓ Bejelentkezve ✓ Bejelentkezve
</span> </span>
)} )}
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2 w-full sm:w-auto">
<button <button
onClick={() => handleApprovePlayer(player.playerName)} onClick={() => handleApprovePlayer(player.playerName)}
className="bg-green-600 hover:bg-green-500 text-white px-4 py-2 rounded-lg font-semibold transition-all duration-200 hover:scale-105 flex items-center gap-1" className="flex-1 sm:flex-none bg-green-600 hover:bg-green-500 text-white px-3 sm:px-4 py-2 rounded-lg font-semibold transition-all duration-200 hover:scale-105 flex items-center justify-center gap-1 text-sm"
title="Jóváhagyás" title="Jóváhagyás"
> >
<span>✓</span> <span>✓</span>
@@ -315,8 +315,8 @@ const Lobby = () => {
</div> </div>
)} )}
<div className="bg-zinc-800/90 rounded-xl shadow-lg p-6 mb-8"> <div className="bg-zinc-800/90 rounded-lg sm:rounded-xl shadow-lg p-4 sm:p-6 mb-6 sm:mb-8">
<ul className="flex flex-col gap-4"> <ul className="flex flex-col gap-3 sm:gap-4">
{currentPlayers.length === 0 ? ( {currentPlayers.length === 0 ? (
<li className="text-center text-zinc-400 py-4">Várakozás játékosokra...</li> <li className="text-center text-zinc-400 py-4">Várakozás játékosokra...</li>
) : ( ) : (
@@ -359,7 +359,7 @@ const Lobby = () => {
)} )}
</div> </div>
<div className="flex justify-center gap-4"> <div className="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
{isGamemaster ? ( {isGamemaster ? (
/* Gamemaster view - can start game */ /* Gamemaster view - can start game */
<button <button