کتاب مقدس آنلاین: تفاوت میان نسخهها
ظاهر
بدون خلاصۀ ویرایش برچسب: برگرداندهشده |
بدون خلاصۀ ویرایش برچسب: برگرداندهشده |
||
خط ۲۰: | خط ۲۰: | ||
padding: 0; | padding: 0; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
خط ۳۴: | خط ۲۸: | ||
line-height: 1.6; | line-height: 1.6; | ||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.05"><path fill="%238B4513" d="M20,20 L80,20 L80,80 L20,80 Z" stroke="%238B4513" stroke-width="2"/></svg>'); | background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.05"><path fill="%238B4513" d="M20,20 L80,20 L80,80 L20,80 Z" stroke="%238B4513" stroke-width="2"/></svg>'); | ||
padding: | padding: 10px; | ||
} | } | ||
.container { | .container { | ||
width: | max-width: 1200px; | ||
margin: 0 auto; | |||
margin: 0 | |||
} | } | ||
.app-header { | .app-header { | ||
text-align: center; | text-align: center; | ||
margin-bottom: | margin-bottom: 20px; | ||
padding: | padding: 15px; | ||
border-bottom: 2px solid var(--border-color); | border-bottom: 2px solid var(--border-color); | ||
background: linear-gradient(to bottom, #f9f6f2, #f0e6d6); | background: linear-gradient(to bottom, #f9f6f2, #f0e6d6); | ||
border-radius: 8px; | border-radius: 8px; | ||
} | } | ||
.app-header h1 { | .app-header h1 { | ||
color: var(--primary-color); | color: var(--primary-color); | ||
margin-bottom: | margin-bottom: 5px; | ||
font-size: 1. | font-size: 1.8rem; | ||
} | } | ||
.description { | .description { | ||
color:#808080; | color:#808080; | ||
font-size: | font-size:1.1rem; | ||
font-style: italic; | font-style: italic; | ||
} | } | ||
خط ۱۲۳: | خط ۶۰: | ||
display: grid; | display: grid; | ||
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||
gap: | gap: 15px; | ||
margin-bottom: | margin-bottom: 20px; | ||
background: white; | background: white; | ||
padding: | padding: 15px; | ||
border-radius: 8px; | border-radius: 8px; | ||
border: 1px solid var(--border-color); | border: 1px solid var(--border-color); | ||
} | } | ||
خط ۱۳۸: | خط ۷۱: | ||
background: white; | background: white; | ||
border-radius: 6px; | border-radius: 6px; | ||
padding: | padding: 10px; | ||
} | } | ||
.selector-title { | .selector-title { | ||
font-size: 0. | font-size: 0.9rem; | ||
margin-bottom: | margin-bottom: 8px; | ||
color: var(--primary-color); | color: var(--primary-color); | ||
border-bottom: 1px solid var(--border-color); | border-bottom: 1px solid var(--border-color); | ||
padding-bottom: | padding-bottom: 5px; | ||
text-align: center; | text-align: center; | ||
} | } | ||
خط ۱۵۳: | خط ۸۵: | ||
select { | select { | ||
width: 100%; | width: 100%; | ||
padding: | padding: 8px; | ||
border: 1px solid var(--border-color); | border: 1px solid var(--border-color); | ||
border-radius: 4px; | border-radius: 4px; | ||
background-color: white; | background-color: white; | ||
font-size: 0. | font-size: 0.9rem; | ||
} | } | ||
خط ۱۷۵: | خط ۹۵: | ||
background: white; | background: white; | ||
border-radius: 8px; | border-radius: 8px; | ||
padding: 20px; | |||
padding: | |||
border: 1px solid var(--border-color); | border: 1px solid var(--border-color); | ||
margin-bottom: | margin-bottom: 20px; | ||
} | } | ||
.chapter-title { | .chapter-title { | ||
text-align: center; | text-align: center; | ||
margin-bottom: | margin-bottom: 15px; | ||
color: var(--primary-color); | color: var(--primary-color); | ||
font-size: 1. | font-size: 1.3rem; | ||
padding-bottom: | padding-bottom: 10px; | ||
border-bottom: 2px solid var(--border-color); | border-bottom: 2px solid var(--border-color); | ||
} | } | ||
.content-display { | .content-display { | ||
width: 100%; | width: 100%; | ||
height: | height: 500px; | ||
border: 1px solid var(--border-color); | border: 1px solid var(--border-color); | ||
border-radius: 6px; | border-radius: 6px; | ||
} | } | ||
خط ۲۲۰: | خط ۱۲۰: | ||
justify-content: space-between; | justify-content: space-between; | ||
align-items: center; | align-items: center; | ||
margin-top: | margin-top: 20px; | ||
} | } | ||
.nav-btn { | .nav-btn { | ||
padding: | padding: 10px 20px; | ||
background-color: var(--secondary-color); | background-color: var(--secondary-color); | ||
color: white; | color: white; | ||
خط ۲۳۴: | خط ۱۳۰: | ||
border-radius: 6px; | border-radius: 6px; | ||
cursor: pointer; | cursor: pointer; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
gap: | gap: 8px; | ||
} | } | ||
خط ۲۵۲: | خط ۱۳۸: | ||
background-color: #b0a090; | background-color: #b0a090; | ||
cursor: not-allowed; | cursor: not-allowed; | ||
} | } | ||
خط ۲۵۹: | خط ۱۴۳: | ||
display: inline-flex; | display: inline-flex; | ||
align-items: center; | align-items: center; | ||
gap: 8px; | |||
gap: | padding: 10px 20px; | ||
padding: | |||
background-color: #87CEEB; | background-color: #87CEEB; | ||
color: #000000; | color: #000000; | ||
text-decoration: none; | text-decoration: none; | ||
border-radius: 6px; | border-radius: 6px; | ||
} | } | ||
خط ۲۸۱: | خط ۱۵۴: | ||
text-align: center; | text-align: center; | ||
color: #7f8c8d; | color: #7f8c8d; | ||
padding: 20px | padding: 40px 20px; | ||
border: 2px dashed var(--border-color); | border: 2px dashed var(--border-color); | ||
border-radius: 8px; | border-radius: 8px; | ||
font-size: | font-size: 1.1rem; | ||
background-color: var(--light-color); | background-color: var(--light-color); | ||
} | } | ||
. | .placeholder { | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
align-items: center; | |||
justify-content: center; | justify-content: center; | ||
height: 100%; | |||
} | } | ||
. | .placeholder i { | ||
font-size: 3rem; | |||
margin-bottom: | margin-bottom: 15px; | ||
color: var(--border-color); | |||
} | } | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.selector-container { | .selector-container { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
} | } | ||
.navigation { | .navigation { | ||
flex-direction: column; | flex-direction: column; | ||
gap: | gap: 10px; | ||
} | } | ||
خط ۳۷۲: | خط ۱۸۹: | ||
justify-content: center; | justify-content: center; | ||
} | } | ||
} | } | ||
</style> | </style> | ||
خط ۴۰۱: | خط ۱۹۵: | ||
<div class="container"> | <div class="container"> | ||
<div class="app-header"> | <div class="app-header"> | ||
<h1>کتاب مقدس آنلاین</h1> | <h1>کتاب مقدس آنلاین</h1> | ||
<p class="description">مطالعه ترجمههای مختلف بصورت کاربردی با واژه نامه تخصصی</p> | <p class="description">مطالعه ترجمههای مختلف بصورت کاربردی با واژه نامه تخصصی</p> | ||
</div> | </div> | ||
<div id="content- | <div class="selector-container"> | ||
<div class="selector-box"> | |||
<h3 class="selector-title">ترجمه</h3> | |||
<select id="translation-select"> | |||
<option value="">انتخاب ترجمه</option> | |||
<option value="old">ترجمه قدیم</option> | |||
<option value="hejre_nou">هزاره نو</option> | |||
<option value="mozde">مژده</option> | |||
<option value="daneshname">دانشنامه</option> | |||
</select> | |||
</div> | |||
<div class="selector-box"> | |||
<h3 class="selector-title">عهد</h3> | |||
<select id="testament-select" disabled> | |||
<option value="">انتخاب عهد</option> | |||
<option value="old">عهد قدیم</option> | |||
<option value="new">عهد جدید</option> | |||
</select> | |||
</div> | |||
<div class="selector-box"> | |||
<h3 class="selector-title">کتاب</h3> | |||
<select id="book-select" disabled> | |||
<option value="">انتخاب کتاب</option> | |||
</select> | |||
</div> | |||
<div class="selector-box"> | |||
<h3 class="selector-title">فصل</h3> | |||
<select id="chapter-select" disabled> | |||
<option value="">انتخاب فصل</option> | |||
</select> | |||
</div> | |||
</div> | |||
<div class="bible-content"> | |||
<h2 class="chapter-title" id="chapter-title">لطفاً ترجمه، کتاب و فصل مورد نظر را انتخاب کنید</h2> | |||
<div id="verses-container"> | |||
<div class="instructions"> | |||
<div class="placeholder"> | |||
<i class="fas fa-book-open"></i> | |||
<p>برای مطالعه کتاب مقدس، لطفاً ابتدا ترجمه، سپس عهد، کتاب و فصل مورد نظر خود را انتخاب کنید.</p> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="navigation"> | |||
<button class="nav-btn" id="prev-chapter" disabled> | |||
<i class="fas fa-arrow-right"></i> | |||
فصل قبلی | |||
</button> | |||
<a href="#" class="wiki-link" id="wiki-page-link" target="_blank" style="display: none;"> | |||
<i class="fas fa-external-link-alt"></i> | |||
صفحه کامل | |||
</a> | |||
<button class="nav-btn" id="next-chapter" disabled> | |||
فصل بعدی | |||
<i class="fas fa-arrow-left"></i> | |||
</button> | |||
</div> | |||
</div> | </div> | ||
</div> | </div> | ||
<script> | <script> | ||
// دادههای کامل کتابهای مقدس | // دادههای کامل کتابهای مقدس | ||
const bibleBooks = { | const bibleBooks = { | ||
خط ۵۳۴: | خط ۳۴۱: | ||
}; | }; | ||
// دادههای ترجمههای مختلف | |||
const translations = { | |||
'old': { | |||
name: 'ترجمه قدیم', | |||
baseUrl: 'https://www.pediabible.com/index.php?title=', | |||
getPageTitle: function(bookDisplayName, chapter) { | |||
return `${bookDisplayName} فصل ${chapter}`; | |||
} | |||
}, | |||
'hejre_nou': { | |||
name: 'هزاره نو', | |||
baseUrl: 'https://www.pediabible.com/index.php?title=', | |||
getPageTitle: function(bookDisplayName, chapter) { | |||
return `${bookDisplayName} هزاره نو فصل ${chapter}`; | |||
} | |||
}, | |||
'mozde': { | |||
name: 'مژده', | |||
baseUrl: 'https://www.pediabible.com/index.php?title=', | |||
getPageTitle: function(bookDisplayName, chapter) { | |||
return `${bookDisplayName} مژده فصل ${chapter}`; | |||
} | } | ||
} | }, | ||
'daneshname': { | |||
name: 'دانشنامه', | |||
baseUrl: 'https://www.pediabible.com/index.php?title=', | |||
getPageTitle: function(bookDisplayName, chapter) { | |||
return `${bookDisplayName} دانشنامه فصل ${chapter}`; | |||
} | } | ||
} | } | ||
}; | |||
// عناصر DOM | |||
const translationSelect = document.getElementById('translation-select'); | |||
const testamentSelect = document.getElementById('testament-select'); | |||
const bookSelect = document.getElementById('book-select'); | |||
const chapterSelect = document.getElementById('chapter-select'); | |||
const chapterTitle = document.getElementById('chapter-title'); | |||
const versesContainer = document.getElementById('verses-container'); | |||
const prevChapterBtn = document.getElementById('prev-chapter'); | |||
const nextChapterBtn = document.getElementById('next-chapter'); | |||
const wikiPageLink = document.getElementById('wiki-page-link'); | |||
// متغیرهای وضعیت فعلی | |||
let currentTranslation = ''; | |||
let currentTestament = ''; | |||
let currentBook = ''; | |||
let currentChapter = 1; | |||
// رویداد تغییر ترجمه | |||
translationSelect.addEventListener('change', function() { | |||
currentTranslation = this.value; | |||
if (currentTranslation) { | |||
testamentSelect.disabled = false; | |||
testamentSelect.value = ''; | |||
bookSelect.disabled = true; | |||
bookSelect.innerHTML = '<option value="">انتخاب کتاب</option>'; | |||
chapterSelect.disabled = true; | |||
chapterSelect.innerHTML = '<option value="">انتخاب فصل</option>'; | |||
resetContent(); | |||
} else { | |||
resetAll(); | |||
} | |||
}); | |||
// رویداد تغییر عهد | |||
testamentSelect.addEventListener('change', function() { | |||
currentTestament = this.value; | |||
if (currentTestament) { | |||
bookSelect.disabled = false; | |||
bookSelect.innerHTML = '<option value="">انتخاب کتاب</option>'; | |||
bibleBooks[currentTestament].forEach((book, index) => { | |||
const option = document.createElement('option'); | |||
option.value = index; | |||
option.textContent = book.name; | |||
bookSelect.appendChild(option); | |||
}); | |||
chapterSelect.disabled = true; | |||
chapterSelect.innerHTML = '<option value="">انتخاب فصل</option>'; | |||
resetContent(); | |||
} else { | |||
bookSelect.disabled = true; | |||
bookSelect.innerHTML = '<option value="">انتخاب کتاب</option>'; | |||
chapterSelect.disabled = true; | |||
chapterSelect.innerHTML = '<option value="">انتخاب فصل</option>'; | |||
resetContent(); | |||
} | } | ||
}); | |||
// رویداد تغییر کتاب | |||
bookSelect.addEventListener('change', function() { | |||
currentBook = this.value; | |||
if (currentBook !== '') { | |||
chapterSelect.disabled = false; | |||
chapterSelect.innerHTML = '<option value="">انتخاب فصل</option>'; | |||
const bookIndex = parseInt(currentBook); | const bookIndex = parseInt(currentBook); | ||
const chaptersCount = bibleBooks[currentTestament][bookIndex].chapters; | const chaptersCount = bibleBooks[currentTestament][bookIndex].chapters; | ||
for (let i = 1; i <= chaptersCount; i++) { | |||
const option = document.createElement('option'); | |||
option.value = i; | |||
option.textContent = `فصل ${i}`; | |||
chapterSelect.appendChild(option); | |||
} | } | ||
prevChapterBtn.disabled = true; | prevChapterBtn.disabled = true; | ||
nextChapterBtn.disabled = true; | nextChapterBtn.disabled = true; | ||
wikiPageLink.style.display = 'none'; | wikiPageLink.style.display = 'none'; | ||
} else { | |||
chapterSelect.disabled = true; | |||
chapterSelect.innerHTML = '<option value="">انتخاب فصل</option>'; | |||
resetContent(); | |||
} | } | ||
}); | |||
// رویداد تغییر فصل | |||
chapterSelect.addEventListener('change', function() { | |||
currentChapter = parseInt(this.value); | |||
if (currentChapter) { | |||
displayChapterWithIframe(); | |||
} else { | |||
resetContent(); | resetContent(); | ||
} | } | ||
}); | |||
// نمایش فصل با iframe | |||
function displayChapterWithIframe() { | |||
const bookIndex = parseInt(currentBook); | |||
const bookData = bibleBooks[currentTestament][bookIndex]; | |||
const bookName = bookData.name; | |||
const bookDisplayName = bookData.displayName; | |||
const translationName = translations[currentTranslation].name; | |||
chapterTitle.textContent = `${translationName} - ${bookName} - فصل ${currentChapter}`; | |||
const pageTitle = translations[currentTranslation].getPageTitle(bookDisplayName, currentChapter); | |||
const contentUrl = `${translations[currentTranslation].baseUrl}${encodeURIComponent(pageTitle)}&action=render`; | |||
versesContainer.innerHTML = ` | |||
<iframe | |||
id="content-iframe" | |||
src="${contentUrl}" | |||
class="content-display" | |||
frameborder="0" | |||
loading="lazy"> | |||
</iframe> | |||
`; | |||
wikiPageLink.href = `${translations[currentTranslation].baseUrl}${encodeURIComponent(pageTitle)}`; | |||
wikiPageLink.style.display = 'flex'; | |||
updateNavigationButtons(); | |||
} | |||
function updateNavigationButtons() { | |||
const bookIndex = parseInt(currentBook); | |||
const chaptersCount = bibleBooks[currentTestament][bookIndex].chapters; | |||
prevChapterBtn.disabled = currentChapter <= 1; | |||
nextChapterBtn.disabled = currentChapter >= chaptersCount; | |||
} | } | ||
prevChapterBtn.addEventListener('click', function() { | |||
if (currentChapter > 1) { | |||
currentChapter--; | |||
chapterSelect.value = currentChapter; | |||
displayChapterWithIframe(); | |||
} | |||
}); | }); | ||
nextChapterBtn.addEventListener('click', function() { | |||
const bookIndex = parseInt(currentBook); | |||
value | const chaptersCount = bibleBooks[currentTestament][bookIndex].chapters; | ||
if (currentChapter < chaptersCount) { | |||
currentChapter++; | |||
chapterSelect.value = currentChapter; | |||
displayChapterWithIframe(); | |||
} | |||
}); | }); | ||
function resetContent() { | |||
chapterTitle.textContent = 'لطفاً ترجمه، کتاب و فصل مورد نظر را انتخاب کنید'; | |||
versesContainer.innerHTML = ` | |||
<div class="instructions"> | |||
<div class="placeholder"> | |||
<i class="fas fa-book-open"></i> | |||
<p>برای مطالعه کتاب مقدس، لطفاً ابتدا ترجمه، سپس عهد، کتاب و فصل مورد نظر خود را انتخاب کنید.</p> | |||
</div> | |||
</div> | |||
`; | |||
prevChapterBtn.disabled = true; | |||
nextChapterBtn.disabled = true; | |||
wikiPageLink.style.display = 'none'; | |||
} | |||
function resetAll() { | |||
testamentSelect.disabled = true; | |||
testamentSelect.innerHTML = '<option value="">انتخاب عهد</option>'; | |||
bookSelect.disabled = true; | |||
bookSelect.innerHTML = '<option value="">انتخاب کتاب</option>'; | |||
chapterSelect.disabled = true; | |||
chapterSelect.innerHTML = '<option value="">انتخاب فصل</option>'; | |||
resetContent(); | |||
} | |||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |
نسخهٔ ۱۰ اکتبر ۲۰۲۵، ساعت ۰۶:۳۵
کتاب مقدس آنلاین
مطالعه ترجمههای مختلف بصورت کاربردی با واژه نامه تخصصی
ترجمه
عهد
کتاب
فصل
لطفاً ترجمه، کتاب و فصل مورد نظر را انتخاب کنید
برای مطالعه کتاب مقدس، لطفاً ابتدا ترجمه، سپس عهد، کتاب و فصل مورد نظر خود را انتخاب کنید.