Files
SkyArtShop/website/public/privacy.html
Local Server 2a2a3d99e5 webupdate
2026-01-18 02:22:05 -06:00

456 lines
16 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Privacy Policy - Sky Art Shop" />
<title>Privacy Policy - Sky Art Shop</title>
<!-- Fonts -->
<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=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap"
rel="stylesheet"
/>
<!-- Icons -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
/>
<!-- Modern Theme CSS -->
<link
rel="stylesheet"
href="/assets/css/modern-theme.css?v=20260118drawer"
/>
<link
rel="stylesheet"
href="/assets/css/mobile-fixes.css?v=20260118editor"
/>
<style>
.policy-container {
max-width: 900px;
margin: 0 auto;
background: var(--bg-white);
padding: var(--spacing-2xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.policy-container h2 {
font-family: var(--font-heading);
font-size: 1.75rem;
margin-top: var(--spacing-xl);
margin-bottom: var(--spacing-md);
color: var(--text-primary);
}
.policy-container h2:first-of-type {
margin-top: 0;
}
.policy-container p {
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: var(--spacing-lg);
}
.policy-container ul {
color: var(--text-secondary);
line-height: 2;
margin-left: var(--spacing-xl);
margin-bottom: var(--spacing-lg);
}
.policy-container ul li {
margin-bottom: var(--spacing-sm);
}
.policy-meta {
color: var(--text-light);
font-style: italic;
margin-bottom: var(--spacing-xl);
padding: var(--spacing-md);
background: var(--primary-pink-light);
border-radius: var(--radius-sm);
}
.contact-box {
background: var(--primary-pink-light);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
margin-top: var(--spacing-2xl);
text-align: center;
}
</style>
</head>
<body>
<!-- Navigation -->
<header class="nav-wrapper">
<nav class="navbar">
<a href="/home" class="nav-brand">
<img
src="/uploads/cat-png-1767324141436-368259437.png"
alt="Sky Art Shop Logo"
/>
<span>Sky Art Shop</span>
</a>
<ul class="nav-menu">
<li><a href="/home" class="nav-link">Home</a></li>
<li><a href="/shop" class="nav-link">Shop</a></li>
<li><a href="/portfolio" class="nav-link">Portfolio</a></li>
<li><a href="/blog" class="nav-link">Blog</a></li>
<li><a href="/about" class="nav-link">About</a></li>
<li><a href="/contact" class="nav-link">Contact</a></li>
</ul>
<div class="nav-actions">
<a href="/signin" class="nav-icon-btn" title="Sign In">
<i class="bi bi-person"></i>
</a>
<button class="nav-icon-btn wishlist-btn-nav" title="Wishlist">
<i class="bi bi-heart"></i>
<span class="badge wishlist-count" style="display: none">0</span>
</button>
<button class="nav-icon-btn cart-btn" title="Cart">
<i class="bi bi-bag"></i>
<span class="badge cart-count" style="display: none">0</span>
</button>
<button class="nav-mobile-toggle" aria-label="Toggle menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
</header>
<!-- Page Content -->
<main class="page-content">
<!-- Page Header -->
<div class="page-header">
<div class="container">
<h1 id="privacyHeaderTitle">
<i class="bi bi-shield-check"></i> Privacy Policy
</h1>
<p>How we protect and use your information</p>
<div class="breadcrumb">
<a href="/home">Home</a>
<span>/</span>
<span>Privacy Policy</span>
</div>
</div>
</div>
<!-- Policy Content -->
<section class="section">
<div class="container">
<div class="policy-container" id="privacyContainer">
<!-- Content will be loaded dynamically from the database -->
<div
class="loading-placeholder"
style="text-align: center; padding: 2rem"
>
<i
class="bi bi-hourglass-split"
style="font-size: 2rem; animation: spin 1s linear infinite"
></i>
<p>Loading privacy policy...</p>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-about">
<div class="footer-brand">
<img
src="/uploads/cat-png-1767324141436-368259437.png"
alt="Sky Art Shop"
/>
<span>Sky Art Shop</span>
</div>
<p>
Your one-stop shop for scrapbooking, journaling, cardmaking, and
collaging stationery. Quality products for all your creative
needs.
</p>
<div class="footer-social">
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"
><i class="bi bi-pinterest"></i
></a>
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
</div>
</div>
<div class="footer-column">
<h4>Quick Links</h4>
<ul class="footer-links">
<li><a href="/home">Home</a></li>
<li><a href="/shop">Shop</a></li>
<li><a href="/portfolio">Portfolio</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Customer Service</h4>
<ul class="footer-links">
<li><a href="/faq">FAQ</a></li>
<li><a href="/shipping-info">Shipping Info</a></li>
<li><a href="/returns">Returns & Refunds</a></li>
<li><a href="/privacy">Privacy Policy</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Contact Us</h4>
<ul class="footer-links">
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Sky Art Shop. All rights reserved.</p>
<p>
Made with
<i class="bi bi-heart-fill" style="color: var(--primary-pink)"></i>
for creative souls
</p>
</div>
</div>
</footer>
<!-- Cart Drawer -->
<div class="cart-overlay"></div>
<div class="cart-drawer">
<div class="cart-header">
<h3>Shopping Cart</h3>
<button class="cart-close"><i class="bi bi-x"></i></button>
</div>
<div class="cart-items">
<!-- Cart items rendered via JavaScript -->
</div>
<div class="cart-footer">
<div class="cart-total">
<span>Total:</span>
<span class="cart-total-amount">$0.00</span>
</div>
<a href="/checkout" class="btn btn-primary cart-checkout-btn"
>Checkout</a
>
</div>
</div>
<!-- Wishlist Drawer -->
<div class="wishlist-overlay"></div>
<div class="wishlist-drawer">
<div class="wishlist-header">
<h3><i class="bi bi-heart"></i> My Wishlist</h3>
<button class="wishlist-close"><i class="bi bi-x"></i></button>
</div>
<div class="wishlist-items"></div>
<div class="wishlist-footer">
<a href="/shop" class="btn btn-outline">Continue Shopping</a>
</div>
</div>
<!-- Scripts -->
<script src="/assets/js/modern-theme.js?v=20260118c"></script>
<script src="/assets/js/customer-auth.js"></script>
<script src="/assets/js/accessibility.js"></script>
<script>
// Load privacy page data from API
async function loadPrivacyPageData() {
try {
console.log("Loading privacy page data from API...");
const response = await fetch("/api/pages/privacy?" + Date.now(), {
cache: "no-cache",
headers: {
"Cache-Control": "no-cache",
},
});
if (!response.ok) {
console.log("Privacy page not found in database, using defaults");
renderDefaultPrivacyContent();
return;
}
const data = await response.json();
console.log("Received data from API:", data);
const pageData = data.page.pagedata || {};
console.log("Page data:", pageData);
// Update header if data exists
if (pageData.header) {
if (pageData.header.title) {
document.getElementById("privacyHeaderTitle").innerHTML =
'<i class="bi bi-shield-check"></i> ' + pageData.header.title;
}
if (pageData.header.subtitle) {
const subtitleEl = document.querySelector(".page-header p");
if (subtitleEl) {
subtitleEl.textContent = pageData.header.subtitle;
}
}
}
// Render content
const container = document.getElementById("privacyContainer");
let contentHtml = "";
// Add last updated date if exists
if (pageData.lastUpdated) {
contentHtml += `<p class="policy-meta">Last updated: ${escapeHtml(pageData.lastUpdated)}</p>`;
}
// Add main content (new format)
if (pageData.mainContent) {
console.log(
"Using mainContent:",
pageData.mainContent.substring(0, 100) + "...",
);
contentHtml += pageData.mainContent;
}
// Fallback to sections (old format)
else if (pageData.sections && pageData.sections.length > 0) {
console.log(
"Using sections format, sections:",
pageData.sections.length,
);
contentHtml += pageData.sections
.map((section) => {
let sectionHtml = "";
if (section.title) {
sectionHtml += `<h2>${escapeHtml(section.title)}</h2>`;
}
if (section.content) {
sectionHtml += section.content;
}
return sectionHtml;
})
.join("");
}
// Add contact box at the end
if (pageData.contactBox) {
const box = pageData.contactBox;
contentHtml += `
<div class="contact-box">
<h3>${escapeHtml(box.title || "Privacy Questions?")}</h3>
<p>${escapeHtml(box.message || "If you have any questions about this Privacy Policy, please contact us:")}</p>
<div style="margin-top: var(--spacing-lg)">
<p><strong>Email:</strong> ${escapeHtml(box.email || "privacy@skyartshop.com")}</p>
<p><strong>Phone:</strong> ${escapeHtml(box.phone || "(555) 123-4567")}</p>
<p><strong>Mail:</strong> ${escapeHtml(box.address || "Sky Art Shop, 123 Creative Lane, City, ST 12345")}</p>
</div>
</div>
`;
}
// Fallback to hardcoded contact box (old format)
else if (pageData.sections && pageData.sections.length > 0) {
contentHtml += `
<div class="contact-box">
<h3>Privacy Questions?</h3>
<p>If you have any questions about this Privacy Policy, please contact us:</p>
<div style="margin-top: var(--spacing-lg)">
<p><strong>Email:</strong> privacy@skyartshop.com</p>
<p><strong>Phone:</strong> (555) 123-4567</p>
<p><strong>Mail:</strong> Sky Art Shop, 123 Creative Lane, City, ST 12345</p>
</div>
</div>
`;
}
// If we have any content, show it, otherwise use defaults
if (contentHtml.trim()) {
container.innerHTML = contentHtml;
} else {
renderDefaultPrivacyContent();
}
} catch (error) {
console.error("Error loading privacy page:", error);
renderDefaultPrivacyContent();
}
}
function renderDefaultPrivacyContent() {
const container = document.getElementById("privacyContainer");
container.innerHTML = `
<p class="policy-meta">Last updated: January 14, 2026</p>
<p>At Sky Art Shop, we take your privacy seriously. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you visit our website and make purchases from our store.</p>
<h2>Information We Collect</h2>
<p>We collect information you provide directly to us when you:</p>
<ul>
<li>Create an account or make a purchase</li>
<li>Subscribe to our newsletter</li>
<li>Contact our customer service</li>
<li>Participate in surveys or promotions</li>
<li>Post reviews or comments</li>
</ul>
<p>This information may include your name, email address, shipping address, phone number, and payment information.</p>
<h2>How We Use Your Information</h2>
<p>We use the information we collect to:</p>
<ul>
<li>Process and fulfill your orders</li>
<li>Send you order confirmations and shipping updates</li>
<li>Respond to your questions and provide customer support</li>
<li>Send you promotional emails (with your consent)</li>
<li>Improve our website and services</li>
<li>Prevent fraud and enhance security</li>
<li>Comply with legal obligations</li>
</ul>
<h2>Data Security</h2>
<p>We implement industry-standard security measures to protect your personal information:</p>
<ul>
<li>SSL/TLS encryption for all data transmission</li>
<li>Secure payment processing through PCI-compliant providers</li>
<li>Regular security audits and updates</li>
<li>Limited access to personal information by authorized personnel only</li>
</ul>
<div class="contact-box">
<h3>Privacy Questions?</h3>
<p>If you have any questions about this Privacy Policy, please contact us:</p>
<div style="margin-top: var(--spacing-lg)">
<p><strong>Email:</strong> privacy@skyartshop.com</p>
<p><strong>Phone:</strong> (555) 123-4567</p>
<p><strong>Mail:</strong> Sky Art Shop, 123 Creative Lane, City, ST 12345</p>
</div>
</div>
`;
}
function escapeHtml(text) {
const div = document.createElement("div");
div.textContent = text;
return div.innerHTML;
}
// Load on page ready
document.addEventListener("DOMContentLoaded", loadPrivacyPageData);
</script>
</body>
</html>