Bankist--js/index.html at master · SheikhRashed/Bankist--js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/images/icon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <link
      href="https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap"
      rel="stylesheet"
    /> -->
    <title>Bank App</title>
    <style></style>
  </head>

  <body>
    <!-- TOP NAVIGATION -->
    <nav>
      <div class="user">
        <div class="user__img">
          <img src="/src/images/logo.png" alt="user-img" />
        </div>
        <div class="user__info">
          <span>Log in to get started</span>
        </div>
      </div>
      <!-- <img src="/src/images/logo.png" alt="Logo" class="logo" /> -->
      <!-- <p class="welcome">Log in to get started</p> -->
      <form class="login">
        <input type="text" placeholder="user" class="login__input login__input--user" />
        <!-- In practice, use type="password" -->
        <input
          type="text"
          placeholder="PIN"
          maxlength="4"
          class="login__input login__input--pin"
        />
        <button class="login__btn">&rarr;</button>
      </form>
    </nav>

    <main class="app">
      <!-- BALANCE -->
      <div class="balance">
        <div>
          <p class="balance__label">Current balance</p>
          <p class="balance__date">As of <span class="date">05/03/2037</span></p>
        </div>
        <p class="balance__value">0000€</p>
      </div>

      <div class="app-content">
        <div>
          <!-- MOVEMENTS -->
          <div class="movements">
            <div class="movements__row">
              <div class="movements__type movements__type--deposit">2 deposit</div>
              <div class="movements__date">3 days ago</div>
              <div class="movements__value">4 000€</div>
            </div>
            <div class="movements__row">
              <div class="movements__type movements__type--withdrawal">1 withdrawal</div>
              <div class="movements__date">24/01/2037</div>
              <div class="movements__value movements__value--withdrawal">-378€</div>
            </div>
          </div>

          <!-- SUMMARY -->
          <div class="summary">
            <p class="summary__label">In</p>
            <p class="summary__value summary__value--in">0000€</p>
            <p class="summary__label">Out</p>
            <p class="summary__value summary__value--out">0000€</p>
            <p class="summary__label">Interest</p>
            <p class="summary__value summary__value--interest">0000€</p>
            <button class="btn--sort">&downarrow; SORT</button>
          </div>
        </div>
        <div>
          <!-- OPERATION: TRANSFERS -->
          <div class="operation operation--transfer">
            <h2>Transfer money</h2>
            <form class="form form--transfer">
              <div class="form__input form__input--to">
                <label class="form__label">Transfer to</label>
                <input type="text" class="" />
              </div>
              <div class="form__input form__input--amount">
                <label class="form__label">Amount</label>
                <input type="number" />
              </div>
              <button class="form__btn form__btn--transfer">&rarr;</button>
            </form>
          </div>

          <!-- OPERATION: LOAN -->
          <div class="operation operation--loan">
            <h2>Request loan</h2>
            <form class="form form--loan">
              <div class="form__input form__input--loan-amount">
                <label class="form__label form__label--loan">Amount</label>
                <input type="number" />
              </div>
              <button class="form__btn form__btn--loan">&rarr;</button>
            </form>
          </div>

          <!-- OPERATION: CLOSE -->
          <div class="operation operation--close">
            <h2>Close account</h2>
            <form class="form form--close">
              <div class="form__input form__input--user">
                <label class="form__label">Confirm user</label>
                <input type="text" />
              </div>
              <div class="form__input form__input--pin">
                <label class="form__label">Confirm PIN</label>
                <input type="password" maxlength="6" />
              </div>
              <button class="form__btn form__btn--close">&rarr;</button>
            </form>
          </div>

          <!-- LOGOUT TIMER -->
          <p class="logout-timer">
            You will be logged out in <span class="timer">05:00</span>
          </p>
        </div>
      </div>
    </main>

    <footer>&copy; by Jonas Schmedtmann</footer>

    <script type="module" src="/main.js"></script>
  </body>
</html>