<!DOCTYPE html>
<html lang="ur" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مصنف ابن ابی شیبہ - اردو ترجمہ</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box;font-family:'Noto Nastaliq Urdu',serif}
  body{background:#fdf8ef;color:#222}
  header{background:#0b3d2e;color:#fff;padding:25px 15px;text-align:center}
  header h1{font-size:32px}
  header p{color:#d4af37;margin-top:8px}
  .search{max-width:700px;margin:20px auto;padding:0 15px}
  .search input{width:100%;padding:14px;border:2px solid #0b3d2e;border-radius:10px;font-size:18px}
  .container{max-width:900px;margin:auto;padding:15px}
  .book{background:#fff;border:1px solid #e5d9b8;border-radius:12px;padding:18px;margin-bottom:15px;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
  .book h2{color:#0b3d2e;font-size:24px}
  .book p{margin-top:8px;line-height:2}
  .hadith{background:#fff9e6;border-right:4px solid #d4af37;padding:15px;border-radius:8px;margin-top:15px;line-height:2.2}
  .btn{background:#0b3d2e;color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;margin-top:10px}
  footer{text-align:center;padding:20px;color:#888}
</style>
</head>
<body>

<header>
  <h1>مصنف ابن ابی شیبہ</h1>
  <p>امام ابو بکر عبداللہ بن محمد بن ابی شیبہؒ | اردو ترجمہ کے ساتھ</p>
  <p>کل احادیث: 37000+ | جلدیں: 18</p>
</header>

<div class="search">
  <input type="text" id="search" placeholder="تلاش کریں... جیسے وضو، نماز، روزہ" onkeyup="searchBook()">
</div>

<div class="container" id="books">

  <div class="book">
    <h2>1. کتاب الطہارہ</h2>
    <p>وضو، غسل، تیمم، نجاست کے احکام</p>
    <button class="btn" onclick="showHadith('tahara')">کھولیں</button>
    <div id="tahara" style="display:none">
      <div class="hadith">
        <b>حدیث 1:</b><br>
        حضرت ابو ہریرہ رضی اللہ عنہ سے روایت ہے کہ رسول اللہ ﷺ نے فرمایا: جب تم میں سے کوئی وضو کرے تو اپنی ناک میں پانی ڈالے پھر اسے صاف کرے۔
      </div>
      <div class="hadith">
        <b>حدیث 2:</b><br>
        حضرت علی رضی اللہ عنہ سے روایت ہے کہ رسول اللہ ﷺ نے فرمایا: وضو میں چہرہ دھونا فرض ہے۔
      </div>
    </div>
  </div>

  <div class="book">
    <h2>2. کتاب الصلاۃ</h2>
    <p>نماز، اذان، جمعہ، عید، وتر کے احکام</p>
    <button class="btn" onclick="showHadith('salah')">کھولیں</button>
    <div id="salah" style="display:none">
      <div class="hadith">
        <b>حدیث 1:</b><br>
        حضرت ابن عمر رضی اللہ عنہما سے روایت ہے کہ رسول اللہ ﷺ نے فرمایا: جماعت کے ساتھ نماز اکیلے کی نماز سے ستائیس درجے افضل ہے۔
      </div>
    </div>
  </div>

  <div class="book">
    <h2>3. کتاب الصوم</h2>
    <p>روزے، رمضان، تراویح، اعتکاف کے احکام</p>
    <button class="btn" onclick="showHadith('sawm')">کھولیں</button>
    <div id="sawm" style="display:none">
      <div class="hadith">
        <b>حدیث 1:</b><br>
        حضرت ابو ہریرہ رضی اللہ عنہ سے روایت ہے کہ رسول اللہ ﷺ نے فرمایا: جس نے ایمان اور ثواب کی نیت سے رمضان کے روزے رکھے اس کے پچھلے گناہ معاف کر دیے جاتے ہیں۔
      </div>
    </div>
  </div>

</div>

<footer>مصنف ابن ابی شیبہ - اردو ترجمہ ویب سائٹ</footer>

<script>
function showHadith(id){
  var x = document.getElementById(id);
  x.style.display = x.style.display === "none" ? "block" : "none";
}
function searchBook(){
  let q = document.getElementById("search").value;
  let books = document.querySelectorAll(".book");
  books.forEach(b=>{
    b.style.display = b.innerText.includes(q) ? "block" : "none";
  });
}
</script>

</body>
</html>index.html