Compare commits
2 Commits
22ea5c43f2
...
69aaf93db9
| Author | SHA1 | Date | |
|---|---|---|---|
 Donat
|
69aaf93db9 | ||
 mategergely33
|
4bcb93d357 |
@@ -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
|
||||
if (!cardData) {
|
||||
return (
|
||||
<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 null
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -231,22 +218,22 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
|
||||
)}
|
||||
|
||||
{/* Header */}
|
||||
<div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<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 flex-col sm:flex-row items-start sm:items-center justify-between 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 === 'JOKER' && '🃏'}
|
||||
{cardData.type === 'LUCK' && '🎲'}
|
||||
</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 ? cardType : cardData.type) === 'QUESTION' && 'Feladat kártya'}
|
||||
{(isCreating ? cardType : cardData.type) === 'JOKER' && 'Joker kártya'}
|
||||
{(isCreating ? cardType : cardData.type) === 'LUCK' && 'Szerencse kártya'}
|
||||
</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.subType === 'quiz' && 'Quiz (A/B/C/D)'}
|
||||
@@ -259,19 +246,19 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
|
||||
</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
|
||||
onClick={() => setShowPreview(!showPreview)}
|
||||
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
|
||||
? '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)]'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<FaEye />
|
||||
Előnézet
|
||||
<FaEye className="text-sm" />
|
||||
<span className="hidden sm:inline">Előnézet</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@@ -279,17 +266,17 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
|
||||
notifyWarning('Kártya készítés megszakítva')
|
||||
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 />
|
||||
Mégse
|
||||
<FaTimes className="text-sm" />
|
||||
<span className="hidden sm:inline">Mégse</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
</div>
|
||||
@@ -297,13 +284,13 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{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} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full overflow-y-auto p-6">
|
||||
<div className="p-4 sm:p-6">
|
||||
{cardData.type === 'QUESTION' && (
|
||||
<TaskCardEditor
|
||||
card={cardData}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
// Deck alapadatok szerkesztése és mentés
|
||||
|
||||
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 = [
|
||||
{ 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 }) {
|
||||
const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState(false);
|
||||
const [isPrivacyDropdownOpen, setIsPrivacyDropdownOpen] = useState(false);
|
||||
const [isDetailsExpanded, setIsDetailsExpanded] = useState(false);
|
||||
const typeDropdownRef = useRef(null);
|
||||
const privacyDropdownRef = useRef(null);
|
||||
|
||||
@@ -47,68 +48,78 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack, onDelete })
|
||||
// Remove unused card count variables
|
||||
|
||||
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 */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-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-2 sm:gap-4 w-full sm:w-auto">
|
||||
<button
|
||||
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 />
|
||||
Vissza
|
||||
<FaArrowLeft className="text-sm" />
|
||||
<span className="hidden sm:inline">Vissza</span>
|
||||
</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
|
||||
</h1>
|
||||
</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 && (
|
||||
<button
|
||||
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 />
|
||||
Törlés
|
||||
<FaTrash className="text-sm" />
|
||||
<span className="hidden sm:inline">Törlés</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Row */}
|
||||
<div className="space-y-4">
|
||||
{/* Two Column Layout */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* Deck Name - Takes up 2 columns */}
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
📦 Pakli neve
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={deck.name}
|
||||
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
|
||||
placeholder="Add meg a pakli nevét..."
|
||||
/>
|
||||
</div>
|
||||
{/* Collapsible Details Section */}
|
||||
<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>
|
||||
|
||||
{/* Empty space for visual balance */}
|
||||
<div className="hidden md:block"></div>
|
||||
</div>
|
||||
{isDetailsExpanded && (
|
||||
<div className="space-y-4 px-2 pb-3 pt-2">
|
||||
{/* Two Column Layout */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* Deck Name - Takes up 2 columns */}
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
📦 Pakli neve
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={deck.name}
|
||||
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
|
||||
placeholder="Add meg a pakli nevét..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Type, Privacy and Description Row */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* Empty space for visual balance */}
|
||||
<div className="hidden md:block"></div>
|
||||
</div>
|
||||
|
||||
{/* Type, Privacy and Description Row */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* Deck Type */}
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
@@ -226,7 +237,9 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack, onDelete })
|
||||
placeholder="Rövid leírás..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -147,10 +147,10 @@ const DeckManager = () => {
|
||||
|
||||
return (
|
||||
<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 */}
|
||||
<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 gap-2 items-center w-full md:w-auto">
|
||||
<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 flex-wrap">
|
||||
<SearchBox
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
@@ -158,10 +158,10 @@ const DeckManager = () => {
|
||||
placeholder="Keresés..."
|
||||
className="mr-4"
|
||||
/>
|
||||
<FaFilter style={{ color: "var(--color-success)" }} className="mr-2" />
|
||||
<span className="text-[color:var(--color-text)] font-semibold mr-2">Típus:</span>
|
||||
<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-1 sm:mr-2 text-xs sm:text-sm">Típus:</span>
|
||||
<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"
|
||||
? "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"
|
||||
@@ -173,7 +173,7 @@ const DeckManager = () => {
|
||||
{deckTypes.map((type) => (
|
||||
<button
|
||||
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
|
||||
? "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"
|
||||
@@ -190,10 +190,9 @@ const DeckManager = () => {
|
||||
: type.label}
|
||||
</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
|
||||
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"
|
||||
style={{ backgroundColor: "rgba(0, 255, 0, 0.10)" }}
|
||||
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}
|
||||
onChange={(e) => setSelectedOrigin(e.target.value)}
|
||||
>
|
||||
@@ -201,7 +200,7 @@ const DeckManager = () => {
|
||||
<option
|
||||
key={origin}
|
||||
value={origin}
|
||||
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
|
||||
className="bg-zinc-800 text-white"
|
||||
>
|
||||
{origin === "Mind"
|
||||
? "Mind"
|
||||
@@ -213,7 +212,7 @@ const DeckManager = () => {
|
||||
</option>
|
||||
))}
|
||||
</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:
|
||||
<button
|
||||
type="button"
|
||||
@@ -226,33 +225,32 @@ const DeckManager = () => {
|
||||
</button>
|
||||
</span>
|
||||
<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"
|
||||
style={{ backgroundColor: "rgba(0, 255, 0, 0.10)" }}
|
||||
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"
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value)}
|
||||
aria-label="Rendezés"
|
||||
>
|
||||
<option
|
||||
value="date-asc"
|
||||
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
|
||||
className="bg-zinc-800 text-white"
|
||||
>
|
||||
📅↑
|
||||
</option>
|
||||
<option
|
||||
value="date-desc"
|
||||
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
|
||||
className="bg-zinc-800 text-white"
|
||||
>
|
||||
📅↓
|
||||
</option>
|
||||
<option
|
||||
value="abc-asc"
|
||||
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
|
||||
className="bg-zinc-800 text-white"
|
||||
>
|
||||
A→Z
|
||||
</option>
|
||||
<option
|
||||
value="abc-desc"
|
||||
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
|
||||
className="bg-zinc-800 text-white"
|
||||
>
|
||||
Z→A
|
||||
</option>
|
||||
@@ -316,14 +314,14 @@ const DeckManager = () => {
|
||||
</div>
|
||||
|
||||
{/* 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) */}
|
||||
<div
|
||||
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" />
|
||||
<span className="text-[color:var(--color-text)] font-semibold">Új pakli létrehozása</span>
|
||||
<FaPlus style={{ color: "var(--color-success)" }} className="text-4xl sm:text-5xl mb-2" />
|
||||
<span className="text-[color:var(--color-text)] font-semibold text-sm sm:text-base">Új pakli létrehozása</span>
|
||||
</div>
|
||||
{/* Existing Decks (from backend) */}
|
||||
{loading && (
|
||||
@@ -338,13 +336,13 @@ const DeckManager = () => {
|
||||
return (
|
||||
<div
|
||||
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 }}
|
||||
onClick={() => setSelectedDeck(deck)}
|
||||
>
|
||||
<div>
|
||||
<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={{
|
||||
background: deckType?.color,
|
||||
color: "var(--color-text-inverse)",
|
||||
|
||||
@@ -47,7 +47,7 @@ const Navbar = () => {
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
<button onClick={goAbout} className={navLinkClass}>
|
||||
Rólunk
|
||||
@@ -140,7 +140,7 @@ const Navbar = () => {
|
||||
</div>
|
||||
|
||||
{/* Mobile Hamburger */}
|
||||
<div className="md:hidden flex items-center">
|
||||
<div className="lg:hidden flex items-center">
|
||||
<button
|
||||
onClick={() => setMenuOpen(!menuOpen)}
|
||||
className="text-white focus:outline-none"
|
||||
@@ -171,81 +171,91 @@ const Navbar = () => {
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{menuOpen && (
|
||||
<div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
|
||||
<button
|
||||
onClick={() => {
|
||||
goAbout()
|
||||
setMenuOpen(false)
|
||||
}}
|
||||
className={navLinkClass}
|
||||
>
|
||||
Rólunk
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
goContacts()
|
||||
setMenuOpen(false)
|
||||
}}
|
||||
className={navLinkClass}
|
||||
>
|
||||
Kapcsolat
|
||||
</button>
|
||||
<>
|
||||
{/* Overlay when menu is open */}
|
||||
<div
|
||||
className="lg:hidden fixed inset-0 bg-black/50 z-40 top-16"
|
||||
onClick={() => setMenuOpen(false)}
|
||||
/>
|
||||
|
||||
{isLoggedIn && (
|
||||
<>
|
||||
<Link to="/decks" onClick={() => setMenuOpen(false)} className={navLinkClass}>
|
||||
Paklik
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
goHome()
|
||||
setMenuOpen(false)
|
||||
}}
|
||||
className={navLinkClassPlay}
|
||||
>
|
||||
Játék
|
||||
</button>
|
||||
|
||||
{!isLoggedIn ? (
|
||||
<div className="flex flex-col space-y-2">
|
||||
{/* 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
|
||||
onClick={() => {
|
||||
goLogin()
|
||||
goAbout()
|
||||
setMenuOpen(false)
|
||||
}}
|
||||
className="block px-3 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
|
||||
className={navLinkClass}
|
||||
>
|
||||
Bejelentkezés
|
||||
Rólunk
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
goContacts()
|
||||
setMenuOpen(false)
|
||||
}}
|
||||
className={navLinkClass}
|
||||
>
|
||||
Kapcsolat
|
||||
</button>
|
||||
|
||||
{/* Elválasztó vonal mobilon */}
|
||||
<div className="w-full h-px bg-white/30"></div>
|
||||
{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">
|
||||
Paklik
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<Link
|
||||
to="/register"
|
||||
onClick={() => setMenuOpen(false)}
|
||||
className="block px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all"
|
||||
<button
|
||||
onClick={() => {
|
||||
goHome()
|
||||
setMenuOpen(false)
|
||||
}}
|
||||
className={navLinkClassPlay}
|
||||
>
|
||||
Regisztráció
|
||||
</Link>
|
||||
Játék
|
||||
</button>
|
||||
|
||||
{!isLoggedIn ? (
|
||||
<>
|
||||
<div className="w-full h-px bg-white/30 my-2"></div>
|
||||
<button
|
||||
onClick={() => {
|
||||
goLogin()
|
||||
setMenuOpen(false)
|
||||
}}
|
||||
className="px-3 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
|
||||
>
|
||||
Bejelentkezés
|
||||
</button>
|
||||
|
||||
<Link
|
||||
to="/register"
|
||||
onClick={() => setMenuOpen(false)}
|
||||
className="px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all text-center"
|
||||
>
|
||||
Regisztráció
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-full h-px bg-white/30 my-2"></div>
|
||||
<button
|
||||
onClick={() => {
|
||||
handleLogout()
|
||||
setMenuOpen(false)
|
||||
}}
|
||||
className="flex items-center gap-2 px-3 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white transition-all"
|
||||
title="Kijelentkezés"
|
||||
>
|
||||
<FaSignOutAlt className="h-4 w-4" />
|
||||
<span>Kijelentkezés</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => {
|
||||
handleLogout()
|
||||
setMenuOpen(false)
|
||||
}}
|
||||
className="flex items-center gap-2 px-3 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white transition-all"
|
||||
title="Kijelentkezés"
|
||||
>
|
||||
<FaSignOutAlt className="h-4 w-4" />
|
||||
<span>Kijelentkezés</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
)
|
||||
|
||||
@@ -50,3 +50,33 @@
|
||||
--color-warning: #e6c04f;
|
||||
--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;
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@ import { motion } from "framer-motion"
|
||||
const baseMotion = {
|
||||
initial: { opacity: 0, y: 20 },
|
||||
whileInView: { opacity: 1, y: 0 },
|
||||
viewport: { once: true, amount: 0.2 },
|
||||
viewport: { once: true, amount: 0.05 },
|
||||
transition: { duration: 0.8 },
|
||||
}
|
||||
|
||||
@@ -135,7 +135,7 @@ const About = () => {
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
<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">
|
||||
@@ -147,7 +147,7 @@ const About = () => {
|
||||
<motion.section className="max-w-5xl mx-auto" {...getMotionProps({ transition: { duration: 0.7 } })}>
|
||||
{/* Rólunk cím */}
|
||||
<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 } })}
|
||||
>
|
||||
<span className="inline-block animate-pulse mr-2"></span> Rólunk
|
||||
@@ -155,7 +155,7 @@ const About = () => {
|
||||
|
||||
{/* Leírás */}
|
||||
<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 } })}
|
||||
>
|
||||
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 */}
|
||||
<motion.div
|
||||
className="mt-12"
|
||||
className="mt-8 sm:mt-12"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
viewport={{ once: true, amount: 0.05 }}
|
||||
variants={{
|
||||
hidden: {},
|
||||
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) */}
|
||||
<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
|
||||
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}
|
||||
>
|
||||
<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 */}
|
||||
<FaLightbulb className="w-8 h-8 text-black" />
|
||||
<FaLightbulb className="w-6 h-6 sm:w-8 sm:h-8 text-black" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-center mb-2">Innováció</h3>
|
||||
<p className="text-zinc-300 text-center">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-center mb-2">Innováció</h3>
|
||||
<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.
|
||||
</p>
|
||||
</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}
|
||||
>
|
||||
<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 */}
|
||||
<FaUsers className="w-8 h-8 text-black" />
|
||||
<FaUsers className="w-6 h-6 sm:w-8 sm:h-8 text-black" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-center mb-2">Közösség</h3>
|
||||
<p className="text-zinc-300 text-center">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-center mb-2">Közösség</h3>
|
||||
<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.
|
||||
</p>
|
||||
</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}
|
||||
>
|
||||
<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 */}
|
||||
<FaShieldAlt className="w-8 h-8 text-black" />
|
||||
<FaShieldAlt className="w-6 h-6 sm:w-8 sm:h-8 text-black" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-center mb-2">Minőség</h3>
|
||||
<p className="text-zinc-300 text-center">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-center mb-2">Minőség</h3>
|
||||
<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.
|
||||
</p>
|
||||
</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 */}
|
||||
<motion.div
|
||||
className="mt-16"
|
||||
className="mt-12 sm:mt-16"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
viewport={{ once: true, amount: 0.05 }}
|
||||
variants={{
|
||||
hidden: {},
|
||||
visible: { transition: { staggerChildren: 0.06, delayChildren: 0.25 } },
|
||||
}}
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-green-300 mb-6">Csapatunk</h2>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-green-300 mb-4 sm:mb-6">Csapatunk</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8">
|
||||
{teamMembers.map((member, i) => {
|
||||
const isLast = i === teamMembers.length - 1
|
||||
const itemsInLastRow = teamMembers.length % 3
|
||||
@@ -242,18 +242,18 @@ const About = () => {
|
||||
return (
|
||||
<motion.div
|
||||
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 ${
|
||||
shouldCenter ? "md:col-start-2" : ""
|
||||
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 ? "sm:col-start-2" : ""
|
||||
}`}
|
||||
variants={itemVariant}
|
||||
>
|
||||
<img
|
||||
src={member.photo}
|
||||
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>
|
||||
<p className="text-zinc-400">{member.role}</p>
|
||||
<h4 className="text-base sm:text-lg font-bold">{member.name}</h4>
|
||||
<p className="text-sm sm:text-base text-zinc-400">{member.role}</p>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
@@ -263,42 +263,42 @@ const About = () => {
|
||||
{/* Új: Kapcsolat szekció — egységes megjelenés (animálva) */}
|
||||
<motion.section
|
||||
id="contact"
|
||||
className="mt-16 bg-transparent"
|
||||
className="mt-12 sm:mt-16 bg-transparent"
|
||||
{...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">
|
||||
<h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
|
||||
<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-2xl sm:text-3xl font-bold mb-4 sm:mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
|
||||
Kapcsolat
|
||||
</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 */}
|
||||
<div className="flex flex-col justify-center gap-6">
|
||||
<div className="bg-zinc-800 rounded-xl p-5 shadow-md flex items-start gap-4">
|
||||
<div className="bg-emerald-500 text-black rounded-lg p-3 text-xl flex-shrink-0">✉️</div>
|
||||
<div className="flex flex-col justify-center gap-4 sm:gap-6">
|
||||
<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-2 sm:p-3 text-lg sm:text-xl flex-shrink-0">✉️</div>
|
||||
<div>
|
||||
<div className="font-semibold">Email</div>
|
||||
<div className="text-zinc-300">hello@serpentrace.hu</div>
|
||||
<div className="font-semibold text-sm sm:text-base">Email</div>
|
||||
<div className="text-zinc-300 text-sm sm:text-base">hello@serpentrace.hu</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-800 rounded-xl p-5 shadow-md flex items-start gap-4">
|
||||
<div className="bg-emerald-500 text-black rounded-lg p-3 text-xl flex-shrink-0">📞</div>
|
||||
<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-2 sm:p-3 text-lg sm:text-xl flex-shrink-0">📞</div>
|
||||
<div>
|
||||
<div className="font-semibold">Telefon</div>
|
||||
<div className="text-zinc-300">+36 20 123 4567</div>
|
||||
<div className="font-semibold text-sm sm:text-base">Telefon</div>
|
||||
<div className="text-zinc-300 text-sm sm:text-base">+36 20 123 4567</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-800 rounded-xl p-5 shadow-md flex items-start gap-4">
|
||||
<div className="bg-emerald-500 text-black rounded-lg p-3 text-xl flex-shrink-0">📍</div>
|
||||
<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-2 sm:p-3 text-lg sm:text-xl flex-shrink-0">📍</div>
|
||||
<div>
|
||||
<div className="font-semibold">Iroda</div>
|
||||
<div className="text-zinc-300">Budapest, Magyarország</div>
|
||||
<div className="font-semibold text-sm sm:text-base">Iroda</div>
|
||||
<div className="text-zinc-300 text-sm sm:text-base">Budapest, Magyarország</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ó,
|
||||
kérjük, írj részletesen a projektedről.
|
||||
</p>
|
||||
|
||||
@@ -15,16 +15,16 @@ export default function AuthCard({ isRegistering, setIsRegistering }) {
|
||||
transition={{ duration: 0.5, ease: "easeInOut" }}
|
||||
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
|
||||
className={`transition-all duration-500 ${
|
||||
className={`hidden md:flex transition-all duration-500 ${
|
||||
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} />
|
||||
<div className="h-6" />
|
||||
<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!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -124,23 +124,23 @@ export default function LoginForm() {
|
||||
</span>
|
||||
</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
|
||||
</h2>
|
||||
|
||||
{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!"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{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}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4 w-full">
|
||||
<form onSubmit={handleSubmit} className="space-y-3 sm:space-y-4 w-full">
|
||||
<InputBox
|
||||
type="email"
|
||||
placeholder="Email cím"
|
||||
@@ -169,14 +169,14 @@ export default function LoginForm() {
|
||||
|
||||
{/* Forgot Password Modal */}
|
||||
{showForgotPasswordModal && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowForgotPasswordModal(false)}>
|
||||
<div className="bg-white rounded-xl shadow-2xl p-8 w-96 max-w-full" onClick={(e) => e.stopPropagation()}>
|
||||
<h3 className="text-2xl font-bold text-gray-800 mb-4">Jelszó visszaállítás</h3>
|
||||
<p className="text-gray-600 mb-6 text-sm">
|
||||
<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-6 sm:p-8 w-full max-w-md" onClick={(e) => e.stopPropagation()}>
|
||||
<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-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.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleForgotPassword} className="space-y-4">
|
||||
<form onSubmit={handleForgotPassword} className="space-y-3 sm:space-y-4">
|
||||
<InputBox
|
||||
type="email"
|
||||
placeholder="Email cím"
|
||||
|
||||
@@ -93,17 +93,17 @@ export default function RegisterForm() {
|
||||
</span>
|
||||
</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ó
|
||||
</h2>
|
||||
|
||||
{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}
|
||||
</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="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)} />
|
||||
|
||||
@@ -30,11 +30,11 @@ const Card = ({ icon, label, description, targetId, className }) => {
|
||||
return (
|
||||
<div
|
||||
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>
|
||||
<h3 className="text-2xl font-bold mb-2">{label}</h3>
|
||||
<p className="text-white/90 text-sm">{description}</p>
|
||||
<div className="text-3xl sm:text-4xl lg:text-5xl mb-3 sm:mb-4 flex justify-center">{icon}</div>
|
||||
<h3 className="text-xl sm:text-2xl font-bold mb-2">{label}</h3>
|
||||
<p className="text-white/90 text-xs sm:text-sm">{description}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -43,10 +43,10 @@ const SectionContainer = ({ id, title, children }) => {
|
||||
return (
|
||||
<section
|
||||
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">
|
||||
<h2 className="text-4xl font-bold border-b-4 inline-block border-emerald-400 pb-2 text-white">
|
||||
<div className="text-center mb-8 sm:mb-10 lg:mb-12">
|
||||
<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}
|
||||
</h2>
|
||||
</div>
|
||||
@@ -80,14 +80,14 @@ const CompanyHub = () => {
|
||||
<div className="relative z-10 flex flex-col min-h-screen">
|
||||
<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
|
||||
ref={sectionRef}
|
||||
className={`max-w-5xl mx-auto transition-all duration-1000 ease-out ${
|
||||
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
|
||||
icon={<FaBuilding />}
|
||||
label="Mit nyújtunk"
|
||||
@@ -113,16 +113,16 @@ const CompanyHub = () => {
|
||||
|
||||
{/* Mit nyújtunk */}
|
||||
<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 */}
|
||||
<div className="bg-white/5 rounded-3xl border border-gray-700 shadow-lg p-10 flex flex-col gap-8">
|
||||
<h3 className="text-2xl font-extrabold flex items-center gap-4 text-emerald-400">
|
||||
<FaPalette className="text-4xl" />
|
||||
<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-xl sm:text-2xl font-extrabold flex items-center gap-3 sm:gap-4 text-emerald-400">
|
||||
<FaPalette className="text-3xl sm:text-4xl" />
|
||||
Egyénre szabás
|
||||
</h3>
|
||||
<ul className="list-disc ml-6 space-y-4 text-white/90 text-lg">
|
||||
<li className="flex items-center gap-4">
|
||||
<FaUserCheck className="text-green-400 text-2xl" />
|
||||
<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-3 sm:gap-4">
|
||||
<FaUserCheck className="text-green-400 text-xl sm:text-2xl" />
|
||||
Testreszabható design és színek
|
||||
</li>
|
||||
<li className="flex items-center gap-4">
|
||||
@@ -137,12 +137,12 @@ const CompanyHub = () => {
|
||||
</div>
|
||||
|
||||
{/* Árazás */}
|
||||
<div className="bg-white/5 rounded-3xl border border-gray-700 shadow-lg p-10 flex flex-col gap-8">
|
||||
<h3 className="text-2xl font-extrabold flex items-center gap-4 text-emerald-400">
|
||||
<FaDollarSign className="text-4xl" />
|
||||
<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-xl sm:text-2xl font-extrabold flex items-center gap-3 sm:gap-4 text-emerald-400">
|
||||
<FaDollarSign className="text-3xl sm:text-4xl" />
|
||||
Árazás
|
||||
</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">
|
||||
<FaUsers className="text-purple-400 text-2xl" />
|
||||
Kedvezményes csomagok KKV-knak
|
||||
@@ -159,9 +159,9 @@ const CompanyHub = () => {
|
||||
</div>
|
||||
|
||||
{/* Demó videó */}
|
||||
<div className="bg-white/5 rounded-3xl border border-gray-700 shadow-lg p-10 flex flex-col gap-8">
|
||||
<h3 className="text-2xl font-extrabold flex items-center gap-4 text-emerald-400">
|
||||
<FaVideo className="text-4xl" />
|
||||
<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-xl sm:text-2xl font-extrabold flex items-center gap-3 sm:gap-4 text-emerald-400">
|
||||
<FaVideo className="text-3xl sm:text-4xl" />
|
||||
Csapatunk videó
|
||||
</h3>
|
||||
<video controls className="w-full rounded-xl shadow-xl">
|
||||
@@ -173,34 +173,34 @@ const CompanyHub = () => {
|
||||
</SectionContainer>
|
||||
|
||||
{/* 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 */}
|
||||
<div
|
||||
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
|
||||
</h2>
|
||||
<form className="grid gap-6 md:grid-cols-2">
|
||||
<form className="grid gap-4 sm:gap-6 md:grid-cols-2">
|
||||
<input
|
||||
type="text"
|
||||
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
|
||||
type="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
|
||||
placeholder="Üzenet"
|
||||
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
|
||||
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
|
||||
</button>
|
||||
@@ -210,14 +210,14 @@ const CompanyHub = () => {
|
||||
{/* Join */}
|
||||
<div
|
||||
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
|
||||
</h2>
|
||||
<ul className="list-disc space-y-4 ml-8 text-base text-white/90">
|
||||
<li className="flex gap-3 items-center">
|
||||
<FaHandsHelping className="text-green-400 text-xl flex-shrink-0" />
|
||||
<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-2 sm:gap-3 items-center">
|
||||
<FaHandsHelping className="text-green-400 text-lg sm:text-xl flex-shrink-0" />
|
||||
Gamification a vállalati kultúrában
|
||||
</li>
|
||||
<li className="flex gap-3 items-center">
|
||||
|
||||
@@ -387,9 +387,9 @@ export default function DeckCreator() {
|
||||
/>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex">
|
||||
<div className="flex-1 flex flex-col lg:flex-row overflow-hidden">
|
||||
{/* 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
|
||||
cards={deck.cards}
|
||||
selectedCard={selectedCard}
|
||||
@@ -403,7 +403,7 @@ export default function DeckCreator() {
|
||||
</div>
|
||||
|
||||
{/* 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
|
||||
card={selectedCard}
|
||||
isCreating={isCreatingCard}
|
||||
|
||||
@@ -183,19 +183,20 @@ const Card_display = () => {
|
||||
<div className="w-full min-h-screen bg-[color:var(--color-background)] flex flex-col">
|
||||
<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 */}
|
||||
<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
|
||||
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 />
|
||||
Vissza a paklikhoz
|
||||
<span className="hidden sm:inline">Vissza a paklikhoz</span>
|
||||
<span className="sm:hidden">Vissza</span>
|
||||
</button>
|
||||
{deck && (
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-2xl font-bold text-[color:var(--color-text)]">{deck.name}</h1>
|
||||
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
|
||||
<h1 className="text-xl sm:text-2xl font-bold text-[color:var(--color-text)]">{deck.name}</h1>
|
||||
{currentDeckType && (
|
||||
<span
|
||||
className="inline-block px-3 py-1 rounded-full text-sm font-bold"
|
||||
@@ -226,16 +227,17 @@ const Card_display = () => {
|
||||
{/* Filters and controls */}
|
||||
{!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 gap-2 items-center w-full md:w-auto">
|
||||
<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 flex-col sm:flex-row gap-3 items-stretch sm:items-center w-full">
|
||||
<SearchBox
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
width={300}
|
||||
placeholder="Keresés kérdésben vagy válaszokban..."
|
||||
className="mr-4"
|
||||
placeholder="Keresés..."
|
||||
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:
|
||||
<button
|
||||
type="button"
|
||||
@@ -248,7 +250,7 @@ const Card_display = () => {
|
||||
</button>
|
||||
</span>
|
||||
<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)" }}
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value)}
|
||||
@@ -285,6 +287,7 @@ const Card_display = () => {
|
||||
Válaszok száma ↓
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -318,15 +321,15 @@ const Card_display = () => {
|
||||
)}
|
||||
|
||||
{/* 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 items-center gap-3">
|
||||
<span className="text-[color:var(--color-text-muted)] text-sm font-medium">
|
||||
Elemek oldalanként:
|
||||
<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-2 sm:gap-3 w-full sm:w-auto justify-between sm:justify-start">
|
||||
<span className="text-[color:var(--color-text-muted)] text-xs sm:text-sm font-medium">
|
||||
Oldalanként:
|
||||
</span>
|
||||
<select
|
||||
value={itemsPerPage}
|
||||
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={20}>20</option>
|
||||
@@ -335,10 +338,11 @@ const Card_display = () => {
|
||||
</select>
|
||||
</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 ? (
|
||||
<>
|
||||
{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</>
|
||||
@@ -347,7 +351,7 @@ const Card_display = () => {
|
||||
</div>
|
||||
|
||||
{/* 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 && (
|
||||
<div className="col-span-full text-center text-[color:var(--color-text-muted)] py-10">
|
||||
Nincsenek kártyák ebben a pakliban.
|
||||
@@ -739,21 +743,21 @@ const Card_display = () => {
|
||||
|
||||
{/* Pagination Controls */}
|
||||
{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
|
||||
onClick={() => setCurrentPage(prev => Math.max(1, prev - 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
|
||||
? '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'
|
||||
}`}
|
||||
>
|
||||
<FaChevronLeft />
|
||||
Előző
|
||||
<span className="hidden sm:inline">Előző</span>
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1 sm:gap-2">
|
||||
{[...Array(totalPages)].map((_, index) => {
|
||||
const pageNum = index + 1
|
||||
if (
|
||||
@@ -765,7 +769,7 @@ const Card_display = () => {
|
||||
<button
|
||||
key={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
|
||||
? '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)]'
|
||||
@@ -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'
|
||||
}`}
|
||||
>
|
||||
Következő
|
||||
<span className="hidden sm:inline">Következő</span>
|
||||
<FaChevronRight />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -144,7 +144,7 @@ const ChooseDeck = () => {
|
||||
<Navbar />
|
||||
</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
|
||||
className="max-w-6xl mx-auto"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -153,7 +153,7 @@ const ChooseDeck = () => {
|
||||
>
|
||||
{/* Title */}
|
||||
<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 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.1 }}
|
||||
@@ -162,7 +162,7 @@ const ChooseDeck = () => {
|
||||
</motion.h1>
|
||||
|
||||
<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 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
@@ -172,8 +172,8 @@ const ChooseDeck = () => {
|
||||
</motion.p>
|
||||
|
||||
{/* 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 gap-2 items-center w-full md:w-auto flex-wrap">
|
||||
<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 flex-wrap">
|
||||
<SearchBox
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
@@ -181,10 +181,10 @@ const ChooseDeck = () => {
|
||||
placeholder="Keresés..."
|
||||
className="mr-4"
|
||||
/>
|
||||
<FaFilter style={{ color: "var(--color-success)" }} className="mr-2" />
|
||||
<span className="text-[color:var(--color-text)] font-semibold mr-2">Típus:</span>
|
||||
<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-1 sm:mr-2 text-xs sm:text-sm">Típus:</span>
|
||||
<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"
|
||||
? "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"
|
||||
@@ -196,7 +196,7 @@ const ChooseDeck = () => {
|
||||
{deckTypes.map((type) => (
|
||||
<button
|
||||
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
|
||||
? "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"
|
||||
@@ -207,9 +207,9 @@ const ChooseDeck = () => {
|
||||
{type.label === "Luck" ? "Szerencse" : type.label === "Question" ? "Kérdés" : "Joker"}
|
||||
</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
|
||||
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}
|
||||
onChange={(e) => setSelectedOrigin(e.target.value)}
|
||||
>
|
||||
@@ -223,7 +223,7 @@ const ChooseDeck = () => {
|
||||
</option>
|
||||
))}
|
||||
</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:
|
||||
<button
|
||||
type="button"
|
||||
@@ -236,7 +236,7 @@ const ChooseDeck = () => {
|
||||
</button>
|
||||
</span>
|
||||
<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}
|
||||
onChange={(e) => setSortBy(e.target.value)}
|
||||
>
|
||||
@@ -280,14 +280,14 @@ const ChooseDeck = () => {
|
||||
)}
|
||||
|
||||
{/* Selection Info */}
|
||||
<div className="mb-6 text-center">
|
||||
<span className="text-[color:var(--color-text)] text-lg font-semibold">
|
||||
<div className="mb-4 sm:mb-6 text-center">
|
||||
<span className="text-[color:var(--color-text)] text-base sm:text-lg font-semibold">
|
||||
Kiválasztva: {selectedDeckIds.length} pakli
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 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 && (
|
||||
<div className="col-span-full text-center text-[color:var(--color-text-muted]">Betöltés...</div>
|
||||
)}
|
||||
@@ -305,24 +305,24 @@ const ChooseDeck = () => {
|
||||
return (
|
||||
<div
|
||||
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 ${
|
||||
isSelected ? "ring-4 ring-[color:var(--color-success)]" : ""
|
||||
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-2 sm:ring-4 ring-[color:var(--color-success)]" : ""
|
||||
}`}
|
||||
style={{ borderTopColor: borderColor }}
|
||||
onClick={() => toggleDeckSelection(deck.id)}
|
||||
>
|
||||
{/* Selection Indicator */}
|
||||
<div className="absolute top-3 right-3">
|
||||
<div className="absolute top-2 sm:top-3 right-2 sm:right-3">
|
||||
{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>
|
||||
<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={{
|
||||
background: deckType?.color,
|
||||
color: "var(--color-text-inverse)",
|
||||
@@ -330,11 +330,11 @@ const ChooseDeck = () => {
|
||||
>
|
||||
{deck.type === "Luck" ? "Szerencse" : deck.type === "Question" ? "Kérdés" : "Joker"}
|
||||
</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}
|
||||
</h2>
|
||||
</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}
|
||||
</div>
|
||||
</div>
|
||||
@@ -343,7 +343,7 @@ const ChooseDeck = () => {
|
||||
</div>
|
||||
|
||||
{/* Continue Button */}
|
||||
<div className="flex justify-center mt-12">
|
||||
<div className="flex justify-center mt-8 sm:mt-12">
|
||||
<ButtonGreen
|
||||
text={`Tovább (${selectedDeckIds.length} pakli kiválasztva)`}
|
||||
onClick={handleContinue}
|
||||
|
||||
@@ -189,25 +189,25 @@ const Lobby = () => {
|
||||
|
||||
{/* Waiting for Approval Screen (Non-gamemaster, PRIVATE games) */}
|
||||
{!isGamemaster && approvalStatus === "pending" && (
|
||||
<div className="flex-1 flex items-center justify-center px-4 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="flex-1 flex items-center justify-center px-4 py-20 sm:py-24">
|
||||
<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="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">
|
||||
<span className="text-4xl">⏳</span>
|
||||
<div className="mb-4 sm:mb-6">
|
||||
<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-3xl sm:text-4xl">⏳</span>
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-yellow-300 mb-4">Várakozás jóváhagyásra</h2>
|
||||
<p className="text-zinc-300 text-lg mb-6">
|
||||
<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-base sm:text-lg mb-4 sm:mb-6">
|
||||
A gamemaster még nem hagyta jóvá a csatlakozásodat.
|
||||
</p>
|
||||
<p className="text-zinc-400 text-sm mb-8">
|
||||
Kérjük, várj türelemmel, amíg a gamemaster elfogadja a kérelmedet.
|
||||
</p>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="bg-zinc-800 rounded-lg p-4 border border-zinc-700">
|
||||
<div className="flex flex-col gap-2 sm:gap-3">
|
||||
<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-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>
|
||||
<button
|
||||
onClick={handleExit}
|
||||
@@ -223,28 +223,28 @@ const Lobby = () => {
|
||||
|
||||
{/* Normal Lobby View (Gamemaster or approved players) */}
|
||||
{(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
|
||||
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"
|
||||
}`}
|
||||
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
|
||||
</h1>
|
||||
|
||||
{/* 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">
|
||||
<p className="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">
|
||||
<p className="text-5xl font-mono font-extrabold text-green-300 tracking-widest drop-shadow-lg">
|
||||
<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-base sm:text-lg text-zinc-300 mb-2 text-center font-semibold">Játék Kód:</p>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-3">
|
||||
<p className="text-3xl sm:text-4xl lg:text-5xl font-mono font-extrabold text-green-300 tracking-widest drop-shadow-lg">
|
||||
{gameCode}
|
||||
</p>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
📋 Másolás
|
||||
@@ -268,33 +268,33 @@ const Lobby = () => {
|
||||
</span>
|
||||
</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) */}
|
||||
{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">
|
||||
<h3 className="text-xl font-bold text-yellow-300 mb-4 flex items-center gap-2">
|
||||
<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-lg sm:text-xl font-bold text-yellow-300 mb-3 sm:mb-4 flex items-center gap-2">
|
||||
<span>⏳</span>
|
||||
Jóváhagyásra váró játékosok ({pendingPlayers.length})
|
||||
</h3>
|
||||
<ul className="flex flex-col gap-3">
|
||||
{pendingPlayers.map((player, index) => (
|
||||
<li key={index} className="bg-zinc-700 py-3 px-4 rounded-xl flex items-center 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">
|
||||
<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-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)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<span className="text-white text-lg font-semibold">{player.playerName}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="text-white text-base sm:text-lg font-semibold truncate block">{player.playerName}</span>
|
||||
{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">
|
||||
✓ Bejelentkezve
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-2 w-full sm:w-auto">
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<span>✓</span>
|
||||
@@ -315,8 +315,8 @@ const Lobby = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-zinc-800/90 rounded-xl shadow-lg p-6 mb-8">
|
||||
<ul className="flex flex-col gap-4">
|
||||
<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-3 sm:gap-4">
|
||||
{currentPlayers.length === 0 ? (
|
||||
<li className="text-center text-zinc-400 py-4">Várakozás játékosokra...</li>
|
||||
) : (
|
||||
@@ -359,7 +359,7 @@ const Lobby = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-4">
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
|
||||
{isGamemaster ? (
|
||||
/* Gamemaster view - can start game */
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user