تست: تفاوت میان نسخهها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۲: | خط ۲: | ||
<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> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6. | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" /> | ||
<style> | <style> | ||
* { | * { | ||
| خط ۱۱: | خط ۱۱: | ||
padding: 0; | padding: 0; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
font-family: 'Segoe UI', Tahoma, Arial, sans-serif; | |||
} | } | ||
:root { | :root { | ||
--primary | --primary: #2c5530; | ||
--secondary | --secondary: #4a7c59; | ||
--light: #f8f9fa; | |||
--light | --border: #dee2e6; | ||
-- | --text: #333; | ||
--text | |||
} | } | ||
body { | body { | ||
background: #f0f2f5; | background: #f0f2f5; | ||
color: var(--text | color: var(--text); | ||
padding: 15px; | |||
line-height: 1.6; | line-height: 1.6; | ||
} | } | ||
.container { | .container { | ||
max-width: | max-width: 1000px; | ||
margin: 0 auto; | margin: 0 auto; | ||
background: white; | background: white; | ||
border-radius: 10px; | |||
border-radius: | box-shadow: 0 2px 12px rgba(0,0,0,0.08); | ||
box-shadow: 0 2px | overflow: hidden; | ||
} | } | ||
.header { | .header { | ||
background: linear-gradient(135deg, var(--primary | background: linear-gradient(135deg, var(--primary), var(--secondary)); | ||
color: white; | color: white; | ||
padding: | padding: 24px 20px; | ||
text-align: center; | text-align: center; | ||
} | } | ||
.header h1 { | |||
font-size: 26px; | |||
margin-bottom: 8px; | |||
font-size: | |||
} | } | ||
.header p { | |||
. | opacity: 0.95; | ||
font-size: 14px; | font-size: 14px; | ||
} | } | ||
.section { | |||
. | padding: 20px; | ||
padding: | |||
} | } | ||
.form-group { | |||
. | |||
margin-bottom: 20px; | margin-bottom: 20px; | ||
} | } | ||
label { | label { | ||
display: block; | display: block; | ||
margin-bottom: | margin-bottom: 8px; | ||
font-weight: 600; | font-weight: 600; | ||
color: | color: #444; | ||
} | } | ||
select { | |||
width: 100%; | width: 100%; | ||
padding: | padding: 12px; | ||
border: 1px solid var(--border | border: 1px solid var(--border); | ||
border-radius: | border-radius: 8px; | ||
font-size: | font-size: 15px; | ||
background: white; | background: white; | ||
direction: rtl; | |||
} | } | ||
select:disabled { | |||
background-color: #f5f5f5; | |||
color: #999; | |||
} | } | ||
.btn { | |||
. | |||
display: block; | display: block; | ||
width: 100%; | width: 100%; | ||
padding: | padding: 14px; | ||
background: var(--primary); | |||
background | |||
color: white; | color: white; | ||
border: none; | |||
border: | |||
border-radius: 8px; | border-radius: 8px; | ||
font-size: 16px; | |||
font-weight: 600; | font-weight: 600; | ||
cursor: pointer; | 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; | display: flex; | ||
justify-content: space- | justify-content: space-around; | ||
background: var(--light); | |||
padding: | padding: 14px; | ||
border-radius: 8px; | |||
margin: 20px 0; | |||
font-size: 14px; | |||
color: #555; | |||
} | } | ||
.stat { | |||
. | |||
text-align: center; | text-align: center; | ||
} | } | ||
.stat strong { | |||
. | color: var(--primary); | ||
font-size: 18px; | |||
display: block; | |||
} | } | ||
.recent { | |||
margin-top: 25px; | |||
.recent | |||
margin-top: | |||
} | } | ||
.recent h3 { | |||
. | |||
margin-bottom: 12px; | margin-bottom: 12px; | ||
color: var(--primary); | |||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
gap: 8px; | gap: 8px; | ||
} | } | ||
.recent-list { | |||
.recent- | |||
display: flex; | display: flex; | ||
flex-wrap: wrap; | |||
gap: 10px; | gap: 10px; | ||
} | } | ||
.recent-item { | .recent-item { | ||
background: | background: #eef5ee; | ||
padding: 10px 14px; | |||
border-radius: 6px; | border-radius: 6px; | ||
cursor: pointer; | cursor: pointer; | ||
font-size: 14px; | |||
transition: all 0.2s; | |||
} | } | ||
.recent-item:hover { | .recent-item:hover { | ||
background: var(--primary); | |||
color: white; | |||
} | } | ||
.empty { | |||
. | color: #888; | ||
font-style: italic; | |||
color: | |||
font- | |||
text-align: center; | text-align: center; | ||
padding: 15px; | padding: 15px; | ||
} | } | ||
@media (max-width: 600px) { | |||
.stats { | |||
@media (max-width: | |||
.stats | |||
flex-direction: column; | flex-direction: column; | ||
gap: 12px; | |||
} | } | ||
. | .header h1 { | ||
font-size: 22px; | |||
} | } | ||
} | } | ||
| خط ۴۴۶: | خط ۱۶۱: | ||
<div class="header"> | <div class="header"> | ||
<h1>کتابخانه پدیا بایبل</h1> | <h1>کتابخانه پدیا بایبل</h1> | ||
< | <p>مرجع تخصصی پژوهش و تحلیل کتاب مقدس — انتخاب کتاب یا مقاله و مشاهده در سایت اصلی</p> | ||
</div> | </div> | ||
<div class=" | <div class="section"> | ||
<div class=" | <div class="stats"> | ||
<div class="stat"> | |||
<i class="fas fa-book"></i> کتابها | |||
<strong id="bookCount">4</strong> | |||
</div> | </div> | ||
<div class="stat"> | |||
<div class=" | <i class="fas fa-file-alt"></i> مقالات | ||
<strong id="articleCount">4</strong> | |||
</div> | </div> | ||
<div class="stat"> | |||
<i class="fas fa-history"></i> مطالعه شده | |||
<strong id="readCount">0</strong> | |||
<div class=" | |||
< | |||
</div> | </div> | ||
</div> | </div> | ||
<div class=" | |||
<div class="form-group"> | |||
< | <label for="category"><i class="fas fa-folder"></i> دستهبندی</label> | ||
< | <select id="category"> | ||
<option value="">— انتخاب کنید —</option> | |||
<option value="کتاب">کتاب</option> | |||
< | <option value="مقاله">مقاله</option> | ||
</select> | |||
</div> | </div> | ||
<div class=" | |||
< | <div class="form-group"> | ||
<label for="content"><i class="fas fa-book-open"></i> انتخاب محتوا</label> | |||
<select id="content" disabled> | |||
<option>— ابتدا دستهبندی را انتخاب کنید —</option> | |||
< | </select> | ||
< | |||
</ | |||
</div> | </div> | ||
<button id="goBtn" class="btn" disabled> | |||
<i class="fas fa-external-link-alt"></i> مشاهده در سایت پدیا بایبل | |||
</button> | |||
</div> | </div> | ||
<div class="recent | <div class="section recent"> | ||
< | <h3><i class="fas fa-history"></i> مطالب مطالعهشده اخیر</h3> | ||
<div class="recent-list" id="recentList"> | |||
<div class="empty">هیچ مطلبی اخیراً باز نشده است.</div> | |||
<div class="recent- | |||
<div class="empty | |||
</div> | </div> | ||
</div> | </div> | ||
| خط ۵۴۶: | خط ۲۱۰: | ||
<script> | <script> | ||
const | const data = { | ||
کتاب: [ | |||
{ value: 'عیسی', text: 'عیسی' }, | { value: 'عیسی', text: 'عیسی' }, | ||
{ value: 'انجیل_متی', text: 'انجیل متی' }, | { value: 'انجیل_متی', text: 'انجیل متی' }, | ||
| خط ۵۵۳: | خط ۲۱۷: | ||
{ value: 'پیدایش', text: 'پیدایش' } | { value: 'پیدایش', text: 'پیدایش' } | ||
], | ], | ||
مقاله: [ | |||
{ value: 'مسیح', text: 'مسیح' }, | { value: 'مسیح', text: 'مسیح' }, | ||
{ value: 'تثلیث', text: 'تثلیث' }, | { value: 'تثلیث', text: 'تثلیث' }, | ||
| خط ۵۶۱: | خط ۲۲۵: | ||
}; | }; | ||
const | 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() { | function updateStats() { | ||
bookCountEl.textContent = data.کتاب.length; | |||
articleCountEl.textContent = data.مقاله.length; | |||
readCountEl.textContent = readHistory.length; | |||
} | } | ||
function | // پر کردن لیست محتوا | ||
if ( | 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; | return; | ||
} | } | ||
items.forEach(item => { | |||
const opt = document.createElement('option'); | |||
opt.value = item.value; | |||
opt.text = item.text; | |||
const | contentSelect.appendChild(opt); | ||
}); | }); | ||
contentSelect.disabled = false; | |||
} | } | ||
function | // نمایش تاریخچه | ||
if ( | function renderRecent() { | ||
if (readHistory.length === 0) { | |||
recentList.innerHTML = '<div class="empty">هیچ مطلبی اخیراً باز نشده است.</div>'; | |||
return; | return; | ||
} | } | ||
recentList.innerHTML = ''; | |||
const | 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; | |||
if ( | goBtn.disabled = true; | ||
} | } | ||
}); | |||
contentSelect.addEventListener('change', () => { | |||
selectedContent = contentSelect.value; | |||
goBtn.disabled = !selectedContent; | |||
}); | |||
} | |||
goBtn.addEventListener('click', openContent); | |||
// راهاندازی اولیه | |||
updateStats(); | |||
renderRecent(); | |||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
نسخهٔ ۱۲ اکتبر ۲۰۲۵، ساعت ۲۲:۰۸
<!DOCTYPE html>
کتابخانه پدیا بایبل
مرجع تخصصی پژوهش و تحلیل کتاب مقدس — انتخاب کتاب یا مقاله و مشاهده در سایت اصلی
کتابها
4
مقالات
4
مطالعه شده
0
مطالب مطالعهشده اخیر
هیچ مطلبی اخیراً باز نشده است.