<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>SΛFU✨PΛL</title>
  <link rel="icon" href="favicon.ico" />
  <link rel="stylesheet" href="styles.css?v=78">
  <link rel="manifest" href="manifest.json">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
</head>
<body>
  <div id="scrolltop"></div>
  <!-- Fixed Header -->
  <header class="header" id="header">
    <div class="logo-container">
        <a href="index.html" class="logo-link"><img src="logo.png" alt="SafuPal Logo" class="logo"></a>
        <a href="index.html" class="logo-link"><span class="app-name">SΛFU✨PΛL</span></a>
    </div>
    <button class="login-btn" id="loginBtn">Login</button>
  </header>

  <!-- Login Content Area -->
  <main class="main-content" id="login-content" style="display: none;">
    <br><br>
    <!-- Dashboard Section -->
    <section class="dashboard">
      <div class="card-container">
        <!-- <div class="card"> -->
          <div class="container">
            <h1 style="text-align: center; color: #007BFF; margin-bottom: 1em;">Account Login</h3>
            <!-- <h1>Login</h1> -->
            <form id="loginForm">
              <div class="form-group">
                  <label for="account">Account</label>
                  <input type="text" id="account" name="account" value="" autocomplete="off" required>
                  <div class="checkbox-container">
                    <input class="checkbox-input" type="checkbox" id="rememberMe" name="rememberMe"><p class="checkbox-label">Remember Me</p>
                  </div>
              </div>
              <div class="form-group">
                  <label for="password">Secret</label>
                  <input type="password" id="password" name="password" autocomplete="off" required>
              </div>
              <button class="buttonLogin" type="submit">Login</button>
            </form>

            <!-- This is where the hash will be displayed -->
            <div id="hashContainer">
                <p id="hashHelpText" class="help-text">Token:<span class="copy-icon" id="copyHash">📋</span></p>
                <div id="hashOutput"></div>
            </div>
          </div>
        <!-- </div> -->
      </div>
    </section>
  </main>

  <!-- Main Content Area -->
  <main class="main-content" id="main-content" style="display: block;">
    <!-- Intro Section -->
    <section class="intro">
      <h1>Trade with Confidence</h1>
      <br>
      <p>Buy or Sell your preferred trading instrument and let your trusted trading companion, <strong>SΛFU✨PΛL</strong>, handle the rest. Trading has never been this easy and safe!</p>
    </section>

    <!-- Filter Section -->
    <section class="filter-section" id="filter-section" style="display: none;">
      <div class="input-container">
        <input type="text" id="filterInput" placeholder="Filter by Symbol..." autocomplete="off" autocapitalize="off" autocorrect="off">
        <button type="button" id="clearButton" class="clear-button">&times;</button>
      </div>
      <!-- Page Selection -->
      <div class="pagination" id="pagination" style="display: none;">
        <button class="page-btn" id="prevPage">&laquo; Previous</button>
        <span class="page-info" id="pageInfo">1 of 10</span>
        <button class="page-btn" id="nextPage">Next &raquo;</button>
      </div>
    </section>

    <!-- Account Section -->
    <section class="dashboard"  id="account-section" style="display: none;">
      <div class="card-container-account" id="account-container">
        <div class="card">
          <h3 class="form-title">Order Summary</h3>
          <ul id="orderSummary" class="order-summary"></ul>
          <button id="submitOrders" class="modern-button" disabled>Submit Orders</button>
          <div id="serverMessage" class="server-message" style="display: none;"><div class="spinner-small"></div></div>
        </div>

        <div id="balanceCard" class="card">
          <div class="spinner-container-account">
            <div class="spinner" id="account-spinner-dashboard"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- Dashboard Section -->
    <section class="dashboard"  id="dashboard">
      <div class="card-container" id="chart-container">
        <div class="spinner-container" id="spinner-container">
          <div class="spinner" id="index-spinner-dashboard"></div>
          <div class="spinner-number" id="spinner-number"></div>
        </div>
        <div class="progress-container" id="progress-container" style="display: none;">
          <div class="progress-bar" id="progress-bar"></div>
          <div class="progress-text" id="progress-text">0%</div>
        </div>
      </div>
    </section>
  </main>

  <div>&nbsp;</div>
  <div>&nbsp;</div>

  <!-- Footer -->
  <footer class="footer" id="footer" style="display: none;">
    <button class="footer-btn" id="boardBtn">
      <i class="fas fa-chart-pie footer-icon" id="boardBtnIcon"></i> <!-- Dashboard icon -->
      <span class="footer-label" id="boardBtnText">Charts</span>
    </button>
    <button class="footer-btn" id="highlightsBtn">
      <i class="fas fa-star footer-icon" id="highlightsBtnIcon"></i> <!-- Highlights icon -->
      <span class="footer-label" id="highlightsBtnText">Highlights</span>
      <span id="notificationBadgeHigh" class="notification-badge high">0</span>
    </button>
    <button class="footer-btn" id="favoritesBtn">
      <i class="fas fa-heart footer-icon" id="favoritesBtnIcon"></i> <!-- Favorites icon -->
      <span class="footer-label" id="favoritesBtnText">Favorites</span>
      <span id="notificationBadgeFav" class="notification-badge fav">0</span>
    </button>
    <button class="footer-btn" id="cartBtn">
      <i class="fas fa-shopping-cart footer-icon" id="cartBtnIcon"></i> <!-- Cart icon -->
      <span class="footer-label" id="cartBtnText">Cart</span>
      <span id="notificationBadge" class="notification-badge cart">0</span>
    </button>
    <button class="footer-btn" id="historyBtn">
      <i class="fas fa-list footer-icon" id="historyBtnIcon"></i> <!-- History icon -->
      <span class="footer-label" id="historyBtnText">History</span>
    </button>
  </footer>

  <!-- Scroll to Top Button -->
  <button id="scrollToTopBtnLeft" class="scroll-to-top-btn scroll-to-top-btn-left">
    <i class="fas fa-arrow-up"></i>
  </button>
  <button id="scrollToTopBtnRight" class="scroll-to-top-btn scroll-to-top-btn-right">
    <i class="fas fa-arrow-up"></i>
  </button>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/3.3.1/sha256.min.js" integrity="sha512-qw5xqZrce8QejL/YnoVvHaXggvfJK3bP2rczgxPSL+JhACfJhOU6gG+/c1LFyRxIpwaF8pZlfwUXLIK+5EEiKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="index.js?v=78"></script>
</body>
</html>