360 lines
11 KiB
HTML
360 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Team Members - Admin</title>
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
|
/>
|
|
<link rel="stylesheet" href="/admin/css/admin.css" />
|
|
<style>
|
|
/* Team Member Card Preview */
|
|
.team-preview-card {
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
background: white;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.team-preview-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
|
|
}
|
|
|
|
.team-preview-image {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 4px solid #667eea;
|
|
margin: 0 auto 15px;
|
|
background: #f8f9fa;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.team-preview-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.team-preview-image i {
|
|
font-size: 3rem;
|
|
color: #667eea;
|
|
}
|
|
|
|
.team-preview-name {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.team-preview-position {
|
|
font-size: 1rem;
|
|
color: #667eea;
|
|
font-weight: 500;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.team-preview-bio {
|
|
font-size: 0.875rem;
|
|
color: #718096;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Reorder handle */
|
|
.reorder-handle {
|
|
cursor: move;
|
|
color: #667eea;
|
|
font-size: 1.2rem;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* Custom Notification Modal */
|
|
#notificationModal .modal-header.success {
|
|
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
|
|
color: white;
|
|
}
|
|
|
|
#notificationModal .modal-header.error {
|
|
background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
|
|
color: white;
|
|
}
|
|
|
|
#confirmationModal .modal-header {
|
|
background: linear-gradient(135deg, #ecc94b 0%, #d69e2e 100%);
|
|
color: white;
|
|
}
|
|
|
|
.modal-header .btn-close {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="admin-container">
|
|
<!-- Sidebar -->
|
|
<aside class="admin-sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<h4>Sky Art Shop</h4>
|
|
<button class="sidebar-toggle" id="sidebarToggle">
|
|
<i class="bi bi-x-lg"></i>
|
|
</button>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<a href="/admin/dashboard" class="nav-item">
|
|
<i class="bi bi-speedometer2"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
<a href="/admin/products" class="nav-item">
|
|
<i class="bi bi-box-seam"></i>
|
|
<span>Products</span>
|
|
</a>
|
|
<a href="/admin/portfolio" class="nav-item">
|
|
<i class="bi bi-images"></i>
|
|
<span>Portfolio</span>
|
|
</a>
|
|
<a href="/admin/blog" class="nav-item">
|
|
<i class="bi bi-file-text"></i>
|
|
<span>Blog</span>
|
|
</a>
|
|
<a href="/admin/pages" class="nav-item">
|
|
<i class="bi bi-file-earmark"></i>
|
|
<span>Pages</span>
|
|
</a>
|
|
<a href="/admin/team-members" class="nav-item active">
|
|
<i class="bi bi-people"></i>
|
|
<span>Team Members</span>
|
|
</a>
|
|
<a href="/admin/media-library" class="nav-item">
|
|
<i class="bi bi-image"></i>
|
|
<span>Media Library</span>
|
|
</a>
|
|
<a href="/admin/menu" class="nav-item">
|
|
<i class="bi bi-list"></i>
|
|
<span>Menu</span>
|
|
</a>
|
|
<a href="/admin/users" class="nav-item">
|
|
<i class="bi bi-person"></i>
|
|
<span>Users</span>
|
|
</a>
|
|
<a href="/admin/settings" class="nav-item">
|
|
<i class="bi bi-gear"></i>
|
|
<span>Settings</span>
|
|
</a>
|
|
</nav>
|
|
<div class="sidebar-footer">
|
|
<button class="btn btn-danger w-100" id="logoutBtn">
|
|
<i class="bi bi-box-arrow-right"></i> Logout
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="admin-main">
|
|
<div class="admin-header">
|
|
<button class="mobile-toggle" id="mobileToggle">
|
|
<i class="bi bi-list"></i>
|
|
</button>
|
|
<h1>Team Members</h1>
|
|
<button class="btn btn-primary" onclick="showAddModal()">
|
|
<i class="bi bi-plus-lg"></i> Add Team Member
|
|
</button>
|
|
</div>
|
|
|
|
<div class="admin-content">
|
|
<div class="row" id="teamMembersContainer">
|
|
<div class="col-12 text-center py-5">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Team Member Modal -->
|
|
<div
|
|
class="modal fade"
|
|
id="teamMemberModal"
|
|
tabindex="-1"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="modalTitle">Add Team Member</h5>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="teamMemberForm">
|
|
<input type="hidden" id="memberId" />
|
|
|
|
<div class="mb-3">
|
|
<label for="memberName" class="form-label">Name *</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="memberName"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="memberPosition" class="form-label"
|
|
>Position/Title *</label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="memberPosition"
|
|
placeholder="e.g., Founder & Lead Artist"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="memberBio" class="form-label">Bio</label>
|
|
<textarea
|
|
class="form-control"
|
|
id="memberBio"
|
|
rows="4"
|
|
placeholder="Brief introduction about the team member..."
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="memberImage" class="form-label">Image URL</label>
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="memberImage"
|
|
placeholder="Enter image URL or select from media library"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="btn btn-outline-secondary"
|
|
onclick="openMediaLibrary()"
|
|
>
|
|
<i class="bi bi-image"></i> Browse
|
|
</button>
|
|
</div>
|
|
<div class="mt-2" id="imagePreview"></div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="displayOrder" class="form-label"
|
|
>Display Order</label
|
|
>
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
id="displayOrder"
|
|
value="0"
|
|
min="0"
|
|
/>
|
|
<small class="text-muted">Lower numbers appear first</small>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
onclick="saveTeamMember()"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification Modal -->
|
|
<div class="modal fade" id="notificationModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="notificationTitle">Notification</h5>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body" id="notificationMessage"></div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
OK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Modal -->
|
|
<div class="modal fade" id="confirmationModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Confirm Action</h5>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body" id="confirmationMessage"></div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button type="button" class="btn btn-danger" id="confirmButton">
|
|
Confirm
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/admin/js/auth.js"></script>
|
|
<script src="/admin/js/sidebar.js"></script>
|
|
<script src="/admin/js/team-members.js"></script>
|
|
</body>
|
|
</html>
|