להורדה | פתרון למשתמשי אופיס במאק

שלמפוק'

היה לי בעיה במקבוק שלי שקניתי לפני שבוע אחרי שהתקנתי אופיס ראיתי שכל הגופנים שהתקנתי קימיים במקבוק המממה שלא מוצג איך הם נראים בפועל כמו בוינדוס אלא רק שם הגופן באנגלית שזה לא ממש עוזר לי, וגם שמעבירים את העכבר על המלל הרצוי ומדפדפים בגופנים לא מזהים איך הוא נראה בקיצור ממש התיאשתי עד שהחלטתי לפתוח עם הAI פתרון והוא לפתח תוכנה שתיטען את כל הגופנים מהמקבוק ותראה איך הם נראים ואחרי שמדפדפים ובחורים את הגופן הרצוי פשוט מקליקים עליו ומעטיקים את שם הגופן לוורד או מה שזה כמובן לאחר שבחרנו את הקטע הרצוי מתוך מהמסך שאנחנו רוצים שיהיה לו את הגופן הלזה ואופה יש לנו את הגופן
לא טרחתי לסגור אותו לתוכנה והוא בקוד עדיין ומי שרוצה שיעשה בו כרצונו לטובת הכלל ויעלה את התיקונים

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>תצוגת גופנים בעברית · macOS Preview</title>
    <meta name="description" content="אפליקציה להצגת טקסט בעברית בכל גופני המערכת, עם תצוגה חיה, RTL ומצב כהה.">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --bg: #0b1220;
            --panel: #111827;
            --panel-2: #0f172a;
            --text: #e5e7eb;
            --muted: #94a3b8;
            --primary: #22d3ee;
            --primary-weak: rgba(34,211,238,.15);
            --border: #1f2937;
            --accent: #334155;
        }

        @media (prefers-color-scheme: light) {
            :root {
                --bg: #ffffff;
                --panel: #f8fafc;
                --panel-2: #ffffff;
                --text: #0f172a;
                --muted: #475569;
                --primary: #0ea5e9;
                --primary-weak: rgba(14,165,233,.15);
                --border: #e2e8f0;
                --accent: #e5e7eb;
            }
        }

        html, body {
            height: 100%;
            background: radial-gradient(1200px 600px at 100% -10%, rgba(34,211,238,.08), transparent 60%), var(--bg);
            color: var(--text);
            font-family: -apple-system, system-ui, "SF Pro", Segoe UI, Roboto, "Noto Sans", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
            line-height: 1.6;
        }

        .app {
            display: grid;
            grid-template-rows: auto 1fr auto;
            min-height: 100dvh;
        }

        header {
            border-bottom: 1px solid var(--border);
            background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
            backdrop-filter: blur(8px);
        }
        .container { max-width: 1200px; margin: 0 auto; padding: 16px 20px; }
        .topbar { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
        .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .3px; }
        .badge { padding: 2px 8px; border: 1px solid var(--accent); border-radius: 999px; font-size: 12px; color: var(--muted); }
        .status { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
        .status.loading::before { content: ''; width: 12px; height: 12px; border: 2px solid var(--accent); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
        .status.success { color: #10b981; }
        .status.error { color: #ef4444; }
        @keyframes spin { to { transform: rotate(360deg); } }

        main { 
            display: grid; 
            grid-template-columns: 1fr 380px; 
            gap: 20px; 
            padding: 24px; 
            max-width: 1400px; 
            margin: 0 auto; 
            width: 100%;
            align-items: start;
        }
        @media (max-width: 1024px) { main { grid-template-columns: 1fr; } }

        .panel {
            background: linear-gradient(180deg, var(--panel), var(--panel-2));
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 8px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
        }

        /* אזור הטקסט + התצוגה */
        .editor {
            display: grid;
            grid-template-rows: auto auto 1fr auto;
            gap: 12px;
            padding: 14px;
        }
        .controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
        .control { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(148,163,184,.08); border: 1px solid var(--border); border-radius: 10px; }
        .control input[type="range"] { accent-color: var(--primary); }
        .search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(148,163,184,.06); }
        .search input { background: transparent; border: 0; outline: none; color: var(--text); width: 100%; }

        .text-area { width: 100%; min-height: 120px; resize: vertical; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: rgba(148,163,184,.06); color: var(--text); font-size: 18px; direction: rtl; }
        .preview { border: 1px dashed var(--accent); border-radius: 12px; padding: 16px; min-height: 160px; background: rgba(148,163,184,.04); }
        .preview-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: var(--muted); font-size: 14px; }
        .preview-content { white-space: pre-wrap; word-break: break-word; }

        .btns { display: flex; gap: 8px; flex-wrap: wrap; }
        .btn { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--accent); background: rgba(34,211,238,.08); color: var(--text); cursor: pointer; transition: transform .08s ease; }
        .btn:hover { transform: translateY(-1px); }
        .btn.secondary { background: transparent; }
        .btn.font-copy { 
            background: #b91c1c; 
            border-color: #b91c1c; 
            color: #ffffff;
            font-weight: 600;
        }
        .btn.font-copy:hover { 
            background: #991b1b; 
            border-color: #991b1b;
            color: #ffffff;
        }

        /* ספריית גופנים */
        .sidebar { 
            padding: 16px; 
            display: flex; 
            flex-direction: column;
            max-height: calc(100vh - 120px);
        }
        .sidebar > *:first-child {
            flex-shrink: 0;
            margin-bottom: 12px;
        }
        .font-list { 
            overflow-y: auto;
            overflow-x: hidden;
            flex: 1;
            min-height: 0;
            max-height: calc(100vh - 180px);
            padding-right: 8px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .font-list::-webkit-scrollbar {
            width: 8px;
        }
        .font-list::-webkit-scrollbar-track {
            background: transparent;
        }
        .font-list::-webkit-scrollbar-thumb {
            background: var(--accent);
            border-radius: 4px;
        }
        .font-list::-webkit-scrollbar-thumb:hover {
            background: #dc2626;
        }
        .font-item { 
            display: grid; 
            grid-template-columns: 1fr auto; 
            align-items: center; 
            gap: 16px; 
            padding: 14px 16px; 
            border-radius: 12px; 
            border: 1px solid transparent; 
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }
        .font-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: #dc2626;
            opacity: 0;
            transition: opacity 0.2s ease;
            border-radius: 0 3px 3px 0;
        }
        .font-item:hover { 
            background: rgba(220,38,38,.08); 
            border-color: #dc2626;
            transform: translateX(-4px);
        }
        .font-item:hover::before {
            opacity: 1;
        }
        .font-item.active { 
            outline: 2px solid #dc2626; 
            outline-offset: -2px; 
            background: rgba(220,38,38,.15);
            border-color: #dc2626;
            box-shadow: 0 0 20px rgba(220,38,38,.3);
        }
        .font-item.active::before {
            opacity: 1;
            width: 4px;
        }
        .font-name { 
            font-size: 14px; 
            color: var(--text);
            font-weight: 500;
        }
        .font-preview { 
            font-size: 32px; 
            color: var(--text);
            transition: all 0.2s ease;
            font-weight: 500;
            letter-spacing: 1px;
            line-height: 1.2;
        }
        .font-item:hover .font-preview {
            color: #dc2626;
            transform: scale(1.08);
            font-weight: 600;
        }
        .font-item.recent-font {
            background: rgba(220,38,38,.04);
        }

        .font-section-header {
            padding: 10px 16px 6px 16px;
            font-size: 11px;
            font-weight: 600;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            position: sticky;
            top: 0;
            background: var(--panel);
            z-index: 10;
            margin: 0 -16px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 6px;
            margin-top: 4px;
        }
        .font-section-header:first-child {
            margin-top: 0;
        }

        .copy-notification {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #1e293b;
            color: #ffffff;
            padding: 16px 24px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,.2);
            display: none;
            align-items: center;
            gap: 12px;
            font-size: 16px;
            z-index: 10000;
            font-weight: 400;
            font-family: -apple-system, system-ui, "SF Pro", Segoe UI, Roboto, sans-serif;
        }
        .copy-notification.show {
            display: flex;
            animation: fadeInOut 2s ease forwards;
        }
        @keyframes fadeInOut {
            0% { opacity: 0; transform: translate(-50%, -50%); }
            10% { opacity: 1; transform: translate(-50%, -50%); }
            90% { opacity: 1; transform: translate(-50%, -50%); }
            100% { opacity: 0; transform: translate(-50%, -50%); }
        }
        .copy-notification-icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            opacity: 0.9;
        }
        .copy-notification span {
            color: #ffffff;
        }

        footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
        footer .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; }
    </style>
