PTS/SkyArtShop
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
Files
0ac69e98c260adfd249c77511372669d7603cc8c
SkyArtShop/website/admin/pages.html

688 lines
21 KiB
HTML
Raw Normal View History

updateweb
2025-12-14 01:54:40 -06:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Pages - Sky Art Shop</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"
/>
updateweb
2025-12-24 00:13:23 -06:00
<!-- Quill Editor CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css"
/>
updateweb
2025-12-14 01:54:40 -06:00
<link rel="stylesheet" href="/admin/css/admin-style.css" />
updateweb
2025-12-24 00:13:23 -06:00
<style>
/* Quill Editor Styling */
.ql-container {
font-size: 16px;
position: relative;
}
.ql-editor {
overflow-y: auto;
overflow-x: hidden;
}
/* Quill Editor Scrollbar */
.ql-editor::-webkit-scrollbar {
width: 12px;
}
.ql-editor::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 6px;
}
.ql-editor::-webkit-scrollbar-thumb {
background: #888;
border-radius: 6px;
}
.ql-editor::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Modal Enhancements */
#pageModal .modal-dialog {
max-width: 90vw;
margin: 1.75rem auto;
}
#pageModal .modal-content {
max-height: 90vh;
display: flex;
flex-direction: column;
}
#pageModal .modal-header {
user-select: none;
flex-shrink: 0;
}
#pageModal .modal-body {
overflow-y: auto;
overflow-x: hidden;
flex: 1 1 auto;
max-height: calc(90vh - 140px);
}
#pageModal .modal-footer {
flex-shrink: 0;
}
/* Scrollbar Styling */
#pageModal .modal-body::-webkit-scrollbar {
width: 10px;
}
#pageModal .modal-body::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 5px;
}
#pageModal .modal-body::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
#pageModal .modal-body::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Contact Fields - removed duplicate overflow styles */
/* Resize Handle */
.modal-resize-handle {
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
cursor: se-resize;
background: linear-gradient(135deg, transparent 50%, #6c757d 50%);
opacity: 0.5;
z-index: 1;
}
.modal-resize-handle:hover {
opacity: 0.8;
}
/* Fullscreen Toggle Button */
.btn-fullscreen {
position: absolute;
right: 50px;
top: 12px;
padding: 0.25rem 0.5rem;
font-size: 1.2rem;
background: transparent;
border: none;
color: #6c757d;
cursor: pointer;
}
.btn-fullscreen:hover {
color: #000;
}
/* Fullscreen Mode */
.modal-fullscreen .modal-dialog {
max-width: 100vw;
margin: 0;
height: 100vh;
}
.modal-fullscreen .modal-content {
max-height: 100vh;
height: 100vh;
border-radius: 0;
}
.modal-fullscreen .modal-body {
max-height: calc(100vh - 140px);
}
/* Editor resize styling */
.editor-resizable {
position: relative;
border: 1px solid #dee2e6;
border-radius: 4px;
overflow: visible;
}
.editor-resize-handle {
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
cursor: nwse-resize;
background: linear-gradient(135deg, transparent 50%, #667eea 50%);
z-index: 1000;
transition: background 0.2s;
}
.editor-resize-handle:hover {
background: linear-gradient(135deg, transparent 50%, #5568d3 50%);
}
.editor-resize-handle:active {
background: linear-gradient(135deg, transparent 50%, #4451b8 50%);
}
/* Expanded state removed - not needed */
/* Team Member Card in Admin */
.team-member-card {
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
background: white;
transition: all 0.3s ease;
}
.team-member-card:hover {
border-color: #667eea;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}
.team-member-preview {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #667eea;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
}
.team-member-preview img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.team-member-preview i {
font-size: 2rem;
color: #667eea;
}
.team-member-handle {
cursor: move;
color: #cbd5e0;
padding: 5px;
}
.team-member-handle:hover {
color: #667eea;
}
</style>
updateweb
2025-12-14 01:54:40 -06:00
</head>
<body>
<div class="sidebar">
<div class="sidebar-brand">🛍️ Sky Art Shop</div>
<ul class="sidebar-menu">
<li>
updateweb
2026-01-01 22:24:30 -06:00
<a href="/admin/dashboard"
updateweb
2025-12-14 01:54:40 -06:00
><i class="bi bi-speedometer2"></i> Dashboard</a
>
</li>
<li>
updateweb
2026-01-01 22:24:30 -06:00
<a href="/admin/homepage"
updateweb
2025-12-14 01:54:40 -06:00
><i class="bi bi-house"></i> Homepage Editor</a
>
</li>
<li>
updateweb
2026-01-01 22:24:30 -06:00
<a href="/admin/products"><i class="bi bi-box"></i> Products</a>
updateweb
2025-12-14 01:54:40 -06:00
</li>
<li>
updateweb
2026-01-01 22:24:30 -06:00
<a href="/admin/portfolio"
updateweb
2025-12-14 01:54:40 -06:00
><i class="bi bi-easel"></i> Portfolio</a
>
</li>
<li>
updateweb
2026-01-01 22:24:30 -06:00
<a href="/admin/blog"><i class="bi bi-newspaper"></i> Blog</a>
updateweb
2025-12-14 01:54:40 -06:00
</li>
<li>
updateweb
2026-01-01 22:24:30 -06:00
<a href="/admin/pages" class="active"
updateweb
2025-12-14 01:54:40 -06:00
><i class="bi bi-file-text"></i> Custom Pages</a
>
</li>
<li>
updateweb
2026-01-01 22:24:30 -06:00
<a href="/admin/media-library"
updateweb
2025-12-14 01:54:40 -06:00
><i class="bi bi-images"></i> Media Library</a
>
</li>
<li>
updateweb
2026-01-01 22:24:30 -06:00
<a href="/admin/menu"><i class="bi bi-list"></i> Menu</a>
updateweb
2025-12-14 01:54:40 -06:00
</li>
<li>
updateweb
2026-01-01 22:24:30 -06:00
<a href="/admin/settings"><i class="bi bi-gear"></i> Settings</a>
updateweb
2025-12-14 01:54:40 -06:00
</li>
<li>
updateweb
2026-01-01 22:24:30 -06:00
<a href="/admin/users"><i class="bi bi-people"></i> Users</a>
updateweb
2025-12-14 01:54:40 -06:00
</li>
</ul>
</div>
<div class="main-content">
<div class="top-bar">
<div>
<h3>Custom Pages Management</h3>
<p class="mb-0 text-muted">Create and manage custom pages</p>
</div>
<div>
<button class="btn-logout" onclick="logout()">
<i class="bi bi-box-arrow-right"></i> Logout
</button>
</div>
</div>
<div class="actions-bar">
<button class="btn btn-primary" onclick="showCreatePage()">
<i class="bi bi-plus-circle"></i> Create New Page
</button>
<div class="search-box">
<i class="bi bi-search"></i>
<input
type="text"
placeholder="Search pages..."
id="searchInput"
oninput="filterPages()"
/>
</div>
</div>
<div class="card">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Page Title</th>
<th>Slug</th>
<th>Status</th>
<th>Created</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="pagesTableBody">
<tr>
<td colspan="6" class="text-center">
<div class="loading-spinner"></div>
Loading pages...
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal fade" id="pageModal" tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Create Custom Page</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
></button>
</div>
<div class="modal-body">
<form id="pageForm">
<input type="hidden" id="pageId" />
<div class="mb-3">
<label for="pageTitle" class="form-label">Page Title *</label>
<input
type="text"
class="form-control"
id="pageTitle"
required
/>
</div>
<div class="mb-3">
<label for="pageSlug" class="form-label">Slug *</label>
<input
type="text"
class="form-control"
id="pageSlug"
required
/>
<small class="text-muted"
>URL path (e.g., about-us, contact)</small
>
</div>
<div class="mb-3">
<label for="pageContent" class="form-label"
>Page Content *</label
>
updateweb
2025-12-24 00:13:23 -06:00
<!-- Structured Contact Fields (shown only for contact page) -->
<div
id="contactStructuredFields"
style="display: none"
class="editor-resizable"
>
<div
id="contactFieldsContent"
style="
height: 500px;
overflow-y: auto;
overflow-x: hidden;
padding: 15px;
"
>
<div class="alert alert-info">
<i class="bi bi-info-circle"></i>
<strong>Contact Page:</strong> Edit each section
independently. The layout will remain organized.
</div>
<!-- Header Section -->
<div class="card mb-3">
<div class="card-header bg-primary text-white">
<i class="bi bi-card-heading"></i> Header Section
</div>
<div class="card-body">
<div class="mb-2">
<label class="form-label">Title</label>
<input
type="text"
class="form-control"
id="contactHeaderTitle"
placeholder="Our Contact Information"
/>
</div>
<div class="mb-2">
<label class="form-label">Subtitle</label>
<input
type="text"
class="form-control"
id="contactHeaderSubtitle"
placeholder="Reach out to us through any of these channels"
/>
</div>
</div>
</div>
<!-- Contact Information -->
<div class="card mb-3">
<div class="card-header bg-success text-white">
<i class="bi bi-telephone"></i> Contact Information
</div>
<div class="card-body">
<div class="mb-2">
<label class="form-label">Phone Number</label>
<input
type="text"
class="form-control"
id="contactPhone"
placeholder="+1 (555) 123-4567"
/>
</div>
<div class="mb-2">
<label class="form-label">Email Address</label>
<input
type="email"
class="form-control"
id="contactEmail"
placeholder="contact@skyartshop.com"
/>
</div>
<div class="mb-2">
<label class="form-label">Physical Address</label>
<input
type="text"
class="form-control"
id="contactAddress"
placeholder="123 Art Street, Creative City, CC 12345"
/>
</div>
</div>
</div>
<!-- Business Hours -->
<div class="card mb-3">
<div class="card-header bg-warning text-dark">
<i class="bi bi-clock"></i> Business Hours
</div>
<div class="card-body">
<div id="businessHoursList">
<!-- Dynamic business hours will be added here -->
</div>
<button
type="button"
class="btn btn-sm btn-outline-primary"
onclick="addBusinessHour()"
>
<i class="bi bi-plus-circle"></i> Add Time Slot
</button>
</div>
</div>
</div>
<div
class="editor-resize-handle"
data-target="contactFieldsContent"
></div>
</div>
<!-- About Page with Team Members Section -->
<div id="aboutWithTeamFields" style="display: none">
<div class="alert alert-info mb-3">
<i class="bi bi-info-circle"></i>
<strong>About Page:</strong> Edit the main content and
manage your team members below.
</div>
<!-- About Content Editor -->
<div class="card mb-3">
<div class="card-header bg-primary text-white">
<i class="bi bi-file-text"></i> About Content
</div>
<div class="card-body p-0 position-relative">
<div class="editor-resizable">
<div
id="aboutContentEditor"
style="background: white; height: 300px"
></div>
<div
class="editor-resize-handle"
data-target="aboutContentEditor"
></div>
</div>
</div>
</div>
<!-- Team Members Section -->
<div class="card mb-3">
<div
class="card-header bg-success text-white d-flex justify-content-between align-items-center"
>
<span><i class="bi bi-people"></i> Team Members</span>
<button
type="button"
class="btn btn-sm btn-light"
onclick="addTeamMember()"
>
<i class="bi bi-plus-lg"></i> Add Member
</button>
</div>
<div class="card-body">
<div id="teamMembersList" class="row g-3">
<div class="col-12 text-center text-muted py-3">
<i class="bi bi-people" style="font-size: 3rem"></i>
<p class="mt-2">
No team members yet. Click "Add Member" to get
started.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Regular Quill Editor (for other pages) -->
<div id="regularContentEditor" class="editor-resizable">
<div
id="pageContentEditor"
style="background: white; height: 400px"
></div>
<div
class="editor-resize-handle"
data-target="pageContentEditor"
></div>
</div>
updateweb
2025-12-14 01:54:40 -06:00
<textarea
updateweb
2025-12-24 00:13:23 -06:00
class="form-control d-none"
updateweb
2025-12-14 01:54:40 -06:00
id="pageContent"
rows="15"
required
></textarea>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="pageMetaTitle" class="form-label"
>Meta Title (SEO)</label
>
<input type="text" class="form-control" id="pageMetaTitle" />
</div>
<div class="col-md-6 mb-3">
<label for="pageMetaDescription" class="form-label"
>Meta Description (SEO)</label
>
<input
type="text"
class="form-control"
id="pageMetaDescription"
/>
</div>
</div>
<div class="mb-3">
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
id="pagePublished"
checked
/>
<label class="form-check-label" for="pagePublished">
Published (visible on website)
</label>
</div>
</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="savePage()">
<i class="bi bi-save"></i> Save Page
</button>
</div>
updateweb
2025-12-24 00:13:23 -06:00
<div class="modal-resize-handle" title="Drag to resize"></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" id="notificationModalContent">
<div class="modal-header" id="notificationModalHeader">
<h5 class="modal-title" id="notificationModalTitle">
<i class="bi" id="notificationModalIcon"></i>
<span id="notificationModalTitleText"></span>
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body" id="notificationModalBody">
<!-- Message will be inserted here -->
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-primary"
data-bs-dismiss="modal"
>
OK
</button>
</div>
</div>
</div>
</div>
<!-- Confirmation Modal -->
<div class="modal fade" id="confirmModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content border-warning" style="border-width: 3px">
<div class="modal-header bg-warning text-dark">
<h5 class="modal-title">
<i class="bi bi-exclamation-triangle-fill me-2"></i>
Confirm Action
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body" id="confirmModalBody">
<!-- Confirmation message will be inserted here -->
</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="confirmModalButton"
>
<i class="bi bi-trash"></i> Delete
</button>
</div>
updateweb
2025-12-14 01:54:40 -06:00
</div>
</div>
</div>
updateweb
2025-12-24 00:13:23 -06:00
<!-- Quill Editor JS -->
<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
updateweb
2025-12-14 01:54:40 -06:00
<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/pages.js"></script>
</body>
</html>
Reference in New Issue Copy Permalink