پرش به محتوا

تست: تفاوت میان نسخه‌ها

از دانشنامه کتاب مقدس
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۲: خط ۲:
<html lang="fa" dir="rtl">
<html lang="fa" dir="rtl">
<head>
<head>
    <meta charset="UTF-8" />
  <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>کتابخانه پدیا بایبل</title>
  <title>کتابخانه پدیا بایبل</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <style>
     <style>
     * { margin: 0; padding: 0; box-sizing: border-box; font-family: Tahoma, Arial, sans-serif; }
        * {
    body { background: #f5f7f9; padding: 20px; color: #333; }
            margin: 0;
    .container { max-width: 700px; margin: 0 auto; background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); overflow: hidden; }
            padding: 0;
    .header { background: #2c5530; color: white; padding: 25px; text-align: center; }
            box-sizing: border-box;
    .header h1 { font-size: 24px; margin-bottom: 8px; }
            font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    .form { padding: 25px; }
        }
    label { display: block; margin: 15px 0 8px; font-weight: bold; color: #2c5530; }
        :root {
    select {
            --primary: #2c5530;
      width: 100%;
            --secondary: #4a7c59;
      padding: 12px;
            --light: #f8f9fa;
      font-size: 16px;
            --border: #dee2e6;
      border: 1px solid #ccc;
            --text: #333;
      border-radius: 8px;
        }
      direction: rtl;
        body {
    }
            background: #f0f2f5;
    button {
            color: var(--text);
      width: 100%;
            padding: 15px;
      padding: 14px;
            line-height: 1.6;
      background: #2c5530;
        }
      color: white;
        .container {
      border: none;
            max-width: 1000px;
      border-radius: 8px;
            margin: 0 auto;
      font-size: 17px;
            background: white;
      font-weight: bold;
            border-radius: 10px;
      margin-top: 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
      cursor: pointer;
            overflow: hidden;
    }
        }
    button:disabled {
        .header {
      background: #ccc;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
      cursor: not-allowed;
            color: white;
    }
            padding: 24px 20px;
  </style>
            text-align: center;
        }
        .header h1 {
            font-size: 26px;
            margin-bottom: 8px;
        }
        .header p {
            opacity: 0.95;
            font-size: 14px;
        }
        .section {
            padding: 20px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #444;
        }
        select {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 15px;
            background: white;
            direction: rtl;
        }
        select:disabled {
            background-color: #f5f5f5;
            color: #999;
        }
        .btn {
            display: block;
            width: 100%;
            padding: 14px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            margin-top: 10px;
        }
        .btn:hover:not(:disabled) {
            background: #254528;
            transform: translateY(-2px);
        }
        .btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .stats {
            display: flex;
            justify-content: space-around;
            background: var(--light);
            padding: 14px;
            border-radius: 8px;
            margin: 20px 0;
            font-size: 14px;
            color: #555;
        }
        .stat {
            text-align: center;
        }
        .stat strong {
            color: var(--primary);
            font-size: 18px;
            display: block;
        }
        .recent {
            margin-top: 25px;
        }
        .recent h3 {
            margin-bottom: 12px;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .recent-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .recent-item {
            background: #eef5ee;
            padding: 10px 14px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        .recent-item:hover {
            background: var(--primary);
            color: white;
        }
        .empty {
            color: #888;
            font-style: italic;
            text-align: center;
            padding: 15px;
        }
        @media (max-width: 600px) {
            .stats {
                flex-direction: column;
                gap: 12px;
            }
            .header h1 {
                font-size: 22px;
            }
        }
    </style>
</head>
</head>
<body>
<body>
    <div class="container">
  <div class="container">
        <div class="header">
    <div class="header">
            <h1>کتابخانه پدیا بایبل</h1>
      <h1>کتابخانه پدیا بایبل</h1>
            <p>مرجع تخصصی پژوهش و تحلیل کتاب مقدس — انتخاب کتاب یا مقاله و مشاهده در سایت اصلی</p>
      <p>انتخاب کتاب یا مقاله و مشاهده در سایت اصلی</p>
        </div>
    </div>


        <div class="section">
    <div class="form">
            <div class="stats">
      <label for="category">دسته‌بندی:</label>
                <div class="stat">
      <select id="category">
                    <i class="fas fa-book"></i> کتاب‌ها
        <option value="">— لطفاً انتخاب کنید —</option>
                    <strong id="bookCount">4</strong>
        <option value="کتاب">کتاب</option>
                </div>
        <option value="مقاله">مقاله</option>
                <div class="stat">
      </select>
                    <i class="fas fa-file-alt"></i> مقالات
                    <strong id="articleCount">4</strong>
                </div>
                <div class="stat">
                    <i class="fas fa-history"></i> مطالعه شده
                    <strong id="readCount">0</strong>
                </div>
            </div>


            <div class="form-group">
      <label for="content">انتخاب محتوا:</label>
                <label for="category"><i class="fas fa-folder"></i> دسته‌بندی</label>
      <select id="content" disabled>
                <select id="category">
        <option>— ابتدا دسته‌بندی را انتخاب کنید —</option>
                    <option value="">— انتخاب کنید —</option>
      </select>
                    <option value="کتاب">کتاب</option>
                    <option value="مقاله">مقاله</option>
                </select>
            </div>


            <div class="form-group">
      <button id="viewBtn" disabled>
                <label for="content"><i class="fas fa-book-open"></i> انتخاب محتوا</label>
        مشاهده در سایت پدیا بایبل
                <select id="content" disabled>
      </button>
                    <option>— ابتدا دسته‌بندی را انتخاب کنید —</option>
                </select>
            </div>
 
            <button id="goBtn" class="btn" disabled>
                <i class="fas fa-external-link-alt"></i> مشاهده در سایت پدیا بایبل
            </button>
        </div>
 
        <div class="section recent">
            <h3><i class="fas fa-history"></i> مطالب مطالعه‌شده اخیر</h3>
            <div class="recent-list" id="recentList">
                <div class="empty">هیچ مطلبی اخیراً باز نشده است.</div>
            </div>
        </div>
     </div>
     </div>
  </div>


    <script>
  <script>
        const data = {
    // داده‌ها
            کتاب: [
    const data = {
                { value: 'عیسی', text: 'عیسی' },
      "کتاب": ["عیسی", "انجیل_متی", "مزامیر", "پیدایش"],
                { value: 'انجیل_متی', text: 'انجیل متی' },
      "مقاله": ["مسیح", "تثلیث", "نجات", "روح_القدس"]
                { value: 'مزامیر', text: 'مزامیر' },
    };
                { value: 'پیدایش', text: 'پیدایش' }
            ],
            مقاله: [
                { value: 'مسیح', text: 'مسیح' },
                { value: 'تثلیث', text: 'تثلیث' },
                { value: 'نجات', text: 'نجات' },
                { value: 'روح_القدس', text: 'روح القدس' }
            ]
        };
 
        const categorySelect = document.getElementById('category');
        const contentSelect = document.getElementById('content');
        const goBtn = document.getElementById('goBtn');
        const recentList = document.getElementById('recentList');
        const bookCountEl = document.getElementById('bookCount');
        const articleCountEl = document.getElementById('articleCount');
        const readCountEl = document.getElementById('readCount');
 
        let selectedCategory = '';
        let selectedContent = '';
 
        // بارگذاری تاریخچه از localStorage
        let readHistory = JSON.parse(localStorage.getItem('pediabible_history')) || [];
 
        // به‌روزرسانی آمار
        function updateStats() {
            bookCountEl.textContent = data.کتاب.length;
            articleCountEl.textContent = data.مقاله.length;
            readCountEl.textContent = readHistory.length;
        }
 
        // پر کردن لیست محتوا
        function populateContent() {
            contentSelect.innerHTML = '';
            const items = data[selectedCategory] || [];
            if (items.length === 0) {
                const opt = document.createElement('option');
                opt.text = 'محتوایی یافت نشد';
                contentSelect.appendChild(opt);
                contentSelect.disabled = true;
                goBtn.disabled = true;
                return;
            }
 
            items.forEach(item => {
                const opt = document.createElement('option');
                opt.value = item.value;
                opt.text = item.text;
                contentSelect.appendChild(opt);
            });
 
            contentSelect.disabled = false;
        }


        // نمایش تاریخچه
    // عناصر
        function renderRecent() {
    const categorySelect = document.getElementById('category');
            if (readHistory.length === 0) {
    const contentSelect = document.getElementById('content');
                recentList.innerHTML = '<div class="empty">هیچ مطلبی اخیراً باز نشده است.</div>';
    const viewBtn = document.getElementById('viewBtn');
                return;
            }
 
            recentList.innerHTML = '';
            const last5 = readHistory.slice(-5).reverse();
            last5.forEach(item => {
                const div = document.createElement('div');
                div.className = 'recent-item';
                div.textContent = `${item.text} (${item.category})`;
                div.onclick = () => {
                    categorySelect.value = item.category;
                    selectedCategory = item.category;
                    populateContent();
                    contentSelect.value = item.value;
                    selectedContent = item.value;
                    goBtn.disabled = false;
                    openContent();
                };
                recentList.appendChild(div);
            });
        }
 
        // باز کردن صفحه
        function openContent() {
            if (!selectedCategory || !selectedContent) return;
 
            const url = `https://www.pediabible.com/index.php/${selectedContent}`;
            window.open(url, '_blank');
 
            // اضافه کردن به تاریخچه
            const newItem = {
                category: selectedCategory,
                value: selectedContent,
                text: contentSelect.options[contentSelect.selectedIndex]?.text || selectedContent
            };
 
            // جلوگیری از تکرار
            const exists = readHistory.some(
                item => item.category === newItem.category && item.value === newItem.value
            );
 
            if (!exists) {
                readHistory.push(newItem);
                localStorage.setItem('pediabible_history', JSON.stringify(readHistory));
                updateStats();
                renderRecent();
            }
        }
 
        // event listeners
        categorySelect.addEventListener('change', () => {
            selectedCategory = categorySelect.value;
            if (selectedCategory) {
                populateContent();
            } else {
                contentSelect.disabled = true;
                goBtn.disabled = true;
            }
        });


        contentSelect.addEventListener('change', () => {
    // هنگام تغییر دسته‌بندی
            selectedContent = contentSelect.value;
    categorySelect.addEventListener('change', function() {
            goBtn.disabled = !selectedContent;
      const category = this.value;
     
      // پاک کردن لیست قبلی
      contentSelect.innerHTML = '';
     
      if (category && data[category]) {
        // فعال کردن select محتوا
        contentSelect.disabled = false;
       
        // اضافه کردن گزینه‌ها
        data[category].forEach(item => {
          const option = document.createElement('option');
          option.value = item;
          option.textContent = item.replace(/_/g, ' ');
          contentSelect.appendChild(option);
         });
         });
       
        viewBtn.disabled = true; // تا محتوا انتخاب نشده، دکمه غیرفعال است
      } else {
        contentSelect.disabled = true;
        contentSelect.innerHTML = '<option>— ابتدا دسته‌بندی را انتخاب کنید —</option>';
        viewBtn.disabled = true;
      }
    });


        goBtn.addEventListener('click', openContent);
    // هنگام انتخاب محتوا
    contentSelect.addEventListener('change', function() {
      viewBtn.disabled = !this.value;
    });


        // راه‌اندازی اولیه
    // هنگام کلیک روی دکمه
        updateStats();
    viewBtn.addEventListener('click', function() {
         renderRecent();
      const category = categorySelect.value;
     </script>
      const content = contentSelect.value;
      if (category && content) {
        const url = `https://www.pediabible.com/index.php/${content}`;
         window.open(url, '_blank');
      }
     });
  </script>
</body>
</body>
</html>
</html>

نسخهٔ ‏۱۲ اکتبر ۲۰۲۵، ساعت ۲۲:۱۱

<!DOCTYPE html> کتابخانه پدیا بایبل

کتابخانه پدیا بایبل

انتخاب کتاب یا مقاله و مشاهده در سایت اصلی

برگرفته از «https://www.pediabible.com/index.php?title=تست&oldid=4425»