css

SicboSub/SicboSub.Web/Views/Home/Index.cshtml

@@ -48,11 +48,11 @@
         </div>
     </div>
     <div class="frame-parent3">
-        <div class="rectangle-parent" style="cursor: pointer;" onclick="handleRegister()">
+        <div id="registerBtnContainer" class="rectangle-parent" style="cursor: pointer;" onclick="handleRegisterClick()">
             <div class="rectangle-div">
             </div>
-            <!-- Register Button -->
-            <div class="button-label">Register</div>
+            <!-- Register/Withdraw Button -->
+            <div id="registerBtnLabel" class="button-label">Register</div>
         </div>
         <div class="rectangle-parent" style="cursor: pointer;" onclick="handleBuyMore()">
             <div class="rectangle-div">
@@ -209,9 +209,96 @@
         </div>
     </div>
 
+    <!-- Withdraw Popup -->
+    <div id="withdrawPopup" class="popup-overlay" style="display: none;">
+        <div class="popup-container withdraw-popup">
+            <!-- Close Button -->
+            <button class="popup-close-btn" onclick="closeWithdrawPopup()">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
+                    <path d="M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7a1 1 0 0 0-1.41 1.41L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z"/>
+                </svg>
+            </button>
+            
+            <!-- Withdraw Content -->
+            <div class="withdraw-content">
+                <!-- Left Side - Account Info -->
+                <div class="withdraw-left">
+                    <div class="withdraw-phone">
+                        <span class="withdraw-label">Phone number</span>
+                        <span class="withdraw-phone-number">0912 345 678</span>
+                    </div>
+                    
+                    <div class="withdraw-tunnel">
+                        <div class="tunnel-icon">T</div>
+                        <span class="tunnel-label">Tunnel</span>
+                    </div>
+                    
+                    <div class="withdraw-balance-badge">Main balance</div>
+                    
+                    <div class="withdraw-info">
+                        <span class="withdraw-info-label">Total withdraw today</span>
+                        <span class="withdraw-info-value">100 HTG</span>
+                    </div>
+                    
+                    <div class="withdraw-info">
+                        <span class="withdraw-info-label">Coin Amount</span>
+                        <span class="withdraw-coin-amount">140.000</span>
+                    </div>
+                </div>
+                
+                <!-- Right Side - Withdraw Options -->
+                <div class="withdraw-right">
+                    <span class="withdraw-options-title">Withdraw value</span>
+                    
+                    <div class="withdraw-options">
+                        <label class="withdraw-option">
+                            <input type="radio" name="withdrawValue" value="1050" />
+                            <span class="withdraw-option-coins">1050 <span class="coins-text">Coins</span></span>
+                            <span class="withdraw-option-htg">10 <span class="htg-text">HTG</span></span>
+                        </label>
+                        
+                        <label class="withdraw-option">
+                            <input type="radio" name="withdrawValue" value="525" />
+                            <span class="withdraw-option-coins">525 <span class="coins-text">Coins</span></span>
+                            <span class="withdraw-option-htg">5 <span class="htg-text">HTG</span></span>
+                        </label>
+                        
+                        <label class="withdraw-option">
+                            <input type="radio" name="withdrawValue" value="210" />
+                            <span class="withdraw-option-coins">210 <span class="coins-text">Coins</span></span>
+                            <span class="withdraw-option-htg">2 <span class="htg-text">HTG</span></span>
+                        </label>
+                        
+                        <label class="withdraw-option">
+                            <input type="radio" name="withdrawValue" value="105" checked />
+                            <span class="withdraw-option-coins">105 <span class="coins-text">Coins</span></span>
+                            <span class="withdraw-option-htg">1 <span class="htg-text">HTG</span></span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Withdraw Button -->
+            <button class="withdraw-btn" onclick="handleWithdrawConfirm()">Withdraw</button>
+        </div>
+    </div>
+
 </div>
 
 <script>
