PageSourceSearch

https://arabic-ocr.com/

html arabic-ocr.com collected 2026-09-24 11:04:07 UTC 127,381 bytes, 2,109 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1" />
7    
7<script>window.global = window;</script>
7
8
9    <!-- Global site tag (gtag.js) - Google Ads: 17090524858 -->
vendor: 68 bytes, lines 9-10
9
10    <script async src="https://www.googletagmanager.com/gtag/js?id=
10AW-17090524858
vendor: 16 bytes, lines 10-11
10"></script>
11    
11<script>
12        
vendor: 155 bytes, lines 12-16
12window.dataLayer = window.dataLayer || [];
13        function gtag() { dataLayer.push(arguments); }
14        gtag('js', new Date());
15
16        gtag('config', '
16AW-17090524858
vendor: 8 bytes, lines 16-17
16');
17    
17</script>
17
18
19    <!-- Event snippet for Page view conversion page -->
20    
20<script>
21        gtag('event', 'conversion', { 'send_to': 'AW-17090524858/9L3fCPvzrM4aELrtstU_' });
22    </script>
22
23
24    <!-- PRIMARY SEO -->
25  <!-- PRIMARY SEO -->
26    <title>Arabic OCR Online – Extract Arabic Text from Images, PDFs & Handwriting</title>
27    <meta name="description"
28        content="Arabic OCR online: instantly convert Arabic images, PDFs, and handwriting to editable text. Free demo available. iOS, Android, macOS, Windows & Web portal. | استخراج النصوص العربية من الصور وملفات PDF بدقة عالية." />
29    <meta name="keywords"
30        content="Arabic OCR, OCR Arabic, online arabic ocr, web portal online ocr, free arabic ocr, handwriting OCR, Arabic handwriting recognition, pdf studio, pdf editor, online pdf editor, merge pdf, pdf tools, arabic ocr portal, Arabic text scanner, extract Arabic text, convert image to arabic text, PDF to Arabic text, بوابة OCR, محرر مستندات PDF, دمج ملفات PDF, أدوات PDF, استخراج نصوص اونلاين" />
31    <meta name="robots" content="index, follow">
32<meta name="googlebot" content="index, follow, max-image-preview:large">
33    <!-- CANONICAL -->
34    <link rel="canonical" href="https://arabic-ocr.com/" />
35
36    <!-- FAVICON -->
37    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
38    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
39    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
40
41    <!-- ANDROID APP INDEXING -->
42    <link rel="alternate" href="android-app://com.kanzati.arabicocr/https/www.arabic-ocr.com" />
43<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
44    <!-- GOOGLE PLAY -->
45    <meta name="google-play-app" content="app-id=com.kanzati.arabicocr">
46
47    <!-- iOS SMART APP BANNER -->
48    <meta name="apple-itunes-app" content="app-id=6745792738, app-argument=https://arabic-ocr.com">
49
50    <!-- OPEN GRAPH -->
51    <meta property="og:title" content="Arabic OCR – Free Online Demo & App" />
52    <meta property="og:description"
53        content="Try our free online Arabic OCR to extract text from images and handwriting. Download the app for PDF support and full features." />
54    <meta property="og:image" content="https://arabic-ocr.com/icon.jpg" />
55    <meta property="og:image:width" content="512" />
56    <meta property="og:image:height" content="512" />
57    <meta property="og:image:alt" content="Arabic OCR app icon" />
58    <meta property="og:url" content="https://arabic-ocr.com/" />
59    <meta property="og:type" content="website" />
60    <meta property="og:site_name" content="Arabic OCR">
61    <meta property="og:locale" content="en_US">
62    <meta property="og:locale:alternate" content="ar_AR">
63
64    <!-- PWA MANIFEST -->
65    <link rel="manifest" href="/manifest.webmanifest">
66    <meta name="theme-color" content="#2563eb">
67
68    <!-- STRUCTURED DATA: WebSite + Organization -->
69    
69<script type="application/ld+json">
70    {
71      "@context": "https://schema.org",
72      "@graph": [
73        {
74          "@type": "WebSite",
75          "@id": "https://arabic-ocr.com/#website",
76          "name": "Arabic OCR",
77          "url": "https://arabic-ocr.com/",
78          "description": "Extract Arabic text from images, handwriting, and PDFs using AI. Available on iOS, Android, macOS, Windows, and as a web app.",
79          "inLanguage": ["en", "ar"],
80          "potentialAction": {
81            "@type": "SearchAction",
82            "target": {
83              "@type": "EntryPoint",
84              "urlTemplate": "https://arabic-ocr.com/blog.html?q={search_term_string}"
85            },
86            "query-input": "required name=search_term_string"
87          }
88        },
89        {
90          "@type": "Organization",
91          "@id": "https://www.kanzati.com",
92          "name": "Arabic OCR",
93          "url": "https://www.kanzati.com",
94          "logo": {
95            "@type": "ImageObject",
96            "url": "https://arabic-ocr.com/logo.png",
97            "width": 512,
98            "height": 512
99          },
100          "contactPoint": {
101            "@type": "ContactPoint",
102            "contactType": "customer support",
103            "url": "https://arabic-ocr.com/contact.html"
104          },
105          "sameAs": [
106            "https://arabic-ocr.com/",
107            "https://play.google.com/store/apps/details?id=com.kanzati.arabicocr",
108            "https://apps.apple.com/app/id6745792738",
109            "https://apps.microsoft.com/detail/9P2NRS4S8ND6",
110            "https://www.linkedin.com/in/ziad-khazzaka-788526362"
111          ],
112          "founder": {
113            "@type": "Person",
114            "name": "Ziad Khazzaka",
115            "sameAs": "https://www.linkedin.com/in/ziad-khazzaka-788526362"
116          }
117        }
118      ]
119    }
120    </script>
120
121
122    <!-- TWITTER -->
123    <meta name="twitter:card" content="summary_large_image">
124    <meta name="twitter:title" content="Arabic OCR – Recognize Arabic Text with AI">
125    <meta name="twitter:description"
126        content="Try our free online Arabic OCR for handwriting and images. Download the app for PDF support which is the best option.">
127    <meta name="twitter:image" content="https://arabic-ocr.com/icon.jpg">
128
129    <!-- CSS -->
130    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
131    
131<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
131
132</head>
133
134<body class="bg-white text-gray-900">
135
136    <!-- HEADER -->
137    <header class="bg-white shadow-md relative z-50">
138        <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
139            <div class="flex items-center space-x-3">
140                <img src="/logo.png" alt="Arabic OCR" class="w-10 h-10" />
141                <span class="text-2xl font-bold">Arabic OCR</span>
142            </div>
143
144            <!-- Desktop Nav -->
145            <nav class="space-x-6 hidden md:block">
146                <a href="index.html" class="text-gray-700 hover:text-blue-600 font-medium">Home</a>
147                <a href="blog.html" class="text-gray-700 hover:text-amber-600 font-medium">Blog</a>
148                <a href="#web-ocr-demo" class="text-amber-600 font-bold hover:underline">Try Online Demo</a>
149                <a href="pricing.html" class="text-gray-700 hover:text-blue-600 font-medium">Pricing</a>
150                <a href="portal.html" class="text-blue-600 font-bold hover:underline">✨ Portal</a>
151                <a href="#features" class="text-gray-700 hover:text-blue-600 font-medium">Features</a>
152                <a href="contact.html" class="text-gray-700 hover:text-blue-600 font-medium">Contact</a>
153                <a href="about.html" class="text-gray-700 hover:text-blue-600 font-medium">About</a>
154                <a href="login.html?redirect=index.html"
155                    class="bg-blue-600 text-white px-4 py-2 rounded-full hover:bg-blue-700 font-medium transition">Login</a>
156            </nav>
157
158            <!-- Mobile Menu Button -->
159            <button id="mobile-menu-btn" class="md:hidden text-gray-700 focus:outline-none p-2">
160                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
161                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
162                </svg>
163            </button>
164        </div>
165
166        <!-- Mobile Menu -->
167        <div id="mobile-menu"
168            class="hidden md:hidden bg-white border-t px-6 py-4 space-y-4 shadow-xl absolute w-full left-0 top-full">
169            <a href="index.html" class="block text-gray-700 hover:text-blue-600 font-medium">Home</a>
170            <a href="#web-ocr-demo" class="block text-blue-600 font-bold">Try Online Demo</a>
171            <a href="pricing.html" class="block text-gray-700 hover:text-blue-600 font-medium">Pricing</a>
172            <a href="portal.html" class="block text-blue-600 font-bold">✨ Portal</a>
173            <a href="#features" class="block text-gray-700 hover:text-blue-600 font-medium">Features</a>
174            <a href="contact.html" class="block text-gray-700 hover:text-blue-600 font-medium">Contact</a>
175            <a href="about.html" class="block text-gray-700 hover:text-blue-600 font-medium">About</a>
176            <a href="login.html?redirect=index.html"
177                class="block w-full text-center bg-blue-600 text-white px-4 py-2 rounded-full hover:bg-blue-700 font-medium transition">Login</a>
178        </div>
179
180        
180<script>
181            const btn = document.getElementById('mobile-menu-btn');
182            const menu = document.getElementById('mobile-menu');
183
184            btn.addEventListener('click', () => {
185                menu.classList.toggle('hidden');
186            });
187        </script>
187
188    </header>
189
190    <!-- HERO SECTION -->
191    <section id="home" class="bg-blue-50 py-16">
192        <div class="max-w-4xl mx-auto px-6 text-center">
193
194            <h1 class="text-3xl font-bold text-gray-900 mb-4">
195                Arabic OCR – Extract Arabic Text from Images, PDFs & Handwriting
196            </h1>
197
198            <p class="text-lg text-gray-700 mb-6">
199                Scan documents, handwriting, or images and convert them into editable Arabic text using advanced AI.
200                <strong>Try the free online demo below</strong> or download the app for full access on iOS, Android,
201                macOS, and Windows.
202            </p>
203
204            <p dir="rtl" class="text-lg text-gray-700 mb-6">
205                يتعرف بدقة على النص العربي المطبوع والكتابة اليدوية من الصور أو ملفات PDF أو المستندات الورقية.
206            </p>
207
208            <!-- SLIDESHOW -->
209            <div class="relative w-full max-w-4xl mx-auto mb-10">
210                <div class="overflow-hidden rounded-lg shadow-lg relative">
211                    <div id="slider" class="flex transition-transform duration-700">
212                        <img alt="Arabic OCR app extracting printed Arabic text from a scanned page" src="ocr800.jpg" class="w-full flex-shrink-0">
213                        <img alt="Arabic OCR app recognising Arabic handwriting from a photo" src="ocr2800.jpg" class="w-full flex-shrink-0">
214                        <img alt="Arabic OCR app exporting extracted Arabic text to an editable document" src="ocr3800.jpg" class="w-full flex-shrink-0">
215                    </div>
216                </div>
217
218                <div class="absolute bottom-3 left-1/2 transform -translate-x-1/2 flex space-x-3">
219                    <button class="w-3 h-3 rounded-full bg-gray-400" onclick="goToSlide(0)" id="dot-0"></button>
220                    <button class="w-3 h-3 rounded-full bg-gray-400" onclick="goToSlide(1)" id="dot-1"></button>
221                    <button class="w-3 h-3 rounded-full bg-gray-400" onclick="goToSlide(2)" id="dot-2"></button>
222                </div>
223            </div>
224
225            
225<script>
226                const slider = document.getElementById('slider');
227                const dots = [
228                    document.getElementById('dot-0'),
229                    document.getElementById('dot-1'),
230                    document.getElementById('dot-2')
231                ];
232                let currentIndex = 0;
233                const totalSlides = 3;
234                const slideInterval = 4000;
235
236                function showSlide(i) {
237                    currentIndex = i;
238                    slider.style.transform = `translateX(-${i * 100}%)`;
239                    dots.forEach((dot, idx) => {
240                        dot.classList.toggle('bg-gray-800', idx === i);
241                        dot.classList.toggle('bg-gray-400', idx !== i);
242                    });
243                }
244
245                let autoSlide = setInterval(() => {
246                    currentIndex = (currentIndex + 1) % totalSlides;
247                    showSlide(currentIndex);
248                }, slideInterval);
249
250                function goToSlide(i) {
251                    clearInterval(autoSlide);
252                    showSlide(i);
253                }
254
255                showSlide(0);
256            </script>
256
257
258            <!-- Web OCR Demo Section -->
259            <section id="web-ocr-demo" class="bg-white py-10 mt-10 rounded-xl shadow-lg border border-gray-100">
260                <div class="max-w-4xl mx-auto px-6 text-center">
261                    <h2 class="text-2xl font-bold mb-4 text-gray-900">Try Arabic OCR Online / تجربة استخراج النصوص</h2>
262                    <p class="text-base text-gray-700 mb-6">
263                        Upload an image, <strong>try your handwriting</strong>, or drop a file here to extract Arabic
264                        text instantly.<br>
265                        <span class="text-sm text-gray-500">(For full results & PDF support, download the app
266                            below)</span>
267                    </p>
268
269                    <!-- Drop Zone -->
270                    <div id="drop-zone"
271                        class="border-4 border-dashed border-blue-300 bg-blue-50 rounded-xl p-8 cursor-pointer hover:bg-blue-100 transition relative">
272
273                        <!-- Removed PDF from accept attribute -->
274                        <input type="file" id="file-input" class="hidden" accept="image/*" />
275
276                        <div id="drop-content">
277                            <svg class="w-12 h-12 mx-auto text-blue-500 mb-3" fill="none" stroke="currentColor"
278                                viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
279                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
280                                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12">
281                                </path>
282                            </svg>
283                            <p class="text-lg font-semibold text-gray-700">Click or Drag Image Here</p>
284                            <p class="text-gray-500 mt-1">Supports JPG, PNG - Try Handwriting!</p>
285                            <p class="text-gray-400 text-xs mt-1">(For PDF Files, please download the App)</p>
286                        </div>
287
288                        <!-- Loading State -->
289                        <div id="loading-state"
290                            class="hidden absolute inset-0 bg-white bg-opacity-90 flex flex-col items-center justify-center rounded-xl">
291                            <svg class="animate-spin h-10 w-10 text-blue-600 mb-3" xmlns="http://www.w3.org/2000/svg"
292                                fill="none" viewBox="0 0 24 24">
293                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
294                                    stroke-width="4">
295                                </circle>
296                                <path class="opacity-75" fill="currentColor"
297                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
298                                </path>
299                            </svg>
300                            <p class="text-blue-800 font-semibold">Processing... / جاري المعالجة</p>
301                        </div>
302                    </div>
303
304                    <!-- Result Area -->
305                    <div id="result-container" class="hidden mt-8 text-left">
306                        <label for="ocr-result" class="block text-gray-700 font-semibold mb-2">Extracted Text:</label>
307                        <textarea id="ocr-result" rows="8"
308                            class="w-full p-4 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-right"
309                            placeholder="Result will appear here..."></textarea>
310
311                        <div class="mt-4 flex flex-wrap gap-3 justify-center mb-4">
312                            <button id="btn-copy-text" class="bg-gray-100 text-gray-800 border border-gray-300 px-4 py-2 rounded-lg hover:bg-gray-200 flex items-center font-semibold transition" title="Copy Text">
313                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
314                                Copy Text
315                            </button>
316                            <button id="btn-save-word" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center font-semibold transition" title="Save as Word">
317                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
318                                Save as Word
319                            </button>
320                        </div>
321
322                        <div class="mt-4 text-center">
323                            <p class="text-red-600 font-bold mb-2"><a href="pricing.html" class="hover:underline">Subscribe to Web Portal</a> or Download App for unlimited access & PDF support!</p>
324                            <!-- Download links will be right below this section in the page flow -->
325                        </div>
326                    </div>
327
328                </div>
329
330                
330<script type="module">
331                    import { analytics, logEvent, errorReason, errorMessage, fileSizeBucket } from './firebase-analytics.js';
332                    import { monitorAuthState } from './js/auth.js';
333
334                    // Initialize Auth State Logic
335                    monitorAuthState();
336
337                    const dropZone = document.getElementById('drop-zone');
338                    const fileInput = document.getElementById('file-input');
339                    const dropContent = document.getElementById('drop-content');
340                    const loadingState = document.getElementById('loading-state');
341                    const resultContainer = document.getElementById('result-container');
342                    const ocrResult = document.getElementById('ocr-result');
343
344                    // Download Tracking
345                    // Each download button used to fire TWO events: a bare
346                    // download_ios/android/macos from a listener here, plus a
347                    // download_app from an inline onclick. One click, two events.
348                    // Now it is a single `download_app` carrying a `platform` param.
349                    const downloadButtons = {
350                        'btn-download-ios': 'ios',
351                        'btn-download-android': 'android',
352                        'btn-download-macos': 'macos',
353                        'btn-download-windows': 'windows',
354                        // Microsoft Store links in the launch announcement (Key Features).
355                        'btn-store-windows-feature': 'windows',
356                        'btn-store-windows-feature-ar': 'windows',
357                        'btn-download-windows-spotlight': 'windows'
358                    };
359                    Object.entries(downloadButtons).forEach(([id, platform]) => {
360                        const btn = document.getElementById(id);
361                        if (btn) btn.addEventListener('click', () => logEvent(analytics, 'download_app', { platform }));
362                    });
363
364                    const btnPortal = document.getElementById('btn-portal');
365                    if (btnPortal) btnPortal.addEventListener('click', () => logEvent(analytics, 'portal_access'));
366
367                    // Configuration
368
369                    function getTodayString() {
370                        return new Date().toISOString().split('T')[0];
371                    }
372
373                    function hasUsedOCRToday() {
374                        return localStorage.getItem('ocr_last_used_date') === getTodayString();
375                    }
376
377                    function checkDailyLimitUI() {
378                        if (hasUsedOCRToday()) {
379                            dropZone.classList.add('bg-gray-50', 'border-gray-300', 'cursor-not-allowed');
380                            dropZone.classList.remove('bg-blue-50', 'border-blue-300', 'hover:bg-blue-100', 'cursor-pointer');
381                            dropContent.innerHTML = `
382                                <svg class="w-12 h-12 mx-auto text-red-500 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
383                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
384                                </svg>
385                                <p class="text-lg font-semibold text-red-600">Daily Limit Reached (1 Page / Day)</p>
386                                <p class="text-gray-600 mt-2">Please <a href="pricing.html" class="text-blue-600 font-bold hover:underline">Subscribe to Web Portal</a> or download our mobile app below for unlimited access.</p>
387                            `;
388                            return true;
389                        }
390                        return false;
391                    }
392
393                    checkDailyLimitUI();
394
395                    // Click to upload
396                    dropZone.addEventListener('click', () => {
397                        if (hasUsedOCRToday()) return;
398                        fileInput.click();
399                    });
400
401                    // Drag and Drop events
402                    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
403                        dropZone.addEventListener(eventName, preventDefaults, false);
404                    });
405
406                    function preventDefaults(e) {
407                        e.preventDefault();
408                        e.stopPropagation();
409                    }
410
411                    ['dragenter', 'dragover'].forEach(eventName => {
412                        dropZone.addEventListener(eventName, () => {
413                            if (!hasUsedOCRToday()) dropZone.classList.add('bg-blue-100', 'border-blue-500');
414                        }, false);
415                    });
416
417                    ['dragleave', 'drop'].forEach(eventName => {
418                        dropZone.addEventListener(eventName, () => {
419                            if (!hasUsedOCRToday()) dropZone.classList.remove('bg-blue-100', 'border-blue-500');
420                        }, false);
421                    });
422
423                    dropZone.addEventListener('drop', handleDrop, false);
424                    fileInput.addEventListener('change', (e) => handleFiles(e.target.files), false);
425
426                    function handleDrop(e) {
427                        if (hasUsedOCRToday()) return;
428                        const dt = e.dataTransfer;
429                        const files = dt.files;
430                        handleFiles(files);
431                    }
432
433                    function handleFiles(files) {
434                        if (hasUsedOCRToday()) return;
435                        if (files.length > 0) {
436                            const file = files[0];
437                            if (file.type.startsWith('image/')) {
438                                uploadFile(file);
439                            } else {
440                                alert("Please upload an image file (JPG, PNG). For PDF support, please download the App.");
441                            }
442                        }
443                    }
444
445                    // Set when an upload starts, so success/error can report duration.
446                    let ocrStartedAt = 0;
447
448                    function uploadFile(file) {
449                        // Show loading
450                        loadingState.classList.remove('hidden');
451                        resultContainer.classList.add('hidden');
452
453                        ocrStartedAt = Date.now();
454
455                        const reader = new FileReader();
456                        reader.readAsDataURL(file);
457                        reader.onloadend = function () {
458                            const base64Content = reader.result.split(',')[1];
459                            performOCR(base64Content);
460                            // Log upload initiation
461                            logEvent(analytics, 'web_ocr_upload', {
462                                file_type: file.type || 'unknown',
463                                file_size_bucket: fileSizeBucket(file.size)
464                            });
465                        };
466                    }
467
468                    function stripThinkingTags(text) {
469                        text = text.replace(/<think>[\s\S]*?<\/think>/gi, '');
470                        text = text.replace(/<think>[\s\S]*/gi, '');
471                        return text.trim();
472                    }
473
474                    const GEMINI_OCR_PROXY = "https://arabicocr.zczvwz6pw7.workers.dev";
475
476                    async function callOCRApi(messages) {
477                        const body = { messages };
478                        const response = await fetch(GEMINI_OCR_PROXY, {
479                            method: 'POST',
480                            headers: { 'Content-Type': 'application/json' },
481                            body: JSON.stringify(body)
482                        });
483                        const result = await response.json();
484                        if (result.choices && result.choices[0] && result.choices[0].message) {
485                            return stripThinkingTags(result.choices[0].message.content);
486                        }
487                        if (result.error) throw new Error(result.error.message || JSON.stringify(result.error));
488                        throw new Error("No text found or API error.");
489                    }
490
491                    const REFINE_SYSTEM_PROMPT = `You are an expert document formatter. The text below was extracted by an OCR engine and needs to be cleaned up and organized. Output plain text only.
492
493Your job:
494- Fix OCR errors: broken words, merged words, misrecognized characters
495- Identify titles and headers by uppercasing them and placing them on their own line
496- Organize content into clear paragraphs separated by blank lines
497- Preserve the original language (Arabic stays Arabic, English stays English)
498- Do NOT translate, summarize, or add new content
499- Output ONLY the formatted plain text, no HTML, no markdown, no explanation`;
500
501                    async function refineText(rawText) {
502                        return await callOCRApi([
503                            { role: "system", content: REFINE_SYSTEM_PROMPT },
504                            { role: "user", content: `Text to format:\n${rawText}` }
505                        ]);
506                    }
507
508                    async function performOCR(base64Image) {
509                        try {
510                            const rawText = await callOCRApi([{
511                                role: "user",
512                                content: [
513                                    {
514                                        type: "image_url",
515                                        image_url: { url: `data:image/jpeg;base64,${base64Image}` }
516                                    },
517                                    {
518                                        type: "text",
519                                        text: "Extract ALL text from this image exactly as it appears. The document may be in Arabic, English, or both. Output only the raw extracted text, preserving line breaks and layout. Do not add any labels, commentary, or explanation."
520                                    }
521                                ]
522                            }]);
523
524                            // Show raw result immediately, then auto-refine
525                            loadingState.classList.add('hidden');
526                            ocrResult.value = rawText;
527                            resultContainer.classList.remove('hidden');
528
529                            localStorage.setItem('ocr_last_used_date', getTodayString());
530                            checkDailyLimitUI();
531
532                            logEvent(analytics, 'web_ocr_success', {
533                                char_count: rawText.length,
534                                duration_ms: ocrStartedAt ? Date.now() - ocrStartedAt : 0
535                            });
536
537                            // Auto-refine
538                            ocrResult.disabled = true;
539                            ocrResult.placeholder = 'AI is refining text...';
540                            try {
541                                const refined = await refineText(rawText);
542                                ocrResult.value = refined;
543                            } catch (refineErr) {
544                                console.warn('Auto-refine failed, keeping raw text:', refineErr);
545                            } finally {
546                                ocrResult.disabled = false;
547                                ocrResult.placeholder = '';
548                            }
549
550                        } catch (error) {
551                            console.error('Error:', error);
552                            loadingState.classList.add('hidden');
553                            alert("An error occurred: " + error.message);
554                            logEvent(analytics, 'web_ocr_error', {
555                                reason: errorReason(error),
556                                message: errorMessage(error),
557                                duration_ms: ocrStartedAt ? Date.now() - ocrStartedAt : 0
558                            });
559                        }
560                    }
561
562                    // Button Actions
563                    const btnCopyText = document.getElementById('btn-copy-text');
564                    const btnSaveWord = document.getElementById('btn-save-word');
565
566                    btnCopyText.addEventListener('click', () => {
567                        const text = ocrResult.value;
568                        if (!text) return;
569                        navigator.clipboard.writeText(text).then(() => {
570                            const originalHTML = btnCopyText.innerHTML;
571                            btnCopyText.innerHTML = `<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Copied!`;
572                            btnCopyText.classList.remove('bg-gray-100', 'text-gray-800');
573                            btnCopyText.classList.add('bg-green-100', 'text-green-800', 'border-green-300');
574                            setTimeout(() => {
575                                btnCopyText.innerHTML = originalHTML;
576                                btnCopyText.classList.add('bg-gray-100', 'text-gray-800');
577                                btnCopyText.classList.remove('bg-green-100', 'text-green-800', 'border-green-300');
578                            }, 2000);
579                        }).catch(err => {
580                            console.error('Could not copy text: ', err);
581                        });
582                    });
583
584                    btnSaveWord.addEventListener('click', () => {
585                        const text = ocrResult.value;
586                        if (!text) return;
587                        
588                        const preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Extracted Text</title></head><body>";
589                        const postHtml = "</body></html>";
590                        const html = preHtml + "<p dir='rtl' style='text-align: right; font-family: Tahoma, Arial, sans-serif; font-size: 14pt;'>
590" + text.replace(/\\n/g, '<br>') + "</p>" + postHtml;
591
592                        const blob = new Blob(['\\ufeff', html], {
593                            type: 'application/msword'
594                        });
595                        
596                        const link = document.createElement("a");
597                        link.href = URL.createObjectURL(blob);
598                        link.download = 'extracted_arabic_text.doc';
599                        document.body.appendChild(link);
600                        link.click();
601                        document.body.removeChild(link);
602                    });
603                </script>
603
604            </section>
605
606
607
608            <div class="mt-8 text-center max-w-2xl mx-auto">
609                <h2 class="text-2xl font-bold text-blue-600 mb-2" data-i18n="app_rank">
610                    Arabic #1 App for Handwriting Support
611                </h2>
612
613                <p class="text-gray-700 text-lg font-medium mb-2" data-i18n="upload_tagline">
614                    Use advanced Arabic OCR to scan images, PDFs, and handwriting with high precision.
615                </p>
616
617                <p class="text-gray-500" data-i18n="upload_subtag">
618                    Perfect for students, professionals, journalists, and researchers.
619                </p>
620            </div>
621
622
623
624            <!-- DOWNLOAD BOXES -->
625            <div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 max-w-6xl mx-auto mb-10">
626
627                <!-- Portal Box -->
628             <div class="bg-purple-100 p-5 rounded-lg shadow text-center transform hover:scale-105 transition duration-300 ring-2 ring-purple-400 flex flex-col h-full">
629    <h3 class="text-base font-semibold mb-2 text-purple-900 h-12 flex items-center justify-center">Online Portal</h3>
630    <div class="flex items-center justify-center h-32 mb-3">
631        <svg class="w-24 h-24 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"
632            xmlns="http://www.w3.org/2000/svg">
633            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
634                d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
635            </path>
636        </svg>
637    </div>
638    
639    <!-- Tracked as `portal_access` by the listener in the module script below. -->
640    <a href="portal.html" id="btn-portal"
641        class="block bg-purple-700 text-white px-5 py-2.5 rounded hover:bg-purple-800 font-bold mt-auto">Web App</a>
642</div>
643
644              <div class="bg-green-100 p-5 rounded-lg shadow text-center flex flex-col h-full">
645    <h3 class="text-base font-semibold mb-2 text-green-800 h-12 flex items-center justify-center">iOS Version</h3>
646    <img alt="Arabic OCR app QR code for the App Store" src="/ocr.png" class="w-32 h-32 mx-auto mb-3 rounded-lg border shadow" loading="lazy" decoding="async" />
647
648    <a href="https://apps.apple.com/us/app/arabic-ocr/id6745792738"
649       id="btn-download-ios"
650       target="_blank"
651       class="block bg-blue-600 text-white px-5 py-2.5 rounded hover:bg-blue-700 mt-auto">Download</a>
652</div>
653
654               <div class="bg-blue-100 p-5 rounded-lg shadow text-center flex flex-col h-full">
655    <h3 class="text-base font-semibold mb-2 text-blue-800 h-12 flex items-center justify-center">Android Version</h3>
656    <img alt="Arabic OCR app QR code for Google Play" src="/kotlincode2.png" class="w-32 h-32 mx-auto mb-3 rounded-lg border shadow" loading="lazy" decoding="async" />
657
658    <!-- Tracked as `download_app` (platform=android) by the module script below. -->
659    <a href="https://play.google.com/store/apps/details?id=com.kanzati.arabicocr"
660        id="btn-download-android" target="_blank"
661        class="block bg-blue-600 text-white px-5 py-2.5 rounded hover:bg-blue-700 mt-auto">Download</a>
662</div>
663
664<div class="bg-gray-100 p-5 rounded-lg shadow text-center flex flex-col h-full">
665    <h3 class="text-base font-semibold mb-2 text-gray-800 h-12 flex items-center justify-center">macOS Version</h3>
666    <img alt="Arabic OCR app QR code for the App Store" src="/ocr.png" class="w-32 h-32 mx-auto mb-3 rounded-lg border shadow" loading="lazy" decoding="async" />
667
668    <!-- Tracked as `download_app` (platform=macos) by the module script below. -->
669    <a href="https://apps.apple.com/us/app/arabic-ocr/id6745792738" id="btn-download-macos"
670        target="_blank"
671        class="block bg-blue-600 text-white px-5 py-2.5 rounded hover:bg-blue-700 mt-auto">Download</a>
672</div>
673
674<!-- Tailwind v2 (the CDN build this page loads) has no `sky` palette — indigo is the
675     closest supported hue that stays distinct from the blue Android card. -->
676<div class="bg-indigo-100 p-5 rounded-lg shadow text-center flex flex-col h-full relative">
677    <!-- Launch badge: the ping span is the expanding halo, the solid span sits on top. -->
678    <span class="absolute -top-2 -right-2 flex h-6 w-12">
679        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
680        <span
681            class="relative inline-flex items-center justify-center h-6 w-12 rounded-full bg-red-600 text-white text-xs font-bold shadow">NEW</span>
682    </span>
683    <h3 class="text-base font-semibold mb-2 text-indigo-800 h-12 flex items-center justify-center">Windows Version</h3>
684    <!-- QR encodes the Microsoft Store listing so phone/desktop users can scan to install. -->
685    <img src="/windows-qr.png" alt="QR code to the Arabic OCR app on the Microsoft Store"
686        class="w-32 h-32 mx-auto mb-3 rounded-lg border shadow bg-white" loading="lazy" decoding="async" />
687
688    <!-- Tracked as `download_app` (platform=windows) by the module script below. -->
689    <a href="https://apps.microsoft.com/detail/9P2NRS4S8ND6?hl=en-us&amp;gl=US&amp;ocid=pdpshare" id="btn-download-windows"
690        target="_blank"
691        class="block bg-blue-600 text-white px-5 py-2.5 rounded hover:bg-blue-700 mt-auto">Download</a>
692</div>
693            </div>
694
695        </div>
696    </section>
697    <!-- Handwriting Power Section -->
698    <section class="bg-white py-16">
699        <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
700
701            <!-- Text Content -->
702            <div class="text-left">
703                <div
704                    class="inline-block px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-bold uppercase tracking-wide mb-4">
705                    Advanced AI
706                </div>
707                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
708                    The Power of Arabic Handwriting Recognition
709                </h2>
710
711                <!-- English Description -->
712                <p class="text-lg text-gray-700 mb-2 leading-relaxed">
713                    Experience unmatched precision in detecting and extracting Arabic handwriting. Our advanced AI
714                    models are trained to recognize various styles of scripts, from student notes to historical
715                    manuscripts, converting them into digital text instantly.
716                </p>
717
718                <!-- Divider -->
719                <div class="w-16 h-1 bg-amber-300 my-6 rounded-full"></div>
720
721
722
723                <!-- Arabic Description -->
724                <p class="text-lg text-gray-700 mb-8 leading-relaxed" dir="rtl">
725                    اكتشف قوة الذكاء الاصطناعي في التعرف على الخط العربي اليدوي واستخراجه بدقة مذهلة. تم تدريب نماذجنا
726                    المتقدمة لمعالجة مختلف أنماط الكتابة، من ملاحظات الطلاب إلى المخطوطات التاريخية، وتحويلها إلى نصوص
727                    رقمية فوراً.
728                </p>
729
730                <!-- Action Button -->
731                <a href="#web-ocr-demo"
732                    class="inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white transition-all duration-200 bg-gradient-to-r from-amber-500 to-orange-600 rounded-xl hover:from-amber-600 hover:to-orange-700 hover:shadow-lg hover:-translate-y-1 group">
733                    <i class="fas fa-pen-nib mr-3"></i>
734                    Try Handwriting Demo
735                    <i class="fas fa-arrow-right ml-3 transform group-hover:translate-x-1 transition"></i>
736                </a>
737            </div>
738
739            <!-- Handwriting GIF -->
740            <div class="relative">
741                <div
742                    class="absolute -inset-2 bg-gradient-to-r from-amber-500 to-orange-500 rounded-2xl opacity-20 blur-lg">
743                </div>
744                <img src="/handwriting.gif" alt="Arabic Handwriting OCR Demo"
745                    class="relative rounded-xl shadow-2xl border border-gray-200 transform hover:scale-[1.02] transition duration-500 w-full" loading="lazy" decoding="async">
746
747                <!-- Portal Button -->
748                <div class="mt-8 text-center relative z-10">
749                    <a href="portal.html"
750                        class="inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white transition-all duration-200 bg-purple-600 rounded-xl hover:bg-purple-700 hover:shadow-lg hover:-translate-y-1 group">
751                        <i class="fas fa-rocket mr-3"></i>
752                        Open Web Portal
753                        <i class="fas fa-arrow-right ml-3 transform group-hover:translate-x-1 transition"></i>
754                    </a>
755                </div>
756            </div>
757        </div>
758    </section>
759
760    <!-- Windows Version Spotlight Section -->
761    <section class="bg-indigo-50 py-16">
762        <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
763
764            <!-- Text Content -->
765            <div class="text-left">
766                <div
767                    class="inline-block px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-bold uppercase tracking-wide mb-4">
768                    New on the Microsoft Store
769                </div>
770                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
771                    Arabic OCR for Windows
772                </h2>
773
774                <!-- English Description -->
775                <p class="text-lg text-gray-700 mb-2 leading-relaxed">
776                    Now available for Windows users. The native Windows app runs a <strong>local on-device
777                        model</strong>, so your documents are processed entirely offline — your files are never
778                    uploaded and your data never leaves your PC. 100% private, and fast.
779                </p>
780
781                <!-- Divider -->
782                <div class="w-16 h-1 bg-indigo-300 my-6 rounded-full"></div>
783
784                <!-- Arabic Description -->
785                <p class="text-lg text-gray-700 mb-8 leading-relaxed" dir="rtl">
786                    متوفر الآن لمستخدمي ويندوز. يعمل التطبيق بـ<strong>نموذج محلي على جهازك</strong>، حيث تتم معالجة
787                    مستنداتك بالكامل دون الاتصال بالإنترنت — لا يتم رفع أي ملفات ولا تغادر بياناتك جهازك أبداً.
788                    خصوصية ١٠٠٪ وسرعة عالية.
789                </p>
790
791                <!-- Tracked as `download_app` (platform=windows) by the module script above. -->
792                <a href="https://apps.microsoft.com/detail/9P2NRS4S8ND6?hl=en-u
792s&amp;gl=US&amp;ocid=pdpshare" id="btn-download-windows-spotlight"
793                    target="_blank"
794                    class="inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white transition-all duration-200 bg-gray-900 rounded-xl hover:bg-black hover:shadow-lg hover:-translate-y-1 group">
795                    <i class="fab fa-windows mr-3 text-2xl"></i>
796                    Download for Windows
797                    <i class="fas fa-arrow-right ml-3 transform group-hover:translate-x-1 transition"></i>
798                </a>
799            </div>
800
801            <!-- Windows Screenshots (pulled from the Microsoft Store listing) -->
802            <div class="relative">
803                <div
804                    class="absolute -inset-2 bg-gradient-to-r from-indigo-400 to-blue-400 rounded-2xl opacity-20 blur-lg">
805                </div>
806                <div id="windows-screenshots-container"
807                    class="relative flex overflow-x-auto gap-4 snap-x snap-mandatory scrollbar-hide rounded-xl"
808                    style="scroll-behavior: smooth;">
809                    <img src="/win1.jpg" loading="lazy" decoding="async" alt="Arabic OCR for Windows — scanned document text editor"
810                        class="windows-screenshot-item snap-center flex-shrink-0 w-full rounded-xl shadow-2xl border border-gray-200" />
811                    <img src="/win2.jpg" loading="lazy" decoding="async" alt="Arabic OCR for Windows — Arabic text extraction"
812                        class="windows-screenshot-item snap-center flex-shrink-0 w-full rounded-xl shadow-2xl border border-gray-200" />
813                    <img src="/win3.jpg" loading="lazy" decoding="async" alt="Arabic OCR for Windows — document library"
814                        class="windows-screenshot-item snap-center flex-shrink-0 w-full rounded-xl shadow-2xl border border-gray-200" />
815                    <img src="/win4.jpg" loading="lazy" decoding="async" alt="Arabic OCR for Windows — PDF Studio editor"
816                        class="windows-screenshot-item snap-center flex-shrink-0 w-full rounded-xl shadow-2xl border border-gray-200" />
817                    <img src="/win5.jpg" loading="lazy" decoding="async" alt="Arabic OCR for Windows — PDF page tools"
818                        class="windows-screenshot-item snap-center flex-shrink-0 w-full rounded-xl shadow-2xl border border-gray-200" />
819                    <img src="/win6.jpg" loading="lazy" decoding="async" alt="Arabic OCR for Windows — AI text features"
820                        class="windows-screenshot-item snap-center flex-shrink-0 w-full rounded-xl shadow-2xl border border-gray-200" />
821                    <img src="/win7.jpg" loading="lazy" decoding="async" alt="Arabic OCR for Windows — translation and export"
822                        class="windows-screenshot-item snap-center flex-shrink-0 w-full rounded-xl shadow-2xl border border-gray-200" />
823                </div>
824                <div class="relative flex justify-center gap-2 mt-4" id="windows-screenshot-dots">
825                    <!-- Dots generated by setupSlider() -->
826                </div>
827            </div>
828        </div>
829    </section>
830
831    <!-- macOS Version Spotlight Section -->
832    <section class="bg-blue-50 py-16">
833        <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
834
835            <!-- Text Content -->
836            <div class="text-left">
837                <div
838                    class="inline-block px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-bold uppercase tracking-wide mb-4">
839                    Exclusive for Mac
840                </div>
841                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
842                    Arabic OCR for macOS
843                </h2>
844
845                <!-- English Description -->
846                <p class="text-lg text-gray-700 mb-2 leading-relaxed">
847                    Designed specifically for the Mac ecosystem. Experience the ultimate privacy and speed with our
848                    <strong>Apple Local LLM</strong> integration. Process your sensitive documents entirely offline,
849                    ensuring your data never leaves your device.
850                </p>
851
852                <!-- Divider -->
853                <div class="w-16 h-1 bg-blue-300 my-6 rounded-full"></div>
854
855                <!-- Arabic Description -->
856                <p class="text-lg text-gray-700 mb-8 leading-relaxed" dir="rtl">
857                    مصمم خصيصاً لنظام macOS. استمتع بخصوصية وسرعة لا مثيل لهما مع تكامل <strong>Apple Local
858                        LLM</strong>.
859                    قم بمعالجة مستنداتك الحساسة بالكامل دون الاتصال بالإنترنت، مما يضمن عدم مغادرة بياناتك لجهازك أبداً.
860                </p>
861
862                <!-- Download Button -->
863                <a href="https://apps.apple.com/us/app/arabic-ocr/id6745792738" target="_blank"
864                    class="inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white transition-all duration-200 bg-gray-900 rounded-xl hover:bg-black hover:shadow-lg hover:-translate-y-1 group">
865                    <i class="fab fa-apple mr-3 text-2xl"></i>
866                    Download for macOS
867                    <i class="fas fa-arrow-right ml-3 transform group-hover:translate-x-1 transition"></i>
868                </a>
869            </div>
870
871            <!-- macOS GIF -->
872            <div class="relative">
873                <div
874                    class="absolute -inset-2 bg-gradient-to-r from-blue-400 to-indigo-400 rounded-2xl opacity-20 blur-lg">
875                </div>
876                <img src="/macos.gif" alt="Arabic OCR macOS Demo"
877                    class="relative rounded-xl shadow-2xl border border-gray-200 transform hover:scale-[1.02] transition duration-500 w-full" loading="lazy" decoding="async">
878            </div>
879        </div>
880    </section>
881
882    <!-- PDF Studio Spotlight Section -->
883    <section class="bg-gray-100 py-16">
884        <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
885
886            <!-- PDF Studio GIF -->
887            <div class="order-2 md:order-1 relative">
888                <div
889                    class="absolute -inset-2 bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl opacity-20 blur-lg">
890                </div>
891                <img src="/pdfstudio.gif" alt="PDF Studio Editor Demo"
892                    class="relative rounded-xl shadow-2xl border border-gray-200 transform hover:scale-[1.02] transition duration-500 w-full" loading="lazy" decoding="async">
893            </div>
894
895            <!-- Text Content -->
896            <div class="order-1 md:order-2 text-left">
897                <div
898                    class="inline-block px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-bold uppercase tracking-wide mb-4">
899                    New Feature
900                </div>
901                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
902                    PDF Studio Editor
903                </h2>
904
905                <!-- English Description -->
906                <p class="text-lg text-gray-700 mb-2 leading-relaxed">
907                    Edit, merge, and organize your PDFs effortlessly with our powerful online studio.
908                    No installation required—access advanced tools like page rotation, deletion, and text
909                    extraction
910                    directly in your browser.
911                </p>
912
913                <!-- Divider -->
914                <div class="w-16 h-1 bg-gray-300 my-6 rounded-full"></div>
915
916                <!-- Arabic Description -->
917                <p class="text-lg text-gray-700 mb-8 leading-relaxed" dir="rtl">
918                    قم بتعديل ودمج وإدارة ملفات PDF الخاصة بك بسهولة عبر الاستوديو المتطور أونلاين.
919                    إستمتع بأدوات متقدمة مثل تدوير الصفحات، الحذف، واستخراج النصوص مباشرة من متصفحك دون الحاجة
920                    لأي
921                    تثبيت.
922                </p>
923
924                <!-- Action Button -->
925                <a href="pdf-studio.html"
926                    class="inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white transition-all duration-200 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl hover:from-blue-700 hover:to-indigo-700 hover:shadow-lg hover:-translate-y-1 group">
927                    <i class="fas fa-magic mr-3"></i>
928                    Open PDF Studio Portal
929                    <i class="fas fa-arrow-right ml-3 transform group-hover:translate-x-1 transition"></i>
930                </a>
931            </div>
932        </div>
933    </section>
934    <section class="py-20 bg-slate-50">
935        <div class="max-w-5xl mx-auto px-6">
936            <div class="text-center mb-16">
937                <h2 class="text-3xl md:text-4xl font-extrabold text-slate-900 mb-4 leading-tight">
938                    الحل المتكامل لتحويل الصور والملفات إلى نصوص بدقة فائقة
939                </h2>
940                <div class="w-24 h-1.5 bg-blue-600 mx-auto rounded-full"></div>
941                <p class="mt-6 text-xl text-slate-600 max-w-2xl mx-auto leading-relaxed" dir="rtl">
942                    وداعاً للكتابة اليدوية! مع تطبيقنا، يمكنك استخراج النصوص العربية من أي مصدر بضغطة زر واحدة عبر جميع
943                    تطبيقاتنا.
944                </p>
945            </div>
946
947            <div class="grid grid-cols-1 md:grid-cols-2 gap-8" dir="rtl">
948
949                <div
950                    class="flex p-6 bg-white rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
951                    <div
952                        class="flex-shrink-0 w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center ml-4">
953                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
954                            stroke="currentColor">
955                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
956                                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
957                        </svg>
958                    </div>
959                    <div>
960                        <h3 class="text-xl font-bold text-slate-800 mb-2">دقة فائقة</h3>
961                        <p class="text-slate-600 leading-relaxed">دعم كامل للخطوط العربية المطبوعة واليدوية بفضل
962                            خوارزميات المعالجة المتقدمة.</p>
963                    </div>
964                </div>
965
966                <div
967                    class="flex p-6 bg-white rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
968                    <div
969                        class="flex-shrink-0 w-12 h-12 bg-indigo-100 text-indigo-600 rounded-lg flex items-center justify-center ml-4">
970                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
971                            stroke="currentColor">
972                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
973                                d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
974                        </svg>
975                    </div>
976                    <div>
977                        <h3 class="text-xl font-bold text-slate-800 mb-2">شامل ومتعدد</h3>
978                        <p class="text-slate-600 leading-relaxed">معالجة فورية للصور، المستندات الممسÙ
978ˆØ­Ø© ضوئياً، وملفات
979                            PDF متعددة الصفحات.</p>
980                    </div>
981                </div>
982
983                <div
984                    class="flex p-6 bg-white rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
985                    <div
986                        class="flex-shrink-0 w-12 h-12 bg-amber-100 text-amber-600 rounded-lg flex items-center justify-center ml-4">
987                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
988                            stroke="currentColor">
989                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
990                                d="M13 10V3L4 14h7v7l9-11h-7z" />
991                        </svg>
992                    </div>
993                    <div>
994                        <h3 class="text-xl font-bold text-slate-800 mb-2">سرعة البرق</h3>
995                        <p class="text-slate-600 leading-relaxed">استمتع بتجربة مستخدم سلسة حيث يتم استخراج النصوص
996                            وتنسيقها خلال ثوانٍ معدودة.</p>
997                    </div>
998                </div>
999
1000                <div
1001                    class="flex p-6 bg-white rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
1002                    <div
1003                        class="flex-shrink-0 w-12 h-12 bg-emerald-100 text-emerald-600 rounded-lg flex items-center justify-center ml-4">
1004                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
1005                            stroke="currentColor">
1006                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
1007                                d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
1008                        </svg>
1009                    </div>
1010                    <div>
1011                        <h3 class="text-xl font-bold text-slate-800 mb-2">ذكاء اصطناعي</h3>
1012                        <p class="text-slate-600 leading-relaxed">نظام متطور يفهم سياق الحروف العربية لضمان أعلى مستويات
1013                            الدقة وتقليل الأخطاء.</p>
1014                    </div>
1015                </div>
1016
1017            </div>
1018        </div>
1019    </section>
1020
1021    <!-- FEATURES, SCREENSHOTS, GOOGLE AI, CONTACT, OTHER SECTIONS -->
1022    <!-- (All your original content was kept — unchanged for brevity here) -->
1023    <!-- App Screenshots & Demo Section -->
1024    <section class="bg-gray-50 py-20">
1025        <div class="max-w-6xl mx-auto px-6 text-center">
1026            <h2 class="text-3xl font-bold mb-10">App Screenshots & Demo</h2>
1027
1028            <!-- Horizontal Scroll Container -->
1029            <div id="screenshots-container"
1030                class="flex overflow-x-auto gap-6 mb-6 pb-6 px-4 snap-x snap-mandatory scrollbar-hide justify-start"
1031                style="scroll-behavior: smooth;">
1032                <img src="sc1.webp"
1033                    class="screenshot-item snap-center flex-shrink-0 w-auto rounded-xl shadow-lg border border-gray-200"
1034                    style="height: 600px;"
1035                    alt="Arabic OCR app extracting printed Arabic text from a scanned document on iOS" loading="lazy" decoding="async" />
1036                <img src="sc3.webp"
1037                    class="screenshot-item snap-center flex-shrink-0 w-auto rounded-xl shadow-lg border border-gray-200"
1038                    style="height: 600px;"
1039                    alt="Arabic OCR app recognizing Arabic handwriting from a photo on Android" loading="lazy" decoding="async" />
1040                <img src="sc4.webp"
1041                    class="screenshot-item snap-center flex-shrink-0 w-auto rounded-xl shadow-lg border border-gray-200"
1042                    style="height: 600px;"
1043                    alt="Arabic OCR app converting Arabic image to editable text with AI" loading="lazy" decoding="async" />
1044                <img src="sc55.webp"
1045                    class="screenshot-item snap-center flex-shrink-0 w-auto rounded-xl shadow-lg border border-gray-200"
1046                    style="height: 600px;"
1047                    alt="Arabic OCR app showing extracted text history and document library" loading="lazy" decoding="async" />
1048                <img src="sc56.webp"
1049                    class="screenshot-item snap-center flex-shrink-0 w-auto rounded-xl shadow-lg border border-gray-200"
1050                    style="height: 600px;"
1051                    alt="Arabic OCR app translation and export features for Arabic documents" loading="lazy" decoding="async" />
1052            </div>
1053
1054            <!-- Dots Navigation -->
1055            <div class="flex justify-center gap-2 mb-10" id="screenshot-dots">
1056                <!-- Dots will be generated by JS -->
1057            </div>
1058
1059            
1059<script>
1060                document.addEventListener('DOMContentLoaded', () => {
1061
1062                    const setupSlider = (containerId, dotsId, itemClass) => {
1063                        const container = document.getElementById(containerId);
1064                        const dotsContainer = document.getElementById(dotsId);
1065                        if (!container || !dotsContainer) return;
1066
1067                        const images = container.querySelectorAll(`.${itemClass}`);
1068
1069                        // Generate dots
1070                        images.forEach((_, index) => {
1071                            const dot = document.createElement('button');
1072                            dot.className = `w-3 h-3 rounded-full transition-all duration-300 ${index === 0 ? 'bg-blue-600 w-6' : 'bg-gray-300'}`;
1073                            dot.ariaLabel = `Go to slide ${index + 1}`;
1074                            dot.onclick = () => {
1075                                images[index].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
1076                            };
1077                            dotsContainer.appendChild(dot);
1078                        });
1079
1080                        // Update dots on scroll
1081                        const updateDots = () => {
1082                            const containerCenter = container.getBoundingClientRect().left + container.offsetWidth / 2;
1083
1084                            let closestIndex = 0;
1085                            let minDistance = Infinity;
1086
1087                            images.forEach((img, index) => {
1088                                const imgCenter = img.getBoundingClientRect().left + img.offsetWidth / 2;
1089                                const distance = Math.abs(containerCenter - imgCenter);
1090                                if (distance < minDistance) {
1091                                    minDistance = distance;
1092                                    closestIndex = index;
1093                                }
1094                            });
1095
1096                            const dots = dotsContainer.children;
1097                            Array.from(dots).forEach((dot, index) => {
1098                                if (index === closestIndex) {
1099                                    dot.classList.remove('bg-gray-300');
1100                                    dot.classList.add('bg-blue-600', 'w-6');
1101                                } else {
1102                                    dot.classList.add('bg-gray-300');
1103                                    dot.classList.remove('bg-blue-600', 'w-6');
1104                                }
1105                            });
1106                        };
1107
1108                        container.addEventListener('scroll', updateDots);
1109                        // Initial call
1110                        updateDots();
1111                    };
1112
1113                    // Initialize App Screenshots Slider
1114                    setupSlider('screenshots-container', 'screenshot-dots', 'screenshot-item');
1115
1116                    // Initialize macOS Screenshots Slider
1117                    setupSlider('macos-screenshots-container', 'macos-screenshot-dots', 'macos-screenshot-item');
1118
1119                    // Initialize Windows Spotlight Slider
1120                    setupSlider('windows-screenshots-container', 'windows-screenshot-dots', 'windows-screenshot-item');
1121                });
1122            </script>
1122
1123
1124            <a href="https://arabic-ocr.com/videos/arabic-ocr-demo/" target="_blank"
1125                class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
1126                View Demo
1127            </a>
1128        </div>
1129    </section>
1130
1131
1132    <!-- Video Tutorial Section -->
1133    <section class="py-16 bg-gradient-to-b from-blue-50 to-white">
1134        <div class="max-w-4xl mx-auto px-6">
1135            <div class="text-center mb-8">
1136                <h2 class="text-3xl font-bold text-gray-900 mb-3">Watch Our Complete Tutorial</h2>
1137                <p class="text-lg text-gray-600">Learn how to use Arabic OCR Web Portal in minutes</p>
1138                <a href="/videos/arabic-ocr-portal-tutorial/" class="inline-block mt-2 text-sm text-blue-600 hover:underline">
1139                    Watch on dedicated page →
1140                </a>
1141            </div>
1142
1143            <!-- Video Container with Schema Markup -->
1144            <div class="relative rounded-2xl overflow-hidden shadow-2xl border border-gray-200" itemscope
1145                itemtype="https://schema.org/VideoObject">
1146                <!-- Schema.org Metadata -->
1147                <meta itemprop="name"
1148                    content="Arabic OCR Web Portal Tutorial - AI-Powered Text Extraction & Translation | Complete Guide">
1149                <meta itemprop="description"
1150                    content="Complete tutorial on using the Arabic OCR Web Portal. Learn how to extract Arabic and English text from images and PDFs, use AI summarization, translation features, and manage your documents with our powerful online OCR platform.">
1151                <meta itemprop="uploadDate" content="2026-02-12T09:00:00+02:00">
1152                <meta itemprop="thumbnailUrl" content="https://i.ytimg.com/vi/HFVlGT3s9h0/maxresdefault.jpg">
1153                <meta itemprop="contentUrl" content="https://www.youtube.com/watch?v=HFVlGT3s9h0">
1154                <meta itemprop="embedUrl" content="https://www.youtube.com/embed/HFVlGT3s9h0">
1155                <meta itemprop="duration" content="PT19M">
1156                <link itemprop="url" href="https://www.youtube.com/watch?v=HFVlGT3s9h0">
1157
1158                <!-- Publisher Information -->
1159                <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
1160                    <meta itemprop="name" content="Arabic OCR">
1161                    <link itemprop="url" href="https://arabic-ocr.com">
1162                    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
1163                        <meta itemprop="url" content="https://arabic-ocr.com/logo.png">
1164                        <meta itemprop="width" content="600">
1165                        <meta itemprop="height" content="600">
1166                    </div>
1167                </div>
1168
1169                <!-- Video Embed -->
1170                <div class="relative" style="padding-bottom: 56.25%; height: 0;">
1171                    <iframe src="https://www.youtube.com/embed/HFVlGT3s9h0?rel=0&modestbranding=1"
1172                        title="Arabic OCR Web Portal Tutorial - Complete Guide" frameborder="0"
1173                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
1174                        allowfullscreen itemprop="video" class="absolute top-0 left-0 w-full h-full" loading="lazy">
1175                    </iframe>
1176                </div>
1177            </div>
1178
1179            <!-- Video Description for SEO -->
1180            <div class="mt-6 text-center">
1181                <p class="text-gray-600 mb-4">
1182                    This comprehensive tutorial covers everything you need to know about using the Arabic OCR Web
1183                    Portal,
1184                    including document scanning, text extraction, AI-powered summarization, and translation features.
1185                </p>
1186                <div class="flex flex-wrap justify-center gap-3 text-sm text-gray-500">
1187                    <span class="flex items-center">
1188                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
1189                            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
1190                            <path fill-rule="evenodd"
1191                                d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
1192                                clip-rule="evenodd" />
1193                        </svg>
1194                        19 minutes
1195                    </span>
1196                    <span class="flex items-center">
1197                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
1198                            <path fill-rule="evenodd"
1199                                d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
1200                                clip-rule="evenodd" />
1201                        </svg>
1202                        Published: Feb 12, 2026
1203                    </span>
1204                    <span class="flex items-center">
1205                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
1206                            <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
1207                            <path fill-rule="evenodd"
1208                                d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
1209                                clip-rule="evenodd" />
1210                        </svg>
1211                        Step-by-step guide
1212                    </span>
1213                </div>
1214            </div>
1215        </div>
1216    </section>
1217
1218    <!-- PDF Studio Video Tutorial Section -->
1219    <section class="py-16 bg-white border-t border-gray-100">
1220        <div class="max-w-4xl mx-auto px-6">
1221            <div class="text-center mb-8">
1222                <h2 class="text-3xl font-bold text-gray-900 mb-3">Watch Our PDF Studio Tutorial</h2>
1223                <p class="text-lg text-gray-600">Learn how to edit, merge, and manage your PDFs with PDF Studio</p>
1224                <a href="/videos/arabic-ocr-pdf-studio/" class="inline-block mt-2 text-sm text-blue-600 hover:underline">
1225                    Watch on dedicated page →
1226                </a>
1227            </div>
1228
1229            <!-- Video Container with Schema Markup -->
1230            <div class="relative rounded-2xl overflow-hidden shadow-2xl border border-gray-200" itemscope
1231                itemtype="https://schema.org/VideoObject">
1232                <!-- Schema.org Metadata -->
1233                <meta itemprop="name" content="Arabic OCR PDF Studio Tutorial - Edit & Manage PDFs Online">
1234                <meta itemprop="description"
1235                    content="Learn how to use PDF Studio by Arabic OCR. This tutorial covers editing, merging, rotating, and organizing PDF pages directly in your browser without any installation.">
1236                <meta itemprop="uploadDate" content="2026-02-14T08:00:00+02:00">
1237                <meta itemprop="thumbnailUrl" content="https://i.ytimg.com/vi/uqh3pI1yL3U/maxresdefault.jpg">
1238                <meta itemprop="contentUrl" content="https://www.youtube.com/watch?v=uqh3pI1yL3U">
1239                <meta itemprop="embedUrl" content="https://www.youtube.com/embed/uqh3pI1yL3U">
1240                <meta itemprop="duration" content="PT5M">
1241                <link itemprop="url" href="https://www.youtube.com/watch?v=uqh3pI1yL3U">
1242
1243                <!-- Publisher Information -->
1244                <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
1245                    <meta itemprop="name" content="Arabic OCR">
1246                    <link itemprop="url" href="https://arabic-ocr.com">
1247                    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
1248                        <meta itemprop="url" content="https://arabic-ocr.com/logo.png">
1249                        <meta itemprop="width" content="600">
1250                        <meta itemprop="height" content="600">
1251                    </div>
1252                </div>
1253
1254                <!-- Video Embed -->
1255                <div class="relative" style="padding-bottom: 56.25%; height: 0;">
1256                    <iframe src="https://www.youtube.com/embed/uqh3pI1yL3U?rel=0&modestbranding=1"
1257                        title="Arabic OCR PDF Studio Tutorial" frameborder="0"
1258                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
1259                        allowfullscreen itemprop="video" class="absolute top-0 left-0 w-full h-full" loading="lazy">
1260                    </iframe>
1261                </div>
1262            </div>
1263        </div>
1264    </section>
1265
1266    <!-- Features Section -->
1267    <section id="features" class="py-20 bg-white">
1268        <div class="max-w-6xl mx-auto px-6">
1269            <h2 class="text-3xl font-bold mb-10 text-center">Key Features / الميزات الرئيسية</h2>
1270            <div class="grid md:grid-cols-2 gap-10">
1271
1272                <!-- English Features -->
1273                <div class="text-left">
1274                    <div class="mb-6">
1275                        <h3 class="text-xl font-semibold mb-2 text-blue-600">
1275🆕 New Launch: Arabic OCR for Windows
1276                        </h3>
1277                        <p class="text-gray-700">
1278                            <strong>Arabic OCR is now available for Windows users</strong> on the
1279                            <a href="https://apps.microsoft.com/detail/9P2NRS4S8ND6?hl=en-us&amp;gl=US&amp;ocid=pdpshare" id="btn-store-windows-feature"
1280                                target="_blank" class="text-blue-600 font-semibold hover:underline">Microsoft
1281                                Store</a>. Install the native Windows app and extract printed and handwritten Arabic
1282                            text from images and PDFs directly on your PC. It runs a <strong>local on-device
1283                                model</strong>, so your files are never uploaded — <strong>100% private</strong> and
1284                            fully offline.
1285                        </p>
1286                    </div>
1287                    <div class="mb-6">
1288                        <h3 class="text-xl font-semibold mb-2 text-blue-600">Powered by Apple Intelligence & LLM Vision
1289                        </h3>
1290                        <p class="text-gray-700">
1291                            New in <strong>v3.7</strong>: The iOS and macOS versions now leverage Apple's latest
1292                            on-device
1293                            <strong>LLM Vision</strong> technology. Experience lightning-fast, <strong>offline
1294                                OCR</strong>
1295                            without uploading any files. Your data never leaves your device—100% secure and private.
1296                        </p>
1297                    </div>
1298                    <div class="mb-6">
1299                        <h3 class="text-xl font-semibold mb-2 text-blue-600">🆕 New in v2.4: AI Summarize & Reformat OCR
1300                        </h3>
1301                        <p class="text-gray-700">
1302                            Version 2.4 introduces <strong>AI Summarize</strong> for instant summaries of your scanned
1303                            text,
1304                            and a <strong>Reformat OCR Results</strong> feature to automatically clean and organize
1305                            extracted text.
1306                            Enjoy faster, smarter, and more accurate Arabic text recognition, both printed and
1307                            handwritten.
1308                        </p>
1309                    </div>
1310                    <div class="mb-6">
1311                        <h3 class="text-xl font-semibold mb-2">Arabic Handwriting Recognition</h3>
1312                        <p class="text-gray-700">
1313                            Accurately detects both <strong>printed Arabic text</strong> and
1314                            <strong>handwritten Arabic script</strong> from scanned documents, photos, or PDFs.
1315                        </p>
1316                    </div>
1317                    <div class="mb-6">
1318                        <h3 class="text-xl font-semibold mb-2">Capture or Upload Documents</h3>
1319                        <p class="text-gray-700">
1320                            Use your phone’s camera to scan paper documents or
1321                            <strong>import Arabic images and PDFs</strong> directly
1322                            from your gallery.
1323                        </p>
1324                    </div>
1325                    <div class="mb-6">
1326                        <h3 class="text-xl font-semibold mb-2">Lightning-Fast OCR Results</h3>
1327                        <p class="text-gray-700">
1328                            Experience near-instant <strong>Arabic text extraction</strong> using
1329                            <strong>Google Cloud Vision AI</strong> for OCR.
1330                        </p>
1331                    </div>
1332                    <div class="mb-6">
1333                        <h3 class="text-xl font-semibold mb-2">Private & Secure OCR</h3>
1334                        <p class="text-gray-700">
1335                            Your scanned files are processed locally or securely in the cloud.
1336                            <strong>No storage, no sharing</strong>. 100% privacy-focused.
1337                        </p>
1338                    </div>
1339                    <div class="mb-6">
1340                        <h3 class="text-xl font-semibold mb-2">User-Friendly Interface</h3>
1341                        <p class="text-gray-700">
1342                            Designed with a clean, intuitive layout for all users — ideal for
1343                            <strong>students, researchers, and professionals</strong>.
1344                        </p>
1345                    </div>
1346                </div>
1347
1348                <!-- Arabic Features -->
1349                <div class="text-right" dir="rtl" lang="ar">
1350                    <div class="mb-6">
1351                        <h3 class="text-xl font-semibold mb-2 text-blue-600">🆕 إطلاق جديد: تطبيق Arabic OCR لنظام
1352                            ويندوز</h3>
1353                        <p class="text-gray-700">
1354                            <strong>أصبح تطبيق Arabic OCR متاحًا الآن لمستخدمي ويندوز</strong> على
1355                            <a href="https://apps.microsoft.com/detail/9P2NRS4S8ND6?hl=en-u
1355s&amp;gl=US&amp;ocid=pdpshare" id="btn-store-windows-feature-ar"
1356                                target="_blank" class="text-blue-600 font-semibold hover:underline">متجر
1357                                Microsoft</a>. حمّل التطبيق واستخرج النصوص العربية المطبوعة والمكتوبة بخط اليد من الصور
1358                            وملفات PDF مباشرة على جهاز الكمبيوتر. يعمل التطبيق بـ<strong>نموذج محلي على جهازك</strong>،
1359                            فلا يتم رفع أي ملفات — <strong>خصوصية ١٠٠٪</strong> وبدون إنترنت.
1360                        </p>
1361                    </div>
1362                    <div class="mb-6">
1363                        <h3 class="text-xl font-semibold mb-2 text-blue-600">مدعوم بذكاء Apple وتقنية LLM Vision</h3>
1364                        <p class="text-gray-700">
1365                            <strong>جديد في الإصدار v3.7</strong>: نسختي iOS و macOS تستخدمان الآن أحدث تقنيات
1366                            <strong>Apple LLM Vision</strong> المدمجة. استمتع باستخراج نصوص فوري و <strong>بدون
1367                                إنترنت</strong>،
1368                            دون الحاجة لرفع أي ملفات. بياناتك تبقى على جهازك—أمان وخصوصية <strong>١٠٠٪</strong>.
1369                        </p>
1370                    </div>
1371                    <div class="mb-6">
1372                        <h3 class="text-xl font-semibold mb-2 text-blue-600">🆕 الجديد في الإصدار v2.4: تلخيص ذكي وإعادة
1373                            تنسيق النصوص</h3>
1374                        <p class="text-gray-700">
1375                            الإصدار 2.4 يقدم ميزة <strong>التلخيص الذكي</strong> للحصول على ملخصات فورية للنصوص
1376                            الممسوحة،
1377                            وميزة <strong>إعادة تنسيق النتائج</strong> لتنظيف وتنظيم النصوص المستخرجة تلقائيًا.
1378                            استمتع بـ استخراج نصوص عربية أسرع وأكثر ذكاءً ودقة، سواء كانت مطبوعة أو مكتوبة يدويًا.
1379                        </p>
1380                    </div>
1381                    <div class="mb-6">
1382                        <h3 class="text-xl font-semibold mb-2">التعرف على الكتابة اليدوية العربية</h3>
1383                        <p class="text-gray-700">
1384                            يتعرف بدقة على <strong>النص العربي المطبوع</strong> و<strong>الكتابة اليدوية</strong> من
1385                            الصور أو ملفات
1386                            PDF أو المستندات الورقية.
1387                        </p>
1388                    </div>
1389                    <div class="mb-6">
1390                        <h3 class="text-xl font-semibold mb-2">التقاط أو تحميل المستندات</h3>
1391                        <p class="text-gray-700">
1392                            امسح مستنداتك بالكاميرا أو قم <strong>برفع صور عربية أو ملفات PDF</strong> لتحويلها إلى نصوص
1393                            رقمية.
1394                        </p>
1395                    </div>
1396                    <div class="mb-6">
1397                        <h3 class="text-xl font-semibold mb-2">نتائج سريعة وفورية</h3>
1398                        <p class="text-gray-700">
1399                            استمتع بـ <strong>استخراج نصوص عربية</strong> فورية باستخدام
1400                            <strong>تقنية Google Cloud Vision</strong>
1401                            المتقدمة.
1402                        </p>
1403                    </div>
1404                    <div class="mb-6">
1405                        <h3 class="text-xl font-semibold mb-2">الخصوصية والأمان</h3>
1406                        <p class="text-gray-700">
1407                            تتم معالجة الملفات محليًا أو بشكل آمن في السحابة —
1408                            <strong>لا يتم حفظ أو مشاركة أي بيانات</strong> —
1409                            خصوصيتك مضمونة.
1410                        </p>
1411                    </div>
1412                    <div class="mb-6">
1413                        <h3 class="text-xl font-semibold mb-2">واجهة بسيطة وسهلة الاستخدام</h3>
1414                        <p class="text-gray-700">
1415                            مصمم بواجهة نظيفة وسهلة لكل المستخدمين — مناسب للطلبة والباحثين وكل من يعمل على
1416                            <strong>الوثائق العربية</strong>.
1417                        </p>
1418                    </div>
1419                </div>
1420
1421            </div>
1422        </div>
1423    </section>
1424
1425    <!-- Google Vision AI Section -->
1426    <section id="vision-api" class="py-20 bg-gray-50">
1427        <div class="max-w-6xl mx-auto px-6">
1428
1429            <!-- Logos Row -->
1430            <div class="flex justify-center items-center gap-14 flex-wrap mb-12">
1431                <img src="https://www.gstatic.com/images/branding/googlelogo/svg/googlelogo_clr_74x24px.svg"
1432                    alt="Google Logo" class="h-10 md:h-12" loading="lazy" decoding="async" />
1433                <img src="googleai.svg" alt="Google AI Logo" class="h-10 md:h-12" loading="lazy" decoding="async" />
1434                <img src="https://upload.wikimedia.org/wikipedia/commons/d/d7/Android_robot.svg" alt="Android Logo"
1435                    class="h-10 md:h-12" loading="lazy" decoding="async" />
1436                <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg" alt="Apple iOS Logo"
1437                    class="h-10 md:h-12" loading="lazy" decoding="async" />
1438            </div>
1439
1440            <!-- Title -->
1441            <h2 class="text-3xl font-bold mb-6 text-center">
1442                Powered by Google Vision AI / مدعوم بتقنية Google Vision AI
1443            </h2>
1444
1445            <!-- Content Grid -->
1446            <div class="grid md:grid-cols-2 gap-10">
1447                <!-- English Content -->
1448                <div class="text-left">
1449                    <div class="mb-6">
1450                        <h3 class="text-xl font-semibold mb-2">Advanced Machine Learning</h3>
1451                        <p class="text-gray-700">
1452                            This app uses the <strong>latest Google Vision API</strong> — a powerful AI technology
1453                            trained on millions
1454                            of real-world documents — to deliver exceptional OCR accuracy.
1455                        </p>
1456                    </div>
1457                    <div class="mb-6">
1458                        <h3 class="text-xl font-semibold mb-2">High Precision Text Extraction</h3>
1459                        <p class="text-gray-700">
1460                            Whether it's <strong>complex handwriting</strong> or <strong>low-quality images</strong>,
1461                            Google Vision’s
1462                            neural networks ensure precise text recognition every time.
1463                        </p>
1464                    </div>
1465                    <div class="mb-6">
1466                        <h3 class="text-xl font-semibold mb-2">Continuously Updated</h3>
1467                        <p class="text-gray-700">
1468                            Benefit from <strong>ongoing improvements</strong> in Google’s AI models. As the API
1469                            evolves, your OCR
1470                            results get even better — no app update required.
1471                        </p>
1472                    </div>
1473                </div>
1474
1475                <!-- Arabic Content -->
1476                <div class="text-right" dir="rtl" lang="ar">
1477                    <div class="mb-6">
1478                        <h3 class="text-xl font-semibold mb-2">تقنيات الذكاء الاصطناعي المتقدمة</h3>
1479                        <p class="text-gray-700">
1480                            يستخدم هذا التطبيق <strong>أحدث إصدار من Google Vision API</strong>، وهي تقنية ذكاء اصطناعي
1481                            قوية تم
1482                            تدريبها على ملايين المستندات الواقعية لضمان دقة فائقة في التعرف على النصوص.
1483                        </p>
1484                    </div>
1485                    <div class="mb-6">
1486                        <h3 class="text-xl font-semibold mb-2">استخراج دقيق للنصوص</h3>
1487                        <p class="text-gray-700">
1488                            سواء كانت <strong>كتابة يدوية معقدة</strong> أو <strong>صور بجودة منخفضة</strong>، توفر
1489                            خوارزميات Google
1490                            نتائج دقيقة في كل مرة.
1491                        </p>
1492                    </div>
1493                    <div class="mb-6">
1494                        <h3 class="text-xl font-semibold mb-2">تحديثات مستمرة</h3>
1495                        <p class="text-gray-700">
1496                            استمتع بـ <strong>تحسينات متواصلة</strong> في أداء الذكاء الاصطناعي من Google. مع كل تحديث
1497                            تقني، تتحسن
1498                            نتائج التعرف دون الحاجة لتحديث التطبيق.
1499                        </p>
1500                    </div>
1501                </div>
1502            </div>
1503        </div>
1504    </section>
1505
1506
1507
1508    <!-- Blog Section -->
1509    <section class="py-20 bg-white">
1510        <div class="max-w-7xl mx-auto px-6">
1511            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12 text-center md:text-left">
1512                <div>
1513                    <h2 class="text-3xl md:text-4xl font-black text-gray-900 mb-4" data-i18n="blog_title">Latest from
1514                        Our Blog</h2>
1515                    <p class="text-gray-600 max-w-2xl" data-i18n="blog_subtitle">Discover tips, tutorials, and latest
1516                        news about Arabic OCR and AI technology.</p>
1517                </div>
1518                <a href="blog.html"
1519                    class="inline-flex items-center text-amber-600 font-bold hover:text-amber-700 transition group">
1520                    View All Articles <i
1521                        class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
1522                </a>
1523            </div>
1524            <div id="homepage-blog-grid" class="grid grid-cols-1 md:grid-cols-3 gap-8">
1525                <!-- Blog cards will be injected here -->
1526                <div class="animate-pulse bg-gray-50 rounded-2xl h-80"></div>
1527                <div class="animate-pulse bg-gray-50 rounded-2xl h-80"></div>
1528                <div class="animate-pulse bg-gray-50 rounded-2xl h-80"></div>
1529            </div>
1530        </div>
1531    </section>
1532
1533    <!-- FAQ SECTION -->
1534    <section id="faq" class="py-20 bg-gray-50">
1535        <div class="max-w-7xl mx-auto px-6">
1536            <div class="text-center mb-12">
1537                <h2 class="text-3xl font-bold text-gray-900 mb-2">Frequently Asked Questions</h2>
1538                <p class="text-gray-500 text-sm">الأسئلة الشائعة</p>
1539            </div>
1540            <div class="grid md:grid-cols-2 gap-x-12 gap-y-0">
1541
1542                <!-- English Column -->
1543                <div class="space-y-4">
1544                    <h3 class="text-lg font-bold text-blue-600 mb-4 border-b border-blue-100 pb-2">English</h3>
1545
1546                    <details class="bg-white rounded-xl border border-gray-200 shadow-sm group open:sha
1546dow-md transition-all">
1547                        <summary class="flex items-center justify-between px-5 py-4 cursor-pointer font-semibold text-gray-900 list-none text-sm">
1548                            What is Arabic OCR?
1549                            <i class="fas fa-chevron-down text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 ml-3"></i>
1550                        </summary>
1551                        <div class="px-5 pb-4 text-gray-600 text-sm leading-relaxed">
1552                            Arabic OCR automatically extracts printed and handwritten Arabic text from images, scanned documents, and PDFs into editable digital text. It uses advanced AI — including Google Vision AI and Apple's on-device LLM Vision — for high-accuracy recognition across all platforms.
1553                        </div>
1554                    </details>
1555
1556                    <details class="bg-white rounded-xl border border-gray-200 shadow-sm group open:shadow-md transition-all">
1557                        <summary class="flex items-center justify-between px-5 py-4 cursor-pointer font-semibold text-gray-900 list-none text-sm">
1558                            Can I use it online without downloading an app?
1559                            <i class="fas fa-chevron-down text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 ml-3"></i>
1560                        </summary>
1561                        <div class="px-5 pb-4 text-gray-600 text-sm leading-relaxed">
1562                            Yes. The <a href="/portal.html" class="text-blue-600 hover:underline font-medium">Arabic OCR Web Portal</a> lets you upload images and PDFs and extract Arabic text entirely in your browser — no installation required. A free demo is also available on this page.
1563                        </div>
1564                    </details>
1565
1566                    <details class="bg-white rounded-xl border border-gray-200 shadow-sm group open:sha
1566dow-md transition-all">
1567                        <summary class="flex items-center justify-between px-5 py-4 cursor-pointer font-semibold text-gray-900 list-none text-sm">
1568                            Does it support Arabic handwriting recognition?
1569                            <i class="fas fa-chevron-down text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 ml-3"></i>
1570                        </summary>
1571                        <div class="px-5 pb-4 text-gray-600 text-sm leading-relaxed">
1572                            Yes. Arabic OCR handles a wide range of handwriting styles — from student notes to cursive manuscripts. The AI is trained specifically for Arabic ligatures and connected letterforms.
1573                        </div>
1574                    </details>
1575
1576                    <details class="bg-white rounded-xl border border-gray-200 shadow-sm group open:shadow-md transition-all">
1577                        <summary class="flex items-center justify-between px-5 py-4 cursor-pointer font-semibold text-gray-900 list-none text-sm">
1578                            Which platforms are supported?
1579                            <i class="fas fa-chevron-down text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 ml-3"></i>
1580                        </summary>
1581                        <div class="px-5 pb-4 text-gray-600 text-sm leading-relaxed">
1582                            Arabic OCR is available on <strong>iOS</strong>, <strong>Android</strong>, <strong>macOS</strong>, <strong>Windows</strong>, and as a <strong>Web Portal</strong> in any browser. The iOS/macOS/Windows apps use on-device models for fully offline, private processing.
1583                        </div>
1584                    </details>
1585
1586                    <details class="bg-white rounded-xl border border-gray-200 shadow-sm group open:sha
1586dow-md transition-all">
1587                        <summary class="flex items-center justify-between px-5 py-4 cursor-pointer font-semibold text-gray-900 list-none text-sm">
1588                            Is Arabic OCR free?
1589                            <i class="fas fa-chevron-down text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 ml-3"></i>
1590                        </summary>
1591                        <div class="px-5 pb-4 text-gray-600 text-sm leading-relaxed">
1592                            The online demo is free (1 scan/day) and mobile apps are free to download. For unlimited pages, PDF support, AI Summarize &amp; Translate, and full Web Portal access, see our <a href="/pricing.html" class="text-blue-600 hover:underline font-medium">pricing plans</a>.
1593                        </div>
1594                    </details>
1595
1596                    <details class="bg-white rounded-xl border border-gray-200 shadow-sm group open:shadow-md transition-all">
1597                        <summary class="flex items-center justify-between px-5 py-4 cursor-pointer font-semibold text-gray-900 list-none text-sm">
1598                            What file formats are supported?
1599                            <i class="fas fa-chevron-down text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 ml-3"></i>
1600                        </summary>
1601                        <div class="px-5 pb-4 text-gray-600 text-sm leading-relaxed">
1602                            JPEG, PNG, and multi-page PDF files. You can upload scans, camera photos, or exported files from other apps.
1603                        </div>
1604                    </details>
1605
1606                    <details class="bg-white rounded-xl border border-gray-200 shadow-sm group open:sha
1606dow-md transition-all">
1607                        <summary class="flex items-center justify-between px-5 py-4 cursor-pointer font-semibold text-gray-900 list-none text-sm">
1608                            Is my data private and secure?
1609                            <i class="fas fa-chevron-down text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 ml-3"></i>
1610                        </summary>
1611                        <div class="px-5 pb-4 text-gray-600 text-sm leading-relaxed">
1612                            Yes. iOS, macOS, and Windows apps process documents entirely on-device — nothing is uploaded. The Web Portal uses HTTPS and does not store your documents on our servers.
1613                        </div>
1614                    </details>
1615
1616                    <details class="bg-white rounded-xl border border-gray-200 shadow-sm group open:shadow-md transition-all">
1617                        <summary class="flex items-center justify-between px-5 py-4 cursor-pointer font-semibold text-gray-900 list-none text-sm">
1618                            What languages are supported?
1619                            <i class="fas fa-chevron-down text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 ml-3"></i>
1620                        </summary>
1621                        <div class="px-5 pb-4 text-gray-600 text-sm leading-relaxed">
1622                            Optimized for Arabic, with support for English and mixed Arabic–English documents. The AI Translate feature can translate extracted Arabic text into English and other languages.
1623                        </div>
1624                    </details>
1625                </div>
1626
1627                <!-- Arabic Column -->
1628                <div class="space-y-4 mt-8 md:mt-0" dir="rtl" lang="ar">
1629                    <h3 class="text-lg font-bold text-blue-600 mb-4 border-b border-blue-100 pb-2">العربية</h3>
1630
1631                    <details class="bg-white rounded-xl border border-gray-200 shadow-sm group open:sha
1631dow-md transition-all">
1632                        <summary class="flex items-center justify-between px-5 py-4 cursor-pointer font-semibold text-gray-900 list-none text-sm">
1633                            ما هو Arabic OCR؟
1634                            <i class="fas fa-chevron-down text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 mr-3"></i>
1635                        </summary>
1636                        <div class="px-5 pb-4 text-gray-600 text-sm leading-relaxed">
1637                            Arabic OCR هو تقنية تستخرج تلقائياً النصوص العربية المطبوعة والمكتوبة بخط اليد من الصور والمستندات الممسوحة وملفات PDF، وتحوّلها إلى نصوص رقمية قابلة للتحرير، باستخدام نماذج ذكاء اصطناعي متقدمة مثل Google Vision AI ونماذج Apple المحلية.
1638                        </div>
1639                    </details>
1640
1641                    <details class="bg-white rounded-xl border border-gray-200 shadow-sm group open:sha
1641dow-md transition-all">
1642                        <summary class="flex items-center justify-between px-5 py-4 cursor-pointer font-semibold text-gray-900 list-none text-sm">
1643                            هل يمكنني استخدامه أونلاين دون تحميل تطبيق؟
1644                            <i class="fas fa-chevron-down text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 mr-3"></i>
1645                        </summary>
1646                        <div class="px-5 pb-4 text-gray-600 text-sm leading-relaxed">
1647                            نعم. <a href="/portal.html" class="text-blue-600 hover:underline font-medium">بوابة Arabic OCR</a> تتيح لك رفع الصور وملفات PDF واستخراج النصوص العربية مباشرةً في متصفحك دون أي تثبيت. كما يمكنك تجربة النسخة المجانية مباشرةً في هذه الصفحة.
1648                        </div>
1649                    </details>
1650
1651                    <details class="bg-white rounded-xl border border-gray-200 shadow-sm group open:sha
1651dow-md transition-all">
1652                        <summary class="flex items-center justify-between px-5 py-4 cursor-pointer font-semibold text-gray-900 list-none text-sm">
1653                            هل يدعم التعرف على الكتابة اليدوية العربية؟
1654                            <i class="fas fa-chevron-down text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 mr-3"></i>
1655                        </summary>
1656                        <div class="px-5 pb-4 text-gray-600 text-sm leading-relaxed">
1657                            نعم. يدعم التطبيق الكتابة اليدوية العربية بأنماطها المختلفة، من ملاحظات الطلاب إلى الخطوط المتصلة والمخطوطات. تم تدريب الذكاء الاصطناعي خصيصاً للتعامل مع التشابك والحروف المتصلة في اللغة العربية.
1658                        </div>
1659                    </details>
1660
1661                    <details class="bg-white rounded-xl border border-gray-200 shadow-sm group open:sha
1661dow-md transition-all">
1662                        <summary class="flex items-center justify-between px-5 py-4 cursor-pointer font-semibold text-gray-900 list-none text-sm">
1663                            ما هي المنصات المدعومة؟
1664                            <i class="fas fa-chevron-down text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 mr-3"></i>
1665                        </summary>
1666                        <div class="px-5 pb-4 text-gray-600 text-sm leading-relaxed">
1667                            Arabic OCR متاح على <strong>iOS</strong> و<strong>Android</strong> و<strong>macOS</strong> و<strong>Windows</strong> وكـ<strong>بوابة ويب</strong> تعمل في أي متصفح. تطبيقات iOS وmacOS وWindows تستخدم نماذج محلية للمعالجة الكاملة دون إنترنت.
1668                        </div>
1669                    </details>
1670
1671                    <details class="bg-white rounded-xl border border-gray-200 shadow-sm group open:shadow-md transition-all">
1672                        <summary class="flex items-center justify-between px-5 py-4 cursor-pointer font-semibold text-gray-900 list-none text-sm">
1673                            هل التطبيق مجاني؟
1674                            <i class="fas fa-chevron-down text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 mr-3"></i>
1675                        </summary>
1676                        <div class="px-5 pb-4 text-gray-600 text-sm leading-relaxed">
1677                            التجربة المجانية أونلاين تتيح مسحاً واحداً يومياً، والتطبيقات مجانية للتحميل. للحصول على صفحات غير محدودة ودعم PDF والتلخيص والترجمة والوصول الكامل للبوابة، راجع <a href="/pricing.html" class="text-blue-600 hover:underline font-medium">خطط الاشتراك</a>.
1678                        </div>
1679                    </details>
1680
1681                    <details class="bg-white rounded-xl border border-gray-200 shadow-sm group open:sha
1681dow-md transition-all">
1682                        <summary class="flex items-center justify-between px-5 py-4 cursor-pointer font-semibold text-gray-900 list-none text-sm">
1683                            ما صيغ الملفات المدعومة؟
1684                            <i class="fas fa-chevron-down text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 mr-3"></i>
1685                        </summary>
1686                        <div class="px-5 pb-4 text-gray-600 text-sm leading-relaxed">
1687                            JPEG وPNG وملفات PDF متعددة الصفحات. يمكنك رفع المستندات الممسوحة، أو صور الكاميرا، أو الملفات المصدّرة من تطبيقات أخرى.
1688                        </div>
1689                    </details>
1690
1691                    <details class="bg-white rounded-xl border border-gray-200 shadow-sm group open:shadow-md transition-all">
1692                        <summary class="flex items-center justify-between px-5 py-4 cursor-pointer font-semibold text-gray-900 list-none text-sm">
1693                            هل بياناتي آمنة وخاصة؟
1694                            <i class="fas fa-chevron-down text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 mr-3"></i>
1695                        </summary>
1696                        <div class="px-5 pb-4 text-gray-600 text-sm leading-relaxed">
1697                            نعم. تطبيقات iOS وmacOS وWindows تعالج المستندات محلياً على جهازك دون رفع أي شيء. البوابة تستخدم HTTPS ولا تحتفظ بمستنداتك على خوادمنا.
1698                        </div>
1699                    </details>
1700
1701                    <details class="bg-white rounded-xl border border-gray-200 shadow-sm group open:sha
1701dow-md transition-all">
1702                        <summary class="flex items-center justify-between px-5 py-4 cursor-pointer font-semibold text-gray-900 list-none text-sm">
1703                            ما اللغات المدعومة؟
1704                            <i class="fas fa-chevron-down text-gray-400 group-open:rotate-180 transition-transform flex-shrink-0 mr-3"></i>
1705                        </summary>
1706                        <div class="px-5 pb-4 text-gray-600 text-sm leading-relaxed">
1707                            محسّن للغة العربية، مع دعم الإنجليزية والمستندات المختلطة عربي–إنجليزي. ميزة الترجمة الذكية في البوابة تترجم النصوص العربية المستخرجة إلى الإنجليزية ولغات أخرى.
1708                        </div>
1709                    </details>
1710                </div>
1711
1712            </div>
1713        </div>
1714    </section>
1715
1716    <!-- FOOTER -->
1717    <footer class="bg-yellow-300 border-t border-yellow-400 py-12">
1718        <div class="max-w-7xl mx-auto px-6 grid md:grid-cols-5 gap-8">
1719            <div class="col-span-2">
1720                <div class="flex items-center space-x-3 mb-6">
1721                    <img src="/logo.png" alt="Logo" class="w-8 h-8">
1722                    <span class="text-xl font-bold text-gray-900">Arabic
1723                        OCR</span>
1724                </div>
1725                <p class="text-gray-800 max-w-sm mb-6">The leading platform for Arabic text recognition and document
1726                    processing. Empowering users with AI-driven insights.</p>
1727                <div class="mb-6 mr-8">
1728                    <h4 class="font-bold text-gray-900 mb-2">Newsletter</h4>
1729                    <form class="flex text-sm">
1730                        <input type="email" placeholder="Enter your email"
1731                            class="px-4 py-2 border border-yellow-400 rounded-l-lg focus:outline-none focus:border-gray-900 flex-grow"
1732                            required>
1733                        <button type="submit"
1734                            class="bg-gray-900 text-white px-4 py-2 rounded-r-lg hover:bg-gray-800 transition">Subscribe</button>
1735                    </form>
1736                </div>
1737                <div class="flex space-x-4">
1738                    <a href="#" class="text-gray-700 hover:text-gray-900 text-xl transition"><i
1739                            class="fab fa-twitter"></i></a>
1740                    <a href="#" class="text-gray-700 hover:text-gray-900 text-xl transition"><i
1741                            class="fab fa-facebook"></i></a>
1742                    <a href="#" class="text-gray-700 hover:text-gray-900 text-xl transition"><i
1743                            class="fab fa-linkedin"></i></a>
1744                </div>
1745            </div>
1746            <div class="text-left">
1747                <h4 class="font-bold text-gray-900 mb-6">Quick Links</h4>
1748                <ul class="space-y-4 text-gray-800 font-medium">
1749                    <li><a href="index.html" class="hover:text-gray-600 transition">Home</a></li>
1750                    <li><a href="portal.html" class="hover:text-gray-600 transition">Web Portal</a></li>
1751                    <li><a href="pdf-studio.html" class="hover:text-gray-600 transition">PDF Studio</a></li>
1752                    <li><a href="pricing.html" class="hover:text-gray-600 transition">Pricing</a></li>
1753                </ul>
1754            </div>
1755            <div class="text-left">
1756                <h4 class="font-bold text-gray-900 mb-6">Resources</h4>
1757                <ul class="space-y-4 text-gray-800 font-medium">
1758                    <li><a href="about.html" class="hover:text-gray-600 transition">About Us</a></li>
1759                    <li><a href="contact.html" class="hover:text-gray-600 transition">Contact</a></li>
1760                    <li><a href="blog.html" class="hover:text-gray-600 transition">Blog</a></li>
1761                    <li><a href="ultimate-guide-arabic-ocr.html" class="hover:text-gray-600 transition">Guide</a></li>
1762                    <li><a href="terms.html" class="hover:text-gray-600 transition">Terms of Use</a></li>
1763                    <li><a href="privacy.html" class="hover:text-gray-600 transition">Privacy Policy</a></li>
1764                </ul>
1765            </div>
1766            <div class="text-left">
1767                <h4 class="font-bold text-gray-900 mb-6">More Apps</h4>
1768                <ul class="space-y-3">
1769                    <li class="flex items-center flex-wrap gap-x-2 gap-y-1">
1770                        <span class="text-gray-900 font-bold">Wand Desktop</span>
1771                        <a href="https://apps.apple.com/us/app/wand-desktop/id6757389093" target="_blank"
1772                            class="text-sm font-medium text-gray-700 hover:text-gray-900"><i
1773                                class="fab fa-apple mr-0.5"></i>Mac</a>
1774                    </li>
1775                    <li class="flex items-center flex-wrap gap-x-2 gap-y-1">
1776                        <span class="text-gray-900 font-bold">Luna AI</span>
1777                        <a href="https://apple.co/4eVku6p" target="_blank"
1778                            class="text-sm font-medium text-gray-700 hover:text-gray-900"><i
1779                                class="fab fa-apple mr-0.5"></i>iOS</a>
1780                        <span class="text-yellow-600 font-bold text-sm">|</span>
1781                        <a href="https://play.google.com/store/apps/details?id=com.kanzati.lunaai" target="_blank"
1782                            class="text-sm font-medium text-gray-700 hover:text-gray-900"><i
1783                                class="fab fa-android mr-0.5"></i>Android</a>
1784                    </li>
1785                    <li class="flex items-center gap-x-2">
1786                        <span class="text-gray-900 font-bold">Arabic OCR</span>
1787                        <a href="https://apps.apple.com/us/app/arabic-ocr/id6745792738" target="_blank"
1788                            class="text-sm font-medium text-gray-700 hover:text-gray-900"><i
1789                                class="fab fa-apple mr-0.5"></i>iOS</a>
1790                        <span class="text-yellow-600 font-bold text-sm">|</span>
1791                        <a href="https://play.google.com/store/apps/details?id=com.kanzati.arabicocr" target="_blank"
1792                            class="text-sm font-medium text-gray-700 hover:text-gray-900"><i
1793                                class="fab fa-android mr-0.5"></i>Android</a>
1794                        <span class="text-yellow-600 font-bold text-sm">|</span>
1795                        <a href="https://apps.microsoft.com/detail/9P2NRS4S8ND6?hl=en-us&amp;gl=US&amp;ocid=pdpshare" target="_blank"
1796                            class="text-sm font-medium text-gray-700 hover:text-gray-900"><i
1797                                class="fab fa-windows mr-0.5"></i>Windows</a>
1798                    </li>
1799                    <li class="flex items-center flex-wrap gap-x-2 gap-y-1">
1800                        <span class="text-gray-900 font-bold">SQL Dump</span>
1801                        <a href="https://apps.apple.com/us/app/sql-dump/id6744847226" target="_blank"
1802                            class="text-sm font-medium text-gray-700 hover:text-gray-900"><i
1803                                class="fab fa-apple mr-0.5"></i>iOS</a>
1804                    </li>
1805                    <li class="flex items-center gap-x-2">
1806                        <span class="text-gray-900 font-bold">Fake Voice</span>
1807                        <a href="https://apps.apple.com/us/app/fake-voice-%D8%A7%D8%B3%D8%AA%D9%86%D8%B3%D8%A7%D8%AE-%D8%A7%D9%84%D8%B5%D9%88%D8%AA/id6740585303"
1808                            target="_blank" class="text-sm font-medium text-gray-700 hover:text-gray-900"><i
1809                                class="fab fa-apple mr-0.5"></i>iOS</a>
1810                        <span class="text-yellow-600 font-bold text-sm">|</span>
1811                        <a href="https://play.google.com/store/apps/details?id=com.kanzati.fakevoice" target="_blank"
1812                            class="text-sm font-medium text-gray-700 hover:text-gray-900"><i
1813                                class="fab fa-android mr-0.5"></i>Android</a>
1814                        <span class="text-yellow-600 font-bold text-sm">|</span>
1815                        <a href="https://apps.microsoft.com/detail/9NSPC75M8L0T?hl=en-us&amp;gl=US" target="_blank"
1816                            class="text-sm font-medium text-gray-700 hover:text-gray-900"><i
1817                                class="fab fa-windows mr-0.5"></i>Windows</a>
1818                    </li>
1819                </ul>
1820            </div>
1821        </div>
1822        <div
1823            class="max-w-7xl mx-auto px-6 border-t border-yellow-400 mt-12 pt-8 text-center text-gray-600 text-sm font-medium">
1824            <p>&copy; 2026 Arabic OCR - Ziad Khazzaka & Co. All rights reserved.</p>
1825        </div>
1826    </footer>
1827
1828    <!-- FAQ SCHEMA -->
1829    
1829<script type="application/ld+json">
1830    {
1831      "@context": "https://schema.org",
1832      "@type": "FAQPage",
1833      "mainEntity": [
1834        {
1835          "@type": "Question",
1836          "name": "What is Arabic OCR?",
1837          "acceptedAnswer": {
1838            "@type": "Answer",
1839            "text": "Arabic OCR (Optical Character Recognition) automatically extracts printed and handwritten Arabic text from images, scanned documents, and PDFs, converting them into editable digital text. It uses advanced AI models — including Google Vision AI and Apple's on-device LLM Vision — to deliver high-accuracy Arabic text recognition across all platforms."
1840          }
1841        },
1842        {
1843          "@type": "Question",
1844          "name": "Can I use Arabic OCR online without downloading an app?",
1845          "acceptedAnswer": {
1846            "@type": "Answer",
1847            "text": "Yes. The Arabic OCR Web Portal at arabic-ocr.com/portal.html lets you upload images and PDFs and extract Arabic text entirely in your browser — no installation required. A free online demo is also available on the homepage."
1848          }
1849        },
1850        {
1851          "@type": "Question",
1852          "name": "Does Arabic OCR support Arabic handwriting recognition?",
1853          "acceptedAnswer": {
1854            "@type": "Answer",
1855            "text": "Yes. Arabic OCR supports Arabic handwriting recognition for a wide range of handwriting styles, from student notes to cursive manuscripts. The AI is trained specifically to handle complex Arabic ligatures and connected letterforms."
1856          }
1857        },
1858        {
1859          "@type": "Question",
1860          "name": "Which platforms and devices are supported?",
1861          "acceptedAnswer": {
1862            "@type": "Answer",
1863            "text": "Arabic OCR is available on iOS, Android, macOS, Windows, and as a Web Portal that works in any browser. The iOS and macOS apps use Apple's on-device LLM Vision for fully offline processing. The Windows app runs a local on-device model. The Web Portal processes documents securely in the cloud."
1864          }
1865        },
1866        {
1867          "@type": "Question",
1868          "name": "Is Arabic OCR free?",
1869          "acceptedAnswer": {
1870            "@type": "Answer",
1871            "text": "You can try the online demo for free (1 scan per day). The mobile apps are free to download. For unlimited OCR pages, PDF support, AI Summarize, AI Translate, and full Web Portal access, subscription plans are available at arabic-ocr.com/pricing.html."
1872          }
1873        },
1874        {
1875          "@type": "Question",
1876          "name": "What image and file formats does Arabic OCR support?",
1877          "acceptedAnswer": {
1878            "@type": "Answer",
1879            "text": "Arabic OCR supports JPEG, PNG, and multi-page PDF files. You can upload scanned documents, photos taken with your camera, or export files from other apps."
1880          }
1881        },
1882        {
1883          "@type": "Question",
1884          "name": "Is my data private and secure?",
1885          "acceptedAnswer": {
1886            "@type": "Answer",
1887            "text": "Yes. The iOS, macOS, and Windows apps process documents entirely on your device — no data is uploaded. The Web Portal transmits your file securely over HTTPS for processing and does not store your documents on our servers. No data is shared with third parties."
1888          }
1889        },
1890        {
1891          "@type": "Question",
1892          "name": "What languages does Arabic OCR support?",
1893          "acceptedAnswer": {
1894            "@type": "Answer",
1895            "text": "Arabic OCR is optimized for Arabic text extraction, and also handles English and mixed Arabic-English documents. The AI Translate feature in the Web Portal can translate extracted Arabic text into English and other languages."
1896          }
1897        }
1898      ]
1899    }
1900    </script>
1900
1901
1902    <!-- APP SCHEMAS: iOS + Android + macOS + WebApp (for Google App Rich Results) -->
1903    
1903<script type="application/ld+json">
1904    {
1905      "@context": "https://schema.org",
1906      "@graph": [
1907        {
1908          "@type": "SoftwareApplication",
1909          "name": "Arabic OCR",
1910          "operatingSystem": "IOS",
1911          "applicationCategory": "UtilitiesApplication",
1912          "applicationSubCategory": "OCR & Text Recognition",
1913          "url": "https://apps.apple.com/app/id6745792738",
1914          "downloadUrl": "https://apps.apple.com/app/id6745792738",
1915          "installUrl": "https://apps.apple.com/app/id6745792738",
1916          "image": "https://arabic-ocr.com/icon.png",
1917          "screenshot": [
1918            "https://arabic-ocr.com/sc1.webp",
1919            "https://arabic-ocr.com/sc2.webp",
1920            "https://arabic-ocr.com/sc3.webp"
1921          ],
1922          "description": "Extract printed and handwritten Arabic text from images and PDFs using advanced AI. Uses Apple's on-device LLM Vision for offline, fully private OCR. Supports Arabic, Urdu, and Persian.",
1923          "featureList": "Arabic OCR, Handwriting Recognition, PDF Export, Apple Local LLM Vision, Offline Mode, 100% Private Processing, Arabic Text Extraction",
1924          "softwareVersion": "3.7",
1925          "datePublished": "2023-01-01",
1926          "inLanguage": ["ar", "en"],
1927          "aggregateRating": {
1928            "@type": "AggregateRating",
1929            "ratingValue": "4.8",
1930            "ratingCount": "2500",
1931            "bestRating": "5",
1932            "worstRating": "1"
1933          },
1934          "offers": {
1935            "@type": "Offer",
1936            "price": "0",
1937            "priceCurrency": "USD",
1938            "availability": "https://schema.org/InStock",
1939            "category": "free"
1940          },
1941          "author": {
1942            "@type": "Person",
1943            "name": "Ziad Khazzaka"
1944          },
1945          "publisher": {
1946            "@id": "https://www.kanzati.com"
1947          }
1948        },
1949        {
1950          "@type": "SoftwareApplication",
1951          "name": "Arabic OCR",
1952          "operatingSystem": "ANDROID",
1953          "applicationCategory": "UtilitiesApplication",
1954          "applicationSubCategory": "OCR & Text Recognition",
1955          "url": "https://play.google.com/store/apps/details?id=com.kanzati.arabicocr",
1956          "downloadUrl": "https://play.google.com/store/apps/details?id=com.kanzati.arabicocr",
1957          "installUrl": "https://play.google.com/store/apps/details?id=com.kanzati.arabicocr",
1958          "image": "https://arabic-ocr.com/icon.png",
1959          "screenshot": [
1960            "https://arabic-ocr.com/sc1.webp",
1961            "https://arabic-ocr.com/sc2.webp",
1962            "https://arabic-ocr.com/sc3.webp"
1963          ],
1964          "description": "Extract printed and handwritten Arabic text from images and PDFs using advanced AI. Supports Arabic, Urdu, and Persian. Works offline.",
1965          "featureList": "Arabic OCR, Handwriting Recognition, PDF Export, Offline Mode, Arabic Text Extraction",
1966          "softwareVersion": "3.4",
1967          "datePublished": "2023-01-01",
1968          "aggregateRating": {
1969            "@type": "AggregateRating",
1970            "ratingValue": "4.8",
1971            "ratingCount": "2500",
1972            "bestRating": "5",
1973            "worstRating": "1"
1974          },
1975          "offers": {
1976            "@type": "Offer",
1977            "price": "0",
1978            "priceCurrency": "USD",
1979            "availability": "https://schema.org/InStock",
1980            "category": "free"
1981          },
1982          "author": {
1983            "@type": "Person",
1984            "name": "Ziad Khazzaka"
1985          },
1986          "publisher": {
1987            "@id": "https://www.kanzati.com"
1988          }
1989        },
1990        {
1991          "@type": "SoftwareApplication",
1992          "name": "Arabic OCR",
1993          "operatingSystem": "MACOS",
1994          "applicationCategory": "UtilitiesApplication",
1995          "applicationSubCategory": "OCR & Text Recognition",
1996          "url": "https://apps.apple.com/us/app/arabic-ocr/id6745792738",
1997          "downloadUrl": "https://apps.apple.com/us/app/arabic-ocr/id6745792738",
1998          "installUrl": "https://apps.apple.com/us/app/arabic-ocr/id6745792738",
1999          "image": "https://arabic-ocr.com/icon.png",
2000          "screenshot": [
2001            "https://arabic-ocr.com/mac1.webp",
2002            "https://arabic-ocr.com/mac2.webp"
2003          ],
2004          "description": "Native macOS app for extracting Arabic text from images and PDFs. Uses Apple's on-device LLM Vision, so documents are processed offline and never leave your Mac.",
2005          "featureList": "Arabic OCR, Handwriting Recognition, PDF Export, Apple Local LLM Vision, Offline Mode, 100% Private Processing, Native macOS Integration",
2006          "softwareVersion": "3.7",
2007          "inLanguage": ["ar", "en"],
2008          "aggregateRating": {
2009            "@type": "AggregateRating",
2010            "ratingValue": "4.8",
2011            "ratingCount": "2500",
2012            "bestRating": "5",
2013            "worstRating": "1"
2014          },
2015          "offers": {
2016            "@type": "Offer",
2017            "price": "9.99",
2018            "priceCurrency": "USD",
2019            "availability": "https://schema.org/InStock"
2020          },
2021          "author": {
2022            "@type": "Person",
2023            "name": "Ziad Khazzaka"
2024          },
2025          "publisher": {
2026            "@id": "https://www.kanzati.com"
2027          }
2028        },
2029        {
2030          "@type": "SoftwareApplication",
2031          "name": "Arabic OCR",
2032          "operatingSystem": "WINDOWS",
2033          "applicationCategory": "UtilitiesApplication",
2034          "applicationSubCategory": "OCR & Text Recognition",
2035          "url": "https://apps.microsoft.com/detail/9P2NRS4S8ND6",
2036          "downloadUrl": "https://apps.microsoft.com/detail/9P2NRS4S8ND6",
2037          "installUrl": "https://apps.microsoft.com/detail/9P2NRS4S8ND6",
2038          "image": "https://arabic-ocr.com/icon.png",
2039          "screenshot": [
2040            "https://arabic-ocr.com/win1.jpg",
2041            "https://arabic-ocr.com/win2.jpg",
2042            "https://arabic-ocr.com/win3.jpg",
2043            "https://arabic-ocr.com/win4.jpg"
2044          ],
2045          "description": "Native Windows app for extracting printed and handwritten Arabic text from images and PDFs. Runs a local on-device OCR model, so your files are never uploaded — 100% private and works offline. Available on the Microsoft Store.",
2046          "featureList": "Arabic OCR, Handwriting Recognition, PDF Export, Local On-Device Model, Offline Mode, 100% Private Processing, Native Windows Integration, Arabic Text Extraction",
2047          "softwareVersion": "1.0.2",
2048          "softwareRequirements": "Windows 10 version 14316.0 or higher",
2049          "datePublished": "2026-07-30",
2050          "inLanguage": ["ar", "en"],
2051          "offers": {
2052            "@type": "Offer",
2053            "price": "0",
2054            "priceCurrency": "USD",
2055            "availability": "https://schema.org/InStock",
2056            "category": "free"
2057          },
2058          "author": {
2059            "@type": "Person",
2060            "name": "Ziad Khazzaka",
2061            "sameAs": "https://www.linkedin.com/in/ziad-khazzaka-788526362"
2062          },
2063          "publisher": {
2064            "@id": "https://www.kanzati.com"
2065          }
2066        },
2067        {
2068          "@type": "WebApplication",
2069          "name": "Arabic OCR – Web Portal",
2070          "url": "https://arabic-ocr.com/portal.html",
2071          "applicationCategory": "UtilitiesApplication",
2072          "browserRequirements": "Requires a modern web browser",
2073          "description": "Online Arabic OCR portal. Upload images and PDFs to extract Arabic text instantly, no app install required.",
2074          "featureList": "Online Arabic OCR, PDF to Text, Image to Text, Arabic Text Editor, Multiple Font Support",
2075          "offers": {
2076            "@type": "Offer",
2077            "price": "0",
2078            "priceCurrency": "USD",
2079            "category": "free"
2080          },
2081          "publisher": {
2082            "@id": "https://www.kanzati.com"
2083          }
2084        }
2085      ]
2086    }
2087    </script>
2087
2088
2089    <!--
2090        Firebase is initialized once, by the modular v10 SDK in firebase-analytics.js.
2091        This page previously ALSO loaded the v8 compat SDK and called
2092        firebase.initializeApp() against the same measurement ID, which made every
2093        auto-collected event (page_view, session_start, first_visit) fire twice and
2094        roughly doubled reported homepage traffic. The compat SDK is gone.
2095
2096        The logDownload()/logCrossPromo() globals that lived here are gone too:
2097        download clicks are now tracked by listeners in the module script above,
2098        which avoids relying on a global being defined before the user can click.
2099    -->
2100
2101    
2101<script type="module">
2102        import { loadHomepagePosts } from './js/blog.js';
2103        document.addEventListener('DOMContentLoaded', () => {
2104            loadHomepagePosts();
2105        });
2106    </script>
2106
2107</body>
2108
2109</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.