174 lines
21 KiB
HTML
174 lines
21 KiB
HTML
<!doctype html>
|
||
<html lang="ar" dir="rtl">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>MapSaaS | البنية الوطنية لخدمات الخرائط</title>
|
||
<meta name="description" content="عرض تنفيذي لمنصة MapSaaS: خرائط، ملاحة، بيانات حركة محكومة، وخدمات موقع وطنية.">
|
||
<style>
|
||
:root { --ink:#071226; --ink-2:#0d1c36; --blue:#2896ee; --cyan:#35d4cf; --gold:#ffc65c; --paper:#f5f8fc; --muted:#62718b; --line:#dce5f1; --card:#fff; }
|
||
* { box-sizing:border-box; }
|
||
html { scroll-behavior:smooth; }
|
||
body { margin:0; font-family:Tahoma, Arial, sans-serif; background:var(--paper); color:var(--ink); line-height:1.8; }
|
||
.hero { color:white; overflow:hidden; position:relative; background:radial-gradient(circle at 12% 20%, #156ba8 0, transparent 28%), radial-gradient(circle at 92% 14%, #176a75 0, transparent 26%), linear-gradient(132deg,#061124,#0b2243 56%,#0b304c); }
|
||
.hero:before { content:""; position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(#000,transparent); }
|
||
.wrap { width:min(1120px, calc(100% - 36px)); margin:auto; position:relative; }
|
||
nav { display:flex; min-height:75px; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.14); gap:18px; }
|
||
.brand { font-weight:800; font-size:1.25rem; letter-spacing:.2px; display:flex; gap:10px; align-items:center; }
|
||
.brand i { color:var(--cyan); font-style:normal; font-size:1.7rem; }
|
||
nav a { color:#d8e8f8; text-decoration:none; font-size:.9rem; margin-inline-start:18px; }
|
||
nav a:hover { color:var(--cyan); }
|
||
.hero-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:45px; padding:75px 0 82px; align-items:center; }
|
||
.eyebrow { display:inline-block; color:#d6fff8; border:1px solid rgba(53,212,207,.5); background:rgba(53,212,207,.1); padding:5px 13px; border-radius:30px; font-size:.82rem; }
|
||
h1 { font-size:clamp(2.2rem,5vw,4.35rem); line-height:1.23; margin:18px 0; letter-spacing:-1.4px; }
|
||
h1 strong { color:var(--cyan); }
|
||
.lead { font-size:1.15rem; max-width:720px; color:#d5e1ee; }
|
||
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
|
||
.button { text-decoration:none; border-radius:10px; padding:12px 19px; font-weight:700; font-size:.92rem; }
|
||
.primary { background:var(--cyan); color:#062034; }
|
||
.secondary { border:1px solid rgba(255,255,255,.35); color:white; }
|
||
.map-card { padding:25px; border:1px solid rgba(147,215,246,.28); border-radius:18px; background:linear-gradient(155deg,rgba(21,51,83,.85),rgba(6,18,38,.95)); box-shadow:0 25px 60px rgba(0,0,0,.24); }
|
||
.map { height:245px; border-radius:12px; overflow:hidden; position:relative; background:linear-gradient(28deg,#164e53,#0a355d 52%,#12315d); }
|
||
.map:before { content:""; position:absolute; inset:-25%; background:repeating-linear-gradient(42deg,transparent 0 28px,rgba(255,255,255,.18) 29px 31px,transparent 32px 64px),repeating-linear-gradient(-24deg,transparent 0 44px,rgba(255,255,255,.13) 45px 47px,transparent 48px 94px); transform:rotate(-5deg); }
|
||
.route { position:absolute; width:100%; height:100%; inset:0; }
|
||
.route path { stroke:var(--gold); stroke-width:5; fill:none; stroke-linecap:round; filter:drop-shadow(0 0 5px #ffca63); stroke-dasharray:10 7; }
|
||
.pin { position:absolute; width:15px; height:15px; border:4px solid white; background:#f15b66; border-radius:50%; box-shadow:0 0 0 8px rgba(241,91,102,.16); }
|
||
.pin.one { top:65%; right:18%; } .pin.two { top:19%; left:20%; background:var(--cyan); box-shadow:0 0 0 8px rgba(53,212,207,.18); }
|
||
.map-label { display:flex; justify-content:space-between; gap:12px; padding-top:16px; color:#c9d9e7; font-size:.85rem; }
|
||
.map-label b { color:white; }
|
||
section { padding:76px 0; }
|
||
.section-tag { color:#147dbd; font-size:.85rem; font-weight:800; letter-spacing:.1em; }
|
||
h2 { font-size:clamp(1.8rem,3vw,2.75rem); line-height:1.35; margin:7px 0 12px; }
|
||
.intro { max-width:770px; color:#4d5d75; font-size:1.05rem; }
|
||
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:29px; }
|
||
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:28px; }
|
||
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:23px; box-shadow:0 9px 25px rgba(18,45,83,.045); }
|
||
.card h3 { margin:4px 0 7px; font-size:1.1rem; }
|
||
.card p { margin:0; color:#596981; font-size:.94rem; }
|
||
.num { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-weight:bold; color:#066f81; background:#dcfaf5; }
|
||
.contrast { background:var(--ink); color:white; }
|
||
.contrast .intro { color:#c5d1df; }
|
||
.contrast .section-tag { color:var(--cyan); }
|
||
.contrast .card { background:#0e213e; border-color:#234466; box-shadow:none; }
|
||
.contrast .card p { color:#b7c7d8; }
|
||
.contrast .num { background:#163c51; color:#81f1e8; }
|
||
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:30px; }
|
||
.role { border-radius:15px; padding:25px; }
|
||
.role h3 { margin-top:0; font-size:1.28rem; }
|
||
.role ul { padding:0 20px 0 0; margin:12px 0 0; }
|
||
.role li { margin:7px 0; }
|
||
.official { background:#fff5de; border:1px solid #f1d38a; color:#5a4318; }
|
||
.platform { background:#e8f8ff; border:1px solid #a9dcec; color:#123e5b; }
|
||
.flow { display:flex; flex-wrap:wrap; align-items:center; gap:11px; margin-top:30px; }
|
||
.flow b { background:white; border:1px solid var(--line); padding:11px 14px; border-radius:9px; font-size:.9rem; }
|
||
.flow span { color:#238ad0; font-size:1.3rem; }
|
||
.quote { border-right:4px solid var(--cyan); background:#e9fbfa; padding:22px 25px; border-radius:0 12px 12px 0; margin-top:28px; font-size:1.08rem; color:#16455b; }
|
||
.roadmap { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-top:29px; }
|
||
.step { background:#fff; border-top:4px solid var(--blue); border-radius:10px; padding:18px; border-left:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
|
||
.step small { color:#1483c6; font-weight:800; }
|
||
.step h3 { margin:6px 0; font-size:1rem; }
|
||
.step p { color:#5a6b82; margin:0; font-size:.89rem; }
|
||
details { border:1px solid var(--line); background:white; border-radius:10px; padding:0 18px; margin:10px 0; }
|
||
summary { cursor:pointer; padding:16px 0; font-weight:bold; }
|
||
details p { padding:0 0 15px; margin:0; color:#56677e; }
|
||
.callout { background:linear-gradient(120deg,#0b6fa8,#0e587e); color:white; border-radius:17px; padding:35px; display:flex; gap:25px; align-items:center; justify-content:space-between; }
|
||
.callout h2 { margin:0 0 7px; font-size:1.7rem; }
|
||
.callout p { margin:0; color:#d2edf7; max-width:760px; }
|
||
footer { background:#051124; color:#afc0d2; padding:27px 0; font-size:.85rem; }
|
||
@media (max-width:820px) { nav .links { display:none; } .hero-grid,.two-column { grid-template-columns:1fr; } .hero-grid { padding:52px 0; } .grid-3,.roadmap { grid-template-columns:1fr 1fr; } .map-card { max-width:540px; } }
|
||
@media (max-width:520px) { .grid-3,.grid-2,.roadmap { grid-template-columns:1fr; } .wrap { width:min(100% - 26px,1120px); } h1 { letter-spacing:-.6px; } .callout { display:block; padding:26px; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="hero" id="top">
|
||
<div class="wrap">
|
||
<nav>
|
||
<div class="brand"><i>◉</i> MapSaaS <span style="color:#95acc7;font-size:.8rem;font-weight:normal">خدمات خرائط وطنية</span></div>
|
||
<div class="links"><a href="#idea">الفكرة</a><a href="#difference">الفرق</a><a href="#app">التطبيق العام</a><a href="#governance">الحوكمة</a><a href="#pitch">رسالة القيادة</a></div>
|
||
</nav>
|
||
<div class="hero-grid">
|
||
<div>
|
||
<span class="eyebrow">رؤية وطنية للخرائط والملاحة الذكية</span>
|
||
<h1>خريطة بلدنا<br><strong>تعمل عندنا،</strong><br>وتتحسن من واقعنا.</h1>
|
||
<p class="lead">MapSaaS ليست خريطة لعرض مواقع ثابتة فقط. هي بنية وطنية لخدمات الموقع: بحث عربي، ملاحة، توجيه، تحديثات طريق، بيانات حركة محكومة، وواجهات جاهزة للتطبيقات.</p>
|
||
<div class="actions"><a class="button primary" href="#pitch">اقرأ الرسالة التنفيذية</a><a class="button secondary" href="#difference">ما الذي يميزها؟</a></div>
|
||
</div>
|
||
<aside class="map-card" aria-label="تمثيل لخريطة ملاحة">
|
||
<div class="map"><svg class="route" viewBox="0 0 400 245" preserveAspectRatio="none"><path d="M72,174 C130,145 110,112 185,112 C240,112 205,58 300,45"/></svg><span class="pin one"></span><span class="pin two"></span></div>
|
||
<div class="map-label"><span>موقع الانطلاق <b>عمّان</b></span><span>وقت الوصول <b>محلي وديناميكي</b></span></div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section id="idea"><div class="wrap">
|
||
<div class="section-tag">الفكرة بلغة بسيطة</div><h2>الخريطة اليوم جزء من البنية التحتية، مثل الطريق نفسه.</h2>
|
||
<p class="intro">عندما يطلب شخص سيارة أو طعاماً، لا يحتاج التطبيق إلى خريطة جميلة فقط؛ يحتاج إلى معرفة المكان الصحيح، أقرب سائق، أفضل طريق، بوابة المبنى، ووقت الوصول. هذه المعرفة تتكون من حركة البلد على الخريطة، ولذلك يجب أن تخضع لقواعد وطنية واضحة.</p>
|
||
<div class="grid-3">
|
||
<article class="card"><div class="num">1</div><h3>المكان</h3><p>أسماء الأماكن والعناوين والبوابات والمباني والطرق، بما يفهمه المواطن بلغته وطريقة وصفه للمكان.</p></article>
|
||
<article class="card"><div class="num">2</div><h3>الحركة</h3><p>سرعة الطريق، الازدحام، الإغلاقات، مناطق الطلب، وزمن الوصول—بعد تجميعها وحمايتها.</p></article>
|
||
<article class="card"><div class="num">3</div><h3>القرار</h3><p>توجيه مركبة، إرسال إسعاف، تنظيم توصيل، أو تحديث طريق؛ أي قرار يعتمد على معلومة مكانية موثوقة.</p></article>
|
||
</div>
|
||
<div class="quote">السيادة الرقمية للخرائط لا تعني أن الدولة تراقب المواطن؛ تعني أن بيانات الموقع الحساسة تُدار داخل إطار قانوني وطني، للغرض المحدد وبأقل قدر لازم من البيانات.</div>
|
||
</div></section>
|
||
|
||
<section class="contrast" id="difference"><div class="wrap">
|
||
<div class="section-tag">الفرق الحقيقي</div><h2>من “خريطة لقطاع” إلى “منصة تعمل لكل القطاعات”.</h2>
|
||
<p class="intro">تطبيق يعرض مكاتب بريد أو مزارع نخيل قد يكون مفيداً لقطاعه، لكن قيمته تبقى في البيانات التي يعرضها. MapSaaS تبني طبقة تشغيل مشتركة تستخدمها تطبيقات النقل والتوصيل والطوارئ والخدمات الحكومية.</p>
|
||
<div class="two-column">
|
||
<div class="role official"><h3>دور الجهة الجغرافية الرسمية</h3><ul><li>البيانات الأساسية والمرجعية.</li><li>المسح، الخرائط الرسمية، الحدود والصور الجوية.</li><li>اعتماد الطبقات والبيانات عند الحاجة.</li><li>تطبيقات GIS وتحليلات الجهات المتخصصة.</li></ul></div>
|
||
<div class="role platform"><h3>دور MapSaaS</h3><ul><li>تشغيل الخريطة والبحث والتوجيه عبر API وSDK.</li><li>خدمة التطبيقات والمستخدمين على نطاق واسع.</li><li>إدارة مرشحات تحديث الطرق والبوابات ومراجعتها.</li><li>تحويل البيانات الجغرافية إلى خدمة يومية قابلة للاستخدام.</li></ul></div>
|
||
</div>
|
||
<div class="flow"><b>مصدر رسمي أو ميداني</b><span>←</span><b>مراجعة واعتماد</b><span>←</span><b>MapSaaS</b><span>←</span><b>تطبيقات ومواطنون</b><span>←</span><b>إشارات تحسين جديدة</b></div>
|
||
</div></section>
|
||
|
||
<section id="app"><div class="wrap">
|
||
<div class="section-tag">المرحلة القادمة</div><h2>تطبيق ملاحة مستقل متاح للجميع.</h2>
|
||
<p class="intro">القدرات الموجودة داخل Sero يمكن فصلها في تطبيق خرائط وملاحة عام: يوجّه المستخدم، يحفظ منزله وأماكنه، ويتيح له المشاركة في تحسين الخريطة ضمن إجراءات تحقق واضحة.</p>
|
||
<div class="grid-3">
|
||
<article class="card"><div class="num">⌖</div><h3>البحث والوصول الصحيح</h3><p>بحث عربي للأماكن، حفظ المنزل والعمل، توجيه إلى بوابة المنشأة عند توفرها، وملاحة مبنية على شبكة طرق محلية.</p></article>
|
||
<article class="card"><div class="num">＋</div><h3>إضافة أماكن وتحديثات</h3><p>إضافة مكان، بوابة، نقطة شرطة، مطب، أعمال صيانة، طريق مغلق أو معلومة مفقودة؛ كل إدخال يصبح طلب مراجعة ولا ينشر تلقائياً.</p></article>
|
||
<article class="card"><div class="num">◌</div><h3>تتبع واعٍ بالخصوصية</h3><p>ميزات تتبع اختيارية وبموافقة واضحة، مع فصل هوية الشخص عن بيانات تحسين الطريق، وحق الإيقاف والحذف وفق السياسة المعتمدة.</p></article>
|
||
</div>
|
||
<div class="grid-2">
|
||
<article class="card"><h3>بيانات الطريق من الواقع</h3><p>تطبيقات النقل مثل Sero تقدّم إشارات عن السرعات وأخطاء الطريق وزمن الوصول. لا تُعتمد الإشارة كحقيقة فوراً؛ تُدمج وتُقيّم ثم تُراجع قبل النشر.</p></article>
|
||
<article class="card"><h3>تصوير الشوارع 360°</h3><p>مسار تطوير لإنشاء أصل وطني لصور الشوارع ورصد الإشارات والمطبات والتغيّرات، مع طمس الوجوه واللوحات، وضوابط للمواقع الحساسة، وسجل مصدر وتاريخ لكل لقطة.</p></article>
|
||
</div>
|
||
</div></section>
|
||
|
||
<section class="contrast" id="governance"><div class="wrap">
|
||
<div class="section-tag">الحوكمة قبل البيانات</div><h2>المنصة السيادية لا تنجح بالاستضافة المحلية وحدها.</h2>
|
||
<p class="intro">السيادة تعني التحكم بالمكان الذي تعمل فيه البيانات، وبمن يصل إليها، ولماذا، وكم تبقى، وكيف تُحذف، وكيف تستمر الخدمة عند الطوارئ.</p>
|
||
<div class="grid-3">
|
||
<article class="card"><div class="num">◈</div><h3>تقليل البيانات</h3><p>لا نجمع إلا ما يلزم لتشغيل الخدمة وتحسين الطريق. بيانات الهوية لا تصبح جزءاً من طبقة الخرائط العامة.</p></article>
|
||
<article class="card"><div class="num">◫</div><h3>فصل المدني عن العسكري</h3><p>نواة تقنية مشتركة لا تعني قاعدة بيانات مشتركة: بيئات مستقلة، مفاتيح مستقلة، صلاحيات مستقلة، وسياسات مستقلة.</p></article>
|
||
<article class="card"><div class="num">✓</div><h3>مصدر معلوم ومراجعة</h3><p>كل تحديث مهم له مصدر وحالة مراجعة وسجل قرار. لا تتحول إشارة من مستخدم أو مركبة إلى معلومة رسمية بلا تحقق.</p></article>
|
||
</div>
|
||
</div></section>
|
||
|
||
<section><div class="wrap">
|
||
<div class="section-tag">الجدوى الوطنية</div><h2>قيمة متراكمة للاقتصاد والخدمات، لا بيع لبيانات المواطنين.</h2>
|
||
<div class="roadmap">
|
||
<article class="step"><small>01</small><h3>خفض التكلفة</h3><p>تسعير محلي واضح لخدمات الخريطة والبحث والتوجيه، مع قياس تكلفة تشغيل حقيقية.</p></article>
|
||
<article class="step"><small>02</small><h3>تحسين الخدمة</h3><p>كل تحديث طريق معتمد يحسن تجربة النقل والتوصيل والطوارئ لجميع المستخدمين.</p></article>
|
||
<article class="step"><small>03</small><h3>توسيع السوق</h3><p>واجهات API وSDK تتيح للشركات بناء منتجاتها فوق بنية محلية مشتركة.</p></article>
|
||
<article class="step"><small>04</small><h3>أصل وطني</h3><p>سجل طرق وسرعات وبوابات وصور شارع وبيانات تغيّر يتراكم داخل منظومة محكومة.</p></article>
|
||
</div>
|
||
</div></section>
|
||
|
||
<section id="questions"><div class="wrap">
|
||
<div class="section-tag">أسئلة متوقعة</div><h2>إجابات واضحة قبل أن تُطرح الاعتراضات.</h2>
|
||
<details><summary>هل MapSaaS بديل للمركز الجغرافي؟</summary><p>لا. المركز الجغرافي يمكن أن يبقى المرجع للبيانات الرسمية والمسح والاعتماد. MapSaaS هي طبقة تشغيل للخدمات والتطبيقات وتحويل تلك البيانات إلى بحث وتوجيه وملاحة وتحديثات قابلة للاستخدام اليومي.</p></details>
|
||
<details><summary>هل المقصود منع Google أو Esri؟</summary><p>لا. المقصود أن لا تكون الخدمة الوطنية معتمدة كلياً على مزود واحد خارج السيطرة المحلية. يمكن الاستفادة من الأدوات العالمية ضمن تراخيصها، مع بقاء بيانات التشغيل والتحليلات والقرار تحت حوكمة وطنية.</p></details>
|
||
<details><summary>هل بيانات الركاب والسائقين تصبح متاحة للجميع؟</summary><p>لا. بيانات الشخص والرحلة تعامل كبيانات حساسة. ما يستخدم لتحسين الطريق يكون مجمعاً أو مجهول الهوية وبحسب الغرض والصلاحية وسياسة الاحتفاظ المعتمدة.</p></details>
|
||
<details><summary>هل كل بلاغ من مستخدم يغير الخريطة؟</summary><p>لا. البلاغ يفتح مرشح تحديث فقط. يمر بالتحقق الآلي والبشري أو بمصدر رسمي قبل أن يصبح جزءاً من البيانات المنشورة.</p></details>
|
||
<details><summary>لماذا لا نلزم التطبيقات بمزود واحد من اليوم الأول؟</summary><p>الأفضل اعتماد معايير وطنية للأمن والخصوصية والدقة والتوفر، ثم اختبار المنصة واعتبارها مزوداً محلياً مؤهلاً. الإلزام يجب أن يكون للمعيار والنتيجة، لا للاسم وحده.</p></details>
|
||
</div></section>
|
||
|
||
<section id="pitch"><div class="wrap"><div class="callout"><div><h2>الرسالة التي تُعرض على القيادة</h2><p>لا نطرح خريطة إضافية أو واجهة لعرض نقاط ثابتة. نطرح بنية وطنية لخدمات الموقع تبدأ بالنقل الذكي، تعمل بخريطة وبحث وتوجيه محليين، وتتحسن من بيانات طريق معتمدة ومحمية. نطلب تجربة تشغيلية تقاس بالدقة والتكلفة والتوفر والخصوصية؛ ثم يُبنى عليها قرار التوسع.</p></div><a class="button primary" href="#top">العودة للأعلى</a></div></div></section>
|
||
</main>
|
||
<footer><div class="wrap">MapSaaS — مسودة عرض تنفيذي. تُراجع تفاصيل الخصوصية والترخيص والتسعير والاعتماد المؤسسي قبل أي إطلاق أو التزام رسمي.</div></footer>
|
||
</body>
|
||
</html>
|