|
|
@@ -2,6 +2,10 @@
|
|
|
Layout = "_GameLayout";
|
|
|
}
|
|
|
|
|
|
+@section Styles {
|
|
|
+ <link rel="stylesheet" href="~/css/sicbo-popup.css" />
|
|
|
+}
|
|
|
+
|
|
|
<div class="home">
|
|
|
<div class="image-2-parent">
|
|
|
<img class="image" src="~/img/image-2.png" />
|
|
|
@@ -66,37 +70,222 @@
|
|
|
<img class="rectangle-icon" src="~/img/rectangle-315.svg" alt="">
|
|
|
<img class="button-small-child2" src="~/img/rectangle-316.svg" alt="">
|
|
|
|
|
|
- <img class="frame-icon" src="~/img/rectangle-318-3.svg" alt=""> <!-- subtract-2.svg inside? -->
|
|
|
+ <img class="frame-icon" src="~/img/rectangle-315.svg" alt=""> <!-- subtract-2.svg inside? -->
|
|
|
|
|
|
- <img class="button-small-child3" src="~/img/rectangle-318-2.svg" alt="">
|
|
|
+ <img class="button-small-child3" src="~/img/rectangle-315.svg" alt="">
|
|
|
<img class="button-small-child4" src="~/img/rectangle-317.svg" alt="">
|
|
|
<img class="button-small-child5" src="~/img/image.svg" alt="">
|
|
|
- <img class="button-small-child6" src="~/img/rectangle-318.svg" alt="">
|
|
|
+ <img class="button-small-child6" src="~/img/rectangle-317.svg" alt="">
|
|
|
|
|
|
- <img class="vector-icon" src="~/img/vector-2.svg" alt="">
|
|
|
+ <img class="vector-icon" src="~/img/Frame 1244831299.svg" alt="">
|
|
|
<img class="vector-icon2" src="~/img/vector.svg" alt="">
|
|
|
- <img class="vector-icon3" src="~/img/vector-3.svg" alt="">
|
|
|
- <img class="vector-icon4" src="~/img/vector-4.svg" alt="">
|
|
|
+ <img class="vector-icon3" src="~/img/Frame 1244831300.svg" alt="">
|
|
|
+ <img class="vector-icon4" src="~/img/Frame 1244831300.svg" alt="">
|
|
|
|
|
|
<div class="button-label3">Play</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <img class="home-barpro-icon" alt=""> -->
|
|
|
|
|
|
+ <!-- Select Package Popup -->
|
|
|
+ <div id="selectPackagePopup" class="popup-overlay" style="display: none;">
|
|
|
+ <div class="popup-container">
|
|
|
+ <!-- Header -->
|
|
|
+ <div class="popup-header">
|
|
|
+ <span class="popup-title">Select Package</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Close Button -->
|
|
|
+ <button class="popup-close-btn" onclick="closePackagePopup()">
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- Package Options -->
|
|
|
+ <div class="package-list">
|
|
|
+ <label class="package-option">
|
|
|
+ <input type="radio" name="package" value="500" />
|
|
|
+ <span class="package-coins">500 <span class="coins-text">Coins</span></span>
|
|
|
+ <span class="package-htg">5 <span class="htg-text">HTG</span></span>
|
|
|
+ </label>
|
|
|
+
|
|
|
+ <label class="package-option">
|
|
|
+ <input type="radio" name="package" value="400" />
|
|
|
+ <span class="package-coins">400 <span class="coins-text">Coins</span></span>
|
|
|
+ <span class="package-htg">4 <span class="htg-text">HTG</span></span>
|
|
|
+ </label>
|
|
|
+
|
|
|
+ <label class="package-option">
|
|
|
+ <input type="radio" name="package" value="300" />
|
|
|
+ <span class="package-coins">300 <span class="coins-text">Coins</span></span>
|
|
|
+ <span class="package-htg">3 <span class="htg-text">HTG</span></span>
|
|
|
+ </label>
|
|
|
+
|
|
|
+ <label class="package-option">
|
|
|
+ <input type="radio" name="package" value="200" />
|
|
|
+ <span class="package-coins">200 <span class="coins-text">Coins</span></span>
|
|
|
+ <span class="package-htg">2 <span class="htg-text">HTG</span></span>
|
|
|
+ </label>
|
|
|
+
|
|
|
+ <label class="package-option">
|
|
|
+ <input type="radio" name="package" value="100" checked />
|
|
|
+ <span class="package-coins">100 <span class="coins-text">Coins</span></span>
|
|
|
+ <span class="package-htg">1 <span class="htg-text">HTG</span></span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Action Buttons -->
|
|
|
+ <div class="popup-actions">
|
|
|
+ <button class="popup-btn cancel-btn" onclick="closePackagePopup()">Cancel</button>
|
|
|
+ <button class="popup-btn next-btn" onclick="handlePackageNext()">Next</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Confirm Buy More Popup -->
|
|
|
+ <div id="confirmBuyMorePopup" class="popup-overlay" style="display: none;">
|
|
|
+ <div class="popup-container confirm-popup">
|
|
|
+ <!-- Header -->
|
|
|
+ <div class="popup-header">
|
|
|
+ <span class="popup-title">Confirm buy more</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Close Button -->
|
|
|
+ <button class="popup-close-btn" onclick="closeConfirmPopup()">
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- Confirm Content -->
|
|
|
+ <div class="confirm-content">
|
|
|
+ <p class="confirm-message">Do you want to buy</p>
|
|
|
+ <p class="confirm-coins"><span id="confirmCoinsAmount">100</span> <span class="coins-label">Coins</span></p>
|
|
|
+ <p class="confirm-price">Price <span id="confirmPriceAmount">1</span> <span class="htg-label">HTG</span></p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Action Buttons -->
|
|
|
+ <div class="popup-actions">
|
|
|
+ <button class="popup-btn cancel-btn" onclick="closeConfirmPopup()">Cancel</button>
|
|
|
+ <button class="popup-btn next-btn" onclick="handleConfirmBuy()">Confirm</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Register Popup -->
|
|
|
+ <div id="registerPopup" class="popup-overlay" style="display: none;">
|
|
|
+ <div class="popup-container register-popup">
|
|
|
+ <!-- Close Button -->
|
|
|
+ <button class="popup-close-btn" onclick="closeRegisterPopup()">
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- Register Content -->
|
|
|
+ <div class="register-content">
|
|
|
+ <!-- Character Image (left side) -->
|
|
|
+ <div class="register-character">
|
|
|
+ <img src="~/img/register-character.png" alt="Character" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Right Side Content -->
|
|
|
+ <div class="register-right">
|
|
|
+ <!-- Question Mark Icon -->
|
|
|
+ <div class="register-question-icon">
|
|
|
+ <img src="~/img/question-icon.png" alt="?" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Text Content -->
|
|
|
+ <div class="register-text">
|
|
|
+ <p class="register-message">Do you confirm<br/>to buy the<br/><span class="highlight-text">Daily Package</span>?</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Confirm Button -->
|
|
|
+ <button class="popup-btn next-btn register-confirm-btn" onclick="handleRegisterConfirm()">Confirm</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
function handleRegister() {
|
|
|
- // TODO: Implement register logic
|
|
|
- alert('Register clicked!');
|
|
|
- // window.location.href = '/Home/Register';
|
|
|
+ // Show the register popup
|
|
|
+ document.getElementById('registerPopup').style.display = 'flex';
|
|
|
+ }
|
|
|
+
|
|
|
+ function closeRegisterPopup() {
|
|
|
+ document.getElementById('registerPopup').style.display = 'none';
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleRegisterConfirm() {
|
|
|
+ // TODO: Implement actual register/buy daily package logic
|
|
|
+ alert('Daily Package purchased!');
|
|
|
+ closeRegisterPopup();
|
|
|
}
|
|
|
|
|
|
function handleBuyMore() {
|
|
|
- // TODO: Implement buy more logic
|
|
|
- alert('Buy more clicked!');
|
|
|
- // window.location.href = '/Home/BuyMore';
|
|
|
+ // Show the select package popup
|
|
|
+ document.getElementById('selectPackagePopup').style.display = 'flex';
|
|
|
+ }
|
|
|
+
|
|
|
+ function closePackagePopup() {
|
|
|
+ document.getElementById('selectPackagePopup').style.display = 'none';
|
|
|
+ }
|
|
|
+
|
|
|
+ function handlePackageNext() {
|
|
|
+ const selectedPackage = document.querySelector('input[name="package"]:checked');
|
|
|
+ if (selectedPackage) {
|
|
|
+ const coins = selectedPackage.value;
|
|
|
+ // Calculate HTG based on coins (100 coins = 1 HTG)
|
|
|
+ const htg = parseInt(coins) / 100;
|
|
|
+
|
|
|
+ // Update confirm popup with selected values
|
|
|
+ document.getElementById('confirmCoinsAmount').textContent = coins;
|
|
|
+ document.getElementById('confirmPriceAmount').textContent = htg;
|
|
|
+
|
|
|
+ // Hide select popup and show confirm popup
|
|
|
+ closePackagePopup();
|
|
|
+ document.getElementById('confirmBuyMorePopup').style.display = 'flex';
|
|
|
+ } else {
|
|
|
+ alert('Please select a package');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function closeConfirmPopup() {
|
|
|
+ document.getElementById('confirmBuyMorePopup').style.display = 'none';
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleConfirmBuy() {
|
|
|
+ const coins = document.getElementById('confirmCoinsAmount').textContent;
|
|
|
+ const htg = document.getElementById('confirmPriceAmount').textContent;
|
|
|
+
|
|
|
+ // TODO: Implement actual buy logic here
|
|
|
+ alert('Purchase confirmed: ' + coins + ' Coins for ' + htg + ' HTG');
|
|
|
+ closeConfirmPopup();
|
|
|
}
|
|
|
+
|
|
|
+ // Close popup when clicking overlay
|
|
|
+ document.getElementById('selectPackagePopup')?.addEventListener('click', function(e) {
|
|
|
+ if (e.target === this) {
|
|
|
+ closePackagePopup();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('confirmBuyMorePopup')?.addEventListener('click', function(e) {
|
|
|
+ if (e.target === this) {
|
|
|
+ closeConfirmPopup();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('registerPopup')?.addEventListener('click', function(e) {
|
|
|
+ if (e.target === this) {
|
|
|
+ closeRegisterPopup();
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
function handlePlay() {
|
|
|
// TODO: Implement play logic
|