index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>CashApp Dashboard</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- Splash Screen -->
  <div id="splash" class="splash-screen">
    <h1>Welcome to CashApp</h1>
    <p>Send, receive, and manage your money with ease and security.</p>
    <button onclick="enterApp()">Continue</button>
  </div>

  <!-- Dashboard -->
  <div id="dashboard" style="display: none;">
    <div class="app">
      <header><h1>Money</h1></header>

      <section class="balance-section">
        <div class="balance-info">
          <div>
            <p>Cash Balance</p>
            <h2 id="balance">$99999.23</h2>
          </div>
          <button>Account & Routing</button>
        </div>
        <div class="action-buttons">
          <button onclick="showModal('add')">Add Cash</button>
          <button onclick="showModal('cashout')">Cash Out</button>
        </div>
      </section>

      <!-- Icons Section -->
      <section class="tiles">
        <div class="tile">
          <img src="https://img.icons8.com/ios-filled/50/green-piggy-bank.png" alt="Savings" />
          <p>Savings</p>
          <strong>$0.00</strong>
        </div>
        <div class="tile">
          <img src="https://img.icons8.com/ios-filled/50/bitcoin--v1.png" alt="Bitcoin" />
          <p>Bitcoin</p>
        </div>
        <div class="tile">
          <img src="https://img.icons8.com/ios-filled/50/combo-chart--v1.png" alt="Stocks" />
          <p>Stocks</p>
        </div>
        <div class="tile">
          <img src="https://img.icons8.com/ios-filled/50/tax.png" alt="Taxes" />
          <p>Taxes</p>
        </div>
      </section>

      <section class="payment-section">
        <button id="payBtn" onclick="showModal('pay')">$</button>
      </section>

      <section class="payment-history" id="history">
        <h3>Payment History</h3>
      </section>

      <!-- Modal -->
      <div class="modal" id="modal">
        <div class="modal-content">
          <h2 id="modalTitle">Action</h2>
          <input type="text" id="input1" placeholder="Enter amount" />
          <input type="text" id="input2" placeholder="Receiver Tag" style="display:none"/>
          <select id="bankSelect">
            <option value="">Select Bank</option>
            <option value="Chase">Chase Bank</option>
            <option value="Bank of America">Bank of America</option>
            <option value="Wells Fargo">Wells Fargo</option>
            <option value="Capital One">Capital One</option>
          </select>
          <select id="paymentStatus" style="display:none">
            <option value="Successful">Successful</option>
            <option value="Pending">Pending</option>
            <option value="Rejected">Rejected</option>
          </select>
          <button onclick="performAction()">Submit</button>
          <button onclick="closeModal()">Cancel</button>
        </div>
      </div>

      <!-- Receipt -->
      <div class="receipt" id="receipt">
        <div class="receipt-content">
          <div class="circle">D</div>
          <h2></h2>
          <p></p>
          <h1 id="receiptAmount">$0.00</h1>
          <p id="receiptTime"></p>
          <div class="check">✔️ Received</div>
          <div class="receipt-details"></div>
          <div style="margin-top: 1rem;">
            <button onclick="closeReceipt()" style="padding: 0.5rem 1rem; border-radius: 8px;">
              Back to Dashboard
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="scripts.js"></script>
</body>
</html>