تست: تفاوت میان نسخهها
ظاهر
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
خط ۱۴: | خط ۱۴: | ||
--dark-color: #3E2723; | --dark-color: #3E2723; | ||
--border-color: #D2B48C; | --border-color: #D2B48C; | ||
} | } | ||
خط ۲۵: | خط ۲۴: | ||
body { | body { | ||
font-family: Tahoma, Arial, sans-serif; | font-family: Tahoma, Arial, sans-serif; | ||
background-color: # | background-color: #f6f6f6; | ||
color: | color: #333; | ||
line-height: 1.6; | line-height: 1.6; | ||
padding: | padding: 20px; | ||
} | } | ||
خط ۴۵: | خط ۳۳: | ||
max-width: 1200px; | max-width: 1200px; | ||
margin: 0 auto; | margin: 0 auto; | ||
padding: | background: white; | ||
padding: 20px; | |||
border-radius: 8px; | |||
box-shadow: 0 0 10px rgba(0,0,0,0.1); | |||
} | } | ||
. | .header { | ||
background-color: white; | |||
color: #3e6f73; | |||
padding: 20px; | |||
border-radius: 8px; | |||
margin-bottom: 20px; | |||
text-align: center; | text-align: center; | ||
border: 2px solid #3e6f73; | |||
border | |||
} | } | ||
h1 { | |||
margin: 0; | |||
font-size: 28px; | |||
color: #3e6f73; | |||
font-weight: | font-weight: bold; | ||
} | } | ||
.description { | .description { | ||
color: #666; | color: #666; | ||
font-size: | font-size: 16px; | ||
margin-top: | margin-top: 10px; | ||
line-height: 1.6; | |||
} | |||
.filter-section { | |||
margin-bottom: 20px; | |||
} | } | ||
. | .filter-row { | ||
display: | display: flex; | ||
gap: 15px; | gap: 15px; | ||
margin-bottom: | margin-bottom: 15px; | ||
} | |||
.form-group { | |||
flex: 1; | |||
} | |||
label { | |||
display: block; | |||
margin-bottom: 5px; | |||
font-weight: bold; | |||
color: #495057; | |||
} | |||
/* استایل برای select با جستجو */ | |||
.custom-select-container { | |||
position: relative; | |||
} | |||
.custom-select { | |||
width: 100%; | |||
padding: 10px; | |||
border: 1px solid #ced4da; | |||
border-radius: 4px; | |||
font-size: 16px; | |||
background: white; | background: white; | ||
cursor: pointer; | |||
appearance: none; | |||
-webkit-appearance: none; | |||
-moz-appearance: none; | |||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); | |||
background-repeat: no-repeat; | |||
background-position: left 10px center; | |||
background-size: 16px; | |||
padding-left: 35px; | |||
} | } | ||
. | .custom-select-dropdown { | ||
position: absolute; | |||
top: 100%; | |||
left: 0; | |||
right: 0; | |||
background: white; | background: white; | ||
border-radius: | border: 1px solid #ced4da; | ||
border-radius: 4px; | |||
margin-top: 5px; | |||
box-shadow: 0 4px 12px rgba(0,0,0,0.15); | |||
z-index: 1000; | |||
display: none; | |||
max-height: 300px; | |||
overflow: hidden; | |||
} | } | ||
. | .search-box { | ||
padding: 10px; | |||
border-bottom: 1px solid #eee; | |||
background: #f8f9fa; | |||
border-bottom: 1px solid | |||
} | } | ||
.search-box input { | |||
width: 100%; | width: 100%; | ||
padding: 8px 12px; | |||
border: 1px solid #ddd; | |||
border-radius: 4px; | |||
font-size: 14px; | |||
} | |||
.options-container { | |||
max-height: 250px; | |||
overflow-y: auto; | |||
} | |||
.option-item { | |||
padding: 10px 12px; | padding: 10px 12px; | ||
cursor: pointer; | cursor: pointer; | ||
border-bottom: 1px solid #f0f0f0; | |||
transition: background-color 0.2s; | |||
} | } | ||
.option-item:hover { | |||
background-color: #e9ecef; | |||
} | } | ||
. | .option-item:last-child { | ||
border-bottom: none; | |||
} | |||
.option-item.selected { | |||
background-color: #3e6f73; | |||
color: white; | |||
} | |||
select { | |||
width: 100%; | |||
padding: 10px; | |||
border: 1px solid #ced4da; | |||
border-radius: 4px; | |||
font-size: 16px; | |||
background: white; | background: white; | ||
} | } | ||
.content- | .content-frame { | ||
margin-top: 20px; | |||
border: 1px solid #dee2e6; | |||
border-radius: 8px; | |||
overflow: hidden; | |||
background: white; | |||
height: 600px; | |||
} | } | ||
. | .clean-frame { | ||
width: 100%; | width: 100%; | ||
height: | height: 100%; | ||
border: | border: none; | ||
background: white; | background: white; | ||
} | } | ||
. | .iframe-placeholder { | ||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
height: 100%; | |||
color: #6c757d; | |||
font-size: 18px; | |||
text-align: center; | |||
padding: 20px; | |||
} | |||
.action-buttons { | |||
display: flex; | display: flex; | ||
justify-content: flex-end; | justify-content: flex-end; | ||
align-items: center; | align-items: center; | ||
padding: 15px; | |||
background-color: #f8f9fa; | |||
border-top: 1px solid #dee2e6; | |||
} | } | ||
.wiki-link { | .wiki-link { | ||
background-color: #3e6f73; | |||
background-color: | |||
color: white; | color: white; | ||
text-decoration: none; | text-decoration: none; | ||
border-radius: | font-weight: bold; | ||
padding: 10px 20px; | |||
border: 1px solid #3e6f73; | |||
border-radius: 4px; | |||
transition: all 0.3s; | transition: all 0.3s; | ||
} | } | ||
.wiki-link:hover { | .wiki-link:hover { | ||
background-color: #2d5257; | background-color: #2d5257; | ||
color: white; | |||
} | } | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
. | .filter-row { | ||
flex-direction: column; | |||
} | } | ||
.content-frame { | |||
.content- | height: 500px; | ||
height: | |||
} | } | ||
} | } | ||
خط ۲۲۲: | خط ۲۳۵: | ||
<body> | <body> | ||
<div class="container"> | <div class="container"> | ||
<div class=" | <div class="header"> | ||
<h1>کتابخانه پدیا بایبل</h1> | <h1>کتابخانه پدیا بایبل</h1> | ||
< | <div class="description"> | ||
در این بخش میتوانید کتابها و مقالات مختلف را مطالعه کنید. | |||
برای شروع، دستهبندی و سپس مورد مورد نظر خود را انتخاب نمایید. | |||
</div> | |||
</div> | </div> | ||
<div id="content- | <div class="filter-section"> | ||
< | <div class="filter-row"> | ||
<div class="form-group"> | |||
<label for="categorySelect">دستهبندی:</label> | |||
<select id="categorySelect"> | |||
<option value="کتاب">کتاب</option> | |||
<option value="مقاله">مقاله</option> | |||
</select> | |||
</div> | |||
<div class="form-group"> | |||
<label for="bookSelect">انتخاب محتوا:</label> | |||
<div class="custom-select-container"> | |||
<select id="bookSelect" class="custom-select"> | |||
<option value="">لطفاً انتخاب کنید</option> | |||
</select> | |||
<div class="custom-select-dropdown" id="customDropdown"> | |||
<div class="search-box"> | |||
<input type="text" id="dropdownSearch" placeholder="جستجو در محتواها..."> | |||
</div> | |||
<div class="options-container" id="optionsContainer"> | |||
<!-- options here will be populated by JavaScript --> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="content-frame"> | |||
<div id="iframeContainer"> | |||
<div class="iframe-placeholder" id="iframePlaceholder"> | |||
لطفاً یک کتاب یا مقاله از لیست انتخاب کنید | |||
</div> | |||
<iframe id="contentFrame" class="clean-frame" src="about:blank" style="display: none;"></iframe> | |||
</div> | |||
<div class="action-buttons"> | |||
<a id="wikiLink" href="#" class="wiki-link" target="_blank" style="display: none;"> | |||
مشاهده صفحه کامل در ویکی | |||
</a> | |||
</div> | |||
</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: 'روح القدس' } | |||
] | ] | ||
}; | }; | ||
// | // عناصر DOM | ||
function | const categorySelect = document.getElementById('categorySelect'); | ||
const | const bookSelect = document.getElementById('bookSelect'); | ||
const customSelect = document.querySelector('.custom-select'); | |||
const customDropdown = document.getElementById('customDropdown'); | |||
const dropdownSearch = document.getElementById('dropdownSearch'); | |||
const optionsContainer = document.getElementById('optionsContainer'); | |||
const contentFrame = document.getElementById('contentFrame'); | |||
const iframePlaceholder = document.getElementById('iframePlaceholder'); | |||
const wikiLink = document.getElementById('wikiLink'); | |||
let isDropdownOpen = false; | |||
let currentCategory = 'کتاب'; | |||
// پر کردن لیست کتابها بر اساس دستهبندی | |||
function updateBookList() { | |||
const selectedCategory = categorySelect.value; | |||
currentCategory = selectedCategory; | |||
const books = booksData[selectedCategory]; | |||
// پاک کردن لیست فعلی | |||
bookSelect.innerHTML = '<option value="">لطفاً انتخاب کنید</option>'; | |||
// پر کردن لیست جدید | |||
books.forEach(book => { | |||
const option = document.createElement('option'); | |||
option.value = book.value; | |||
option.textContent = book.text; | |||
bookSelect.appendChild(option); | |||
}); | |||
// | // نمایش اولین کتاب به صورت پیشفرض | ||
if (books.length > 0) { | |||
bookSelect.value = books[0].value; | |||
customSelect.textContent = books[0].text; | |||
showContent(books[0].value, books[0].text); | |||
} else { | |||
customSelect.textContent = 'لطفاً انتخاب کنید'; | |||
showContent('', ''); | |||
} | |||
} | |||
// باز کردن/بستن dropdown | |||
customSelect.addEventListener('click', function(e) { | |||
e.stopPropagation(); | |||
isDropdownOpen = !isDropdownOpen; | |||
customDropdown.style.display = isDropdownOpen ? 'block' : 'none'; | |||
if (isDropdownOpen) { | |||
populateDropdownOptions(); | |||
dropdownSearch.value = ''; | |||
dropdownSearch.focus(); | |||
} | |||
}); | |||
// بستن dropdown وقتی کلیک خارج شود | |||
document.addEventListener('click', function() { | |||
isDropdownOpen = false; | |||
customDropdown.style.display = 'none'; | |||
}); | |||
// جلوگیری از بستن وقتی روی dropdown کلیک شود | |||
customDropdown.addEventListener('click', function(e) { | |||
e.stopPropagation(); | |||
}); | |||
// پر کردن options در dropdown | |||
function populateDropdownOptions(searchTerm = '') { | |||
const books = booksData[currentCategory]; | |||
const searchLower = searchTerm.toLowerCase(); | |||
optionsContainer.innerHTML = ''; | |||
const filteredBooks = books.filter(book => | |||
!searchTerm || book.text.toLowerCase().includes(searchLower) | |||
); | |||
filteredBooks.forEach(book => { | |||
const optionItem = document.createElement('div'); | |||
optionItem.className = 'option-item'; | |||
optionItem.textContent = book.text; | |||
optionItem.setAttribute('data-value', book.value); | |||
if ( | if (book.value === bookSelect.value) { | ||
optionItem.classList.add('selected'); | |||
} | } | ||
optionItem.addEventListener('click', function() { | |||
bookSelect.value = this.getAttribute('data-value'); | |||
customSelect.textContent = this.textContent; | |||
isDropdownOpen = false; | |||
customDropdown.style.display = 'none'; | |||
if (bookSelect.value) { | |||
showContent(bookSelect.value, this.textContent); | |||
} | |||
}); | |||
optionsContainer.appendChild(optionItem); | |||
}); | |||
if (filteredBooks.length === 0) { | |||
const noResult = document.createElement('div'); | |||
noResult.className = 'option-item'; | |||
noResult.textContent = 'نتیجهای یافت نشد'; | |||
noResult.style.color = '#999'; | |||
noResult.style.cursor = 'default'; | |||
optionsContainer.appendChild(noResult); | |||
} | } | ||
} | |||
function | // جستجو در dropdown | ||
dropdownSearch.addEventListener('input', function() { | |||
populateDropdownOptions(this.value); | |||
}); | |||
// نمایش محتوا در iframe | |||
function showContent(bookValue, bookText) { | |||
if (!bookValue) { | |||
contentFrame.style.display = 'none'; | |||
iframePlaceholder.style.display = 'flex'; | |||
iframePlaceholder.textContent = 'لطفاً یک کتاب یا مقاله از لیست انتخاب کنید'; | |||
wikiLink.style.display = 'none'; | |||
return; | |||
} | } | ||
const contentUrl = `https://www.pediabible.com/index.php/${bookValue}?action=render`; | |||
const wikiUrl = `https://www.pediabible.com/index.php/${bookValue}`; | |||
// نمایش حالت لودینگ | |||
contentFrame.style.display = 'none'; | |||
iframePlaceholder.style.display = 'flex'; | |||
iframePlaceholder.textContent = 'در حال بارگذاری محتوا...'; | |||
// تنظیم iframe | |||
contentFrame.src = contentUrl; | |||
// وقتی iframe لود شد | |||
contentFrame.onload = function() { | |||
contentFrame.style.display = 'block'; | |||
iframePlaceholder.style.display = 'none'; | |||
}; | |||
// اگر iframe خطا داد | |||
contentFrame.onerror = function() { | |||
iframePlaceholder.style.display = 'flex'; | |||
iframePlaceholder.textContent = 'خطا در بارگذاری محتوا. لطفاً دوباره تلاش کنید.'; | |||
contentFrame.style.display = 'none'; | |||
}; | |||
// بهروزرسانی لینک ویکی | |||
wikiLink.href = wikiUrl; | |||
wikiLink.textContent = `مشاهده صفحه کامل "${bookText}"`; | |||
wikiLink.style.display = 'inline-block'; | |||
} | |||
// رویداد تغییر دستهبندی | |||
categorySelect.addEventListener('change', updateBookList); | |||
// | // رویداد تغییر کتاب | ||
bookSelect.addEventListener('change', function() { | |||
if (this.selectedIndex > 0) { | |||
const selectedOption = this.options[this.selectedIndex]; | |||
customSelect.textContent = selectedOption.text; | |||
showContent(selectedOption.value, selectedOption.text); | |||
} else { | |||
customSelect.textContent = 'لطفاً انتخاب کنید'; | |||
showContent('', ''); | |||
} | |||
}); | }); | ||
// | // بارگذاری اولیه | ||
updateBookList(); | |||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |
نسخهٔ ۱۲ اکتبر ۲۰۲۵، ساعت ۱۹:۳۸
<!DOCTYPE html>
کتابخانه پدیا بایبل
در این بخش میتوانید کتابها و مقالات مختلف را مطالعه کنید.
برای شروع، دستهبندی و سپس مورد مورد نظر خود را انتخاب نمایید.
لطفاً یک کتاب یا مقاله از لیست انتخاب کنید