חיפוש בהודעות מערכת
-
לאחרונה ראיתי הרבה שרצו
לחפש ללא CTRL + F הודעות מערכת
אז עשיתי קוד HTML שמחפש זאת
אשמח לתגובות ממכם האם זה נצרך או לא...לשימוש אינטרנטי לחצו כאן
קרדיט ל:@איל-משולש<!DOCTYPE html> <html lang="he" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>חיפוש הודעות מערכת</title> <style> @import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700&display=swap'); :root { --primary: #315bea; --primary-dark: #2448c7; --text: #202942; --muted: #73809b; --border: #e5e9f2; --background: #f4f7fc; --white: #ffffff; --highlight: #fff0a8; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #eef3ff 0, #f7f9fd 360px, var(--background) 100%); color: var(--text); font-family: "Assistant", Arial, sans-serif; } .page-header { padding: 64px 20px 35px; text-align: center; } .small-title { margin-bottom: 8px; color: var(--primary); font-size: 15px; font-weight: 700; letter-spacing: 0.4px; } h1 { margin: 0; color: var(--text); font-size: clamp(30px, 5vw, 44px); font-weight: 700; line-height: 1.2; } .subtitle { max-width: 620px; margin: 13px auto 28px; color: var(--muted); font-size: 17px; line-height: 1.5; } .search-box { width: min(720px, 94%); height: 62px; margin: 0 auto; padding: 0 21px; display: flex; align-items: center; gap: 13px; background: var(--white); border: 1px solid #dce3f2; border-radius: 32px; box-shadow: 0 8px 28px rgba(44, 73, 145, 0.13); transition: 0.2s ease; } .search-box:focus-within { border-color: var(--primary); box-shadow: 0 8px 28px rgba(44, 73, 145, 0.16), 0 0 0 4px rgba(49, 91, 234, 0.10); } .search-icon { width: 26px; height: 26px; flex-shrink: 0; color: var(--primary); font-size: 26px; font-weight: bold; line-height: 22px; } #searchInput { width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-family: inherit; font-size: 19px; text-align: right; direction: rtl; } #searchInput::placeholder { color: #9aa5ba; } .status { width: min(1120px, 94%); min-height: 24px; margin: 20px auto 14px; color: var(--muted); font-size: 15px; font-weight: 500; text-align: center; } .error { color: #bb2638; } .results { width: min(1120px, 94%); margin: 0 auto 70px; } .result-card { margin-bottom: 17px; padding: 22px; overflow: hidden; background: var(--white); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 5px 18px rgba(38, 55, 92, 0.07); transition: transform 0.18s ease, box-shadow 0.18s ease; } .result-card:hover { transform: translateY(-2px); box-shadow: 0 9px 25px rgba(38, 55, 92, 0.11); } .card-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 19px; padding-bottom: 16px; border-bottom: 1px solid #edf0f6; } .number-label { color: var(--muted); font-size: 14px; font-weight: 600; } .message-number { padding: 6px 13px; color: var(--primary-dark); background: #edf2ff; border-radius: 8px; direction: ltr; font-family: Arial, sans-serif; font-size: 18px; font-weight: bold; white-space: nowrap; } .fields { display: grid; grid-template-columns: minmax(230px, 1.1fr) minmax(230px, 2fr) minmax(180px, 1fr); gap: 15px; } .field { min-width: 0; padding: 15px 16px; background: #fafbfe; border: 1px solid #edf0f6; border-radius: 12px; } .field-title { margin-bottom: 7px; color: var(--muted); font-size: 14px; font-weight: 700; } .field-value { min-height: 24px; color: var(--text); font-size: 17px; font-weight: 500; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } mark { padding: 1px 4px; background: var(--highlight); border-radius: 4px; color: inherit; } .message { padding: 52px 15px; color: var(--muted); font-size: 18px; font-weight: 500; text-align: center; } .footer-note { margin-top: 25px; color: #a2abc0; font-size: 13px; text-align: center; } @media (max-width: 800px) { .page-header { padding-top: 42px; } .fields { grid-template-columns: 1fr; } .card-top { align-items: flex-start; flex-direction: column; gap: 8px; } } @media (max-width: 500px) { .page-header { padding-right: 12px; padding-left: 12px; } .search-box { height: 55px; padding: 0 16px; } #searchInput { font-size: 17px; } .result-card { padding: 16px; border-radius: 14px; } .field { padding: 13px; } } </style> </head> <body> <header class="page-header"> <div class="small-title">מאגר הודעות מערכת</div> <h1>חיפוש הודעות מערכת</h1> <div class="subtitle"> חפש לפי מספר הודעה, טקסט ההודעה או שלוחה </div> <div class="search-box"> <span class="search-icon">⌕</span> <input id="searchInput" type="search" autocomplete="off" placeholder="הקלד כאן מילים או מספר הודעה..." > </div> </header> <div id="status" class="status"> טוען את מאגר ההודעות... </div> <main id="results" class="results"></main> <div class="footer-note"> כל מילות החיפוש חייבות להופיע באותה תוצאה </div> <script> const SHEET_ID = "15FgVf-z9g4ia_Phsv0OCiZirSPP4184TIWlS8lzHAFU"; const GID = "0"; const visibleColumns = [ { title: "מספר הודעה", sourceColumn: 0 }, { title: "ההודעה", sourceColumn: 1 }, { title: "לשלוחות", sourceColumn: 6 } ]; let messages = []; const searchInput = document.getElementById("searchInput"); const resultsElement = document.getElementById("results"); const statusElement = document.getElementById("status"); function normalize(text) { return String(text || "") .toLowerCase() .replace(/[״"'׳`]/g, "") .replace(/\s+/g, " ") .trim(); } function escapeHtml(text) { return String(text || "") .replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">") .replace(/"/g, """) .replace(/'/g, "'"); } function highlight(text, words) { let safeText = escapeHtml(text); words.forEach(word => { if (!word) return; const escapedWord = word.replace( /[.*+?^${}()|[\]\\]/g, "\\$&" ); safeText = safeText.replace( new RegExp("(" + escapedWord + ")", "gi"), "<mark>$1</mark>" ); }); return safeText; } function getCellValue(cell) { if (!cell) return ""; if (cell.f !== undefined) { return String(cell.f); } if (cell.v !== undefined && cell.v !== null) { return String(cell.v); } return ""; } window.googleSheetCallback = function(data) { try { if (!data || !data.table) { throw new Error("לא התקבלו נתונים תקינים"); } const rows = data.table.rows || []; messages = rows.map(row => { const fullRow = []; for (let i = 0; i < 7; i++) { fullRow.push(getCellValue(row.c[i])); } return fullRow; }); statusElement.textContent = `נטענו ${messages.length.toLocaleString("he-IL")} הודעות`; showResults(); } catch (error) { console.error(error); statusElement.textContent = "אירעה שגיאה בקריאת נתוני הגיליון"; statusElement.classList.add("error"); } }; function loadSheetData() { const script = document.createElement("script"); const url = "https://docs.google.com/spreadsheets/d/" + encodeURIComponent(SHEET_ID) + "/gviz/tq" + "?gid=" + encodeURIComponent(GID) + "&headers=1" + "&tqx=" + encodeURIComponent( "out:json;responseHandler:googleSheetCallback" ); script.src = url; script.onerror = function() { statusElement.textContent = "לא ניתן לטעון את הגיליון. " + "בדוק שהגיליון פתוח לצפייה ושמזהה הגיליון נכון."; statusElement.classList.add("error"); }; document.body.appendChild(script); } function showResults() { const searchText = normalize(searchInput.value); if (!searchText) { resultsElement.innerHTML = '<div class="message">' + 'הקלד מספר הודעה או מילים לחיפוש' + '</div>'; statusElement.textContent = `נטענו ${messages.length.toLocaleString("he-IL")} הודעות`; return; } const searchWords = searchText .split(" ") .filter(word => word.length > 0); const matchingMessages = messages.filter(row => { const searchableText = normalize( visibleColumns .map(column => row[column.sourceColumn]) .join(" ") ); return searchWords.every(word => searchableText.includes(word) ); }); statusElement.textContent = `נמצאו ${matchingMessages.length.toLocaleString("he-IL")} תוצאות`; if (matchingMessages.length === 0) { resultsElement.innerHTML = '<div class="message">לא נמצאו תוצאות מתאימות</div>'; return; } resultsElement.innerHTML = matchingMessages.map(row => { const messageNumber = row[0] || "ללא מספר"; const fieldsHtml = visibleColumns.map(column => { const value = row[column.sourceColumn] || ""; return ` <div class="field"> <div class="field-title"> ${escapeHtml(column.title)} </div> <div class="field-value"> ${highlight(value, searchWords)} </div> </div> `; }).join(""); return ` <article class="result-card"> <div class="card-top"> <span class="number-label">מספר הודעה</span> <span class="message-number"> ${highlight(messageNumber, searchWords)} </span> </div> <div class="fields"> ${fieldsHtml} </div> </article> `; }).join(""); } searchInput.addEventListener("input", showResults); loadSheetData(); </script> </body> </html>
שלום! נראה שהשיחה הזו מעניינת אותך, אבל עדיין אין לך חשבון.
נמאס לכם לגלול בין אותם הפוסטים בכל ביקור? כשנרשמים לחשבון, תמיד תחזרו בדיוק למקום שבו הייתם קודם, ותוכלו לבחור לקבל התראות על תגובות חדשות (בין אם במייל, ובין אם בהתראת פוש). תוכלו גם לשמור סימניות ולפרגן ב-upvote לפוסטים כדי להביע הערכה לחברי קהילה אחרים.
בעזרת התרומה שלך, הפוסט הזה יכול להיות אפילו טוב יותר 💗
הרשמה התחברות