From 97b14815b05c6f34ddef4cfa07702234b2828aec Mon Sep 17 00:00:00 2001
From: NigeParis <nrobinso@student.42.fr>
Date: Sat, 3 Jan 2026 12:07:32 +0100
Subject: [PATCH] WIP css orga ttt

---
 frontend/src/pages/chat/chat.html |  2 +-
 frontend/src/pages/ttt/ttt.css    |  0
 frontend/src/pages/ttt/ttt.html   | 36 ++++++++++++++++++-------------
 3 files changed, 22 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/pages/ttt/ttt.css

diff --git a/frontend/src/pages/chat/chat.html b/frontend/src/pages/chat/chat.html
index 869e687..954768a 100644
--- a/frontend/src/pages/chat/chat.html
+++ b/frontend/src/pages/chat/chat.html
@@ -2,7 +2,7 @@
   <div id="mainbox" class="mainboxDisplay">
     <button id="b-nextGame" class="btn-style absolute top-4 left-14">nextGame</button>
     <h1 class="text-3xl font-bold text-gray-800">
-		  ChatterBox<span id="t-username"></span>
+		  Chatter Box<span id="t-username"></span>
     </h1><br>
     <button id="b-clear" class="btn-style absolute top-4 right-6">Clear Text</button>
     <button id="b-quit" class="btn-style absolute top-14 right-6">Quit Chat</button>
diff --git a/frontend/src/pages/ttt/ttt.css b/frontend/src/pages/ttt/ttt.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/pages/ttt/ttt.html b/frontend/src/pages/ttt/ttt.html
index 7773eed..6729e9a 100644
--- a/frontend/src/pages/ttt/ttt.html
+++ b/frontend/src/pages/ttt/ttt.html
@@ -1,16 +1,22 @@
-<div class="bg-gray-100 p-8">
-    <div class="grid grid-cols-3 gap-4 max-w-2xl mx-auto">
-        <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
-        <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
-        <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
-        <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
-        <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
-        <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
-        <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
-        <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
-        <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+
+<div class="displaybox">
+    <div id="mainbox" class="mainboxDisplay">
+        <button id="ttt-restart-btn" class="btn-style absolute top-6 right-6">New Game</button>
+        <h1 class="text-3xl font-bold text-gray-800">
+            Tic-tac-toe Box<span id="t-username"></span>
+        </h1><br>
+        <div class="grid-box mt-4">
+            <div class="grid grid-cols-3 gap-4 max-w-2xl mx-auto">
+                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+            </div>
+        </div>        
     </div>
-    <button id="ttt-restart-btn" class="mt-8 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
-        Restart Game
-    </button>
-</div>
+</div>
\ No newline at end of file