|
|
<!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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
