Game-Gallery

Running

App Files Files Community

ginipick commited on Apr 29

Commit

2e20ef4

verified ·

1 Parent(s): b16d98a

Update app.py

Browse files

Files changed (1) hide show

app.py +159 -215

app.py CHANGED Viewed

@@ -74,239 +74,183 @@ def page(lst, pg):
 def html(cards, pg, total):
     if not cards:
         return "<div style='text-align:center;padding:70px;color:#555;'>표시할 배포가 없습니다.</div>"
-    # 순수 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">
     """
-    # 카드 추가
     for c in cards:
         date = datetime.datetime.fromtimestamp(int(c["ts"])).strftime("%Y-%m-%d")
         h += f"""
-                <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 += 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>
-        <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
 # ───────────────────── 6. Gradio Blocks UI ───────────────────
 def build():
     _init_best()
-    with gr.Blocks(title="Vibe Game Craft", css="footer{display:none !important;}") as demo:
         # 상태 및 출력
         bp = gr.State(1)
-        out = gr.HTML(elem_id="display-area", visible=True)
-        # 숨겨진 버튼 (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)

 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: hidden;
+    }
+    .container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100vh;
+        box-sizing: border-box;
+        padding: 10px;
+        overflow: hidden;
+    }
+    .grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-template-rows: repeat(3, 1fr);
+        gap: 12px;
+        width: 100%;
+        flex: 1;
+        margin-bottom: 60px; /* 버튼을 위한 공간 */
+    }
+    .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%;
+    }
+    .hdr {
+        padding: 8px 12px;
+        background: rgba(255,255,255,.95);
+        border-bottom: 1px solid #eee;
+        flex-shrink: 0;
+        z-index: 10;
+    }
+    .ttl {
+        margin: 0;
+        font-size: 0.95rem;
+        font-weight: 600;
+        color: #333;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .date {
+        margin-top: 2px;
+        font-size: 0.75rem;
+        color: #777;
+    }
+    .frame {
+        flex: 1;
+        position: relative;
+    }
+    .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 {
+        padding: 6px 12px;
+        background: rgba(255,255,255,.95);
+        text-align: right;
+        flex-shrink: 0;
+        border-top: 1px solid #f0f0f0;
+        z-index: 10;
+    }
+    .link {
+        font-size: 0.8rem;
+        font-weight: 600;
+        color: #4a6dd8;
+        text-decoration: none;
+    }
+    /* 버튼 컨테이너 */
+    .button-area {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: #f0f0f0;
+        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
+        z-index: 100;
+    }
+    /* 페이지 정보 */
+    .page-info {
+        position: fixed;
+        bottom: 5px;
+        left: 0;
+        right: 0;
+        text-align: center;
+        font-size: 0.8rem;
+        color: #777;
+        z-index: 101;
+    }
+    </style>"""
+    h = css + """
+    <div class="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>'
     return h
 # ───────────────────── 6. Gradio Blocks UI ───────────────────
 def build():
     _init_best()
+    with gr.Blocks(title="Vibe Game Craft", css="""
+        footer {display: none !important;}
+        .button-row {
+            position: fixed !important;
+            bottom: 0 !important;
+            left: 0 !important;
+            right: 0 !important;
+            background: #f0f0f0 !important;
+            padding: 10px !important;
+            text-align: center !important;
+            box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
+            margin: 0 !important;
+            z-index: 1000 !important;
+        }
+        .button-row button {
+            margin: 0 10px !important;
+            padding: 10px 20px !important;
+            font-size: 16px !important;
+            font-weight: bold !important;
+            border-radius: 50px !important;
+        }
+        body {
+            margin: 0 !important;
+            padding: 0 !important;
+            overflow: hidden !important;
+        }
+    """) as demo:
         # 상태 및 출력
         bp = gr.State(1)
+        out = gr.HTML()
+        # 페이지 네비게이션 (맨 아래 고정)
+        with gr.Row(elem_classes="button-row"):
+            b_prev = gr.Button("◀ 이전", size="lg")
+            b_next = gr.Button("다음 ▶", size="lg")
         def show_best(p=1):
             d, t = page(_load_best(), p)