Upload 4 files

dashboard.html

@@ -33,7 +33,8 @@
                     <a href="#" class="nav-link">Trade</a>
                     <a href="#" class="nav-link">Buy Crypto</a>
                     <a href="#" class="nav-link">Terms of Use</a>
-
+                    <button class="btn-logout" onclick="logout()">Logout</button>
+                </nav>
             </div>
         </header>
 
@@ -282,6 +283,9 @@
         </div>
     </div>
 
+    <!-- Notification -->
+    <div id="notification" class="notification"></div>
+
     <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -33,13 +33,19 @@ function initAuth() {
 }
 
 function switchToRegister() {
-  document.getElementById("loginForm").classList.remove("active")
-  document.getElementById("registerForm").classList.add("active")
+  const loginForm = document.getElementById("loginForm")
+  const landingPage = document.getElementById("landingPage")
+
+  if (loginForm) loginForm.classList.remove("active")
+  if (landingPage) landingPage.classList.add("active")
 }
 
 function switchToLogin() {
-  document.getElementById("registerForm").classList.remove("active")
-  document.getElementById("loginForm").classList.add("active")
+  const loginForm = document.getElementById("loginForm")
+  const landingPage = document.getElementById("landingPage")
+
+  if (landingPage) landingPage.classList.remove("active")
+  if (loginForm) loginForm.classList.add("active")
 }
 
 function handleLogin(e) {
@@ -48,21 +54,26 @@ function handleLogin(e) {
   const email = document.getElementById("loginEmail").value
   const password = document.getElementById("loginPassword").value
 
+  if (!email || !password) {
+    showNotification("Please fill in all fields!", "error")
+    return
+  }
+
   const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
 
-  // Find user by email instead of username
+  // Find user by email
   const userEntry = Object.entries(users).find(
-    ([username, userData]) => userData.email === email && userData.password === password,
+    ([key, userData]) => userData.email === email && userData.password === password,
   )
 
   if (userEntry) {
-    const [username] = userEntry
-    currentUser = username
-    localStorage.setItem("cryptovault_current_user", username)
+    const [userKey] = userEntry
+    currentUser = userKey
+    localStorage.setItem("cryptovault_current_user", userKey)
     showNotification("Login successful!", "success")
     setTimeout(() => {
       window.location.href = "dashboard.html"
-    }, 1000)
+    }, 1500)
   } else {
     showNotification("Invalid email or password!", "error")
   }
@@ -74,12 +85,28 @@ function handleRegister(e) {
   const email = document.getElementById("registerEmail").value
   const password = document.getElementById("registerPassword").value
   const confirmPassword = document.getElementById("confirmPassword").value
+  const termsChecked = document.getElementById("termsCheck").checked
+
+  if (!email || !password || !confirmPassword) {
+    showNotification("Please fill in all fields!", "error")
+    return
+  }
 
   if (password !== confirmPassword) {
     showNotification("Passwords do not match!", "error")
     return
   }
 
+  if (!termsChecked) {
+    showNotification("You must agree to the terms!", "error")
+    return
+  }
+
+  if (password.length < 6) {
+    showNotification("Password must be at least 6 characters!", "error")
+    return
+  }
+
   const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
 
   // Check if email already exists
@@ -113,7 +140,7 @@ function handleRegister(e) {
 
   setTimeout(() => {
     switchToLogin()
-  }, 1000)
+  }, 1500)
 }
 
 // Dashboard functions
@@ -121,12 +148,27 @@ function initDashboard() {
   currentUser = localStorage.getItem("cryptovault_current_user")
 
   if (!currentUser) {
+    console.log("No current user found, redirecting to login")
+    window.location.href = "index.html"
+    return
+  }
+
+  const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
+  if (!users[currentUser]) {
+    console.log("User data not found, redirecting to login")
+    localStorage.removeItem("cryptovault_current_user")
     window.location.href = "index.html"
     return
   }
 
+  console.log("Dashboard initialized for user:", currentUser)
   updateDashboard()
-  initTradingChart()
+
+  // Initialize other dashboard features if elements exist
+  const tradingChart = document.getElementById("tradingChart")
+  if (tradingChart) {
+    initTradingChart()
+  }
 
   // Update BTC price periodically
   setInterval(updateBTCPrice, 5000)
@@ -141,15 +183,34 @@ function updateDashboard() {
     return
   }
 
-  document.getElementById("welcomeMessage").textContent = `Welcome, ${currentUser}`
-  document.getElementById("btcBalance").textContent = userData.btcBalance.toFixed(8)
-  document.getElementById("withdrawBalance").textContent = userData.btcBalance.toFixed(8)
+  // Update balance displays
+  const btcBalanceElements = document.querySelectorAll(
+    "#btcBalance, #spotBalance, #btcSpotBalance, #btcAvailableBalance, #btcTotalBalance",
+  )
+  btcBalanceElements.forEach((element) => {
+    if (element) {
+      element.textContent =
+        userData.btcBalance.toFixed(6) +
+        (element.id.includes("spot") || element.id.includes("Total") || element.id.includes("Available") ? " BTC" : "")
+    }
+  })
 
   const usdValue = (userData.btcBalance * BTC_PRICE).toFixed(2)
-  document.getElementById("usdBalance").textContent = usdValue
+  const usdBalanceElement = document.getElementById("usdBalance")
+  if (usdBalanceElement) {
+    usdBalanceElement.textContent = usdValue
+  }
+
+  // Update spot balance USD display
+  const spotUsdElements = document.querySelectorAll(".spot-usd, .balance-usd-small")
+  spotUsdElements.forEach((element) => {
+    if (element) {
+      element.textContent = `$${usdValue}`
+    }
+  })
 }
 
