updateweb
This commit is contained in:
Local Server
359
website/admin/team-members.html
Normal file
359
website/admin/team-members.html
Normal file
@@ -0,0 +1,359 @@
|
||||
<!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.html" class="nav-item">
|
||||
<i class="bi bi-speedometer2"></i>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="/admin/products.html" class="nav-item">
|
||||
<i class="bi bi-box-seam"></i>
|
||||
<span>Products</span>
|
||||
</a>
|
||||
<a href="/admin/portfolio.html" class="nav-item">
|
||||
<i class="bi bi-images"></i>
|
||||
<span>Portfolio</span>
|
||||
</a>
|
||||
<a href="/admin/blog.html" class="nav-item">
|
||||
<i class="bi bi-file-text"></i>
|
||||
<span>Blog</span>
|
||||
</a>
|
||||
<a href="/admin/pages.html" class="nav-item">
|
||||
<i class="bi bi-file-earmark"></i>
|
||||
<span>Pages</span>
|
||||
</a>
|
||||
<a href="/admin/team-members.html" class="nav-item active">
|
||||
<i class="bi bi-people"></i>
|
||||
<span>Team Members</span>
|
||||
</a>
|
||||
<a href="/admin/media-library.html" class="nav-item">
|
||||
<i class="bi bi-image"></i>
|
||||
<span>Media Library</span>
|
||||
</a>
|
||||
<a href="/admin/menu.html" class="nav-item">
|
||||
<i class="bi bi-list"></i>
|
||||
<span>Menu</span>
|
||||
</a>
|
||||
<a href="/admin/users.html" class="nav-item">
|
||||
<i class="bi bi-person"></i>
|
||||
<span>Users</span>
|
||||
</a>
|
||||
<a href="/admin/settings.html" 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>
|
||||
Reference in New Issue
Block a user