تست: تفاوت میان نسخهها
ظاهر
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
خط ۱۰: | خط ۱۰: | ||
padding: 0; | padding: 0; | ||
box-sizing: border-box; | 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 { | body { | ||
font-family: Tahoma, Arial, sans-serif; | font-family: 'Segoe UI', Tahoma, Arial, sans-serif; | ||
background- | background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%); | ||
color: | color: var(--text-color); | ||
line-height: 1.6; | line-height: 1.6; | ||
padding: | padding: 15px; | ||
min-height: 100vh; | min-height: 100vh; | ||
} | } | ||
.container { | .container { | ||
max-width: | max-width: 1200px; | ||
margin: 0 auto; | margin: 0 auto; | ||
background: white; | background: white; | ||
padding: | padding: 20px; | ||
border-radius: | border-radius: 12px; | ||
box-shadow: 0 0 | box-shadow: var(--shadow); | ||
position: relative; | |||
overflow: hidden; | |||
} | |||
.container::before { | |||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
width: 100%; | |||
height: 4px; | |||
background: linear-gradient(90deg, var(--accent-color), var(--primary-color)); | |||
} | } | ||
.header { | .header { | ||
background-color | background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | ||
color: | color: white; | ||
padding: | padding: 25px; | ||
border-radius: | border-radius: 10px; | ||
margin-bottom: | margin-bottom: 25px; | ||
text-align: center; | text-align: center; | ||
position: relative; | |||
overflow: hidden; | |||
} | |||
.header::before { | |||
content: ''; | |||
position: absolute; | |||
top: -50%; | |||
right: -50%; | |||
width: 100%; | |||
height: 100%; | |||
background: rgba(255,255,255,0.1); | |||
transform: rotate(30deg); | |||
} | } | ||
h1 { | h1 { | ||
margin: 0; | margin: 0; | ||
font-size: | font-size: 32px; | ||
font-weight: 700; | |||
position: relative; | |||
text-shadow: 0 2px 4px rgba(0,0,0,0.2); | |||
} | } | ||
.description { | .description { | ||
color: | color: rgba(255,255,255,0.9); | ||
font-size: 16px; | |||
margin-top: 12px; | |||
position: relative; | |||
max-width: 600px; | |||
margin-right: auto; | |||
margin-left: auto; | |||
} | |||
.stats-bar { | |||
display: flex; | |||
justify-content: space-between; | |||
background: var(--light-color); | |||
padding: 12px 20px; | |||
border-radius: 8px; | |||
margin-bottom: 20px; | |||
border: 1px solid var(--border-color); | |||
font-size: 14px; | font-size: 14px; | ||
} | |||
.stat-item { | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
} | |||
.stat-value { | |||
font-weight: bold; | |||
color: var(--primary-color); | |||
} | } | ||
.filter-section { | .filter-section { | ||
margin-bottom: | margin-bottom: 25px; | ||
background: var(--light-color); | |||
padding: 20px; | |||
border-radius: 10px; | |||
border: 1px solid var(--border-color); | |||
} | } | ||
.filter-row { | .filter-row { | ||
display: flex; | display: flex; | ||
gap: | gap: 15px; | ||
margin-bottom: | margin-bottom: 15px; | ||
} | } | ||
خط ۶۹: | خط ۱۳۶: | ||
label { | label { | ||
display: block; | display: block; | ||
margin-bottom: | margin-bottom: 8px; | ||
font-weight: | font-weight: 600; | ||
color: | color: var(--dark-color); | ||
font-size: | font-size: 15px; | ||
} | } | ||
خط ۸۱: | خط ۱۴۸: | ||
.custom-select { | .custom-select { | ||
width: 100%; | width: 100%; | ||
padding: | padding: 12px 15px; | ||
border: 1px solid | border: 1px solid var(--border-color); | ||
border-radius: | border-radius: 8px; | ||
font-size: | font-size: 15px; | ||
background: white; | background: white; | ||
cursor: pointer; | cursor: pointer; | ||
text-align: right; | text-align: right; | ||
transition: var(--transition); | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
} | |||
.custom-select:hover { | |||
border-color: var(--accent-color); | |||
} | |||
.custom-select i { | |||
color: var(--primary-color); | |||
transition: var(--transition); | |||
} | |||
.custom-select.active i { | |||
transform: rotate(180deg); | |||
} | } | ||
خط ۹۶: | خط ۱۸۰: | ||
right: 0; | right: 0; | ||
background: white; | background: white; | ||
border: 1px solid | border: 1px solid var(--border-color); | ||
border-radius: | border-radius: 8px; | ||
margin-top: 5px; | margin-top: 5px; | ||
box-shadow: | box-shadow: var(--shadow); | ||
z-index: 1000; | z-index: 1000; | ||
display: none; | display: none; | ||
max-height: | max-height: 300px; | ||
overflow: hidden; | overflow: hidden; | ||
animation: fadeIn 0.2s ease; | |||
} | |||
@keyframes fadeIn { | |||
from { opacity: 0; transform: translateY(-10px); } | |||
to { opacity: 1; transform: translateY(0); } | |||
} | } | ||
.search-box { | .search-box { | ||
padding: | padding: 12px; | ||
border-bottom: 1px solid | border-bottom: 1px solid var(--border-color); | ||
background: | background: var(--light-color); | ||
} | } | ||
.search-box input { | .search-box input { | ||
width: 100%; | width: 100%; | ||
padding: | padding: 10px 15px; | ||
border: 1px solid | border: 1px solid var(--border-color); | ||
border-radius: | border-radius: 6px; | ||
font-size: | font-size: 14px; | ||
transition: var(--transition); | |||
} | |||
.search-box input:focus { | |||
outline: none; | |||
border-color: var(--accent-color); | |||
box-shadow: 0 0 0 3px rgba(143, 185, 150, 0.2); | |||
} | } | ||
.options-container { | .options-container { | ||
max-height: | max-height: 250px; | ||
overflow-y: auto; | overflow-y: auto; | ||
} | } | ||
.option-item { | .option-item { | ||
padding: | padding: 12px 15px; | ||
cursor: pointer; | cursor: pointer; | ||
border-bottom: 1px solid #f0f0f0; | border-bottom: 1px solid #f0f0f0; | ||
font-size: | font-size: 14px; | ||
transition: var(--transition); | |||
display: flex; | |||
align-items: center; | |||
gap: 10px; | |||
} | |||
.option-item:last-child { | |||
border-bottom: none; | |||
} | } | ||
خط ۱۳۷: | خط ۲۴۲: | ||
.option-item.selected { | .option-item.selected { | ||
background-color: | background-color: var(--primary-color); | ||
color: white; | |||
} | |||
.option-item i { | |||
color: var(--secondary-color); | |||
} | |||
.option-item.selected i { | |||
color: white; | color: white; | ||
} | } | ||
خط ۱۴۳: | خط ۲۵۶: | ||
select { | select { | ||
width: 100%; | width: 100%; | ||
padding: | padding: 12px 15px; | ||
border: 1px solid | border: 1px solid var(--border-color); | ||
border-radius: | border-radius: 8px; | ||
font-size: | font-size: 15px; | ||
background: white; | background: white; | ||
transition: var(--transition); | |||
cursor: pointer; | |||
} | } | ||
.content- | select:focus { | ||
margin-top: | outline: none; | ||
border: 1px solid | border-color: var(--accent-color); | ||
border-radius: | box-shadow: 0 0 0 3px rgba(143, 185, 150, 0.2); | ||
} | |||
.content-section { | |||
margin-top: 20px; | |||
border: 1px solid var(--border-color); | |||
border-radius: 10px; | |||
overflow: hidden; | overflow: hidden; | ||
background: white; | background: white; | ||
height: | height: 550px; | ||
display: flex; | |||
flex-direction: column; | |||
box-shadow: 0 2px 8px rgba(0,0,0,0.05); | |||
} | |||
.content-header { | |||
padding: 15px 20px; | |||
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: 18px; | |||
} | |||
.content-controls { | |||
display: flex; | |||
gap: 10px; | |||
} | |||
.control-btn { | |||
background: white; | |||
border: 1px solid var(--border-color); | |||
border-radius: 6px; | |||
padding: 6px 12px; | |||
cursor: pointer; | |||
font-size: 13px; | |||
transition: var(--transition); | |||
display: flex; | |||
align-items: center; | |||
gap: 5px; | |||
} | |||
.control-btn:hover { | |||
background: var(--light-color); | |||
} | } | ||
.iframe-container { | .iframe-container { | ||
width: 100%; | width: 100%; | ||
flex: 1; | |||
position: relative; | |||
} | } | ||
خط ۱۷۹: | خط ۳۴۱: | ||
font-size: 16px; | font-size: 16px; | ||
text-align: center; | text-align: center; | ||
padding: | padding: 20px; | ||
background: white; | background: white; | ||
flex-direction: column; | |||
} | } | ||
خط ۱۸۷: | خط ۳۵۰: | ||
justify-content: space-between; | justify-content: space-between; | ||
align-items: center; | align-items: center; | ||
padding: | padding: 15px 20px; | ||
background-color: | background-color: var(--light-color); | ||
border-top: 1px solid | border-top: 1px solid var(--border-color); | ||
gap: | gap: 15px; | ||
} | } | ||
.wiki-link, .site-link { | .wiki-link, .site-link { | ||
background-color | background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | ||
color: white; | color: white; | ||
text-decoration: none; | text-decoration: none; | ||
font-weight: | font-weight: 600; | ||
padding: | padding: 12px 20px; | ||
border-radius: | border-radius: 8px; | ||
border: none; | border: none; | ||
cursor: pointer; | cursor: pointer; | ||
font-size: | font-size: 15px; | ||
text-align: center; | text-align: center; | ||
flex: 1; | flex: 1; | ||
transition: var(--transition); | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 8px; | |||
box-shadow: 0 2px 5px rgba(0,0,0,0.1); | |||
} | } | ||
.site-link { | .site-link { | ||
background- | background: linear-gradient(135deg, #6c757d, #495057); | ||
} | } | ||
.site-link:hover { | .site-link:hover { | ||
transform: translateY(-2px); | |||
box-shadow: 0 4px 8px rgba(0,0,0,0.15); | |||
} | } | ||
.wiki-link:hover { | .wiki-link:hover { | ||
background-color: # | transform: translateY(-2px); | ||
box-shadow: 0 4px 8px rgba(0,0,0,0.15); | |||
} | |||
.recent-section { | |||
margin-top: 25px; | |||
background: var(--light-color); | |||
padding: 20px; | |||
border-radius: 10px; | |||
border: 1px solid var(--border-color); | |||
} | |||
.section-title { | |||
font-size: 18px; | |||
font-weight: 600; | |||
color: var(--primary-color); | |||
margin-bottom: 15px; | |||
display: flex; | |||
align-items: center; | |||
gap: 10px; | |||
} | |||
.recent-items { | |||
display: flex; | |||
gap: 15px; | |||
overflow-x: auto; | |||
padding: 5px; | |||
} | |||
.recent-item { | |||
background: white; | |||
border-radius: 8px; | |||
padding: 15px; | |||
min-width: 180px; | |||
border: 1px solid var(--border-color); | |||
cursor: pointer; | |||
transition: var(--transition); | |||
text-align: center; | |||
} | |||
.recent-item:hover { | |||
transform: translateY(-3px); | |||
box-shadow: 0 4px 8px rgba(0,0,0,0.1); | |||
} | |||
.recent-item i { | |||
font-size: 24px; | |||
color: var(--secondary-color); | |||
margin-bottom: 10px; | |||
} | |||
.recent-title { | |||
font-weight: 600; | |||
font-size: 14px; | |||
color: var(--dark-color); | |||
} | |||
.recent-category { | |||
font-size: 12px; | |||
color: #6c757d; | |||
margin-top: 5px; | |||
} | |||
.empty-recent { | |||
text-align: center; | |||
color: #6c757d; | |||
padding: 20px; | |||
font-style: italic; | |||
} | } | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
body { | body { | ||
padding: | padding: 10px; | ||
} | } | ||
.container { | .container { | ||
padding: | padding: 15px; | ||
} | } | ||
خط ۲۳۲: | خط ۴۶۹: | ||
} | } | ||
.content- | .content-section { | ||
height: | height: 450px; | ||
} | } | ||
خط ۲۴۲: | خط ۴۷۹: | ||
.wiki-link, .site-link { | .wiki-link, .site-link { | ||
width: 100%; | width: 100%; | ||
} | |||
.stats-bar { | |||
flex-direction: column; | |||
gap: 10px; | |||
} | |||
.content-header { | |||
flex-direction: column; | |||
gap: 10px; | |||
align-items: flex-start; | |||
} | |||
.content-controls { | |||
width: 100%; | |||
justify-content: space-between; | |||
} | } | ||
} | |||
.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; | |||
} | } | ||
</style> | </style> | ||
خط ۲۴۹: | خط ۵۱۲: | ||
<div class="container"> | <div class="container"> | ||
<div class="header"> | <div class="header"> | ||
<h1>کتابخانه پدیا بایبل</h1> | <h1><i class="fas fa-book-open"></i> کتابخانه پدیا بایبل</h1> | ||
<div class="description"> | <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> | </div> | ||
خط ۲۵۹: | خط ۵۳۷: | ||
<div class="filter-row"> | <div class="filter-row"> | ||
<div class="form-group"> | <div class="form-group"> | ||
<label for="categorySelect">دستهبندی:</label> | <label for="categorySelect"><i class="fas fa-folder"></i> دستهبندی:</label> | ||
<select id="categorySelect"> | <select id="categorySelect"> | ||
<option value="">لطفاً دستهبندی انتخاب کنید</option> | <option value="">لطفاً دستهبندی انتخاب کنید</option> | ||
خط ۲۶۸: | خط ۵۴۶: | ||
<div class="form-group"> | <div class="form-group"> | ||
<label for="bookSelect">انتخاب محتوا:</label> | <label for="bookSelect"><i class="fas fa-search"></i> انتخاب محتوا:</label> | ||
<div class="custom-select-container"> | <div class="custom-select-container"> | ||
<div class="custom-select" id="customSelectDisplay"> | <div class="custom-select" id="customSelectDisplay"> | ||
ابتدا دستهبندی را انتخاب کنید | <span>ابتدا دستهبندی را انتخاب کنید</span> | ||
<i class="fas fa-chevron-down"></i> | |||
</div> | </div> | ||
خط ۲۸۶: | خط ۵۶۵: | ||
</div> | </div> | ||
<div class="content- | <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-container"> | ||
<div class="iframe-placeholder" id="iframePlaceholder"> | <div class="iframe-placeholder" id="iframePlaceholder"> | ||
<div> | <div> | ||
<i class="fas fa-book-open" style="font-size: | <i class="fas fa-book-open" style="font-size: 3rem; color: #6c757d; margin-bottom: 15px;"></i> | ||
<p>لطفاً یک کتاب یا مقاله از لیست انتخاب کنید</p> | <p>لطفاً یک کتاب یا مقاله از لیست انتخاب کنید</p> | ||
</div> | </div> | ||
خط ۲۹۸: | خط ۵۸۶: | ||
<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;"> | ||
<i class="fas fa-external-link-alt"></i> | |||
مشاهده صفحه در سایت اصلی | مشاهده صفحه در سایت اصلی | ||
</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;"> | ||
<i class="fab fa-wikipedia-w"></i> | |||
مشاهده صفحه کامل در ویکی | مشاهده صفحه کامل در ویکی | ||
</a> | </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> | ||
خط ۳۱۰: | خط ۶۱۰: | ||
const booksData = { | const booksData = { | ||
'کتاب': [ | 'کتاب': [ | ||
{ value: 'عیسی', text: 'عیسی' }, | { value: 'عیسی', text: 'عیسی', icon: 'fas fa-cross' }, | ||
{ value: 'انجیل_متی', text: 'انجیل متی' }, | { value: 'انجیل_متی', text: 'انجیل متی', icon: 'fas fa-bible' }, | ||
{ value: 'مزامیر', text: 'مزامیر' }, | { value: 'مزامیر', text: 'مزامیر', icon: 'fas fa-music' }, | ||
{ value: 'پیدایش', text: 'پیدایش' } | { value: 'پیدایش', text: 'پیدایش', icon: 'fas fa-seedling' } | ||
], | ], | ||
'مقاله': [ | 'مقاله': [ | ||
{ value: 'مسیح', text: 'مسیح' }, | { value: 'مسیح', text: 'مسیح', icon: 'fas fa-dove' }, | ||
{ value: 'تثلیث', text: 'تثلیث' }, | { value: 'تثلیث', text: 'تثلیث', icon: 'fas fa-shield-alt' }, | ||
{ value: 'نجات', text: 'نجات' }, | { value: 'نجات', text: 'نجات', icon: 'fas fa-hands-helping' }, | ||
{ value: 'روح_القدس', text: 'روح القدس' } | { value: 'روح_القدس', text: 'روح القدس', icon: 'fas fa-wind' } | ||
] | ] | ||
}; | }; | ||
// عناصر DOM | |||
const categorySelect = document.getElementById('categorySelect'); | const categorySelect = document.getElementById('categorySelect'); | ||
const customSelectDisplay = document.getElementById('customSelectDisplay'); | const customSelectDisplay = document.getElementById('customSelectDisplay'); | ||
خط ۳۳۲: | خط ۶۳۳: | ||
const wikiLink = document.getElementById('wikiLink'); | const wikiLink = document.getElementById('wikiLink'); | ||
const siteLink = document.getElementById('siteLink'); | const siteLink = document.getElementById('siteLink'); | ||
const contentTitle = document.getElementById('contentTitle'); | |||
const booksCount = document.getElementById('booksCount'); | |||
const articlesCount = document.getElementById('articlesCount'); | |||
const readCount = document.getElementById('readCount'); | |||
const zoomIn = document.getElementById('zoomIn'); | |||
const zoomOut = document.getElementById('zoomOut'); | |||
const refreshBtn = document.getElementById('refreshBtn'); | |||
const loadingBar = document.getElementById('loadingBar'); | |||
const recentItems = document.getElementById('recentItems'); | |||
let isDropdownOpen = false; | let isDropdownOpen = false; | ||
let currentCategory = ''; | let currentCategory = ''; | ||
let currentSelection = { value: '', text: '' }; | let currentSelection = { value: '', text: '' }; | ||
let currentZoom = 100; | |||
let readItems = JSON.parse(localStorage.getItem('readItems')) || []; | |||
// به روزرسانی آمار | |||
function updateStats() { | |||
booksCount.textContent = booksData['کتاب'].length; | |||
articlesCount.textContent = booksData['مقاله'].length; | |||
readCount.textContent = readItems.length; | |||
} | |||
// به روزرسانی لیست مطالب مطالعه شده | |||
function updateRecentItems() { | |||
if (readItems.length === 0) { | |||
recentItems.innerHTML = '<div class="empty-recent">هیچ مطلبی اخیراً مطالعه نشده است</div>'; | |||
return; | |||
} | |||
recentItems.innerHTML = ''; | |||
const recentToShow = readItems.slice(-5).reverse(); | |||
recentToShow.forEach(item => { | |||
const recentItem = document.createElement('div'); | |||
recentItem.className = 'recent-item'; | |||
recentItem.innerHTML = ` | |||
<i class="${item.icon}"></i> | |||
<div class="recent-title">${item.text}</div> | |||
<div class="recent-category">${item.category}</div> | |||
`; | |||
recentItem.addEventListener('click', function() { | |||
currentCategory = item.category; | |||
categorySelect.value = currentCategory; | |||
currentSelection = { value: item.value, text: item.text }; | |||
customSelectDisplay.innerHTML = `<span>${item.text}</span><i class="fas fa-chevron-down"></i>`; | |||
showContent(item.value, item.text); | |||
}); | |||
recentItems.appendChild(recentItem); | |||
}); | |||
} | |||
function updateBookList() { | function updateBookList() { | ||
خط ۳۴۲: | خط ۶۹۲: | ||
if (!selectedCategory) { | if (!selectedCategory) { | ||
customSelectDisplay. | customSelectDisplay.innerHTML = '<span>ابتدا دستهبندی را انتخاب کنید</span><i class="fas fa-chevron-down"></i>'; | ||
customSelectDisplay.style.color = '#6c757d'; | customSelectDisplay.style.color = '#6c757d'; | ||
resetContent(); | resetContent(); | ||
خط ۳۴۸: | خط ۶۹۸: | ||
} | } | ||
customSelectDisplay. | customSelectDisplay.innerHTML = '<span>لطفاً محتوا انتخاب کنید</span><i class="fas fa-chevron-down"></i>'; | ||
customSelectDisplay.style.color = '#333'; | customSelectDisplay.style.color = '#333'; | ||
resetContent(); | resetContent(); | ||
خط ۳۵۹: | خط ۷۰۹: | ||
isDropdownOpen = !isDropdownOpen; | isDropdownOpen = !isDropdownOpen; | ||
customDropdown.style.display = isDropdownOpen ? 'block' : 'none'; | customDropdown.style.display = isDropdownOpen ? 'block' : 'none'; | ||
customSelectDisplay.classList.toggle('active', isDropdownOpen); | |||
if (isDropdownOpen) { | if (isDropdownOpen) { | ||
خط ۳۷۰: | خط ۷۲۱: | ||
isDropdownOpen = false; | isDropdownOpen = false; | ||
customDropdown.style.display = 'none'; | customDropdown.style.display = 'none'; | ||
customSelectDisplay.classList.remove('active'); | |||
}); | }); | ||
خط ۳۹۱: | خط ۷۴۳: | ||
const optionItem = document.createElement('div'); | const optionItem = document.createElement('div'); | ||
optionItem.className = 'option-item'; | optionItem.className = 'option-item'; | ||
optionItem. | optionItem.innerHTML = ` | ||
<i class="${book.icon}"></i> | |||
<span>${book.text}</span> | |||
`; | |||
optionItem.setAttribute('data-value', book.value); | optionItem.setAttribute('data-value', book.value); | ||
optionItem.setAttribute('data-text', book.text); | optionItem.setAttribute('data-text', book.text); | ||
optionItem.setAttribute('data-icon', book.icon); | |||
if (book.value === currentSelection.value) { | if (book.value === currentSelection.value) { | ||
خط ۴۰۲: | خط ۷۵۸: | ||
const value = this.getAttribute('data-value'); | const value = this.getAttribute('data-value'); | ||
const text = this.getAttribute('data-text'); | const text = this.getAttribute('data-text'); | ||
const icon = this.getAttribute('data-icon'); | |||
currentSelection = { value, text }; | currentSelection = { value, text, icon }; | ||
customSelectDisplay. | customSelectDisplay.innerHTML = `<span>${text}</span><i class="fas fa-chevron-down"></i>`; | ||
customSelectDisplay.style.color = '#333'; | customSelectDisplay.style.color = '#333'; | ||
isDropdownOpen = false; | isDropdownOpen = false; | ||
customDropdown.style.display = 'none'; | customDropdown.style.display = 'none'; | ||
customSelectDisplay.classList.remove('active'); | |||
showContent(value, text); | showContent(value, text, icon); | ||
}); | }); | ||
خط ۴۲۹: | خط ۷۸۷: | ||
}); | }); | ||
function showContent(bookValue, bookText) { | function showContent(bookValue, bookText, icon) { | ||
if (!bookValue) { | if (!bookValue) { | ||
resetContent(); | resetContent(); | ||
return; | return; | ||
} | |||
// افزودن به تاریخچه مطالعه | |||
const newItem = { value: bookValue, text: bookText, category: currentCategory, icon: icon }; | |||
if (!readItems.some(item => item.value === bookValue && item.category === currentCategory)) { | |||
readItems.push(newItem); | |||
localStorage.setItem('readItems', JSON.stringify(readItems)); | |||
updateStats(); | |||
updateRecentItems(); | |||
} | } | ||
خط ۴۳۹: | خط ۸۰۶: | ||
const siteUrl = `https://www.pediabible.com/index.php/${bookValue}`; | const siteUrl = `https://www.pediabible.com/index.php/${bookValue}`; | ||
contentTitle.textContent = bookText; | |||
contentFrame.style.display = 'none'; | contentFrame.style.display = 'none'; | ||
iframePlaceholder.style.display = 'flex'; | iframePlaceholder.style.display = 'flex'; | ||
iframePlaceholder.innerHTML = ` | iframePlaceholder.innerHTML = ` | ||
<div> | <div> | ||
<i class="fas fa-spinner fa-spin" style="font-size: | <i class="fas fa-spinner fa-spin" style="font-size: 3rem; color: #2c5530; margin-bottom: 15px;"></i> | ||
<p>در حال بارگذاری "${bookText}"...</p> | <p>در حال بارگذاری "${bookText}"...</p> | ||
</div> | </div> | ||
`; | `; | ||
// شبیهسازی نوار پیشرفت | |||
let progress = 0; | |||
const progressInterval = setInterval(() => { | |||
progress += Math.random() * 15; | |||
if (progress > 90) progress = 90; | |||
loadingBar.style.width = `${progress}%`; | |||
}, 200); | |||
contentFrame.src = contentUrl; | contentFrame.src = contentUrl; | ||
contentFrame.onload = function() { | contentFrame.onload = function() { | ||
clearInterval(progressInterval); | |||
loadingBar.style.width = '100%'; | |||
setTimeout(() => { | |||
loadingBar.style.width = '0%'; | |||
}, 500); | |||
contentFrame.style.display = 'block'; | contentFrame.style.display = 'block'; | ||
iframePlaceholder.style.display = 'none'; | iframePlaceholder.style.display = 'none'; | ||
applyZoom(); | |||
}; | }; | ||
contentFrame.onerror = function() { | contentFrame.onerror = function() { | ||
clearInterval(progressInterval); | |||
loadingBar.style.width = '0%'; | |||
iframePlaceholder.style.display = 'flex'; | iframePlaceholder.style.display = 'flex'; | ||
iframePlaceholder.innerHTML = ` | iframePlaceholder.innerHTML = ` | ||
<div> | <div> | ||
<i class="fas fa-exclamation-triangle" style="font-size: | <i class="fas fa-exclamation-triangle" style="font-size: 3rem; color: #dc3545; margin-bottom: 15px;"></i> | ||
<p>خطا در بارگذاری "${bookText}". لطفاً دوباره تلاش کنید.</p> | <p>خطا در بارگذاری "${bookText}". لطفاً دوباره تلاش کنید.</p> | ||
</div> | </div> | ||
خط ۴۶۹: | خط ۸۵۴: | ||
wikiLink.href = wikiUrl; | wikiLink.href = wikiUrl; | ||
wikiLink.textContent = `مشاهده صفحه کامل در ویکی`; | wikiLink.textContent = `مشاهده صفحه کامل در ویکی`; | ||
wikiLink.style.display = ' | wikiLink.style.display = 'flex'; | ||
siteLink.href = siteUrl; | siteLink.href = siteUrl; | ||
siteLink.textContent = `مشاهده صفحه در سایت اصلی`; | siteLink.textContent = `مشاهده صفحه در سایت اصلی`; | ||
siteLink.style.display = ' | siteLink.style.display = 'flex'; | ||
} | } | ||
function resetContent() { | function resetContent() { | ||
currentSelection = { value: '', text: '' }; | currentSelection = { value: '', text: '' }; | ||
contentTitle.textContent = 'هیچ محتوایی انتخاب نشده است'; | |||
contentFrame.style.display = 'none'; | contentFrame.style.display = 'none'; | ||
iframePlaceholder.style.display = 'flex'; | iframePlaceholder.style.display = 'flex'; | ||
iframePlaceholder.innerHTML = ` | iframePlaceholder.innerHTML = ` | ||
<div> | <div> | ||
<i class="fas fa-book-open" style="font-size: | <i class="fas fa-book-open" style="font-size: 3rem; color: #6c757d; margin-bottom: 15px;"></i> | ||
<p>لطفاً یک کتاب یا مقاله از لیست انتخاب کنید</p> | <p>لطفاً یک کتاب یا مقاله از لیست انتخاب کنید</p> | ||
</div> | </div> | ||
خط ۴۹۱: | خط ۸۷۷: | ||
} | } | ||
function applyZoom() { | |||
contentFrame.style.zoom = `${currentZoom}%`; | |||
} | |||
// مدیریت بزرگنمایی و کوچکنمایی | |||
zoomIn.addEventListener('click', function() { | |||
if (currentZoom < 150) { | |||
currentZoom += 10; | |||
applyZoom(); | |||
} | |||
}); | |||
zoomOut.addEventListener('click', function() { | |||
if (currentZoom > 50) { | |||
currentZoom -= 10; | |||
applyZoom(); | |||
} | |||
}); | |||
// بارگذاری مجدد | |||
refreshBtn.addEventListener('click', function() { | |||
if (currentSelection.value) { | |||
showContent(currentSelection.value, currentSelection.text, currentSelection.icon); | |||
} | |||
}); | |||
// رویدادهای اولیه | |||
categorySelect.addEventListener('change', updateBookList); | categorySelect.addEventListener('change', updateBookList); | ||
// مقداردهی اولیه | |||
updateStats(); | |||
updateRecentItems(); | |||
updateBookList(); | updateBookList(); | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |
نسخهٔ ۱۲ اکتبر ۲۰۲۵، ساعت ۲۱:۰۴
کتابخانه پدیا بایبل
در این بخش میتوانید کتابها و مقالات مختلف را مطالعه کنید.
برای شروع، دستهبندی و سپس مورد مورد نظر خود را انتخاب نمایید.
ابتدا دستهبندی را انتخاب کنید
هیچ محتوایی انتخاب نشده است
لطفاً یک کتاب یا مقاله از لیست انتخاب کنید
مطالب مطالعه شده اخیر
هیچ مطلبی اخیراً مطالعه نشده است