This repository has been archived by the owner on Jan 27, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.html
128 lines (123 loc) · 6.14 KB
/
home.html
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
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nikel - Codaí</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body id="app">
<header>
<nav class="navbar navbar-expand navbar-light bg-white">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="./assets/images/nikel-small-logo.png" class="img-fluid" alt="nikel logo image" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<div class="d-flex menu">
<a href="home.html"><button class="btn" type="button"><i class="bi bi-house-door-fill fs-4 color-secondary"></i></button></a>
<a href="transactions.html"><button class="btn" type="button"><i class="bi bi-currency-exchange fs-4"></i></button></a>
<div class="dropdown">
<button class="btn" type="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-person-circle fs-4"></i></button>
<ul class="dropdown-menu logout" aria-labelledby="dropdownMenuButton1">
<li><button id="logout-button" class="dropdown-item">Sair</button></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
<main>
<div class="container-lg">
<div class="row">
<div class="col-8 d-flex mt-4 justify-content-start align-items-center">
<div>
<i class="bi bi-cash-coin color-primary icon-detail"></i>
<span class="fs-2 bg-white" id="total">R$ 0,00</span>
</div>
</div>
<div class="col-4 d-flex mt-4 justify-content-end">
<div class="text-center">
<img src="./assets/images/coins-small.png" class="img-fluid" alt="coins image" />
</div>
</div>
</div>
<div class="row">
<div class="col-12 info shadow-lg">
<div class="container">
<div class="row">
<div class="col-6"><span class="fs-4 align-middle">Entradas </span> <i class="bi bi-arrow-down-circle fs-2 align-middle"></i></div>
<div class="col-6"><span class="fs-4 align-middle">Saídas </span> <i class="bi bi-arrow-up-circle fs-2 align-middle"></i></div>
<div class="col-12 my-2"><hr/></div>
</div>
<div class="row">
<div class="col-6">
<div class="container p-0" id="cash-in-list">
</div>
</div>
<div class="col-6">
<div class="container p-0" id="cash-out-list">
</div>
</div>
<div class="col-12 mb-4">
<button type="button" class="btn button-default" id="transactions-button">Ver todas</button>
</div>
</div>
</div>
</div>
</div>
<button class="btn button-float" data-bs-toggle="modal" data-bs-target="#transaction-modal"><i class="bi bi-plus"></i></button>
</div>
<!-- Modal -->
<div class="modal fade" id="transaction-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Adicionar lançamento</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="transaction-form">
<div class="modal-body">
<div class="mb-3">
<label for="value-input" class="form-label">Valor</label>
<input type="number" step="any" class="form-control" id="value-input">
</div>
<div class="mb-3">
<label for="description-input" class="form-label">Descrição</label>
<input type="text" class="form-control" id="description-input">
</div>
<div class="mb-3">
<label for="date-input" class="form-label">Data</label>
<input type="date" class="form-control" id="date-input">
</div>
<div class="mb-3">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="type-input" id="type-input1" value="1" checked>
<label class="form-check-label" for="type-input1">Entrada</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="type-input" id="type-input2" value="2">
<label class="form-check-label" for="type-input2">Saída</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary button-cancel" data-bs-dismiss="modal">Cancelar</button>
<button type="submit" class="btn button-default">Adicionar</button>
</div>
</form>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="./js/home.js"></script>
</body>
</html>