-function redeemPromo() {
+function redeemPromoCode() {
   const promoCode = document.getElementById("promoCode").value.trim()
 
   if (!promoCode) {
@@ -160,6 +221,11 @@ function redeemPromo() {
   const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
   const userData = users[currentUser]
 
+  if (!userData) {
+    logout()
+    return
+  }
+
   if (userData.redeemedCodes.includes(promoCode)) {
     showNotification("Promo code already used!", "error")
     return
@@ -180,63 +246,69 @@ function redeemPromo() {
   }
 }
 
-function initiateWithdraw() {
-  const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
-  const userData = users[currentUser]
+// Modal functions
+function showDepositModal() {
+  const modal = document.getElementById("depositModal")
+  if (modal) {
+    modal.style.display = "block"
+  }
+}
 
-  if (userData.btcBalance <= 0) {
-    showNotification("Insufficient balance!", "error")
-    return
+function closeDepositModal() {
+  const modal = document.getElementById("depositModal")
+  if (modal) {
+    modal.style.display = "none"
   }
+}
 
-  document.getElementById("withdrawModal").style.display = "block"
-  document.getElementById("withdrawAmount").max = userData.btcBalance.toFixed(8)
+function showWithdrawModal() {
+  const modal = document.getElementById("withdrawModal")
+  if (modal) {
+    modal.style.display = "block"
+  }
 }
 
 function closeWithdrawModal() {
-  document.getElementById("withdrawModal").style.display = "none"
-  document.getElementById("withdrawForm").reset()
+  const modal = document.getElementById("withdrawModal")
+  if (modal) {
+    modal.style.display = "none"
+  }
 }
 
-function closeVerificationModal() {
-  document.getElementById("verificationModal").style.display = "none"
+function showTransferModal() {
+  // Show activation modal instead for demo purposes
+  const modal = document.getElementById("activationModal")
+  if (modal) {
+    modal.style.display = "block"
+  }
 }
 
-// Handle withdraw form submission
-document.addEventListener("DOMContentLoaded", () => {
-  const withdrawForm = document.getElementById("withdrawForm")
-  if (withdrawForm) {
-    withdrawForm.addEventListener("submit", (e) => {
-      e.preventDefault()
-
-      const walletAddress = document.getElementById("walletAddress").value
-      const walletType = document.getElementById("walletType").value
-      const amount = Number.parseFloat(document.getElementById("withdrawAmount").value)
-
-      if (!walletAddress || !walletType || !amount) {
-        showNotification("Please fill all fields!", "error")
-        return
-      }
-
-      const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
-      const userData = users[currentUser]
-
-      if (amount > userData.btcBalance) {
-        showNotification("Insufficient balance!", "error")
-        return
-      }
-
-      closeWithdrawModal()
-      document.getElementById("verificationModal").style.display = "block"
-    })
+function closeActivationModal() {
+  const modal = document.getElementById("activationModal")
+  if (modal) {
+    modal.style.display = "none"
   }
-})
+}
+
+function processWithdraw() {
+  // Show activation modal for demo purposes
+  closeWithdrawModal()
+  const modal = document.getElementById("activationModal")
+  if (modal) {
+    modal.style.display = "block"
+  }
+}
 
 function copyAddress() {
-  const address = "1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa"
-  navigator.clipboard.writeText(address).then(() => {
-    showNotification("Address copied to clipboard!", "success")
-  })
+  const address = "1J8Be2eVqDAvEQDqRqPfropJSrmxLZYG"
+  navigator.clipboard
+    .writeText(address)
+    .then(() => {
+      showNotification("Address copied to clipboard!", "success")
+    })
+    .catch(() => {
+      showNotification("Failed to copy address", "error")
+    })
 }
 
 function logout() {
@@ -315,27 +387,34 @@ function updateBTCPrice() {
 // Notification system
 function showNotification(message, type = "info") {
   const notification = document.getElementById("notification")
-  if (!notification) return
+  if (!notification) {
+    console.log("Notification:", message)
+    return
+  }
 
   notification.textContent = message
-  notification.className = `notification ${type}`
-  notification.classList.add("show")
+  notification.className = `notification ${type} show`
 
   setTimeout(() => {
     notification.classList.remove("show")
   }, 3000)
 }
 
-// Close modals when clicking outside
-window.onclick = (event) => {
-  const withdrawModal = document.getElementById("withdrawModal")
-  const verificationModal = document.getElementById("verificationModal")
-
-  if (event.target === withdrawModal) {
-    closeWithdrawModal()
+// Password toggle function
+function togglePassword(fieldId) {
+  const field = document.getElementById(fieldId)
+  if (field) {
+    field.type = field.type === "password" ? "text" : "password"
   }
+}
 
-  if (event.target === verificationModal) {
-    closeVerificationModal()
-  }
+// Close modals when clicking outside
+window.onclick = (event) => {
+  const modals = ["depositModal", "withdrawModal", "activationModal"]
+  modals.forEach((modalId) => {
+    const modal = document.getElementById(modalId)
+    if (modal && event.target === modal) {
+      modal.style.display = "none"
+    }
+  })
 }

styles.css

@@ -365,6 +365,22 @@ body {
   color: #00d4ff;
 }
 
+.btn-logout {
+  background: transparent;
+  color: #8892b0;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  transition: color 0.3s ease;
+  padding: 8px 16px;
+  border-radius: 6px;
+}
+
+.btn-logout:hover {
+  color: #00d4ff;
+  background: rgba(0, 212, 255, 0.1);
+}
+
 .btn-nav {
   background: #4c51bf;
   color: white;
@@ -903,6 +919,11 @@ body {
   font-size: 14px;
 }
 
+.deposit-note {
+  color: #8892b0;
+  font-size: 14px;
+}
+
 .payment-methods {
   display: grid;
   grid-template-columns: 1fr 1fr;