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(() => {
@@ -14,7 +15,7 @@ function App() {
   }, []);
 
   return (
-    <div className="min-h-screen bg-light">
+    <div className={`min-h-screen ${location.pathname.startsWith('/cards/') ? '' : 'bg-light'}`}>
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/docs" element={<DocsPage />} />
@@ -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/card/FullScreenCard.tsx

@@ -0,0 +1,34 @@
+import { Card } from '../../types';
+import '../../styles/card-effects.css';
+
+interface FullScreenCardProps {
+  card: Card;
+}
+
+export default function FullScreenCard({ card }: FullScreenCardProps) {
+  const isSpecialStatus = ['yui', 'first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seven'].includes(card.status);
+  
+  return (
+    <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' }}>
+            <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>
+  );
+}

src/components/pages/CardDisplayPage.tsx

@@ -0,0 +1,40 @@
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import FullScreenCard from '../card/FullScreenCard';
+import { fetchCardById } from '../../utils/api';
+
+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;
+  }
+
+  return (
+    <div 
+      className="min-h-screen"
+      style={{ 
+        background: 'linear-gradient(to bottom, #1a1a1a, #2d2d2d, #1a1a1a)',
+        backgroundColor: '#1a1a1a'
+      }}
+      data-page="card-display"
+    >
+      <FullScreenCard card={card} />
+    </div>
+  );
+}

src/index.css

@@ -18,6 +18,11 @@
     line-break: strict;
   }
   
+  /* Transparent background for card display pages */
+  body:has([data-page="card-display"]) {
+    background-color: transparent !important;
+  }
+  
   a {
     @apply text-primary no-underline hover:text-secondary;
   }

src/styles/card-effects.css

@@ -10,6 +10,16 @@
   overflow: hidden;
 }
 
+.card-wrapper-fullscreen {
+  display: grid;
+  place-items: center;
+  position: relative;
+  aspect-ratio: 5/7;
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
 .card-reflection {
   display: block;
   position: relative;

src/utils/api.ts

@@ -2,7 +2,7 @@ import axios from 'axios';
 import type { User, Card, CardOwner, Fanart, Seven } from '../types';
 
 const getApiUrl = () => {
-  if (window.location.host === "localhost:8080" || window.location.host === "192.168.11.12:8080") {
+  if (window.location.host === "localhost:8080") {
     return "/api/";
   }
   return "https://api.syui.ai/";