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-20 20:29:33 -06:00
parent f8068ba54c
commit 1b2502c38d
22 changed files with 1905 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
website/public/home.html
View File

@@ -25,20 +25,59 @@
/>
<!-- Modern Theme CSS -->
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix33" />
<link
rel="stylesheet"
href="/assets/css/mobile-fixes.css?v=20260119touch"
/>
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix35" />
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=20260120fix2" />
<style>
/* Blog Grid for Get Inspired Section - Match Blog Page */
/* Get Inspired Section - Black subtitle text */
#get-inspired .section-subtitle {
color: var(--text-primary) !important;
}
/* Stay Connected Section - Black subtitle text */
#newsletter-section .section-subtitle {
color: var(--text-primary) !important;
}
/* Blog Grid for Get Inspired Section - Horizontal Scroll */
#inspirationGrid.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
max-width: 1100px;
margin: 0 auto;
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
gap: 20px;
padding: 8px 0 16px 0;
max-width: none;
margin: 0;
}
#inspirationGrid.blog-grid::-webkit-scrollbar {
height: 8px;
}
#inspirationGrid.blog-grid::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.5);
border-radius: 10px;
}
#inspirationGrid.blog-grid::-webkit-scrollbar-thumb {
background: var(--primary-pink-dark, #fcb1d8);
border-radius: 10px;
}
#inspirationGrid.blog-grid::-webkit-scrollbar-thumb:hover {
background: var(--primary-pink, #ffd0d0);
}
/* Blog cards in horizontal scroll */
#inspirationGrid.blog-grid .blog-card {
flex: 0 0 320px;
min-width: 320px;
max-width: 320px;
scroll-snap-align: start;
}
/* Blog Card Styles for Get Inspired Section */
@@ -157,15 +196,21 @@
flex: 1;
}
/* Tablet - Blog cards horizontal scroll */
@media (max-width: 992px) {
#inspirationGrid.blog-grid {
grid-template-columns: repeat(2, 1fr);
#inspirationGrid.blog-grid .blog-card {
flex: 0 0 280px;
min-width: 280px;
max-width: 280px;
}
}
/* Mobile - Blog cards horizontal scroll */
@media (max-width: 576px) {
#inspirationGrid.blog-grid {
grid-template-columns: 1fr;
#inspirationGrid.blog-grid .blog-card {
flex: 0 0 240px;
min-width: 240px;
max-width: 240px;
}
}
@@ -307,7 +352,7 @@
<section
class="section"
id="featured-products"
style="background: var(--primary-pink-light)"
style="background: var(--primary-pink-light); padding: 30px 0"
>
<div class="container">
<div class="section-header">
@@ -336,7 +381,7 @@
<section
class="section inspiration-section"
id="get-inspired"
style="background: var(--accent-pink)"
style="background: var(--accent-pink); padding: 30px 0"
>
<div class="container">
<div class="section-header">
@@ -362,10 +407,10 @@
<section
class="section"
id="about-preview"
style="background: var(--primary-pink-dark); padding: 0; margin: 0"
style="background: var(--primary-pink-light); padding: 0; margin: 0"
>
<div class="container">
<div class="about-content">
<div class="about-content" style="padding: 10px 0">
<div class="about-text">
<h2 id="aboutTitle">About Sky Art Shop</h2>
<div id="aboutDescription">
@@ -407,13 +452,8 @@
<!-- Newsletter -->
<section
class="section"
style="
background: linear-gradient(
135deg,
var(--primary-pink-light) 0%,
var(--primary-pink) 100%
);
"
id="newsletter-section"
style="background: var(--accent-pink); padding: 40px 0"
>
<div class="container">
<div class="text-center">
@@ -424,11 +464,14 @@
</p>
<form
class="newsletter-form"
id="homeNewsletterForm"
style="max-width: 500px; margin: 0 auto; display: flex; gap: 12px"
>
<input
type="email"
id="homeNewsletterEmail"
placeholder="Enter your email"
required
style="
flex: 1;
padding: 16px 24px;
@@ -437,7 +480,13 @@
font-size: 1rem;
"
/>
<button type="submit" class="btn btn-primary">Subscribe</button>
<button
type="submit"
class="btn btn-primary"
id="homeNewsletterBtn"
>
Subscribe
</button>
</form>
</div>
</div>
@@ -519,6 +568,10 @@
><i class="bi bi-linkedin"></i
></a>
</div>
<p style="margin-top: 12px; font-size: 0.85rem; opacity: 0.9">
&copy; 2026 PromptTech-Solution.<br />Designed and Developed by:
PromptTech-Solution
</p>
</div>
<div class="footer-column">
@@ -554,7 +607,7 @@
</div>
<div class="footer-bottom">
<p>&copy; 2026 Sky Art Shop. All rights reserved.</p>
<p>&copy; 2026 PromptTech-Solution. Designed and Developed by: PromptTech-Solution</p>
<p>
Made with
<i class="bi bi-heart-fill" style="color: var(--primary-pink)"></i>
@@ -1010,6 +1063,61 @@
heroSlider.innerHTML =
slidesHtml + `<div class="slider-nav">${dotsHtml}</div>` + arrowsHtml;
}
// Newsletter form handler
document
.getElementById("homeNewsletterForm")
?.addEventListener("submit", async function (e) {
e.preventDefault();
const emailInput = document.getElementById("homeNewsletterEmail");
const submitBtn = document.getElementById("homeNewsletterBtn");
const email = emailInput.value.trim();
if (!email) {
SkyArtShop.showNotification(
"Please enter your email address.",
"error",
);
return;
}
const originalBtnText = submitBtn.innerHTML;
submitBtn.disabled = true;
submitBtn.innerHTML = "Subscribing...";
try {
const response = await fetch("/api/newsletter/subscribe", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, source: "home" }),
});
const data = await response.json();
if (data.success) {
SkyArtShop.showNotification(
data.message || "Successfully subscribed!",
"success",
);
emailInput.value = "";
} else {
SkyArtShop.showNotification(
data.message || "Failed to subscribe. Please try again.",
"error",
);
}
} catch (error) {
console.error("Newsletter error:", error);
SkyArtShop.showNotification(
"Failed to subscribe. Please try again later.",
"error",
);
} finally {
submitBtn.disabled = false;
submitBtn.innerHTML = originalBtnText;
}
});
</script>
<script src="/assets/js/accessibility.js"></script>
</body>