Skip to content

Commit de9bf23

Browse files
tsviztsviz
committed
style: enhance index.html with responsive design and improved UI elements
1 parent 239443f commit de9bf23

File tree

1 file changed

+211
-33
lines changed

1 file changed

+211
-33
lines changed

‎src/main/resources/templates/index.html

Lines changed: 211 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,185 @@
22
<html xmlns:th="http://www.thymeleaf.org">
33
<head>
44
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
57
<link rel="stylesheet" type="text/css" href="css/styles.css">
8+
<style>
9+
body {
10+
font-family: 'Inter', 'Segoe UI', 'Fira Code', Arial, sans-serif;
11+
background: linear-gradient(120deg, #e0eafc 0%, #cfdef3 100%);
12+
margin: 0;
13+
padding: 0;
14+
}
15+
.modern-container {
16+
max-width: 900px;
17+
margin: 40px auto;
18+
background: rgba(255,255,255,0.95);
19+
border-radius: 24px;
20+
box-shadow: 0 8px 32px rgba(44,62,80,0.12);
21+
padding: 40px 32px;
22+
position: relative;
23+
}
24+
h1 {
25+
font-size: 2.5rem;
26+
color: #22223b;
27+
margin-bottom: 28px;
28+
letter-spacing: 1px;
29+
font-weight: 700;
30+
}
31+
.modern-button {
32+
display: inline-flex;
33+
align-items: center;
34+
gap: 8px;
35+
background: linear-gradient(90deg, #43cea2 0%, #185a9d 100%);
36+
color: #fff;
37+
border: none;
38+
border-radius: 12px;
39+
padding: 12px 26px;
40+
margin: 8px 6px;
41+
font-size: 1.08rem;
42+
font-weight: 500;
43+
cursor: pointer;
44+
text-decoration: none;
45+
transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
46+
box-shadow: 0 2px 12px rgba(67,206,162,0.10);
47+
}
48+
.modern-button:hover {
49+
background: linear-gradient(90deg, #185a9d 0%, #43cea2 100%);
50+
box-shadow: 0 6px 24px rgba(67,206,162,0.18);
51+
transform: translateY(-2px) scale(1.04);
52+
}
53+
.main-table {
54+
overflow-x: auto;
55+
margin-top: 28px;
56+
}
57+
table {
58+
width: 100%;
59+
border-collapse: separate;
60+
border-spacing: 0;
61+
background: #f7fafc;
62+
border-radius: 16px;
63+
box-shadow: 0 2px 12px rgba(44,62,80,0.06);
64+
overflow: hidden;
65+
}
66+
th, td {
67+
padding: 16px 18px;
68+
text-align: left;
69+
}
70+
th {
71+
background: linear-gradient(90deg, #43cea2 0%, #185a9d 100%);
72+
color: #fff;
73+
font-weight: 700;
74+
border: none;
75+
}
76+
tr {
77+
transition: background 0.2s;
78+
}
79+
tr:nth-child(even) {
80+
background: #e9f5ff;
81+
}
82+
tr:hover {
83+
background: #d1e7f7;
84+
}
85+
.actions .button {
86+
margin-right: 8px;
87+
padding: 8px 18px;
88+
border-radius: 8px;
89+
font-size: 1rem;
90+
border: none;
91+
color: #fff;
92+
background: #43cea2;
93+
text-decoration: none;
94+
transition: background 0.2s, transform 0.1s;
95+
}
96+
.actions .button:hover {
97+
background: #185a9d;
98+
transform: scale(1.05);
99+
}
100+
.actions .button[style*="color: red"] {
101+
background: #e53e3e;
102+
color: #fff !important;
103+
font-weight: bold;
104+
}
105+
.actions .button[style*="color: #ff7f7f"] {
106+
background: #f6ad55;
107+
color: #fff !important;
108+
font-weight: bold;
109+
}
110+
#searchFeature {
111+
margin: 32px 0;
112+
display: flex;
113+
justify-content: center;
114+
}
115+
#searchForm {
116+
display: flex;
117+
gap: 14px;
118+
align-items: center;
119+
background: #fff;
120+
border-radius: 32px;
121+
box-shadow: 0 2px 8px rgba(44,62,80,0.08);
122+
padding: 10px 24px;
123+
}
124+
#searchForm label {
125+
font-weight: 600;
126+
color: #185a9d;
127+
}
128+
#searchForm input[type="text"] {
129+
flex: 1;
130+
padding: 10px 16px;
131+
border-radius: 24px;
132+
border: 1px solid #43cea2;
133+
font-size: 1rem;
134+
background: #f7fafc;
135+
transition: border 0.2s;
136+
}
137+
#searchForm input[type="text"]:focus {
138+
border: 1.5px solid #185a9d;
139+
outline: none;
140+
}
141+
.fab {
142+
position: fixed;
143+
right: 32px;
144+
bottom: 32px;
145+
background: linear-gradient(90deg, #43cea2 0%, #185a9d 100%);
146+
color: #fff;
147+
border-radius: 50%;
148+
width: 64px;
149+
height: 64px;
150+
display: flex;
151+
align-items: center;
152+
justify-content: center;
153+
font-size: 2rem;
154+
box-shadow: 0 4px 24px rgba(44,62,80,0.18);
155+
cursor: pointer;
156+
z-index: 100;
157+
transition: background 0.2s, transform 0.1s;
158+
}
159+
.fab:hover {
160+
background: linear-gradient(90deg, #185a9d 0%, #43cea2 100%);
161+
transform: scale(1.08);
162+
}
163+
@media (max-width: 600px) {
164+
.modern-container {
165+
padding: 12px 4px;
166+
}
167+
table, th, td {
168+
font-size: 0.92rem;
169+
}
170+
#searchForm {
171+
flex-direction: column;
172+
gap: 8px;
173+
padding: 10px 8px;
174+
}
175+
.fab {
176+
right: 12px;
177+
bottom: 12px;
178+
width: 48px;
179+
height: 48px;
180+
font-size: 1.4rem;
181+
}
182+
}
183+
</style>
6184
<script th:inline="javascript">
7185
/*<![CDATA[*/
8186
window.enableSearchFeature = /*[[${enableSearchFeature}]]*/ 'default';
@@ -17,66 +195,66 @@
17195
</script>
18196
<script src="js/styles.js"></script>
19197
</head>
20-
<body>
21-
<div align="center" th:if="${listSale}">
22-
<h1>Inventory Records</h1>
23-
<a href="/new" class="modern-button">Enter New Product</a>
24-
<a href="/export" class="modern-button">Export to CSV</a>
198+
</body>
199+
<div class="modern-container" th:if="${listSale}">
200+
<h1><i class="fas fa-boxes"></i> Inventory Records</h1>
201+
<div style="margin-bottom: 22px; display: flex; gap: 12px; flex-wrap: wrap;">
202+
<a href="/new" class="modern-button"><i class="fas fa-plus"></i> Enter New Product</a>
203+
<a href="/export" class="modern-button"><i class="fas fa-file-export"></i> Export to CSV</a>
204+
<label for="csvFile" class="modern-button"><i class="fas fa-file-import"></i> Import from CSV</label>
205+
</div>
25206
<form id="uploadForm" style="display: none;">
26207
<input type="file" id="csvFile" name="file" accept=".csv">
27-
<button type="submit" id="submitBtn">Submit</button>
208+
<button type="submit" id="submitBtn" class="modern-button"><i class="fas fa-upload"></i> Submit</button>
28209
</form>
29-
<label for="csvFile" class="modern-button">Import from CSV</label>
30-
<div id="errorMessage" style="color: red;"></div>
210+
<div id="errorMessage" style="color: #e53e3e; font-weight: 500;"></div>
31211
<script src="js/upload_csv.js"></script>
32212
<script src="js/search.js"></script>
33-
<br><br>
34213
<div id="searchFeature">
35214
<form id="searchForm" action="/search" method="get">
36215
<label for="search">Search for item:</label>
37216
<input type="text" id="search" name="q" />
38-
<button type="submit">Search</button>
217+
<button type="submit" class="modern-button"><i class="fas fa-search"></i> Search</button>
39218
</form>
40219
</div>
41220
<div id="searchResults"></div>
42-
<br />
43-
<div>
44-
<a th:if="${currentPage > 0}" th:href="@{/?(page=${currentPage - 1})}">Previous</a>
45-
<span th:text="${currentPage + 1}"></span> / <span th:text="${totalPages}"></span>
46-
<a th:if="${currentPage < totalPages - 1}" th:href="@{/?(page=${currentPage + 1})}">Next</a>
221+
<div style="margin: 22px 0; display: flex; justify-content: center; align-items: center; gap: 22px;">
222+
<a th:if="${currentPage > 0}" th:href="@{/?(page=${currentPage - 1})}" class="modern-button" style="background: #43cea2;"><i class="fas fa-arrow-left"></i> Previous</a>
223+
<span style="font-weight: 600; color: #185a9d;" th:text="${currentPage + 1}"></span> / <span style="font-weight: 600; color: #185a9d;" th:text="${totalPages}"></span>
224+
<a th:if="${currentPage < totalPages - 1}" th:href="@{/?(page=${currentPage + 1})}" class="modern-button" style="background: #43cea2;">Next <i class="fas fa-arrow-right"></i></a>
47225
</div>
48-
<br />
49-
<form th:action="@{/logout}" method="post">
50-
<!-- <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" /> -->
51-
<input type="submit" value="Logout" />
226+
<form th:action="@{/logout}" method="post" style="margin-bottom: 22px;">
227+
<input type="submit" value="Logout" class="modern-button" style="background: #e53e3e;" />
52228
</form>
53-
<br />
54229
<div class="main-table">
55-
<table style="width: 35%" border="1" cellpadding="10" class="main-table">
230+
<table>
56231
<thead>
57232
<tr>
58-
<th>Serial Number</th>
59-
<th>Item Name</th>
60-
<th>Quantity</th>
61-
<th>Amount</th>
62-
<th>Actions</th>
233+
<th><i class="fas fa-hashtag"></i> Serial Number</th>
234+
<th><i class="fas fa-tag"></i> Item Name</th>
235+
<th><i class="fas fa-cubes"></i> Quantity</th>
236+
<th><i class="fas fa-dollar-sign"></i> Amount</th>
237+
<th><i class="fas fa-tools"></i> Actions</th>
63238
</tr>
64239
</thead>
65240
<tbody>
66241
<tr th:each="sale : ${listSale}">
67-
<td th:text="${sale.serialNumber}">serial Number</td>
68-
<td th:text="${sale.item}">Item Name</td>
69-
<td th:text="${sale.quantity}">Quantity</td>
70-
<td th:text="${sale.amount}">Amount</td>
242+
<td th:text="${sale.serialNumber}"></td>
243+
<td th:text="${sale.item}"></td>
244+
<td th:text="${sale.quantity}"></td>
245+
<td th:text="${sale.amount}"></td>
71246
<td class="actions">
72-
<a class="button" th:href="@{'/edit/' + ${sale.serialNumber}}">Edit</a>
73-
<a class="button" th:href="@{'/delete/' + ${sale.serialNumber}}" onclick="return confirm('Delete: This action is irreversible. Are you sure you want to delete the sale record?')" style="color: red;">Delete</a>
74-
<a class="button" th:href="@{'/clear/' + ${sale.serialNumber}}" onclick="return confirm('Clear: This action is irreversible. Are you sure you want to clear the sale record?')" style="color: #ff7f7f;">Clear</a>
247+
<a class="button" th:href="@{'/edit/' + ${sale.serialNumber}}"><i class="fas fa-edit"></i> Edit</a>
248+
<a class="button" th:href="@{'/delete/' + ${sale.serialNumber}}" onclick="return confirm('Delete: This action is irreversible. Are you sure you want to delete the sale record?')" style="color: red;"><i class="fas fa-trash"></i> Delete</a>
249+
<a class="button" th:href="@{'/clear/' + ${sale.serialNumber}}" onclick="return confirm('Clear: This action is irreversible. Are you sure you want to clear the sale record?')" style="color: #ff7f7f;"><i class="fas fa-eraser"></i> Clear</a>
75250
</td>
76251
</tr>
77252
</tbody>
78253
</table>
79254
</div>
255+
<div class="fab" title="Add New Product" onclick="window.location.href='/new'">
256+
<i class="fas fa-plus"></i>
257+
</div>
80258
</div>
81259
</body>
82260
</html>

0 commit comments

Comments
 (0)