Update app.py

app.py

@@ -74,219 +74,224 @@ def page(lst, pg):
 def html(cards, pg, total):
     if not cards:
         return "<div style='text-align:center;padding:70px;color:#555;'>표시할 배포가 없습니다.</div>"
-    css = r"""
-    <style>
-    html, body {
-        height: 100%;
-        overflow: hidden !important;
-        margin: 0;
-        padding: 0;
-        font-family: Poppins, sans-serif;
-        background: #f0f0f0;
-    }
-    #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;
-        padding-bottom: 70px; /* 네비게이션 버튼을 위한 공간 */
-        box-sizing: border-box;
-    }
-    .grid-container {
-        flex: 1;
-        overflow: hidden;
-        padding: 10px;
-        box-sizing: border-box;
-        margin-bottom: 70px; /* 버튼을 위한 공간 확보 */
-    }
-    .grid {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        grid-template-rows: repeat(3, 1fr);
-        gap: 10px;
-        width: 100%;
-        height: calc(100% - 70px); /* 네비게이션 버튼 영역 제외 */
-        overflow: hidden;
-        box-sizing: border-box;
-    }
-    .card {
-        background: #fff;
-        border-radius: 10px;
-        overflow: hidden;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        position: relative;
-    }
-    .hdr {
-        padding: 8px;
-        background: rgba(255,255,255,.9);
-        border-bottom: 1px solid #eee;
-        flex-shrink: 0;
-        height: 40px;
-        box-sizing: border-box;
-        z-index: 2;
-    }
-    .ttl {
-        margin: 0;
-        font-size: 0.9rem;
-        font-weight: 600;
-        color: #333;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .date {
-        margin-top: 0;
-        font-size: 0.7rem;
-        color: #777;
-    }
-    .frame {
-        position: absolute;
-        top: 40px;
-        left: 0;
-        right: 0;
-        bottom: 30px;
-        overflow: hidden;
-    }
-    .frame iframe {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 142.857%;
-        height: 142.857%;
-        transform: scale(0.7);
-        transform-origin: top left;
-        border: 0;
-    }
-    .foot {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        padding: 6px;
-        background: rgba(255,255,255,.9);
-        text-align: right;
-        height: 30px;
-        box-sizing: border-box;
-        z-index: 2;
-    }
-    .link {
-        font-size: 0.8rem;
-        font-weight: 600;
-        color: #4a6dd8;
-        text-decoration: none;
-    }
-    .navigation-buttons {
-        position: fixed;
-        bottom: 10px;
-        left: 0;
-        right: 0;
-        display: flex;
-        justify-content: center;
-        gap: 30px;
-        padding: 10px;
-        z-index: 1000;
-        background: transparent;
-        height: 60px; /* 버튼 영역의 높이 고정 */
-    }
-    .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 30px;
-        border-radius: 30px;
-        font-size: 1.2rem;
-        font-weight: bold;
-        cursor: pointer;
-        transition: all 0.2s;
-    }
-    .navigation-buttons button:hover {
-        background: #f0f0f0;
-        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>"""
+    # 순수 HTML과 CSS로 구현
+    h = f"""
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <style>
+            * {{
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }}
+            
+            body, html {{
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+                font-family: Arial, sans-serif;
+                background: #f0f0f0;
+            }}
+            
+            #app {{
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+            }}
+            
+            #grid-container {{
+                flex: 1;
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                grid-template-rows: repeat(3, 1fr);
+                gap: 10px;
+                padding: 10px;
+                width: 100%;
+                height: 100%;
+            }}
+            
+            .card {{
+                background: white;
+                border-radius: 10px;
+                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+                position: relative;
+                height: 100%;
+            }}
+            
+            .card-header {{
+                padding: 8px 12px;
+                font-size: 0.9rem;
+                font-weight: bold;
+                border-bottom: 1px solid #f0f0f0;
+                z-index: 2;
+                background: rgba(255,255,255,0.9);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }}
+            
+            .card-date {{
+                font-size: 0.75rem;
+                color: #888;
+                margin-top: 2px;
+            }}
+            
+            .card-frame {{
+                flex: 1;
+                position: relative;
+                overflow: hidden;
+            }}
+            
+            .card-frame iframe {{
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 142.857%;
+                height: 142.857%;
+                transform: scale(0.7);
+                transform-origin: top left;
+                border: 0;
+            }}
+            
+            .card-footer {{
+                padding: 6px 12px;
+                text-align: right;
+                font-size: 0.8rem;
+                border-top: 1px solid #f0f0f0;
+                background: rgba(255,255,255,0.9);
+                z-index: 2;
+            }}
+            
+            .card-footer a {{
+                color: #4a6dd8;
+                text-decoration: none;
+                font-weight: bold;
+            }}
+            
+            #nav-container {{
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                padding: 15px 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                gap: 20px;
+                z-index: 10;
+            }}
+            
+            .nav-button {{
+                padding: 10px 25px;
+                background: rgba(255,255,255,0.9);
+                border: 1px solid #ddd;
+                border-radius: 50px;
+                font-size: 1.1rem;
+                font-weight: bold;
+                cursor: pointer;
+                box-shadow: 0 4px 10px rgba(0,0,0,0.15);
+                transition: all 0.2s ease;
+                color: #333;
+            }}
+            
+            .nav-button:hover {{
+                transform: translateY(-2px);
+                box-shadow: 0 6px 15px rgba(0,0,0,0.18);
+            }}
+            
+            .page-info {{
+                position: absolute;
+                bottom: 5px;
+                left: 0;
+                width: 100%;
+                text-align: center;
+                font-size: 0.8rem;
+                color: #888;
+                z-index: 9;
+            }}
+            
+            /* 배경 그래디언트 효과 */
+            #bottom-gradient {{
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                height: 80px;
+                background: linear-gradient(to bottom, rgba(240,240,240,0) 0%, rgba(240,240,240,0.9) 70%);
+                z-index: 5;
+                pointer-events: none;
+            }}
+        </style>
+    </head>
+    <body>
+        <div id="app">
+            <div id="grid-container">
+    """
     
