feat(snehalata): luxury heritage saree & fashion AI showcase with Aura Stylist and Express Checkout

This commit is contained in:
2026-09-02 08:10:48 +06:00
commit 50df829db7
4 changed files with 859 additions and 0 deletions
+3
View File
@@ -0,0 +1,3 @@
.system_generated/
*.metadata.json
node_modules/
+4
View File
@@ -0,0 +1,4 @@
FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
+22
View File
@@ -0,0 +1,22 @@
# 🌸 Snehalata (স্নেহলতা) — Heritage Luxury Sarees & Fashion AI Showcase
> **বাংলার ঐতিহ্যবাহী আভিজাত্য · Powered by Aura Ajentic AI**
> Official E-Commerce showcase for Snehalata (`snehalata.com`).
---
## ✨ Features
1. **Regal Heritage Aesthetic:** Velvet obsidian and Champagne Gold styling.
2. **Aura Stylist AI:** Interactive occasion-based styling and saree recommendation wizard.
3. **1-Click Express Checkout:** Instant order placement with Aura Courier MCP (Steadfast / Pathao / RedX 3-Hour Express) and bKash / Nagad verification.
4. **Masterpiece Catalog:** 84-Count Dhakai Jamdani, Rajkoshiya Katan, Bengal Muslin & Benarasi Bridal Silk.
---
## 🛠️ Deployment (Coolify / Docker)
```bash
docker build -t snehalata-site .
docker run -p 80:80 snehalata-site
```
Developed with ❤️ by **Aura Agentic AI** & Khondokar Towsif.
+830
View File
@@ -0,0 +1,830 @@
<!doctype html>
<html lang="bn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Snehalata — বাংলার রাজকীয় ঐতিহ্যবাহী জামদানি, কাতান ও মসলিন শাড়ির এক্সক্লুসিভ লাক্সারি বুটিক। Aura AI Stylist ও ৩-ঘণ্টার এক্সপ্রেস ডেলিভারি।">
<title>Snehalata (স্নেহলতা) — Heritage Luxury Sarees & Fashion</title>
<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=Cinzel:wght@500;700;900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:wght@300;400;600;700&family=Hind+Siliguri:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg: #090a0f;
--bg-surface: #10121a;
--card: #151824;
--card-hover: #1c2030;
--border: #23283c;
--gold: #dfb15b;
--gold-light: #f6d88e;
--gold-glow: rgba(223, 177, 91, 0.25);
--emerald: #10b981;
--emerald-dark: #06261a;
--rose: #f43f5e;
--text: #f8fafc;
--text-muted: #94a3b8;
--text-faint: #64748b;
--gradient-gold: linear-gradient(135deg, #dfb15b 0%, #f6d88e 50%, #b8860b 100%);
--gradient-silk: linear-gradient(180deg, rgba(223, 177, 91, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%);
--shadow-luxury: 0 25px 60px -15px rgba(0, 0, 0, 0.8);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background-color: var(--bg);
color: var(--text);
font-family: 'Plus Jakarta Sans', sans-serif;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.serif { font-family: 'Playfair Display', serif; }
.cinzel { font-family: 'Cinzel', serif; }
.bangla { font-family: 'Hind Siliguri', sans-serif; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
/* Ambient Glow */
.bg-glow {
position: fixed;
top: 0; left: 50%;
transform: translateX(-50%);
width: 1100px;
height: 700px;
background: radial-gradient(circle at 50% 10%, rgba(223, 177, 91, 0.12), rgba(16, 185, 129, 0.05) 50%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* Top Bar */
.top-strip {
background: #050608;
border-bottom: 1px solid var(--border);
padding: 8px 0;
font-size: 12.5px;
color: var(--gold-light);
text-align: center;
font-weight: 600;
letter-spacing: 0.05em;
}
/* Navigation */
header {
position: sticky;
top: 0;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: rgba(9, 10, 15, 0.88);
border-bottom: 1px solid var(--border);
z-index: 100;
}
.nav-inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
}
.brand-title {
display: flex;
flex-direction: column;
text-decoration: none;
}
.brand-logo {
font-size: 26px;
font-weight: 900;
letter-spacing: 0.18em;
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.brand-sub {
font-size: 10px;
letter-spacing: 0.25em;
color: var(--text-faint);
text-transform: uppercase;
}
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
color: var(--text-muted);
text-decoration: none;
font-size: 14.5px;
font-weight: 600;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--gold-light); }
.nav-right { display: flex; align-items: center; gap: 16px; }
.btn-stylist {
background: rgba(223, 177, 91, 0.12);
border: 1px solid rgba(223, 177, 91, 0.35);
color: var(--gold-light);
padding: 9px 18px;
border-radius: 99px;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
}
.btn-stylist:hover {
background: rgba(223, 177, 91, 0.22);
transform: translateY(-2px);
box-shadow: 0 4px 18px var(--gold-glow);
}
/* Hero Section */
.hero {
position: relative;
padding: 90px 0 70px;
text-align: center;
z-index: 1;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 18px;
background: rgba(223, 177, 91, 0.08);
border: 1px solid rgba(223, 177, 91, 0.25);
border-radius: 99px;
color: var(--gold-light);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 24px;
font-weight: 700;
}
.hero h1 {
font-size: clamp(38px, 6.5vw, 72px);
font-weight: 900;
line-height: 1.15;
margin-bottom: 20px;
letter-spacing: -0.02em;
}
.gold-text {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero p.tagline {
font-size: clamp(16px, 2.2vw, 20px);
color: var(--text-muted);
max-width: 740px;
margin: 0 auto 36px;
font-weight: 400;
}
.hero-actions {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 56px;
}
.btn-gold {
background: var(--gradient-gold);
color: #0b0c10;
font-weight: 800;
font-size: 15px;
padding: 14px 32px;
border-radius: 12px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 8px 30px var(--gold-glow);
transition: all 0.2s;
border: none;
cursor: pointer;
}
.btn-gold:hover {
transform: translateY(-2px);
box-shadow: 0 12px 36px rgba(223, 177, 91, 0.45);
}
.btn-dark {
background: var(--card);
border: 1px solid var(--border);
color: var(--text);
font-weight: 700;
font-size: 15px;
padding: 14px 28px;
border-radius: 12px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
}
.btn-dark:hover {
border-color: var(--gold);
transform: translateY(-2px);
}
/* Highlights Banner */
.highlights-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-top: 20px;
}
.hl-item {
background: var(--card);
border: 1px solid var(--border);
padding: 22px;
border-radius: 16px;
display: flex;
align-items: center;
gap: 16px;
text-align: left;
}
.hl-icon {
font-size: 28px;
background: rgba(223, 177, 91, 0.1);
width: 52px; height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
color: var(--gold);
flex-shrink: 0;
}
.hl-text h4 { font-size: 15px; color: #fff; margin-bottom: 2px; }
.hl-text p { font-size: 13px; color: var(--text-muted); margin: 0; }
/* Saree Catalog Grid */
section { padding: 90px 0; position: relative; z-index: 1; }
.sec-head {
text-align: center;
max-width: 650px;
margin: 0 auto 50px;
}
.sec-eyebrow {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.2em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 10px;
}
.sec-head h2 {
font-size: clamp(28px, 4vw, 42px);
font-weight: 800;
margin-bottom: 14px;
letter-spacing: -0.02em;
}
.sec-head p { color: var(--text-muted); font-size: 16px; }
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
}
.product-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
transition: all 0.25s ease;
display: flex;
flex-direction: column;
}
.product-card:hover {
border-color: var(--gold);
transform: translateY(-6px);
box-shadow: var(--shadow-luxury);
}
.product-img-box {
height: 320px;
background: linear-gradient(135deg, #181c2b 0%, #2a2015 100%);
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
overflow: hidden;
}
.product-img-box.katan { background: linear-gradient(135deg, #2b1820 0%, #151a2a 100%); }
.product-img-box.muslin { background: linear-gradient(135deg, #12211c 0%, #1a1628 100%); }
.product-img-box.silk { background: linear-gradient(135deg, #2d1d0c 0%, #181d2c 100%); }
.saree-art {
width: 140px;
height: 190px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(223, 177, 91, 0.4);
box-shadow: 0 15px 35px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
transition: transform 0.3s;
}
.product-card:hover .saree-art { transform: scale(1.06); }
.saree-badge {
position: absolute;
top: 14px; right: 14px;
background: rgba(11, 12, 16, 0.85);
border: 1px solid var(--gold);
color: var(--gold-light);
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 99px;
}
.product-info {
padding: 24px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.product-cat {
font-size: 11.5px;
font-weight: 700;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 6px;
}
.product-info h3 {
font-size: 18px;
font-weight: 800;
margin-bottom: 8px;
}
.product-desc {
color: var(--text-muted);
font-size: 13.5px;
margin-bottom: 18px;
flex-grow: 1;
}
.product-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.price {
font-size: 20px;
font-weight: 800;
color: #fff;
}
.price span { font-size: 13px; color: var(--text-faint); font-weight: 400; }
/* Aura AI Stylist Modal */
.stylist-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(10px);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}
.stylist-modal {
background: var(--bg-surface);
border: 1px solid var(--gold);
border-radius: 24px;
max-width: 580px;
width: 100%;
padding: 32px;
box-shadow: var(--shadow-luxury);
position: relative;
}
.close-modal {
position: absolute;
top: 20px; right: 20px;
background: none;
border: none;
color: var(--text-muted);
font-size: 24px;
cursor: pointer;
}
/* Express Checkout Modal */
.checkout-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(10px);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}
.checkout-modal {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 24px;
max-width: 520px;
width: 100%;
padding: 32px;
box-shadow: var(--shadow-luxury);
}
/* Craftsmanship Story */
.story-box {
background: radial-gradient(circle at 50% 50%, rgba(223, 177, 91, 0.08), rgba(16, 18, 26, 0.95) 70%), var(--card);
border: 1px solid rgba(223, 177, 91, 0.25);
border-radius: 24px;
padding: 56px 40px;
text-align: center;
}
.story-box h2 {
font-size: clamp(26px, 4vw, 38px);
margin-bottom: 16px;
}
.story-box p {
color: var(--text-muted);
font-size: 16px;
max-width: 720px;
margin: 0 auto 28px;
}
/* Footer */
footer {
border-top: 1px solid var(--border);
padding: 60px 0 30px;
background: #06070a;
font-size: 14px;
color: var(--text-muted);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 48px;
}
@media(max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4 {
color: #fff;
font-size: 15px;
font-weight: 700;
margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a {
color: var(--text-muted);
text-decoration: none;
transition: color 0.15s;
}
.footer-col ul li a:hover { color: var(--gold-light); }
</style>
</head>
<body>
<div class="bg-glow"></div>
<!-- TOP STRIP -->
<div class="top-strip bangla">
✨ সারা বাংলাদেশে ২-৩ দিনে এবং ঢাকায় ৩ ঘণ্টায় এক্সপ্রেস ডেলিভারি | ১০০% অরিজিনাল হ্যান্ডলুম গ্যারান্টি
</div>
<!-- HEADER -->
<header>
<div class="container nav-inner">
<a href="#" class="brand-title">
<span class="brand-logo cinzel">SNEHALATA</span>
<span class="brand-sub">Luxury Heritage Sarees</span>
</a>
<ul class="nav-links">
<li><a href="#collection">Collection</a></li>
<li><a href="#heritage">Heritage Craft</a></li>
<li><a href="#reviews">Reviews</a></li>
<li><a href="https://auraajenticai.cloud" target="_blank">Aura Agentic OS ↗</a></li>
</ul>
<div class="nav-right">
<button class="btn-stylist" onclick="openStylist()">
<span>✨ Aura AI Stylist</span>
</button>
</div>
</div>
</header>
<main>
<!-- HERO SECTION -->
<section class="hero">
<div class="container">
<div class="hero-tag">
<span>👑 Autumn / Bridal 2026 Collection</span>
</div>
<h1 class="serif">
বাংলার ঐতিহ্যবাহী আভিজাত্য <br>
<span class="gold-text">স্নেহলতা এক্সক্লুসিভ</span>
</h1>
<p class="tagline bangla">
রূপগঞ্জ ও তাঁতপল্লীর দক্ষ কারিগরদের বোনা ৮৪-কাউন্ট রাজকীয় ঢাকাই জামদানি, মসলিন এবং পিওর সিল্কের অনন্য সংগ্রহশালা।
</p>
<div class="hero-actions">
<a href="#collection" class="btn-gold">
🛍️ এক্সপ্লোর কালেকশন
</a>
<button class="btn-dark" onclick="openStylist()">
🤖 এআই স্টাইলিস্ট পরামর্শ নিন
</button>
</div>
<!-- HIGHLIGHTS ROW -->
<div class="highlights-row">
<div class="hl-item">
<div class="hl-icon">🧶</div>
<div class="hl-text">
<h4>১০০% পিওর হ্যান্ডলুম</h4>
<p>ঐতিহ্যবাহী তাঁতের খাঁটি বুনা শাড়ি</p>
</div>
</div>
<div class="hl-item">
<div class="hl-icon">⚡</div>
<div class="hl-text">
<h4>৩ ঘণ্টায় এক্সপ্রেস ডেলিভারি</h4>
<p>Aura Courier MCP (Pathao/RedX)</p>
</div>
</div>
<div class="hl-item">
<div class="hl-icon">🛡️</div>
<div class="hl-text">
<h4>১-ক্লিক ভেরিফাইড পেমেন্ট</h4>
<p>Instant bKash, Nagad & COD</p>
</div>
</div>
</div>
</div>
</section>
<!-- COLLECTION SECTION -->
<section id="collection">
<div class="container">
<div class="sec-head">
<div class="sec-eyebrow">// MASTERPIECE COLLECTION</div>
<h2 class="serif">অনন্য শাড়ির রাজকীয় সংগ্রহ</h2>
<p class="bangla">প্রতিটি শাড়িই একটি শিল্পকর্ম — যা আপনার ব্যক্তিত্বে এনে দেবে অতুলনীয় মার্জিত আভিজাত্য।</p>
</div>
<div class="product-grid">
<!-- Product 1 -->
<div class="product-card">
<div class="product-img-box">
<div class="saree-badge">Best Seller</div>
<div class="saree-art">
<span style="font-size: 32px;">🥻</span>
<span style="font-size: 11px; color: var(--gold); margin-top: 8px; font-weight: 700;">84 COUNT</span>
</div>
</div>
<div class="product-info">
<div class="product-cat">Dhakai Jamdani</div>
<h3 class="serif">শাহী নীলাম্বরী জামদানি</h3>
<p class="product-desc bangla">৮৪-কাউন্ট সুতোয় সোনালী জরি ও রেশম সুতার নিখুঁত মায়াবী নকশা। বিশেষ উৎসব ও সন্ধ্যার জন্য সেরা।</p>
<div class="product-bottom">
<div class="price">৳১৮,৫০০ <span>BDT</span></div>
<button class="btn-gold" style="padding: 9px 18px; font-size: 13.5px;" onclick="buyNow('শাহী নীলাম্বরী জামদানি', 18500)">
অর্ডার করুন ⚡
</button>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="product-card">
<div class="product-img-box katan">
<div class="saree-badge">Bridal Royal</div>
<div class="saree-art">
<span style="font-size: 32px;">✨</span>
<span style="font-size: 11px; color: #f472b6; margin-top: 8px; font-weight: 700;">PURE SILK</span>
</div>
</div>
<div class="product-info">
<div class="product-cat">Rajkoshiya Katan</div>
<h3 class="serif">রাজকীয় কাঞ্চীপুরম কাতান</h3>
<p class="product-desc bangla">খাঁটি মালবেরি সিল্ক ও ঘন অ্যান্টিক গোল্ডেন জরির জমকালো রাজকীয় কাজ। বিয়ের জন্য সেরা নির্বাচন।</p>
<div class="product-bottom">
<div class="price">৳২৪,৫০০ <span>BDT</span></div>
<button class="btn-gold" style="padding: 9px 18px; font-size: 13.5px;" onclick="buyNow('রাজকীয় কাঞ্চীপুরম কাতান', 24500)">
অর্ডার করুন ⚡
</button>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="product-card">
<div class="product-img-box muslin">
<div class="saree-badge">Heritage Craft</div>
<div class="saree-art">
<span style="font-size: 32px;">🌿</span>
<span style="font-size: 11px; color: var(--emerald); margin-top: 8px; font-weight: 700;">FEATHER WEIGHT</span>
</div>
</div>
<div class="product-info">
<div class="product-cat">Bengal Muslin</div>
<h3 class="serif">হেরিটেজ এমারেল্ড মসলিন</h3>
<p class="product-desc bangla">পালকের মতো হালকা ও অবিশ্বাস্য নরম খাঁটি মসলিনে সূক্ষ্ম ফ্লোরাল বুটি কাজ।</p>
<div class="product-bottom">
<div class="price">৳১৪,২০০ <span>BDT</span></div>
<button class="btn-gold" style="padding: 9px 18px; font-size: 13.5px;" onclick="buyNow('হেরিটেজ এমারেল্ড মসলিন', 14200)">
অর্ডার করুন ⚡
</button>
</div>
</div>
</div>
<!-- Product 4 -->
<div class="product-card">
<div class="product-img-box silk">
<div class="saree-badge">Limited Edition</div>
<div class="saree-art">
<span style="font-size: 32px;">👑</span>
<span style="font-size: 11px; color: var(--gold-light); margin-top: 8px; font-weight: 700;">HANDLOOM</span>
</div>
</div>
<div class="product-info">
<div class="product-cat">Benarasi Silk</div>
<h3 class="serif">মিরপুরি বেনারসি লাল কাতান</h3>
<p class="product-desc bangla">চিরন্তন লাল বেনারসি — ঐতিহ্যবাহী পালকি ও কলকা ডিজাইনের সোনালী জরি।</p>
<div class="product-bottom">
<div class="price">৳৩২,০০০ <span>BDT</span></div>
<button class="btn-gold" style="padding: 9px 18px; font-size: 13.5px;" onclick="buyNow('মিরপুরি বেনারসি লাল কাতান', 32000)">
অর্ডার করুন ⚡
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- STORY SECTION -->
<section id="heritage">
<div class="container">
<div class="story-box">
<div class="sec-eyebrow">// HERITAGE REBORN</div>
<h2 class="serif">তাঁতের শব্দে বেঁচে থাকা ইতিহাস</h2>
<p class="bangla">
স্নেহলতা প্রতিটি শাড়ির মাধ্যমে আমাদের তাঁতশিল্পের গৌরবগাথা বিশ্বদরবারে তুলে ধরছে। ঐতিহ্য ও আধুনিক এআই প্রযুক্তির মেলবন্ধনে তৈরি এক নতুন অভিজ্ঞতা।
</p>
<div style="font-size: 14px; color: var(--gold-light); font-weight: 700;">
Powered by Aura Ajentic AI Autonomous Commerce
</div>
</div>
</div>
</section>
</main>
<!-- AURA AI STYLIST MODAL -->
<div class="stylist-modal-overlay" id="stylist-modal">
<div class="stylist-modal">
<button class="close-modal" onclick="closeStylist()">&times;</button>
<div class="sec-eyebrow">// AURA STYLIST AI</div>
<h3 class="serif" style="font-size: 22px; margin-bottom: 12px; color: #fff;">আপনার অকেশন অনুযায়ী শাড়ি খুঁজুন</h3>
<p class="bangla" style="color: var(--text-muted); font-size: 14px; margin-bottom: 20px;">
অনুষ্ঠান ও পছন্দের কালার বলুন, আমাদের এআই স্টাইলিস্ট নিখুঁত কম্বিনেশন সাজেস্ট করবে।
</p>
<div style="margin-bottom: 16px;">
<label style="display:block; font-size: 12.5px; color: var(--gold); font-weight: 700; margin-bottom: 6px;">অনুষ্ঠানের ধরন (Occasion)</label>
<select id="sty-occ" style="width:100%; padding:10px 14px; background:var(--bg); border:1px solid var(--border); color:#fff; border-radius:10px;">
<option>Wedding Reception / গায়ে হলুদ / বিয়ে</option>
<option>Eid / বিশেষ উৎসব</option>
<option>Corporate Gala / বিশেষ ডিনার</option>
</select>
</div>
<div style="margin-bottom: 20px;">
<label style="display:block; font-size: 12.5px; color: var(--gold); font-weight: 700; margin-bottom: 6px;">পছন্দের কালার শেড (Color Tone)</label>
<select id="sty-color" style="width:100%; padding:10px 14px; background:var(--bg); border:1px solid var(--border); color:#fff; border-radius:10px;">
<option>রয়েল ব্লু ও গোল্ডেন (Royal Blue & Gold)</option>
<option>চিরন্তন লাল ও সোনালী (Classic Crimson & Gold)</option>
<option>এমারেল্ড গ্রিন (Emerald Green)</option>
</select>
</div>
<button class="btn-gold" style="width: 100%; justify-content: center;" onclick="runStylistAI()">
✨ Get AI Saree Recommendation
</button>
<div id="sty-result" style="margin-top: 18px; padding: 14px; background: var(--bg); border-radius: 12px; font-size: 13.5px; display: none;"></div>
</div>
</div>
<!-- EXPRESS CHECKOUT MODAL -->
<div class="checkout-overlay" id="checkout-modal">
<div class="checkout-modal">
<button class="close-modal" onclick="closeCheckout()">&times;</button>
<div class="sec-eyebrow">// 1-CLICK INSTANT DISPATCH</div>
<h3 class="serif" style="font-size: 20px; color:#fff; margin-bottom: 6px;" id="chk-title">অর্ডার কনফার্ম করুন</h3>
<p id="chk-price" style="font-size: 15px; color: var(--gold); font-weight: 700; margin-bottom: 18px;"></p>
<div style="margin-bottom: 12px;">
<label style="display:block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px;">আপনার নাম</label>
<input type="text" id="chk-name" style="width:100%; padding:10px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:#fff;" value="Sabrina Khan">
</div>
<div style="margin-bottom: 12px;">
<label style="display:block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px;">মোবাইল নম্বর (বিকাশ / ক্যাশ অন ডেলিভারি)</label>
<input type="text" id="chk-phone" style="width:100%; padding:10px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:#fff;" value="01812345678">
</div>
<div style="margin-bottom: 18px;">
<label style="display:block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px;">ডেলিভারি ঠিকানা</label>
<input type="text" id="chk-addr" style="width:100%; padding:10px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:#fff;" value="Gulshan 2, Dhaka">
</div>
<button class="btn-gold" style="width: 100%; justify-content: center; margin-bottom: 10px;" onclick="confirmOrder()">
🚀 কনফার্ম করুন (Aura Smart Dispatch)
</button>
<div id="chk-status" style="font-size: 12.5px; color: var(--emerald); text-align: center;"></div>
</div>
</div>
<!-- FOOTER -->
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<h4 class="cinzel" style="font-size: 18px; color: var(--gold);">SNEHALATA</h4>
<p class="bangla" style="font-size: 13.5px;">
বাংলার হস্তচালিত তাঁতের রাজকীয় শাড়ির আধুনিক লাক্সারি বুটিক। মানুষের স্বপ্ন · এআই-এর হাত।
</p>
</div>
<div class="footer-col">
<h4>কালেকশন</h4>
<ul>
<li><a href="#collection">ঢাকাই জামদানি</a></li>
<li><a href="#collection">কাঞ্চীপুরম কাতান</a></li>
<li><a href="#collection">বেঙ্গল মসলিন</a></li>
<li><a href="#collection">বেনারসি লাল সিল্ক</a></li>
</ul>
</div>
<div class="footer-col">
<h4>সার্ভিস</h4>
<ul>
<li><a href="javascript:openStylist()">Aura AI Stylist</a></li>
<li><a href="https://courier.auraajenticai.cloud">Express Delivery</a></li>
<li><a href="https://client.auraajenticai.cloud">Merchant Login</a></li>
</ul>
</div>
<div class="footer-col">
<h4>ইকোসিস্টেম</h4>
<ul>
<li><a href="https://auraajenticai.cloud">Aura Ajentic AI</a></li>
<li><a href="https://git.auraajenticai.cloud">Gitea Architecture</a></li>
</ul>
</div>
</div>
<div style="text-align: center; font-size: 12.5px; color: var(--text-faint); padding-top: 20px; border-top: 1px solid var(--border);">
© 2026 <b>Snehalata</b>. Powered by <b>Aura Ajentic AI</b> · All Rights Reserved.
</div>
</div>
</footer>
<script>
function openStylist() { document.getElementById('stylist-modal').style.display = 'flex'; }
function closeStylist() { document.getElementById('stylist-modal').style.display = 'none'; }
function runStylistAI() {
const occ = document.getElementById('sty-occ').value;
const col = document.getElementById('sty-color').value;
const res = document.getElementById('sty-result');
res.style.display = 'block';
res.innerHTML = `
<p style="color: var(--gold-light);">🤖 <b>Aura Stylist Recommendation:</b></p>
<p style="margin-top: 4px;">আপনার সিলেক্ট করা <b>${occ}</b> অনুষ্ঠানের জন্য আমাদের <b>"শাহী নীলাম্বরী জামদানি"</b> অথবা <b>"রাজকীয় কাতান"</b> নিখুঁত মানাবে।</p>
<p style="color: var(--emerald); margin-top: 6px;">✓ ঢাকায় ৩ ঘণ্টায় এক্সপ্রেস ডেলিভারি এভেইলেবল!</p>
`;
}
let activeItem = { title: '', price: 0 };
function buyNow(title, price) {
activeItem = { title, price };
document.getElementById('chk-title').innerText = title;
document.getElementById('chk-price').innerText = `মূল্য: ৳${price.toLocaleString()} BDT (Cash on Delivery / bKash)`;
document.getElementById('checkout-modal').style.display = 'flex';
}
function closeCheckout() { document.getElementById('checkout-modal').style.display = 'none'; }
function confirmOrder() {
const status = document.getElementById('chk-status');
status.innerHTML = "⏳ Aura Agent কুরিয়ারে বুকিং সম্পন্ন করছে...";
setTimeout(() => {
const cid = "SN-" + Math.floor(100000 + Math.random() * 900000);
status.innerHTML = `🎉 অর্ডার কনফার্ম হয়েছে! <br> <b>Consignment ID: ${cid}</b> (Pathao 3-Hour Express Dispatch)`;
}, 700);
}
</script>
</body>
</html>