Spaces:
Sleeping
Sleeping
| <html lang="fa"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>جستجوی معنایی خاطرات</title> | |
| <link rel="stylesheet" href="fonts/vazirmatn.css"> | |
| <style> | |
| body { | |
| font-family: 'Vazirmatn', sans-serif; | |
| direction: rtl; | |
| text-align: right; | |
| margin: 20px; | |
| line-height: 1.6; | |
| background-color: #f4f4f4; | |
| color: #333; | |
| } | |
| .container { | |
| max-width: 800px; | |
| margin: auto; | |
| background: #fff; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| } | |
| h1, h2, h3 { | |
| text-align: center; | |
| color: #555; | |
| font-family: 'Vazirmatn', sans-serif; | |
| } | |
| .search-section, .results-section, .book-selection-section, .results-control-section { | |
| margin-bottom: 20px; | |
| padding: 15px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| background-color: #f9f9f9; | |
| } | |
| .book-selection-section h3, .results-control-section h3 { | |
| margin-top: 0; | |
| border-bottom: 1px solid #eee; | |
| padding-bottom: 10px; | |
| margin-bottom: 10px; | |
| font-family: 'Vazirmatn', sans-serif; | |
| } | |
| .book-list label { | |
| display: block; | |
| margin-bottom: 8px; | |
| cursor: pointer; | |
| font-family: 'Vazirmatn', sans-serif; | |
| } | |
| .book-list input[type="checkbox"] { | |
| margin-left: 5px; | |
| } | |
| #select_all_books_label { | |
| font-weight: bold; | |
| } | |
| #loadingStatus, #selectionError { | |
| margin-top: 10px; | |
| font-style: italic; | |
| font-weight: bold; | |
| color: #666; | |
| font-family: 'Vazirmatn', sans-serif; | |
| } | |
| #selectionError { | |
| color: red; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: bold; | |
| font-family: 'Vazirmatn', sans-serif; | |
| } | |
| input[type="text"], button, select { | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| font-size: 1rem; | |
| box-sizing: border-box; | |
| font-family: 'Vazirmatn', sans-serif ; | |
| vertical-align: middle; | |
| } | |
| input[type="text"] { | |
| min-height: 40px; | |
| } | |
| button { | |
| background-color: #5cb85c; | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| button:hover { | |
| background-color: #4cae4c; | |
| } | |
| button:disabled { | |
| background-color: #d3d3d3; | |
| cursor: not-allowed; | |
| } | |
| select { | |
| padding: 8px; | |
| font-size: 0.9rem; | |
| } | |
| .search-input-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| width: 100%; | |
| box-sizing: border-box; | |
| max-width: 700px; | |
| } | |
| .search-input-container input[type="text"] { | |
| flex: 1 1 auto; | |
| min-width: 200px; | |
| max-width: 600px; | |
| margin: 0; | |
| box-sizing: border-box; | |
| } | |
| .search-input-container button { | |
| flex: 0 0 auto; | |
| width: 90px; | |
| margin: 0; | |
| box-sizing: border-box; | |
| height: 40px; | |
| } | |
| .results-control-section label { | |
| display: inline-block; | |
| margin-left: 10px; | |
| font-weight: normal; | |
| font-family: 'Vazirmatn', sans-serif; | |
| } | |
| .result-item { | |
| border-bottom: 1px solid #eee; | |
| padding: 10px 0; | |
| margin-bottom: 10px; | |
| } | |
| .result-item:last-child { | |
| border-bottom: none; | |
| margin-bottom: 0; | |
| } | |
| .result-reference { | |
| font-size: 0.9em; | |
| color: #555; | |
| margin-bottom: 5px; | |
| font-family: 'Vazirmatn', sans-serif; | |
| } | |
| .result-book-title { | |
| font-size: 0.8em; | |
| color: #777; | |
| margin-bottom: 5px; | |
| font-style: italic; | |
| font-family: 'Vazirmatn', sans-serif; | |
| } | |
| .result-passage { | |
| margin-bottom: 5px; | |
| font-family: 'Vazirmatn', sans-serif; | |
| } | |
| .result-similarity { | |
| font-size: 0.8em; | |
| color: #007bff; | |
| text-align: left; | |
| font-family: 'Vazirmatn', sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>جستجوی معنایی خاطرات دوران پهلوی</h1> | |
| <div class="book-selection-section"> | |
| <h3>انتخاب کتابها برای جستجو:</h3> | |
| <div class="book-list"> | |
| <label id="select_all_books_label"> | |
| <input type="checkbox" id="select_all_books"> | |
| انتخاب همه موارد | |
| </label> | |
| <label> | |
| <input type="checkbox" class="book-checkbox" id="jabe_siah_checkbox" value="jabe_siah.json" checked> | |
| جعبه سیاه (منتخب خاطرات اسدالله علم) | |
| </label> | |
| </div> | |
| <p id="loadingStatus"></p> | |
| <p id="selectionError"></p> | |
| </div> | |
| <div class="search-section"> | |
| <label for="userQuestion">سوال شما:</label> | |
| <div class="search-input-container"> | |
| <input type="text" id="userQuestion" placeholder="عبارت مورد نظر برای جستجو را وارد کنید..."> | |
| <button id="searchButton" disabled>جستجو</button> | |
| </div> | |
| </div> | |
| <div class="results-control-section"> | |
| <h3>کنترل نمایش نتایج:</h3> | |
| <label for="resultsPerPage">تعداد نتایج برتر برای نمایش:</label> | |
| <select id="resultsPerPage"> | |
| <option value="10">10</option> | |
| <option value="20">20</option> | |
| <option value="30">30</option> | |
| <option value="50">50</option> | |
| <option value="100">100</option> | |
| </select> | |
| </div> | |
| <div class="results-section"> | |
| <h2>نتایج جستجو:</h2> | |
| <div id="searchResults"> | |
| <p>پس از انتخاب کتابها و وارد کردن سوال، نتایج اینجا نمایش داده میشوند.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |