Fix: Restore website functionality - all pages and APIs working
This commit is contained in:
Local Server
@@ -11,314 +11,6 @@
|
||||
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" />
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.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>
|
||||
|
||||
Reference in New Issue
Block a user