msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

Update index.html

Browse Source
pull/1516/head
MR.NOBODY 12 months ago committed by GitHub
parent 5887b47a30
commit 0aebbee466
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 174 additions and 64 deletions
Show Stats Download Patch File Download Diff File

216
7-bank-project/solution/index.html
Unescape View File

@ -1,47 +1,96 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-theme="auto">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#0a7cff">
<title>Squirrel Banking</title> <title>Squirrel Banking</title>
<!-- Local Font Awesome (ensure this path exists locally) -->
<link rel="stylesheet" href="assets/fontawesome/css/all.min.css">
<!-- App styles -->
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<!-- App logic -->
<script src="app.js" defer></script> <script src="app.js" defer></script>
</head> </head>
<body> <body>
<!-- Placeholder where we will insert our app HTML based on route --> <noscript>Please enable JavaScript to use this app.</noscript>
<div id="app">Loading...</div>
<!-- SPA mount point -->
<div id="app" aria-live="polite">Loading…</div>
<!-- Login page template --> <!-- Login page template -->
<template id="login"> <template id="login">
<section class="login-page"> <section class="page page-auth" aria-labelledby="loginTitle">
<div class="login-container"> <div class="auth-card">
<div class="login-title text-center"> <div class="brand">
<i class="fa-solid fa-squirrel brand-icon" aria-hidden="true"></i>
<h1 id="loginTitle" class="brand-title">
<span class="hide-xs">Squirrel</span> <span class="hide-xs">Squirrel</span>
<img class="login-logo" src="logo.svg" alt="Squirrel Banking Logo"> <img class="brand-logo" src="logo.svg" alt="Squirrel Banking Logo">
<span class="hide-xs">Banking</span> <span class="hide-xs">Banking</span>
</h1>
</div>
<div class="auth-panels">
<section class="auth-panel" aria-labelledby="loginHeading">
<h2 id="loginHeading" class="panel-title">
<i class="fa-solid fa-right-to-bracket" aria-hidden="true"></i> Login
</h2>
<form id="loginForm" action="javascript:void(0)" novalidate>
<label for="username" class="field-label">Username</label>
<div class="field">
<i class="fa-solid fa-user" aria-hidden="true"></i>
<input id="username" name="user" type="text" maxlength="20" autocomplete="username" required>
</div> </div>
<div class="login-content"> <div id="loginError" class="error" role="alert" aria-live="polite"></div>
<h2 class="text-center">Login</h2> <button class="btn btn-primary" type="submit">
<form id="loginForm" action="javascript:login()"> <i class="fa-solid fa-arrow-right-to-bracket" aria-hidden="true"></i>
<label for="username">Username</label> Login
<input id="username" name="user" type="text" maxlength="20" required> </button>
<div id="loginError" class="error" role="alert"></div>
<button>Login</button>
</form> </form>
<p class="login-separator text-center"><span>OR</span></p> </section>
<h2 class="text-center">Register</h2>
<form id="registerForm" action="javascript:register()"> <div class="auth-sep" role="separator" aria-label="Or">OR</div>
<label for="user">Username (required)</label>
<input id="user" name="user" type="text" maxlength="20" required> <section class="auth-panel" aria-labelledby="registerHeading">
<label for="currency">Currency (required)</label> <h2 id="registerHeading" class="panel-title">
<input id="currency" name="currency" type="text" maxlength="5" value="$" required> <i class="fa-solid fa-user-plus" aria-hidden="true"></i> Register
<label for="description">Description</label> </h2>
<input id="description" name="description" type="text" maxlength="100"> <form id="registerForm" action="javascript:void(0)" novalidate>
<label for="current-balance">Current balance</label> <label for="user" class="field-label">Username (required)</label>
<input id="current-balance" name="balance" type="number" value="0"> <div class="field">
<div id="registerError" class="error" role="alert"></div> <i class="fa-solid fa-id-badge" aria-hidden="true"></i>
<button>Register</button> <input id="user" name="user" type="text" maxlength="20" autocomplete="username" required>
</div>
<label for="currency" class="field-label">Currency (required)</label>
<div class="field">
<i class="fa-solid fa-coins" aria-hidden="true"></i>
<input id="currency" name="currency" type="text" maxlength="5" placeholder="INR or ₹" required>
</div>
<label for="description" class="field-label">Description</label>
<div class="field">
<i class="fa-solid fa-note-sticky" aria-hidden="true"></i>
<input id="description" name="description" type="text" maxlength="100" placeholder="About the account">
</div>
<label for="current-balance" class="field-label">Current balance</label>
<div class="field">
<i class="fa-solid fa-wallet" aria-hidden="true"></i>
<input id="current-balance" name="balance" type="number" value="0" step="any" inputmode="decimal">
</div>
<div id="registerError" class="error" role="alert" aria-live="polite"></div>
<button class="btn btn-ghost" type="submit">
<i class="fa-solid fa-user-check" aria-hidden="true"></i>
Register
</button>
</form> </form>
</section>
</div> </div>
</div> </div>
</section> </section>
@ -49,48 +98,109 @@
<!-- Dashboard page template --> <!-- Dashboard page template -->
<template id="dashboard"> <template id="dashboard">
<section class="dashboard-page"> <section class="page page-dash">
<header class="dashboard-header"> <header class="dash-header">
<img class="dashboard-logo" src="logo.svg" alt="Squirrel Banking Logo"> <div class="brand compact">
<h1 class="dashboard-title hide-xs">Squirrel Banking</h1> <img class="brand-logo" src="logo.svg" alt="">
<button onclick="logout()">Logout</button> <h1 class="brand-title hide-xs">Squirrel Banking</h1>
</div>
<div class="header-actions">
<button class="btn btn-icon" type="button" id="themeToggle" aria-label="Toggle theme">
<i class="fa-solid fa-moon" aria-hidden="true"></i>
</button>
<button class="btn btn-icon" type="button" onclick="logout()" aria-label="Logout">
<i class="fa-solid fa-right-from-bracket" aria-hidden="true"></i>
</button>
</div>
</header> </header>
<div class="balance">
<div>Balance</div> <section class="summary">
<span id="balance"></span> <div class="balance" aria-live="polite">
<div class="balance-label">
<i class="fa-solid fa-chart-line" aria-hidden="true"></i>
Balance
</div>
<div class="balance-value">
<span id="balance">0</span>
<span id="balance-currency"></span> <span id="balance-currency"></span>
</div> </div>
<div class="dashboard-content"> </div>
<div class="account-meta">
<i class="fa-solid fa-circle-info" aria-hidden="true"></i>
<span id="account-info" class="muted"></span>
</div>
</section>
<section class="dash-content">
<div class="transactions-title"> <div class="transactions-title">
<h2 id="transactions-description"></h2> <h2 id="transactions-description">
<button onclick="addTransaction()">Add transaction</button> <i class="fa-solid fa-receipt" aria-hidden="true"></i>
Transactions
</h2>
<button class="btn btn-primary" type="button" onclick="addTransaction()">
<i class="fa-solid fa-plus" aria-hidden="true"></i>
Add transaction
</button>
</div> </div>
<table class="transactions-table" aria-label="Transactions"> <table class="transactions-table" aria-label="Transactions">
<thead> <thead>
<tr> <tr>
<th>Date</th> <th scope="col"><i class="fa-solid fa-calendar-day" aria-hidden="true"></i> Date</th>
<th>Object</th> <th scope="col"><i class="fa-solid fa-file-lines" aria-hidden="true"></i> Object</th>
<th>Amount</th> <th scope="col" class="num"><i class="fa-solid fa-indian-rupee-sign" aria-hidden="true"></i> Amount</th>
</tr> </tr>
</thead> </thead>
<tbody id="transactions"></tbody> <tbody id="transactions"></tbody>
</table> </table>
</div>
</section> </section>
<section id="transactionDialog" class="dialog"> </section>
<div class="dialog-content">
<h2 class="text-center">Add transaction</h2> <!-- Modal dialog: Add transaction -->
<form id="transactionForm" action="javascript:void(0)"> <section id="transactionDialog" class="dialog" hidden>
<div class="dialog-backdrop" data-dismiss></div>
<div class="dialog-content"
role="dialog"
aria-modal="true"
aria-labelledby="txDialogTitle"
aria-describedby="txDialogDesc">
<h2 id="txDialogTitle" class="text-center">
<i class="fa-solid fa-square-plus" aria-hidden="true"></i>
Add transaction
</h2>
<p id="txDialogDesc" class="muted text-center">
Use negative amount for debit and positive for credit; Esc closes [web guideline aligned].
</p>
<form id="transactionForm" action="javascript:void(0)" novalidate>
<label for="date">Date</label> <label for="date">Date</label>
<div class="field">
<i class="fa-solid fa-calendar-days" aria-hidden="true"></i>
<input id="date" name="date" type="date" required> <input id="date" name="date" type="date" required>
</div>
<label for="object">Object</label> <label for="object">Object</label>
<div class="field">
<i class="fa-solid fa-tag" aria-hidden="true"></i>
<input id="object" name="object" type="text" maxlength="50" required> <input id="object" name="object" type="text" maxlength="50" required>
<label for="amount">Amount (use negative value for debit)</label> </div>
<input id="amount" name="amount" type="number" value="0" step="any" required>
<div id="transactionError" class="error" role="alert"></div> <label for="amount">Amount (negative for debit)</label>
<div class="field">
<i class="fa-solid fa-money-bill-transfer" aria-hidden="true"></i>
<input id="amount" name="amount" type="number" value="0" step="any" inputmode="decimal" required>
</div>
<div id="transactionError" class="error" role="alert" aria-live="polite"></div>
<div class="dialog-buttons"> <div class="dialog-buttons">
<button type="button" class="button-alt" formaction="javascript:cancelTransaction()" formnovalidate>Cancel</button> <button type="button" class="btn btn-ghost" data-dismiss>
<button formaction="javascript:confirmTransaction()">OK</button> <i class="fa-solid fa-xmark" aria-hidden="true"></i>
Cancel
</button>
<button type="submit" class="btn btn-primary">
<i class="fa-solid fa-check" aria-hidden="true"></i>
OK
</button>
</div> </div>
</form> </form>
</div> </div>
@ -102,7 +212,7 @@
<tr> <tr>
<td></td> <td></td>
<td></td> <td></td>
<td></td> <td class="num"></td>
</tr> </tr>
</template> </template>
</body> </body>

Write Preview
Loading…
Cancel
Save