|
|
| خط ۲: |
خط ۲: |
| <html lang="fa" dir="rtl"> | | <html lang="fa" dir="rtl"> |
| <head> | | <head> |
| <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>منوی انتخاب سفارشی</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
| | <style> |
| <style>
| | body { |
| * {
| | font-family: sans-serif; |
| margin: 0;
| | background: #f2f2f2; |
| padding: 0;
| | padding: 40px; |
| box-sizing: border-box;
| | } |
| }
| | .custom-select { |
|
| | position: relative; |
| :root {
| | width: 250px; |
| --primary-color: #2c5530;
| | background: #fff; |
| --secondary-color: #4a7c59;
| | border: 1px solid #ccc; |
| --accent-color: #8fb996;
| | border-radius: 8px; |
| --light-color: #f8f9fa;
| | cursor: pointer; |
| --dark-color: #343a40;
| | user-select: none; |
| --text-color: #333;
| | } |
| --border-color: #dee2e6;
| | .selected-option { |
| --shadow: 0 4px 12px rgba(0,0,0,0.1);
| | padding: 10px; |
| --transition: all 0.3s ease;
| | } |
| }
| | .options { |
|
| | display: none; |
| body {
| | position: absolute; |
| font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
| | top: 100%; |
| background: #f0f2f5;
| | right: 0; |
| color: var(--text-color);
| | width: 100%; |
| line-height: 1.6;
| | background: #fff; |
| padding: 10px;
| | border: 1px solid #ccc; |
| min-height: 100vh;
| | border-top: none; |
| }
| | border-radius: 0 0 8px 8px; |
|
| | z-index: 10; |
| .container {
| | } |
| max-width: 1200px;
| | .options div { |
| margin: 0 auto;
| | padding: 10px; |
| background: white;
| | transition: background 0.2s; |
| padding: 15px;
| | } |
| border-radius: 8px;
| | .options div:hover { |
| box-shadow: 0 2px 10px rgba(0,0,0,0.05);
| | background: #e0f7fa; |
| }
| | } |
|
| | .show { |
| .header {
| | display: block; |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
| | } |
| color: white;
| | </style> |
| padding: 20px;
| |
| border-radius: 8px;
| |
| margin-bottom: 20px;
| |
| text-align: center;
| |
| }
| |
|
| |
| h1 {
| |
| margin: 0;
| |
| font-size: 24px;
| |
| font-weight: 700;
| |
| }
| |
|
| |
| .description {
| |
| color: rgba(255,255,255,0.9);
| |
| font-size: 14px;
| |
| margin-top: 8px;
| |
| }
| |
|
| |
| .stats-bar {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| background: var(--light-color);
| |
| padding: 10px 15px;
| |
| border-radius: 6px;
| |
| margin-bottom: 15px;
| |
| border: 1px solid var(--border-color);
| |
| font-size: 13px;
| |
| }
| |
|
| |
| .stat-item {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 6px;
| |
| }
| |
|
| |
| .stat-value {
| |
| font-weight: bold;
| |
| color: var(--primary-color);
| |
| }
| |
|
| |
| .filter-section {
| |
| margin-bottom: 20px;
| |
| background: var(--light-color);
| |
| padding: 15px;
| |
| border-radius: 8px;
| |
| border: 1px solid var(--border-color);
| |
| }
| |
|
| |
| .filter-row {
| |
| display: flex;
| |
| gap: 10px;
| |
| margin-bottom: 10px;
| |
| }
| |
|
| |
| .form-group {
| |
| flex: 1;
| |
| }
| |
|
| |
| label {
| |
| display: block;
| |
| margin-bottom: 6px;
| |
| font-weight: 600;
| |
| color: var(--dark-color);
| |
| font-size: 14px;
| |
| }
| |
|
| |
| .custom-select-container {
| |
| position: relative;
| |
| }
| |
|
| |
| .custom-select {
| |
| width: 100%;
| |
| padding: 10px 12px;
| |
| border: 1px solid var(--border-color);
| |
| border-radius: 6px;
| |
| font-size: 14px;
| |
| background: white;
| |
| cursor: pointer;
| |
| 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.active {
| |
| border-color: var(--primary-color);
| |
| }
| |
|
| |
| .custom-select i {
| |
| color: var(--primary-color);
| |
| transition: var(--transition);
| |
| font-size: 12px;
| |
| }
| |
|
| |
| .custom-select.active i {
| |
| transform: rotate(180deg);
| |
| }
| |
|
| |
| .custom-select-dropdown {
| |
| position: absolute;
| |
| top: 100%;
| |
| left: 0;
| |
| right: 0;
| |
| background: white;
| |
| border: 1px solid var(--border-color);
| |
| border-radius: 6px;
| |
| margin-top: 5px;
| |
| box-shadow: var(--shadow);
| |
| z-index: 1000;
| |
| display: none;
| |
| max-height: 250px;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .custom-select-dropdown.show {
| |
| display: block;
| |
| }
| |
|
| |
| .search-box {
| |
| padding: 10px;
| |
| border-bottom: 1px solid var(--border-color);
| |
| background: var(--light-color);
| |
| }
| |
|
| |
| .search-box input {
| |
| width: 100%;
| |
| padding: 8px 10px;
| |
| border: 1px solid var(--border-color);
| |
| border-radius: 4px;
| |
| font-size: 13px;
| |
| transition: var(--transition);
| |
| }
| |
|
| |
| .search-box input:focus {
| |
| outline: none;
| |
| border-color: var(--accent-color);
| |
| }
| |
|
| |
| .options-container {
| |
| max-height: 200px;
| |
| overflow-y: auto;
| |
| }
| |
|
| |
| .option-item {
| |
| padding: 10px 12px;
| |
| cursor: pointer;
| |
| border-bottom: 1px solid #f0f0f0;
| |
| font-size: 13px;
| |
| transition: var(--transition);
| |
| }
| |
|
| |
| .option-item:last-child {
| |
| border-bottom: none;
| |
| }
| |
|
| |
| .option-item:hover {
| |
| background-color: #e9ecef;
| |
| }
| |
|
| |
| .option-item.selected {
| |
| background-color: var(--primary-color);
| |
| color: white;
| |
| }
| |
|
| |
| select {
| |
| width: 100%;
| |
| padding: 10px 12px;
| |
| border: 1px solid var(--border-color);
| |
| border-radius: 6px;
| |
| font-size: 14px;
| |
| background: white;
| |
| transition: var(--transition);
| |
| cursor: pointer;
| |
| }
| |
|
| |
| select:focus {
| |
| outline: none;
| |
| border-color: var(--accent-color);
| |
| }
| |
|
| |
| .content-section {
| |
| margin-top: 15px;
| |
| border: 1px solid var(--border-color);
| |
| border-radius: 8px;
| |
| overflow: hidden;
| |
| background: white;
| |
| height: 500px;
| |
| display: flex;
| |
| flex-direction: column;
| |
| }
| |
|
| |
| .content-header {
| |
| padding: 12px 15px;
| |
| 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: 16px;
| |
| }
| |
|
| |
| .content-controls {
| |
| display: flex;
| |
| gap: 8px;
| |
| }
| |
|
| |
| .control-btn {
| |
| background: white;
| |
| border: 1px solid var(--border-color);
| |
| border-radius: 4px;
| |
| padding: 5px 10px;
| |
| cursor: pointer;
| |
| font-size: 12px;
| |
| transition: var(--transition);
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 4px;
| |
| }
| |
|
| |
| .control-btn:hover {
| |
| background: var(--light-color);
| |
| }
| |
|
| |
| .iframe-container {
| |
| width: 100%;
| |
| flex: 1;
| |
| position: relative;
| |
| }
| |
|
| |
| .clean-frame {
| |
| width: 100%;
| |
| height: 100%;
| |
| border: none;
| |
| background: white;
| |
| }
| |
|
| |
| .iframe-placeholder {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| height: 100%;
| |
| color: #6c757d;
| |
| font-size: 15px;
| |
| text-align: center;
| |
| padding: 15px;
| |
| background: white;
| |
| flex-direction: column;
| |
| }
| |
|
| |
| .action-buttons {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| align-items: center;
| |
| padding: 12px 15px;
| |
| background-color: var(--light-color);
| |
| border-top: 1px solid var(--border-color);
| |
| gap: 10px;
| |
| }
| |
|
| |
| .wiki-link, .site-link, .view-link {
| |
| background: var(--primary-color);
| |
| color: white;
| |
| text-decoration: none;
| |
| font-weight: 600;
| |
| padding: 8px 15px;
| |
| border-radius: 6px;
| |
| border: none;
| |
| cursor: pointer;
| |
| font-size: 13px;
| |
| text-align: center;
| |
| transition: var(--transition);
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 6px;
| |
| }
| |
|
| |
| .site-link {
| |
| background: #6c757d;
| |
| }
| |
|
| |
| .view-link {
| |
| background: var(--secondary-color);
| |
| }
| |
|
| |
| .site-link:hover, .wiki-link:hover, .view-link:hover {
| |
| opacity: 0.9;
| |
| transform: translateY(-1px);
| |
| }
| |
|
| |
| .recent-section {
| |
| margin-top: 20px;
| |
| background: var(--light-color);
| |
| padding: 15px;
| |
| border-radius: 8px;
| |
| border: 1px solid var(--border-color);
| |
| }
| |
|
| |
| .section-title {
| |
| font-size: 16px;
| |
| font-weight: 600;
| |
| color: var(--primary-color);
| |
| margin-bottom: 12px;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| }
| |
|
| |
| .recent-items {
| |
| display: flex;
| |
| gap: 10px;
| |
| overflow-x: auto;
| |
| padding: 5px;
| |
| }
| |
|
| |
| .recent-item {
| |
| background: white;
| |
| border-radius: 6px;
| |
| padding: 12px;
| |
| min-width: 150px;
| |
| border: 1px solid var(--border-color);
| |
| cursor: pointer;
| |
| transition: var(--transition);
| |
| text-align: center;
| |
| }
| |
|
| |
| .recent-item:hover {
| |
| transform: translateY(-2px);
| |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1);
| |
| }
| |
|
| |
| .recent-title {
| |
| font-weight: 600;
| |
| font-size: 13px;
| |
| color: var(--dark-color);
| |
| }
| |
|
| |
| .recent-category {
| |
| font-size: 11px;
| |
| color: #6c757d;
| |
| margin-top: 4px;
| |
| }
| |
|
| |
| .empty-recent {
| |
| text-align: center;
| |
| color: #6c757d;
| |
| padding: 15px;
| |
| font-style: italic;
| |
| width: 100%;
| |
| }
| |
|
| |
| .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;
| |
| }
| |
|
| |
| @media (max-width: 768px) {
| |
| body {
| |
| padding: 5px;
| |
| }
| |
|
| |
| .container {
| |
| padding: 10px;
| |
| }
| |
|
| |
| .filter-row {
| |
| flex-direction: column;
| |
| }
| |
|
| |
| .content-section {
| |
| height: 400px;
| |
| }
| |
|
| |
| .action-buttons {
| |
| flex-direction: column;
| |
| }
| |
|
| |
| .wiki-link, .site-link, .view-link {
| |
| width: 100%;
| |
| }
| |
|
| |
| .stats-bar {
| |
| flex-direction: column;
| |
| gap: 8px;
| |
| }
| |
|
| |
| .content-header {
| |
| flex-direction: column;
| |
| gap: 8px;
| |
| align-items: flex-start;
| |
| }
| |
|
| |
| .content-controls {
| |
| width: 100%;
| |
| justify-content: space-between;
| |
| }
| |
|
| |
| .recent-items {
| |
| flex-direction: column;
| |
| }
| |
|
| |
| .recent-item {
| |
| min-width: auto;
| |
| }
| |
| }
| |
| </style>
| |
| </head> | | </head> |
| <body> | | <body> |
| <div class="container">
| |
| <div class="header">
| |
| <h1>کتابخانه پدیا بایبل</h1>
| |
| <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 class="filter-section">
| |
| <div class="filter-row">
| |
| <div class="form-group">
| |
| <label for="categorySelect">دسته‌بندی:</label>
| |
| <select id="categorySelect">
| |
| <option value="">لطفاً دسته‌بندی انتخاب کنید</option>
| |
| <option value="کتاب">کتاب</option>
| |
| <option value="مقاله">مقاله</option>
| |
| </select>
| |
| </div>
| |
|
| |
| <div class="form-group">
| |
| <label for="bookSelect">انتخاب محتوا:</label>
| |
| <div class="custom-select-container">
| |
| <div class="custom-select" id="customSelectDisplay">
| |
| <span>ابتدا دسته‌بندی را انتخاب کنید</span>
| |
| <i class="fas fa-chevron-down"></i>
| |
| </div>
| |
|
| |
| <div class="custom-select-dropdown" id="customDropdown">
| |
| <div class="search-box">
| |
| <input type="text" id="dropdownSearch" placeholder="جستجو در محتواها...">
| |
| </div>
| |
| <div class="options-container" id="optionsContainer">
| |
| <!-- محتواها اینجا نمایش داده خواهند شد -->
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| <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-placeholder" id="iframePlaceholder">
| |
| <div>
| |
| <i class="fas fa-book-open" style="font-size: 2.5rem; color: #6c757d; margin-bottom: 10px;"></i>
| |
| <p>لطفاً یک کتاب یا مقاله از لیست انتخاب کنید</p>
| |
| </div>
| |
| </div>
| |
| <iframe id="contentFrame" class="clean-frame" src="about:blank" style="display: none;"></iframe>
| |
| </div>
| |
| <div class="action-buttons">
| |
| <a id="siteLink" href="#" class="site-link" target="_blank" style="display: none;">
| |
| <i class="fas fa-external-link-alt"></i>
| |
| مشاهده صفحه در سایت اصلی
| |
| </a>
| |
| <a id="wikiLink" href="#" class="wiki-link" target="_blank" style="display: none;">
| |
| <i class="fab fa-wikipedia-w"></i>
| |
| مشاهده صفحه کامل در ویکی
| |
| </a>
| |
| <a id="viewLink" href="#" class="view-link" target="_blank" style="display: none;">
| |
| <i class="fas fa-eye"></i>
| |
| مشاهده صفحه
| |
| </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>
| |
|
| |
|
| <script>
| | <div class="custom-select" id="dropdown"> |
| const booksData = {
| | <div class="selected-option">انتخاب کنید</div> |
| 'کتاب': [
| | <div class="options"> |
| { value: 'عیسی', text: 'عیسی' },
| | <div>گزینه اول</div> |
| { value: 'انجیل_متی', text: 'انجیل متی' },
| | <div>گزینه دوم</div> |
| { value: 'مزامیر', text: 'مزامیر' },
| | <div>گزینه سوم</div> |
| { value: 'پیدایش', text: 'پیدایش' }
| | </div> |
| ],
| | </div> |
| 'مقاله': [
| |
| { value: 'مسیح', text: 'مسیح' },
| |
| { value: 'تثلیث', text: 'تثلیث' },
| |
| { value: 'نجات', text: 'نجات' },
| |
| { value: 'روح_القدس', text: 'روح القدس' }
| |
| ]
| |
| };
| |
|
| |
|
| // عناصر DOM
| | <script> |
| const categorySelect = document.getElementById('categorySelect');
| | function toggleDropdown() { |
| const customSelectDisplay = document.getElementById('customSelectDisplay');
| | document.querySelector('.options').classList.toggle('show'); |
| 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');
| |
| const siteLink = document.getElementById('siteLink');
| |
| const viewLink = document.getElementById('viewLink');
| |
| 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 currentCategory = '';
| | // ✅ اینجا event listener اضافه شده: |
| let currentSelection = { value: '', text: '' };
| | document.querySelector('.custom-select').addEventListener('click', toggleDropdown); |
| let currentZoom = 100;
| |
| let readItems = JSON.parse(localStorage.getItem('readItems')) || [];
| |
|
| |
|
| // به روزرسانی آمار
| | // بستن dropdown در کلیک بیرون از آن |
| function updateStats() {
| | document.addEventListener('click', function(event) { |
| booksCount.textContent = booksData['کتاب'].length;
| | const dropdown = document.querySelector('.custom-select'); |
| articlesCount.textContent = booksData['مقاله'].length;
| | if (!dropdown.contains(event.target)) { |
| readCount.textContent = readItems.length;
| | document.querySelector('.options').classList.remove('show'); |
| }
| | } |
| | }); |
|
| |
|
| // به روزرسانی لیست مطالب مطالعه شده
| | // انتخاب گزینه و تغییر متن |
| function updateRecentItems() {
| | document.querySelectorAll('.options div').forEach(option => { |
| if (readItems.length === 0) {
| | option.addEventListener('click', function() { |
| recentItems.innerHTML = '<div class="empty-recent">هیچ مطلبی اخیراً مطالعه نشده است</div>';
| | document.querySelector('.selected-option').textContent = this.textContent; |
| return;
| | }); |
| }
| | }); |
|
| | </script> |
| recentItems.innerHTML = '';
| |
| const recentToShow = readItems.slice(-5).reverse();
| |
|
| |
| recentToShow.forEach(item => {
| |
| const recentItem = document.createElement('div');
| |
| recentItem.className = 'recent-item';
| |
| recentItem.innerHTML = `
| |
| <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);
| |
| });
| |
| }
| |
|
| |
|
| // مدیریت باز و بسته شدن dropdown
| |
| function toggleDropdown() {
| |
| if (!currentCategory) {
| |
| alert('لطفاً ابتدا یک دسته‌بندی انتخاب کنید');
| |
| return;
| |
| }
| |
|
| |
| const isOpen = customDropdown.classList.contains('show');
| |
|
| |
| // بستن تمام dropdownهای دیگر
| |
| document.querySelectorAll('.custom-select-dropdown.show').forEach(dropdown => {
| |
| dropdown.classList.remove('show');
| |
| });
| |
| document.querySelectorAll('.custom-select.active').forEach(select => {
| |
| select.classList.remove('active');
| |
| });
| |
|
| |
| if (!isOpen) {
| |
| customDropdown.classList.add('show');
| |
| customSelectDisplay.classList.add('active');
| |
| populateDropdownOptions();
| |
| dropdownSearch.value = '';
| |
| setTimeout(() => dropdownSearch.focus(), 100);
| |
| }
| |
| }
| |
|
| |
| // پر کردن dropdown با گزینه‌ها
| |
| function populateDropdownOptions(searchTerm = '') {
| |
| if (!currentCategory) return;
| |
|
| |
| const books = booksData[currentCategory];
| |
| const searchLower = searchTerm.toLowerCase();
| |
|
| |
| optionsContainer.innerHTML = '';
| |
|
| |
| const filteredBooks = books.filter(book =>
| |
| !searchTerm || book.text.toLowerCase().includes(searchLower)
| |
| );
| |
|
| |
| if (filteredBooks.length === 0) {
| |
| const noResult = document.createElement('div');
| |
| noResult.className = 'option-item';
| |
| noResult.textContent = 'نتیجه‌ای یافت نشد';
| |
| noResult.style.color = '#999';
| |
| optionsContainer.appendChild(noResult);
| |
| return;
| |
| }
| |
|
| |
| filteredBooks.forEach(book => {
| |
| const optionItem = document.createElement('div');
| |
| optionItem.className = 'option-item';
| |
| optionItem.textContent = book.text;
| |
| optionItem.setAttribute('data-value', book.value);
| |
| optionItem.setAttribute('data-text', book.text);
| |
|
| |
| if (book.value === currentSelection.value) {
| |
| optionItem.classList.add('selected');
| |
| }
| |
|
| |
| optionItem.addEventListener('click', function() {
| |
| const value = this.getAttribute('data-value');
| |
| const text = this.getAttribute('data-text');
| |
|
| |
| currentSelection = { value, text };
| |
| customSelectDisplay.innerHTML = `<span>${text}</span><i class="fas fa-chevron-down"></i>`;
| |
| customSelectDisplay.style.color = '#333';
| |
|
| |
| // بستن dropdown
| |
| customDropdown.classList.remove('show');
| |
| customSelectDisplay.classList.remove('active');
| |
|
| |
| showContent(value, text);
| |
| });
| |
|
| |
| optionsContainer.appendChild(optionItem);
| |
| });
| |
| }
| |
|
| |
| // به روزرسانی لیست کتاب‌ها وقتی دسته‌بندی تغییر می‌کند
| |
| function updateBookList() {
| |
| const selectedCategory = categorySelect.value;
| |
| currentCategory = selectedCategory;
| |
|
| |
| if (!selectedCategory) {
| |
| customSelectDisplay.innerHTML = '<span>ابتدا دسته‌بندی را انتخاب کنید</span><i class="fas fa-chevron-down"></i>';
| |
| customSelectDisplay.style.color = '#6c757d';
| |
| resetContent();
| |
| return;
| |
| }
| |
|
| |
| customSelectDisplay.innerHTML = '<span>لطفاً محتوا انتخاب کنید</span><i class="fas fa-chevron-down"></i>';
| |
| customSelectDisplay.style.color = '#333';
| |
| resetContent();
| |
| }
| |
|
| |
| // نمایش محتوا
| |
| function showContent(bookValue, bookText) {
| |
| if (!bookValue) {
| |
| resetContent();
| |
| return;
| |
| }
| |
|
| |
| // افزودن به تاریخچه مطالعه
| |
| const newItem = { value: bookValue, text: bookText, category: currentCategory };
| |
| if (!readItems.some(item => item.value === bookValue && item.category === currentCategory)) {
| |
| readItems.push(newItem);
| |
| localStorage.setItem('readItems', JSON.stringify(readItems));
| |
| updateStats();
| |
| updateRecentItems();
| |
| }
| |
|
| |
| 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}`;
| |
|
| |
| contentTitle.textContent = bookText;
| |
| contentFrame.style.display = 'none';
| |
| iframePlaceholder.style.display = 'flex';
| |
| iframePlaceholder.innerHTML = `
| |
| <div>
| |
| <i class="fas fa-spinner fa-spin" style="font-size: 2.5rem; color: #2c5530; margin-bottom: 10px;"></i>
| |
| <p>در حال بارگذاری "${bookText}"...</p>
| |
| </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.onload = function() {
| |
| clearInterval(progressInterval);
| |
| loadingBar.style.width = '100%';
| |
| setTimeout(() => {
| |
| loadingBar.style.width = '0%';
| |
| }, 500);
| |
|
| |
| contentFrame.style.display = 'block';
| |
| iframePlaceholder.style.display = 'none';
| |
| applyZoom();
| |
| };
| |
|
| |
| contentFrame.onerror = function() {
| |
| clearInterval(progressInterval);
| |
| loadingBar.style.width = '0%';
| |
| iframePlaceholder.style.display = 'flex';
| |
| iframePlaceholder.innerHTML = `
| |
| <div>
| |
| <i class="fas fa-exclamation-triangle" style="font-size: 2.5rem; color: #dc3545; margin-bottom: 10px;"></i>
| |
| <p>خطا در بارگذاری "${bookText}". لطفاً دوباره تلاش کنید.</p>
| |
| </div>
| |
| `;
| |
| contentFrame.style.display = 'none';
| |
| };
| |
|
| |
| // به‌روزرسانی لینک‌ها
| |
| wikiLink.href = wikiUrl;
| |
| wikiLink.style.display = 'flex';
| |
|
| |
| siteLink.href = siteUrl;
| |
| siteLink.style.display = 'flex';
| |
|
| |
| viewLink.href = contentUrl;
| |
| viewLink.style.display = 'flex';
| |
| }
| |
|
| |
| function resetContent() {
| |
| currentSelection = { value: '', text: '' };
| |
| contentTitle.textContent = 'هیچ محتوایی انتخاب نشده است';
| |
| contentFrame.style.display = 'none';
| |
| iframePlaceholder.style.display = 'flex';
| |
| iframePlaceholder.innerHTML = `
| |
| <div>
| |
| <i class="fas fa-book-open" style="font-size: 2.5rem; color: #6c757d; margin-bottom: 10px;"></i>
| |
| <p>لطفاً یک کتاب یا مقاله از لیست انتخاب کنید</p>
| |
| </div>
| |
| `;
| |
| wikiLink.style.display = 'none';
| |
| siteLink.style.display = 'none';
| |
| viewLink.style.display = 'none';
| |
| contentFrame.src = 'about:blank';
| |
| }
| |
|
| |
| function applyZoom() {
| |
| contentFrame.style.zoom = `${currentZoom}%`;
| |
| }
| |
|
| |
| // event listeners - این قسمت اضافه شد
| |
| customSelectDisplay.addEventListener('click', toggleDropdown);
| |
|
| |
| document.addEventListener('click', function(e) {
| |
| if (!customSelectDisplay.contains(e.target) && !customDropdown.contains(e.target)) {
| |
| customDropdown.classList.remove('show');
| |
| customSelectDisplay.classList.remove('active');
| |
| }
| |
| });
| |
|
| |
| dropdownSearch.addEventListener('input', function() {
| |
| populateDropdownOptions(this.value);
| |
| });
| |
|
| |
| categorySelect.addEventListener('change', updateBookList);
| |
|
| |
| 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);
| |
| }
| |
| });
| |
|
| |
| // مقداردهی اولیه
| |
| updateStats();
| |
| updateRecentItems();
| |
| updateBookList();
| |
| </script>
| |
| </body> | | </body> |
| </html> | | </html> |
