325 lines
8.9 KiB
HTML
325 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title id="pageTitle">Loading... - Sky Art Shop</title>
|
|
<meta name="description" id="pageDescription" content="Sky Art Shop" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
|
|
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="/assets/css/main.css" />
|
|
<link rel="stylesheet" href="/assets/css/navbar.css" />
|
|
<style>
|
|
.page-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 40px 20px;
|
|
}
|
|
.page-header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 2px solid #e0e0e0;
|
|
}
|
|
.page-header h1 {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
.page-content {
|
|
background: white;
|
|
padding: 40px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
line-height: 1.8;
|
|
font-size: 1.1rem;
|
|
}
|
|
.page-content h1,
|
|
.page-content h2,
|
|
.page-content h3,
|
|
.page-content h4,
|
|
.page-content h5,
|
|
.page-content h6 {
|
|
margin-top: 1.5em;
|
|
margin-bottom: 0.5em;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
.page-content h1 {
|
|
font-size: 2rem;
|
|
border-bottom: 2px solid #e0e0e0;
|
|
padding-bottom: 10px;
|
|
}
|
|
.page-content h2 {
|
|
font-size: 1.75rem;
|
|
}
|
|
.page-content h3 {
|
|
font-size: 1.5rem;
|
|
}
|
|
.page-content p {
|
|
margin-bottom: 1.2em;
|
|
color: #555;
|
|
}
|
|
.page-content ul,
|
|
.page-content ol {
|
|
margin-bottom: 1.5em;
|
|
padding-left: 30px;
|
|
}
|
|
.page-content li {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.page-content img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
margin: 20px 0;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.page-content blockquote {
|
|
border-left: 4px solid #667eea;
|
|
padding-left: 20px;
|
|
margin: 20px 0;
|
|
font-style: italic;
|
|
color: #666;
|
|
background: #f8f9fa;
|
|
padding: 15px 20px;
|
|
border-radius: 4px;
|
|
}
|
|
.page-content a {
|
|
color: #667eea;
|
|
text-decoration: none;
|
|
transition: color 0.3s;
|
|
}
|
|
.page-content a:hover {
|
|
color: #5568d3;
|
|
text-decoration: underline;
|
|
}
|
|
.page-content code {
|
|
background: #f4f4f4;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: monospace;
|
|
font-size: 0.9em;
|
|
}
|
|
.page-content pre {
|
|
background: #2d2d2d;
|
|
color: #f8f8f2;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
overflow-x: auto;
|
|
margin: 20px 0;
|
|
}
|
|
.page-content pre code {
|
|
background: none;
|
|
padding: 0;
|
|
color: inherit;
|
|
}
|
|
.loading-container {
|
|
text-align: center;
|
|
padding: 100px 20px;
|
|
}
|
|
.loading-spinner {
|
|
border: 4px solid #f3f3f3;
|
|
border-top: 4px solid #667eea;
|
|
border-radius: 50%;
|
|
width: 50px;
|
|
height: 50px;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto 20px;
|
|
}
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.error-container {
|
|
text-align: center;
|
|
padding: 100px 20px;
|
|
}
|
|
.error-container i {
|
|
font-size: 4rem;
|
|
color: #e74c3c;
|
|
margin-bottom: 20px;
|
|
}
|
|
.error-container h2 {
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
.error-container p {
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="/assets/css/theme-colors.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Modern Navigation -->
|
|
<nav class="modern-navbar">
|
|
<div class="navbar-wrapper">
|
|
<div class="navbar-brand">
|
|
<a href="/home" class="brand-link">
|
|
<img
|
|
src="/uploads/cat-png-1767324141436-368259437.png"
|
|
alt="Sky Art Shop Logo"
|
|
class="brand-logo"
|
|
/>
|
|
<span class="brand-name">Sky' Art Shop</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="navbar-menu">
|
|
<ul class="nav-menu-list">
|
|
<li class="nav-item">
|
|
<a href="/home" class="nav-link">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/shop" class="nav-link">Shop</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/portfolio" class="nav-link">Portfolio</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/about" class="nav-link">About</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/contact" class="nav-link">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="navbar-actions">
|
|
<a href="/shop" class="btn-cart">
|
|
<i class="bi bi-cart3"></i>
|
|
<span class="cart-count">0</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="page-container" id="pageContainer">
|
|
<div class="loading-container">
|
|
<div class="loading-spinner"></div>
|
|
<p>Loading page...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="site-footer">
|
|
<div class="footer-content">
|
|
<div class="footer-section">
|
|
<h4>Sky Art Shop</h4>
|
|
<p>
|
|
Quality scrapbooking, journaling, and crafting supplies for creative
|
|
minds.
|
|
</p>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4>Quick Links</h4>
|
|
<ul>
|
|
<li><a href="/home">Home</a></li>
|
|
<li><a href="/shop">Shop</a></li>
|
|
<li><a href="/portfolio">Portfolio</a></li>
|
|
<li><a href="/about">About</a></li>
|
|
<li><a href="/contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4>Follow Us</h4>
|
|
<div class="social-links">
|
|
<a href="#"><i class="bi bi-facebook"></i></a>
|
|
<a href="#"><i class="bi bi-instagram"></i></a>
|
|
<a href="#"><i class="bi bi-pinterest"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2025 Sky Art Shop. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Get slug from URL parameter
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const pageSlug = urlParams.get("slug");
|
|
|
|
if (!pageSlug) {
|
|
showError("No page specified");
|
|
} else {
|
|
loadPage(pageSlug);
|
|
}
|
|
|
|
async function loadPage(slug) {
|
|
try {
|
|
const response = await fetch(`/api/pages/${slug}`);
|
|
const data = await response.json();
|
|
|
|
if (data.success && data.page) {
|
|
displayPage(data.page);
|
|
} else {
|
|
showError("Page not found");
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to load page:", error);
|
|
showError("Failed to load page");
|
|
}
|
|
}
|
|
|
|
function displayPage(page) {
|
|
// Update page title and meta
|
|
document.getElementById("pageTitle").textContent =
|
|
page.metatitle || page.title + " - Sky Art Shop";
|
|
document.getElementById("pageDescription").content =
|
|
page.metadescription || page.title;
|
|
|
|
// Display page content
|
|
const container = document.getElementById("pageContainer");
|
|
container.innerHTML = `
|
|
<div class="page-header">
|
|
<h1>${escapeHtml(page.title)}</h1>
|
|
</div>
|
|
<div class="page-content">
|
|
${page.content || "<p>No content available.</p>"}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function showError(message) {
|
|
const container = document.getElementById("pageContainer");
|
|
container.innerHTML = `
|
|
<div class="error-container">
|
|
<i class="bi bi-exclamation-triangle"></i>
|
|
<h2>Oops! Something went wrong</h2>
|
|
<p>${escapeHtml(message)}</p>
|
|
<a href="/home" class="btn btn-primary">
|
|
<i class="bi bi-house"></i> Back to Home
|
|
</a>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const map = {
|
|
"&": "&",
|
|
"<": "<",
|
|
">": ">",
|
|
'"': """,
|
|
"'": "'",
|
|
};
|
|
return text.replace(/[&<>"']/g, (m) => map[m]);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|