-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathdashboard.html
More file actions
177 lines (177 loc) · 8.32 KB
/
dashboard.html
File metadata and controls
177 lines (177 loc) · 8.32 KB
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/src/css/dashboardstyle.css" />
<title>Creddit User Dashboard page</title>
</head>
<body style="background-color: #293225">
<div class="navStyle">
<nav>
<div class="logo">
<img src="./src/img/logo.png" width="50px"/>
</div>
<ul>
<li><a href="/settings.html">Settings</a></li>
<li><a href="/dashboard.html">Dashboard</a></li>
<li id="logout"><a href="#">Log Out</a></li>
</ul>
</nav>
</div>
<div class="container">
<div class="QuickActions">
<div class="QuickPoT">
<div class="header">
<a>
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 512 512">
<path
fill="#74992e"
d="M47.5 104H432V51.52a16 16 0 0 0-19.14-15.69l-368 60.48a16 16
0 0 0-12 10.47A39.69 39.69 0 0 1 47.5 104Zm416 24h-416a16 16
0 0 0-16 16v288a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V144a16 16 0
0 0-16-16ZM368 320a32 32 0 1 1 32-32a32 32 0 0 1-32 32Z"/>
<path
fill="#74992e"
d="M31.33 259.5V116c0-12.33 5.72-18.48 15.42-20c35.2-5.53 108.58-8.5 108.58-8.5s-8.33 16-27.33 16V128c18.5 0 31.33 23.5 31.33 23.5L84.83 236Z"/></svg>
<span id="demo" style="color: #74992e; padding-left: 10px;">Quick Actions</span>
</span>
</a>
</div>
</div>
<div class="tabs" id="myTabs">
<button onclick="showPanel(0)">
<span class="button_top btn active">Make a Payment</span>
</button>
<button onclick="showPanel(1)">
<span class="button_top btn">Make a Transfer</span>
</button>
<button onclick="showPanel(2)">
<span class="button_top btn">Make a Withdrawal</span>
</button>
<button onclick="showPanel(3)">
<span class="button_top btn">Make a Deposit</span>
</button>
</div>
<div class="listOfAccounts">
<div class="form tabPanel">
<form id="makePayment">
<div class="inputFormat">
<label for="Account" class="QAlabels"><span style="color: red">*</span>From</label>
<select id="PaymentFromAccount" name="PaymentFromAccount">
<option value="" disabled selected hidden>Select Account...</option></select><br/>
<label for="Payee" class="QAlabels"><span style="color: red">*</span>To</label>
<input type="text" id="Email" name="Email" placeholder="example@email.com"/><br/>
<label for="Amount" class="QAlabels"><span style="color: red">*</span>Amount</label>
<input type="text" id="Amount1" name="Amount1" placeholder="$Amount"/>
</div>
<button>
<input class="Payment button_top" type="submit" value="Make Payment" style="font-size: 15px; font-weight: bold"/>
</button>
</form>
</div>
<div class="form tabPanel">
<form id="makeTransfer">
<div class="inputFormat">
<label for="Account" class="QAlabels"><span style="color: red">*</span>From</label>
<select id="TransferFromAccount" name="TransferFromAccount">
<option value="" disabled selected hidden>Select Account...</option></select><br/>
<label for="Account" class="QAlabels"><span style="color: red">*</span>To</label>
<select id="TransferToAccount" name="TransferToAccount">
<option value="" disabled selected hidden>Select Account...</option></select><br/>
<label for="Amount" class="QAlabels"><span style="color: red">*</span>Amount</label>
<input type="text" id="Amount2" name="Amount2" placeholder="$ Transfer Amount"/>
</div>
<button>
<input class="Payment button_top" type="submit" value="Confirm Transfer" style="font-size: 15px; font-weight: bold"/>
</button>
</form>
</div>
<div class="tabPanel">
<form id="makeWithdraw">
<div class="inputFormat">
<label for="WithdrawFromAccount" class="QAlabels"><span style="color: red">*</span>From</label>
<select id="WithdrawFromAccount" name="WithdrawFromAccount">
<option value="" disabled selected hidden>Select Account...</option></select><br/>
<label for="Amount" class="QAlabels">
<span style="color: red">*</span>Amount</label>
<input type="text" id="Amount3" name="Amount3" placeholder="$ Withdraw Amount"/>
</div>
<button>
<input class="Payment button_top" type="submit" value="Confirm Withdraw" style="font-size: 15px; font-weight: bold"/>
</button>
<br/><br/><br/>
</form>
</div>
<div class="tabPanel">
<form id="makeDeposit">
<div class="inputFormat">
<label for="Account" class="QAlabels"><span style="color: red">*</span>To</label>
<select id="DepositToAccount" name="DepositToAccount">
<option value="" disabled selected hidden>Select Account...</option></select><br/>
<label for="Amount" style="padding-right: 20px"><span style="color: red">*</span>Amount</label>
<input type="text" id="Amount4" name="Amount4" placeholder="$ Deposit Amount"/>
</div>
<button>
<input class="Payment button_top" type="submit" value="Confirm Deposit" style="font-size: 15px; font-weight: bold"/>
</button>
<br/><br/>
</form>
</div>
</div>
</div>
<div class="summary">
<div class="header">
<a>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24">
<path
fill="#74992e"
d="M14 9.9V8.2q.825-.35 1.688-.525Q16.55 7.5 17.5 7.5q.65 0 1.275.1q.625.1 1.225.25v1.6q-.6-.225-1.212-.337Q18.175 9 17.5 9q-.95
0-1.825.238Q14.8 9.475 14 9.9Zm0 5.5v-1.7q.825-.35 1.688-.525Q16.55 13 17.5 13q.65
0 1.275.1q.625.1 1.225.25v1.6q-.6-.225-1.212-.337q-.613-.113-1.288-.113q-.95 0-1.825.225T14 15.4Zm0-2.75v-1.7q.825-.35 1.688-.525q.862-.175
1.812-.175q.65 0 1.275.1q.625.1 1.225.25v1.6q-.6-.225-1.212-.337q-.613-.113-1.288-.113q-.95 0-1.825.238q-.875.237-1.675.662ZM6.5 16q1.175 0
2.288.262q1.112.263 2.212.788V7.2q-1.025-.6-2.175-.9Q7.675 6 6.5 6q-.9 0-1.787.175Q3.825 6.35 3 6.7v9.9q.875-.3 1.738-.45Q5.6 16 6.5 16Zm6.5 1.05q1.1-.525 2.213-.788Q16.325
16 17.5 16q.9 0 1.763.15q.862.15 1.737.45V6.7q-.825-.35-1.712-.525Q18.4 6 17.5 6q-1.175 0-2.325.3q-1.15.3-2.175.9ZM12 20q-1.2-.95-2.6-1.475Q8 18 6.5 18q-1.05
0-2.062.275q-1.013.275-1.938.775q-.525.275-1.012-.025Q1 18.725 1 18.15V6.1q0-.275.138-.525q.137-.25.412-.375q1.15-.6 2.4-.9Q5.2 4 6.5 4q1.45 0 2.838.375Q10.725 4.75 12 5.5q1.275-.75
2.663-1.125Q16.05 4 17.5 4q1.3 0 2.55.3q1.25.3 2.4.9q.275.125.413.375q.137.25.137.525v12.05q0 .575-.487.875q-.488.3-1.013.025q-.925-.5-1.938-.775Q18.55 18 17.5 18q-1.5 0-2.9.525T12 20Zm-5-8.35Z"/>
</svg>
<span style="color: #74992e">My Account Summary</span></span>
</a>
</div>
<div class="desc">
<div class="item2">Account</div>
<div class="item3">Totals</div>
</div>
<div class="header">
<span class="summaryHeading">Debit Accounts</span>
<div class="addRem">
<button id="removeDebit" class="remCard">-</button>
<button id="addDebit" class="addCard">+</button>
</div>
</div>
<div class="listOfAccounts" id="debitAccounts">
<div class="accountSum"></div>
</div>
<div class="creditDisc">
<div>Outgoing Balance</div>
</div>
<div class="header">
<span class="summaryHeading">Credit Accounts</span>
<div class="addRem">
<button id="removeCredit" class="remCard">-</button>
<button id="addCredit" class="addCard">+</button>
</div>
</div>
<div class="listOfAccounts" id="creditAccounts"></div>
<div class="divider"></div>
</div>
</div>
<script src="/src/js/myScript.js"></script>
<script type="module" src="src/js/main.js"></script>
</body>
</html>