636 lines
19 KiB
HTML
636 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Settings - 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"
|
|
/>
|
|
<link rel="stylesheet" href="/admin/css/admin-style.css" />
|
|
<style>
|
|
.settings-section {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.settings-section h4 {
|
|
color: #2c3e50;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 2px solid #e9ecef;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.logo-preview {
|
|
width: 200px;
|
|
height: 80px;
|
|
border: 2px dashed #ccc;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 10px;
|
|
overflow: hidden;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.logo-preview img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.favicon-preview {
|
|
width: 64px;
|
|
height: 64px;
|
|
border: 2px dashed #ccc;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 10px;
|
|
overflow: hidden;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.favicon-preview img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.theme-selector {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.theme-option {
|
|
padding: 20px;
|
|
border: 3px solid #e9ecef;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.theme-option:hover {
|
|
border-color: #667eea;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.theme-option.active {
|
|
border-color: #667eea;
|
|
background: linear-gradient(135deg, #667eea11 0%, #764ba222 100%);
|
|
}
|
|
|
|
.theme-option i {
|
|
font-size: 2rem;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.color-picker-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.color-preview {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 8px;
|
|
border: 2px solid #e9ecef;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Toast Notification Container -->
|
|
<div class="toast-container" id="toastContainer"></div>
|
|
|
|
<div class="sidebar">
|
|
<div class="sidebar-brand">🛍️ Sky Art Shop</div>
|
|
<ul class="sidebar-menu">
|
|
<li>
|
|
<a href="/admin/dashboard"
|
|
><i class="bi bi-speedometer2"></i> Dashboard</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="/admin/homepage"
|
|
><i class="bi bi-house"></i> Homepage Editor</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="/admin/products"><i class="bi bi-box"></i> Products</a>
|
|
</li>
|
|
<li>
|
|
<a href="/admin/portfolio"
|
|
><i class="bi bi-easel"></i> Portfolio</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="/admin/blog"><i class="bi bi-newspaper"></i> Blog</a>
|
|
</li>
|
|
<li>
|
|
<a href="/admin/pages"
|
|
><i class="bi bi-file-text"></i> Custom Pages</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="/admin/media-library"
|
|
><i class="bi bi-images"></i> Media Library</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="/admin/menu"><i class="bi bi-list"></i> Menu</a>
|
|
</li>
|
|
<li>
|
|
<a href="/admin/settings" class="active"
|
|
><i class="bi bi-gear"></i> Settings</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="/admin/users"><i class="bi bi-people"></i> Users</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<div class="top-bar">
|
|
<div>
|
|
<h3>Settings</h3>
|
|
<p class="mb-0 text-muted">Configure your website</p>
|
|
</div>
|
|
<div>
|
|
<button class="btn-logout" onclick="logout()">
|
|
<i class="bi bi-box-arrow-right"></i> Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- General Settings -->
|
|
<div class="settings-section">
|
|
<h4><i class="bi bi-gear-fill"></i> General Settings</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="siteName" class="form-label">Website Name *</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="siteName"
|
|
placeholder="Sky Art Shop"
|
|
/>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="siteTagline" class="form-label">Tagline</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="siteTagline"
|
|
placeholder="Your Creative Destination"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="siteEmail" class="form-label">Contact Email</label>
|
|
<input
|
|
type="email"
|
|
class="form-control"
|
|
id="siteEmail"
|
|
placeholder="info@skyartshop.com"
|
|
/>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="sitePhone" class="form-label">Phone Number</label>
|
|
<input
|
|
type="tel"
|
|
class="form-control"
|
|
id="sitePhone"
|
|
placeholder="+1 234 567 8900"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="siteLogo" class="form-label">Logo</label>
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="siteLogo"
|
|
placeholder="Select logo from media library"
|
|
readonly
|
|
/>
|
|
<button
|
|
class="btn btn-outline-secondary"
|
|
type="button"
|
|
onclick="openMediaLibrary('siteLogo')"
|
|
>
|
|
<i class="bi bi-images"></i> Choose from Library
|
|
</button>
|
|
</div>
|
|
<div class="logo-preview" id="logoPreview">
|
|
<span class="text-muted">No logo selected</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="siteFavicon" class="form-label">Favicon</label>
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="siteFavicon"
|
|
placeholder="Select favicon from media library"
|
|
readonly
|
|
/>
|
|
<button
|
|
class="btn btn-outline-secondary"
|
|
type="button"
|
|
onclick="openMediaLibrary('siteFavicon')"
|
|
>
|
|
<i class="bi bi-images"></i> Choose from Library
|
|
</button>
|
|
</div>
|
|
<div class="favicon-preview" id="faviconPreview">
|
|
<i class="bi bi-image text-muted"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="timezone" class="form-label">Timezone</label>
|
|
<select class="form-control" id="timezone">
|
|
<option value="UTC">UTC</option>
|
|
<option value="America/New_York">Eastern Time (US & Canada)</option>
|
|
<option value="America/Chicago">Central Time (US & Canada)</option>
|
|
<option value="America/Denver">Mountain Time (US & Canada)</option>
|
|
<option value="America/Los_Angeles">
|
|
Pacific Time (US & Canada)
|
|
</option>
|
|
<option value="Europe/London">London</option>
|
|
<option value="Europe/Paris">Paris</option>
|
|
<option value="Asia/Tokyo">Tokyo</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Homepage Settings -->
|
|
<div class="settings-section">
|
|
<h4><i class="bi bi-house-fill"></i> Homepage Settings</h4>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Homepage Layout</label>
|
|
<div class="theme-selector">
|
|
<div class="theme-option active" onclick="selectLayout('modern')">
|
|
<i class="bi bi-grid-3x3-gap"></i>
|
|
<div><strong>Modern</strong></div>
|
|
<small>Grid-based layout</small>
|
|
</div>
|
|
<div class="theme-option" onclick="selectLayout('classic')">
|
|
<i class="bi bi-list-ul"></i>
|
|
<div><strong>Classic</strong></div>
|
|
<small>Traditional list</small>
|
|
</div>
|
|
<div class="theme-option" onclick="selectLayout('minimal')">
|
|
<i class="bi bi-square"></i>
|
|
<div><strong>Minimal</strong></div>
|
|
<small>Clean & simple</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Featured Content</label>
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="showHero"
|
|
checked
|
|
/>
|
|
<label class="form-check-label" for="showHero"
|
|
>Show Hero Section</label
|
|
>
|
|
</div>
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="showPromotions"
|
|
checked
|
|
/>
|
|
<label class="form-check-label" for="showPromotions"
|
|
>Show Promotions</label
|
|
>
|
|
</div>
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="showPortfolio"
|
|
checked
|
|
/>
|
|
<label class="form-check-label" for="showPortfolio"
|
|
>Show Portfolio Showcase</label
|
|
>
|
|
</div>
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="showBlog"
|
|
checked
|
|
/>
|
|
<label class="form-check-label" for="showBlog"
|
|
>Show Recent Blog Posts</label
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Settings -->
|
|
<div class="settings-section">
|
|
<h4><i class="bi bi-box-fill"></i> Product Settings</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Default Product Status</label>
|
|
<select class="form-control" id="defaultProductStatus">
|
|
<option value="active">Active (Published)</option>
|
|
<option value="draft">Draft (Hidden)</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="productsPerPage" class="form-label"
|
|
>Products Per Page</label
|
|
>
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
id="productsPerPage"
|
|
value="12"
|
|
min="6"
|
|
max="48"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Best Seller Logic</label>
|
|
<select class="form-control" id="bestSellerLogic">
|
|
<option value="manual">Manual Selection</option>
|
|
<option value="auto-sales">Automatic (Most Sales)</option>
|
|
<option value="auto-views">Automatic (Most Views)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="enableInventory"
|
|
checked
|
|
/>
|
|
<label class="form-check-label" for="enableInventory"
|
|
>Enable Inventory Management</label
|
|
>
|
|
</div>
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="showOutOfStock"
|
|
checked
|
|
/>
|
|
<label class="form-check-label" for="showOutOfStock"
|
|
>Show Out of Stock Products</label
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Settings -->
|
|
<div class="settings-section">
|
|
<h4><i class="bi bi-shield-fill"></i> Security Settings</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="passwordExpiration" class="form-label"
|
|
>Password Expiration (days)</label
|
|
>
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
id="passwordExpiration"
|
|
value="90"
|
|
min="0"
|
|
/>
|
|
<small class="text-muted">Set to 0 for never expires</small>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="sessionTimeout" class="form-label"
|
|
>Session Timeout (minutes)</label
|
|
>
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
id="sessionTimeout"
|
|
value="60"
|
|
min="5"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="loginAttempts" class="form-label"
|
|
>Max Login Attempts</label
|
|
>
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
id="loginAttempts"
|
|
value="5"
|
|
min="3"
|
|
max="10"
|
|
/>
|
|
<small class="text-muted"
|
|
>Number of failed attempts before account lockout</small
|
|
>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="requireStrongPassword"
|
|
checked
|
|
/>
|
|
<label class="form-check-label" for="requireStrongPassword">
|
|
Require Strong Passwords (8+ chars, uppercase, lowercase, number)
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="enableTwoFactor"
|
|
/>
|
|
<label class="form-check-label" for="enableTwoFactor"
|
|
>Enable Two-Factor Authentication</label
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Appearance Settings -->
|
|
<div class="settings-section">
|
|
<h4><i class="bi bi-palette-fill"></i> Appearance Settings</h4>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Admin Panel Theme</label>
|
|
<div class="theme-selector">
|
|
<div class="theme-option active" onclick="selectTheme('light')">
|
|
<i class="bi bi-sun-fill text-warning"></i>
|
|
<div><strong>Light</strong></div>
|
|
</div>
|
|
<div class="theme-option" onclick="selectTheme('dark')">
|
|
<i class="bi bi-moon-fill text-primary"></i>
|
|
<div><strong>Dark</strong></div>
|
|
</div>
|
|
<div class="theme-option" onclick="selectTheme('auto')">
|
|
<i class="bi bi-circle-half text-info"></i>
|
|
<div><strong>Auto</strong></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="accentColor" class="form-label">Accent Color</label>
|
|
<div class="color-picker-wrapper">
|
|
<input
|
|
type="color"
|
|
class="form-control"
|
|
id="accentColor"
|
|
value="#667eea"
|
|
style="width: 80px"
|
|
onchange="updateColorPreview()"
|
|
/>
|
|
<div
|
|
class="color-preview"
|
|
id="colorPreview"
|
|
style="background-color: #667eea"
|
|
></div>
|
|
<span id="colorValue">#667eea</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Save Button -->
|
|
<div class="text-end">
|
|
<button class="btn btn-lg btn-primary" onclick="saveSettings()">
|
|
<i class="bi bi-save"></i> Save All Settings
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media Library Modal -->
|
|
<div
|
|
class="modal fade"
|
|
id="mediaLibraryModal"
|
|
tabindex="-1"
|
|
aria-labelledby="mediaLibraryModalLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="mediaLibraryModalLabel">
|
|
<i class="bi bi-images"></i> Select from Media Library
|
|
</h5>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-8">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="mediaSearch"
|
|
placeholder="Search media files..."
|
|
/>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<select class="form-select" id="mediaTypeFilter">
|
|
<option value="all">All Types</option>
|
|
<option value="image">Images</option>
|
|
<option value="video">Videos</option>
|
|
<option value="document">Documents</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div
|
|
id="mediaGrid"
|
|
style="
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: 15px;
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
"
|
|
>
|
|
<div class="text-center py-5">
|
|
<i class="bi bi-hourglass-split fs-1 text-muted"></i>
|
|
<p class="text-muted">Loading media...</p>
|
|
</div>
|
|
</div>
|
|
</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="selectMediaFile()"
|
|
>
|
|
<i class="bi bi-check-lg"></i> Select
|
|
</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/settings.js"></script>
|
|
</body>
|
|
</html>
|