Bankify/index.html at master · shivPosted/Bankify · 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!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" href="logo.png" type="image/png" />

    <link
      href="https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="style.css" />
    <title>Bankify</title>
  </head>
  <body class="b-login">
    <section class="landing-login grid">
      <div class="description">
        <div class="welcome">
          <img src="logo.png" alt="bank-logo" class="logo" />
          <h1>Welcome to Bankify</h1>
        </div>
        <p>
          Empower your finances with ease! Transfer money, take loans, and
          manage your account hassle-free. Experience secure and seamless
          banking for a brighter financial future.
        </p>
      </div>
      <div class="login">
        <h2 class="heading-login">Login</h2>
        <form action="#" class="login-form">
          <input class="user" placeholder="👤 user" type="text" />
          <input class="password" placeholder="🔑 pin" type="password" />
          <button class="login-btn">Login</button>
        </form>
      </div>
    </section>

    <!-- main account section -->
    <main class="main-landing-page hidden">
      <nav class="welcome-message">
        <h2 class="main-section-welcome">Welcome back, Shiv!</h2>
        <img src="logo.png" alt="" class="logo">
        <button class="logout login-btn">Logout</button>
      </nav>
      <section class="main-transaction">
        <div class="current-balance-update">
          <h2>Current balance</h2>
          <p>As of <span  class="current-date-label">24-07-2023, 23:04</span></p>
        </div>
        <div class="current-balance-display">₹ 50,000</div>
        <div class="transaction-history">
          <!-- <div class="transaction-row"> -->
            <div class="transaction-row">
              <div class="type_deposit">2 Deposit</div>
              <div class="date_transaction">24/07/2023</div>
              <div class="transaction_amount">₹ 10,000</div>
            </div>
            <div class="transaction-row">
              <div class="type_withdrawl">1 withdrawl</div>
              <div class="date_transaction">24/07/2023</div>
              <div class="transaction_amount">-₹ 5,000</div>
            </div>
            <!-- </div> -->

        </div>
        <!-- <div class="provided-functions"> -->
          <div class="transfer_money">
            <h3>Transfer Money</h3>
            <form action="#" class="money-function-form">
              <input  class="transfer-to" type="text" />
              <input  class="transfer-amount" type="number" />
              <button class="transfer-btn function-btn">&rightarrow;</button>
              <div>Transfer to</div>
              <div>Amount</div>
            </form>
          </div>
          <div class="request_loan">
            <h3>Request Loan</h3>
            <form action="#" class="money-function-form">
              <input type="number" class="loan-amount"/>
              <button class="loan-btn function-btn">&rightarrow;</button>
              <div class="amount">Amount</div>
            </form>
          </div>
          <div class="close_account">
            <h3>Delete Account</h3>
            <form action="#" class="money-function-form">
              <input type="text" class="confirm-user"/>
              <input type="password" class="confirm-pin"/>
              <button class="close-account-btn function-btn">&rightarrow;</button>
              <div>Confirm user</div>
              <div>Confirm pin</div>
            </form>
          </div>
        <!-- </div> -->
        <div class="summary_account">
          <div>
            IN<span  class="input_amount">₹00,000</span>
          </div>
          <div>
            OUT<span  class="output_amount">₹00,000</span>
          </div>
          <div>
            INTEREST<span  class="interest_amount">₹00,000</span>
          </div>
          <div class="sort">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="sort-icon">
              <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
            </svg>

            sort
          </div>
        </div>
        <div class="log-out-timer">You will be logged out in <strong class="timer" style="font-size: 500;">05:00</strong></div>
        </div>

      </section>
    </main>
    <div class="logout-confirm hidden">
      <h4>Do you want to logout?</h4>

      <div class="response">
        <button class="ok login-btn">Ok</button>
        <button class="cancel login-btn">Cancel</button>
      </div>
      <button class="cross-button">&times;</button>
    </div>
    <div class="overlay-logout hidden"></div>
    <div class="wrong-info" >Wrong username or password</div>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="help-login help-open">
      <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="help-login help-close hidden">
      <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>

    <div class="help">

      <div class="u1">
        <p>USER 1 : <strong> sps</strong></p>
        <p>PIN : <strong> 1111</strong></p>
      </div>
      <div class="u2">
        <p>USER 2 : <strong> mr</strong></p>
        <p>PIN : <strong> 2222</strong></p>
      </div>

    </div>
    <script src="script.js"></script>
    <!-- <script src="exercise.js"></script> -->
  </body>
</html>