forked from UKSOURCE/cms.hailearning.edu.vn
456 lines
17 KiB
Plaintext
456 lines
17 KiB
Plaintext
<div class="container mt-4 mb-4">
|
|
<h1 class="page-title mb-4">Dashboard</h1>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="card mb-4">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0" style="color: var(--primary-color)">Quick Management</h5>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="row g-0">
|
|
<!-- Home -->
|
|
<div class="col-md-4 border-end">
|
|
<div class="p-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-home fa-lg" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-0">Home</h5>
|
|
<p class="text-muted mb-0 small">Manage homepage</p>
|
|
</div>
|
|
</div>
|
|
<a href="/admin/home" class="btn btn-sm btn-primary w-100 mt-2">
|
|
<i class="fas fa-edit me-2"></i>Edit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header & Menu -->
|
|
<div class="col-md-4 border-end">
|
|
<div class="p-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-bars fa-lg" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-0">Header & Menu</h5>
|
|
<p class="text-muted mb-0 small">Manage header & menu</p>
|
|
</div>
|
|
</div>
|
|
<a href="/admin/header" class="btn btn-sm btn-primary w-100 mt-2">
|
|
<i class="fas fa-edit me-2"></i>Edit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="col-md-4">
|
|
<div class="p-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-window-minimize fa-lg" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-0">Footer</h5>
|
|
<p class="text-muted mb-0 small">Manage footer</p>
|
|
</div>
|
|
</div>
|
|
<a href="/admin/footer" class="btn btn-sm btn-primary w-100 mt-2">
|
|
<i class="fas fa-edit me-2"></i>Edit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- About Us -->
|
|
<div class="col-md-4 border-end border-top">
|
|
<div class="p-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-users fa-lg" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-0">About Us</h5>
|
|
<p class="text-muted mb-0 small">Manage about us</p>
|
|
</div>
|
|
</div>
|
|
<a href="/admin/about-us" class="btn btn-sm btn-primary w-100 mt-2">
|
|
<i class="fas fa-edit me-2"></i>Edit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact -->
|
|
<div class="col-md-4 border-end border-top">
|
|
<div class="p-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-envelope fa-lg" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-0">Contact</h5>
|
|
<p class="text-muted mb-0 small">Manage contact</p>
|
|
</div>
|
|
</div>
|
|
<a href="/admin/contact" class="btn btn-sm btn-primary w-100 mt-2">
|
|
<i class="fas fa-edit me-2"></i>Edit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Appointment -->
|
|
<div class="col-md-4 border-end border-top">
|
|
<div class="p-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-calendar-check fa-lg" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-0">Appointment</h5>
|
|
<p class="text-muted mb-0 small">Manage appointment page</p>
|
|
</div>
|
|
</div>
|
|
<a href="/admin/appointment" class="btn btn-sm btn-primary w-100 mt-2">
|
|
<i class="fas fa-edit me-2"></i>Edit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pricing -->
|
|
<div class="col-md-4 border-end border-top">
|
|
<div class="p-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-tags fa-lg" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-0">Pricing</h5>
|
|
<p class="text-muted mb-0 small">Manage pricing page</p>
|
|
</div>
|
|
</div>
|
|
<a href="/admin/pricing" class="btn btn-sm btn-primary w-100 mt-2">
|
|
<i class="fas fa-edit me-2"></i>Edit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Services -->
|
|
<div class="col-md-4 border-end border-top">
|
|
<div class="p-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-concierge-bell fa-lg" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-0">Services</h5>
|
|
<p class="text-muted mb-0 small">Manage services</p>
|
|
</div>
|
|
</div>
|
|
<a href="/admin/service" class="btn btn-sm btn-primary w-100 mt-2">
|
|
<i class="fas fa-edit me-2"></i>Edit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Blog -->
|
|
<div class="col-md-4 border-top">
|
|
<div class="p-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-blog fa-lg" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-0">Blog</h5>
|
|
<p class="text-muted mb-0 small">Manage blog posts</p>
|
|
</div>
|
|
</div>
|
|
<a href="/admin/blog" class="btn btn-sm btn-primary w-100 mt-2">
|
|
<i class="fas fa-edit me-2"></i>Edit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Visa -->
|
|
<div class="col-md-4 border-end border-top">
|
|
<div class="p-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-passport fa-lg" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-0">Visa</h5>
|
|
<p class="text-muted mb-0 small">Manage visa countries</p>
|
|
</div>
|
|
</div>
|
|
<a href="/admin/visa" class="btn btn-sm btn-primary w-100 mt-2">
|
|
<i class="fas fa-edit me-2"></i>Edit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API Links Section -->
|
|
<div class="card mb-4">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">API Endpoints</h5>
|
|
<span class="badge bg-primary">6 APIs</span>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>API Name</th>
|
|
<th>Endpoint</th>
|
|
<th>Method</th>
|
|
<th>Description</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-2"
|
|
style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-bars" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<span>Menu Header API</span>
|
|
</div>
|
|
</td>
|
|
<td><code>/api/header</code></td>
|
|
<td>
|
|
<span class="badge" style="background-color: var(--primary-color)">GET</span>
|
|
</td>
|
|
<td>API to get menu header data</td>
|
|
<td>
|
|
<a href="/api/header" class="btn btn-sm btn-outline-primary" target="_blank">
|
|
<i class="fas fa-external-link-alt me-1"></i>View
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-2"
|
|
style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-home" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<span>Home API</span>
|
|
</div>
|
|
</td>
|
|
<td><code>/api/home</code></td>
|
|
<td>
|
|
<span class="badge" style="background-color: var(--primary-color)">GET</span>
|
|
</td>
|
|
<td>API to get homepage data</td>
|
|
<td>
|
|
<a href="/api/home" class="btn btn-sm btn-outline-primary" target="_blank">
|
|
<i class="fas fa-external-link-alt me-1"></i>View
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-2"
|
|
style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-info-circle" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<span>About API</span>
|
|
</div>
|
|
</td>
|
|
<td><code>/api/about</code></td>
|
|
<td>
|
|
<span class="badge" style="background-color: var(--primary-color)">GET</span>
|
|
</td>
|
|
<td>API to get about page data</td>
|
|
<td>
|
|
<a href="/api/about" class="btn btn-sm btn-outline-primary" target="_blank">
|
|
<i class="fas fa-external-link-alt me-1"></i>View
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-2"
|
|
style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-users" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<span>About Us API</span>
|
|
</div>
|
|
</td>
|
|
<td><code>/api/about-us</code></td>
|
|
<td>
|
|
<span class="badge" style="background-color: var(--primary-color)">GET</span>
|
|
</td>
|
|
<td>API to get about us data</td>
|
|
<td>
|
|
<a href="/api/about-us" class="btn btn-sm btn-outline-primary" target="_blank">
|
|
<i class="fas fa-external-link-alt me-1"></i>View
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-2"
|
|
style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-envelope" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<span>Contact API</span>
|
|
</div>
|
|
</td>
|
|
<td><code>/api/contact</code></td>
|
|
<td>
|
|
<span class="badge" style="background-color: var(--primary-color)">GET</span>
|
|
</td>
|
|
<td>API to get contact data</td>
|
|
<td>
|
|
<a href="/api/contact" class="btn btn-sm btn-outline-primary" target="_blank">
|
|
<i class="fas fa-external-link-alt me-1"></i>View
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-2"
|
|
style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-blog" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<span>Blog API</span>
|
|
</div>
|
|
</td>
|
|
<td><code>/api/blog</code></td>
|
|
<td>
|
|
<span class="badge" style="background-color: var(--primary-color)">GET</span>
|
|
</td>
|
|
<td>API to get blog posts</td>
|
|
<td>
|
|
<a href="/api/blog" class="btn btn-sm btn-outline-primary" target="_blank">
|
|
<i class="fas fa-external-link-alt me-1"></i>View
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Info -->
|
|
<div class="card">
|
|
<div class="card-header" style="
|
|
background: #0a2347;
|
|
color: white;
|
|
">
|
|
<h5 class="mb-0">System Information</h5>
|
|
</div>
|
|
<div class="card-body" style="background-color: #f8faf8">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
style="width: 40px; height: 40px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-info-circle" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-muted small">Version</div>
|
|
<div class="fw-bold" style="color: var(--primary-color)">
|
|
CMS.HAILearning v1.0.0
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
style="width: 40px; height: 40px; background-color: rgba(184, 183, 106, 0.1);">
|
|
<i class="fas fa-user" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-muted small">Logged in as</div>
|
|
<div class="fw-bold" style="color: var(--primary-color);">
|
|
<%= user.username %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert mt-3 mb-0"
|
|
style="background-color: rgba(184, 183, 106, 0.05); border-left: 4px solid var(--primary-color);" role="alert">
|
|
<div class="d-flex">
|
|
<div class="me-3">
|
|
<i class="fas fa-lightbulb fa-lg" style="color: var(--primary-color)"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-1" style="color: var(--primary-color)">Quick Tip</h6>
|
|
<p class="mb-0 text-muted">
|
|
Click the Edit button to make changes to your data.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.page-title {
|
|
color: var(--primary-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: var(--primary-dark);
|
|
border-color: var(--primary-dark);
|
|
color: white;
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.btn-outline-primary:hover {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.card-header h5 {
|
|
color: white;
|
|
}
|
|
|
|
.badge {
|
|
background-color: var(--primary-color) !important;
|
|
color: white;
|
|
}
|
|
</style> |