fix cards id

src/App.tsx

@@ -4,6 +4,7 @@ import HomePage from './components/pages/HomePage';
 import DocsPage from './components/pages/DocsPage';
 import OwnerPage from './components/pages/OwnerPage';
 import UserPage from './components/pages/UserPage';
+import CardDisplayPage from './components/pages/CardDisplayPage';
 
 function App() {
   useEffect(() => {
@@ -28,6 +29,7 @@ function App() {
         <Route path="/fa" element={<DocsPage page="fanart" />} />
         <Route path="/ph" element={<DocsPage page="photo" />} />
         <Route path="/pr" element={<DocsPage page="favorite" />} />
+        <Route path="/cards/:id" element={<CardDisplayPage />} />
         <Route path="/:username" element={<UserPage />} />
       </Routes>
     </div>

src/components/pages/CardDisplayPage.tsx

@@ -0,0 +1,62 @@
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { fetchCardById } from '../../utils/api';
+import '../../styles/card-effects.css';
+import '../../styles/card-fullscreen.css';
+
+export default function CardDisplayPage() {
+  const { id } = useParams<{ id: string }>();
+  const cardId = parseInt(id || '0');
+
+  const { data: card, isLoading } = useQuery({
+    queryKey: ['card', cardId],
+    queryFn: () => fetchCardById(cardId),
+    enabled: cardId > 0,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <i className="fa-solid fa-spinner fa-spin text-6xl text-yellow-500"></i>
+      </div>
+    );
+  }
+
+  if (!card) {
+    return null;
+  }
+
+  const isSpecialStatus = ['yui', 'first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seven'].includes(card.status);
+
+  return (
+    <div 
+      className="min-h-screen flex items-center justify-center"
+      style={{ 
+        background: 'linear-gradient(to bottom, #1a1a1a, #2d2d2d, #1a1a1a)',
+        backgroundColor: '#1a1a1a'
+      }}
+    >
+      <div className="w-full h-full flex items-center justify-center">
+        <div className="relative" style={{ maxHeight: '100vh', height: '100vh', width: 'auto' }}>
+          <div className="h-full flex flex-col items-center justify-center">
+            <div className="card-wrapper-fullscreen" style={{ height: '100vh', width: '100%', maxWidth: 'none', aspectRatio: '5/7' }}>
+              <div className="card-reflection">
+                <img 
+                  src={`/card/card_${card.card}.webp`} 
+                  alt={`Card ${card.card}`}
+                  className="w-full rounded-lg"
+                />
+              </div>
+              {isSpecialStatus && (
+                <>
+                  <div className={`card-status pattern-${card.status}`}></div>
+                  <div className={`card-status color-${card.status}`}></div>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/styles/card-fullscreen.css

@@ -0,0 +1,7 @@
+/* Fullscreen Card Display Styles */
+.card-wrapper-fullscreen {
+  display: grid;
+  place-items: center;
+  position: relative;
+  overflow: hidden;
+}