-
Notifications
You must be signed in to change notification settings - Fork 0
/
user.html
131 lines (107 loc) · 4.72 KB
/
user.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
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CashGuard</title>
<link rel="icon" href="https://cdn-icons-png.flaticon.com/128/6828/6828649.png">
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/@phosphor-icons/[email protected]/src/thin/style.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</head>
<body class="bg-secondary">
<!-- navbar -->
<div class="col-12 vh-10 fixed-top d-flex justify-content-between align-items-center px-3">
<h6>CashGuard</h6>
<button type="button" class="btn btn-primary" onclick="signout()">Signout</button>
</div>
<div class="col-4 vh-10"></div>
<!-- body -->
<div class="col-12 d-flex">
<!-- space left -->
<div class="col-2 vh-90 "></div>
<div class="col-2 vh-90 fixed-bottom" style="left: 16vw;">
<!-- profile -->
<div class="col-12 vh-45 p-2 ">
<div class="col-12 h-100 bg-light rounded shd text-center d-flex flex-column align-items-center px-4">
<i class="ph-thin ph-user-circle sfs-8 mt-3 col-12 "></i>
<h6 class="mb-4 sfs-0_9" id="uname">AbhiDrops</h6>
<h6 class="sfs-0_75" >Total Income : <span class="text-primary fw-bold" id="ti">₹0</span></h6>
<h6 class="sfs-0_75" >Total Expense : <span class="text-primary fw-bold" id="te">₹0</span></h6>
<h6 class="sfs-0_75" >Total Balance : <span class="text-primary fw-bold" id="tb">₹0</span></h6>
<button type="button" class="btn btn-primary col-12 py-1 sfs-0_9 mt-2" onclick="clearData()">Clear Data</button>
</div>
</div>
<!-- chart -->
<div class="col-12 vh-45 p-2 pb-3">
<div class="col-12 h-100 bg-light rounded shd p-3">
<h5 class="text-center">Expense Chart</h5>
<canvas id="myChart" style="width:90%;max-width:600px;height: 80%;"></canvas>
</div>
</div>
</div>
<div class="col-6 vh-90 d-flex flex-column" style="left: 16vw; position: relative;">
<!-- upper -->
<div class="col-12 d-flex">
<div class="col-6 vh-35 p-2">
<div class="col-12 h-100 bg-light rounded shd text-center d-flex flex-column align-items-center px-4">
<h6 class="fw-bold my-4 sfs-1_25">Income</h6>
<input id="unit" type="text" placeholder="Enter Income Type" class="my-form-control bg-dark text-white col-12 sfs-0_9 my-2">
<input id="unia" type="text" placeholder="Enter Income Amount" class="my-form-control bg-dark text-white col-12 sfs-0_9 mb-3">
<button type="button" class="btn btn-primary col-12 py-1 sfs-0_9 mt-2" onclick="addIncome()">Add Income</button>
</div>
</div>
<div class="col-6 vh-35 p-2">
<div class="col-12 h-100 bg-light rounded shd text-center d-flex flex-column align-items-center px-4">
<h6 class="fw-bold my-4 sfs-1_25">Expense</h6>
<input id="unet" type="text" placeholder="Enter Expense Type" class="my-form-control bg-dark text-white col-12 sfs-0_9 my-2">
<input id="unea" type="text" placeholder="Enter Expense Amount" class="my-form-control bg-dark text-white col-12 sfs-0_9 mb-3">
<button type="button" class="btn btn-primary col-12 py-1 sfs-0_9 mt-2" onclick="addExpense()">Add Expense</button>
</div>
</div>
</div>
<!-- bottom -->
<div class="col-12 min-vh-45 p-2">
<div class="col-12 h-100 bg-light rounded shd px-4">
<h5 class="fw-bold py-4">Income Details</h5>
<table class="table table-striped table-hover table-borderless">
<thead>
<tr>
<th scope="col">Type</th>
<th scope="col">Amount</th>
<th scope="col">Data & Time</th>
</tr>
</thead>
<tbody id="idet">
</tbody>
</table>
</div>
</div>
<div class="col-12 min-vh-45 p-2">
<div class="col-12 h-100 bg-light rounded shd px-4">
<h5 class="fw-bold py-4">Expense Details</h5>
<table class="table table-striped table-hover table-borderless ">
<thead>
<tr>
<th scope="col">Type</th>
<th scope="col">Amount</th>
<th scope="col">Data & Time</th>
</tr>
</thead>
<tbody id="edet">
</tbody>
</table>
</div>
</div>
</div>
<!-- space right -->
<div class="col-2 vh-90 "></div>
</div>
<script src="./user.js"></script>
</body>
</html>