+    // Track registration state
+    let isRegistered = false;
+    
+    function handleRegisterClick() {
+        if (isRegistered) {
+            // Already registered, show withdraw popup
+            handleWithdraw();
+        } else {
+            // Not registered, show register popup
+            handleRegister();
+        }
+    }
+    
     function handleRegister() {
         // Show the register popup
         document.getElementById('registerPopup').style.display = 'flex';
@@ -224,8 +311,35 @@
     function handleRegisterConfirm() {
         // TODO: Implement actual register/buy daily package logic
         alert('Daily Package purchased!');
+        
+        // Mark as registered and change button to Withdraw
+        isRegistered = true;
+        document.getElementById('registerBtnLabel').textContent = 'Withdraw';
+        
         closeRegisterPopup();
     }
+    
+    function handleWithdraw() {
+        // Show the withdraw popup
+        document.getElementById('withdrawPopup').style.display = 'flex';
+    }
+    
+    function closeWithdrawPopup() {
+        document.getElementById('withdrawPopup').style.display = 'none';
+    }
+    
+    function handleWithdrawConfirm() {
+        const selectedOption = document.querySelector('input[name="withdrawValue"]:checked');
+        if (selectedOption) {
+            const coins = selectedOption.value;
+            const htg = parseInt(coins) / 105; // approximate conversion
+            alert('Withdraw requested: ' + coins + ' Coins');
+            // TODO: Implement actual withdraw logic here
+            closeWithdrawPopup();
+        } else {
+            alert('Please select a withdraw amount');
+        }
+    }
 
     function handleBuyMore() {
         // Show the select package popup
@@ -286,6 +400,12 @@
             closeRegisterPopup();
         }
     });
+    
+    document.getElementById('withdrawPopup')?.addEventListener('click', function(e) {
+        if (e.target === this) {
+            closeWithdrawPopup();
+        }
+    });
 
     function handlePlay() {
         // TODO: Implement play logic

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

@@ -316,3 +316,204 @@
     padding: 4px 12px;
     z-index: 5;
 }
+
+/* ========================================
+   Withdraw Popup Styles
+   ======================================== */
+
+.withdraw-popup {
+    width: 320px;
+    padding: 20px;
+}
+
+.withdraw-content {
+    display: flex;
+    gap: 15px;
+    margin-bottom: 15px;
+}
+
+/* Left Side - Account Info */
+.withdraw-left {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+}
+
+.withdraw-phone {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+}
+
+.withdraw-label {
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.withdraw-phone-number {
+    font-size: 16px;
+    font-weight: 700;
+    color: #ffe3aa;
+}
+
+.withdraw-tunnel {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.tunnel-icon {
+    width: 24px;
+    height: 24px;
+    background: linear-gradient(135deg, #00a8e8 0%, #0077b6 100%);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 700;
+    color: #fff;
+}
+
+.tunnel-label {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.withdraw-balance-badge {
+    display: inline-block;
+    background: linear-gradient(90deg, #c9a861 0%, #ffe3aa 50%, #c9a861 100%);
+    color: #000;
+    font-size: 11px;
+    font-weight: 700;
+    padding: 3px 10px;
+    border-radius: 4px;
+}
+
+.withdraw-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0px;
+}
+
+.withdraw-info-label {
+    font-size: 10px;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.withdraw-info-value {
+    font-size: 14px;
+    font-weight: 700;
+    color: #ffe3aa;
+}
+
+.withdraw-coin-amount {
+    font-size: 18px;
+    font-weight: 700;
+    color: #ffe3aa;
+}
+
+/* Right Side - Withdraw Options */
+.withdraw-right {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.withdraw-options-title {
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.6);
+    text-align: right;
+}
+
+.withdraw-options {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.withdraw-option {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: background 0.2s;
+}
+
+.withdraw-option:hover {
+    background: rgba(201, 168, 97, 0.15);
+}
+
+.withdraw-option input[type="radio"] {
+    display: none;
+}
+
+/* Selected option - darker background for visibility */
+.withdraw-option:has(input[type="radio"]:checked) {
+    background: rgba(201, 168, 97, 0.3);
+    border: 1px solid #c9a861;
+    border-radius: 6px;
+}
+
+.withdraw-option input[type="radio"]:checked ~ .withdraw-option-coins,
+.withdraw-option input[type="radio"]:checked ~ .withdraw-option-htg {
+    color: #ffe3aa;
+}
+
+.withdraw-option-coins {
+    font-size: 13px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.8);
+    min-width: 80px;
+    text-align: right;
+}
+
+.withdraw-option-coins .coins-text {
+    font-size: 10px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.5);
+    margin-left: 3px;
+}
+
+.withdraw-option-htg {
+    font-size: 13px;
+    font-weight: 700;
+    color: #ffe3aa;
+    min-width: 55px;
+    text-align: right;
+}
+
+.withdraw-option-htg .htg-text {
+    font-size: 10px;
+    font-weight: 400;
+    color: #c9a861;
+}
+
+/* Withdraw Button */
+.withdraw-btn {
+    width: 100%;
+    padding: 12px;
+    font-size: 18px;
+    font-weight: 700;
+    color: #000;
+    background: linear-gradient(180deg, #FFFFFF 0%, #E1C59C 100%);
+    border: 2px solid #000;
+    border-radius: 25px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-family: 'Kanit', sans-serif;
+}
+
+.withdraw-btn:hover {
+    background: linear-gradient(180deg, #FFFFFF 0%, #d4b68a 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(225, 197, 156, 0.4);
+}