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