SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx

@@ -11,6 +11,7 @@ import {
 } from "react-icons/fa"
 import SearchBox from "../Search/SearchBox"
 import PopUp from "../PopUp/PopUp"
+import DeckInfoPopUp from "../PopUp/DeckInfoPopUp"
 
 const deckTypes = [
   { label: "Luck", color: "var(--color-luck)" },
@@ -77,6 +78,7 @@ const DeckManager = () => {
   const [sortBy, setSortBy] = useState("date-desc")
   const [search, setSearch] = useState("")
   const [showSortHelp, setShowSortHelp] = useState(false)
+  const [selectedDeck, setSelectedDeck] = useState(null)
 
   // Filter logic (mock)
   let filteredDecks = mockDecks.filter((deck) => {
@@ -254,8 +256,9 @@ 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"
+                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"
                 style={{ borderTopColor: borderColor }}
+                onClick={() => setSelectedDeck(deck)}
               >
                 <div>
                   <span
@@ -285,6 +288,14 @@ const DeckManager = () => {
           })}
         </div>
       </div>
+      
+      {/* Deck Info Popup */}
+      {selectedDeck && (
+        <DeckInfoPopUp 
+          deck={selectedDeck} 
+          onClose={() => setSelectedDeck(null)} 
+        />
+      )}
     </div>
   )
 }

SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx

