From 7ce9e5c5e4ab2d529a552f6fcfd0a3cb5e04d5bc Mon Sep 17 00:00:00 2001
From: truongvanvu21 <vutruong21102004@gmail.com>
Date: Fri, 11 Apr 2025 21:55:40 +0700
Subject: [PATCH] update css file thu-ngan-home.css

---
 Frontend/.vscode/settings.json        |   3 +
 Frontend/assets/css/thu-ngan-home.css | 139 ++++++++++++++++++++------
 Frontend/thu-ngan-home.html           |  52 +++++++++-
 3 files changed, 160 insertions(+), 34 deletions(-)
 create mode 100644 Frontend/.vscode/settings.json

diff --git a/Frontend/.vscode/settings.json b/Frontend/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/Frontend/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/Frontend/assets/css/thu-ngan-home.css b/Frontend/assets/css/thu-ngan-home.css
index 2008e02..cfbba11 100644
--- a/Frontend/assets/css/thu-ngan-home.css
+++ b/Frontend/assets/css/thu-ngan-home.css
@@ -1,22 +1,22 @@
 body {
     display: flex;
+    box-sizing: border-box;
 }
 
 .main-taskbar {
-    /* background-color: var(--color-two); */
+    background-color: #eaebef;
     width: 300px;
     display: flex;
     flex-direction: column;
-    border-right: 1px solid var(--color-one);
-    background-color: rgb(0, 0, 0, 0.05);
 }
 
 .logo {
-    background-color: blue;
+    background-color: var(--color-one);
     height: 72px;
 }   
 
 .logo img {
+    margin-left: 4px;
     width: 70px;
     height: 70px;
 }
