Skip to content

Commit c11ec3f

Browse files
ankitdoi-coderankitdoi-coder
committed
Design admin panel
1 parent 2288e12 commit c11ec3f

2 files changed

Lines changed: 72 additions & 20 deletions

File tree

‎Deployment ScreenShot/Admin Panel.png‎

60.5 KB
Loading

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

Lines changed: 72 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,86 @@
11
<!DOCTYPE html>
22
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
3-
<style>
4-
.admin-title {
5-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
6-
font-size: 2.5rem;
7-
font-weight: 700;
8-
color: #2c3e50;
3+
<head>
4+
<title>Admin Panel - Online Bookstore</title>
5+
6+
<!-- Bootstrap CSS -->
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8+
9+
<!-- Optional Font (Google) -->
10+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
11+
12+
<style>
13+
body {
14+
font-family: 'Poppins', sans-serif;
15+
background-color: #f4f6f9;
16+
padding-top: 50px;
17+
}
18+
19+
.admin-container {
20+
max-width: 700px;
21+
margin: auto;
22+
background: white;
23+
border-radius: 16px;
24+
padding: 40px;
25+
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
926
text-align: center;
27+
}
28+
29+
.admin-title {
30+
font-size: 2.2rem;
31+
font-weight: 700;
32+
color: #fff;
1033
padding: 20px;
11-
margin-bottom: 30px;
1234
background: linear-gradient(135deg, #00b894, #0984e3);
13-
color: white;
1435
border-radius: 12px;
15-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
16-
letter-spacing: 1px;
36+
margin-bottom: 30px;
1737
text-transform: uppercase;
38+
letter-spacing: 1px;
39+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
1840
}
19-
</style>
20-
<head>
21-
<title>Online Bookstore</title>
22-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
41+
42+
.admin-actions a {
43+
display: block;
44+
margin: 15px auto;
45+
padding: 14px 20px;
46+
font-weight: 600;
47+
font-size: 1rem;
48+
border-radius: 10px;
49+
transition: all 0.3s ease;
50+
}
51+
52+
.admin-actions a:hover {
53+
transform: scale(1.03);
54+
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
55+
}
56+
57+
.emoji {
58+
margin-right: 8px;
59+
}
60+
</style>
2361
</head>
2462

2563
<body>
26-
<div sec:authorize="hasRole('ADMIN')">
27-
<h1 class="admin-title">Admin Panel</h1>
28-
<a href="/add" class="btn btn-outline-primary mb-3">➕ Add New Book</a>
29-
<a href="/delete" class="btn btn-outline-primary mb-3">🗑️ Delete A Book</a>
30-
<a href="/update" class="btn btn-outline-primary mb-3">🔄 Update A Book</a>
64+
<div class="container">
65+
<div sec:authorize="hasRole('ADMIN')" class="admin-container">
66+
<h1 class="admin-title">Admin Panel</h1>
67+
68+
<div class="admin-actions">
69+
<a href="/add" class="btn btn-outline-success w-100">
70+
<span class="emoji">➕</span> Add New Book
71+
</a>
72+
<a href="/delete" class="btn btn-outline-danger w-100">
73+
<span class="emoji">🗑️</span> Delete A Book
74+
</a>
75+
<a href="/update" class="btn btn-outline-primary w-100">
76+
<span class="emoji">🔄</span> Update A Book
77+
</a>
78+
</div>
79+
</div>
3180
</div>
81+
82+
<!-- Bootstrap JS (Optional) -->
83+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
3284
</body>
3385

34-
</html>
86+
</html>

0 commit comments

Comments
 (0)