تست: تفاوت میان نسخهها
ظاهر
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
خط ۲: | خط ۲: | ||
<html lang="fa" dir="rtl"> | <html lang="fa" dir="rtl"> | ||
<head> | <head> | ||
<meta charset="UTF-8"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
<title>کتابخانه پدیا بایبل - مطالعه کتابها و مقالات</title> | |||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |||
<style> | |||
* { | |||
margin: 0; | |||
padding: 0; | |||
box-sizing: border-box; | |||
} | |||
:root { | |||
--primary-color: #2c5530; | |||
--secondary-color: #4a7c59; | |||
--accent-color: #8fb996; | |||
--light-color: #f8f9fa; | |||
--dark-color: #343a40; | |||
--text-color: #333; | |||
--border-color: #dee2e6; | |||
--shadow: 0 4px 12px rgba(0,0,0,0.1); | |||
--transition: all 0.3s ease; | |||
} | |||
body { | |||
font-family: 'Segoe UI', Tahoma, Arial, sans-serif; | |||
background: #f0f2f5; | |||
color: var(--text-color); | |||
line-height: 1.6; | |||
padding: 10px; | |||
min-height: 100vh; | |||
} | |||
.container { | |||
max-width: 1200px; | |||
margin: 0 auto; | |||
background: white; | |||
padding: 15px; | |||
border-radius: 8px; | |||
box-shadow: 0 2px 10px rgba(0,0,0,0.05); | |||
} | |||
.header { | |||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |||
color: white; | |||
padding: 20px; | |||
border-radius: 8px; | |||
margin-bottom: 20px; | |||
text-align: center; | |||
} | |||
h1 { | |||
margin: 0; | |||
font-size: 24px; | |||
font-weight: 700; | |||
} | |||
.description { | |||
color: rgba(255,255,255,0.9); | |||
font-size: 14px; | |||
margin-top: 8px; | |||
} | |||
.stats-bar { | |||
display: flex; | |||
justify-content: space-between; | |||
background: var(--light-color); | |||
padding: 10px 15px; | |||
border-radius: 6px; | |||
margin-bottom: 15px; | |||
border: 1px solid var(--border-color); | |||
font-size: 13px; | |||
} | |||
.stat-item { | |||
display: flex; | |||
align-items: center; | |||
gap: 6px; | |||
} | |||
.stat-value { | |||
font-weight: bold; | |||
color: var(--primary-color); | |||
} | |||
/* استایل جدید برای فیلترهای آبشاری */ | |||
.filter-section { | |||
margin-bottom: 20px; | |||
background: var(--light-color); | |||
padding: 15px; | |||
border-radius: 8px; | |||
border: 1px solid var(--border-color); | |||
} | |||
.filter-grid { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |||
gap: 15px; | |||
margin-bottom: 15px; | |||
} | |||
.form-group { | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
label { | |||
display: block; | |||
margin-bottom: 6px; | |||
font-weight: 600; | |||
color: var(--dark-color); | |||
font-size: 14px; | |||
} | |||
select { | |||
width: 100%; | |||
padding: 10px 12px; | |||
border: 1px solid var(--border-color); | |||
border-radius: 6px; | |||
font-size: 14px; | |||
background: white; | |||
transition: var(--transition); | |||
cursor: pointer; | |||
text-align: right; | |||
} | |||
select:focus { | |||
outline: none; | |||
border-color: var(--accent-color); | |||
} | |||
select:disabled { | |||
background-color: #f8f9fa; | |||
color: #6c757d; | |||
cursor: not-allowed; | |||
} | |||
.content-section { | |||
margin-top: 15px; | |||
border: 1px solid var(--border-color); | |||
border-radius: 8px; | |||
overflow: hidden; | |||
background: white; | |||
height: 500px; | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
.content-header { | |||
padding: 12px 15px; | |||
background: var(--light-color); | |||
border-bottom: 1px solid var(--border-color); | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
} | |||
.content-title { | |||
font-weight: 600; | |||
color: var(--primary-color); | |||
font-size: 16px; | |||
} | |||
.content-controls { | |||
display: flex; | |||
gap: 8px; | |||
} | |||
.control-btn { | |||
background: white; | |||
border: 1px solid var(--border-color); | |||
border-radius: 4px; | |||
padding: 5px 10px; | |||
cursor: pointer; | |||
font-size: 12px; | |||
transition: var(--transition); | |||
display: flex; | |||
align-items: center; | |||
gap: 4px; | |||
} | |||
.control-btn:hover { | |||
background: var(--light-color); | |||
} | |||
.iframe-container { | |||
width: 100%; | |||
flex: 1; | |||
position: relative; | |||
} | |||
.clean-frame { | |||
width: 100%; | |||
height: 100%; | |||
border: none; | |||
background: white; | |||
} | |||
.iframe-placeholder { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
height: 100%; | |||
color: #6c757d; | |||
font-size: 15px; | |||
text-align: center; | |||
padding: 15px; | |||
background: white; | |||
flex-direction: column; | |||
} | |||
.action-buttons { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding: 12px 15px; | |||
background-color: var(--light-color); | |||
border-top: 1px solid var(--border-color); | |||
gap: 10px; | |||
} | |||
.wiki-link, .site-link, .view-link { | |||
background: var(--primary-color); | |||
color: white; | |||
text-decoration: none; | |||
font-weight: 600; | |||
padding: 8px 15px; | |||
border-radius: 6px; | |||
border: none; | |||
cursor: pointer; | |||
font-size: 13px; | |||
text-align: center; | |||
transition: var(--transition); | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 6px; | |||
} | |||
.site-link { | |||
background: #6c757d; | |||
} | |||
.view-link { | |||
background: var(--secondary-color); | |||
} | |||
.site-link:hover, .wiki-link:hover, .view-link:hover { | |||
opacity: 0.9; | |||
transform: translateY(-1px); | |||
} | |||
.recent-section { | |||
margin-top: 20px; | |||
background: var(--light-color); | |||
padding: 15px; | |||
border-radius: 8px; | |||
border: 1px solid var(--border-color); | |||
} | |||
.section-title { | |||
font-size: 16px; | |||
font-weight: 600; | |||
color: var(--primary-color); | |||
margin-bottom: 12px; | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
} | |||
.recent-items { | |||
display: flex; | |||
gap: 10px; | |||
overflow-x: auto; | |||
padding: 5px; | |||
} | |||
.recent-item { | |||
background: white; | |||
border-radius: 6px; | |||
padding: 12px; | |||
min-width: 150px; | |||
border: 1px solid var(--border-color); | |||
cursor: pointer; | |||
transition: var(--transition); | |||
text-align: center; | |||
} | |||
.recent-item:hover { | |||
transform: translateY(-2px); | |||
box-shadow: 0 2px 5px rgba(0,0,0,0.1); | |||
} | |||
.recent-title { | |||
font-weight: 600; | |||
font-size: 13px; | |||
color: var(--dark-color); | |||
} | |||
.recent-category { | |||
font-size: 11px; | |||
color: #6c757d; | |||
margin-top: 4px; | |||
} | |||
.empty-recent { | |||
text-align: center; | |||
color: #6c757d; | |||
padding: 15px; | |||
font-style: italic; | |||
width: 100%; | |||
} | |||
.loading-bar { | |||
height: 3px; | |||
background: linear-gradient(90deg, var(--accent-color), var(--primary-color)); | |||
width: 0%; | |||
transition: width 0.4s ease; | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
} | |||
@media (max-width: 768px) { | |||
body { | |||
padding: 5px; | |||
} | |||
.container { | |||
padding: 10px; | |||
} | |||
.filter-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
.content-section { | |||
height: 400px; | |||
} | |||
.action-buttons { | |||
flex-direction: column; | |||
} | |||
.wiki-link, .site-link, .view-link { | |||
width: 100%; | |||
} | |||
.stats-bar { | |||
flex-direction: column; | |||
gap: 8px; | |||
} | |||
.content-header { | |||
flex-direction: column; | |||
gap: 8px; | |||
align-items: flex-start; | |||
} | |||
.content-controls { | |||
width: 100%; | |||
justify-content: space-between; | |||
} | |||
.recent-items { | |||
flex-direction: column; | |||
} | |||
.recent-item { | |||
min-width: auto; | |||
} | |||
} | |||
</style> | |||
</head> | </head> | ||
<body> | <body> | ||
<div class="container"> | |||
<div class="header"> | |||
<h1>کتابخانه پدیا بایبل</h1> | |||
<div class="description"> | |||
در این بخش میتوانید کتابها و مقالات مختلف را مطالعه کنید. | |||
برای شروع، دستهبندی و سپس مورد مورد نظر خود را انتخاب نمایید. | |||
</div> | |||
</div> | |||
<div class="stats-bar"> | |||
<div class="stat-item"> | |||
<i class="fas fa-book"></i> | |||
<span>تعداد کتابها: <span class="stat-value" id="booksCount">4</span></span> | |||
</div> | |||
<div class="stat-item"> | |||
<i class="fas fa-file-alt"></i> | |||
<span>تعداد مقالات: <span class="stat-value" id="articlesCount">4</span></span> | |||
</div> | |||
<div class="stat-item"> | |||
<i class="fas fa-history"></i> | |||
<span>مطالب مطالعه شده: <span class="stat-value" id="readCount">0</span></span> | |||
</div> | |||
</div> | |||
<!-- فیلترهای آبشاری جدید --> | |||
<div class="filter-section"> | |||
<div class="filter-grid"> | |||
<div class="form-group"> | |||
<label for="categorySelect"><i class="fas fa-folder"></i> دستهبندی:</label> | |||
<select id="categorySelect"> | |||
<option value="">لطفاً دستهبندی انتخاب کنید</option> | |||
<option value="کتاب">کتاب</option> | |||
<option value="مقاله">مقاله</option> | |||
</select> | |||
</div> | |||
<div class="form-group"> | |||
<label for="typeSelect"><i class="fas fa-tags"></i> نوع محتوا:</label> | |||
<select id="typeSelect" disabled> | |||
<option value="">ابتدا دستهبندی را انتخاب کنید</option> | |||
</select> | |||
</div> | |||
<div class="form-group"> | |||
<label for="contentSelect"><i class="fas fa-book-open"></i> انتخاب محتوا:</label> | |||
<select id="contentSelect" disabled> | |||
<option value="">ابتدا نوع محتوا را انتخاب کنید</option> | |||
</select> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="content-section"> | |||
<div class="content-header"> | |||
<div class="content-title" id="contentTitle">هیچ محتوایی انتخاب نشده است</div> | |||
<div class="content-controls"> | |||
<button class="control-btn" id="zoomOut"><i class="fas fa-search-minus"></i> کوچکنمایی</button> | |||
<button class="control-btn" id="zoomIn"><i class="fas fa-search-plus"></i> بزرگنمایی</button> | |||
<button class="control-btn" id="refreshBtn"><i class="fas fa-redo"></i> بارگذاری مجدد</button> | |||
</div> | |||
</div> | |||
<div class="loading-bar" id="loadingBar"></div> | |||
<div class="iframe-container"> | |||
<div class="iframe-placeholder" id="iframePlaceholder"> | |||
<div> | |||
<i class="fas fa-book-open" style="font-size: 2.5rem; color: #6c757d; margin-bottom: 10px;"></i> | |||
<p>لطفاً یک کتاب یا مقاله از لیست انتخاب کنید</p> | |||
</div> | |||
</div> | |||
<iframe id="contentFrame" class="clean-frame" src="about:blank" style="display: none;"></iframe> | |||
</div> | |||
<div class="action-buttons"> | |||
<a id="siteLink" href="#" class="site-link" target="_blank" style="display: none;"> | |||
<i class="fas fa-external-link-alt"></i> | |||
مشاهده صفحه در سایت اصلی | |||
</a> | |||
<a id="wikiLink" href="#" class="wiki-link" target="_blank" style="display: none;"> | |||
<i class="fab fa-wikipedia-w"></i> | |||
مشاهده صفحه کامل در ویکی | |||
</a> | |||
<a id="viewLink" href="#" class="view-link" target="_blank" style="display: none;"> | |||
<i class="fas fa-eye"></i> | |||
مشاهده صفحه | |||
</a> | |||
</div> | |||
</div> | |||
<div class="recent-section"> | |||
<div class="section-title"> | |||
<i class="fas fa-history"></i> | |||
مطالب مطالعه شده اخیر | |||
</div> | |||
<div class="recent-items" id="recentItems"> | |||
<div class="empty-recent">هیچ مطلبی اخیراً مطالعه نشده است</div> | |||
</div> | |||
</div> | |||
</div> | </div> | ||
< | <script> | ||
// دادههای کتابها و مقالات با ساختار آبشاری | |||
const libraryData = { | |||
'کتاب': { | |||
'عهد عتیق': [ | |||
{ value: 'پیدایش', text: 'پیدایش' }, | |||
{ value: 'خروج', text: 'خروج' }, | |||
{ value: 'لاویان', text: 'لاویان' }, | |||
{ value: 'اعداد', text: 'اعداد' }, | |||
{ value: 'تثنیه', text: 'تثنیه' } | |||
], | |||
'عهد جدید': [ | |||
{ value: 'متی', text: 'انجیل متی' }, | |||
{ value: 'مرقس', text: 'انجیل مرقس' }, | |||
{ value: 'لوقا', text: 'انجیل لوقا' }, | |||
{ value: 'یوحنا', text: 'انجیل یوحنا' }, | |||
{ value: 'اعمال', text: 'اعمال رسولان' } | |||
], | |||
'کتابهای تاریخی': [ | |||
{ value: 'مزامیر', text: 'مزامیر' }, | |||
{ value: 'امثال', text: 'امثال سلیمان' }, | |||
{ value: 'جامعه', text: 'جامعه' } | |||
] | |||
}, | |||
'مقاله': { | |||
'مسیحشناسی': [ | |||
{ value: 'عیسی', text: 'عیسی مسیح' }, | |||
{ value: 'مسیح', text: 'مسیح' }, | |||
{ value: 'نجات', text: 'نجات' } | |||
], | |||
'الهیات': [ | |||
{ value: 'تثلیث', text: 'تثلیث' }, | |||
{ value: 'روح_القدس', text: 'روح القدس' }, | |||
{ value: 'فیض', text: 'فیض الهی' } | |||
], | |||
'کلیسا': [ | |||
{ value: 'کلیسا', text: 'کلیسا' }, | |||
{ value: 'شام_ربانی', text: 'شام ربانی' }, | |||
{ value: 'تعمید', text: 'تعمید' } | |||
] | |||
} | |||
}; | |||
// گرفتن عناصر DOM | |||
const elements = { | |||
categorySelect: document.getElementById('categorySelect'), | |||
typeSelect: document.getElementById('typeSelect'), | |||
contentSelect: document.getElementById('contentSelect'), | |||
contentFrame: document.getElementById('contentFrame'), | |||
iframePlaceholder: document.getElementById('iframePlaceholder'), | |||
wikiLink: document.getElementById('wikiLink'), | |||
siteLink: document.getElementById('siteLink'), | |||
viewLink: document.getElementById('viewLink'), | |||
contentTitle: document.getElementById('contentTitle'), | |||
booksCount: document.getElementById('booksCount'), | |||
articlesCount: document.getElementById('articlesCount'), | |||
readCount: document.getElementById('readCount'), | |||
zoomIn: document.getElementById('zoomIn'), | |||
zoomOut: document.getElementById('zoomOut'), | |||
refreshBtn: document.getElementById('refreshBtn'), | |||
loadingBar: document.getElementById('loadingBar'), | |||
recentItems: document.getElementById('recentItems') | |||
}; | |||
// متغیرهای حالت | |||
let currentCategory = ''; | |||
let currentType = ''; | |||
let currentContent = ''; | |||
let currentZoom = 100; | |||
let readItems = JSON.parse(localStorage.getItem('readItems')) || []; | |||
// تابع اصلی برای مقداردهی اولیه | |||
function init() { | |||
updateStats(); | |||
updateRecentItems(); | |||
setupEventListeners(); | |||
} | |||
// تنظیم event listenerها با الگوی آبشاری | |||
function setupEventListeners() { | |||
// رویداد تغییر دستهبندی | |||
elements.categorySelect.addEventListener('change', function() { | |||
currentCategory = this.value; | |||
if (currentCategory) { | |||
// فعال کردن و پر کردن select نوع محتوا | |||
elements.typeSelect.disabled = false; | |||
elements.typeSelect.innerHTML = '<option value="">لطفاً نوع محتوا انتخاب کنید</option>'; | |||
// پر کردن انواع محتوا بر اساس دستهبندی انتخاب شده | |||
const types = Object.keys(libraryData[currentCategory]); | |||
types.forEach(type => { | |||
const option = document.createElement('option'); | |||
option.value = type; | |||
option.textContent = type; | |||
elements.typeSelect.appendChild(option); | |||
}); | |||
// غیرفعال کردن و ریست کردن select محتوا | |||
elements.contentSelect.disabled = true; | |||
elements.contentSelect.innerHTML = '<option value="">ابتدا نوع محتوا را انتخاب کنید</option>'; | |||
resetContent(); | |||
} else { | |||
// اگر دستهبندی انتخاب نشد، همه چیز ریست شود | |||
resetAll(); | |||
} | |||
}); | |||
// رویداد تغییر نوع محتوا | |||
elements.typeSelect.addEventListener('change', function() { | |||
currentType = this.value; | |||
if (currentType) { | |||
// فعال کردن و پر کردن select محتوا | |||
elements.contentSelect.disabled = false; | |||
elements.contentSelect.innerHTML = '<option value="">لطفاً محتوا انتخاب کنید</option>'; | |||
// پر کردن محتواها بر اساس نوع انتخاب شده | |||
const contents = libraryData[currentCategory][currentType]; | |||
contents.forEach(content => { | |||
const option = document.createElement('option'); | |||
option.value = content.value; | |||
option.textContent = content.text; | |||
elements.contentSelect.appendChild(option); | |||
}); | |||
resetContent(); | |||
} else { | |||
// اگر نوع انتخاب نشد، select محتوا غیرفعال شود | |||
elements.contentSelect.disabled = true; | |||
elements.contentSelect.innerHTML = '<option value="">ابتدا نوع محتوا را انتخاب کنید</option>'; | |||
resetContent(); | |||
} | |||
}); | |||
// رویداد تغییر محتوا | |||
elements.contentSelect.addEventListener('change', function() { | |||
currentContent = this.value; | |||
if (currentContent) { | |||
showContent(currentContent, elements.contentSelect.options[elements.contentSelect.selectedIndex].text); | |||
} else { | |||
resetContent(); | |||
} | |||
}); | |||
// رویدادهای کنترل محتوا | |||
elements.zoomIn.addEventListener('click', function() { | |||
if (currentZoom < 150) { | |||
currentZoom += 10; | |||
applyZoom(); | |||
} | |||
}); | |||
elements.zoomOut.addEventListener('click', function() { | |||
if (currentZoom > 50) { | |||
currentZoom -= 10; | |||
applyZoom(); | |||
} | |||
}); | |||
elements.refreshBtn.addEventListener('click', function() { | |||
if (currentContent) { | |||
const contentText = elements.contentSelect.options[elements.contentSelect.selectedIndex].text; | |||
showContent(currentContent, contentText); | |||
} | |||
}); | |||
} | |||
// به روزرسانی آمار | |||
function updateStats() { | |||
let totalBooks = 0; | |||
let totalArticles = 0; | |||
// شمارش کتابها | |||
if (libraryData['کتاب']) { | |||
Object.values(libraryData['کتاب']).forEach(category => { | |||
totalBooks += category.length; | |||
}); | |||
} | |||
// شمارش مقالات | |||
if (libraryData['مقاله']) { | |||
Object.values(libraryData['مقاله']).forEach(category => { | |||
totalArticles += category.length; | |||
}); | |||
} | |||
elements.booksCount.textContent = totalBooks; | |||
elements.articlesCount.textContent = totalArticles; | |||
elements.readCount.textContent = readItems.length; | |||
} | |||
// به روزرسانی لیست مطالب مطالعه شده | |||
function updateRecentItems() { | |||
if (readItems.length === 0) { | |||
elements.recentItems.innerHTML = '<div class="empty-recent">هیچ مطلبی اخیراً مطالعه نشده است</div>'; | |||
return; | |||
} | |||
elements.recentItems.innerHTML = ''; | |||
const recentToShow = readItems.slice(-5).reverse(); | |||
recentToShow.forEach(item => { | |||
const recentItem = document.createElement('div'); | |||
recentItem.className = 'recent-item'; | |||
recentItem.innerHTML = ` | |||
<div class="recent-title">${item.text}</div> | |||
<div class="recent-category">${item.category} - ${item.type}</div> | |||
`; | |||
recentItem.addEventListener('click', function() { | |||
// تنظیم مجدد فیلترها بر اساس آیتم انتخاب شده | |||
elements.categorySelect.value = item.category; | |||
currentCategory = item.category; | |||
// پر کردن انواع محتوا | |||
elements.typeSelect.disabled = false; | |||
elements.typeSelect.innerHTML = '<option value="">لطفاً نوع محتوا انتخاب کنید</option>'; | |||
const types = Object.keys(libraryData[currentCategory]); | |||
types.forEach(type => { | |||
const option = document.createElement('option'); | |||
option.value = type; | |||
option.textContent = type; | |||
if (type === item.type) option.selected = true; | |||
elements.typeSelect.appendChild(option); | |||
}); | |||
currentType = item.type; | |||
// پر کردن محتواها | |||
elements.contentSelect.disabled = false; | |||
elements.contentSelect.innerHTML = '<option value="">لطفاً محتوا انتخاب کنید</option>'; | |||
const contents = libraryData[currentCategory][currentType]; | |||
contents.forEach(content => { | |||
const option = document.createElement('option'); | |||
option.value = content.value; | |||
option.textContent = content.text; | |||
if (content.value === item.value) option.selected = true; | |||
elements.contentSelect.appendChild(option); | |||
}); | |||
currentContent = item.value; | |||
showContent(item.value, item.text); | |||
}); | |||
elements.recentItems.appendChild(recentItem); | |||
}); | |||
} | |||
// نمایش محتوا | |||
function showContent(contentValue, contentText) { | |||
if (!contentValue) { | |||
resetContent(); | |||
return; | |||
} | |||
// افزودن به تاریخچه مطالعه | |||
const newItem = { | |||
value: contentValue, | |||
text: contentText, | |||
category: currentCategory, | |||
type: currentType | |||
}; | |||
if (!readItems.some(item => | |||
item.value === contentValue && | |||
item.category === currentCategory && | |||
item.type === currentType | |||
)) { | |||
readItems.push(newItem); | |||
localStorage.setItem('readItems', JSON.stringify(readItems)); | |||
updateStats(); | |||
updateRecentItems(); | |||
} | |||
const contentUrl = `https://www.pediabible.com/index.php/${contentValue}?action=render`; | |||
const wikiUrl = `https://www.pediabible.com/index.php/${contentValue}`; | |||
const siteUrl = `https://www.pediabible.com/index.php/${contentValue}`; | |||
elements.contentTitle.textContent = `${contentText} - ${currentType}`; | |||
elements.contentFrame.style.display = 'none'; | |||
elements.iframePlaceholder.style.display = 'flex'; | |||
elements.iframePlaceholder.innerHTML = ` | |||
<div> | |||
<i class="fas fa-spinner fa-spin" style="font-size: 2.5rem; color: #2c5530; margin-bottom: 10px;"></i> | |||
<p>در حال بارگذاری "${contentText}"...</p> | |||
</div> | |||
`; | |||
// شبیهسازی نوار پیشرفت | |||
let progress = 0; | |||
const progressInterval = setInterval(() => { | |||
progress += Math.random() * 15; | |||
if (progress > 90) progress = 90; | |||
elements.loadingBar.style.width = `${progress}%`; | |||
}, 200); | |||
elements.contentFrame.src = contentUrl; | |||
elements.contentFrame.onload = function() { | |||
clearInterval(progressInterval); | |||
elements.loadingBar.style.width = '100%'; | |||
setTimeout(() => { | |||
elements.loadingBar.style.width = '0%'; | |||
}, 500); | |||
elements.contentFrame.style.display = 'block'; | |||
elements.iframePlaceholder.style.display = 'none'; | |||
applyZoom(); | |||
}; | |||
elements.contentFrame.onerror = function() { | |||
clearInterval(progressInterval); | |||
elements.loadingBar.style.width = '0%'; | |||
elements.iframePlaceholder.style.display = 'flex'; | |||
elements.iframePlaceholder.innerHTML = ` | |||
<div> | |||
<i class="fas fa-exclamation-triangle" style="font-size: 2.5rem; color: #dc3545; margin-bottom: 10px;"></i> | |||
<p>خطا در بارگذاری "${contentText}". لطفاً دوباره تلاش کنید.</p> | |||
</div> | |||
`; | |||
elements.contentFrame.style.display = 'none'; | |||
}; | |||
// بهروزرسانی لینکها | |||
elements.wikiLink.href = wikiUrl; | |||
elements.wikiLink.style.display = 'flex'; | |||
elements.siteLink.href = siteUrl; | |||
elements.siteLink.style.display = 'flex'; | |||
elements.viewLink.href = contentUrl; | |||
elements.viewLink.style.display = 'flex'; | |||
} | |||
function resetContent() { | |||
elements.contentTitle.textContent = 'هیچ محتوایی انتخاب نشده است'; | |||
elements.contentFrame.style.display = 'none'; | |||
elements.iframePlaceholder.style.display = 'flex'; | |||
elements.iframePlaceholder.innerHTML = ` | |||
<div> | |||
<i class="fas fa-book-open" style="font-size: 2.5rem; color: #6c757d; margin-bottom: 10px;"></i> | |||
<p>لطفاً یک کتاب یا مقاله از لیست انتخاب کنید</p> | |||
</div> | |||
`; | |||
elements.wikiLink.style.display = 'none'; | |||
elements.siteLink.style.display = 'none'; | |||
elements.viewLink.style.display = 'none'; | |||
elements.contentFrame.src = 'about:blank'; | |||
} | |||
function resetAll() { | |||
elements.typeSelect.disabled = true; | |||
elements.typeSelect.innerHTML = '<option value="">ابتدا دستهبندی را انتخاب کنید</option>'; | |||
elements.contentSelect.disabled = true; | |||
elements.contentSelect.innerHTML = '<option value="">ابتدا نوع محتوا را انتخاب کنید</option>'; | |||
resetContent(); | |||
} | |||
function applyZoom() { | |||
elements.contentFrame.style.zoom = `${currentZoom}%`; | |||
} | |||
// شروع برنامه | |||
init(); | |||
</script> | |||
</body> | </body> | ||
</html> | </html> |
نسخهٔ ۱۲ اکتبر ۲۰۲۵، ساعت ۲۲:۲۱
<!DOCTYPE html>
کتابخانه پدیا بایبل
در این بخش میتوانید کتابها و مقالات مختلف را مطالعه کنید.
برای شروع، دستهبندی و سپس مورد مورد نظر خود را انتخاب نمایید.
هیچ محتوایی انتخاب نشده است
لطفاً یک کتاب یا مقاله از لیست انتخاب کنید
مطالب مطالعه شده اخیر
هیچ مطلبی اخیراً مطالعه نشده است