css history

SicboSub/SicboSub.Web/Views/Home/History.cshtml

@@ -18,10 +18,13 @@
         <!-- Tab Buttons -->
         <div class="history-tabs">
             <div class="tab-button active" data-tab="game">
-                <span class="tab-label">Game history</span>
+                <span class="tab-label">Game</span>
             </div>
             <div class="tab-button" data-tab="prize">
-                <span class="tab-label">Prize history</span>
+                <span class="tab-label">Prize</span>
+            </div>
+            <div class="tab-button" data-tab="purchase">
+                <span class="tab-label">Purchase</span>
             </div>
         </div>
 
@@ -122,6 +125,55 @@
                 <div class="col-status successful">Successful</div>
             </div>
         </div>
+
+        <!-- Purchase History Table (Hidden by default) -->
+        <div class="history-table hidden" id="purchase-table">
+            <!-- Header Row -->
+            <div class="table-header">
+                <div class="col-no">No</div>
+                <div class="col-time">Time</div>
+                <div class="col-value">Value</div>
+                <div class="col-type">Type</div>
+            </div>
+
+            <!-- Data Rows -->
+            <div class="table-row">
+                <div class="col-no">1</div>
+                <div class="col-time">20/12/2026, 18:00:00</div>
+                <div class="col-value">50 <span class="coins">Coins</span></div>
+                <div class="col-type daily-package">Daily Package</div>
+            </div>
+            <div class="table-row">
+                <div class="col-no">2</div>
+                <div class="col-time">20/12/2026, 18:00:00</div>
+                <div class="col-value">500 <span class="coins">Coins</span></div>
+                <div class="col-type buy-turn">Buy Turn</div>
+            </div>
+            <div class="table-row">
+                <div class="col-no">3</div>
+                <div class="col-time">20/12/2026, 18:00:00</div>
+                <div class="col-value">50 <span class="coins">Coins</span></div>
+                <div class="col-type daily-package">Daily Package</div>
+            </div>
+            <div class="table-row">
+                <div class="col-no">4</div>
+                <div class="col-time">20/12/2026, 18:00:00</div>
+                <div class="col-value">50 <span class="coins">Coins</span></div>
+                <div class="col-type buy-turn">Buy Turn</div>
+            </div>
+            <div class="table-row">
+                <div class="col-no">5</div>
+                <div class="col-time">20/12/2026, 18:00:00</div>
+                <div class="col-value">250 <span class="coins">Coins</span></div>
+                <div class="col-type buy-turn">Buy Turn</div>
+            </div>
+            <div class="table-row">
+                <div class="col-no">6</div>
+                <div class="col-time">20/12/2026, 18:00:00</div>
+                <div class="col-value">50 <span class="coins">Coins</span></div>
+                <div class="col-type daily-package">Daily Package</div>
+            </div>
+        </div>
     </div>
 </div>
 
@@ -133,15 +185,14 @@
             // Add active to clicked tab
             this.classList.add('active');
             
-            // Show/hide tables
+            // Hide all tables
+            document.getElementById('game-table').classList.add('hidden');
+            document.getElementById('prize-table').classList.add('hidden');
+            document.getElementById('purchase-table').classList.add('hidden');
+            
+            // Show selected table
             const tab = this.dataset.tab;
-            if (tab === 'game') {
-                document.getElementById('game-table').classList.remove('hidden');
-                document.getElementById('prize-table').classList.add('hidden');
-            } else {
-                document.getElementById('game-table').classList.add('hidden');
-                document.getElementById('prize-table').classList.remove('hidden');
-            }
+            document.getElementById(tab + '-table').classList.remove('hidden');
         });
     });
 </script>

SicboSub/SicboSub.Web/wwwroot/css/sicbo-history.css

@@ -31,7 +31,7 @@
     position: relative;
     padding: 10px 20px;
     cursor: pointer;
-    border-radius: 8px;
+    border-radius: 20px;
     transition: all 0.2s ease;
     text-align: center;
 }
@@ -192,3 +192,32 @@
 .col-status.fail {
     color: #ff6b6b; /* Red for fail */
 }
+
+/* Purchase History Columns */
+.col-no {
+    width: 60px;
+    flex-shrink: 0;
+    text-align: center;
+}
+
+.col-type {
+    width: 120px;
+    flex-shrink: 0;
+    text-align: right;
+    font-weight: 700;
+}
+
+.coins {
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 12px;
+    margin-left: 4px;
+}
+
+/* Purchase Type Colors */
+.col-type.daily-package {
+    color: #ffe3aa; /* Yellow for daily package */
+}
+
+.col-type.buy-turn {
+    color: #4fc3f7; /* Blue for buy turn */
+}