FreeHost — Site Dashboard

আপনার আইডিয়াকে লাইভ ওয়েবসাইটে রূপ দিন

HTML কোড যোগ করুন, প্রকাশ করুন এবং একটি শেয়ারযোগ্য লিংকে আপনার সাইট দেখুন। সহজ, দ্রুত ও এক জায়গা থেকেই পরিচালনা করুন।

1মোট ওয়েবসাইট

1প্রকাশিত সাইট

HTMLসাপোর্টেড ফরম্যাট

islam সম্পাদনা

HTML কোড

<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#123c2a">
<title>খেজুর ঘর | Premium Dates Store</title>

/* Announcement */
.announcement{
  background:var(--green);color:#fff;text-align:center;
  padding:9px 12px;font-size:13px;letter-spacing:.2px
}
.announcement span{color:#f4d58a;font-weight:600}

/* Header */
header{
  background:#fff;position:sticky;top:0;z-index:50;
  box-shadow:0 3px 20px rgba(0,0,0,.04)
}
.nav{
  min-height:78px;display:flex;align-items:center;
  justify-content:space-between;gap:22px
}
.logo{display:flex;align-items:center;gap:10px}
.logo-icon{
  width:45px;height:45px;border-radius:14px;
  background:var(--green);color:var(--gold);
  display:grid;place-items:center;font-size:25px
}
.logo-name{font-size:22px;font-weight:700;color:var(--green);line-height:1.2}
.logo-sub{font-size:10px;color:var(--muted);letter-spacing:1.5px}
.nav-links{display:flex;align-items:center;gap:28px;font-size:14px}
.nav-links a:hover{color:#a77820}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn{
  border:1px solid #e9e9e2;background:#fff;border-radius:12px;
  width:43px;height:43px;display:grid;place-items:center;
  font-size:19px;position:relative
}
.cart-count{
  position:absolute;right:-5px;top:-6px;
  background:var(--gold);color:#183724;
  min-width:19px;height:19px;border-radius:20px;
  display:grid;place-items:center;font-size:11px;font-weight:700
}
.menu-btn{display:none}

/* Hero */
.hero{padding:48px 0 55px}
.hero-card{
  min-height:490px;border-radius:28px;overflow:hidden;
  background:linear-gradient(100deg,rgba(10,43,29,.97) 0%,rgba(14,53,36,.90) 48%,rgba(14,53,36,.2) 100%),
  url('https://images.unsplash.com/photo-1596591606975-97ee5cef3a1e?auto=format&fit=crop&w=1800&q=85') center/cover;
  display:flex;align-items:center;padding:65px;
  color:#fff;position:relative
}
.hero-content{max-width:560px;position:relative;z-index:1}
.eyebrow{
  color:#f2d18b;text-transform:uppercase;
  letter-spacing:2px;font-size:12px;font-weight:600;
  display:flex;align-items:center;gap:10px;margin-bottom:20px
}
.eyebrow:before{content:"";width:30px;height:1px;background:var(--gold)}
.hero h1{font-size:clamp(38px,5vw,65px);line-height:1.22;margin-bottom:20px}
.hero h1 span{color:#e7bd66}
.hero p{font-size:16px;line-height:1.9;color:#e0e8e1;max-width:460px}
.hero-buttons{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}
.btn{
  border:0;border-radius:10px;padding:13px 23px;
  display:inline-flex;align-items:center;justify-content:center;
  gap:9px;font-weight:600;transition:.2s
}
.btn-primary{background:var(--gold);color:#173421}
.btn-primary:hover{background:#edc96f;transform:translateY(-2px)}
.btn-outline{border:1px solid #ffffff80;color:#fff;background:transparent}
.btn-outline:hover{background:#ffffff15}
.hero-note{margin-top:25px;color:#d5dfd6;font-size:12px}

/* Benefits */
.benefits{padding:0 0 65px}
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.benefit{
  background:#fff;border:1px solid #efeee7;border-radius:15px;
  padding:23px 17px;display:flex;align-items:center;gap:13px
}
.benefit-icon{
  flex-shrink:0;width:45px;height:45px;border-radius:13px;
  display:grid;place-items:center;background:#edf4eb;font-size:21px
}
.benefit h3{font-size:15px;margin-bottom:3px}
.benefit p{font-size:12px;color:var(--muted)}

/* Section */
.section{padding:35px 0 75px}
.section-head{
  display:flex;align-items:end;justify-content:space-between;
  gap:20px;margin-bottom:30px
}
.section-kicker{color:#a77820;font-size:12px;font-weight:700;letter-spacing:1.5px}
.section-title{font-size:clamp(27px,3vw,37px);color:var(--green);margin-top:5px}
.section-desc{color:var(--muted);font-size:14px;margin-top:7px}
.text-link{color:var(--green);font-size:14px;font-weight:600;white-space:nowrap}
.text-link:hover{color:#a77820}

/* Categories */
.category-list{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:27px}
.category-btn{
  padding:9px 20px;border:1px solid #e5e5dc;border-radius:30px;
  background:#fff;color:#5e665f;font-size:13px
}
.category-btn.active,.category-btn:hover{
  background:var(--green);border-color:var(--green);color:#fff
}
.shop-tools{display:flex;gap:12px;align-items:center;margin-bottom:25px}
.search-box{
  flex:1;position:relative
}
.search-box input{
  width:100%;border:1px solid #e5e5dc;border-radius:11px;
  background:#fff;padding:13px 16px 13px 43px;outline:none
}
.search-box input:focus{border-color:var(--green)}
.search-icon{position:absolute;left:15px;top:12px;font-size:17px}
.sort-select{
  border:1px solid #e5e5dc;background:#fff;border-radius:11px;
  padding:12px;outline:none;max-width:190px
}

/* Product cards */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.product-card{
  background:#fff;border:1px solid #eeeee7;border-radius:17px;
  overflow:hidden;transition:.25s;position:relative
}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.product-image{height:225px;position:relative;overflow:hidden;background:#f1eadb}
.product-image img{
  width:100%;height:100%;object-fit:cover;transition:transform .4s
}
.product-card:hover .product-image img{transform:scale(1.06)}
.product-badge{
  position:absolute;top:13px;left:13px;
  padding:5px 10px;border-radius:6px;
  background:#e9c778;color:#3e3016;font-size:11px;font-weight:700
}
.product-info{padding:19px}
.product-category{font-size:11px;color:#9b782f;margin-bottom:6px}
.product-info h3{font-size:19px;color:var(--green);margin-bottom:5px}
.product-desc{font-size:12px;color:var(--muted);line-height:1.7;min-height:42px}
.product-bottom{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-top:18px
}
.price{font-size:20px;font-weight:700;color:var(--green)}
.old-price{font-size:12px;color:#999;text-decoration:line-through;margin-left:5px}
.unit{font-size:11px;color:var(--muted);font-weight:400}
.add-btn{
  border:0;background:var(--green);color:#fff;
  width:42px;height:42px;border-radius:11px;font-size:22px;
  transition:.2s
}
.add-btn:hover{background:var(--gold);color:var(--green)}
.empty-state{grid-column:1/-1;text-align:center;padding:50px 10px;color:var(--muted)}

/* Promo */
.promo{padding:5px 0 80px}
.promo-card{
  border-radius:22px;background:#eee5d2;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;align-items:center
}
.promo-content{padding:45px}
.promo-content h2{font-size:clamp(27px,3vw,39px);color:var(--green);line-height:1.4;margin:12px 0}
.promo-content p{font-size:14px;color:#666f62;line-height:1.9}
.promo-content .btn{margin-top:23px}
.promo-image{height:350px}
.promo-image img{width:100%;height:100%;object-fit:cover}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}
.about-image{height:400px;border-radius:22px;overflow:hidden}
.about-image img{width:100%;height:100%;object-fit:cover}
.about-copy h2{font-size:35px;color:var(--green);line-height:1.4;margin:12px 0}
.about-copy p{color:var(--muted);line-height:1.9;font-size:14px}
.about-points{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:25px}
.about-point{font-size:13px;font-weight:600}
.about-point span{color:#b28734;margin-right:7px}

/* Reviews */
.reviews{background:#f0eee5;padding:65px 0}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review-card{background:#fff;padding:25px;border-radius:15px}
.stars{color:#c28d26;letter-spacing:2px}
.review-card p{font-size:14px;line-height:1.8;color:#656c65;margin:13px 0 18px}
.review-user{font-weight:700;font-size:14px}
.review-user small{display:block;color:#999;font-weight:400;margin-top:3px}

/* Newsletter */
.newsletter{padding:65px 0}
.newsletter-box{
  background:var(--green);border-radius:22px;padding:40px;
  display:flex;align-items:center;justify-content:space-between;gap:25px;color:#fff
}
.newsletter h2{font-size:27px;margin-bottom:7px}
.newsletter p{font-size:13px;color:#d0ddd2}
.newsletter-form{display:flex;gap:8px;width:min(440px,100%)}
.newsletter-form input{
  flex:1;min-width:0;padding:13px;border:0;border-radius:9px;outline:none
}
.newsletter-form button{border:0;border-radius:9px;padding:12px 18px;background:var(--gold);font-weight:700}

/* Footer */
footer{background:#0c2d20;color:#fff;padding:55px 0 20px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:35px}
.footer-brand p{font-size:13px;line-height:1.9;color:#c0cec2;margin-top:15px;max-width:280px}
.footer-col h3{font-size:16px;margin-bottom:17px;color:#f0d28e}
.footer-col a,.footer-col p{display:block;color:#c0cec2;font-size:13px;margin:10px 0;line-height:1.8}
.footer-col a:hover{color:#f0d28e}
.footer-bottom{
  border-top:1px solid #ffffff20;margin-top:40px;padding-top:20px;
  display:flex;justify-content:space-between;gap:15px;
  color:#a9b9ac;font-size:12px
}

/* Cart drawer */
.overlay{
  position:fixed;inset:0;background:#0008;z-index:100;
  opacity:0;visibility:hidden;transition:.25s
}
.overlay.show{opacity:1;visibility:visible}
.cart-drawer{
  position:fixed;right:-450px;top:0;width:min(430px,100%);
  height:100dvh;background:#fff;z-index:101;
  display:flex;flex-direction:column;transition:.3s;
  box-shadow:-10px 0 40px #0001
}
.cart-drawer.open{right:0}
.drawer-head{padding:22px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
.drawer-head h2{color:var(--green);font-size:23px}
.close-btn{border:0;background:#f2f2ed;width:37px;height:37px;border-radius:10px;font-size:22px}
.cart-items{padding:18px;overflow:auto;flex:1}
.cart-empty{text-align:center;padding:60px 15px;color:#888}
.cart-item{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid #eee}
.cart-item img{width:78px;height:78px;object-fit:cover;border-radius:10px}
.cart-item-info{flex:1}
.cart-item-info h4{font-size:15px;color:var(--green)}
.cart-item-info p{font-size:13px;margin:4px 0 9px}
.quantity{display:flex;align-items:center;gap:10px}
.quantity button{width:27px;height:27px;border:1px solid #ddd;background:#fff;border-radius:6px}
.remove-btn{border:0;background:none;color:#a44;font-size:12px;margin-top:7px}
.drawer-foot{padding:20px;border-top:1px solid #eee}
.total-line{display:flex;justify-content:space-between;margin-bottom:10px;font-size:14px}
.total-line.grand{font-size:20px;font-weight:700;color:var(--green);padding-top:12px;border-top:1px dashed #ddd}
.checkout-btn{width:100%;margin-top:12px}
.checkout-btn:disabled{opacity:.5;cursor:not-allowed}

/* Checkout modal */
.modal{
  position:fixed;inset:0;background:#0008;z-index:120;
  display:none;align-items:center;justify-content:center;padding:15px
}
.modal.show{display:flex}
.modal-box{
  background:#fff;border-radius:18px;padding:28px;
  width:min(540px,100%);max-height:90dvh;overflow:auto
}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.modal-head h2{color:var(--green);font-size:24px}
.form-group{margin-bottom:15px}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.form-group input,.form-group textarea,.form-group select{
  width:100%;border:1px solid #ddd;border-radius:9px;
  padding:12px;outline:none;background:#fff
}
.form-group input:focus,.form-group textarea:focus{border-color:var(--green)}
.form-group textarea{resize:vertical;min-height:75px}
.form-note{font-size:12px;color:#777;line-height:1.7;margin:15px 0}
#orderResult{display:none;background:#edf5eb;padding:15px;border-radius:10px;margin-top:15px;font-size:13px;line-height:1.8;white-space:pre-wrap}

/* Toast */
.toast{
  position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);
  background:#153d2b;color:#fff;padding:13px 22px;border-radius:10px;
  z-index:200;opacity:0;pointer-events:none;transition:.25s;
  box-shadow:var(--shadow);font-size:14px;white-space:nowrap
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Responsive */
@media(max-width:950px){
  .nav-links{gap:15px}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .benefit-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .hero-card{padding:45px;min-height:440px}
}
@media(max-width:650px){
  .announcement{font-size:11px}
  .nav{min-height:68px}
  .logo-name{font-size:19px}
  .logo-icon{width:39px;height:39px}
  .menu-btn{display:grid}
  .nav-links{
    display:none;position:absolute;top:68px;left:0;right:0;
    background:#fff;padding:20px 5%;border-top:1px solid #eee;
    flex-direction:column;align-items:flex-start;gap:18px
  }
  .nav-links.show{display:flex}
  .nav-actions{gap:7px}
  .icon-btn{width:39px;height:39px}
  .hero{padding:25px 0 40px}
  .hero-card{
    min-height:480px;padding:30px 24px;
    background-position:60% center;
    background-image:linear-gradient(90deg,rgba(10,43,29,.96),rgba(10,43,29,.72)),
    url('https://images.unsplash.com/photo-1596591606975-97ee5cef3a1e?auto=format&fit=crop&w=1000&q=80')
  }
  .hero h1{font-size:39px}
  .hero p{font-size:14px}
  .hero-buttons .btn{padding:12px 16px;font-size:13px}
  .benefits{padding-bottom:35px}
  .benefit-grid{gap:10px}
  .benefit{padding:15px 10px;gap:9px}
  .benefit-icon{width:37px;height:37px;font-size:18px}
  .benefit h3{font-size:13px}
  .benefit p{font-size:10px}
  .section{padding:30px 0 50px}
  .section-head{align-items:flex-start;flex-direction:column;gap:8px}
  .section-title{font-size:29px}
  .shop-tools{flex-wrap:wrap}
  .search-box{flex-basis:100%}
  .sort-select{width:100%;max-width:none}
  .product-grid{gap:12px}
  .product-image{height:165px}
  .product-info{padding:13px}
  .product-info h3{font-size:16px}
  .product-desc{font-size:11px;min-height:48px}
  .price{font-size:17px}
  .old-price{font-size:10px;margin-left:2px}
  .unit{font-size:10px}
  .add-btn{width:36px;height:36px}
  .product-bottom{gap:4px}
  .product-badge{font-size:10px;top:8px;left:8px}
  .promo{padding-bottom:50px}
  .promo-card{grid-template-columns:1fr}
  .promo-content{padding:28px 23px}
  .promo-image{height:230px;grid-row:1}
  .promo-content h2{font-size:29px}
  .about-grid{grid-template-columns:1fr;gap:25px}
  .about-image{height:270px}
  .about-copy h2{font-size:29px}
  .about-points{gap:12px}
  .reviews{padding:45px 0}
  .review-grid{grid-template-columns:1fr}
  .newsletter{padding:45px 0}
  .newsletter-box{padding:27px 20px;flex-direction:column;align-items:stretch}
  .newsletter h2{font-size:24px}
  .newsletter-form{width:100%}
  .newsletter-form button{padding:10px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:25px 18px}
  .footer-bottom{flex-direction:column;text-align:center}
  .modal-box{padding:20px}
}
@media(max-width:370px){
  .product-grid{grid-template-columns:1fr}
  .product-image{height:230px}
  .benefit-grid{grid-template-columns:1fr 1fr}
}
</style>
</head>

<body>

<div class="announcement">
  🌴 প্রিমিয়াম খেজুরের বিশ্বস্ত ঠিকানা —
  <span>সারা বাংলাদেশে হোম ডেলিভারি</span>
</div>

<header>
  <div class="container nav">
    <a class="logo" href="#home">
      <div class="logo-icon">🌴</div>
      <div>
        <div class="logo-name">খেজুর ঘর</div>
        <div class="logo-sub">PREMIUM DATES STORE</div>
      </div>
    </a>

<nav class="nav-links" id="navLinks">
      <a href="#home">হোম</a>
      <a href="#products">আমাদের খেজুর</a>
      <a href="#about">আমাদের সম্পর্কে</a>
      <a href="#reviews">কাস্টমার রিভিউ</a>
      <a href="#contact">যোগাযোগ</a>
    </nav>

<main>
  
  <section class="hero" id="home">
    <div class="container">
      <div class="hero-card">
        <div class="hero-content">
          <div class="eyebrow">A Taste Of Nature</div>
          <h1>প্রকৃতির মিষ্টি স্বাদ,<br><span>প্রিমিয়াম খেজুর</span></h1>
          <p>
            বেছে নিন আপনার পছন্দের সুস্বাদু খেজুর।
            পরিবার ও প্রিয়জনের জন্য উপভোগ করুন
            প্রাকৃতিক মিষ্টি স্বাদের এক অনন্য অভিজ্ঞতা।
          </p>
          <div class="hero-buttons">
            <a class="btn btn-primary" href="#products">খেজুর কিনুন ↗</a>
            <a class="btn btn-outline" href="#about">আমাদের সম্পর্কে</a>
          </div>
          <div class="hero-note">✦ যত্নসহকারে প্যাকেজিং · সহজ অর্ডার · হোম ডেলিভারি</div>
        </div>
      </div>
    </div>
  </section>

<section class="benefits">
    <div class="container benefit-grid">
      <div class="benefit">
        <div class="benefit-icon">🌿</div>
        <div><h3>বাছাইকৃত খেজুর</h3><p>মানের প্রতি বিশেষ যত্ন</p></div>
      </div>
      <div class="benefit">
        <div class="benefit-icon">📦</div>
        <div><h3>নিরাপদ প্যাকেজিং</h3><p>যত্নসহকারে প্যাক করা</p></div>
      </div>
      <div class="benefit">
        <div class="benefit-icon">🚚</div>
        <div><h3>হোম ডেলিভারি</h3><p>সারা বাংলাদেশে</p></div>
      </div>
      <div class="benefit">
        <div class="benefit-icon">💬</div>
        <div><h3>কাস্টমার সাপোর্ট</h3><p>সহজে যোগাযোগ করুন</p></div>
      </div>
    </div>
  </section>

<section class="section" id="products">
    <div class="container">
      <div class="section-head">
        <div>
          <div class="section-kicker">OUR COLLECTION</div>
          <h2 class="section-title">আমাদের জনপ্রিয় খেজুর</h2>
          <p class="section-desc">আপনার পছন্দের খেজুর বেছে নিন</p>
        </div>
        <a class="text-link" href="#products">সব খেজুর দেখুন ↗</a>
      </div>

<div class="category-list" id="categoryList">
        <button class="category-btn active" data-category="সব">সব খেজুর</button>
        <button class="category-btn" data-category="প্রিমিয়াম">প্রিমিয়াম</button>
        <button class="category-btn" data-category="সৌদি">সৌদি আরব</button>
        <button class="category-btn" data-category="ইরানি">ইরানি</button>
        <button class="category-btn" data-category="স্পেশাল">স্পেশাল</button>
      </div>

<div class="shop-tools">
        <div class="search-box">
          <span class="search-icon">⌕</span>
          <input id="searchInput" type="search" placeholder="খেজুরের নাম লিখে খুঁজুন...">
        </div>
        <select class="sort-select" id="sortSelect" aria-label="Sort products">
          <option value="default">ডিফল্ট সাজানো</option>
          <option value="low">দাম: কম থেকে বেশি</option>
          <option value="high">দাম: বেশি থেকে কম</option>
        </select>
      </div>

<section class="promo">
    <div class="container">
      <div class="promo-card">
        <div class="promo-content">
          <div class="section-kicker">SPECIAL COLLECTION</div>
          <h2>প্রিয়জনের জন্য<br>মিষ্টি উপহার</h2>
          <p>
            বিশেষ দিন কিংবা প্রতিদিনের আনন্দে
            উপহার দিন সুস্বাদু খেজুর। আমাদের কালেকশন
            থেকে বেছে নিন আপনার পছন্দের প্যাকেজ।
          </p>
          <a href="#products" class="btn btn-primary">কালেকশন দেখুন ↗</a>
        </div>
        <div class="promo-image">
          <img src="https://images.unsplash.com/photo-1604329760661-e71dc83f8f26?auto=format&fit=crop&w=1000&q=85" alt="Premium dates gift collection" loading="lazy">
        </div>
      </div>
    </div>
  </section>

<section class="section" id="about">
    <div class="container about-grid">
      <div class="about-image">
        <img src="https://images.unsplash.com/photo-1596591606975-97ee5cef3a1e?auto=format&fit=crop&w=1000&q=85" alt="Fresh dates" loading="lazy">
      </div>
      <div class="about-copy">
        <div class="section-kicker">ABOUT KHEJUR GHOR</div>
        <h2>আপনার পরিবারের জন্য<br>সুস্বাদু খেজুর</h2>
        <p>
          খেজুর ঘরে আপনাকে স্বাগতম। আমরা চাই আপনার
          কাছে পৌঁছে দিতে বাছাইকৃত খেজুরের স্বাদ।
          পণ্যের মান, সঠিক তথ্য এবং যত্নসহকারে
          প্যাকেজিংকে আমরা গুরুত্ব দিই।
        </p>
        <div class="about-points">
          <div class="about-point"><span>✓</span> বাছাইকৃত পণ্য</div>
          <div class="about-point"><span>✓</span> যত্নসহকারে প্যাকিং</div>
          <div class="about-point"><span>✓</span> সহজ অর্ডার ব্যবস্থা</div>
          <div class="about-point"><span>✓</span> কাস্টমার সাপোর্ট</div>
        </div>
        <a href="#products" class="btn btn-primary" style="margin-top:25px">এখনই অর্ডার করুন</a>
      </div>
    </div>
  </section>

<section class="reviews" id="reviews">
    <div class="container">
      <div class="section-head">
        <div>
          <div class="section-kicker">CUSTOMER FEEDBACK</div>
          <h2 class="section-title">কাস্টমারদের মতামত</h2>
          <p class="section-desc">আমাদের ক্রেতাদের অভিজ্ঞতা</p>
        </div>
      </div>
      <div class="review-grid">
        <div class="review-card">
          <div class="stars">★★★★★</div>
          <p>খেজুরের স্বাদ ভালো লেগেছে। প্যাকেজিংও সুন্দর ছিল। আবার অর্ডার করার ইচ্ছা আছে।</p>
          <div class="review-user">একজন ক্রেতা<small>ঢাকা</small></div>
        </div>
        <div class="review-card">
          <div class="stars">★★★★★</div>
          <p>অর্ডার করার প্রক্রিয়াটি সহজ। পণ্য হাতে পেয়ে ভালো লেগেছে।</p>
          <div class="review-user">একজন ক্রেতা<small>চট্টগ্রাম</small></div>
        </div>
        <div class="review-card">
          <div class="stars">★★★★★</div>
          <p>পরিবারের জন্য খেজুর নিয়েছিলাম। প্যাকেজিং ও পণ্যের মান সন্তোষজনক ছিল।</p>
          <div class="review-user">একজন ক্রেতা<small>সিলেট</small></div>
        </div>
      </div>
      <p style="font-size:11px;color:#777;margin-top:15px">
        নোট: উপরের রিভিউগুলো ডেমো কনটেন্ট। প্রকাশের আগে প্রকৃত কাস্টমার রিভিউ দিয়ে প্রতিস্থাপন করুন।
      </p>
    </div>
  </section>

<section class="newsletter">
    <div class="container">
      <div class="newsletter-box">
        <div>
          <h2>নতুন অফার জানতে চান?</h2>
          <p>আপনার ইমেইল দিন, নতুন কালেকশন ও অফারের খবর রাখুন।</p>
        </div>
        <form class="newsletter-form" id="newsletterForm">
          <input type="email" placeholder="আপনার ইমেইল" required>
          <button type="submit">সাবস্ক্রাইব</button>
        </form>
      </div>
    </div>
  </section>
</main>

<footer id="contact">
  <div class="container">
    <div class="footer-grid">
      <div class="footer-brand">
        <a class="logo" href="#home">
          <div class="logo-icon">🌴</div>
          <div>
            <div class="logo-name" style="color:#fff">খেজুর ঘর</div>
            <div class="logo-sub" style="color:#bdc9bf">PREMIUM DATES STORE</div>
          </div>
        </a>
        <p>প্রিমিয়াম খেজুরের জন্য আপনার বিশ্বস্ত ঠিকানা। বেছে নিন পছন্দের খেজুর, অর্ডার করুন সহজেই।</p>
      </div>
      <div class="footer-col">
        <h3>দ্রুত লিংক</h3>
        <a href="#home">হোম</a>
        <a href="#products">আমাদের খেজুর</a>
        <a href="#about">আমাদের সম্পর্কে</a>
        <a href="#reviews">কাস্টমার রিভিউ</a>
      </div>
      <div class="footer-col">
        <h3>কাস্টমার সার্ভিস</h3>
        <a href="#contact">যোগাযোগ</a>
        <a href="#contact">ডেলিভারি তথ্য</a>
        <a href="#contact">রিটার্ন পলিসি</a>
        <a href="#contact">প্রাইভেসি পলিসি</a>
      </div>
      <div class="footer-col">
        <h3>যোগাযোগ</h3>
        <p>📞 01XXXXXXXXX</p>
        <p>✉️ hello@example.com</p>
        <p>📍 বাংলাদেশ</p>
        <p>🕒 সকাল ৯টা – রাত ১০টা</p>
      </div>
    </div>
    <div class="footer-bottom">
      <span>© <span id="year"></span> খেজুর ঘর। সর্বস্বত্ব সংরক্ষিত।</span>
      <span>Made with ♥ for date lovers</span>
    </div>
  </div>
</footer>

<div class="overlay" id="overlay" onclick="closeCart()"></div>
<aside class="cart-drawer" id="cartDrawer" aria-label="Shopping cart">
  <div class="drawer-head">
    <h2>আপনার কার্ট 🛒</h2>
    <button class="close-btn" onclick="closeCart()">×</button>
  </div>
  <div class="cart-items" id="cartItems"></div>
  <div class="drawer-foot">
    <div class="total-line"><span>সাবটোটাল</span><span id="subtotal">৳০</span></div>
    <div class="total-line"><span>ডেলিভারি চার্জ</span><span id="delivery">৳০</span></div>
    <div class="total-line grand"><span>সর্বমোট</span><span id="grandTotal">৳০</span></div>
    <button class="btn btn-primary checkout-btn" id="checkoutBtn" onclick="openCheckout()" disabled>
      অর্ডার সম্পন্ন করুন →
    </button>
  </div>
</aside>

<div class="modal" id="checkoutModal">
  <div class="modal-box">
    <div class="modal-head">
      <h2>অর্ডার কনফার্ম</h2>
      <button class="close-btn" onclick="closeCheckout()">×</button>
    </div>

<form id="checkoutForm">
      <div class="form-group">
        <label for="customerName">আপনার নাম *</label>
        <input id="customerName" name="name" required placeholder="সম্পূর্ণ নাম">
      </div>
      <div class="form-group">
        <label for="customerPhone">মোবাইল নম্বর *</label>
        <input id="customerPhone" name="phone" type="tel" required
          pattern="01[0-9]{9}" placeholder="01XXXXXXXXX">
      </div>
      <div class="form-group">
        <label for="customerAddress">সম্পূর্ণ ডেলিভারি ঠিকানা *</label>
        <textarea id="customerAddress" name="address" required placeholder="বাসা, রোড, এলাকা, জেলা"></textarea>
      </div>
      <div class="form-group">
        <label for="paymentMethod">পেমেন্ট পদ্ধতি</label>
        <select id="paymentMethod" name="payment">
          <option value="ক্যাশ অন ডেলিভারি">ক্যাশ অন ডেলিভারি</option>
          <option value="মোবাইল ব্যাংকিং">মোবাইল ব্যাংকিং (আগে যোগাযোগ করুন)</option>
        </select>
      </div>
      <div class="form-group">
        <label for="customerNote">অতিরিক্ত নোট (ঐচ্ছিক)</label>
        <textarea id="customerNote" name="note" placeholder="বিশেষ নির্দেশনা"></textarea>
      </div>

<div class="form-note">
        অর্ডার সাবমিট করলে আপনার অর্ডারের বিবরণ এই ডেমোতে তৈরি হবে।
        বাস্তবে অর্ডার গ্রহণের জন্য সার্ভার সংযোগ প্রয়োজন।
      </div>
      <button class="btn btn-primary checkout-btn" type="submit">অর্ডার সাবমিট করুন</button>
    </form>
    <div id="orderResult"></div>
  </div>
</div>

let cart = [];
let activeCategory = "সব";
let searchText = "";
let sortMode = "default";
let toastTimer;

/* Format BDT */
function money(amount){
  return "৳" + Number(amount).toLocaleString("bn-BD");
}

/* Render products */
function renderProducts(){
  let list = products.filter(p=>{
    const categoryMatch = activeCategory === "সব" ||
      p.category === activeCategory ||
      p.origin === activeCategory;
    const searchMatch = (p.name+" "+p.category+" "+p.origin)
      .toLowerCase().includes(searchText.toLowerCase());
    return categoryMatch && searchMatch;
  });

if(sortMode === "low") list.sort((a,b)=>a.price-b.price);
  if(sortMode === "high") list.sort((a,b)=>b.price-a.price);

const grid = document.getElementById("productGrid");

if(!list.length){
    grid.innerHTML = '<div class="empty-state">😕<br><br>কোনো পণ্য পাওয়া যায়নি।</div>';
    return;
  }

grid.innerHTML = list.map(p=>`
    <article class="product-card">
      <div class="product-image">
        <img src="${p.image}" alt="${p.name}" loading="lazy">
        ${p.badge ? `<span class="product-badge">${p.badge}</span>` : ""}
      </div>
      <div class="product-info">
        <div class="product-category">${p.origin} · ${p.weight}</div>
        <h3>${p.name}</h3>
        <p class="product-desc">${p.description}</p>
        <div class="product-bottom">
          <div>
            <div class="price">${money(p.price)}</div>
            <div><span class="old-price">${money(p.oldPrice)}</span>
            <span class="unit">/${p.weight}</span></div>
          </div>
          <button class="add-btn" onclick="addToCart(${p.id})"
            aria-label="${p.name} কার্টে যোগ করুন">+</button>
        </div>
      </div>
    </article>
  `).join("");
}

/* Category filters */
document.getElementById("categoryList").addEventListener("click",e=>{
  const btn = e.target.closest(".category-btn");
  if(!btn) return;

activeCategory = btn.dataset.category;
  document.querySelectorAll(".category-btn").forEach(b=>
    b.classList.toggle("active",b===btn)
  );
  renderProducts();
});

document.getElementById("searchInput").addEventListener("input",e=>{
  searchText = e.target.value.trim();
  renderProducts();
});

document.getElementById("sortSelect").addEventListener("change",e=>{
  sortMode = e.target.value;
  renderProducts();
});

/* Cart */
function addToCart(id){
  const product = products.find(p=>p.id===id);
  const item = cart.find(i=>i.id===id);

if(item) item.qty++;
  else cart.push({...product,qty:1});

renderCart();
  showToast(product.name+" কার্টে যোগ হয়েছে");
}

function changeQty(id,delta){
  const item = cart.find(i=>i.id===id);
  if(!item) return;

item.qty += delta;
  if(item.qty<=0) cart = cart.filter(i=>i.id!==id);

renderCart();
}

function removeItem(id){
  cart = cart.filter(i=>i.id!==id);
  renderCart();
}

function getSubtotal(){
  return cart.reduce((sum,item)=>sum+item.price*item.qty,0);
}

/* Demo delivery rule: free above ৳2000 */
function getDelivery(){
  if(cart.length===0) return 0;
  return getSubtotal()>=2000 ? 0 : 80;
}

function renderCart(){
  const count = cart.reduce((sum,item)=>sum+item.qty,0);
  const subtotal = getSubtotal();
  const delivery = getDelivery();

document.getElementById("cartCount").textContent =
    count.toLocaleString("bn-BD");
  document.getElementById("subtotal").textContent = money(subtotal);
  document.getElementById("delivery").textContent =
    delivery===0 && cart.length ? "ফ্রি" : money(delivery);
  document.getElementById("grandTotal").textContent =
    money(subtotal+delivery);
  document.getElementById("checkoutBtn").disabled = cart.length===0;

const cartItems = document.getElementById("cartItems");

if(cart.length===0){
    cartItems.innerHTML = `
      <div class="cart-empty">
        <div style="font-size:45px">🛒</div>
        <h3 style="margin:15px 0;color:#234532">আপনার কার্ট খালি</h3>
        <p>পছন্দের খেজুর কার্টে যোগ করুন।</p>
      </div>`;
    return;
  }

cartItems.innerHTML = cart.map(item=>`
    <div class="cart-item">
      <img src="${item.image}" alt="${item.name}">
      <div class="cart-item-info">
        <h4>${item.name}</h4>
        <p>${money(item.price)} / ${item.weight}</p>
        <div class="quantity">
          <button onclick="changeQty(${item.id},-1)">−</button>
          <span>${item.qty.toLocaleString("bn-BD")}</span>
          <button onclick="changeQty(${item.id},1)">+</button>
        </div>
        <button class="remove-btn" onclick="removeItem(${item.id})">পণ্য সরিয়ে ফেলুন</button>
      </div>
      <strong>${money(item.price*item.qty)}</strong>
    </div>
  `).join("");
}

function openCart(){
  document.getElementById("cartDrawer").classList.add("open");
  document.getElementById("overlay").classList.add("show");
  document.body.style.overflow="hidden";
}
function closeCart(){
  document.getElementById("cartDrawer").classList.remove("open");
  document.getElementById("overlay").classList.remove("show");
  document.body.style.overflow="";
}

/* Checkout */
function openCheckout(){
  if(!cart.length) return;
  closeCart();
  document.getElementById("orderResult").style.display="none";
  document.getElementById("checkoutForm").style.display="block";
  document.getElementById("checkoutModal").classList.add("show");
}
function closeCheckout(){
  document.getElementById("checkoutModal").classList.remove("show");
}

document.getElementById("checkoutForm").addEventListener("submit",e=>{
  e.preventDefault();
  if(!cart.length) return;

const form = new FormData(e.target);
  const orderId = "KH"+Date.now().toString().slice(-8);
  const items = cart.map(i=>
    `${i.name} × ${i.qty} = ${money(i.price*i.qty)}`
  ).join("\n");

const total = getSubtotal()+getDelivery();

const orderText =
`অর্ডার আইডি: ${orderId}
নাম: ${form.get("name")}
মোবাইল: ${form.get("phone")}
ঠিকানা: ${form.get("address")}
পেমেন্ট: ${form.get("payment")}

পণ্য:
${items}

ডেলিভারি: ${money(getDelivery())}
সর্বমোট: ${money(total)}
নোট: ${form.get("note") || "নেই"}`;

/*
    DEMO ONLY:
    এই অর্ডারটি শুধু ব্রাউজারে দেখানো হচ্ছে।
    PHP API / ডেটাবেস / Telegram বা অন্য অর্ডার
    সার্ভারের সঙ্গে যুক্ত না করলে দোকানদার অর্ডার পাবেন না।
  */

const result = document.getElementById("orderResult");
  result.textContent =
    "✅ ডেমো অর্ডার তৈরি হয়েছে!\n\n"+orderText+
    "\n\nএটি বাস্তব সার্ভারে পাঠানো হয়নি।";
  result.style.display="block";
  e.target.style.display="none";

cart=[];
  renderCart();
  showToast("ডেমো অর্ডার তৈরি হয়েছে");
});

/* Newsletter demo */
document.getElementById("newsletterForm").addEventListener("submit",e=>{
  e.preventDefault();
  showToast("ধন্যবাদ! এটি একটি ডেমো সাবস্ক্রিপশন।");
  e.target.reset();
});

/* Mobile menu */
function toggleMenu(){
  document.getElementById("navLinks").classList.toggle("show");
}
document.querySelectorAll(".nav-links a").forEach(link=>{
  link.addEventListener("click",()=>{
    document.getElementById("navLinks").classList.remove("show");
  });
});

/* Toast */
function showToast(message){
  const toast=document.getElementById("toast");
  toast.textContent=message;
  toast.classList.add("show");
  clearTimeout(toastTimer);
  toastTimer=setTimeout(()=>toast.classList.remove("show"),2500);
}

/* Escape key */
document.addEventListener("keydown",e=>{
  if(e.key==="Escape"){
    closeCart();
    closeCheckout();
  }
});

/* Initial setup */
document.getElementById("year").textContent=new Date().getFullYear();
renderProducts();
renderCart();
</script>

</body>
</html>

সেভ করলে লাইভ সাইটের index.html আপডেট হবে।

সাইট দেখুন

আপনার ওয়েবসাইট

তৈরি করা সাইটগুলো এখানে ম্যানেজ করুন

Live

islam

/sites/islam/

তৈরি: 01 Oct, 2026

Preview Edit