Add index.html
This commit is contained in:
+300
@@ -0,0 +1,300 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fa" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>جست‌وجوی اسناد شرکت صادنتل</title>
|
||||
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
background: #f3f5f8;
|
||||
margin: 0;
|
||||
padding: 40px 20px;
|
||||
color: #263238;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 850px;
|
||||
margin: auto;
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 3px 15px #00000012;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.description {
|
||||
text-align: center;
|
||||
color: #777;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
direction: auto;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-color: #2684d9;
|
||||
}
|
||||
|
||||
#status {
|
||||
margin: 18px 0;
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.result {
|
||||
border: 1px solid #e2e6ea;
|
||||
border-radius: 8px;
|
||||
padding: 18px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.result h3 {
|
||||
margin: 0 0 15px;
|
||||
font-size: 16px;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 7px 0;
|
||||
font-size: 14px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.info span:first-child {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.info span:last-child {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 25px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<h2>سامانه جست‌وجوی اسناد</h2>
|
||||
|
||||
<p class="description">
|
||||
جست‌وجو بر اساس عنوان یا شناسه داخلی سند
|
||||
</p>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
id="searchInput"
|
||||
placeholder="نام سند یا شناسه مانند DOC-S300-015 را وارد کنید..."
|
||||
>
|
||||
|
||||
<div id="status">در حال بارگذاری اسناد...</div>
|
||||
|
||||
<div id="results"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
let documents = [];
|
||||
|
||||
const searchInput = document.getElementById("searchInput");
|
||||
const results = document.getElementById("results");
|
||||
const status = document.getElementById("status");
|
||||
|
||||
// تبدیل اعداد فارسی و عربی به انگلیسی
|
||||
function normalize(text) {
|
||||
return String(text)
|
||||
.replace(/[۰-۹]/g, d =>
|
||||
"۰۱۲۳۴۵۶۷۸۹".indexOf(d))
|
||||
.replace(/[٠-٩]/g, d =>
|
||||
"٠١٢٣٤٥٦٧٨٩".indexOf(d))
|
||||
.toLowerCase()
|
||||
.trim();
|
||||
}
|
||||
|
||||
// خواندن صحیح اطلاعات CSV
|
||||
function parseCSV(text) {
|
||||
const rows = [];
|
||||
let row = [];
|
||||
let field = "";
|
||||
let insideQuotes = false;
|
||||
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
const char = text[i];
|
||||
|
||||
if (char === '"') {
|
||||
if (insideQuotes && text[i + 1] === '"') {
|
||||
field += '"';
|
||||
i++;
|
||||
} else {
|
||||
insideQuotes = !insideQuotes;
|
||||
}
|
||||
}
|
||||
else if (char === "," && !insideQuotes) {
|
||||
row.push(field);
|
||||
field = "";
|
||||
}
|
||||
else if ((char === "\n" || char === "\r") && !insideQuotes) {
|
||||
if (char === "\r" && text[i + 1] === "\n") i++;
|
||||
|
||||
row.push(field);
|
||||
|
||||
if (row.some(value => value.trim() !== "")) {
|
||||
rows.push(row);
|
||||
}
|
||||
|
||||
row = [];
|
||||
field = "";
|
||||
}
|
||||
else {
|
||||
field += char;
|
||||
}
|
||||
}
|
||||
|
||||
row.push(field);
|
||||
|
||||
if (row.some(value => value.trim() !== "")) {
|
||||
rows.push(row);
|
||||
}
|
||||
|
||||
return rows;
|
||||
}
|
||||
|
||||
// دریافت فایل CSV
|
||||
async function loadDocuments() {
|
||||
try {
|
||||
const response = await fetch("./SadenTel_Documents.csv");
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("CSV file not found");
|
||||
}
|
||||
|
||||
const text = await response.text();
|
||||
const rows = parseCSV(text);
|
||||
|
||||
documents = rows.slice(1).map(columns => ({
|
||||
row: columns[0]?.trim(),
|
||||
title: columns[1]?.trim(),
|
||||
id: columns[2]?.trim()
|
||||
})).filter(doc => doc.title && doc.id);
|
||||
|
||||
status.textContent =
|
||||
`${documents.length} سند با موفقیت بارگذاری شد.`;
|
||||
|
||||
searchInput.disabled = false;
|
||||
|
||||
} catch (error) {
|
||||
status.textContent =
|
||||
"خطا در خواندن فایل اسناد. مسیر CSV را بررسی کنید.";
|
||||
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
// جست‌وجوی اسناد
|
||||
function searchDocuments() {
|
||||
const query = normalize(searchInput.value);
|
||||
|
||||
results.innerHTML = "";
|
||||
|
||||
if (!query) {
|
||||
status.textContent =
|
||||
`${documents.length} سند ثبت شده است.`;
|
||||
return;
|
||||
}
|
||||
|
||||
const matches = documents.filter(doc =>
|
||||
normalize(doc.title).includes(query) ||
|
||||
normalize(doc.id).includes(query)
|
||||
);
|
||||
|
||||
status.textContent =
|
||||
`${matches.length} نتیجه پیدا شد.`;
|
||||
|
||||
if (matches.length === 0) {
|
||||
results.innerHTML =
|
||||
'<div class="empty">سندی با این مشخصات پیدا نشد.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
matches.forEach(doc => {
|
||||
const item = document.createElement("div");
|
||||
item.className = "result";
|
||||
|
||||
const title = document.createElement("h3");
|
||||
title.textContent = doc.title;
|
||||
|
||||
const rowInfo = document.createElement("div");
|
||||
rowInfo.className = "info";
|
||||
|
||||
const rowLabel = document.createElement("span");
|
||||
rowLabel.textContent = "ردیف";
|
||||
|
||||
const rowValue = document.createElement("span");
|
||||
rowValue.textContent = doc.row;
|
||||
|
||||
rowInfo.append(rowLabel, rowValue);
|
||||
|
||||
const idInfo = document.createElement("div");
|
||||
idInfo.className = "info";
|
||||
|
||||
const idLabel = document.createElement("span");
|
||||
idLabel.textContent = "شناسه داخلی سند";
|
||||
|
||||
const idValue = document.createElement("span");
|
||||
idValue.textContent = doc.id;
|
||||
|
||||
idInfo.append(idLabel, idValue);
|
||||
|
||||
item.append(title, rowInfo, idInfo);
|
||||
results.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
// جست‌وجوی لحظه‌ای
|
||||
searchInput.addEventListener("input", searchDocuments);
|
||||
|
||||
loadDocuments();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
مرجع در شماره جدید
مسدود کردن کاربر