1490 lines
43 KiB
HTML
1490 lines
43 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="Sky Art Shop Blog - Creative tips, tutorials, and inspiration"
|
|
/>
|
|
<title>Blog - Sky Art Shop</title>
|
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
|
|
|
<!-- 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=fix35" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="/assets/css/mobile-fixes.css?v=20260120fix2"
|
|
/>
|
|
|
|
<style>
|
|
/* Featured Post - Horizontal Card */
|
|
.featured-post {
|
|
display: grid;
|
|
grid-template-columns: 1.2fr 1fr;
|
|
gap: 0;
|
|
margin-bottom: var(--spacing-2xl);
|
|
background: var(--bg-white);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-md);
|
|
cursor: pointer;
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.featured-post:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.featured-post-image {
|
|
position: relative;
|
|
height: 100%;
|
|
min-height: 350px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.featured-post-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: var(--transition-slow);
|
|
}
|
|
|
|
.featured-post:hover .featured-post-image img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.featured-post-content {
|
|
padding: var(--spacing-2xl);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.featured-badge {
|
|
display: inline-block;
|
|
padding: 6px 16px;
|
|
background: var(--primary-pink);
|
|
color: var(--text-primary);
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
border-radius: var(--radius-full);
|
|
margin-bottom: var(--spacing-md);
|
|
width: fit-content;
|
|
}
|
|
|
|
.featured-post-content h2 {
|
|
font-family: var(--font-heading);
|
|
font-size: 1.75rem;
|
|
line-height: 1.3;
|
|
margin-bottom: var(--spacing-md);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.featured-post-content .blog-meta {
|
|
display: flex;
|
|
gap: var(--spacing-md);
|
|
color: var(--text-light);
|
|
font-size: 0.85rem;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.featured-post-content p {
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--spacing-lg);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Blog Grid - Same as Portfolio */
|
|
.blog-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
/* Blog Card - Match Portfolio Card Structure */
|
|
.blog-card {
|
|
position: relative;
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
background: var(--bg-white);
|
|
cursor: pointer;
|
|
box-shadow: var(--shadow-md);
|
|
transition: var(--transition-smooth);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.blog-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.blog-card-image {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 4/3;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.blog-card-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: var(--transition-slow);
|
|
}
|
|
|
|
.blog-card:hover .blog-card-image img {
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
.blog-card-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.blog-card:hover .blog-card-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.blog-card-overlay .read-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
background: var(--bg-white);
|
|
color: var(--text-primary);
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
border-radius: var(--radius-full);
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
transform: translateY(10px);
|
|
opacity: 0;
|
|
transition: var(--transition-fast);
|
|
}
|
|
|
|
.blog-card:hover .blog-card-overlay .read-btn {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.blog-card-info {
|
|
padding: var(--spacing-lg);
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.blog-card-category {
|
|
display: inline-block;
|
|
background: var(--primary-pink-light);
|
|
color: var(--text-primary);
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
border-radius: var(--radius-full);
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: var(--spacing-sm);
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.blog-card-info h3 {
|
|
font-size: 1.1rem;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-xs);
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.blog-card-info .blog-date {
|
|
font-size: 0.8rem;
|
|
color: var(--text-light);
|
|
margin-bottom: var(--spacing-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.blog-card-info p {
|
|
color: var(--text-secondary);
|
|
font-size: 0.85rem;
|
|
line-height: 1.5;
|
|
flex: 1;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.featured-post {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.featured-post-image {
|
|
min-height: 280px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.blog-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Blog Video Section */
|
|
.blog-video-section {
|
|
max-width: 900px;
|
|
margin: var(--spacing-xl) auto;
|
|
padding: 0 var(--spacing-lg);
|
|
}
|
|
|
|
.blog-video-container {
|
|
background: var(--bg-white);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* Poll Styles */
|
|
.blog-poll-section {
|
|
max-width: 600px;
|
|
margin: var(--spacing-xl) auto;
|
|
padding: 0 var(--spacing-lg);
|
|
}
|
|
|
|
.poll-container {
|
|
background: var(--bg-white);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-xl);
|
|
box-shadow: var(--shadow-md);
|
|
border: 1px solid var(--border-light);
|
|
}
|
|
|
|
.poll-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.poll-header i {
|
|
font-size: 1.5rem;
|
|
color: var(--primary-pink);
|
|
}
|
|
|
|
.poll-header h4 {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.poll-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.poll-option {
|
|
position: relative;
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
border: 2px solid var(--border-light);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-light);
|
|
cursor: pointer;
|
|
transition: var(--transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
text-align: left;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.poll-option:not(.voted):hover {
|
|
border-color: var(--primary-pink);
|
|
background: var(--primary-pink-light);
|
|
}
|
|
|
|
.poll-option.voted {
|
|
cursor: default;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.poll-option.voted.selected {
|
|
border-color: var(--primary-pink);
|
|
}
|
|
|
|
.poll-bar {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
background: var(--primary-pink-light);
|
|
border-radius: var(--radius-md);
|
|
transition: width 0.5s ease;
|
|
z-index: 0;
|
|
}
|
|
|
|
.poll-label {
|
|
position: relative;
|
|
z-index: 1;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.poll-percent {
|
|
position: relative;
|
|
z-index: 1;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.poll-footer {
|
|
margin-top: var(--spacing-md);
|
|
text-align: center;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
/* ========================================
|
|
BLOG BOOK STYLE LAYOUT
|
|
======================================== */
|
|
.blog-book-container {
|
|
max-width: 95%;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.blog-book {
|
|
display: flex;
|
|
background: linear-gradient(135deg, #f8f4e8 0%, #fff9e6 100%);
|
|
border-radius: 8px;
|
|
box-shadow:
|
|
0 20px 60px rgba(0, 0, 0, 0.15),
|
|
0 0 0 1px rgba(139, 90, 43, 0.1),
|
|
inset 0 0 80px rgba(139, 90, 43, 0.05);
|
|
position: relative;
|
|
height: 92vh;
|
|
min-height: 800px;
|
|
max-height: 1200px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Book Pages */
|
|
.blog-book-page {
|
|
flex: 1;
|
|
padding: var(--spacing-xl);
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.blog-book-left {
|
|
background: linear-gradient(to right, #f5f0e1 0%, #faf6eb 100%);
|
|
border-right: none;
|
|
}
|
|
|
|
.blog-book-right {
|
|
background: linear-gradient(to left, #f5f0e1 0%, #faf6eb 100%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.blog-book-right .book-page-inner {
|
|
max-height: 100%;
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(139, 90, 43, 0.4) rgba(139, 90, 43, 0.1);
|
|
}
|
|
|
|
/* Book Spine */
|
|
.blog-book-spine {
|
|
width: 30px;
|
|
background: linear-gradient(
|
|
to right,
|
|
#d4c4a8 0%,
|
|
#c9b896 20%,
|
|
#e8dcc6 50%,
|
|
#c9b896 80%,
|
|
#d4c4a8 100%
|
|
);
|
|
box-shadow:
|
|
inset 2px 0 4px rgba(0, 0, 0, 0.1),
|
|
inset -2px 0 4px rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
}
|
|
|
|
.blog-book-spine::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 2px;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent 0%,
|
|
rgba(139, 90, 43, 0.3) 10%,
|
|
rgba(139, 90, 43, 0.3) 90%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
/* Page Inner Content */
|
|
.book-page-inner {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding-right: var(--spacing-sm);
|
|
}
|
|
|
|
.book-page-inner::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.book-page-inner::-webkit-scrollbar-track {
|
|
background: rgba(139, 90, 43, 0.1);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.book-page-inner::-webkit-scrollbar-thumb {
|
|
background: rgba(139, 90, 43, 0.3);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.book-page-inner::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(139, 90, 43, 0.5);
|
|
}
|
|
|
|
/* Page Number */
|
|
.book-page-number {
|
|
position: absolute;
|
|
bottom: var(--spacing-md);
|
|
font-family: Georgia, serif;
|
|
font-size: 0.9rem;
|
|
color: rgba(139, 90, 43, 0.5);
|
|
}
|
|
|
|
.blog-book-left .book-page-number {
|
|
left: var(--spacing-xl);
|
|
}
|
|
|
|
.blog-book-right .book-page-number {
|
|
right: var(--spacing-xl);
|
|
}
|
|
|
|
/* Book Page Headers */
|
|
.book-page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-lg);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 2px solid rgba(139, 90, 43, 0.2);
|
|
font-family: Georgia, serif;
|
|
font-size: 1.1rem;
|
|
color: rgba(139, 90, 43, 0.7);
|
|
}
|
|
|
|
.book-page-header i {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
/* Left Page - Featured Image */
|
|
.book-featured-image {
|
|
width: 100%;
|
|
aspect-ratio: 4/3;
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
margin-bottom: var(--spacing-lg);
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
border: 4px solid rgba(139, 90, 43, 0.2);
|
|
}
|
|
|
|
.book-featured-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.book-featured-image:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Stacked Full Images */
|
|
.book-image-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.book-stacked-image {
|
|
width: 100%;
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
border: 4px solid rgba(139, 90, 43, 0.2);
|
|
}
|
|
|
|
.book-stacked-image img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.book-stacked-image:hover img {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
/* Book Section Labels */
|
|
.book-section-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
font-size: 0.9rem;
|
|
color: rgba(139, 90, 43, 0.6);
|
|
margin-bottom: var(--spacing-sm);
|
|
font-family: Georgia, serif;
|
|
}
|
|
|
|
/* Book Video Section */
|
|
.book-video-section {
|
|
margin-top: var(--spacing-lg);
|
|
}
|
|
|
|
.book-video-container {
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.book-video-container iframe,
|
|
.book-video-container video {
|
|
width: 100%;
|
|
height: 250px;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
/* Book Poll Section */
|
|
.book-poll-section {
|
|
margin-top: var(--spacing-lg);
|
|
}
|
|
|
|
.book-poll-section .poll-container {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.book-poll-section h4 {
|
|
font-size: 1rem;
|
|
margin-bottom: var(--spacing-md);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Right Page - Content */
|
|
.book-content-header {
|
|
margin-bottom: var(--spacing-xl);
|
|
padding-bottom: var(--spacing-lg);
|
|
border-bottom: 2px solid rgba(139, 90, 43, 0.2);
|
|
}
|
|
|
|
.book-content-header .blog-detail-date {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
font-size: 0.9rem;
|
|
color: rgba(139, 90, 43, 0.6);
|
|
margin-bottom: var(--spacing-sm);
|
|
font-family: Georgia, serif;
|
|
}
|
|
|
|
.book-title {
|
|
font-family: Georgia, serif;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #3d2914;
|
|
line-height: 1.3;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Book Content Body */
|
|
.book-content-body {
|
|
font-family: Georgia, serif;
|
|
font-size: 1.05rem;
|
|
line-height: 1.9;
|
|
color: #4a3728;
|
|
}
|
|
|
|
.book-content-body p {
|
|
margin-bottom: var(--spacing-lg);
|
|
text-indent: 1.5em;
|
|
}
|
|
|
|
.book-content-body p:first-child {
|
|
text-indent: 0;
|
|
}
|
|
|
|
.book-content-body p:first-child::first-letter {
|
|
font-size: 3.5rem;
|
|
float: left;
|
|
line-height: 1;
|
|
padding-right: var(--spacing-sm);
|
|
color: #8b5a2b;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.book-content-body h1,
|
|
.book-content-body h2,
|
|
.book-content-body h3 {
|
|
color: #3d2914;
|
|
margin-top: var(--spacing-xl);
|
|
margin-bottom: var(--spacing-md);
|
|
font-family: Georgia, serif;
|
|
}
|
|
|
|
.book-content-body h2 {
|
|
font-size: 1.5rem;
|
|
border-bottom: 1px solid rgba(139, 90, 43, 0.2);
|
|
padding-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.book-content-body ul,
|
|
.book-content-body ol {
|
|
margin-bottom: var(--spacing-lg);
|
|
padding-left: var(--spacing-xl);
|
|
}
|
|
|
|
.book-content-body li {
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.book-content-body blockquote {
|
|
margin: var(--spacing-lg) 0;
|
|
padding: var(--spacing-lg);
|
|
background: rgba(139, 90, 43, 0.08);
|
|
border-left: 4px solid #8b5a2b;
|
|
font-style: italic;
|
|
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
|
}
|
|
|
|
.book-content-body a {
|
|
color: #8b5a2b;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.book-content-body strong {
|
|
color: #3d2914;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* CTA Below Book */
|
|
.blog-book-cta {
|
|
text-align: center;
|
|
margin-top: var(--spacing-2xl);
|
|
padding: var(--spacing-xl);
|
|
background: var(--bg-white);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.blog-book-cta p {
|
|
font-size: 1.1rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 992px) {
|
|
.blog-book {
|
|
flex-direction: column-reverse;
|
|
min-height: auto;
|
|
}
|
|
|
|
/* Adjust spine to appear between content and images */
|
|
.blog-book-spine {
|
|
order: 0;
|
|
}
|
|
|
|
.blog-book-spine {
|
|
width: 100%;
|
|
height: 20px;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
#d4c4a8 0%,
|
|
#c9b896 20%,
|
|
#e8dcc6 50%,
|
|
#c9b896 80%,
|
|
#d4c4a8 100%
|
|
);
|
|
}
|
|
|
|
.blog-book-spine::before {
|
|
width: 100%;
|
|
height: 2px;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.blog-book-left,
|
|
.blog-book-right {
|
|
min-height: 500px;
|
|
}
|
|
|
|
.book-page-number {
|
|
bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.blog-book-left .book-page-number,
|
|
.blog-book-right .book-page-number {
|
|
left: 50%;
|
|
right: auto;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.book-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.book-image-thumbnails {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.blog-book-container {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.blog-book-page {
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.book-image-thumbnails {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.book-title {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.book-content-body {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
</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 active">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>Our Blog</h1>
|
|
<p>
|
|
Creative tips, tutorials, and inspiration for your crafting journey
|
|
</p>
|
|
<div class="breadcrumb">
|
|
<a href="/home">Home</a> <span>/</span> <span>Blog</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Blog Content -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<!-- Blog Grid - All Posts with Same Style -->
|
|
<div class="blog-grid" id="blogGrid">
|
|
<div
|
|
class="loading-spinner"
|
|
style="grid-column: 1/-1; margin: 40px auto"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Newsletter -->
|
|
<section
|
|
class="section"
|
|
style="
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--primary-pink-light) 0%,
|
|
var(--primary-pink) 100%
|
|
);
|
|
"
|
|
>
|
|
<div class="container text-center">
|
|
<h2 class="section-title">Never Miss a Post</h2>
|
|
<p class="section-subtitle mb-4">
|
|
Subscribe to our newsletter for the latest creative tips and
|
|
inspiration
|
|
</p>
|
|
<form
|
|
class="newsletter-form"
|
|
id="blogNewsletterForm"
|
|
style="max-width: 500px; margin: 0 auto; display: flex; gap: 12px"
|
|
>
|
|
<input
|
|
type="email"
|
|
id="blogNewsletterEmail"
|
|
placeholder="Enter your email"
|
|
required
|
|
style="
|
|
flex: 1;
|
|
padding: 16px 24px;
|
|
border: none;
|
|
border-radius: 50px;
|
|
font-size: 1rem;
|
|
"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class="btn btn-primary"
|
|
id="blogNewsletterBtn"
|
|
>
|
|
Subscribe
|
|
</button>
|
|
</form>
|
|
</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" 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"
|
|
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"
|
|
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>
|
|
|
|
<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> 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>
|
|
|
|
<div class="footer-bottom">
|
|
<p>© 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>
|
|
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"></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>
|
|
|
|
<!-- Blog Detail View - Book Style -->
|
|
<div class="portfolio-detail" id="blogDetail">
|
|
<header class="portfolio-detail-header">
|
|
<button class="back-btn" id="backToBlog">
|
|
<i class="bi bi-arrow-left"></i>
|
|
Back to Blog
|
|
</button>
|
|
<span id="blogDetailCategory" class="portfolio-detail-category"
|
|
>Blog</span
|
|
>
|
|
</header>
|
|
|
|
<!-- Book Container -->
|
|
<div class="blog-book-container">
|
|
<div class="blog-book">
|
|
<!-- Left Page - Images/Media -->
|
|
<div class="blog-book-page blog-book-left">
|
|
<div class="book-page-inner">
|
|
<div class="book-page-header">
|
|
<i class="bi bi-images"></i>
|
|
<span>Gallery</span>
|
|
</div>
|
|
|
|
<!-- Stacked Images -->
|
|
<div class="book-image-stack" id="bookImageStack"></div>
|
|
|
|
<!-- Video Section -->
|
|
<div
|
|
class="book-video-section"
|
|
id="bookVideoSection"
|
|
style="display: none"
|
|
>
|
|
<div class="book-section-label">
|
|
<i class="bi bi-camera-video"></i>
|
|
<span>Video</span>
|
|
</div>
|
|
<div class="book-video-container" id="bookVideoContainer"></div>
|
|
</div>
|
|
|
|
<!-- Poll Section -->
|
|
<div
|
|
class="book-poll-section"
|
|
id="bookPollSection"
|
|
style="display: none"
|
|
>
|
|
<div class="book-section-label">
|
|
<i class="bi bi-bar-chart-fill"></i>
|
|
<span>Poll</span>
|
|
</div>
|
|
<div class="poll-container">
|
|
<h4 id="bookPollQuestion">Poll Question</h4>
|
|
<div class="poll-options" id="bookPollOptions"></div>
|
|
<div class="poll-footer" id="bookPollFooter">
|
|
<small class="poll-votes">0 votes</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="book-page-number">1</div>
|
|
</div>
|
|
|
|
<!-- Book Spine -->
|
|
<div class="blog-book-spine"></div>
|
|
|
|
<!-- Right Page - Content -->
|
|
<div class="blog-book-page blog-book-right">
|
|
<div class="book-page-inner">
|
|
<div class="book-content-header">
|
|
<div class="blog-detail-date" id="blogDetailDate">
|
|
<i class="bi bi-calendar3"></i>
|
|
<span></span>
|
|
</div>
|
|
<h1 class="book-title" id="blogDetailTitle"></h1>
|
|
</div>
|
|
<div class="book-content-body" id="blogDetailContent">
|
|
<!-- Blog content goes here -->
|
|
</div>
|
|
</div>
|
|
<div class="book-page-number">2</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA Below Book -->
|
|
<div class="blog-book-cta">
|
|
<p>Enjoyed this post? Check out more creative inspiration!</p>
|
|
<a href="/shop" class="btn btn-primary">Shop Supplies</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="/assets/js/mobile-touch-fix.js"></script>
|
|
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
|
|
<script src="/assets/js/customer-auth.js"></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
// Placeholder images for blog posts without images
|
|
const placeholderImages = [
|
|
"https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=600&q=80",
|
|
"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80",
|
|
"https://images.unsplash.com/photo-1513519245088-0e12902e35a6?w=600&q=80",
|
|
"https://images.unsplash.com/photo-1456735190827-d1262f71b8a3?w=600&q=80",
|
|
"https://images.unsplash.com/photo-1452860606245-08befc0ff44b?w=600&q=80",
|
|
"https://images.unsplash.com/photo-1586075010923-2dd4570fb338?w=600&q=80",
|
|
];
|
|
|
|
const getPlaceholderImage = (index) =>
|
|
placeholderImages[index % placeholderImages.length];
|
|
|
|
// Load blog posts
|
|
let allPosts = await API.loadBlogPosts();
|
|
const blogGrid = document.getElementById("blogGrid");
|
|
|
|
// Render ALL blog cards with same style
|
|
if (allPosts.length > 0) {
|
|
blogGrid.innerHTML = allPosts
|
|
.map((post, index) => {
|
|
const date = new Date(post.createdat).toLocaleDateString(
|
|
"en-US",
|
|
{
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
},
|
|
);
|
|
|
|
// Get image - try featuredimage, imageurl, first gallery image, then placeholder
|
|
let blogImage = post.featuredimage || post.imageurl;
|
|
if (!blogImage && post.images) {
|
|
try {
|
|
const imagesArr =
|
|
typeof post.images === "string"
|
|
? JSON.parse(post.images)
|
|
: post.images;
|
|
if (Array.isArray(imagesArr) && imagesArr.length > 0) {
|
|
blogImage = imagesArr[0];
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
if (!blogImage) {
|
|
blogImage = getPlaceholderImage(index);
|
|
}
|
|
|
|
return `
|
|
<article class="blog-card" data-post='${JSON.stringify(
|
|
post,
|
|
).replace(/'/g, "'")}'>
|
|
<div class="blog-card-image">
|
|
<img src="${blogImage}" alt="${post.title}" loading="lazy">
|
|
<div class="blog-card-overlay">
|
|
<span class="read-btn"><i class="bi bi-eye"></i> Read Post</span>
|
|
</div>
|
|
</div>
|
|
<div class="blog-card-info">
|
|
<span class="blog-card-category">Blog</span>
|
|
<h3>${post.title}</h3>
|
|
<div class="blog-date"><i class="bi bi-calendar3"></i> ${date}</div>
|
|
<p>${post.excerpt || ""}</p>
|
|
</div>
|
|
</article>
|
|
`;
|
|
})
|
|
.join("");
|
|
} else {
|
|
blogGrid.innerHTML =
|
|
'<p class="text-center" style="grid-column: 1/-1;">Check back soon for more posts!</p>';
|
|
}
|
|
|
|
// Setup blog detail view
|
|
const detail = document.getElementById("blogDetail");
|
|
const detailTitle = document.getElementById("blogDetailTitle");
|
|
const detailContent = document.getElementById("blogDetailContent");
|
|
const detailDate = document.getElementById("blogDetailDate");
|
|
const backBtn = document.getElementById("backToBlog");
|
|
|
|
// Book layout elements
|
|
const bookImageStack = document.getElementById("bookImageStack");
|
|
|
|
// Video elements
|
|
const videoSection = document.getElementById("bookVideoSection");
|
|
const videoContainer = document.getElementById("bookVideoContainer");
|
|
|
|
// Poll elements
|
|
const pollSection = document.getElementById("bookPollSection");
|
|
const pollQuestion = document.getElementById("bookPollQuestion");
|
|
const pollOptions = document.getElementById("bookPollOptions");
|
|
const pollFooter = document.getElementById("bookPollFooter");
|
|
|
|
let currentMainImage = 0;
|
|
|
|
function openBlogDetail(post) {
|
|
const date = new Date(post.createdat).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
});
|
|
detailTitle.textContent = post.title;
|
|
detailContent.innerHTML =
|
|
post.content || post.excerpt || "No content available.";
|
|
detailDate.querySelector("span").textContent = date;
|
|
|
|
// Handle images for book layout
|
|
let images = [];
|
|
try {
|
|
if (post.images && typeof post.images === "string") {
|
|
images = JSON.parse(post.images);
|
|
} else if (Array.isArray(post.images)) {
|
|
images = post.images;
|
|
}
|
|
} catch (e) {
|
|
images = [];
|
|
}
|
|
|
|
// Add featured image if exists and not in gallery
|
|
const featuredImg = post.featuredimage || post.imageurl;
|
|
if (featuredImg && !images.includes(featuredImg)) {
|
|
images.unshift(featuredImg);
|
|
}
|
|
|
|
// Setup stacked images - all images shown full width
|
|
if (images.length > 0) {
|
|
bookImageStack.innerHTML = images
|
|
.map(
|
|
(img, idx) => `
|
|
<div class="book-stacked-image">
|
|
<img src="${img}" alt="Image ${idx + 1}" loading="lazy">
|
|
</div>
|
|
`,
|
|
)
|
|
.join("");
|
|
} else {
|
|
// No images - show placeholder
|
|
bookImageStack.innerHTML = `
|
|
<div class="book-stacked-image">
|
|
<img src="${placeholderImages[0]}" alt="Blog post">
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Handle video
|
|
if (post.videourl) {
|
|
videoSection.style.display = "block";
|
|
const isYoutube =
|
|
post.videourl.includes("youtube.com") ||
|
|
post.videourl.includes("youtu.be");
|
|
const isVimeo = post.videourl.includes("vimeo.com");
|
|
|
|
if (isYoutube) {
|
|
const videoId = post.videourl.match(
|
|
/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/))([^?&]+)/,
|
|
)?.[1];
|
|
videoContainer.innerHTML = `<iframe src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>`;
|
|
} else if (isVimeo) {
|
|
const videoId = post.videourl.match(/vimeo\.com\/(\d+)/)?.[1];
|
|
videoContainer.innerHTML = `<iframe src="https://player.vimeo.com/video/${videoId}" frameborder="0" allowfullscreen></iframe>`;
|
|
} else {
|
|
videoContainer.innerHTML = `<video controls><source src="${post.videourl}" type="video/mp4"></video>`;
|
|
}
|
|
} else {
|
|
videoSection.style.display = "none";
|
|
videoContainer.innerHTML = "";
|
|
}
|
|
|
|
// Handle poll
|
|
let poll = null;
|
|
try {
|
|
if (post.poll && typeof post.poll === "string") {
|
|
poll = JSON.parse(post.poll);
|
|
} else if (post.poll && typeof post.poll === "object") {
|
|
poll = post.poll;
|
|
}
|
|
} catch (e) {
|
|
poll = null;
|
|
}
|
|
|
|
if (
|
|
poll &&
|
|
poll.question &&
|
|
poll.options &&
|
|
poll.options.length > 0
|
|
) {
|
|
pollSection.style.display = "block";
|
|
pollQuestion.textContent = poll.question;
|
|
const totalVotes = (poll.votes || []).reduce((a, b) => a + b, 0);
|
|
const votedPoll = localStorage.getItem(`poll_${post.id}`);
|
|
|
|
if (votedPoll !== null) {
|
|
// Show results
|
|
pollOptions.innerHTML = poll.options
|
|
.map((opt, idx) => {
|
|
const votes = (poll.votes || [])[idx] || 0;
|
|
const percent =
|
|
totalVotes > 0 ? Math.round((votes / totalVotes) * 100) : 0;
|
|
return `
|
|
<div class="poll-option voted ${Number(votedPoll) === idx ? "selected" : ""}">
|
|
<div class="poll-bar" style="width: ${percent}%"></div>
|
|
<span class="poll-label">${opt}</span>
|
|
<span class="poll-percent">${percent}%</span>
|
|
</div>
|
|
`;
|
|
})
|
|
.join("");
|
|
} else {
|
|
// Show voting options
|
|
pollOptions.innerHTML = poll.options
|
|
.map(
|
|
(opt, idx) => `
|
|
<button class="poll-option" onclick="votePoll('${post.id}', ${idx})">
|
|
<span class="poll-label">${opt}</span>
|
|
</button>
|
|
`,
|
|
)
|
|
.join("");
|
|
}
|
|
pollFooter.innerHTML = `<small class="poll-votes">${totalVotes} vote${totalVotes !== 1 ? "s" : ""}</small>`;
|
|
} else {
|
|
pollSection.style.display = "none";
|
|
}
|
|
|
|
detail.classList.add("open");
|
|
document.body.style.overflow = "hidden";
|
|
detail.scrollTop = 0;
|
|
}
|
|
|
|
// Vote on poll function (global)
|
|
window.votePoll = async function (postId, optionIndex) {
|
|
localStorage.setItem(`poll_${postId}`, optionIndex);
|
|
// Reload the post to show results
|
|
const post = allPosts.find((p) => String(p.id) === String(postId));
|
|
if (post) {
|
|
// Increment vote locally for immediate feedback
|
|
try {
|
|
let poll =
|
|
typeof post.poll === "string"
|
|
? JSON.parse(post.poll)
|
|
: post.poll;
|
|
if (poll && poll.votes) {
|
|
poll.votes[optionIndex] = (poll.votes[optionIndex] || 0) + 1;
|
|
post.poll = JSON.stringify(poll);
|
|
}
|
|
} catch (e) {}
|
|
openBlogDetail(post);
|
|
}
|
|
};
|
|
|
|
function closeBlogDetail() {
|
|
detail.classList.remove("open");
|
|
document.body.style.overflow = "";
|
|
videoContainer.innerHTML = ""; // Stop any playing videos
|
|
}
|
|
|
|
// Click handlers
|
|
document.addEventListener("click", (e) => {
|
|
const card = e.target.closest(".blog-card");
|
|
|
|
if (card) {
|
|
const post = JSON.parse(card.dataset.post.replace(/'/g, "'"));
|
|
openBlogDetail(post);
|
|
}
|
|
});
|
|
|
|
backBtn.addEventListener("click", closeBlogDetail);
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "Escape") closeBlogDetail();
|
|
});
|
|
|
|
// Newsletter form handler
|
|
document
|
|
.getElementById("blogNewsletterForm")
|
|
?.addEventListener("submit", async function (e) {
|
|
e.preventDefault();
|
|
|
|
const emailInput = document.getElementById("blogNewsletterEmail");
|
|
const submitBtn = document.getElementById("blogNewsletterBtn");
|
|
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: "blog" }),
|
|
});
|
|
|
|
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>
|
|
</html>
|