JavaScript-Junior/index.html at main · RakhmetovNurbolat/JavaScript-Junior · 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
<!DOCTYPE html>
<html lang="ru">
  <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="/logo.png" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />

    <link rel="stylesheet" href="style.css" />
    <title>Просто Банк</title>
  </head>
  <body>
    <!-- Верхняя навигация -->
    <nav>
      <p class="welcome">Войдите в свой аккаунт</p>
      <img src="logo.png" alt="logo" class="logo" />
      <form class="login">
        <input type="text" placeholder="user" class="login__input login__input--user" />
        <!-- В реальных приложениях используется 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">Текущий баланс</p>
          <p class="balance__date">С <span class="date">03/12/2021</span></p>
        </div>
        <p class="balance__value">0000$</p>
      </div>

      <!-- Transactions -->
      <div class="transactions">
        <div class="transactions__row">
          <div class="transactions__type transactions__type--deposit">2 депозит</div>
          <div class="transactions__date">2 дня назад</div>
          <div class="transactions__value">5 000$</div>
        </div>
        <div class="transactions__row">
          <div class="transactions__type transactions__type--withdrawal">1 вывод средств</div>
          <div class="transactions__date">21/01/2022</div>
          <div class="transactions__value">-256S</div>
        </div>
      </div>

      <!-- Total -->
      <div class="total">
        <p class="total__label">Получение</p>
        <p class="total__value total__value--in">0000$</p>
        <p class="total__label">Вывод</p>
        <p class="total__value total__value--out">0000$</p>
        <p class="total__label">Процент</p>
        <p class="total__value total__value--interest">0000$</p>
        <button class="btn--sort">&downarrow; СОРТИРОВАТЬ</button>
      </div>

      <!-- Operation - Transfers -->
      <div class="operation operation--transfer">
        <h2>Перевести деньги</h2>
        <form class="form form--transfer">
          <input type="text" class="form__input form__input--to" />
          <input type="number" class="form__input form__input--amount" />
          <button class="form__btn form__btn--transfer">&rarr;</button>
          <label class="form__label">Получатель</label>
          <label class="form__label">Сумма</label>
        </form>
      </div>

      <!-- Operation - Loan -->
      <div class="operation operation--loan">
        <h2>Запросить займ</h2>
        <form class="form form--loan">
          <input type="number" class="form__input form__input--loan-amount" />
          <button class="form__btn form__btn--loan">&rarr;</button>
          <label class="form__label form__label--loan">Сумма</label>
        </form>
      </div>

      <!-- Operation - Close -->
      <div class="operation operation--close">
        <h2>Закрыть счёт</h2>
        <form class="form form--close">
          <input type="text" class="form__input form__input--user" />
          <input type="password" maxlength="6" class="form__input form__input--pin" />
          <button class="form__btn form__btn--close">&rarr;</button>
          <label class="form__label">Подтвердить имя</label>
          <label class="form__label">Подтвердить PIN</label>
        </form>
      </div>

      <!-- Logout timer -->
      <p class="logout-timer">Выход из приложения через <span class="timer">05:00</span></p>
    </main>

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