source: src/main/resources/templates/dashboard.html@ 19fa1a3

Last change on this file since 19fa1a3 was 19fa1a3, checked in by Ordanche <ordanchenedev@…>, 4 weeks ago

Initial commit
  • Property mode set to 100644
File size: 7.0 KB
RevLine 
[19fa1a3]1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4 <title>Dashboard - Golden Bank</title>
5 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
6 <style>
7 body {
8 font-family: 'Arial', sans-serif;
9 background: #07aa70;
10 color: #ffffff;
11 margin: 0;
12 padding: 0;
13 height: 100vh;
14 display: flex;
15 justify-content: center;
16 align-items: center;
17 flex-direction: column;
18 }
19
20 .navbar-custom {
21 background-color: rgba(0, 0, 0, 0.7);
22 position: fixed;
23 top: 0;
24 width: 100%;
25 z-index: 1000;
26 }
27
28 .navbar-custom a {
29 color: #ffffff !important;
30 }
31
32 .navbar-custom .navbar-brand {
33 font-weight: bold;
34 }
35
36 .dashboard-container {
37 max-width: 1200px;
38 margin-top: 50px;
39 text-align: center;
40 }
41
42 h2, h3 {
43 margin-bottom: 20px;
44 }
45
46 .btn-primary {
47 background-color: #000000;
48 border: none;
49 transition: background-color 0.3s ease;
50 }
51
52 .btn-primary:hover {
53 background-color: #ffd700;
54 color: #000;
55 }
56
57 .btn-success {
58 background-color: #28a745;
59 border: none;
60 }
61
62 .btn-success:hover {
63 background-color: #218838;
64 }
65
66 .form-container {
67 background-color: rgba(255, 255, 255, 0.1);
68 padding: 15px;
69 border-radius: 8px;
70 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
71 }
72
73 .account-details {
74 background-color: rgba(255, 255, 255, 0.1);
75 padding: 20px;
76 border-radius: 8px;
77 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
78 margin-bottom: 20px;
79 }
80
81 .error {
82 color: #ff4c4c;
83 }
84
85 .footer {
86 background-color: rgba(0, 0, 0, 0.7);
87 color: white;
88 padding: 15px 0;
89 font-size: 14px;
90 position: fixed;
91 bottom: 0;
92 width: 100%;
93 text-align: center;
94 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
95 }
96
97 .footer a {
98 color: #ffd700;
99 text-decoration: none;
100 font-weight: bold;
101 }
102
103 .footer a:hover {
104 color: #ffecb3;
105 text-decoration: underline;
106 }
107
108 @keyframes shake {
109 0% { transform: translateX(0); }
110 25% { transform: translateX(-5px); }
111 50% { transform: translateX(5px); }
112 75% { transform: translateX(-5px); }
113 100% { transform: translateX(0); }
114 }
115 </style>
116</head>
117<body>
118<nav class="navbar navbar-expand-lg navbar-custom">
119 <a class="navbar-brand" href="#">Golden Bank</a>
120 <ul class="navbar-nav ml-auto">
121 <li class="nav-item"><a class="nav-link" href="/dashboard">Dashboard</a></li>
122 <li class="nav-item"><a class="nav-link" href="/transactions">Transactions</a></li>
123 <li class="nav-item"><a class="nav-link" href="/logout">Logout</a></li>
124 </ul>
125</nav>
126
127<div class="container dashboard-container">
128 <div class="text-center">
129 <h2 th:text="'Welcome, ' + ${account.username}"></h2>
130 <h3 th:text="'Current Balance: ' + ${account.balance} + ' MKD'"></h3>
131 </div>
132
133 <!-- Account Details Section -->
134 <div class="account-details">
135 <h4>Account Details</h4>
136 <p><strong>Account Number:</strong> <span th:text="${account.id}"></span></p> <!-- Use account.id for account number -->
137 <p><strong>Exchange rates:</strong> €1 = 60 MKD | $1 = 60 MKD | £1 = 70 MKD</p>
138 </div>
139
140 <div class="row justify-content-center">
141 <!-- Deposit Section -->
142 <div class="col-md-2">
143 <button class="btn btn-block btn-primary" type="button" data-toggle="collapse" data-target="#depositForm" aria-expanded="false" aria-controls="depositForm">
144 Deposit
145 </button>
146 <div class="collapse mt-3" id="depositForm">
147 <form method="post" action="/deposit" class="form-container">
148 <div class="form-group">
149 <label>Amount:</label>
150 <input type="number" class="form-control" name="amount" required />
151 </div>
152 <button type="submit" class="btn btn-block btn-success">Submit</button>
153 </form>
154 </div>
155 </div>
156
157 <!-- Withdraw Section -->
158 <div class="col-md-2">
159 <button class="btn btn-block btn-primary" type="button" data-toggle="collapse" data-target="#withdrawForm" aria-expanded="false" aria-controls="withdrawForm">
160 Withdraw
161 </button>
162 <div class="collapse mt-3" id="withdrawForm">
163 <form method="post" action="/withdraw" class="form-container">
164 <div class="form-group">
165 <label>Amount:</label>
166 <input type="number" class="form-control" name="amount" required />
167 </div>
168 <button type="submit" class="btn btn-block btn-success">Submit</button>
169 </form>
170 </div>
171 </div>
172
173 <!-- Transfer Section MKD -->
174 <div class="col-md-2">
175 <button class="btn btn-block btn-primary" type="button" data-toggle="collapse" data-target="#transferForm" aria-expanded="false" aria-controls="transferForm">
176 Transfer (MKD)
177 </button>
178 <div class="collapse mt-3" id="transferForm">
179 <form method="post" action="/transfer" class="form-container">
180 <div class="form-group">
181 <label>Recipient Username:</label>
182 <input type="text" class="form-control" name="toUsername" required />
183 </div>
184 <div class="form-group">
185 <label>Amount:</label>
186 <input type="number" class="form-control" name="amount" required />
187 </div>
188 <div class="form-group">
189 <label>Currency:</label>
190 <input type="text" class="form-control" name="currency" placeholder="(EUR)" required />
191 </div>
192 <button type="submit" class="btn btn-block btn-success">Submit</button>
193 </form>
194 </div>
195 </div>
196
197 </div>
198
199 <p th:if="${error != null}" th:text="${error}" class="error text-center mt-3"></p>
200</div>
201
202<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
203<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
204<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
205</body>
206</html>
Note: See TracBrowser for help on using the repository browser.