-    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"""
-        <div class='card'>
-          <div class='hdr'><p class='ttl'>{c['title']}</p><p class='date'>{date}</p></div>
-          <div class='frame'><iframe src="{c['url']}" loading="lazy"
-               allow="accelerometer; camera; encrypted-media; gyroscope;"></iframe></div>
-          <div class='foot'><a class='link' href="{c['url']}" target="_blank">원본↗</a></div>
-        </div>"""
-    h += "</div></div>"
-    
-    # 페이지 정보
-    h += f"<div class='page-info'>Page {pg} / {total}</div>"
+                <div class="card">
+                    <div class="card-header">
+                        {c['title']}
+                        <div class="card-date">{date}</div>
+                    </div>
+                    <div class="card-frame">
+                        <iframe src="{c['url']}" loading="lazy" allow="accelerometer; camera; encrypted-media; gyroscope;"></iframe>
+                    </div>
+                    <div class="card-footer">
+                        <a href="{c['url']}" target="_blank">원본↗</a>
+                    </div>
+                </div>
+        """
     
-    # 네비게이션 버튼을 위한 추가 공간
-    h += "<div style='height:60px;'></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 });
+    # 네비게이션 및 페이지 정보
+    h += f"""
+            </div>
+            <div id="bottom-gradient"></div>
+            <div id="nav-container">
+                <button class="nav-button" onclick="prevPage()">◀ 이전</button>
+                <button class="nav-button" onclick="nextPage()">다음 ▶</button>
+            </div>
+            <div class="page-info">Page {pg} / {total}</div>
+        </div>
         
-        // 스크롤 이벤트 방지
-        document.addEventListener('wheel', function(e) {
-            e.preventDefault();
-        }, { passive: false });
-    });
-    </script>
+        <script>
+            function prevPage() {{
+                if ({pg} > 1) {{
+                    document.getElementById('prev-button').click();
+                }}
+            }}
+            
+            function nextPage() {{
+                if ({pg} < {total}) {{
+                    document.getElementById('next-button').click();
+                }}
+            }}
+            
+            // 스크롤 방지
+            document.addEventListener('wheel', function(e) {{
+                e.preventDefault();
+            }}, {{ passive: false }});
+            
+            document.addEventListener('touchmove', function(e) {{
+                e.preventDefault();
+            }}, {{ passive: false }});
+        </script>
+    </body>
+    </html>
     """
     
     return h
@@ -294,18 +299,14 @@ def html(cards, pg, total):
 # ───────────────────── 6. Gradio Blocks UI ───────────────────
 def build():
     _init_best()
-    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:
+    with gr.Blocks(title="Vibe Game Craft", css="footer{display:none !important;}") as demo:
         # 상태 및 출력
         bp = gr.State(1) 
-        out = gr.HTML(elem_id="main-output")
-        
-        # 네비게이션 버튼을 위한 추가 공간 (보이지 않는 요소)
-        gr.HTML("<div style='height:60px;'></div>")
+        out = gr.HTML(elem_id="display-area", visible=True)
         
-        # 페이지 네비게이션
-        with gr.Row(elem_classes="navigation-buttons"):
-            b_prev = gr.Button("◀ 이전", size="lg")
-            b_next = gr.Button("다음 ▶", size="lg")
+        # 숨겨진 버튼 (JavaScript에서 호출용)
+        b_prev = gr.Button("이전", elem_id="prev-button", visible=False)
+        b_next = gr.Button("다음", elem_id="next-button", visible=False)
         
         def show_best(p=1): 
             d, t = page(_load_best(), p)