</head>
<body>
    <div class="app">
        <header>
            <div class="container topbar">
                <div class="brand" aria-label="תצוגת גופנים בעברית">
                    <span>תוכנה לתצוגת פונטים למשתמשי מערכת MAC -לגרפיקים ומעמדים-</span>
                </div>
                <div class="status" id="fontStatus"><span>טוען גופנים מהמערכת...</span></div>
            </div>
        </header>

        <main>
            <section class="panel editor" aria-label="עורך טקסט ותצוגה">
                <div class="controls">
                    <div class="control"><label for="size">גודל</label><input id="size" type="range" min="12" max="96" value="28"><span id="sizeVal">28px</span></div>
                    <div class="control"><label for="line">גובה שורה</label><input id="line" type="range" min="1" max="2" step="0.05" value="1.5"><span id="lineVal">1.5</span></div>
                    <div class="control"><label for="weight">עובי</label><input id="weight" type="range" min="100" max="900" step="100" value="400"><span id="weightVal">400</span></div>
                    <button id="requestFonts" class="btn">טען את כל הגופנים מהמערכת</button>
                </div>

                <div class="search" role="search">
                    <span aria-hidden="true">🔎</span>
                    <input id="query" type="search" placeholder="חפש גופן...">
                </div>

                <textarea id="text" class="text-area" dir="rtl" placeholder="הקלד כאן טקסט בעברית לבדיקת גופנים...">שלום! תוכנה זו פותחה על ידי s.c. בניה ועיצוב אתרים 053-414-28-93 זהו טקסט לדוגמה בעברית. אפשר לגרור מעל שמות הגופנים כדי לקבל תצוגה חיה.</textarea>

                <div class="preview">
                    <div class="preview-header">
                        <div>תצוגה חיה</div>
                        <div style="display:flex; align-items:center; gap:8px;">
                            <div id="currentFont" title="הגופן הנבחר">system-ui</div>
                            <button id="copyFontName" class="btn font-copy" title="העתק שם הגופן" style="padding: 6px 12px; font-size: 12px;">העתק שם הגופן</button>
                        </div>
                    </div>
                    <div id="preview" class="preview-content" dir="rtl"></div>
                </div>

                <div class="btns">
                    <button id="copyText" class="btn">העתק טקסט</button>
                    <button id="copyHtml" class="btn secondary">העתק כ־HTML (שומר גופן)</button>
                </div>
            </section>

            <aside class="panel sidebar" aria-label="ספריית גופנים">
                <div style="display:flex;align-items:center;justify-content:space-between;gap:8px; padding: 4px 2px;">
                    <div style="color: var(--muted);">גופני מערכת</div>
                    <div id="fontCount" style="color: var(--muted); font-size: 12px;">0</div>
                </div>
                <div id="fontList" class="font-list" role="listbox" aria-label="רשימת גופנים"></div>
            </aside>
        </main>

        <footer>
            <div class="container">
                <span>© <span id="year"></span> תצוגת גופנים בעברית</span>
                <span>טיפ: גרור בעכבר מעל גופן לתצוגה מיידית, לחץ לבחירה</span>
            </div>
        </footer>
    </div>

    <script>
        (function(){
            var yearElement = document.getElementById('year');
            if (yearElement) yearElement.textContent = new Date().getFullYear();

            var textEl = document.getElementById('text');
            var previewEl = document.getElementById('preview');
            var currentFontEl = document.getElementById('currentFont');
            var fontListEl = document.getElementById('fontList');
            var fontCountEl = document.getElementById('fontCount');
            var queryEl = document.getElementById('query');
            var fontStatusEl = document.getElementById('fontStatus');
            var requestBtn = document.getElementById('requestFonts');

            var sizeEl = document.getElementById('size');
            var lineEl = document.getElementById('line');
            var weightEl = document.getElementById('weight');
            var sizeVal = document.getElementById('sizeVal');
            var lineVal = document.getElementById('lineVal');
            var weightVal = document.getElementById('weightVal');

            var copyTextBtn = document.getElementById('copyText');
            var copyHtmlBtn = document.getElementById('copyHtml');
            var copyFontBtn = document.getElementById('copyFontName');

            var selectedFontFamily = 'system-ui, -apple-system, "SF Pro", Segoe UI, Roboto, Helvetica, Arial';
            var systemFonts = [];
            var recentFontsList = [];
            var maxRecentFonts = 5;

            function updateStatus(status, text) {
                fontStatusEl.className = 'status ' + status;
                fontStatusEl.innerHTML = '<span>' + text + '</span>';
            }

            function updatePreview() {
                previewEl.textContent = textEl.value;
                previewEl.style.fontFamily = selectedFontFamily;
                previewEl.style.fontSize = sizeEl.value + 'px';
                previewEl.style.lineHeight = lineEl.value;
                previewEl.style.fontWeight = weightEl.value;
            }

            textEl.addEventListener('input', updatePreview);
            sizeEl.addEventListener('input', function(){ sizeVal.textContent = sizeEl.value + 'px'; updatePreview(); });
            lineEl.addEventListener('input', function(){ lineVal.textContent = lineEl.value; updatePreview(); });
            weightEl.addEventListener('input', function(){ weightVal.textContent = weightEl.value; updatePreview(); });

            // העתקה
            copyTextBtn.addEventListener('click', function(){
                navigator.clipboard.writeText(textEl.value).then(function(){}).catch(function(){});
            });

            // העתקת שם הגופן הנוכחי עם הטקסט בפורמט ש-Word מזהה
            // יצירת הודעה פשוטה (מחוץ לתנאי כדי שיהיה תמיד זמין)
            var notification = document.createElement('div');
            notification.className = 'copy-notification';
            notification.innerHTML = '<div class="copy-notification-icon">📋</div><span>שם הגופן הועתק</span>';
            document.body.appendChild(notification);

            if (copyFontBtn) {
                copyFontBtn.addEventListener('click', function(e){
                    e.preventDefault();
                    e.stopPropagation();
                    
                    var fontName = '';
                    var textToCopy = textEl.value || '';
                    
                    // ננסה לקבל את שם הגופן מה-currentFontEl
                    if (currentFontEl) {
                        fontName = currentFontEl.textContent.trim();
                    }
                    
                    // אם אין שם גופן או זה system-ui, נחלץ את שם הגופן מ-selectedFontFamily
                    if (!fontName || fontName === 'system-ui' || fontName === '') {
                        // נחלץ את שם הגופן הראשון מ-selectedFontFamily
                        var match = selectedFontFamily.match(/["']([^"']+)["']/);
                        if (match && match[1]) {
                            fontName = match[1];
                        } else {
                            // אם אין גרשיים, ניקח את החלק הראשון לפני פסיק
                            var firstPart = selectedFontFamily.split(',')[0].trim();
                            fontName = firstPart.replace(/["']/g, '').trim();
                        }
                    }
                    
                    // אם עדיין אין שם, נשתמש בערך ברירת מחדל
                    if (!fontName || fontName === 'system-ui') {
                        fontName = 'Arial'; // ברירת מחדל
                    }
                    
                    // יצירת HTML עם הגופן שמ-Word יזהה
                    // Word מזהה HTML עם font-family ו-formatting
                    var htmlContent = '<span style="font-family: \'' + fontName.replace(/'/g, "&#39;") + '\'; font-size: ' + sizeEl.value + 'pt; line-height: ' + (parseFloat(lineEl.value) * 100) + '%; font-weight: ' + weightEl.value + ';">' + 
                        escapeHtml(textToCopy || fontName).replace(/\n/g, '<br>') + 
                        '</span>';
                    
                    // גם RTF format עבור Word
                    var rtfContent = '{\\rtf1\\ansi\\deff0 {\\fonttbl {\\f0 ' + fontName + ';}} \\f0\\fs' + (sizeEl.value * 2) + ' ' + 
                        textToCopy.replace(/\n/g, '\\par ') + '}';
                    
                    // ניסיון להעתיק גם HTML וגם RTF
                    if (navigator.clipboard && window.ClipboardItem) {
                        var htmlBlob = new Blob([htmlContent], {type: 'text/html'});
                        var rtfBlob = new Blob([rtfContent], {type: 'text/rtf'});
                        
                        var clipboardItem = new ClipboardItem({
                            'text/html': htmlBlob,
                            'text/rtf': rtfBlob,
                            'text/plain': new Blob([fontName], {type: 'text/plain'})
                        });
                        
                        navigator.clipboard.write([clipboardItem]).then(function(){
                            notification.classList.add('show');
                            setTimeout(function(){
                                notification.classList.remove('show');
                            }, 2000);
                        }).catch(function(err){
                            // אם זה נכשל, ננסה רק HTML
                            var htmlOnly = new ClipboardItem({
                                'text/html': htmlBlob,
                                'text/plain': new Blob([fontName], {type: 'text/plain'})
                            });
                            navigator.clipboard.write([htmlOnly]).then(function(){
                                notification.classList.add('show');
                                setTimeout(function(){
                                    notification.classList.remove('show');
                                }, 2000);
                            }).catch(function(){
                                // fallback - רק שם הגופן
                                copyToClipboardFallback(fontName);
                            });
                        });
                    } else {
                        // fallback עם HTML hidden element
                        copyFontWithFormat(fontName, htmlContent);
                    }
                    
                    function copyFontWithFormat(fontName, html) {
                        var div = document.createElement('div');
                        div.style.position = 'fixed';
                        div.style.top = '0';
                        div.style.left = '0';
                        div.style.opacity = '0';
                        div.style.pointerEvents = 'none';
                        div.contentEditable = true;
                        div.innerHTML = html;
                        document.body.appendChild(div);
                        div.focus();
                        var range = document.createRange();
                        range.selectNodeContents(div);
                        var sel = window.getSelection();
                        sel.removeAllRanges();
                        sel.addRange(range);
                        try {
                            document.execCommand('copy');
                            notification.classList.add('show');
                            setTimeout(function(){
                                notification.classList.remove('show');
                            }, 2000);
                        } catch(e) {
                            copyToClipboardFallback(fontName);
                        }
                        document.body.removeChild(div);
                    }
                    
                    function copyToClipboardFallback(text) {
                        var textArea = document.createElement('textarea');
                        textArea.value = text;
                        textArea.style.position = 'fixed';
                        textArea.style.top = '0';
                        textArea.style.left = '0';
                        textArea.style.opacity = '0';
                        textArea.style.pointerEvents = 'none';
                        document.body.appendChild(textArea);
                        textArea.focus();
                        textArea.select();
                        try {
                            var successful = document.execCommand('copy');
                            if (successful) {
                                notification.classList.add('show');
                                setTimeout(function(){
                                    notification.classList.remove('show');
                                }, 2000);
                            }
                        } catch(e) {
                            console.error('Fallback copy failed:', e);
                        }
                        document.body.removeChild(textArea);
                    }
                });
            }

            // העתקה כ-HTML כדי לשמר את הגופן בהדבקה לאפליקציות תואמות
            copyHtmlBtn.addEventListener('click', function(){
                var html = '<div dir="rtl" style="font-family:' + selectedFontFamily.replace(/"/g,'&quot;') + '; font-size:' + sizeEl.value + 'px; line-height:' + lineEl.value + '; font-weight:' + weightEl.value + '; white-space:pre-wrap;">' +
                    escapeHtml(textEl.value).replace(/\n/g,'<br>') + '</div>';
                var type = 'text/html';
                var blob = new Blob([html], {type: type});
                var data = [new ClipboardItem({ [type]: blob })];
                if (navigator.clipboard && window.ClipboardItem) {
                    navigator.clipboard.write(data).catch(function(){
                        // fallback: כתיבת טקסט רגיל
                        navigator.clipboard.writeText(textEl.value);
                    });
                } else {
                    navigator.clipboard.writeText(textEl.value);
                }
            });

            function escapeHtml(s){ return s.replace(/[&<>\"]/g, function(c){ return {'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;'}[c]; }); }

            // רשימת Fallback מקיפה ל-macOS
            var fallbackFonts = [
                'SF Pro', 'SF Pro Display', 'SF Pro Text', 'SF Pro Rounded', 'SF Compact', 'SF Compact Display', 'SF Compact Text',
                'Helvetica Neue', 'Helvetica', 'Arial', 'Arial Hebrew', 'Arial Unicode MS',
                'Times New Roman', 'Times', 'Georgia', 'Courier New', 'Courier',
                'Menlo', 'Monaco', 'Consolas', 'Lucida Grande', 'Lucida Console',
                'Palatino', 'Baskerville', 'Optima', 'Gill Sans', 'Chalkboard', 'Chalkboard SE',
                'Marker Felt', 'American Typewriter', 'Hoefler Text', 'Papyrus',
                'Noto Sans Hebrew', 'Noto Serif Hebrew', 'Noto Sans', 'Noto Serif',
                'Kefa', 'Raanana', 'Hebrew', 'David', 'FrankRuehl', 'Shofar',
                'Verdana', 'Tahoma', 'Trebuchet MS', 'Impact', 'Comic Sans MS',
                'Book Antiqua', 'Century Gothic', 'Futura', 'Geneva',
                'Minion Pro', 'Myriad Pro', 'Adobe Caslon', 'Adobe Garamond',
                'Bradley Hand', 'Brush Script MT', 'Copperplate', 'Herculanum', 'Party LET',
                'Zapfino', 'Zapf Dingbats', 'Symbol', 'Webdings', 'Wingdings'
            ];

            function normalizeName(name){ return (name || '').trim(); }

            // ניהול גופנים אחרונים
            function loadRecentFonts() {
                try {
                    var saved = localStorage.getItem('font-preview-recent');
                    if (saved) {
                        recentFontsList = JSON.parse(saved);
                    }
                } catch(e) {
                    recentFontsList = [];
                }
            }

            function saveRecentFonts() {
                try {
                    localStorage.setItem('font-preview-recent', JSON.stringify(recentFontsList));
                } catch(e) {
                    console.warn('Could not save recent fonts:', e);
                }
            }

            function addToRecentFonts(fontName) {
                if (!fontName || fontName === 'system-ui') return;
                
                // הסר את הגופן מהרשימה אם הוא כבר קיים
                var index = recentFontsList.indexOf(fontName);
                if (index !== -1) {
                    recentFontsList.splice(index, 1);
                }
                
                // הוסף את הגופן בתחילת הרשימה (הכי חדש)
                recentFontsList.unshift(fontName);
                
                // שמור רק 5 גופנים - מחק את הגופנים הישנים ביותר
                while (recentFontsList.length > maxRecentFonts) {
                    recentFontsList.pop(); // מוחק את הגופן הכי ישן (בסוף הרשימה)
                }
                
                saveRecentFonts();
                renderFonts(); // עדכון הרשימה
            }

            function addFontToList(name, isRecent){
                var item = document.createElement('div');
                item.className = 'font-item' + (isRecent ? ' recent-font' : '');
                item.setAttribute('role','option');
                item.dataset.family = name;

                var nameEl = document.createElement('div');
                nameEl.className = 'font-name';
                nameEl.textContent = name;

                var preview = document.createElement('div');
                preview.className = 'font-preview';
                preview.textContent = 'אבגדהו';
                preview.style.fontFamily = '"' + name + '", ' + selectedFontFamily;

                item.appendChild(nameEl);
                item.appendChild(preview);

                if (currentFontEl && currentFontEl.textContent.trim() === name) {
                    item.classList.add('active');
                }

                item.addEventListener('mouseenter', function(){
                    previewEl.style.fontFamily = '"' + name + '", ' + selectedFontFamily;
                });
                item.addEventListener('mouseleave', function(){
                    previewEl.style.fontFamily = selectedFontFamily;
                });
                item.addEventListener('click', function(){
                    selectedFontFamily = '"' + name + '", ' + 'system-ui, -apple-system, "SF Pro", Segoe UI, Roboto, Helvetica, Arial';
                    currentFontEl.textContent = name;
                    clearActive();
                    item.classList.add('active');
                    updatePreview();
                    addToRecentFonts(name);
                });

                return item;
            }

            function clearActive(){
                var actives = fontListEl.querySelectorAll('.active');
                actives.forEach(function(el){ el.classList.remove('active'); });
            }

            function filterFonts(q){
                var term = (q || '').toLowerCase();
                var items = fontListEl.querySelectorAll('.font-item');
                items.forEach(function(el){
                    var name = el.dataset.family.toLowerCase();
                    el.style.display = name.indexOf(term) !== -1 ? '' : 'none';
                });
            }

            queryEl.addEventListener('input', function(){ filterFonts(queryEl.value); });

            function setCount(){ fontCountEl.textContent = systemFonts.length.toString(); }

            function unique(list){
                var seen = {};
                return list.filter(function(n){ var k = n.toLowerCase(); if (seen[k]) return false; seen[k] = true; return true; });
            }

            async function loadLocalFonts(){
                updateStatus('loading', 'טוען גופנים מהמערכת...');
                
                // ניסיון 1: Electron API - קריאה ישירה מתיקיות הגופנים
                if (window.electronAPI && window.electronAPI.getSystemFonts) {
                    try {
                        var fonts = await window.electronAPI.getSystemFonts();
                        systemFonts = fonts.map(normalizeName).filter(Boolean);
                        renderFonts();
                        updateStatus('success', 'נטענו ' + systemFonts.length + ' גופנים מהמערכת');
                        return;
                    } catch(e) {
                        console.error('Error loading fonts via Electron:', e);
                    }
                }
                
                // ניסיון 2: queryLocalFonts (אם זמין בדפדפן)
                if ('queryLocalFonts' in window) {
                    try {
                        var localFonts = await window.queryLocalFonts();
                        var families = localFonts.map(function(f){ return normalizeName(f.family); }).filter(Boolean);
                        systemFonts = unique(families).sort(function(a,b){ return a.localeCompare(b, 'he'); });
                        renderFonts();
                        updateStatus('success', 'נטענו ' + systemFonts.length + ' גופנים מהמערכת');
                        return;
                    } catch(e) {
                        console.warn('queryLocalFonts failed:', e);
                    }
                }
                
                // Fallback: רשימה ידועה + זיהוי
                try {
                    if (document.fonts && document.fonts.check) {
                        var detected = [];
                        for (var i = 0; i < fallbackFonts.length; i++) {
                            var fname = fallbackFonts[i];
                            try { if (document.fonts.check('12px "' + fname + '"')) detected.push(fname); } catch(e){}
                        }
                        if (detected.length > 0) {
                            systemFonts = unique(detected).sort(function(a,b){ return a.localeCompare(b, 'he'); });
                            renderFonts();
                            updateStatus('success', 'נמצאו ' + systemFonts.length + ' גופנים זמינים');
                            return;
                        }
                    }
                } catch(e) {}
                
                systemFonts = unique(fallbackFonts).sort(function(a,b){ return a.localeCompare(b, 'he'); });
                renderFonts();
                updateStatus('success', 'רשימת ברירת מחדל (' + systemFonts.length + '). השתמש ב-Electron לטעינת כל הגופנים');
            }

            async function requestAllLocalFonts(){
                updateStatus('loading', 'מטען את כל הגופנים מהמערכת...');
                
                if (window.electronAPI && window.electronAPI.getSystemFonts) {
                    try {
                        var fonts = await window.electronAPI.getSystemFonts();
                        systemFonts = fonts.map(normalizeName).filter(Boolean);
                        renderFonts();
                        updateStatus('success', 'נטענו ' + systemFonts.length + ' גופנים מהמערכת');
                    } catch(e) {
                        updateStatus('error', 'שגיאה בטעינת גופנים: ' + e.message);
                    }
                } else if ('queryLocalFonts' in window) {
                    try {
                        var localFonts = await window.queryLocalFonts();
                        var families = localFonts.map(function(f){ return normalizeName(f.family); }).filter(Boolean);
                        systemFonts = unique(families).sort(function(a,b){ return a.localeCompare(b, 'he'); });
                        renderFonts();
                        updateStatus('success', 'נטענו ' + systemFonts.length + ' גופנים מהמערכת');
                    } catch(e) {
                        updateStatus('error', 'בקשה נדחתה. נסה שוב');
                    }
                } else {
                    updateStatus('error', 'לא ניתן לטעון גופנים מהמערכת. השתמש ב-Electron');
                }
            }

            function renderFonts(){
                fontListEl.innerHTML = '';
                if (systemFonts.length === 0) { fontListEl.innerHTML = '<div style="text-align:center; padding: 24px; color: var(--muted);">לא נמצאו גופנים</div>'; return; }
                
                var recentToShow = [];
                var allOtherFonts = [];
                
                // נבדוק מה מהגופנים האחרונים קיים ברשימה
                recentFontsList.forEach(function(recentName) {
                    if (systemFonts.indexOf(recentName) !== -1) {
                        recentToShow.push(recentName);
                    }
                });
                
                systemFonts.forEach(function(fontName) {
                    allOtherFonts.push(fontName);
                });
                
                // הוסף כותרת לגופנים אחרונים (אם יש)
                if (recentToShow.length > 0) {
                    var recentHeader = document.createElement('div');
                    recentHeader.className = 'font-section-header';
                    recentHeader.textContent = 'גופנים אחרונים';
                    fontListEl.appendChild(recentHeader);
                    
                    // הוסף את הגופנים האחרונים
                    recentToShow.forEach(function(name) {
                        var item = addFontToList(name, true);
                        fontListEl.appendChild(item);
                    });
                }
                
                // הוסף כותרת לכל הגופנים
                if (allOtherFonts.length > 0) {
                    var allHeader = document.createElement('div');
                    allHeader.className = 'font-section-header';
                    allHeader.textContent = recentToShow.length > 0 ? 'כל הגופנים' : 'גופני מערכת';
                    fontListEl.appendChild(allHeader);
                    
                    // הוסף את כל שאר הגופנים
                    allOtherFonts.forEach(function(name) {
                        var item = addFontToList(name, false);
                        fontListEl.appendChild(item);
                    });
                }
                
                setCount();
            }

            requestBtn.addEventListener('click', requestAllLocalFonts);

            // טעינת גופנים אחרונים
            loadRecentFonts();
            
            loadLocalFonts();
            updatePreview();
        })();
    </script>
</body>
</html>

יום חדש מתחיל

פוסט זה נמחק!

שלמפוק'

סורי ממש אבל ניסתי לעלות את הקוד איצ׳ טי אם אל וזה מה שזה מראה
צילום מסך 2025-11-09 ב-2.26.26.png

יום חדש מתחיל

@שלמפוק זה חסימת אבטחה, א"א להוריד HTML מהפורום.

איש גמזו

@שלמפוק ר׳ שלמפוק היקר!
אם הבנתי אותך נכון, אתה פשוט טורח לשוא,
יש במק בדיוק כזה דבר שנקרא ״פנקס הגופנים״ והוא נראה ככה: 32b10357-80b2-4de3-bf6c-f4e4df3a8326-צילום מסך 2025-11-09 ב-10.07.17.png ‎⁨