PTS/SkyArtShop
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

webupdate

Browse Source
This commit is contained in:
Local Server
2026-01-19 01:17:43 -06:00
parent 5b86f796d6
commit f8068ba54c
65 changed files with 2165 additions and 520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

350
website/public/contact.html
View File

@@ -8,6 +8,7 @@
content="Contact Sky Art Shop - We'd love to hear from you"
/>
<title>Contact Us - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -24,8 +25,11 @@
/>
<!-- Modern Theme CSS -->
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=20260118drawer" />
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=20260118c" />
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix33" />
<link
rel="stylesheet"
href="/assets/css/mobile-fixes.css?v=20260118fix10"
/>
<style>
.contact-hero {
@@ -34,14 +38,21 @@
var(--primary-pink-light) 0%,
var(--primary-pink) 100%
);
padding: 0;
padding: var(--spacing-lg) 0;
}
.contact-hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-2xl);
display: flex;
justify-content: center;
align-items: center;
gap: var(--spacing-xl);
max-width: 900px;
margin: 0 auto;
}
.contact-hero-text {
text-align: center;
flex: 1;
}
.contact-hero-text h1 {
@@ -53,10 +64,16 @@
.contact-hero-text p {
font-size: 1.2rem;
color: var(--text-secondary);
max-width: 450px;
margin: 0 auto var(--spacing-md);
}
.contact-hero-text .breadcrumb {
justify-content: center;
}
.contact-hero-image {
text-align: center;
flex-shrink: 0;
}
.contact-hero-image img {
@@ -135,13 +152,84 @@
@media (max-width: 992px) {
.contact-hero-content {
grid-template-columns: 1fr;
flex-direction: column;
text-align: center;
}
.contact-hero-text {
text-align: center;
}
.contact-hero-text .breadcrumb {
justify-content: center !important;
text-align: center !important;
display: flex !important;
width: 100% !important;
}
.contact-methods {
grid-template-columns: 1fr;
}
/* Contact page mobile layout fixes */
.container {
max-width: 100% !important;
padding: 0 16px !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
.contact-section {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
.contact-info,
.contact-form {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-bottom: var(--spacing-lg) !important;
padding: var(--spacing-md) !important;
}
.contact-form input,
.contact-form textarea {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.form-group {
width: 100% !important;
max-width: 100% !important;
}
.contact-item {
flex-wrap: wrap !important;
}
.map-section {
width: 100% !important;
max-width: 100% !important;
height: 300px !important;
}
.map-section iframe {
width: 100% !important;
max-width: 100% !important;
}
.contact-method {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.contact-method a {
word-break: break-all !important;
}
}
</style>
</head>
@@ -199,6 +287,9 @@
Have a question, suggestion, or just want to say hello? We'd
love to hear from you! Our team is here to help.
</p>
<div class="breadcrumb">
<a href="/home">Home</a> <span>/</span> <span>Contact</span>
</div>
</div>
<div
class="contact-hero-image"
@@ -207,7 +298,7 @@
<img
src="/uploads/get-in-touch-1768630843511-885498786.png"
alt="Contact Us"
style="width: 50%; height: auto; max-width: 300px"
style="width: 100%; height: auto; max-width: 200px"
/>
</div>
</div>
@@ -224,8 +315,8 @@
</div>
<h3>Email Us</h3>
<p>Send us a message anytime</p>
<a href="mailto:hello@skyartshop.com" id="contactEmailLink"
>hello@skyartshop.com</a
<a href="mailto:skyartshop12.11@gmail.com" id="contactEmailLink"
>skyartshop12.11@gmail.com</a
>
</div>
<div class="contact-method">
@@ -235,7 +326,7 @@
<h3>Call Us</h3>
<p id="contactBusinessHoursShort">Mon-Fri, 9am-5pm EST</p>
<a href="tel:+15551234567" id="contactPhoneLink"
>(555) 123-4567</a
>(501) 608-0409</a
>
</div>
<div class="contact-method">
@@ -244,7 +335,7 @@
</div>
<h3>Visit Us</h3>
<p id="contactAddressDisplay">
123 Creative Lane<br />Artville, CA 90210
Belmopan, Cayo District<br />Artville, CA 90210
</p>
</div>
</div>
@@ -295,26 +386,89 @@
<h4>Follow Us</h4>
<div
class="footer-social"
id="contactSocialLinks"
style="margin-top: var(--spacing-sm)"
>
<a
href="#"
class="social-link"
style="background: var(--primary-pink-light)"
id="contactFacebook"
style="
background: var(--primary-pink-light);
display: none;
"
><i class="bi bi-facebook"></i
></a>
<a
href="#"
class="social-link"
style="background: var(--primary-pink-light)"
id="contactInstagram"
style="
background: var(--primary-pink-light);
display: none;
"
><i class="bi bi-instagram"></i
></a>
<a
href="#"
class="social-link"
style="background: var(--primary-pink-light)"
id="contactTwitter"
style="
background: var(--primary-pink-light);
display: none;
"
><i class="bi bi-twitter-x"></i
></a>
<a
href="#"
class="social-link"
id="contactYoutube"
style="
background: var(--primary-pink-light);
display: none;
"
><i class="bi bi-youtube"></i
></a>
<a
href="#"
class="social-link"
id="contactPinterest"
style="
background: var(--primary-pink-light);
display: none;
"
><i class="bi bi-pinterest"></i
></a>
<a
href="#"
class="social-link"
id="contactTiktok"
style="
background: var(--primary-pink-light);
display: none;
"
><i class="bi bi-tiktok"></i
></a>
<a
href="#"
class="social-link"
id="contactWhatsapp"
style="
background: var(--primary-pink-light);
display: none;
"
><i class="bi bi-whatsapp"></i
></a>
<a
href="#"
class="social-link"
id="contactLinkedin"
style="
background: var(--primary-pink-light);
display: none;
"
><i class="bi bi-linkedin"></i
></a>
</div>
</div>
</div>
@@ -374,33 +528,34 @@
</div>
<!-- Map -->
<div class="map-section">
<div class="map-placeholder">
<div class="map-image">
<img
src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1200&q=80"
alt="Los Angeles City View"
/>
<div class="map-overlay">
<div class="map-pin">
<i class="bi bi-geo-alt-fill"></i>
</div>
<div class="map-info">
<h4>Sky Art Shop</h4>
<p>123 Creative Lane</p>
<p>Los Angeles, CA 90012</p>
<a
href="https://maps.google.com/?q=Los+Angeles+CA"
target="_blank"
rel="noopener"
class="btn btn-sm btn-primary"
>
<i class="bi bi-map"></i> Open in Google Maps
</a>
</div>
</div>
</div>
</div>
<div class="map-section" style="position: relative">
<!-- OpenStreetMap Embed - No API key required -->
<iframe
src="https://www.openstreetmap.org/export/embed.html?bbox=-88.85%2C17.20%2C-88.70%2C17.30&layer=mapnik&marker=17.25%2C-88.77"
width="100%"
height="100%"
style="border: 0"
allowfullscreen=""
loading="lazy"
title="Sky Art Shop Location - Belmopan, Belize"
>
</iframe>
<a
href="https://www.google.com/maps/search/Belmopan,+Belize"
target="_blank"
rel="noopener noreferrer"
style="
display: block;
text-align: center;
padding: 12px;
background: var(--primary-pink-light);
color: var(--text-primary);
text-decoration: none;
font-weight: 500;
"
>
<i class="bi bi-geo-alt"></i> Open in Google Maps
</a>
</div>
</div>
</section>
@@ -423,15 +578,63 @@
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"
<div class="footer-social" id="footerSocialLinks">
<a
href="#"
class="social-link"
id="footerFacebook"
style="display: none"
><i class="bi bi-facebook"></i
></a>
<a
href="#"
class="social-link"
id="footerInstagram"
style="display: none"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"
<a
href="#"
class="social-link"
id="footerTwitter"
style="display: none"
><i class="bi bi-twitter-x"></i
></a>
<a
href="#"
class="social-link"
id="footerYoutube"
style="display: none"
><i class="bi bi-youtube"></i
></a>
<a
href="#"
class="social-link"
id="footerPinterest"
style="display: none"
><i class="bi bi-pinterest"></i
></a>
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
<a
href="#"
class="social-link"
id="footerTiktok"
style="display: none"
><i class="bi bi-tiktok"></i
></a>
<a
href="#"
class="social-link"
id="footerWhatsapp"
style="display: none"
><i class="bi bi-whatsapp"></i
></a>
<a
href="#"
class="social-link"
id="footerLinkedin"
style="display: none"
><i class="bi bi-linkedin"></i
></a>
</div>
</div>
@@ -460,9 +663,9 @@
<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>
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
</ul>
</div>
</div>
@@ -511,7 +714,7 @@
</div>
<!-- Scripts -->
<script src="/assets/js/modern-theme.js?v=20260118c"></script>
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
<script src="/assets/js/customer-auth.js"></script>
<script>
// Load contact page data from API
@@ -582,9 +785,52 @@
}
}
// Load social links for the "Follow Us" section
async function loadContactSocialLinks() {
try {
const response = await fetch("/api/settings");
if (!response.ok) return;
const settings = await response.json();
// Map of social platform to element ID and URL format
const socialMap = {
socialFacebook: { id: "contactFacebook", url: (v) => v },
socialInstagram: { id: "contactInstagram", url: (v) => v },
socialTwitter: { id: "contactTwitter", url: (v) => v },
socialYoutube: { id: "contactYoutube", url: (v) => v },
socialPinterest: { id: "contactPinterest", url: (v) => v },
socialTiktok: { id: "contactTiktok", url: (v) => v },
socialWhatsapp: {
id: "contactWhatsapp",
url: (v) =>
v.startsWith("http")
? v
: `https://wa.me/${v.replace(/[^0-9]/g, "")}`,
},
socialLinkedin: { id: "contactLinkedin", url: (v) => v },
};
for (const [key, config] of Object.entries(socialMap)) {
const value = settings[key];
const el = document.getElementById(config.id);
if (el && value && value.trim()) {
el.href = config.url(value.trim());
el.target = "_blank";
el.rel = "noopener noreferrer";
el.style.display = "";
}
}
} catch (error) {
console.log("Could not load contact social links:", error);
}
}
// Load page data on DOMContentLoaded
document.addEventListener("DOMContentLoaded", () => {
loadContactPageData();
loadContactSocialLinks();
});
document