Update app.py

app.py

@@ -99,35 +99,160 @@ def get_space_card(space: dict, index: int) -> str:
     
     return f"""
     <div class="space-card" style='
+        position: relative;
         border: none; 
-        padding: 20px; 
-        margin: 10px; 
-        border-radius: 15px; 
-        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-        background-image: linear-gradient({bg_color}, {bg_color}), 
-            url(data:image/png;base64,{screenshot if screenshot else ''});
-        background-size: cover;
-        background-position: center;
-        background-blend-mode: overlay;
-        transition: transform 0.3s ease;
-        min-height: 200px;'>
+        padding: 0;
+        margin: 10px;
+        border-radius: 20px;
+        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+        background: white;
+        transition: all 0.3s ease;
+        overflow: hidden;
+        min-height: 400px;
+        cursor: pointer;
+        transform-origin: center;'
+        onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.15)';"
+        onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 10px 20px rgba(0,0,0,0.1)';"
+        onclick="window.open('{url}', '_blank')">
         
+        <!-- 스크린샷 영역 -->
         <div style='
-            background: rgba(255, 255, 255, 0.95);
-            padding: 15px;
-            border-radius: 10px;
-            backdrop-filter: blur(5px);'>
-            <div style='font-size: 1.2em; font-weight: bold; color: #333;'>#{index + 1} {title}</div>
-            <p style='margin: 5px 0; color: #666;'>👤 {author}</p>
-            <p style='margin: 5px 0; color: #666;'>🛠️ {sdk}</p>
-            <p style='margin: 5px 0; color: #666;'>❤️ {likes}</p>
-            <p style='margin: 5px 0; color: #666;'>📅 {created}</p>
-            <a href='{url}' target='_blank' 
-               style='display: inline-block; margin-top: 10px; padding: 5px 10px; 
-                      background: #007bff; color: white; text-decoration: none; 
-                      border-radius: 5px;'>
-                🔗 View Space
-            </a>
+            width: 100%;
+            height: 200px;
+            background-image: url(data:image/png;base64,{screenshot if screenshot else ''});
+            background-size: cover;
+            background-position: center;
+            border-bottom: 3px solid {bg_color};
+            position: relative;'>
+            
+            <!-- 순위 뱃지 -->
+            <div style='
+                position: absolute;
+                top: 10px;
+                left: 10px;
+                background: rgba(0,0,0,0.7);
+                color: white;
+                padding: 5px 15px;
+                border-radius: 20px;
+                font-weight: bold;
+                font-size: 0.9em;
+                backdrop-filter: blur(5px);'>
+                #{index + 1}
+            </div>
+            
+            <!-- SDK 뱃지 -->
+            <div style='
+                position: absolute;
+                top: 10px;
+                right: 10px;
+                background: {bg_color};
+                padding: 5px 15px;
+                border-radius: 20px;
+                font-weight: bold;
+                font-size: 0.8em;
+                backdrop-filter: blur(5px);'>
+                🛠️ {sdk}
+            </div>
+        </div>
+        
+        <!-- 콘텐츠 영역 -->
+        <div style='
+            padding: 20px;
+            background: white;'>
+            
+            <!-- 제목 -->
+            <h3 style='
+                margin: 0 0 15px 0;
+                color: #333;
+                font-size: 1.3em;
+                line-height: 1.4;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;'>
+                {title}
+            </h3>
+            
+            <!-- 메타 정보 그리드 -->
+            <div style='
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                gap: 10px;
+                margin-bottom: 20px;
+                font-size: 0.9em;'>
+                
+                <div style='
+                    display: flex;
+                    align-items: center;
+                    color: #666;'>
+                    <span style='margin-right: 5px;'>👤</span> {author}
+                </div>
+                
+                <div style='
+                    display: flex;
+                    align-items: center;
+                    color: #666;'>
+                    <span style='margin-right: 5px;'>❤️</span> {likes}
+                </div>
+                
+                <div style='
+                    display: flex;
+                    align-items: center;
+                    color: #666;
+                    grid-column: span 2;'>
+                    <span style='margin-right: 5px;'>📅</span> {created}
+                </div>
+            </div>
+            
+            <!-- 액션 버튼 -->
+            <div style='
+                display: flex;
+                justify-content: space-between;
+                align-items: center;'>
+                
+                <a href='{url}' target='_blank' 
+                   style='
+                    display: inline-flex;
+                    align-items: center;
+                    padding: 8px 20px;
+                    background: linear-gradient(135deg, #6e8efb, #4a6cf7);
+                    color: white;
+                    text-decoration: none;
+                    border-radius: 25px;
+                    font-weight: 500;
+                    transition: all 0.3s ease;
+                    box-shadow: 0 4px 15px rgba(74,108,247,0.2);'
+                   onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(74,108,247,0.3)';"
+                   onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(74,108,247,0.2)';">
+                    View Space <span style='margin-left: 8px;'>→</span>
+                </a>
+                
+                <div style='
+                    display: flex;
+                    gap: 10px;'>
+                    <div style='
+                        padding: 8px;
+                        background: #f5f5f5;
+                        border-radius: 50%;
+                        cursor: pointer;
+                        transition: all 0.3s ease;'
+                        onmouseover="this.style.background='#ebebeb';"
+                        onmouseout="this.style.background='#f5f5f5';">
+                        ⭐
+                    </div>
+                    <div style='
+                        padding: 8px;
+                        background: #f5f5f5;
+                        border-radius: 50%;
+                        cursor: pointer;
+                        transition: all 0.3s ease;'
+                        onmouseover="this.style.background='#ebebeb';"
+                        onmouseout="this.style.background='#f5f5f5';">
+                        🔗
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     """