<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="monetag" content="05435a83d77fa583733fce09c5845d47">
<title>e-moh.com — أدوات مجانية، أخبار تقنية، القرآن والأذكار</title>
<meta name="description" content="موقع عربي متكامل يجمع الأدوات المجانية، الأخبار التقنية، القرآن الكريم، الأذكار، وصفحات محتوى تساعد الزائر على اكتشاف أدوات ومقالات مفيدة بسهولة.">
<meta name="keywords" content="أخبار تقنية, أدوات مجانية, أدوات أونلاين, ذكاء اصطناعي, القرآن, الأذكار, موقع عربي">
<meta name="robots" content="index,follow">
<link rel="canonical" href="https://e-moh.com/">
<meta property="og:title" content="e-moh.com — أدوات مجانية وأخبار تقنية بالعربي">
<meta property="og:description" content="أدوات مجانية، صفحات عربية مفيدة، أخبار تقنية، القرآن الكريم، والأذكار في موقع واحد.">
<meta property="og:url" content="https://e-moh.com/">
<meta property="og:type" content="website">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#07111f">
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07111f;
  --bg-soft:#0d1b2d;
  --panel:#0d1726;
  --panel-2:#111f34;
  --card:#f8fbff;
  --line:#1d3551;
  --line-soft:#d7e5f4;
  --text:#e8f2ff;
  --text-dark:#0f172a;
  --muted:#8aa1bb;
  --muted-dark:#5f7288;
  --accent:#34d3ff;
  --accent-2:#1d4ed8;
  --glow:0 18px 45px rgba(5,13,25,.35);
}
body{
  font-family:Arial,sans-serif;
  background:
    radial-gradient(circle at top right, rgba(52,211,255,.10), transparent 24%),
    radial-gradient(circle at top left, rgba(29,78,216,.16), transparent 28%),
    linear-gradient(180deg,#07111f 0%,#0b1627 30%,#eef4fb 30%,#f7fbff 100%);
  color:var(--text-dark);
}
a{text-decoration:none}
.wrap{max-width:1180px;margin:auto;padding:0 18px}
header{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(12px);
  background:rgba(7,17,31,.78);
  border-bottom:1px solid rgba(138,161,187,.18);
}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:18px 0;
}
.brand{
  color:var(--text);
  font-size:1.55rem;
  font-weight:800;
  letter-spacing:-.02em;
}
.brand small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:.9rem;
  font-weight:400;
}
nav{display:flex;gap:10px;flex-wrap:wrap}
.nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  border:1px solid rgba(138,161,187,.18);
  font-weight:700;
  transition:.22s ease;
}
.nav-link:hover{background:var(--accent);color:#07111f;border-color:var(--accent)}
main{padding-bottom:48px}
.hero{
  padding:28px 0 20px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.4fr .92fr;
  gap:18px;
}
.hero-card,.side-card,.news-card,.feature-card,.action-card,.media-card{
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--glow);
}
.hero-card{
  position:relative;
  color:var(--text);
  background:
    linear-gradient(140deg, rgba(52,211,255,.12), rgba(29,78,216,.18)),
    linear-gradient(135deg,#081322,#10213a 52%,#0d1b2d 100%);
  border:1px solid rgba(138,161,187,.18);
  padding:30px;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.75),transparent 75%);
  pointer-events:none;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(52,211,255,.12);
  color:#8ceaff;
  border:1px solid rgba(52,211,255,.25);
  font-size:.84rem;
  font-weight:700;
}
.hero-card h1{
  position:relative;
  font-size:2.35rem;
  line-height:1.35;
  margin-bottom:14px;
}
.hero-card p{
  position:relative;
  color:#b6c9df;
  line-height:1.95;
  margin-bottom:18px;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;position:relative}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  border-radius:14px;
  font-weight:800;
}
.btn-primary{background:linear-gradient(135deg,var(--accent),#58f0ff);color:#07111f}
.btn-secondary{background:rgba(255,255,255,.05);color:var(--text);border:1px solid rgba(138,161,187,.22)}
.badges{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;position:relative}
.badge{
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(138,161,187,.18);
  color:#d8e8fb;
  font-size:.84rem;
}
.side-stack{display:grid;gap:18px}
.side-card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  color:var(--text);
  border:1px solid rgba(138,161,187,.16);
  padding:22px;
}
.side-card h2{font-size:1.12rem;margin-bottom:10px}
.side-card p{color:#a8bdd4;line-height:1.9}
.links{display:grid;gap:10px;margin-top:14px}
.mini-link{
  display:block;
  padding:13px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(138,161,187,.14);
  color:var(--text);
  font-weight:700;
}
.mini-link small{display:block;color:#92abc4;font-weight:400;margin-top:5px;line-height:1.7}
.section{margin-top:26px}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:16px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.section-head h2{font-size:1.55rem;color:#081322}
.section-head p{color:var(--muted-dark);max-width:720px;line-height:1.85}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.news-card{
  background:linear-gradient(180deg,#ffffff,#f4f9ff);
  border:1px solid var(--line-soft);
  padding:22px;
}
.news-card h3{
  font-size:1.15rem;
  line-height:1.75;
  margin-bottom:10px;
}
.news-card p{color:var(--muted-dark);line-height:1.95}
.news-card a{color:#081322}
.tag{
  display:inline-block;
  margin-bottom:12px;
  padding:6px 11px;
  border-radius:999px;
  background:#e0f7ff;
  color:#0369a1;
  font-size:.8rem;
  font-weight:800;
}
.feature-card{
  background:#fff;
  border:1px solid var(--line-soft);
  padding:22px;
}
.feature-card h3{font-size:1.08rem;line-height:1.7;margin-bottom:10px}
.feature-card a{color:#081322}
.feature-card p{color:var(--muted-dark);line-height:1.9}
.prayer-grid,.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.action-card{
  background:#fff;
  border:1px solid var(--line-soft);
  padding:22px;
  text-align:center;
}
.action-card strong{display:block;font-size:1.08rem;color:#081322;margin-bottom:8px}
.action-card span{color:var(--muted-dark);line-height:1.85}
.action-card:hover,.news-card:hover,.feature-card:hover,.media-card:hover{transform:translateY(-2px)}
.media-grid{grid-template-columns:repeat(2,1fr)}
.media-card{
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:1px solid var(--line-soft);
  padding:20px;
  text-align:center;
  transition:.2s ease;
}
.media-card img{
  width:100%;
  max-height:320px;
  object-fit:cover;
  border-radius:20px;
  border:3px solid #dbe7f5;
}
.media-card h3{margin-bottom:12px;color:#081322}
.live-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.live-panel{
  background:linear-gradient(180deg,#ffffff,#f4f9ff);
  border:1px solid var(--line-soft);
  border-radius:28px;
  padding:22px;
  box-shadow:var(--glow);
}
.live-panel.dark{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border-color:rgba(138,161,187,.16);
  color:var(--text);
}
.live-panel.dark h2,.live-panel.dark p,.live-panel.dark a{color:var(--text)}
.live-list{display:grid;gap:14px}
.live-item{
  display:block;
  padding:16px 17px;
  border-radius:20px;
  background:rgba(255,255,255,.72);
  border:1px solid #dbe7f5;
  transition:.22s ease;
}
.dark .live-item{
  background:rgba(255,255,255,.04);
  border-color:rgba(138,161,187,.14);
}
.live-item:hover{transform:translateY(-2px);border-color:#93c5fd}
.live-item strong{
  display:block;
  font-size:1rem;
  line-height:1.8;
  margin-bottom:8px;
  color:#081322;
}
.dark .live-item strong{color:#eef5ff}
.live-item span{
  display:block;
  color:var(--muted-dark);
  line-height:1.85;
}
.dark .live-item span{color:#a8bdd4}
.live-feature{
  padding:20px;
  border-radius:24px;
  background:linear-gradient(135deg,#081322,#10213a 55%,#0d1b2d);
  border:1px solid rgba(138,161,187,.16);
  color:var(--text);
}
.live-feature .tag{background:rgba(52,211,255,.12);color:#9eeeff}
.live-feature h3{font-size:1.35rem;line-height:1.7;margin-bottom:10px}
.live-feature p{color:#c4d5e8;line-height:1.9}
.status-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.status-pill{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(138,161,187,.16);
  color:#d7e9fb;
  font-size:.84rem;
}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.show{opacity:1;transform:none}
.ticker{
  margin-top:20px;
  padding:14px 18px;
  border-radius:18px;
  background:linear-gradient(90deg,#07111f,#0d1b2d);
  border:1px solid rgba(138,161,187,.14);
  color:#cfe5fb;
  display:flex;
  gap:16px;
  overflow:auto;
  white-space:nowrap;
}
.ticker span{color:#58f0ff;font-weight:800}
footer{text-align:center;color:#6a7d93;padding:30px 16px}
@media (max-width:980px){
  .hero-grid,.grid-3,.grid-4,.prayer-grid,.media-grid,.live-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .hero-grid,.grid-3,.grid-4,.prayer-grid,.media-grid,.live-grid{grid-template-columns:1fr}
  .hero-card h1{font-size:1.8rem}
  .topbar{justify-content:center;text-align:center}
}
</style>
</head>
<body>
<header>
  <div class="wrap topbar">
    <div class="brand">e-moh.com<small>منصة عربية للأدوات والمحتوى والأخبار التقنية</small></div>
    <nav>
      <a href="/tools" class="nav-link">الأدوات</a>
      <a href="/tech/" class="nav-link">أخبار التقنية</a>
      <a href="/live.html" class="nav-link">المباشر</a>
      <a href="/news-radar.html" class="nav-link">رادار الأخبار</a>
      <a href="/arabic/" class="nav-link">المحتوى العربي</a>
      <a href="/apple/" class="nav-link">أخبار آبل</a>
      <a href="/en/start-here.html" class="nav-link">النسخة الإنجليزية</a>
      <a href="/quran.html" class="nav-link">القرآن</a>
    </nav>
  </div>
</header>

<main class="wrap">
  <section class="hero">
    <div class="hero-grid">
      <div class="hero-card">
        <div class="kicker">منصة تقنية عربية</div>
        <h1>واجهة عربية أجمل تجمع الأخبار التقنية والأدوات والمحتوى العملي في مكان واحد</h1>
        <p>اكتشف آخر الأخبار التقنية، أدوات مفيدة للاستخدام اليومي، وصفحات عربية عملية في واجهة واحدة واضحة وسريعة.</p>
        <div class="hero-actions">
          <a href="/live.html" class="btn btn-primary">افتح المباشر</a>
          <a href="/news-radar.html" class="btn btn-secondary">آخر الأخبار الآن</a>
          <a href="/tech/" class="btn btn-secondary">تصفح أخبار التقنية</a>
          <a href="/tools" class="btn btn-secondary">افتح الأدوات</a>
        </div>
        <div class="badges">
          <span class="badge">أخبار تقنية</span>
          <span class="badge">محتوى عربي</span>
          <span class="badge">أدوات مجانية</span>
          <span class="badge">بدون تسجيل</span>
        </div>
        <div class="ticker">
          <div><span>تقنية:</span> صفحات عربية مخصصة للذكاء الاصطناعي والعمل الرقمي</div>
          <div><span>أدوات:</span> بوابة مباشرة للأدوات اليومية والحسابات</div>
          <div><span>محتوى:</span> مقالات وأدوات وروابط داخلية تساعدك تكمل التصفح</div>
        </div>
      </div>
      <div class="side-stack">
        <div class="side-card">
          <h2>ماذا ستجد هنا</h2>
          <p>واجهة تجمع الأخبار التقنية، أدوات مفيدة، وصفحات عربية عملية بروابط واضحة للوصول السريع إلى أهم الأقسام.</p>
        </div>
        <div class="side-card">
          <h2>ابدأ من هنا</h2>
          <div class="links">
            <a class="mini-link" href="/tech/">أخبار التقنية بالعربي<small>الواجهة الأساسية للمحتوى التقني والموضوعات الجديدة</small></a>
            <a class="mini-link" href="/ai-tools-ar.html">أدوات الذكاء الاصطناعي بالعربي<small>صفحة عربية تربط التقنية بالاستخدام العملي اليومي</small></a>
            <a class="mini-link" href="/digital-productivity-ar.html">الإنتاجية والعمل الرقمي<small>صفحات مفيدة للطلاب والمستقلين وصناع المحتوى</small></a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="section-head">
      <div>
        <h2>الآن على الموقع</h2>
        <p>ابدأ من هنا لرؤية أحدث أخبار آبل والتقنية وروابط سريعة إلى أهم الأقسام.</p>
      </div>
    </div>
    <div class="live-grid">
      <div class="live-panel reveal">
        <div class="live-feature" id="appleFeature">
          <span class="tag">آبل الآن</span>
          <h3><a href="/apple/" style="color:inherit">جاري تحميل أحدث خبر من آبل...</a></h3>
          <p>تظهر هنا أحدث التحديثات الرسمية من قسم آبل مع رابط مباشر إلى صفحة الخبر الداخلية.</p>
          <div class="status-row">
            <span class="status-pill">قسم آبل حي</span>
            <span class="status-pill">صفحات خبر داخلية</span>
            <span class="status-pill">محتوى عربي</span>
          </div>
        </div>
      </div>
      <div class="live-panel dark reveal">
        <h2>آخر أخبار التقنية</h2>
        <p style="color:#a8bdd4;margin-bottom:14px">أحدث الأخبار التقنية تظهر هنا مع روابط مباشرة إلى الصفحات الداخلية.</p>
        <div class="live-list" id="techLiveList">
          <a class="live-item" href="/tech/"><strong>جاري تحميل الأخبار...</strong><span>يتم جلب آخر الأخبار من قسم التقنية.</span></a>
        </div>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="section-head">
      <div>
        <h2>اللغات والمحتوى</h2>
        <p>اختر القسم المناسب لك: محتوى عربي، أدوات وصفحات إنجليزية، أو أقسام تقنية محدثة.</p>
      </div>
    </div>
    <div class="grid-3">
      <article class="news-card">
        <span class="tag">عربي</span>
        <h3><a href="/arabic/">بوابة المحتوى العربي</a></h3>
        <p>صفحة تجمع التقنية وآبل والأدوات والقرآن والأذكار وباقي المسارات العربية بشكل نظيف.</p>
      </article>
      <article class="news-card">
        <span class="tag">الإنجليزية</span>
        <h3><a href="/en/start-here.html">بوابة المحتوى الإنجليزي</a></h3>
        <p>مدخل مرتب للأدوات والصفحات والمحتوى الطويل والأقسام الأساسية في النسخة الإنجليزية.</p>
      </article>
      <article class="news-card">
        <span class="tag">ثنائي اللغة</span>
        <h3><a href="/tech/">تقنية بالعربي مع ربط بالإنجليزية</a></h3>
        <p>قسم التقنية أصبح جزءًا من هيكلة أوضح تربط العربي بالإنجليزية وآبل والأدوات.</p>
      </article>
    </div>
  </section>

  <section class="section">
    <div class="section-head">
      <div>
        <h2>أخبار Apple في الواجهة</h2>
        <p>آخر أخبار آبل الرسمية تظهر هنا مع روابط مباشرة إلى صفحات الخبر داخل الموقع.</p>
      </div>
      <a href="/apple/" class="btn btn-secondary">عرض كل أخبار آبل</a>
    </div>
    <div class="grid-3" id="appleHomeGrid">
      <article class="news-card">
        <span class="tag">آبل</span>
        <h3><a href="/apple/">جاري تحميل أخبار آبل...</a></h3>
        <p>سيظهر هنا أحدث محتوى آبل من القسم الديناميكي.</p>
      </article>
    </div>
  </section>

  <section class="section">
    <div class="section-head">
      <div>
        <h2>أخبار تقنية بالعربي</h2>
        <p>قسم حي في الصفحة الرئيسية يعرض آخر قصص التقنية العربية مباشرة من `/tech/`.</p>
      </div>
      <a href="/tech/" class="btn btn-secondary">عرض كل الصفحات التقنية</a>
    </div>
    <div class="grid-3" id="techHomeGrid">
      <article class="news-card">
        <span class="tag">تقنية</span>
        <h3><a href="/tech/">جاري تحميل أخبار التقنية...</a></h3>
        <p>سيظهر هنا أحدث ما تم نشره في قسم التقنية.</p>
      </article>
    </div>
  </section>

  <section class="section">
    <div class="section-head">
      <div>
        <h2>مسارات محتوى عربية</h2>
        <p>اختر من هذه المسارات للوصول إلى العمل عن بعد، الأمان الرقمي، المشاريع الصغيرة، والمقالات الإنجليزية.</p>
      </div>
    </div>
    <div class="grid-4">
      <article class="feature-card"><h3><a href="/remote-work-ar.html">أدوات العمل عن بعد بالعربي</a></h3><p>محتوى يخدم الاجتماعات والتنظيم والملفات والعمل المرن من أي جهاز.</p></article>
      <article class="feature-card"><h3><a href="/cyber-safety-ar.html">الأمان الرقمي والحماية</a></h3><p>مسار عربي مهم للروابط وكلمات المرور والخصوصية الرقمية.</p></article>
      <article class="feature-card"><h3><a href="/small-business-ar.html">أدوات رقمية للمشاريع الصغيرة</a></h3><p>واجهة عملية لأصحاب المشاريع والخدمات والحسابات السريعة.</p></article>
      <article class="feature-card"><h3><a href="/en/insights/index.html">المقالات والتحليلات</a></h3><p>قسم المقالات المنشورة والمتجددة، ويمكن لاحقًا توسيعه وربطه أكثر.</p></article>
    </div>
  </section>

  <section class="section">
    <div class="section-head">
      <div>
        <h2>خدمات ثابتة تجلب العودة</h2>
        <p>هذه الخدمات تناسب الاستخدام اليومي أو المتكرر، من أوقات الصلاة إلى الأدوات العملية والاختبارات.</p>
      </div>
    </div>
    <div class="prayer-grid">
      <a href="./tools/prayer.html" class="action-card"><strong>أوقات الصلاة</strong><span>خدمة يومية سريعة تجعل العودة للموقع أسهل.</span></a>
      <a href="./adhkar/" class="action-card"><strong>الأذكار</strong><span>أذكار يومية مرتبة وسهلة الوصول من الجوال أو المتصفح.</span></a>
      <a href="./quran.html" class="action-card"><strong>القرآن الكريم</strong><span>واجهة قراءة واستماع للقرآن الكريم مع وصول سريع من الصفحة الرئيسية.</span></a>
      <a href="/ai-tools-ar.html" class="action-card"><strong>مركز أدوات الذكاء الاصطناعي المجانية</strong><span>صفحة تجمع مولدات الذكاء الاصطناعي العملية في الكتابة والدراسة وصناعة المحتوى.</span></a>
      <a href="/feeds.html" class="action-card"><strong>تابع الموقع عبر خلاصات RSS</strong><span>روابط RSS وFeedly وInoreader للوصول السريع إلى التحديثات.</span></a>
      <a href="/iphone-battery-health-ar.html" class="action-card"><strong>حاسبة بطارية آيفون</strong><span>أداة عملية لتقدير حالة البطارية وتنظيف مساحة التخزين.</span></a>
      <a href="/social-caption-hashtag-ar.html" class="action-card"><strong>مولد كابشن وهاشتاقات</strong><span>أداة سوشيال ترند لصناعة كابشن سريع وهاشتاقات مناسبة.</span></a>
      <a href="/ai-image-prompt-builder-ar.html" class="action-card"><strong>مولد برومبت صور بالذكاء الاصطناعي</strong><span>ابنِ برومبت صور جاهز مع الأسلوب والإضاءة والأبعاد.</span></a>
      <a href="/ai-email-reply-generator-ar.html" class="action-card"><strong>مولد ردود الإيميل بالذكاء الاصطناعي</strong><span>اكتب ردود إيميل مرتبة بسرعة وبدون تسجيل.</span></a>
      <a href="/ai-resume-bullet-generator-ar.html" class="action-card"><strong>مولد نقاط السيرة الذاتية بالذكاء الاصطناعي</strong><span>حوّل الخبرات إلى نقاط سيرة ذاتية واضحة وقابلة للنسخ.</span></a>
      <a href="/ai-product-description-generator-ar.html" class="action-card"><strong>مولد وصف المنتجات بالذكاء الاصطناعي</strong><span>وصف سريع للمتاجر والمنتجات والسوشيال.</span></a>
      <a href="/ai-study-plan-generator-ar.html" class="action-card"><strong>مولد خطة مذاكرة بالذكاء الاصطناعي</strong><span>خطة مذاكرة بسيطة حسب هدفك والوقت المتاح.</span></a>
      <a href="/iq-test-ar.html" class="action-card"><strong>اختبار IQ عربي</strong><span>3000 سؤال عربي مع مؤقت، شهادة نتيجة، حفظ التقدم، ومراجعة الأخطاء.</span></a>
      <a href="/tools" class="action-card"><strong>الأدوات</strong><span>مجموعة أدوات مجانية للحسابات والتنظيم والملفات والمهام اليومية.</span></a>
    </div>
  </section>

  <section class="section">
    <div class="section-head">
      <div>
        <h2>وسائط ومحتوى دائم</h2>
        <p>المنصة التقنية الجميلة تحتاج محتوى حيًا، وخدمات ثابتة، ولمسات بصرية واضحة.</p>
      </div>
    </div>
    <div class="media-grid">
      <div class="media-card">
        <h3>تطبيقاتك على App Store</h3>
        <a href="https://apps.apple.com/sa/developer/khalid-alzughaibi/id1108044063" target="_blank" rel="noopener">
          <img src="apple-icon.png" alt="Apple App Store">
        </a>
      </div>
      <div class="media-card">
        <h3>واجهة القرآن الكريم</h3>
        <a href="./quran.html" target="_blank" rel="noopener">
          <img src="ab67616100005174fca0f39b29e35254b5664e98.jpg" alt="Quran">
        </a>
      </div>
    </div>
  </section>
</main>

<footer>
  <p>© 2026 e-moh.com — منصة عربية تجمع الأدوات والمحتوى والأخبار التقنية.</p>
</footer>

<script src="/js/growth.js" defer></script>
<script>
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) entry.target.classList.add("show");
  });
}, { threshold: 0.12 });
document.querySelectorAll(".reveal").forEach((el, index) => {
  el.style.transitionDelay = (index * 60) + "ms";
  observer.observe(el);
});

const escapeHtmlClient = (value = "") => String(value)
  .replace(/&/g, "&amp;")
  .replace(/</g, "&lt;")
  .replace(/>/g, "&gt;")
  .replace(/"/g, "&quot;")
  .replace(/'/g, "&#39;");

const makeNewsCard = (item, tag = "خبر") =>
  '<article class="news-card reveal">' +
    '<span class="tag">' + escapeHtmlClient(tag) + '</span>' +
    '<h3><a href="' + escapeHtmlClient(item.pageUrl || "#") + '">' + escapeHtmlClient(item.arabicTitle || "خبر جديد") + '</a></h3>' +
    '<p>' + escapeHtmlClient(item.arabicSummary || "ملخص عربي قريبًا.") + '</p>' +
  '</article>';

const makeLiveItem = (item) =>
  '<a class="live-item reveal" href="' + escapeHtmlClient(item.pageUrl || "#") + '">' +
    '<strong>' + escapeHtmlClient(item.arabicTitle || "خبر جديد") + '</strong>' +
    '<span>' + escapeHtmlClient(item.arabicSummary || "ملخص عربي قريبًا.") + '</span>' +
  '</a>';

const refreshReveal = () => {
  document.querySelectorAll(".reveal").forEach((el, index) => {
    if (el.dataset.observed) return;
    el.dataset.observed = "1";
    el.style.transitionDelay = (index * 60) + "ms";
    observer.observe(el);
  });
};

Promise.all([
  fetch('/api/apple/news').then((res) => res.json()).catch(() => ({ items: [] })),
  fetch('/api/tech/news').then((res) => res.json()).catch(() => ({ items: [] }))
]).then(([appleData, techData]) => {
  const appleItems = Array.isArray(appleData.items) ? appleData.items.slice(0, 4) : [];
  const techItems = Array.isArray(techData.items) ? techData.items.slice(0, 6) : [];

  const appleFeature = document.getElementById('appleFeature');
  if (appleFeature && appleItems[0]) {
    appleFeature.innerHTML =
      '<span class="tag">آبل الآن</span>' +
      '<h3><a href="' + escapeHtmlClient(appleItems[0].pageUrl || '/apple/') + '" style="color:inherit">' + escapeHtmlClient(appleItems[0].arabicTitle || 'أحدث خبر من آبل') + '</a></h3>' +
      '<p>' + escapeHtmlClient(appleItems[0].arabicSummary || 'ملخص عربي لأحدث أخبار آبل.') + '</p>' +
      '<div class="status-row">' +
        '<span class="status-pill">قسم آبل حي</span>' +
        '<span class="status-pill">صفحات خبر داخلية</span>' +
        '<span class="status-pill">محتوى عربي</span>' +
      '</div>';
  }

  const appleGrid = document.getElementById('appleHomeGrid');
  if (appleGrid && appleItems.length) {
    appleGrid.innerHTML = appleItems.map((item) => makeNewsCard(item, 'Apple')).join('');
  }

  const techGrid = document.getElementById('techHomeGrid');
  if (techGrid && techItems.length) {
    techGrid.innerHTML = techItems.map((item) => makeNewsCard(item, item.categoryLabel || 'تقنية')).join('');
  }

  const techLiveList = document.getElementById('techLiveList');
  if (techLiveList && techItems.length) {
    techLiveList.innerHTML = techItems.slice(0, 4).map(makeLiveItem).join('');
  }

  refreshReveal();
});
</script>
</body>
</html>
