تست: تفاوت میان نسخهها
ظاهر
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
خط ۱۷۸: | خط ۱۷۸: | ||
background: white; | background: white; | ||
height: 600px; | height: 600px; | ||
position: relative; | |||
} | |||
.iframe-container { | |||
width: 100%; | |||
height: 100%; | |||
position: relative; | |||
} | } | ||
خط ۱۸۵: | خط ۱۹۲: | ||
border: none; | border: none; | ||
background: white; | background: white; | ||
display: block; | |||
} | } | ||
خط ۱۹۶: | خط ۲۰۴: | ||
text-align: center; | text-align: center; | ||
padding: 20px; | padding: 20px; | ||
background: white; | |||
} | } | ||
خط ۲۴۸: | خط ۲۵۷: | ||
<label for="categorySelect">دستهبندی:</label> | <label for="categorySelect">دستهبندی:</label> | ||
<select id="categorySelect"> | <select id="categorySelect"> | ||
<option value="">لطفاً دستهبندی انتخاب کنید</option> | |||
<option value="کتاب">کتاب</option> | <option value="کتاب">کتاب</option> | ||
<option value="مقاله">مقاله</option> | <option value="مقاله">مقاله</option> | ||
خط ۲۵۶: | خط ۲۶۶: | ||
<label for="bookSelect">انتخاب محتوا:</label> | <label for="bookSelect">انتخاب محتوا:</label> | ||
<div class="custom-select-container"> | <div class="custom-select-container"> | ||
<select id="bookSelect" class="custom-select"> | <select id="bookSelect" class="custom-select" disabled> | ||
<option value=""> | <option value="">ابتدا دستهبندی را انتخاب کنید</option> | ||
</select> | </select> | ||
خط ۲۷۴: | خط ۲۸۴: | ||
<div class="content-frame"> | <div class="content-frame"> | ||
<div | <div class="iframe-container"> | ||
<div class="iframe-placeholder" id="iframePlaceholder"> | <div class="iframe-placeholder" id="iframePlaceholder"> | ||
لطفاً یک کتاب یا مقاله از لیست انتخاب کنید | <div> | ||
<i class="fas fa-book-open" style="font-size: 3rem; color: #6c757d; margin-bottom: 15px;"></i> | |||
<p>لطفاً یک کتاب یا مقاله از لیست انتخاب کنید</p> | |||
</div> | |||
</div> | </div> | ||
<iframe id="contentFrame" class="clean-frame" src="about:blank" style="display: none;"></iframe> | <iframe id="contentFrame" class="clean-frame" src="about:blank" style="display: none;"></iframe> | ||
خط ۳۱۷: | خط ۳۳۰: | ||
let isDropdownOpen = false; | let isDropdownOpen = false; | ||
let currentCategory = ' | let currentCategory = ''; | ||
// پر کردن لیست کتابها بر اساس دستهبندی | // پر کردن لیست کتابها بر اساس دستهبندی | ||
خط ۳۲۳: | خط ۳۳۶: | ||
const selectedCategory = categorySelect.value; | const selectedCategory = categorySelect.value; | ||
currentCategory = selectedCategory; | currentCategory = selectedCategory; | ||
if (!selectedCategory) { | |||
// اگر دستهبندی انتخاب نشده | |||
bookSelect.disabled = true; | |||
bookSelect.innerHTML = '<option value="">ابتدا دستهبندی را انتخاب کنید</option>'; | |||
customSelect.textContent = 'ابتدا دستهبندی را انتخاب کنید'; | |||
showContent('', ''); | |||
return; | |||
} | |||
const books = booksData[selectedCategory]; | const books = booksData[selectedCategory]; | ||
// فعال کردن select | |||
bookSelect.disabled = false; | |||
// پاک کردن لیست فعلی | // پاک کردن لیست فعلی | ||
bookSelect.innerHTML = '<option value="">لطفاً انتخاب کنید</option>'; | bookSelect.innerHTML = '<option value="">لطفاً محتوا انتخاب کنید</option>'; | ||
// پر کردن لیست جدید | // پر کردن لیست جدید | ||
خط ۳۳۶: | خط ۳۶۲: | ||
}); | }); | ||
customSelect.textContent = 'لطفاً محتوا انتخاب کنید'; | |||
showContent('', ''); | |||
} | } | ||
// باز کردن/بستن dropdown | // باز کردن/بستن dropdown | ||
customSelect.addEventListener('click', function(e) { | customSelect.addEventListener('click', function(e) { | ||
if (bookSelect.disabled) return; | |||
e.stopPropagation(); | e.stopPropagation(); | ||
isDropdownOpen = !isDropdownOpen; | isDropdownOpen = !isDropdownOpen; | ||
خط ۳۷۳: | خط ۳۹۴: | ||
// پر کردن options در dropdown | // پر کردن options در dropdown | ||
function populateDropdownOptions(searchTerm = '') { | function populateDropdownOptions(searchTerm = '') { | ||
if (!currentCategory) return; | |||
const books = booksData[currentCategory]; | const books = booksData[currentCategory]; | ||
const searchLower = searchTerm.toLowerCase(); | const searchLower = searchTerm.toLowerCase(); | ||
خط ۴۲۶: | خط ۴۴۹: | ||
contentFrame.style.display = 'none'; | contentFrame.style.display = 'none'; | ||
iframePlaceholder.style.display = 'flex'; | iframePlaceholder.style.display = 'flex'; | ||
iframePlaceholder. | iframePlaceholder.innerHTML = ` | ||
<div> | |||
<i class="fas fa-book-open" style="font-size: 3rem; color: #6c757d; margin-bottom: 15px;"></i> | |||
<p>لطفاً یک کتاب یا مقاله از لیست انتخاب کنید</p> | |||
</div> | |||
`; | |||
wikiLink.style.display = 'none'; | wikiLink.style.display = 'none'; | ||
return; | return; | ||
خط ۴۳۷: | خط ۴۶۵: | ||
contentFrame.style.display = 'none'; | contentFrame.style.display = 'none'; | ||
iframePlaceholder.style.display = 'flex'; | iframePlaceholder.style.display = 'flex'; | ||
iframePlaceholder. | iframePlaceholder.innerHTML = ` | ||
<div> | |||
<i class="fas fa-spinner fa-spin" style="font-size: 3rem; color: #3e6f73; margin-bottom: 15px;"></i> | |||
<p>در حال بارگذاری محتوا...</p> | |||
</div> | |||
`; | |||
// تنظیم iframe | // تنظیم iframe | ||
خط ۴۵۱: | خط ۴۸۴: | ||
contentFrame.onerror = function() { | contentFrame.onerror = function() { | ||
iframePlaceholder.style.display = 'flex'; | iframePlaceholder.style.display = 'flex'; | ||
iframePlaceholder. | iframePlaceholder.innerHTML = ` | ||
<div> | |||
<i class="fas fa-exclamation-triangle" style="font-size: 3rem; color: #dc3545; margin-bottom: 15px;"></i> | |||
<p>خطا در بارگذاری محتوا. لطفاً دوباره تلاش کنید.</p> | |||
</div> | |||
`; | |||
contentFrame.style.display = 'none'; | contentFrame.style.display = 'none'; | ||
}; | }; | ||
خط ۴۷۱: | خط ۵۰۹: | ||
showContent(selectedOption.value, selectedOption.text); | showContent(selectedOption.value, selectedOption.text); | ||
} else { | } else { | ||
customSelect.textContent = 'لطفاً انتخاب کنید'; | customSelect.textContent = 'لطفاً محتوا انتخاب کنید'; | ||
showContent('', ''); | showContent('', ''); | ||
} | } | ||
}); | }); | ||
// بارگذاری اولیه | // بارگذاری اولیه - هیچ چیزی انتخاب نشده | ||
updateBookList(); | updateBookList(); | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |
نسخهٔ ۱۲ اکتبر ۲۰۲۵، ساعت ۱۹:۴۹
<!DOCTYPE html>
کتابخانه پدیا بایبل
در این بخش میتوانید کتابها و مقالات مختلف را مطالعه کنید.
برای شروع، دستهبندی و سپس مورد مورد نظر خود را انتخاب نمایید.
لطفاً یک کتاب یا مقاله از لیست انتخاب کنید