Update app.py

app.py

@@ -76,17 +76,39 @@ def html(cards, pg, total):
         return "<div style='text-align:center;padding:70px;color:#555;'>표시할 배포가 없습니다.</div>"
     css = r"""
     <style>
-    body {
+    html, body {
+        height: 100%;
+        overflow: hidden !important;
         margin: 0;
         padding: 0;
         font-family: Poppins, sans-serif;
         background: #f0f0f0;
-        overflow: hidden;
     }
-    .container {
+    #gradio-app, #component-0, #component-1, .gradio-container {
+        height: 100vh !important;
+        overflow: hidden !important;
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+    }
+    .main-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 100vh;
+        width: 100vw;
+        overflow: hidden;
         display: flex;
         flex-direction: column;
-        width: 100%;
+    }
+    .grid-container {
+        flex: 1;
+        overflow: hidden;
+        padding: 10px;
         box-sizing: border-box;
     }
     .grid {
@@ -95,11 +117,9 @@ def html(cards, pg, total):
         grid-template-rows: repeat(3, 1fr);
         gap: 10px;
         width: 100%;
-        height: calc(100vh - 80px);
-        box-sizing: border-box;
-        padding: 10px;
-        max-height: calc(100vh - 80px);
+        height: 100%;
         overflow: hidden;
+        box-sizing: border-box;
     }
     .card {
         background: #fff;
@@ -109,7 +129,7 @@ def html(cards, pg, total):
         display: flex;
         flex-direction: column;
         height: 100%;
-        max-height: 100%;
+        position: relative;
     }
     .hdr {
         padding: 8px;
@@ -118,6 +138,7 @@ def html(cards, pg, total):
         flex-shrink: 0;
         height: 40px;
         box-sizing: border-box;
+        z-index: 2;
     }
     .ttl {
         margin: 0;
@@ -134,12 +155,12 @@ def html(cards, pg, total):
         color: #777;
     }
     .frame {
-        flex: 1;
-        position: relative;
+        position: absolute;
+        top: 40px;
+        left: 0;
+        right: 0;
+        bottom: 30px;
         overflow: hidden;
-        flex-grow: 1;
-        flex-shrink: 1;
-        height: calc(100% - 40px - 30px); /* 헤더 높이와 푸터 높이를 뺀 값 */
     }
     .frame iframe {
         position: absolute;
@@ -152,12 +173,16 @@ def html(cards, pg, total):
         border: 0;
     }
     .foot {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
         padding: 6px;
         background: rgba(255,255,255,.9);
         text-align: right;
-        flex-shrink: 0;
         height: 30px;
         box-sizing: border-box;
+        z-index: 2;
     }
     .link {
         font-size: 0.8rem;
@@ -167,20 +192,21 @@ def html(cards, pg, total):
     }
     .navigation-buttons {
         position: fixed;
-        bottom: 20px;
+        bottom: 15px;
         left: 0;
         right: 0;
         display: flex;
         justify-content: center;
         gap: 30px;
-        padding: 15px;
+        padding: 10px;
         z-index: 1000;
+        background: transparent;
     }
     .navigation-buttons button {
         background: rgba(255, 255, 255, 0.9);
         border: 1px solid #ddd;
         box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-        padding: 10px 25px;
+        padding: 10px 30px;
         border-radius: 30px;
         font-size: 1.2rem;
         font-weight: bold;
@@ -192,9 +218,35 @@ def html(cards, pg, total):
         transform: translateY(-2px);
         box-shadow: 0 6px 15px rgba(0,0,0,0.2);
     }
+    footer, .footer {
+        display: none !important;
+    }
+    .page-info {
+        position: fixed;
+        bottom: 5px;
+        left: 0;
+        right: 0;
+        text-align: center;
+        font-size: 0.8rem;
+        color: #777;
+        z-index: 999;
+    }
+    
+    /* 모바일 최적화 */
+    @media (max-width: 768px) {
+        .grid {
+            grid-template-columns: repeat(2, 1fr);
+            grid-template-rows: repeat(5, 1fr);
+        }
+    }
+    @media (max-width: 480px) {
+        .grid {
+            grid-template-columns: 1fr;
+        }
+    }
     </style>"""
     
-    h = css + "<div class='container'><div class='grid'>"
+    h = css + "<div class='main-container'><div class='grid-container'><div class='grid'>"
     for c in cards:
         date = datetime.datetime.fromtimestamp(int(c["ts"])).strftime("%Y-%m-%d")
         h += f"""
@@ -206,15 +258,39 @@ def html(cards, pg, total):
         </div>"""
     h += "</div></div>"
     
+    # 페이지 정보
+    h += f"<div class='page-info'>Page {pg} / {total}</div></div>"
+    
+    # JavaScript로 스크롤 방지 추가
+    h += """
+    <script>
+    // 스크롤 방지
+    document.addEventListener('DOMContentLoaded', function() {
+        document.body.style.overflow = 'hidden';
+        document.documentElement.style.overflow = 'hidden';
+        
+        // 터치 이벤트 방지 (모바일)
+        document.addEventListener('touchmove', function(e) {
+            e.preventDefault();
+        }, { passive: false });
+        
+        // 스크롤 이벤트 방지
+        document.addEventListener('wheel', function(e) {
+            e.preventDefault();
+        }, { passive: false });
+    });
+    </script>
+    """
+    
     return h
 
 # ───────────────────── 6. Gradio Blocks UI ───────────────────
 def build():
     _init_best()
-    with gr.Blocks(title="Vibe Game Craft", css="body{margin:0;padding:0;overflow:hidden;} footer{display:none;} .gradio-container{overflow:hidden;}") as demo:
+    with gr.Blocks(title="Vibe Game Craft", css="html,body{margin:0;padding:0;overflow:hidden !important;} footer{display:none !important;} .gradio-container{overflow:hidden !important; height:100vh; position:fixed; top:0; left:0; right:0; bottom:0;}") as demo:
         # 상태 및 출력
         bp = gr.State(1) 
-        out = gr.HTML()
+        out = gr.HTML(elem_id="main-output")
         
         # 페이지 네비게이션
         with gr.Row(elem_classes="navigation-buttons"):
@@ -248,4 +324,4 @@ def build():
 app = build()
 
 if __name__ == "__main__":
-    app.launch()
+    app.launch(debug=True, height=100)