2026-01-18 02:22:05 -06:00
|
|
|
<!doctype html>
|
2025-12-14 01:54:40 -06:00
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<title>Homepage Editor - Sky Art Shop</title>
|
2026-01-19 01:17:43 -06:00
|
|
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
2025-12-14 01:54:40 -06:00
|
|
|
<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"
|
|
|
|
|
/>
|
2026-01-18 02:22:05 -06:00
|
|
|
<link rel="stylesheet" href="/admin/css/admin-style.css" />
|
|
|
|
|
<link rel="stylesheet" href="/admin/css/media-library.css" />
|
|
|
|
|
<!-- Quill Rich Text Editor -->
|
2025-12-24 00:13:23 -06:00
|
|
|
<link
|
2026-01-18 02:22:05 -06:00
|
|
|
href="https://cdn.quilljs.com/1.3.7/quill.snow.css"
|
2025-12-24 00:13:23 -06:00
|
|
|
rel="stylesheet"
|
|
|
|
|
/>
|
2025-12-14 01:54:40 -06:00
|
|
|
<style>
|
|
|
|
|
.section-builder {
|
|
|
|
|
background: white;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
padding: 25px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
|
|
border: 2px solid #e9ecef;
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.section-builder:hover {
|
|
|
|
|
border-color: #667eea;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.section-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
padding-bottom: 15px;
|
|
|
|
|
border-bottom: 2px solid #e9ecef;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.section-header h5 {
|
|
|
|
|
margin: 0;
|
|
|
|
|
color: #2c3e50;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.section-controls {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
/* Slide Management */
|
|
|
|
|
.slides-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slide-card {
|
|
|
|
|
background: #f8f9fa;
|
|
|
|
|
border: 2px solid #e9ecef;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
position: relative;
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slide-card:hover {
|
|
|
|
|
border-color: #667eea;
|
|
|
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slide-card.active {
|
|
|
|
|
border-color: #28a745;
|
|
|
|
|
background: #f8fff9;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slide-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
border-bottom: 1px solid #e9ecef;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slide-number {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
color: #667eea;
|
|
|
|
|
font-size: 1.1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slide-actions {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slide-actions .btn {
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
font-size: 0.85rem;
|
|
|
|
|
}
|
|
|
|
|
|
2025-12-14 01:54:40 -06:00
|
|
|
.image-preview {
|
|
|
|
|
width: 100%;
|
2026-01-18 02:22:05 -06:00
|
|
|
height: 150px;
|
2025-12-14 01:54:40 -06:00
|
|
|
border: 2px dashed #ccc;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background: #f8f9fa;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-preview img {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
max-height: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-preview.empty {
|
|
|
|
|
color: #6c757d;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.add-slide-btn {
|
|
|
|
|
border: 2px dashed #667eea;
|
|
|
|
|
background: transparent;
|
|
|
|
|
color: #667eea;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border-radius: 12px;
|
2025-12-14 01:54:40 -06:00
|
|
|
display: flex;
|
2026-01-18 02:22:05 -06:00
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
2025-12-14 01:54:40 -06:00
|
|
|
gap: 10px;
|
2026-01-18 02:22:05 -06:00
|
|
|
cursor: pointer;
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.add-slide-btn:hover {
|
|
|
|
|
background: #667eea;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.save-button {
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 30px;
|
|
|
|
|
right: 30px;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drag-handle {
|
|
|
|
|
cursor: grab;
|
|
|
|
|
color: #adb5bd;
|
|
|
|
|
font-size: 1.2rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drag-handle:hover {
|
|
|
|
|
color: #667eea;
|
2025-12-14 01:54:40 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
/* Featured Products Section */
|
|
|
|
|
.count-selector {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.count-btn {
|
|
|
|
|
padding: 8px 16px;
|
2025-12-14 01:54:40 -06:00
|
|
|
border: 2px solid #e9ecef;
|
|
|
|
|
background: white;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: all 0.3s ease;
|
2026-01-18 02:22:05 -06:00
|
|
|
font-weight: 600;
|
2025-12-14 01:54:40 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.count-btn:hover {
|
2025-12-14 01:54:40 -06:00
|
|
|
border-color: #667eea;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.count-btn.active {
|
2025-12-14 01:54:40 -06:00
|
|
|
border-color: #667eea;
|
2026-01-18 02:22:05 -06:00
|
|
|
background: #667eea;
|
2025-12-14 01:54:40 -06:00
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
/* Info box */
|
|
|
|
|
.info-box {
|
|
|
|
|
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
|
|
|
|
|
border-left: 4px solid #2196f3;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
border-radius: 0 8px 8px 0;
|
|
|
|
|
margin-bottom: 20px;
|
2025-12-14 01:54:40 -06:00
|
|
|
}
|
2025-12-24 00:13:23 -06:00
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.info-box i {
|
|
|
|
|
color: #2196f3;
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
/* Quill Editor Styles */
|
|
|
|
|
.quill-container {
|
|
|
|
|
background: white;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quill-container .ql-toolbar {
|
2025-12-24 00:13:23 -06:00
|
|
|
border-top-left-radius: 8px;
|
|
|
|
|
border-top-right-radius: 8px;
|
|
|
|
|
background: #f8f9fa;
|
2026-01-18 02:22:05 -06:00
|
|
|
border-color: #ced4da;
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.quill-container .ql-container {
|
|
|
|
|
border-bottom-left-radius: 8px;
|
|
|
|
|
border-bottom-right-radius: 8px;
|
|
|
|
|
border-color: #ced4da;
|
|
|
|
|
min-height: 120px;
|
|
|
|
|
font-size: 14px;
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.quill-container .ql-editor {
|
|
|
|
|
min-height: 100px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quill-container .ql-editor.ql-blank::before {
|
|
|
|
|
font-style: normal;
|
|
|
|
|
color: #6c757d;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slide-card .quill-container .ql-container {
|
|
|
|
|
min-height: 80px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slide-card .quill-container .ql-editor {
|
|
|
|
|
min-height: 60px;
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
2025-12-14 01:54:40 -06:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="sidebar">
|
2026-01-18 02:22:05 -06:00
|
|
|
<div class="sidebar-brand">Sky Art Shop</div>
|
2025-12-14 01:54:40 -06:00
|
|
|
<ul class="sidebar-menu">
|
|
|
|
|
<li>
|
2026-01-01 22:24:30 -06:00
|
|
|
<a href="/admin/dashboard"
|
2025-12-14 01:54:40 -06:00
|
|
|
><i class="bi bi-speedometer2"></i> Dashboard</a
|
|
|
|
|
>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
2026-01-01 22:24:30 -06:00
|
|
|
<a href="/admin/homepage" class="active"
|
2025-12-14 01:54:40 -06:00
|
|
|
><i class="bi bi-house"></i> Homepage Editor</a
|
|
|
|
|
>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
2026-01-01 22:24:30 -06:00
|
|
|
<a href="/admin/products"><i class="bi bi-box"></i> Products</a>
|
2025-12-14 01:54:40 -06:00
|
|
|
</li>
|
|
|
|
|
<li>
|
2026-01-18 02:22:05 -06:00
|
|
|
<a href="/admin/portfolio"><i class="bi bi-easel"></i> Portfolio</a>
|
2025-12-14 01:54:40 -06:00
|
|
|
</li>
|
|
|
|
|
<li>
|
2026-01-01 22:24:30 -06:00
|
|
|
<a href="/admin/blog"><i class="bi bi-newspaper"></i> Blog</a>
|
2025-12-14 01:54:40 -06:00
|
|
|
</li>
|
|
|
|
|
<li>
|
2026-01-01 22:24:30 -06:00
|
|
|
<a href="/admin/pages"
|
2025-12-14 01:54:40 -06:00
|
|
|
><i class="bi bi-file-text"></i> Custom Pages</a
|
|
|
|
|
>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
2026-01-01 22:24:30 -06:00
|
|
|
<a href="/admin/media-library"
|
2025-12-14 01:54:40 -06:00
|
|
|
><i class="bi bi-images"></i> Media Library</a
|
|
|
|
|
>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
2026-01-01 22:24:30 -06:00
|
|
|
<a href="/admin/menu"><i class="bi bi-list"></i> Menu</a>
|
2025-12-14 01:54:40 -06:00
|
|
|
</li>
|
|
|
|
|
<li>
|
2026-01-01 22:24:30 -06:00
|
|
|
<a href="/admin/settings"><i class="bi bi-gear"></i> Settings</a>
|
2025-12-14 01:54:40 -06:00
|
|
|
</li>
|
|
|
|
|
<li>
|
2026-01-01 22:24:30 -06:00
|
|
|
<a href="/admin/users"><i class="bi bi-people"></i> Users</a>
|
2025-12-14 01:54:40 -06:00
|
|
|
</li>
|
2026-01-18 02:22:05 -06:00
|
|
|
<li>
|
|
|
|
|
<a href="/admin/customers"
|
|
|
|
|
><i class="bi bi-person-hearts"></i> Customers</a
|
|
|
|
|
>
|
|
|
|
|
</li>
|
2025-12-14 01:54:40 -06:00
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="main-content">
|
|
|
|
|
<div class="top-bar">
|
|
|
|
|
<div>
|
|
|
|
|
<h3>Homepage Editor</h3>
|
|
|
|
|
<p class="mb-0 text-muted">Customize your homepage sections</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
2026-01-18 02:22:05 -06:00
|
|
|
<a href="/home" target="_blank" class="btn btn-info me-2">
|
2025-12-14 01:54:40 -06:00
|
|
|
<i class="bi bi-eye"></i> Preview
|
|
|
|
|
</a>
|
|
|
|
|
<button class="btn-logout" onclick="logout()">
|
|
|
|
|
<i class="bi bi-box-arrow-right"></i> Logout
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="sectionsContainer">
|
2026-01-18 02:22:05 -06:00
|
|
|
<!-- Hero Slider Section -->
|
|
|
|
|
<div class="section-builder" id="heroSliderSection">
|
|
|
|
|
<div class="section-header">
|
|
|
|
|
<h5><i class="bi bi-collection-play"></i> Hero Slider</h5>
|
|
|
|
|
<div class="section-controls">
|
|
|
|
|
<span class="badge bg-primary" id="slideCount">0 slides</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="info-box">
|
|
|
|
|
<p class="mb-2">
|
|
|
|
|
<i class="bi bi-info-circle me-2"></i>
|
|
|
|
|
<strong>Hero Slider:</strong> Create multiple slides with
|
|
|
|
|
background images, titles, descriptions, and call-to-action
|
|
|
|
|
buttons. Slides will auto-rotate every 10 seconds on the frontend.
|
|
|
|
|
</p>
|
|
|
|
|
<p
|
|
|
|
|
class="mb-0"
|
|
|
|
|
style="
|
|
|
|
|
background: #fff3cd;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
border-left: 4px solid #ffc107;
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<i class="bi bi-image me-2" style="color: #856404"></i>
|
|
|
|
|
<strong style="color: #856404">Recommended Image Size:</strong>
|
|
|
|
|
<code
|
|
|
|
|
style="
|
|
|
|
|
background: #ffeeba;
|
|
|
|
|
padding: 2px 8px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
"
|
|
|
|
|
>1920 x 600 pixels</code
|
|
|
|
|
>
|
|
|
|
|
(width x height). Use landscape images for best results. The image
|
|
|
|
|
will cover the entire slider area as a background.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="section-content">
|
|
|
|
|
<div class="slides-container" id="slidesContainer">
|
|
|
|
|
<!-- Slides will be rendered here -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="add-slide-btn w-100 mt-3"
|
|
|
|
|
onclick="addNewSlide()"
|
|
|
|
|
>
|
|
|
|
|
<i class="bi bi-plus-circle"></i> Add New Slide
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Featured Products Section -->
|
|
|
|
|
<div class="section-builder" id="featuredProductsSection">
|
2025-12-14 01:54:40 -06:00
|
|
|
<div class="section-header">
|
2026-01-18 02:22:05 -06:00
|
|
|
<h5><i class="bi bi-star"></i> Featured Products</h5>
|
2025-12-14 01:54:40 -06:00
|
|
|
<div class="section-controls">
|
|
|
|
|
<div class="form-check form-switch">
|
|
|
|
|
<input
|
|
|
|
|
class="form-check-input"
|
|
|
|
|
type="checkbox"
|
2026-01-18 02:22:05 -06:00
|
|
|
id="featuredEnabled"
|
2025-12-14 01:54:40 -06:00
|
|
|
checked
|
|
|
|
|
/>
|
2026-01-18 02:22:05 -06:00
|
|
|
<label class="form-check-label" for="featuredEnabled"
|
|
|
|
|
>Show on Homepage</label
|
2025-12-14 01:54:40 -06:00
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
<div class="info-box">
|
|
|
|
|
<p class="mb-0">
|
|
|
|
|
<i class="bi bi-info-circle me-2"></i>
|
|
|
|
|
Products marked as "Featured" in the Products section will appear
|
|
|
|
|
here automatically.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
2025-12-14 01:54:40 -06:00
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
<div class="section-content">
|
2025-12-14 01:54:40 -06:00
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-6 mb-3">
|
2026-01-18 02:22:05 -06:00
|
|
|
<label class="form-label">Section Title</label>
|
2025-12-14 01:54:40 -06:00
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
2026-01-18 02:22:05 -06:00
|
|
|
id="featuredTitle"
|
|
|
|
|
value="Featured Products"
|
2025-12-14 01:54:40 -06:00
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-6 mb-3">
|
2026-01-18 02:22:05 -06:00
|
|
|
<label class="form-label">Number of Products to Display</label>
|
|
|
|
|
<div class="count-selector">
|
|
|
|
|
<button
|
|
|
|
|
class="count-btn"
|
|
|
|
|
data-count="4"
|
|
|
|
|
onclick="setFeaturedCount(4)"
|
|
|
|
|
>
|
|
|
|
|
4
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
class="count-btn active"
|
|
|
|
|
data-count="8"
|
|
|
|
|
onclick="setFeaturedCount(8)"
|
|
|
|
|
>
|
|
|
|
|
8
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
class="count-btn"
|
|
|
|
|
data-count="12"
|
|
|
|
|
onclick="setFeaturedCount(12)"
|
|
|
|
|
>
|
|
|
|
|
12
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2025-12-14 01:54:40 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
<!-- Get Inspired / Blog Section -->
|
|
|
|
|
<div class="section-builder" id="blogSection">
|
2025-12-14 01:54:40 -06:00
|
|
|
<div class="section-header">
|
2026-01-18 02:22:05 -06:00
|
|
|
<h5><i class="bi bi-lightbulb"></i> Get Inspired (Blog Posts)</h5>
|
2025-12-14 01:54:40 -06:00
|
|
|
<div class="section-controls">
|
|
|
|
|
<div class="form-check form-switch">
|
|
|
|
|
<input
|
|
|
|
|
class="form-check-input"
|
|
|
|
|
type="checkbox"
|
2026-01-18 02:22:05 -06:00
|
|
|
id="blogEnabled"
|
2025-12-14 01:54:40 -06:00
|
|
|
checked
|
|
|
|
|
/>
|
2026-01-18 02:22:05 -06:00
|
|
|
<label class="form-check-label" for="blogEnabled"
|
|
|
|
|
>Show on Homepage</label
|
2025-12-14 01:54:40 -06:00
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
<div class="info-box">
|
|
|
|
|
<p class="mb-0">
|
|
|
|
|
<i class="bi bi-info-circle me-2"></i>
|
|
|
|
|
Latest blog posts will be displayed automatically from the Blog
|
|
|
|
|
section.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
2025-12-14 01:54:40 -06:00
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
<div class="section-content">
|
2025-12-14 01:54:40 -06:00
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-6 mb-3">
|
2026-01-18 02:22:05 -06:00
|
|
|
<label class="form-label">Section Title</label>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="blogTitle"
|
|
|
|
|
value="Get Inspired"
|
|
|
|
|
/>
|
2025-12-14 01:54:40 -06:00
|
|
|
</div>
|
|
|
|
|
<div class="col-md-6 mb-3">
|
2026-01-18 02:22:05 -06:00
|
|
|
<label class="form-label">Number of Posts to Display</label>
|
|
|
|
|
<div class="count-selector">
|
2025-12-14 01:54:40 -06:00
|
|
|
<button
|
2026-01-18 02:22:05 -06:00
|
|
|
class="count-btn active"
|
|
|
|
|
data-count="3"
|
|
|
|
|
onclick="setBlogCount(3)"
|
2025-12-14 01:54:40 -06:00
|
|
|
>
|
2026-01-18 02:22:05 -06:00
|
|
|
3
|
2025-12-14 01:54:40 -06:00
|
|
|
</button>
|
|
|
|
|
<button
|
2026-01-18 02:22:05 -06:00
|
|
|
class="count-btn"
|
|
|
|
|
data-count="6"
|
|
|
|
|
onclick="setBlogCount(6)"
|
2025-12-14 01:54:40 -06:00
|
|
|
>
|
2026-01-18 02:22:05 -06:00
|
|
|
6
|
2025-12-14 01:54:40 -06:00
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
<!-- About Preview Section -->
|
|
|
|
|
<div class="section-builder" id="aboutSection">
|
2025-12-14 01:54:40 -06:00
|
|
|
<div class="section-header">
|
2026-01-18 02:22:05 -06:00
|
|
|
<h5><i class="bi bi-info-square"></i> About Preview</h5>
|
2025-12-14 01:54:40 -06:00
|
|
|
<div class="section-controls">
|
|
|
|
|
<div class="form-check form-switch">
|
|
|
|
|
<input
|
|
|
|
|
class="form-check-input"
|
|
|
|
|
type="checkbox"
|
2026-01-18 02:22:05 -06:00
|
|
|
id="aboutEnabled"
|
2025-12-14 01:54:40 -06:00
|
|
|
checked
|
|
|
|
|
/>
|
2026-01-18 02:22:05 -06:00
|
|
|
<label class="form-check-label" for="aboutEnabled"
|
|
|
|
|
>Show on Homepage</label
|
2025-12-14 01:54:40 -06:00
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="section-content">
|
|
|
|
|
<div class="mb-3">
|
2026-01-18 02:22:05 -06:00
|
|
|
<label class="form-label">About Title</label>
|
2025-12-14 01:54:40 -06:00
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
2026-01-18 02:22:05 -06:00
|
|
|
id="aboutTitle"
|
|
|
|
|
value="About Sky Art Shop"
|
2025-12-14 01:54:40 -06:00
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-3">
|
2026-01-18 02:22:05 -06:00
|
|
|
<label class="form-label">About Description</label>
|
|
|
|
|
<div class="quill-container">
|
|
|
|
|
<div id="aboutDescriptionEditor"></div>
|
|
|
|
|
</div>
|
2025-12-14 01:54:40 -06:00
|
|
|
</div>
|
|
|
|
|
<div class="mb-3">
|
2026-01-18 02:22:05 -06:00
|
|
|
<label class="form-label">About Image</label>
|
|
|
|
|
<input type="hidden" id="aboutImageUrl" />
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-outline-primary w-100"
|
|
|
|
|
onclick="openMediaLibrary('about')"
|
|
|
|
|
>
|
|
|
|
|
<i class="bi bi-folder2-open"></i> Choose from Media Library
|
|
|
|
|
</button>
|
|
|
|
|
<div class="image-preview empty" id="aboutPreview">
|
|
|
|
|
<i class="bi bi-image" style="font-size: 2rem"></i>
|
|
|
|
|
</div>
|
2025-12-14 01:54:40 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
class="btn btn-lg btn-primary save-button"
|
|
|
|
|
onclick="saveHomepage()"
|
|
|
|
|
>
|
|
|
|
|
<i class="bi bi-save"></i> Save All Changes
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
2026-01-18 02:22:05 -06:00
|
|
|
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
|
2025-12-14 01:54:40 -06:00
|
|
|
<script src="/admin/js/auth.js"></script>
|
2026-01-18 02:22:05 -06:00
|
|
|
<script src="/admin/js/admin-utils.js"></script>
|
|
|
|
|
<script src="/admin/js/media-library.js"></script>
|
2025-12-14 01:54:40 -06:00
|
|
|
<script src="/admin/js/homepage.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