@@ -24,71 +24,150 @@ body {
 .main-taskbar > .info {
     display: flex;
     flex-direction: column;
+    padding: 14px 10px;
     
 }
 
 .main-taskbar > .info > div:first-child {
-    display: flex;
-    padding-top: 14px;
-    font-size: 18px;
-    font-weight: 400;
-    
-}
-
-.main-taskbar > .info > div:first-child > p {
-    padding-top: 10px;
+    padding-bottom: 10px;
 }
 
 .main-taskbar > .info > div > label {
     font-size: 18px;
     font-weight: 500;
+    color: var(--text-color);
+}
+
+.main-taskbar > .info > div > p {
+    font-size: 17px;
+    font-weight: 400;
+    padding: 6px 0 6px 8px;
+    margin: 0;
 }
 
 .taskbar-function {
-    background-color: var(--color-one);
+    padding: 4px 0 0 0;
+    background-color: #fff;
 }
 
 .taskbar-function div {
-    padding: 20px 5px;
+    padding: 20px 8px;
     font-size: 20px;
-    font-weight: 600px;
+    font-weight: 500;
+    color: var(--text-color);
+    background-color: #eaebef;
+    border-radius: 2px;
+    border-bottom: 1px solid rgb(0, 0, 0, 0.2);
 }
 
-
-.taskbar-function div:nth-child(n+2){
-    border-top: 1px solid black;
+.taskbar-function div:hover {
+    background-color: var(--color-one);
+    color: #fff;
+    border-color: var(--color-one);
+    cursor: pointer;
 }
+
 .extension {
-    background-color: aquamarine;
+    background-color: #fff;
     display: flex;
     width: calc(100% - 300px);
     flex-direction: column;
 }
 .top-taskbar {
-    background-color: gray;
-    display: flex;
-    background-color: var(--color-two);
+    background-color: var(--color-one);
+    height: 72px;
 }
 .top-taskbar > .xem-danh-sach-ban-bida {
     display: flex;
-    padding: 25px;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    /* display: none; */
 }
 .mo-ban, .cap-nhat-hoa-don, .thanh-toan-hoa-don {
-    margin: 0px 50px 0px 100px;
-    font-weight: 700;
+    padding: 0 10px;
+    font-weight: 600;
     font-size: 18px;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+}
+
+.mo-ban:hover, .cap-nhat-hoa-don:hover, .thanh-toan-hoa-don:hover {
+    background-color: #fff;
+    color: var(--text-color);
+    border: 1px solid var(--color-one);
+    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
 }
+
 .top-taskbar > .xem-danh-sach-hoi-vien {
     display: flex;
-    padding: 25px;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    display: none;
 }
 .them-hoi-vien, .cap-nhat-hoi-vien {
-    margin: 0px 50px 0px 100px;
-    font-weight: 700;
+    padding: 0 10px;
+    font-weight: 600;
     font-size: 18px;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.them-hoi-vien:hover
+, .cap-nhat-hoi-vien:hover {
+    background-color: #fff;
+    color: var(--text-color);
+    border: 1px solid var(--color-one);
+    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
 }
 
 
 .content {
-    background-color: gainsboro;
+    /* background-color: gainsboro; */
+    height: 100vh;
 }
+
+table {
+    width: 100%;
+    padding: 14px 10px;
+    /* background-color: rgb(172, 162, 162); */
+}
+
+table th {
+    text-transform: uppercase;
+    font-weight: 600;
+  }
+
+table .hang-nd:hover {
+    background-color: #ccc;
+    cursor: pointer;
+}
+
+th {
+    background-color: #f2f2f2;
+}
+
+table td,
+table th {
+    padding: 14px 10px;
+    color: #8c94a7;
+    text-align: center;
+    font-size: 18px;
+    border: 1px solid #999;
+}
+
+
diff --git a/Frontend/thu-ngan-home.html b/Frontend/thu-ngan-home.html
index bab1219..241d638 100644
--- a/Frontend/thu-ngan-home.html
+++ b/Frontend/thu-ngan-home.html
@@ -10,13 +10,13 @@
 <body>
     <div class="main-taskbar">
         <div class="logo">
-            <img src="" alt="Logo">
+            <img src="./Mau-Logo-Bida-Thiet-Ke-Dep-Danh-Cho-doi-Cau-Lac-Bo-Club-Quan-Billiards-73-400x400.png" alt="Logo">
         </div>
 
         <div class="info">
             <div>
                 <label for="ma-thu-ngan">Mã thu ngân:</label>
-                <p id="ma-thu-ngan">1</p>
+                <p id="ma-thu-ngan">khiuasd1234</p>
             </div>
             
             <div>
@@ -26,7 +26,7 @@
         </div>
         
         <div class="taskbar-function">
-            <div>xem danh sách bàn bida</div>
+            <div>Xem danh sách bàn bida</div>
             <div>Xem danh sách bàn hóa đơn</div>
             <div>Xem danh sách bàn hội viên</div>
         </div>
@@ -46,7 +46,51 @@
             </div>
         </div>
         <div class="content">
-
+            <table>
+                <thead>
+                    <tr class="hang-tieu-de">
+                        <th>Số bàn</th>
+                        <th>Trạng thái</th>
+                        <th>Loại bàn</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr class="hang-nd">
+                        <td>
+                            <p>1</p>
+                        </td>
+                        <td>
+                            <p>Trống</p>
+                        </td>
+                        <td>
+                            <p>VIP</p>
+                        </td>
+                    </tr>
+                    <tr class="hang-nd">
+                        <td>
+                            <p>2</p>
+                        </td>
+                        <td>
+                            <p>Trống</p>
+                        </td>
+                        <td>
+                            <p>VIP</p>
+                        </td>
+                    </tr>
+                    <tr class="hang-nd">
+                        <td>
+                            <p>1</p>
+                        </td>
+                        <td>
+                            <p>Trống</p>
+                        </td>
+                        <td>
+                            <p>VIP</p>
+                        </td>
+                    </tr>
+                    
+                </tbody>
+            </table>
         </div>
     </div>