Update app.py

app.py

@@ -49,38 +49,37 @@ def process_url_for_iframe(url):
 
 # ───────────────────── 4. 카드 그리드 HTML ───────────────
 # ───────────────────── 6. HTML 그리드 ───────────────────
+# ───────────────────── 6. HTML 그리드 ───────────────────
 def html(cards, pg, total):
     if not cards:
         return "<div style='text-align:center;padding:70px;color:#555;'>표시할 배포가 없습니다.</div>"
     css = r"""
     <style>
-    body{
-        margin:0;padding:0;font-family:Poppins,sans-serif;
-        background:#f0f0f0;overflow-x:hidden;overflow-y:auto;
-    }
-    .container{width:100%;padding:10px;padding-bottom:70px;box-sizing:border-box;}
+    body{margin:0;padding:0;font-family:Poppins,sans-serif;background:#f0f0f0;overflow-x:hidden;overflow-y:auto;}
+    .container{width:100%;padding:10px 10px 70px;box-sizing:border-box;}
     .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;}
-    /* 카드 전체가 게임 화면 – 테두리만 둔 상태 */
     .card{
-        background:#fff;border-radius:10px;overflow:hidden;
-        box-shadow:0 4px 10px rgba(0,0,0,0.08);
-        height:420px;                      /* ← 카드 키움 */
-        position:relative;
+        background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,0.08);
+        height:420px;display:flex;flex-direction:column;position:relative;
     }
-    .frame{width:100%;height:100%;position:relative;overflow:hidden;}
+    .frame{flex:1;position:relative;overflow:hidden;}
     .frame iframe{
-        position:absolute;top:0;left:0;
-        width:166.667%;height:166.667%;   /* 1/0.6 = 1.6667 */
-        transform:scale(0.6);             /* 게임 화면 60 % 축소 */
-        transform-origin:top left;
-        border:0;
+        position:absolute;top:0;left:0;width:166.667%;height:166.667%;
+        transform:scale(0.6);transform-origin:top left;border:0;
+    }
+    .frame.huggingface iframe{width:100%!important;height:100%!important;transform:none!important;border:none!important;}
+
+    /* 하단 바로가기 바 */
+    .foot{
+        height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
+        background:#fafafa;border-top:1px solid #eee;
     }
-    /* 허깅페이스 임베드(이미 내부서 스케일링됨)는 그대로 */
-    .frame.huggingface iframe{
-        width:100%!important;height:100%!important;
-        transform:none!important;border:none!important;
+    .foot a{
+        font-size:0.85rem;font-weight:600;color:#4a6dd8;text-decoration:none;
     }
-    /* 반응형 높이 조정 */
+    .foot a:hover{text-decoration:underline;}
+
+    /* 반응형 카드 높이 */
     @media(min-width:1200px){.card{height:560px;}}
     @media(max-width:767px){
         .grid{grid-template-columns:1fr;}
@@ -88,10 +87,9 @@ def html(cards, pg, total):
     }
     </style>"""
     
-    # ⬇(이하 JS 및 카드 생성 로직은 기존과 동일)⬇
     js = """
     <script>
-    /* ... (동일) ... */
+    /* (허깅페이스 iframe 로딩 오류 처리 스크립트 – 기존과 동일) */
     </script>
     """
     
@@ -108,12 +106,14 @@ def html(cards, pg, total):
               sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"
               data-original-url="{url}" {alt_attr}></iframe>
           </div>
+          <div class="foot"><a href="{url}" target="_blank">↗ 새 탭으로 열기</a></div>
         </div>"""
     h += "</div></div>"
     h += f'<div class="page-info">Page {pg} / {total}</div>'
     return h
 
 
+
 # ───────────────────── 5. Gradio UI ─────────────────────
 def build():
     _init_best()