Update app.py

app.py

@@ -114,138 +114,58 @@ body, .gradio-container {
     padding: 1rem 1.5rem;
     box-sizing: border-box;
     min-height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    color: #5b021f;
+    color: #4a002a;
 }
 
-/* Heading and subtext */
-h1 {
-    font-size: clamp(1.8rem, 5vw, 2.5rem);
+/* Header text style */
+#header-title {
+    font-size: clamp(2rem, 6vw, 2.8rem);
     color: #db2777;
-    margin-bottom: 0.2rem;
-    text-align: center;
     font-weight: 700;
-    user-select: none;
-}
-
-.subtext {
-    font-size: clamp(1rem, 3vw, 1.1rem);
-    color: #9d174d;
     text-align: center;
-    margin-bottom: 1.5rem;
-    user-select: none;
-}
-
-/* Board container: perfect square, responsive */
-#board-container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, 1fr);
-    gap: 12px;
-    width: 90vw;
-    max-width: 480px;
-    height: 90vw;
-    max-height: 480px;
-    margin: 0 auto 1.5rem auto;
-}
-
-/* Buttons fill cells fully, keep perfect squares */
-.game-btn {
-    width: 100%;
-    height: 100%;
-    font-size: clamp(2rem, 6vw, 3.5rem) !important;
-    border-radius: 12px !important;
-    background: #fff0f5 !important;
-    border: 2px solid #f9a8d4 !important;
-    transition: background 0.2s ease-in-out;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    user-select: none;
-}
-.game-btn:hover {
-    background: #fbcfe8 !important;
-    border-color: #ec4899 !important;
-}
-
-/* Mode Buttons */
-.neat-button {
-    padding: 12px 16px;
-    border-radius: 8px;
-    font-size: clamp(0.9rem, 3vw, 1.1rem);
-    margin: 6px 0;
-    background: #fce7f3;
-    border: 1px solid #f472b6;
-    color: #be185d;
-    font-weight: 600;
-    width: 100%;
-    box-sizing: border-box;
+    margin-bottom: 0.3rem;
     user-select: none;
 }
-.neat-button:hover {
-    background: #f9a8d4;
-    border-color: #ec4899;
-    cursor: pointer;
-}
 
-/* Status */
-#status {
-    font-size: clamp(1rem, 4vw, 1.2rem);
-    font-weight: bold;
-    color: #db2777;
+/* Subtext style */
+#header-subtext {
+    font-size: clamp(1.2rem, 5vw, 1.3rem);
+    color: #7a104d;
     text-align: center;
-    margin: 1rem 0;
+    margin-bottom: 1.8rem;
     user-select: none;
+    padding: 0 8px;
+    line-height: 1.4;
 }
 
-/* Player legend text */
-.player-legend {
-    font-size: clamp(0.85rem, 3vw, 1rem);
-    color: #831843;
+/* Player legend */
+#player-legend {
+    font-size: clamp(1rem, 4vw, 1.1rem);
+    color: #631746;
     margin-top: 0.5rem;
     user-select: none;
-}
-
-@media (max-width: 768px) {
-    #board-container {
-        width: 90vw;
-        height: 90vw;
-        max-width: 320px;
-        max-height: 320px;
-        gap: 8px;
-    }
-    .game-btn {
-        font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
-    }
-    .neat-button {
-        font-size: clamp(0.85rem, 4vw, 1rem);
-    }
-    #status {
-        font-size: clamp(0.95rem, 4vw, 1.1rem);
-    }
+    padding: 0 6px;
+    line-height: 1.3;
 }
 """
 
-with gr.Blocks(title="Tic Tac Toe", css=CSS) as demo:
-    gr.Markdown("""
-    <h1>💗 TIC TAC TOE 💗 - By Shafaq Mandha</h1>
-    <p class="subtext">Play solo or with a friend — may the best player win!</p>
-    """)
+with gr.Blocks(css=CSS) as demo:
+    # Header title
+    gr.Markdown("<h1 id='header-title'>💗 TIC TAC TOE</h1>")
+    # Subtext below header
+    gr.Markdown("<p id='header-subtext'>Play solo or with a friend — may the best player win!</p>")
 
+    # Buttons placeholder (not functional here)
     with gr.Row():
         with gr.Column(scale=1, min_width=220):
-            gr.Markdown("### 🎮 Choose Game Mode", elem_id="status")
-            vs_friend_btn = gr.Button("👥 Play vs Friend", elem_classes=["neat-button"])
-            vs_computer_btn = gr.Button("🤖 Play vs Computer", elem_classes=["neat-button"])
-            reset_btn = gr.Button("🔄 Reset Game", elem_classes=["neat-button"])
+            gr.Markdown("### 🎮 Choose Game Mode", elem_id="header-subtext")
+            gr.Button("👥 Play vs Friend", elem_classes=["neat-button"])
+            gr.Button("🤖 Play vs Computer", elem_classes=["neat-button"])
+            gr.Button("🔄 Reset Game", elem_classes=["neat-button"])
 
             gr.Markdown("""
-            <div class="player-legend">
+            <div id="player-legend">
                 <ul>
                     <li><strong>Player 1:</strong> ❌</li>
                     <li><strong>Player 2 / Computer:</strong> ⭕</li>
@@ -253,28 +173,4 @@ with gr.Blocks(title="Tic Tac Toe", css=CSS) as demo:
             </div>
             """)
 
-        with gr.Column(scale=2, min_width=300):
-            status_display = gr.Markdown("🎮 Select a game mode to begin", elem_id="status")
-
-            with gr.Column(elem_id="board-container"):
-                btn0 = gr.Button("", elem_classes=["game-btn"])
-                btn1 = gr.Button("", elem_classes=["game-btn"])
-                btn2 = gr.Button("", elem_classes=["game-btn"])
-                btn3 = gr.Button("", elem_classes=["game-btn"])
-                btn4 = gr.Button("", elem_classes=["game-btn"])
-                btn5 = gr.Button("", elem_classes=["game-btn"])
-                btn6 = gr.Button("", elem_classes=["game-btn"])
-                btn7 = gr.Button("", elem_classes=["game-btn"])
-                btn8 = gr.Button("", elem_classes=["game-btn"])
-
-    buttons = [btn0, btn1, btn2, btn3, btn4, btn5, btn6, btn7, btn8]
-    all_outputs = buttons + [status_display]
-
-    for i, btn in enumerate(buttons):
-        btn.click(fn=lambda i=i: handle_click(i), outputs=all_outputs)
-
-    vs_friend_btn.click(fn=start_vs_friend, outputs=all_outputs)
-    vs_computer_btn.click(fn=start_vs_computer, outputs=all_outputs)
-    reset_btn.click(fn=reset_current_game, outputs=all_outputs)
-
-demo.launch()
+demo.launch()