Untitled drop

MMr. soul·Published Oct 29, 2026
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> خوش آمدید |فروشگاه من</title>
<style>
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Tahoma,Arial,sans-serif;
  background:#fff7fa;
  color:#382631;
}
header{
  background:linear-gradient(135deg,#652746,#d77ba3);
  color:white;
  text-align:center;
  padding:30px 12px;
}
header h1{margin:0 0 10px;font-size:28px}
header p{margin:0}
nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  padding:13px 8px;
  background:white;
  box-shadow:0 3px 10px #0001;
}
button{font-family:inherit;cursor:pointer}
nav button,.catbtn{
  border:1px solid #e5b7cb;
  background:white;
  color:#762d53;
  padding:10px 14px;
  border-radius:20px;
}
nav button:hover,.catbtn:hover,.catbtn.active{
  background:#762d53;
  color:white;
}
.hero{
  text-align:center;
  background:linear-gradient(120deg,#f9dce9,#fff0f6);
  padding:28px 12px;
  margin:20px auto;
  border-radius:17px;
  max-width:1200px;
}
.hero h2{color:#762d53}
main{max-width:1200px;margin:auto;padding:0 13px 35px}
h2{color:#762d53}
.search{
  width:100%;
  padding:13px;
  border:1px solid #e5bfd0;
  border-radius:12px;
  font:inherit;
  margin:8px 0 15px;
}
.categories{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:20px;
}
.products{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;
}
.card{
  background:white;
  border:1px solid #f0dce5;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 3px 12px #0000000b;
  transition:transform .2s;
}
.card:hover{transform:translateY(-3px)}
.card img{
  width:100%;
  height:220px;
  object-fit:contain;
  background:#fff;
  padding:7px;
  display:block;
}
.info{padding:12px}
.info h3{font-size:14px;margin:0 0 8px}
.cat{font-size:12px;color:#96758a}
.price{color:#a32c65;font-weight:bold;margin:12px 0}
footer{
  background:#642543;
  color:white;
  text-align:center;
  padding:25px 12px;
}
.empty{padding:25px;text-align:center}
@media(max-width:850px){
  .products{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:560px){
  .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .card img{height:165px}
  .info{padding:9px}
  header h1{font-size:23px}
}
</style>
</head>

<body>

<header>
  <h1>🌸 فروشگاه زیورآلات 🌸</h1>
  <p>زیبایی در جزئیات است</p>
</header>

<nav>
  <button onclick="home()">صفحه اصلی</button>
  <button onclick="filterProducts('همه')">همه محصولات</button>
  <button onclick="filterProducts('گوشواره')">گوشواره</button>
  <button onclick="filterProducts('دستبند')">دستبند</button>
  <button onclick="filterProducts('انگشتر')">انگشتر</button>
  <button onclick="filterProducts('گردنبند')">گردنبند</button>
  <button onclick="filterProducts('پابند')">پابند</button>
  <button onclick="filterProducts('جاسوییچی')">جاسوییچی</button>
  <button onclick="filterProducts('سایر')">سایر</button>
</nav>

<section class="hero" id="hero">
  <h2>✨ محصولات برتر فروشگاه ✨</h2>
  <p>محصول مورد علاقه‌ات را پیدا کن.</p>
</section>

<main>
  <h2 id="title">⭐ محصولات برتر</h2>

  <input
    class="search"
    id="search"
    type="search"
    placeholder="نام محصول یا دسته‌بندی را جست‌وجو کن..."
    oninput="searchProducts()">

  <div class="categories">
    <button class="catbtn active" onclick="filterProducts('همه')">همه</button>
    <button class="catbtn" onclick="filterProducts('گوشواره')">گوشواره</button>
    <button class="catbtn" onclick="filterProducts('دستبند')">دستبند</button>
    <button class="catbtn" onclick="filterProducts('انگشتر')">انگشتر</button>
    <button class="catbtn" onclick="filterProducts('گردنبند')">گردنبند</button>
    <button class="catbtn" onclick="filterProducts('پابند')">پابند</button>
    <button class="catbtn" onclick="filterProducts('جاسوییچی')">جاسوییچی</button>
    <button class="catbtn" onclick="filterProducts('سایر')">سایر</button>
  </div>

  <div class="products" id="products"></div>
</main>

<footer>
  <h3>🌷 فروشگاه زیورآلات 🌷</h3>
  <p>به‌زودی راه ارتباطی و سفارش محصولات اضافه می‌شود.</p>
</footer>

<script>
const imageCodes = [
"peSwqLqo","ONKaikmI","2boIc97I","07fayYaQ","yXanbx3s",
"3I6sdTnz","psp_c4I4","9GjdViaK","UM00xRrX","KsMQYoOq",
"fcwWMUdf","C4WV5EP_","TMd81WNm","YNSMyc9I","_pzgQbQn",
"RpZFZJZx","lBNcA1cT","QbXkMt3H","dm_jO68p","cFMesuup",
"fPqQLKwU","X47DUl2h","lbngDXad","QsjSSpz0","Papa8U3j",
"nrHc7cWs","k2aLq5mK","PpqNlInR","44pKzhiX","inOdmtHQ",
"iV-rJHiW","PSDM_sKC","rb1r9kNM","4VtKuohb","5zxOB6S1",
"qrWcu4oZ","ephXMdEQ","nuazQe49","cSLnVPGV","_tgCU_SS",
"1TpGCawc","oDD3SJ58","7-ZNoJdu","rllCR0o2","KYHl9242",
"Na5-Yd7h","cTQSRZ60","xuuICrdH","4Y1Jrm6F","TWcQ0eqb",
"gjo5L3xS","Ps3RB24V","yEYJGcCy","Ehjx7TYt","XSpBNaqs",
"BNVLNudL","ZciArUew","FLJZfqBY","TTq1nqu_","AwO15UnL",
"BjRRSEVR","k_D_0w1S","yrf-udxu","ts4tsu9m","emdoYB1N",
"EmpYNkUS","MzXhfYqD","J4aTldv8","XuG9desd","SSKkYdR4",
"JqLgQTkx","qING065l","t5KAMSjn","lbbeYBNA","2Qi06P7v",
"6S0gDSoL","YUSyLiMy","i83eOByg","Wv9LLAKf","L75wXRHC",
"g5u495fF","COJPLN1_","LSvvQEvg","U6gfN5St","BOgzIYez",
"UUqCcul_","7L9Otj9B","w6eqHJhc","4k-iNOsV","lMfKxKUf",
"Kr1_IQQ-","ACtxbd2H","oEXxi1QQ","slk0c2RN","QbOH7I-4",
"8SVHbl_8","bpPKyrue","l_Kaebse","NOzdt0PO","oUMc4FSl",
"EmGY-Yx7","oFMgtAq8","ZMHydXkj","PnRfXvr1","cPXJ7WFa",
"eltbiqhM","8I26TGib","f19NZLP3","ADCa4L5F","Bc8yAMak",
"7XcnZtmh","m4VRcpYK","o9bnD_7G","D0CoYdXs","d1LNskgI",
"XjP9XNYj","0l_Ii4Mm","kpKfKhWO","jY42iJUQ","7d_DTEix",
"MVgoqOrL","A4zTQpo2","hwQezWgo","IUq995CW","1Xlj1vQX",
"D4mEYBOU","c3-HygF2","R0A-dcM-","3Mi7vXZt"
];

/* دسته‌بندی اولیه؛ شماره‌ها با ترتیب لینک‌های عکس هماهنگ‌اند. */
const categoryByNumber = {
  1:"سایر",2:"گوشواره",3:"گوشواره",4:"دستبند",5:"گوشواره",
  6:"گردنبند",7:"انگشتر",8:"گردنبند",9:"سایر",10:"گردنبند",
  11:"گوشواره",12:"گوشواره",13:"دستبند",14:"گردنبند",15:"سایر",
  16:"گوشواره",17:"انگشتر",18:"گوشواره",19:"گوشواره",20:"گردنبند",
  21:"گوشواره",22:"جاسوییچی",23:"گردنبند",24:"گردنبند",25:"گوشواره",
  26:"گردنبند",27:"گوشواره",28:"گوشواره",29:"گوشواره",30:"گردنبند",
  31:"گوشواره",32:"گردنبند",33:"گوشواره",34:"گوشواره",35:"گوشواره",
  36:"گردنبند",37:"گردنبند",38:"گوشواره",39:"سایر",40:"گوشواره",
  41:"گوشواره",42:"سایر",43:"گردنبند",44:"گوشواره",45:"جاسوییچی",
  46:"گوشواره",47:"دستبند",48:"گردنبند",49:"سایر",50:"گوشواره",
  51:"جاسوییچی",52:"سایر",53:"گوشواره",54:"گوشواره",55:"سایر",
  56:"جاسوییچی",57:"گوشواره",58:"گوشواره",59:"دستبند",60:"گوشواره",
  61:"گوشواره",62:"گردنبند",63:"گوشواره",64:"دستبند",65:"انگشتر",
  66:"گردنبند",67:"گوشواره",68:"گوشواره",69:"جاسوییچی",70:"گردنبند",
  71:"گوشواره",72:"دستبند",73:"گردنبند",74:"گوشواره",75:"انگشتر",
  76:"جاسوییچی",77:"گوشواره",78:"گردنبند",79:"دستبند",80:"گوشواره",
  81:"سایر",82:"گردنبند",83:"گوشواره",84:"انگشتر",85:"دستبند",
  86:"سایر",87:"جاسوییچی",88:"گوشواره",89:"گردنبند",90:"گوشواره",
  91:"انگشتر",92:"گردنبند",93:"دستبند",94:"گوشواره",95:"جاسوییچی",
  96:"گردنبند",97:"گوشواره",98:"انگشتر",99:"دستبند",100:"گردنبند",
  101:"گوشواره",102:"جاسوییچی",103:"گردنبند",104:"گوشواره",105:"انگشتر",
  106:"دستبند",107:"گوشواره",108:"گردنبند",109:"جاسوییچی",110:"سایر",
  111:"گوشواره",112:"گردنبند",113:"دستبند",114:"گوشواره",115:"انگشتر",
  116:"گردنبند",117:"گوشواره",118:"جاسوییچی",119:"دستبند",120:"گردنبند",
  121:"گوشواره",122:"انگشتر",123:"دستبند",124:"گردنبند",125:"گوشواره",
  126:"جاسوییچی",127:"انگشتر",128:"گوشواره",129:"سایر"
};

const products = imageCodes.map((code,index)=>{
  const id = index + 1;
  const category = categoryByNumber[id] || "سایر";
  let price = 500000;

  if ([15,39,49,52].includes(id)) price = 450000;
  if (category === "گردنبند") price = 600000;

  return {
    id,
    name: category === "سایر" ? "محصول شماره " + id : category + " شماره " + id,
    category,
    price,
    image: "https://imgtree.co/preview/" + code + ".webp",
    featured: id <= 8
  };
});

let activeCategory = "همه";

function formatPrice(price){
  return price.toLocaleString("fa-IR") + " تومان";
}

function render(list){
  const area = document.getElementById("products");

  if(!list.length){
    area.innerHTML = '<div class="empty">محصولی پیدا نشد.</div>';
    return;
  }

  area.innerHTML = list.map(p=>`
    <article class="card">
      <img src="${p.image}" alt="${p.name}" loading="lazy"
           onerror="this.alt='تصویر بارگذاری نشد'">
      <div class="info">
        <h3>${p.name}</h3>
        <div class="cat">${p.category}</div>
        <div class="price">${formatPrice(p.price)}</div>
      </div>
    </article>
  `).join("");
}

function home(){
  activeCategory = "همه";
  document.getElementById("search").value = "";
  document.getElementById("hero").style.display = "block";
  document.getElementById("title").textContent = "⭐ محصولات برتر";
  render(products.filter(p=>p.featured));
  markActive("همه");
  window.scrollTo(0,0);
}

function filterProducts(category){
  activeCategory = category;
  document.getElementById("hero").style.display = "none";
  document.getElementById("title").textContent =
    category === "همه" ? "همه محصولات" : "دسته‌بندی " + category;
  showFiltered();
  markActive(category);
}

function showFiltered(){
  const query = document.getElementById("search").value.trim();
  let list = products;

  if(activeCategory !== "همه"){
    list = list.filter(p=>p.category === activeCategory);
  }

  if(query){
    list = list.filter(p=>
      p.name.includes(query) || p.category.includes(query)
    );
  }

  render(list);
}

function searchProducts(){
  document.getElementById("hero").style.display = "none";
  document.getElementById("title").textContent = "نتایج جست‌وجو";
  showFiltered();
}

function markActive(category){
  document.querySelectorAll(".catbtn").forEach(button=>{
    button.classList.toggle("active",button.textContent.trim() === category);
  });
}

home();
</script>

</body>
</html>
Explore more drops →