Sign upLogin

timi-codes/Banka

View on GitHub
Star
frontend/admin/customer.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="shortcut icon"
      type="image/png"
      href="../img/banka-blue-logo.png"
    />
    <link rel="stylesheet" type="text/css" href="../css/customer.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Banka</title>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <div class="top">
          <a href="../index.html"><img src="../img/banka-blue-logo.svg"/></a>
          <div class="current-user web-user dropdown">
            <img class="avatar" src="../img/emeka copy@3x.png" />
            <h4 id=current-user>Tejumola Peter</h4>
            <span>(admin)</span>
            <img class="arrow-down" src="../img/arrow-drop-down.svg" />
            <div class="dropdown-content">
              <a href="#" id="profile-button">Profile</a>
              <a href="../index.html">Logout</a>
            </div>
          </div>
        </div>
      </header>
      <div class="banner">
        <div class="customer">
          <a href="./dashboard.html">
            <img class="back-arrow" src="../img/back-arrow.svg" />
          </a>
          <img class="customer-avatar" src="../img/emeka copy@3x.png" />
          <h4 id="owner">Timi Tejumola</h4>
          <!-- <span>ACTIVE</span> -->
        </div>
        <div class="balance">
          <p>CURRENT BALANCE</p>
          <h3 id="current-balance"></h3>
        </div>
      </div>
      <div class="content">
          <div id="loadingText"><div id="loader"></div>Loading</div>
          <div id="accountText">No account has been created</div>
        <div class="tableDiv">
          <table id="account-table">
            <tr>
              <th class="table-title" colspan="7">Accounts</th>
            </tr>
            <tr>
              <th class="table-header"></th>
              <th class="table-header">Type</th>
              <th class="table-header">Account Number</th>
              <th class="table-header">Status</th>
              <th class="table-header">Created On</th>
              <th class="table-header">Balance</th>
              <th class="action-header">Actions</th>
            </tr>
          </table>
        </div>
        <div class="tableDiv">
          <table id="transaction-table">
            <tr>
              <th class="table-title" colspan="5">Transaction History</th>
              <th class="account-filter" colspan="1">
                <div class="ct-select-group ct-js-select-group">
                  <select class="ct-select ct-js-select" id="filter-trans" onchange="filter()">
                    <option value="all" selected>All</option>
                    <option value="debit">Debit</option>
                    <option value="credit">Credit</option>
                  </select>
                </div>
              </th>
            </tr>
            <tr>
              <th class="table-header">Type</th>
              <th class="table-header">Account Number</th>
              <th class="table-header">Created On</th>
              <th class="table-header">Amount</th>
              <th class="table-header">Old Balance</th>
              <th class="table-header">New Balance</th>
            </tr>
          </table>
        </div>
      </div>
      <div id="accountModal" class="modal">
        <div class="onboarding-modal">
          <h3>Create admin or user account</h3>
          <input type="text" id="fname" name="fname" placeholder="First Name" />
          <input type="text" id="lname" name="lname" placeholder="Last Name" />
          <input
            type="text"
            id="email"
            name="email"
            placeholder="Email Address"
          />
 
          <div class="ct-select-group ct-js-select-group">
            <select class="ct-select ct-js-select">
              <option>Role</option>
              <option>Customer</option>
              <option>Staff</option>
              <option>Admin</option>
            </select>
          </div>
          <input
            type="password"
            id="password"
            name="password"
            placeholder="Password"
          />
 
          <button class="signup" id="create-user">Create</button>
        </div>
      </div>
 
      <div id="profileModal" class="modal">
          <div class="onboarding-modal">
            <img class="avatar" src="../img/emeka copy@3x.png" />
  
            <label for="name">Name</label>
          <input type="text" id="name" name="name" placeholder="Name" disabled/>
 
            <label for="email">Email Address</label>
            <input
              type="text"
              id="email"
              name="email"
              value="tejumolatimi@gmail.com"
              placeholder="Email Address"
              disabled
            />
            <label for="password">Password</label>
            <input
              type="password"
              id="password"
              name="password"
              placeholder="Password"
            />
            <label for="password">Password</label>
            <input
              type="password"
              id="password"
              name="password"
              placeholder="Confirm Password"
            />
  
            <button class="update">Update</button>
          </div>
        </div>
        <div class="alert" id="alert">
            <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
            successful
        </div>
    </div>
  </body>
 
  <script src="../js/customer.js"></script>
</html>