feat: add Jordan 3D topographic platform, Siro Map cinematic orbit studio, sun-shadow simulation, and sovereign intelligence security gating
This commit is contained in:
Hamza-Ayed
@@ -0,0 +1,80 @@
|
||||
<!doctype html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#061d42">
|
||||
<meta name="description" content="سيرو ماب: خرائط سهلة بلا تسجيل للعراق والأردن وسوريا ومصر، ورؤية لدليل سياحي يبدأ من معالم العراق.">
|
||||
<title>سيرو ماب — كل طريق، بداية حكاية</title>
|
||||
<link rel="icon" type="image/png" href="assets/siro-maps.png">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Tajawal';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(assets/tajawal-400.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Tajawal';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(assets/tajawal-500.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Tajawal';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(assets/tajawal-700.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Tajawal';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url(assets/tajawal-800.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Tajawal';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url(assets/tajawal-900.ttf) format('truetype');
|
||||
}
|
||||
|
||||
:root{--navy:#061d42;--blue:#124f9f;--gold:#b59247;--pale:#edf3f9;--ink:#132844;--muted:#5c6c80;--line:#dce3ec;--white:#fff;--font:'Tajawal','Geeza Pro',Tahoma,sans-serif}
|
||||
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.85}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #c6a057;outline-offset:6px}button{cursor:pointer}img{max-width:100%;height:auto;display:block}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.35}h2{font-size:clamp(32px,3.5vw,49px);font-weight:800;letter-spacing:-.6px}h3{font-size:25px}::selection{background:#d6bb7b;color:var(--navy)}.wrap{width:min(1190px,calc(100% - 88px));margin:auto}.eyebrow{font-size:14px;letter-spacing:1.8px;font-weight:700;color:var(--gold);display:flex;align-items:center;gap:12px;margin-bottom:22px}.eyebrow:before{content:'';width:28px;height:2px;background:currentColor}.latin{font-family:Arial,sans-serif;letter-spacing:2.5px;font-size:12px;direction:ltr;display:inline-block}.muted{color:var(--muted)}
|
||||
header{height:100px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);position:relative;z-index:5}.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;gap:13px;align-items:center}.brand img{width:62px;height:62px;border-radius:15px}.brand strong{font-size:23px;display:block;line-height:1.3}.brand small{color:var(--muted);font-size:11px;letter-spacing:2.2px;display:block;direction:ltr}.links{display:flex;align-items:center;gap:30px;font-size:16px;font-weight:600}.links a{transition:color .2s}.links a:hover{color:var(--blue)}.nav-tag{font-size:14px;color:var(--blue);border:1px solid #c9d8ed;padding:7px 17px;border-radius:30px;white-space:nowrap}
|
||||
.hero{position:relative;overflow:hidden;background:var(--navy);color:white;padding:75px 0 0}.hero:before{content:'';position:absolute;width:740px;height:740px;left:-140px;top:-220px;background:radial-gradient(circle,rgba(39,105,180,.38),transparent 67%);pointer-events:none}.hero-grid{display:grid;grid-template-columns:1.12fr 1fr;align-items:center;gap:65px;position:relative;min-height:470px;padding-bottom:65px}.hero h1{font-size:clamp(44px,5.7vw,76px);font-weight:800;line-height:1.24;letter-spacing:-1px}.hero h1 span{color:#dbbc77}.hero p{font-size:20px;color:#c0ccdc;max-width:530px;margin-top:27px;line-height:1.9}.hero .eyebrow{color:#ddbd78}.hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:33px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:11px 23px;border-radius:7px;font-size:17px;font-weight:700;border:1px solid transparent;min-height:50px}.btn-gold{background:#dbbc77;color:#0b2547}.btn-gold:hover{background:#efd49b}.btn-outline{border-color:#526580;color:#e3eaf3}.btn-outline:hover{background:#ffffff0c}.arrow{font-family:Arial;font-size:23px;font-weight:400}.hero-status{display:block;font-size:14px;color:#acbbcf;margin-top:17px}.brand-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:420px;padding:15px}.brand-stage:before,.brand-stage:after{content:'';position:absolute;border:1px solid #759ed12b;border-radius:50%;width:410px;height:410px;pointer-events:none}.brand-stage:after{width:480px;height:480px;border-style:dashed;opacity:.6}.hero-icon{width:330px;border-radius:70px;transform:rotate(-6deg);box-shadow:0 30px 60px #0004;z-index:1}.float-label{position:absolute;z-index:2;border:1px solid #6986af6b;background:#0b2b55eb;box-shadow:0 10px 35px #0002;backdrop-filter:blur(15px);padding:10px 17px;border-radius:10px;font-size:16px;display:flex;align-items:center;gap:12px}.float-label svg{width:22px;height:22px;stroke:#e0bf7d;fill:none;stroke-width:1.6}.label-one{left:-5px;top:60px}.label-two{right:4px;bottom:43px}.hero-facts{position:relative;border-top:1px solid #ffffff20;display:grid;grid-template-columns:repeat(3,1fr);padding:24px 0;gap:30px}.fact{display:flex;gap:17px;align-items:center}.fact:not(:last-child){border-left:1px solid #ffffff20}.fact b{font-size:35px;color:#dfc28a;font-weight:500;line-height:1}.fact span{display:block;font-size:17px}.fact small{display:block;color:#a8b8cd;font-size:14px}
|
||||
.story{padding:88px 0;display:grid;grid-template-columns:.9fr 1.1fr;gap:95px;align-items:center}.story p{color:var(--muted);font-size:20px}.story .accent{color:var(--ink);font-weight:700}.story .eyebrow{margin-bottom:16px}.section-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:37px}.section-intro p{max-width:430px;color:var(--muted)}
|
||||
.coverage{background:var(--pale);padding:72px 0 78px}.country-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}.country-tab{display:flex;align-items:center;justify-content:space-between;padding:17px 22px;background:transparent;border:1px solid #cdd8e6;color:var(--ink);border-radius:8px;transition:background .2s;min-height:83px}.country-tab strong{font-size:23px}.country-tab small{display:block;font-size:12px;letter-spacing:2px;line-height:1.2;color:var(--muted);direction:ltr}.country-tab .number{font-family:Arial;font-size:14px;color:#8b9db3}.country-tab[aria-selected=true]{background:var(--navy);border-color:var(--navy);color:white}.country-tab[aria-selected=true] small,.country-tab[aria-selected=true] .number{color:#d8bd81}.country-panel{background:#fff;border-radius:12px;padding:27px 32px;display:grid;grid-template-columns:1fr 1.4fr;gap:35px;align-items:center;border:1px solid #e2e9f2}.country-panel h3{font-size:28px;margin-bottom:5px}.country-panel p{font-size:17px;color:var(--muted)}.panel-note{border-right:2px solid #c4a266;padding-right:24px}.pill{display:inline-block;font-size:13px;border:1px solid #d9e1ec;background:#f7f9fc;padding:2px 10px;border-radius:30px;color:#49617f;margin-bottom:9px}
|
||||
.tourism{padding:90px 0}.tourism-feature{display:grid;grid-template-columns:1.15fr 1fr;background:var(--navy);color:white;border-radius:18px;overflow:hidden;min-height:415px}.tourism-photo{position:relative;background:#15395e;min-height:380px;overflow:hidden}.tourism-photo img{width:100%;height:100%;object-fit:cover;position:absolute}.photo-caption{position:absolute;bottom:0;right:0;left:0;color:white;padding:45px 28px 22px;background:linear-gradient(transparent,#041a35e6);font-size:16px}.photo-caption small{display:block;opacity:.8;font-size:12px;direction:ltr;text-align:right}.tourism-copy{padding:42px 40px;align-self:center}.tourism-copy h3{font-size:35px;margin:12px 0 15px}.tourism-copy p{color:#beccdd}.tourism-copy .pill{background:#ffffff0c;border-color:#597087;color:#e2c388}.tourism-list{padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:25px 0 0;font-size:16px;color:#e7edf6}.tourism-list li:before{content:'+';color:#d8b975;padding-left:10px}.tourism-foot{display:flex;justify-content:space-between;gap:25px;margin-top:20px;font-size:15px;color:var(--muted)}.tourism-foot a{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
|
||||
.ideas{background:#f7f9fc;padding:75px 0 82px}.ideas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.idea{padding:32px 29px 30px}.idea:not(:last-child){border-left:1px solid var(--line)}.idea-index{font-size:13px;direction:ltr;display:block;text-align:right;color:#977837;letter-spacing:2px;margin-bottom:22px}.idea svg{width:34px;height:34px;fill:none;stroke:var(--blue);stroke-width:1.5;margin-bottom:15px}.idea h3{margin-bottom:13px;font-size:25px}.idea p{font-size:17px;color:var(--muted)}.benefit{margin-top:24px;padding-top:17px;border-top:1px solid var(--line);font-size:15px;color:var(--blue)}.ideas-note{font-size:14px;color:var(--muted);margin-top:20px}
|
||||
.roadmap{padding:90px 0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:42px}.step{border-top:2px solid #dce3ec;padding-top:22px}.step.current{border-top-color:var(--gold)}.step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.step-top span{font-size:14px;color:#728096}.step-top b{font-size:28px;font-family:Arial;font-weight:400;color:#a7b4c4}.step.current .step-top span{color:#907132}.step h3{font-size:25px;margin-bottom:12px}.step p{color:var(--muted);font-size:17px}
|
||||
.partnership{border:1px solid var(--line);border-radius:15px;display:grid;grid-template-columns:160px 1fr;gap:40px;padding:32px 40px;align-items:center;margin-bottom:70px}.prize-logo{width:150px}.partnership .eyebrow{font-size:13px;margin-bottom:11px}.partnership h3{font-size:29px;margin-bottom:9px}.partnership p{font-size:18px;color:var(--muted);max-width:820px}.closing{background:var(--navy);color:white;text-align:center;padding:65px 24px}.closing .latin{color:#dbbc77;margin-bottom:15px}.closing h2{font-size:clamp(29px,4vw,46px)}.closing p{color:#acbed4;margin-top:15px;font-size:18px}.footer{padding:23px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:14px;color:var(--muted)}.footer a{color:var(--blue)}.footer .latin{font-size:11px;letter-spacing:1px}
|
||||
@media(min-width:1500px){.hero-grid{min-height:530px}}
|
||||
@media(max-width:1050px){.wrap{width:calc(100% - 48px)}.links{gap:18px}.nav-tag{display:none}.hero-grid{gap:25px}.hero-icon{width:280px;border-radius:58px}.brand-stage:before{width:340px;height:340px}.brand-stage:after{width:390px;height:390px}.label-one{left:0;top:45px}.label-two{right:0;bottom:45px}.story{gap:45px}.tourism-copy{padding:30px}.idea{padding:28px 20px}.country-tab{padding:15px}.hero h1{font-size:58px}}
|
||||
@media(max-width:760px){body{font-size:17px}.wrap{width:calc(100% - 36px)}header{height:auto;min-height:86px}.nav{padding:13px 0;flex-wrap:wrap;gap:10px}.brand img{width:48px;height:48px}.brand strong{font-size:20px}.brand small{font-size:10px}.links{gap:19px;font-size:14px}.links a:last-child{display:none}.hero{padding-top:44px}.hero-grid{grid-template-columns:1fr;gap:23px;padding-bottom:35px}.hero h1{font-size:clamp(44px,10vw,62px);line-height:1.3}.hero p{font-size:18px;margin-top:20px}.hero-actions{margin-top:25px}.btn{font-size:16px;padding:10px 19px}.hero-status{font-size:13px}.brand-stage{min-height:325px;width:min(100%,390px);margin:auto}.hero-icon{width:240px;border-radius:52px}.brand-stage:before{width:285px;height:285px}.brand-stage:after{width:320px;height:320px}.float-label{font-size:14px;padding:8px 12px}.label-one{top:39px;left:0}.label-two{bottom:23px;right:0}.hero-facts{gap:15px;padding:20px 0}.fact{gap:8px;display:block}.fact b{font-size:27px}.fact span{font-size:14px}.fact small{font-size:12px}.story{grid-template-columns:1fr;gap:22px;padding:53px 0}.story p{font-size:18px}.eyebrow{font-size:13px;margin-bottom:15px}.section-intro{display:block;margin-bottom:27px}.section-intro p{margin-top:17px;font-size:17px}.coverage{padding:48px 0}.country-tabs{grid-template-columns:repeat(2,1fr);gap:9px}.country-tab{min-height:78px}.country-tab strong{font-size:22px}.country-panel{grid-template-columns:1fr;gap:18px;padding:24px}.panel-note{padding-right:16px}.tourism{padding:55px 0}.tourism-feature{grid-template-columns:1fr}.tourism-photo{min-height:280px}.tourism-copy{padding:29px 25px}.tourism-copy h3{font-size:30px}.tourism-foot{display:block;font-size:14px}.tourism-foot a{display:inline-block;margin-top:7px}.ideas{padding:50px 0}.ideas-grid{grid-template-columns:1fr}.idea{padding:28px 4px}.idea:not(:last-child){border-left:0;border-bottom:1px solid var(--line)}.idea-index{margin-bottom:14px}.idea svg{float:left}.benefit{margin-top:17px}.roadmap{padding:53px 0}.steps{grid-template-columns:1fr;gap:28px;margin-top:25px}.step{padding-top:14px}.step-top{margin-bottom:8px}.partnership{grid-template-columns:1fr;gap:18px;padding:26px;margin-bottom:45px}.prize-logo{width:120px}.partnership h3{font-size:25px}.partnership p{font-size:17px}.closing{padding:45px 22px}.footer{flex-direction:column;align-items:flex-start;gap:8px}.tourism-list{font-size:15px}}
|
||||
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
|
||||
@media print{header,.hero-actions,.hero-status,.country-tabs,.footer a{display:none}body{font-size:12pt}.hero,.closing,.tourism-feature{print-color-adjust:exact;-webkit-print-color-adjust:exact}.wrap{width:92%}.hero{padding-top:30px}.hero-grid{min-height:0;gap:25px}.hero h1{font-size:38px}.hero p{font-size:16px}.brand-stage{min-height:250px}.hero-icon{width:200px}.brand-stage:before,.brand-stage:after,.float-label{display:none}.story,.tourism,.ideas,.roadmap,.coverage{padding:25px 0}.section-intro h2,h2{font-size:28px}.story p{font-size:16px}.tourism-feature{break-inside:avoid}.idea,.step,.partnership{break-inside:avoid}.partnership{margin-bottom:25px}.closing{padding:25px}}
|
||||
</style>
|
||||
</head>
|
||||
<body id="top">
|
||||
<header><nav class="wrap nav" aria-label="التنقل الرئيسي"><a class="brand" href="#top" aria-label="سيرو ماب، بداية الصفحة"><img src="assets/siro-maps.png" alt="شعار سيرو ماب" width="62" height="62"><span><strong>سيرو ماب</strong><small>SIRO MAP</small></span></a><div class="links"><a href="#coverage">الانطلاقة</a><a href="#tourism">اكتشف العراق</a><a href="#ideas">آفاق سيرو ماب</a><a href="#journey">رحلتنا</a></div><span class="nav-tag">من سيرو ماب، إلى كل وجهة</span></nav></header>
|
||||
<main>
|
||||
<section class="hero" aria-labelledby="hero-title"><div class="wrap"><div class="hero-grid"><div><div class="eyebrow">الانطلاقة الأولى · سيرو ماب</div><h1 id="hero-title">كل طريق،<br>بداية <span>حكاية.</span></h1><p>خرائط تقرّب المسافات، وحكايات تقرّبنا من المكان.<br>نبدأ بأربع دول، ونفتح من العراق بابًا لاكتشاف الثقافة والمعالم والوجهات.</p><div class="hero-actions"><a class="btn btn-gold" href="#coverage">اكتشف الانطلاقة <span class="arrow" aria-hidden="true">←</span></a><a class="btn btn-outline" href="#ideas">ما الذي نبنيه معًا؟</a></div><small class="hero-status">نسخة التطبيق قيد المراجعة على Google Play</small></div><div class="brand-stage"><img class="hero-icon" src="assets/siro-maps.png" alt="شعار سيرو ماب الذكي للملاحة والتنقل" width="512" height="512"><span class="float-label label-one"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 10c0 6-8 11-8 11S4 16 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></svg>وجهتك أقرب</span><span class="float-label label-two"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m3 5 6-2 6 2 6-2v16l-6 2-6-2-6 2Z M9 3v16 M15 5v16"/></svg>اكتشف حكاية المكان</span></div></div><div class="hero-facts"><div class="fact"><b>04</b><div><span>دول في الانطلاقة</span><small>العراق · الأردن · سوريا · مصر</small></div></div><div class="fact"><b>01</b><div><span>بداية للدليل السياحي</span><small>معالم العراق أولًا</small></div></div><div class="fact"><b>ببساطة</b><div><span>خرائط بلا تسجيل</span><small>افتح التطبيق، وابدأ رحلتك</small></div></div></div></div></section>
|
||||
<section class="wrap story" aria-labelledby="story-title"><div><div class="eyebrow">فكرة تجمعنا</div><h2 id="story-title">من اسم يحمل حضارة،<br>إلى خدمة ترافق الناس.</h2></div><p>تعتمد سيرو ماب على الابتكار والسيادة الرقمية وتوفير التكاليف. واليوم، نمنح هذا المشروع حضورًا قويًا في الحياة اليومية: خرائط سهلة ومستقلة، ودليل يكشف ما حولنا من وجهات ومعالم.<br><span class="accent">خطوة أولى لشراكتنا، وأساس ننمو عليه معًا.</span></p></section>
|
||||
<section class="coverage" id="coverage" aria-labelledby="coverage-title"><div class="wrap"><div class="section-intro"><div><div class="eyebrow">أربع دول · تجربة واحدة</div><h2 id="coverage-title">بداية قريبة منّا.</h2></div><p>خرائط للاستخدام دون إنشاء حساب. ننطلق بهذا النطاق، ونواصل تحسين البيانات والتجربة قبل التوسع إلى مزيد من الدول العربية.</p></div><div class="country-tabs" role="tablist" aria-label="دول الانطلاقة"><button id="tab-iq" class="country-tab" role="tab" aria-selected="true" aria-controls="country-panel" data-country="iq"><span><strong>العراق</strong><small>IRAQ</small></span><span class="number">01</span></button><button id="tab-jo" class="country-tab" role="tab" aria-selected="false" aria-controls="country-panel" tabindex="-1" data-country="jo"><span><strong>الأردن</strong><small>JORDAN</small></span><span class="number">02</span></button><button id="tab-sy" class="country-tab" role="tab" aria-selected="false" aria-controls="country-panel" tabindex="-1" data-country="sy"><span><strong>سوريا</strong><small>SYRIA</small></span><span class="number">03</span></button><button id="tab-eg" class="country-tab" role="tab" aria-selected="false" aria-controls="country-panel" tabindex="-1" data-country="eg"><span><strong>مصر</strong><small>EGYPT</small></span><span class="number">04</span></button></div><div id="country-panel" class="country-panel" role="tabpanel" tabindex="0" aria-labelledby="tab-iq"><div><span class="pill">ضمن نطاق الانطلاقة</span><h3 id="country-title">العراق، هنا تبدأ الحكاية.</h3><p id="country-description">الخرائط أولًا، ومنها نبدأ بناء الدليل السياحي.</p></div><p id="country-note" class="panel-note">نبدأ بإثراء المعالم السياحية والأثرية العراقية: قصة المكان، موقعه، ومعلومات تساعد على زيارته.</p></div></div></section>
|
||||
<section class="wrap tourism" id="tourism" aria-labelledby="tourism-title"><div class="section-intro"><div><div class="eyebrow">الخطوة التالية · الدليل السياحي</div><h2 id="tourism-title">للمكان أكثر من عنوان.</h2></div><p>من معالم العراق نبدأ. نريد أن تتحول النقطة على الخريطة إلى حكاية تعرفها، ووجهة تستطيع التخطيط لزيارتها.</p></div><div class="tourism-feature"><div class="tourism-photo" id="tourism-photo"><img src="assets/erbil-citadel.jpg" alt="قلعة أربيل التاريخية والأسواق المحيطة بها" width="4032" height="3024" loading="lazy"><div class="photo-caption">قلعة أربيل · العراق<small>الصورة: <a href="https://commons.wikimedia.org/wiki/File:Citadel_of_Erbil.jpg" target="_blank" rel="noopener">Sarbast.T.Hameed / Wikimedia Commons</a> · <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">CC BY-SA 4.0</a> · عرض مقتصّ</small></div></div><div class="tourism-copy"><span class="pill">تصور قادم داخل التطبيق</span><h3>اكتشف ما حولك،<br>واعرف ما وراءه.</h3><p>دليل قريب منك للمعالم والمواقع الأثرية، بمعلومات موثقة تُراجع وتُحدّث مع الشركاء المحليين.</p><ul class="tourism-list"><li>قصة موجزة لكل معلم</li><li>صور وتعريف بالمكان</li><li>المداخل ومعلومات الزيارة</li><li>وجهات قريبة منك</li></ul></div></div><div class="tourism-foot"><span>أمثلة للإثراء: قلعة أربيل، بابل، وآثار ومدن العراق. تُراجع إتاحة الزيارة لكل موقع قبل إدراجه.</span><a href="https://whc.unesco.org/en/statesparties/iq" target="_blank" rel="noopener">تراث العراق لدى اليونسكو ↗</a></div></section>
|
||||
<section class="ideas" id="ideas" aria-labelledby="ideas-title"><div class="wrap"><div class="section-intro"><div><div class="eyebrow">آفاق سيرو ماب</div><h2 id="ideas-title">كل إضافة، قيمة جديدة.</h2></div><p>أفكار نطوّرها تدريجيًا؛ تخدم المستخدم، وتمنح شركاء سيرو ماب حضورًا يصل إلى الناس.</p></div><div class="ideas-grid"><article class="idea"><span class="idea-index">01 / الشركاء</span><svg viewBox="0 0 32 32" aria-hidden="true"><rect x="3" y="7" width="26" height="19" rx="3"/><path d="M3 13h26 M8 20h6 M21 18v6 M18 21h6"/></svg><h3>مزايا أقرب إليك</h3><p>دليل للمستشفيات والفنادق ومراكز الدورات المتعاقدة مع شبكة سيرو، يعرض موقع كل جهة ومزايا البطاقة وشروطها المعتمدة.</p><div class="benefit">الفائدة: يجد حامل البطاقة أين يستفيد منها.</div></article><article class="idea"><span class="idea-index">02 / الفعاليات</span><svg viewBox="0 0 32 32" aria-hidden="true"><rect x="5" y="6" width="22" height="23" rx="3"/><path d="M10 3v7 M22 3v7 M5 14h22 M10 20h4 M18 20h4 M10 24h4"/></svg><h3>من الدعوة إلى الوجهة</h3><p>خريطة للمؤتمرات والفعاليات الكبرى: موقع القاعة، المداخل، المواقف والوجهات المحيطة، تُشارك برابط أو رمز QR.</p><div class="benefit">الفائدة: كل مناسبة فرصة حقيقية لتجربة التطبيق.</div></article><article class="idea"><span class="idea-index">03 / جودة البيانات</span><svg viewBox="0 0 32 32" aria-hidden="true"><path d="M25 14c0 7-9 14-9 14S7 21 7 14a9 9 0 1 1 18 0Z"/><path d="m12 14 3 3 6-6"/></svg><h3>معًا، نصحّح الخريطة</h3><p>اقتراح مكان، تصحيح عنوان أو تحديد مدخل. مساهمات تُراجع، وبيانات استخدام اختيارية تساعد على تحسين التجربة.</p><div class="benefit">الفائدة: عناوين أدق، وأساس أفضل للنقل لاحقًا.</div></article></div><p class="ideas-note">هذه إضافات مقترحة للتطوير؛ ظهور الجهات والمزايا مرتبط بتأكيد بياناتها واتفاقاتها.</p></div></section>
|
||||
<section class="wrap roadmap" id="journey" aria-labelledby="journey-title"><div class="eyebrow">رحلة تنمو بخطوات واضحة</div><h2 id="journey-title">نبدأ بما ينفع اليوم.<br>ونبني ما نحتاجه غدًا.</h2><div class="steps"><article class="step current"><div class="step-top"><span>الانطلاقة الأولى</span><b>01</b></div><h3>خرائط بين يدي الناس</h3><p>أربع دول، بلا تسجيل. تعريف بسيرو ماب، وتجارب فعلية تُحسّن المنتج وتبني حضور الاسم.</p></article><article class="step"><div class="step-top"><span>الإثراء التدريجي</span><b>02</b></div><h3>دليل يستحق العودة</h3><p>معالم العراق أولًا، ثم الشركاء والفعاليات؛ أسباب متجددة لفتح التطبيق والاستفادة منه.</p></article><article class="step"><div class="step-top"><span>الأفق القادم</span><b>03</b></div><h3>نحو سيرو للنقل الذكي</h3><p>ربط اكتشاف الوجهة بالوصول إليها عند إطلاق خدمة النقل، والتوسع إلى دول عربية أخرى تدريجيًا.</p></article></div></section>
|
||||
|
||||
<section class="closing"><span class="latin">SIRO MAP · THE FIRST JOURNEY</span><h2>من هنا تبدأ حكايتنا على الخريطة.</h2><p>العراق · الأردن · سوريا · مصر</p></section>
|
||||
</main><footer class="wrap footer"><span>سيرو ماب © 2026 <span aria-hidden="true"> — </span> الانطلاقة الأولى ورؤية التطوير</span><a href="#top">العودة إلى البداية ↑</a></footer>
|
||||
<script>
|
||||
const countries={iq:{title:'العراق، هنا تبدأ الحكاية.',description:'الخرائط أولًا، ومنها نبدأ بناء الدليل السياحي.',note:'نبدأ بإثراء المعالم السياحية والأثرية العراقية: قصة المكان، موقعه، ومعلومات تساعد على زيارته.'},jo:{title:'الأردن، ضمن أولى وجهاتنا.',description:'استخدام الخرائط دون الحاجة إلى إنشاء حساب.',note:'الأردن ضمن نطاق الخرائط في الانطلاقة الأولى. يبدأ إثراء المحتوى السياحي من العراق، ثم يتوسع تدريجيًا.'},sy:{title:'سوريا، أقرب على الخريطة.',description:'تجربة خرائط سهلة ضمن الدول الأربع الأولى.',note:'نطوّر جودة البيانات بالاختبار والمراجعة ومساهمات المستخدمين؛ لتصبح معلومات الأماكن أكثر دقة وفائدة.'},eg:{title:'مصر، امتداد لانطلاقتنا.',description:'خرائط بلا تسجيل ضمن تجربة سيرو ماب.',note:'مصر ضمن نطاق الانطلاقة. نبدأ بخدمة الخرائط، ونضيف الدليل والوجهات والشراكات على مراحل واضحة.'}};
|
||||
const tabs=[...document.querySelectorAll('[role=tab]')];function choose(tab){tabs.forEach(t=>{const selected=t===tab;t.setAttribute('aria-selected',String(selected));t.tabIndex=selected?0:-1});const item=countries[tab.dataset.country];document.getElementById('country-title').textContent=item.title;document.getElementById('country-description').textContent=item.description;document.getElementById('country-note').textContent=item.note;document.getElementById('country-panel').setAttribute('aria-labelledby',tab.id)}tabs.forEach((tab,index)=>{tab.addEventListener('click',()=>choose(tab));tab.addEventListener('keydown',event=>{let next;if(event.key==='ArrowLeft')next=(index+1)%tabs.length;if(event.key==='ArrowRight')next=(index-1+tabs.length)%tabs.length;if(event.key==='Home')next=0;if(event.key==='End')next=tabs.length-1;if(next!==undefined){event.preventDefault();choose(tabs[next]);tabs[next].focus()}})});
|
||||
</script>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user