تست: تفاوت میان نسخهها
ظاهر
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
خط ۴: | خط ۴: | ||
<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.4.0/css/all.min.css"> | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | ||
<style> | <style> | ||
خط ۱۱: | خط ۱۱: | ||
padding: 0; | padding: 0; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
body { | body { | ||
font-family: | font-family: Tahoma, Arial, sans-serif; | ||
background: # | background-color: #f6f6f6; | ||
color: | color: #333; | ||
line-height: 1.6; | line-height: 1.6; | ||
padding: 10px; | padding: 10px; | ||
} | } | ||
.container { | .container { | ||
max-width: | max-width: 100%; | ||
margin: 0 auto; | margin: 0 auto; | ||
background: white; | background: white; | ||
padding: 15px; | padding: 15px; | ||
border-radius: 8px; | border-radius: 8px; | ||
box-shadow: 0 | box-shadow: 0 0 10px rgba(0,0,0,0.1); | ||
} | } | ||
.header { | .header { | ||
background | background-color: #3e6f73; | ||
color: white; | color: white; | ||
padding: | padding: 15px; | ||
border-radius: 8px; | border-radius: 8px; | ||
margin-bottom: | margin-bottom: 15px; | ||
text-align: center; | text-align: center; | ||
} | } | ||
خط ۵۵: | خط ۴۲: | ||
margin: 0; | margin: 0; | ||
font-size: 24px; | font-size: 24px; | ||
} | } | ||
خط ۶۴: | خط ۵۰: | ||
} | } | ||
. | .filter-section { | ||
margin-bottom: 15px; | margin-bottom: 15px; | ||
background: #f8f9fa; | |||
background: | |||
padding: 15px; | padding: 15px; | ||
border-radius: 8px; | border-radius: 8px; | ||
border: 1px solid | border: 1px solid #dee2e6; | ||
} | } | ||
.filter- | .filter-row { | ||
display: | display: flex; | ||
gap: 10px; | |||
gap: | margin-bottom: 10px; | ||
margin-bottom: | |||
} | } | ||
.form-group { | .form-group { | ||
flex: 1; | |||
flex | |||
} | } | ||
label { | label { | ||
display: block; | display: block; | ||
margin-bottom: | margin-bottom: 5px; | ||
font-weight: | font-weight: bold; | ||
color: | color: #495057; | ||
font-size: 14px; | font-size: 14px; | ||
} | } | ||
خط ۱۱۷: | خط ۷۸: | ||
select { | select { | ||
width: 100%; | width: 100%; | ||
padding: | padding: 8px; | ||
border: 1px solid | border: 1px solid #ced4da; | ||
border-radius: | border-radius: 4px; | ||
font-size: 14px; | font-size: 14px; | ||
background: white; | background: white; | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
.content-frame { | |||
.content- | |||
margin-top: 15px; | margin-top: 15px; | ||
border: 1px solid | border: 1px solid #dee2e6; | ||
border-radius: 8px; | border-radius: 8px; | ||
overflow: hidden; | overflow: hidden; | ||
background: white; | background: white; | ||
height: 500px; | height: 500px; | ||
} | } | ||
.iframe-container { | .iframe-container { | ||
width: 100%; | width: 100%; | ||
height: 100%; | |||
} | } | ||
خط ۲۰۵: | خط ۱۱۳: | ||
height: 100%; | height: 100%; | ||
color: #6c757d; | color: #6c757d; | ||
font-size: | font-size: 16px; | ||
text-align: center; | text-align: center; | ||
padding: 15px; | padding: 15px; | ||
background: white; | background: white; | ||
} | } | ||
خط ۲۱۶: | خط ۱۲۳: | ||
justify-content: space-between; | justify-content: space-between; | ||
align-items: center; | align-items: center; | ||
padding: 12px | padding: 12px; | ||
background-color: | background-color: #f8f9fa; | ||
border-top: 1px solid | border-top: 1px solid #dee2e6; | ||
gap: 10px; | gap: 10px; | ||
} | } | ||
.wiki-link, .site | .wiki-link, .site-link { | ||
background | background-color: #3e6f73; | ||
color: white; | color: white; | ||
text-decoration: none; | text-decoration: none; | ||
font-weight: | font-weight: bold; | ||
padding: 8px | padding: 8px 16px; | ||
border-radius: | border-radius: 4px; | ||
border: none; | border: none; | ||
cursor: pointer; | cursor: pointer; | ||
font-size: | font-size: 14px; | ||
text-align: center; | text-align: center; | ||
flex: 1; | |||
} | } | ||
.site-link { | .site-link { | ||
background: #6c757d | background-color: #6c757d; | ||
} | } | ||
. | .site-link:hover { | ||
background-color: #5a6268; | |||
} | } | ||
. | .wiki-link:hover { | ||
background-color: #2d5257; | |||
} | } | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.filter-row { | |||
flex-direction: column; | |||
.filter- | |||
} | } | ||
.content- | .content-frame { | ||
height: 400px; | height: 400px; | ||
} | } | ||
خط ۳۴۵: | خط ۱۶۸: | ||
} | } | ||
.wiki-link, .site | .wiki-link, .site-link { | ||
width: 100%; | width: 100%; | ||
} | } | ||
} | } | ||
خط ۳۸۵: | خط ۱۸۴: | ||
</div> | </div> | ||
<div class="filter-section"> | <div class="filter-section"> | ||
<div class="filter- | <div class="filter-row"> | ||
<div class="form-group"> | <div class="form-group"> | ||
<label for="categorySelect" | <label for="categorySelect">دستهبندی:</label> | ||
<select id="categorySelect"> | <select id="categorySelect"> | ||
<option value="">لطفاً دستهبندی انتخاب کنید</option> | <option value="">لطفاً دستهبندی انتخاب کنید</option> | ||
خط ۴۱۳: | خط ۱۹۶: | ||
<div class="form-group"> | <div class="form-group"> | ||
<label for=" | <label for="contentSelect">انتخاب محتوا:</label> | ||
<select id=" | <select id="contentSelect" disabled> | ||
<option value="">ابتدا دستهبندی را انتخاب کنید</option> | <option value="">ابتدا دستهبندی را انتخاب کنید</option> | ||
</select> | </select> | ||
</div> | </div> | ||
خط ۴۲۸: | خط ۲۰۴: | ||
</div> | </div> | ||
<div class="content- | <div class="content-frame"> | ||
<div class="iframe-container"> | <div class="iframe-container"> | ||
<div class="iframe-placeholder" id="iframePlaceholder"> | <div class="iframe-placeholder" id="iframePlaceholder"> | ||
خط ۴۴۹: | خط ۲۱۶: | ||
<div class="action-buttons"> | <div class="action-buttons"> | ||
<a id="siteLink" href="#" class="site-link" target="_blank" style="display: none;"> | <a id="siteLink" href="#" class="site-link" target="_blank" style="display: none;"> | ||
مشاهده صفحه در سایت اصلی | مشاهده صفحه در سایت اصلی | ||
</a> | </a> | ||
<a id="wikiLink" href="#" class="wiki-link" target="_blank" style="display: none;"> | <a id="wikiLink" href="#" class="wiki-link" target="_blank" style="display: none;"> | ||
مشاهده صفحه کامل در ویکی | مشاهده صفحه کامل در ویکی | ||
</a> | </a> | ||
</div> | </div> | ||
</div> | </div> | ||
خط ۴۷۵: | خط ۲۲۶: | ||
<script> | <script> | ||
// دادههای | // دادههای ساده | ||
const | const booksData = { | ||
'کتاب': | 'کتاب': [ | ||
{ value: 'عیسی', text: 'عیسی' }, | |||
{ value: 'انجیل_متی', text: 'انجیل متی' }, | |||
{ value: 'مزامیر', text: 'مزامیر' }, | |||
{ value: 'پیدایش', text: 'پیدایش' } | |||
], | |||
'مقاله': [ | |||
{ value: 'مسیح', text: 'مسیح' }, | |||
{ value: 'تثلیث', text: 'تثلیث' }, | |||
{ value: 'نجات', text: 'نجات' }, | |||
{ value: 'روح_القدس', text: 'روح القدس' } | |||
] | |||
'مقاله': | |||
}; | }; | ||
// | // عناصر | ||
const | const categorySelect = document.getElementById('categorySelect'); | ||
const contentSelect = document.getElementById('contentSelect'); | |||
const contentFrame = document.getElementById('contentFrame'); | |||
const iframePlaceholder = document.getElementById('iframePlaceholder'); | |||
const wikiLink = document.getElementById('wikiLink'); | |||
const siteLink = document.getElementById('siteLink'); | |||
// وقتی دستهبندی تغییر کرد | |||
categorySelect.addEventListener('change', function() { | |||
const selectedCategory = this.value; | |||
if (!selectedCategory) { | |||
if ( | contentSelect.disabled = true; | ||
contentSelect.innerHTML = '<option value="">ابتدا دستهبندی را انتخاب کنید</option>'; | |||
resetContent(); | |||
return; | return; | ||
} | } | ||
// پر کردن لیست محتواها | |||
contentSelect.disabled = false; | |||
contentSelect.innerHTML = '<option value="">لطفاً محتوا انتخاب کنید</option>'; | |||
booksData[selectedCategory].forEach(item => { | |||
const option = document.createElement('option'); | |||
option.value = item.value; | |||
option.textContent = item.text; | |||
contentSelect.appendChild(option); | |||
}); | }); | ||
} | |||
resetContent(); | |||
}); | |||
// | // وقتی محتوا تغییر کرد | ||
function | contentSelect.addEventListener('change', function() { | ||
if (! | const selectedValue = this.value; | ||
const selectedText = this.options[this.selectedIndex].text; | |||
if (!selectedValue) { | |||
resetContent(); | resetContent(); | ||
return; | return; | ||
} | } | ||
// | showContent(selectedValue, selectedText); | ||
const | }); | ||
// نمایش محتوا | |||
function showContent(bookValue, bookText) { | |||
const contentUrl = `https://www.pediabible.com/index.php/${bookValue}?action=render`; | |||
const wikiUrl = `https://www.pediabible.com/index.php/${bookValue}`; | |||
const siteUrl = `https://www.pediabible.com/index.php/${bookValue}`; | |||
// نمایش loading | |||
contentFrame.style.display = 'none'; | |||
iframePlaceholder.style.display = 'flex'; | |||
iframePlaceholder.innerHTML = ` | |||
<div> | <div> | ||
<i class="fas fa-spinner fa-spin" style="font-size: 2.5rem; color: # | <i class="fas fa-spinner fa-spin" style="font-size: 2.5rem; color: #3e6f73; margin-bottom: 10px;"></i> | ||
<p>در حال بارگذاری "${ | <p>در حال بارگذاری "${bookText}"...</p> | ||
</div> | </div> | ||
`; | `; | ||
// | // بارگذاری محتوا | ||
contentFrame.src = contentUrl; | |||
contentFrame.onload = function() { | |||
contentFrame.style.display = 'block'; | |||
iframePlaceholder.style.display = 'none'; | |||
}; | }; | ||
contentFrame.onerror = function() { | |||
iframePlaceholder.style.display = 'flex'; | |||
iframePlaceholder.innerHTML = ` | |||
<div> | <div> | ||
<i class="fas fa-exclamation-triangle" style="font-size: 2.5rem; color: #dc3545; margin-bottom: 10px;"></i> | <i class="fas fa-exclamation-triangle" style="font-size: 2.5rem; color: #dc3545; margin-bottom: 10px;"></i> | ||
<p>خطا در بارگذاری "${ | <p>خطا در بارگذاری "${bookText}". لطفاً دوباره تلاش کنید.</p> | ||
</div> | </div> | ||
`; | `; | ||
contentFrame.style.display = 'none'; | |||
}; | }; | ||
// بهروزرسانی لینکها | // بهروزرسانی لینکها | ||
wikiLink.href = wikiUrl; | |||
wikiLink.style.display = 'inline-block'; | |||
siteLink.href = siteUrl; | |||
siteLink.style.display = 'inline-block'; | |||
} | } | ||
function resetContent() { | function resetContent() { | ||
contentFrame.style.display = 'none'; | |||
iframePlaceholder.style.display = 'flex'; | |||
iframePlaceholder.innerHTML = ` | |||
<div> | <div> | ||
<i class="fas fa-book-open" style="font-size: 2.5rem; color: #6c757d; margin-bottom: 10px;"></i> | <i class="fas fa-book-open" style="font-size: 2.5rem; color: #6c757d; margin-bottom: 10px;"></i> | ||
خط ۸۲۱: | خط ۳۴۰: | ||
</div> | </div> | ||
`; | `; | ||
wikiLink.style.display = 'none'; | |||
siteLink.style.display = 'none'; | |||
contentFrame.src = 'about:blank'; | |||
} | } | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |
نسخهٔ ۱۲ اکتبر ۲۰۲۵، ساعت ۲۲:۲۷
<!DOCTYPE html>
کتابخانه پدیا بایبل
در این بخش میتوانید کتابها و مقالات مختلف را مطالعه کنید.
برای شروع، دستهبندی و سپس مورد مورد نظر خود را انتخاب نمایید.
لطفاً یک کتاب یا مقاله از لیست انتخاب کنید