@@ -0,0 +1,208 @@
+import React, { useEffect } from "react"
+import { 
+  FaUser, 
+  FaLock, 
+  FaGlobe, 
+  FaTags, 
+  FaCalendarAlt, 
+  FaQuestionCircle, 
+  FaComment, 
+  FaTimes,
+  FaEdit 
+} from "react-icons/fa"
+
+export default function DeckInfoPopUp({ deck, onClose }) {
+  if (!deck) return null
+
+  // Scroll blokkolás amikor a popup nyitva van
+  useEffect(() => {
+    // Scroll letiltása
+    document.body.style.overflow = 'hidden'
+    
+    // Cleanup function - scroll visszaállítása amikor a komponens unmount-ol
+    return () => {
+      document.body.style.overflow = 'unset'
+    }
+  }, [])
+
+  const deckTypes = {
+    "Luck": { label: "Szerencse", color: "var(--color-luck)" },
+    "Question": { label: "Kérdés", color: "var(--color-question)" },
+    "Fun": { label: "Szórakozás", color: "var(--color-fun)" }
+  }
+
+  const currentDeckType = deckTypes[deck.type] || { label: deck.type, color: "var(--color-success)" }
+
+  // Mock data - ezeket majd a backend adatokra cseréljük
+  const mockData = {
+    creator: "John Doe",
+    privacy: deck.origin === "Vállalati" ? "Publikus" : "Privát", 
+    questionsCount: Math.floor(Math.random() * 50) + 10,
+    answersCount: Math.floor(Math.random() * 200) + 50,
+    ...deck
+  }
+
+  const formatDate = (dateString) => {
+    const date = new Date(dateString)
+    return date.toLocaleDateString('hu-HU', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    })
+  }
+
+  const handleOpenDeck = () => {
+    alert("⚠️ A pakli megnyitás funkció még fejlesztés alatt áll!")
+  }
+
+  const handleEditDeck = () => {
+    alert("⚠️ A pakli szerkesztés funkció még fejlesztés alatt áll!")
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 backdrop-blur-sm">
+      <div 
+        className="bg-[color:var(--color-surface)] rounded-3xl shadow-2xl min-w-[350px] max-w-[420px] w-full mx-4 relative border border-[color:var(--color-surface-selected)] overflow-hidden"
+        style={{
+          background: `linear-gradient(135deg, var(--color-surface) 0%, var(--color-card) 100%)`
+        }}
+      >
+        {/* Header with deck type color */}
+        <div 
+          className="h-2 w-full"
+          style={{ backgroundColor: currentDeckType.color }}
+        ></div>
+        
+        {/* Close button */}
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-[color:var(--color-text-muted)] hover:text-[color:var(--color-text)] text-xl font-bold leading-none p-2 rounded-full hover:bg-[color:var(--color-surface-selected)] transition-all duration-200"
+          aria-label="Bezárás"
+        >
+          <FaTimes />
+        </button>
+
+        <div className="p-6">
+          {/* Deck name and type */}
+          <div className="mb-5">
+            <div className="flex items-center gap-3 mb-2">
+              <h2 className="text-xl font-bold text-[color:var(--color-text)]">
+                {mockData.name}
+              </h2>
+              <span
+                className="inline-block px-3 py-1 rounded-full text-xs font-bold"
+                style={{
+                  background: currentDeckType.color,
+                  color: "var(--color-text-inverse)",
+                }}
+              >
+                {currentDeckType.label}
+              </span>
+            </div>
+          </div>
+
+          {/* Data grid */}
+          <div className="grid grid-cols-1 gap-3">
+            {/* Creator */}
+            <div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
+              <div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-success)]/20">
+                <FaUser className="text-[color:var(--color-success)] text-sm" />
+              </div>
+              <div>
+                <div className="text-[color:var(--color-text-muted)] text-xs font-medium">Létrehozó</div>
+                <div className="text-[color:var(--color-text)] font-semibold text-sm">{mockData.creator}</div>
+              </div>
+            </div>
+
+            {/* Privacy */}
+            <div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
+              <div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-warning)]/20">
+                {mockData.privacy === "Privát" ? (
+                  <FaLock className="text-[color:var(--color-warning)] text-sm" />
+                ) : (
+                  <FaGlobe className="text-[color:var(--color-warning)] text-sm" />
+                )}
+              </div>
+              <div>
+                <div className="text-[color:var(--color-text-muted)] text-xs font-medium">Láthatóság</div>
+                <div className="text-[color:var(--color-text)] font-semibold text-sm">{mockData.privacy}</div>
+              </div>
+            </div>
+
+            {/* Type */}
+            <div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
+              <div 
+                className="flex items-center justify-center w-8 h-8 rounded-full"
+                style={{ backgroundColor: `${currentDeckType.color}20` }}
+              >
+                <FaTags style={{ color: currentDeckType.color }} className="text-sm" />
+              </div>
+              <div>
+                <div className="text-[color:var(--color-text-muted)] text-xs font-medium">Típus</div>
+                <div className="text-[color:var(--color-text)] font-semibold text-sm">{currentDeckType.label}</div>
+              </div>
+            </div>
+
+            {/* Date */}
+            <div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
+              <div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-primary)]/20">
+                <FaCalendarAlt className="text-[color:var(--color-primary)] text-sm" />
+              </div>
+              <div>
+                <div className="text-[color:var(--color-text-muted)] text-xs font-medium">Létrehozás dátuma</div>
+                <div className="text-[color:var(--color-text)] font-semibold text-sm">{formatDate(mockData.created)}</div>
+              </div>
+            </div>
+
+            {/* Questions and Answers in one row */}
+            <div className="grid grid-cols-2 gap-3">
+              {/* Questions */}
+              <div className="flex items-center gap-2 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
+                <div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-question)]/20">
+                  <FaQuestionCircle className="text-[color:var(--color-question)] text-sm" />
+                </div>
+                <div>
+                  <div className="text-[color:var(--color-text-muted)] text-xs font-medium">Kérdések</div>
+                  <div className="text-[color:var(--color-text)] font-semibold">{mockData.questionsCount}</div>
+                </div>
+              </div>
+
+              {/* Answers */}
+              <div className="flex items-center gap-2 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
+                <div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-fun)]/20">
+                  <FaComment className="text-[color:var(--color-fun)] text-sm" />
+                </div>
+                <div>
+                  <div className="text-[color:var(--color-text-muted)] text-xs font-medium">Válaszok</div>
+                  <div className="text-[color:var(--color-text)] font-semibold">{mockData.answersCount}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Action buttons */}
+          <div className="mt-5 pt-4 border-t border-[color:var(--color-surface-selected)]">
+            <div className="grid grid-cols-2 gap-3">
+              {/* Open button */}
+              <button
+                className="px-4 py-2.5 rounded-xl font-semibold text-[color:var(--color-text-inverse)] transition-all duration-200 hover:scale-105 shadow-lg bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80"
+                onClick={handleOpenDeck}
+              >
+                Megnyitás
+              </button>
+              
+              {/* Edit button */}
+              <button
+                className="px-4 py-2.5 rounded-xl font-semibold text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)] transition-all duration-200 hover:scale-105 hover:bg-[color:var(--color-surface-selected)] flex items-center justify-center gap-2"
+                onClick={handleEditDeck}
+              >
+                <FaEdit className="text-sm" />
+                Szerkesztés
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}