|
<!doctype html> |
|
<html lang="ar" dir="rtl" data-theme="dark"> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
<title>معهد مدينة العلوم العصرية | Modern City of Sciences Institute</title> |
|
<meta name="description" content="واجهة ثنائية اللغة لمعهد مدينة العلوم العصرية مع وضع داكن/فاتح، معرض صور ديناميكي، أقسام، أرقام، واعتمادات رسمية وروابط تواصل." /> |
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Inter:wght@400;600;800&display=swap" rel="stylesheet"> |
|
<style> |
|
:root{ |
|
--radius: 18px; |
|
--shadow: 0 12px 30px rgba(0,0,0,.25); |
|
--transition: .25s ease; |
|
|
|
--hero-img: url("https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.57-PM-2.jpeg"); |
|
} |
|
:root, html[data-theme="dark"]{ |
|
--bg:#0b1220; |
|
--surface:#101a2d; |
|
--muted:#1a2542; |
|
--text:#eef3fb; |
|
--text-dim:#b8c2d8; |
|
--primary:#52a1ff; |
|
--accent:#22d3ee; |
|
--gold:#f3c969; |
|
--success:#22c55e; |
|
--danger:#ef4444; |
|
--ring: rgba(82,161,255,.45); |
|
--card-grad: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); |
|
--bg-grad: radial-gradient(1200px 600px at 85% -10%, rgba(82,161,255,.25), transparent 60%), |
|
radial-gradient(900px 500px at -10% 10%, rgba(34,211,238,.18), transparent 60%), |
|
linear-gradient(180deg, #0b1220, #0a1020 60%); |
|
color-scheme: dark; |
|
} |
|
html[data-theme="light"]{ |
|
--bg:#f7f9fc; |
|
--surface:#ffffff; |
|
--muted:#e8eef7; |
|
--text:#141a28; |
|
--text-dim:#475569; |
|
--primary:#2563eb; |
|
--accent:#06b6d4; |
|
--gold:#b45309; |
|
--success:#16a34a; |
|
--danger:#dc2626; |
|
--ring: rgba(37,99,235,.35); |
|
--card-grad: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)); |
|
--bg-grad: radial-gradient(1200px 600px at 85% -10%, rgba(37,99,235,.10), transparent 60%), |
|
radial-gradient(900px 500px at -10% 10%, rgba(6,182,212,.10), transparent 60%), |
|
linear-gradient(180deg, #f7f9fc, #f2f6fb 60%); |
|
color-scheme: light; |
|
} |
|
|
|
*{box-sizing:border-box} |
|
html,body{height:100%} |
|
body{ |
|
margin:0; background: var(--bg-grad); |
|
color:var(--text); font-family:'Cairo', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; |
|
line-height:1.75; scroll-behavior:smooth; overflow-x:hidden; |
|
} |
|
img{max-width:100%; display:block} |
|
a{color:inherit; text-decoration:none} |
|
.container{width:min(1200px, 92%); margin-inline:auto} |
|
|
|
|
|
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 90%, transparent), color-mix(in oklab, var(--surface) 60%, transparent)); border-bottom:1px solid color-mix(in oklab, var(--text) 10%, transparent)} |
|
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0} |
|
.brand{display:flex; align-items:center; gap:.7rem} |
|
.brand img{width:46px; height:46px; object-fit:cover; border-radius:12px; border:1px solid color-mix(in oklab, var(--text) 15%, transparent)} |
|
.brand .title{font-weight:800; letter-spacing:.2px} |
|
.nav a.link{padding:.5rem .9rem; border-radius:999px; color:var(--text-dim)} |
|
.nav a.link:hover{color:var(--text); background-color:color-mix(in oklab, var(--text) 6%, transparent)} |
|
.btn{display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.15rem; border-radius:999px; font-weight:800; transition:var(--transition); border:1px solid transparent} |
|
.btn-primary{background:linear-gradient(135deg, var(--primary), color-mix(in oklab, var(--primary) 60%, white)); color:#07121f; box-shadow:0 8px 20px color-mix(in oklab, var(--primary) 35%, transparent)} |
|
.btn-primary:hover{transform:translateY(-2px)} |
|
.btn-outline{border-color:color-mix(in oklab, var(--text) 12%, transparent); color:var(--text); background:transparent} |
|
.btn-outline:hover{background:color-mix(in oklab, var(--text) 6%, transparent)} |
|
|
|
.toggles{display:flex; gap:.4rem; align-items:center} |
|
.toggle{display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .75rem; border-radius:999px; border:1px solid color-mix(in oklab, var(--text) 14%, transparent); background:color-mix(in oklab, var(--surface) 90%, transparent); color:var(--text-dim); cursor:pointer; font-weight:700} |
|
.toggle.active{color:var(--text); box-shadow:0 0 0 3px var(--ring) inset} |
|
|
|
|
|
@media (max-width: 980px){ |
|
.nav .link, .nav .btn.btn-primary{display:none} |
|
.nav.open .link, .nav.open .btn.btn-primary{display:inline-flex} |
|
.nav{flex-wrap:wrap} |
|
.nav.open{padding-bottom:.6rem; gap:.35rem} |
|
} |
|
|
|
|
|
.hero{position:relative; padding:clamp(72px, 9vw, 140px) 0 70px; isolation:isolate} |
|
.hero::before{content:""; position:absolute; inset:0; background: var(--hero-img) center/cover no-repeat; z-index:-2} |
|
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25)); z-index:-1} |
|
.hero h1{font-size:clamp(28px, 4.4vw, 54px); margin:0 0 .8rem; line-height:1.2; color:#fff} |
|
.hero p{color:rgba(255,255,255,.92); margin:0 0 1.2rem} |
|
.hero .btn-primary{background:linear-gradient(135deg, #ffffff, #eaf2ff); color:#0a1630; border:1px solid rgba(255,255,255,.6)} |
|
.hero .btn-outline{border-color:rgba(255,255,255,.75); color:#fff; background:rgba(255,255,255,.08)} |
|
.hero .btn-outline:hover{background:rgba(255,255,255,.16)} |
|
.hero .chip{border-color:rgba(255,255,255,.7); color:#fff; background:rgba(255,255,255,.08)} |
|
|
|
.hero-grid{display:grid; grid-template-columns:1fr; gap:30px; align-items:center} |
|
@media (min-width: 980px){ .hero-grid{grid-template-columns:1.1fr .9fr} } |
|
.hero-card{display:none} |
|
|
|
|
|
.section{padding:70px 0} |
|
.section h2{font-size:clamp(22px, 3.2vw, 34px); margin-top:0} |
|
.muted{color:var(--text-dim)} |
|
.grid{display:grid; gap:18px} |
|
.grid-3{grid-template-columns:repeat(3, 1fr)} |
|
.grid-4{grid-template-columns:repeat(4, 1fr)} |
|
.grid-2{grid-template-columns:repeat(2, 1fr)} |
|
@media (max-width: 1000px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}} |
|
@media (max-width: 640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}} |
|
.card{background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 98%, transparent), color-mix(in oklab, var(--surface) 92%, transparent)); border:1px solid color-mix(in oklab, var(--text) 8%, transparent); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)} |
|
.card h3{margin:.2rem 0 .4rem; font-size:1.05rem} |
|
.card img{height:160px; width:100%; object-fit:cover; border-radius:12px} |
|
.chip{display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border:1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius:999px; font-size:.8rem; color:var(--text-dim)} |
|
|
|
|
|
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px} |
|
@media (max-width: 900px){.stats{grid-template-columns:repeat(2,1fr)}} |
|
.stat{padding:22px; border-radius:var(--radius); background:var(--card-grad); border:1px solid color-mix(in oklab, var(--text) 8%, transparent); text-align:center} |
|
.stat .num{font-size:2.2rem; font-weight:900; letter-spacing:1px; background:linear-gradient(90deg, var(--gold), #fff); -webkit-background-clip:text; background-clip:text; color:transparent} |
|
.stat .lbl{color:var(--text-dim); font-weight:700} |
|
|
|
|
|
.acc-wrap{position:relative; margin-top:12px} |
|
.acc-list{display:flex; gap:10px; overflow:auto; scroll-snap-type:x mandatory; padding:6px 0} |
|
.acc-card{min-width:260px; scroll-snap-align:center; border-radius:14px; border:1px solid color-mix(in oklab, var(--text) 10%, transparent); padding:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); transition:transform .25s} |
|
.acc-card strong{display:block; margin-bottom:6px} |
|
.acc-card.active{outline:2px solid var(--primary); transform:translateY(-2px)} |
|
.acc-ctrl{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(0,0,0,.25); color:#fff; cursor:pointer; user-select:none} |
|
.acc-ctrl.left{left:-6px} .acc-ctrl.right{right:-6px} |
|
|
|
|
|
.gallery{position:relative} |
|
.carousel{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid color-mix(in oklab, var(--text) 8%, transparent); box-shadow:var(--shadow)} |
|
.slides{display:flex; transition:transform .6s ease; will-change:transform} |
|
.slide{min-width:100%; background:#000} |
|
.slide img{width:100%; height:clamp(240px, 50vw, 520px); object-fit:cover} |
|
.thumbs{display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; margin-top:10px} |
|
@media (max-width: 780px){.thumbs{grid-template-columns:repeat(4, 1fr)} .thumb img{height:60px}} |
|
.thumb{position:relative; cursor:pointer; border-radius:12px; overflow:hidden; border:2px solid transparent} |
|
.thumb img{height:86px; width:100%; object-fit:cover; filter:saturate(1.05)} |
|
.thumb.active{border-color:var(--primary)} |
|
.ctrl{position:absolute; inset-block:0; width:48px; display:grid; place-items:center; background:linear-gradient(90deg, rgba(0,0,0,.35), transparent); color:#fff; font-weight:800; cursor:pointer; user-select:none} |
|
.ctrl.right{right:0; transform:scaleX(-1)} .ctrl.left{left:0} |
|
|
|
|
|
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.72); display:none; place-items:center; z-index:80} |
|
.lightbox.open{display:grid} |
|
.lightbox img{max-width:min(92vw, 1200px); max-height:86vh; border-radius:16px} |
|
|
|
|
|
.marquee{overflow:hidden; border:1px solid color-mix(in oklab, var(--text) 8%, transparent); border-radius:var(--radius); background:var(--card-grad)} |
|
.marquee-track{display:flex; gap:28px; padding:12px; animation:scroll 28s linear infinite} |
|
.partner{padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid color-mix(in oklab, var(--text) 8%, transparent); white-space:nowrap} |
|
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} |
|
|
|
|
|
.timeline{position:relative; padding-inline-start:20px} |
|
.timeline::before{content:""; position:absolute; inset-block:0; inline-size:3px; background:color-mix(in oklab, var(--primary) 45%, transparent); inset-inline-start:6px; border-radius:999px} |
|
.step{position:relative; margin:10px 0; padding:10px 12px 10px 28px; border-radius:12px; background:var(--card-grad); border:1px solid color-mix(in oklab, var(--text) 8%, transparent)} |
|
.step::before{content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:var(--primary); inset-inline-start:-2px; inset-block-start:16px; box-shadow:0 0 0 4px color-mix(in oklab, var(--primary) 30%, transparent)} |
|
|
|
|
|
.faq-item{border:1px solid color-mix(in oklab, var(--text) 10%, transparent); border-radius:14px; background:var(--card-grad); overflow:hidden} |
|
.faq-q{display:flex; justify-content:space-between; align-items:center; padding:14px; cursor:pointer; font-weight:700} |
|
.faq-a{padding:0 14px 14px; display:none; color:var(--text-dim)} |
|
.faq-item.open .faq-a{display:block} |
|
|
|
|
|
footer{margin-top:60px; padding:40px 0 22px; background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 70%, transparent), color-mix(in oklab, var(--surface) 95%, transparent)); border-top:1px solid color-mix(in oklab, var(--text) 8%, transparent)} |
|
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:22px} |
|
@media (max-width: 900px){.footer-grid{grid-template-columns:1fr}} |
|
.socials{display:flex; gap:10px; flex-wrap:wrap} |
|
.socials a{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; border:1px solid color-mix(in oklab, var(--text) 12%, transparent)} |
|
.socials a:hover{background:color-mix(in oklab, var(--text) 6%, transparent)} |
|
.copyright{margin-top:18px; color:var(--text-dim); font-size:.9rem} |
|
|
|
|
|
#toTop{position:fixed; bottom:18px; left:18px; width:48px; height:48px; display:grid; place-items:center; border-radius:999px; background:color-mix(in oklab, var(--text) 10%, transparent); border:1px solid color-mix(in oklab, var(--text) 18%, transparent); cursor:pointer; backdrop-filter:blur(6px); z-index:60; opacity:0; transform:translateY(12px); transition:var(--transition)} |
|
#toTop.show{opacity:1; transform:none} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<header> |
|
<div class="container nav" id="navBar"> |
|
<a class="brand" href="#home" aria-label="الرئيسية"> |
|
<img src="https://ufastpro.com/wp-content/uploads/2025/04/476234917_1002033431973236_2935522081755714863_n.jpg" alt="شعار معهد مدينة العلوم العصرية"/> |
|
<div class="title" id="brandTitle">معهد مدينة العلوم العصرية</div> |
|
</a> |
|
<nav style="display:flex; align-items:center; gap:.4rem; flex-wrap:wrap"> |
|
<a class="link" href="#about" data-i18n="nav.about">عن المعهد</a> |
|
<a class="link" href="#departments" data-i18n="nav.depts">الأقسام</a> |
|
<a class="link" href="#features" data-i18n="nav.features">المميزات</a> |
|
<a class="link" href="#steps" data-i18n="nav.steps">خطوات التقديم</a> |
|
<a class="link" href="#documents" data-i18n="nav.docs">الوثائق</a> |
|
<a class="link" href="#numbers" data-i18n="nav.numbers">في أرقام</a> |
|
<a class="link" href="#gallery" data-i18n="nav.gallery">المعرض</a> |
|
<a class="link" href="#testimonials" data-i18n="nav.testimonials">آراء طلاب</a> |
|
<a class="link" href="#partners" data-i18n="nav.partners">شركاؤنا</a> |
|
<a class="link" href="#faq" data-i18n="nav.faq">الأسئلة</a> |
|
<a class="link" href="#contact" data-i18n="nav.contact">تواصل</a> |
|
<a class="btn btn-primary" href="#apply" data-i18n="nav.apply">قدّم الآن</a> |
|
<div class="toggles"> |
|
<button id="langAR" class="toggle active">AR</button> |
|
<button id="langEN" class="toggle">EN</button> |
|
<button id="themeToggle" class="toggle" title="Theme">🌙</button> |
|
<button id="menuToggle" class="toggle" title="Menu">☰</button> |
|
</div> |
|
</nav> |
|
</div> |
|
</header> |
|
|
|
|
|
<section id="home" class="hero"> |
|
<div class="container hero-grid"> |
|
<div> |
|
<span class="chip" data-i18n="hero.since">منذ 1994</span> |
|
<h1><span data-i18n="hero.title">تعليم يواكب المستقبل —</span></h1> |
|
<p class="muted" data-i18n="hero.desc">نقدّم برامج تعليمية متخصصة بدمج التقنيات الحديثة والمهارات العملية ضمن بيئة أكاديمية داعمة.</p> |
|
<div style="display:flex; gap:.6rem; flex-wrap:wrap; margin-top:12px"> |
|
<a class="btn btn-primary" href="#departments" data-i18n="hero.cta1">استكشف الأقسام</a> |
|
<a class="btn btn-outline" href="#gallery" data-i18n="hero.cta2">شاهد المعرض</a> |
|
</div> |
|
</div> |
|
<div class="hero-card"> |
|
<img src="https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.57-PM-2.jpeg" alt="صورة واجهة المعهد"/> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="about" class="section"> |
|
<div class="container"> |
|
<h2 data-i18n="about.title">عن المعهد</h2> |
|
<p class="muted" data-i18n="about.lead">مؤسسة تعليمية فوق متوسطة معتمدة تركز على إعداد كوادر مؤهلة علميًا وعمليًا، مع دمج الذكاء الاصطناعي والتحول الرقمي في المناهج.</p> |
|
|
|
<div class="grid grid-3" style="margin-top:18px"> |
|
<div class="card"> |
|
<div class="chip" data-i18n="about.chip1">📚 مناهج مطوَّرة</div> |
|
<h3 data-i18n="about.h3_1">تعلم تطبيقي</h3> |
|
<p class="muted" data-i18n="about.p1">مشاريع عملية وتدريب ميداني وشراكات مع شركات رائدة لتجربة تعليم واقعية.</p> |
|
</div> |
|
<div class="card"> |
|
<div class="chip" data-i18n="about.chip2">💡 تقنيات حديثة</div> |
|
<h3 data-i18n="about.h3_2">ذكاء اصطناعي في التعليم</h3> |
|
<p class="muted" data-i18n="about.p2">تضمين مفاهيم وأدوات الذكاء الاصطناعي في أغلب المقررات لتنمية مهارات المستقبل.</p> |
|
</div> |
|
<div class="card"> |
|
<div class="chip" data-i18n="about.chip3">🎯 توظيف</div> |
|
<h3 data-i18n="about.h3_3">جاهزية لسوق العمل</h3> |
|
<p class="muted" data-i18n="about.p3">إرشاد مهني وورش عمل وسجل قوي لتوظيف الخريجين في قطاعات متعددة.</p> |
|
</div> |
|
</div> |
|
|
|
<div class="card" style="margin-top:18px"> |
|
<h3 data-i18n="accredit.title">الاعتمادات الرسمية</h3> |
|
<div class="acc-wrap" id="accWrap"> |
|
<button class="acc-ctrl left" id="accPrev" aria-label="Prev">❮</button> |
|
<ul id="accreditList" class="acc-list muted" style="margin:0; padding:6px 0;"></ul> |
|
<button class="acc-ctrl right" id="accNext" aria-label="Next">❯</button> |
|
</div> |
|
<p class="muted" id="admissionsNote" style="margin-top:.6rem"></p> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="departments" class="section" style="padding-top:40px"> |
|
<div class="container"> |
|
<h2 data-i18n="depts.title">الأقسام الأكاديمية</h2> |
|
<div id="deptsGrid" class="grid grid-3" style="margin-top:14px"></div> |
|
|
|
|
|
<h3 style="margin:18px 0 8px" data-i18n="tracks.title">مسارات اختيارية متقدمة</h3> |
|
<div id="tracksGrid" class="grid grid-3"></div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="features" class="section"> |
|
<div class="container"> |
|
<h2 data-i18n="features.title">مميزات المعهد</h2> |
|
<p class="muted" data-i18n="features.lead">قيمة حقيقية أثناء الدراسة وبعد التخرج.</p> |
|
<div id="featuresGrid" class="grid grid-3" style="margin-top:14px"></div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="steps" class="section"> |
|
<div class="container"> |
|
<h2 data-i18n="steps.title">خطوات التقديم</h2> |
|
<div id="stepsList" class="timeline" style="margin-top:10px"></div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="documents" class="section"> |
|
<div class="container"> |
|
<div class="grid grid-2"> |
|
<div class="card"> |
|
<h3 data-i18n="docs.title">الأوراق المطلوبة</h3> |
|
<ul id="docsList" class="muted" style="margin:8px 0 0; padding-inline-start:1.2rem"></ul> |
|
</div> |
|
<div class="card"> |
|
<h3 data-i18n="certs.title">الشهادات بعد التخرج</h3> |
|
<ul id="certsList" class="muted" style="margin:8px 0 0; padding-inline-start:1.2rem"></ul> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="numbers" class="section"> |
|
<div class="container"> |
|
<h2 data-i18n="numbers.title">المعهد في أرقام</h2> |
|
<p class="muted" data-i18n="numbers.lead">نمو مستمر وشراكات فعّالة وبرامج تعلّم تطبيقي منذ 1994.</p> |
|
<div class="stats" style="margin-top:14px"> |
|
<div class="stat"><div class="num" data-to="31">0</div><div class="lbl" data-i18n="numbers.years">سنة خبرة</div></div> |
|
<div class="stat"><div class="num" data-to="4500">0</div><div class="lbl" data-i18n="numbers.grads">+ خريج</div></div> |
|
<div class="stat"><div class="num" data-to="1200">0</div><div class="lbl" data-i18n="numbers.students">+ طالب حاليًا</div></div> |
|
<div class="stat"><div class="num" data-to="45">0</div><div class="lbl" data-i18n="numbers.partners">+ شراكة وتعاون</div></div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="gallery" class="section gallery"> |
|
<div class="container"> |
|
<h2 data-i18n="gallery.title">معرض الصور</h2> |
|
<p class="muted" data-i18n="gallery.lead">لقطات من الفعاليات، القاعات، المعامل، وأنشطة الطلاب.</p> |
|
|
|
<div class="carousel" aria-label="سلايدر صور"> |
|
<div class="slides" id="slides"></div> |
|
<div class="ctrl left" id="prev" title="السابق">❮</div> |
|
<div class="ctrl right" id="next" title="التالي">❮</div> |
|
</div> |
|
<div class="thumbs" id="thumbs"></div> |
|
|
|
<div class="lightbox" id="lightbox" aria-hidden="true"> |
|
<img id="lightboxImg" src="" alt="" /> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="testimonials" class="section"> |
|
<div class="container"> |
|
<h2 data-i18n="testimonials.title">آراء طلابنا</h2> |
|
<p class="muted" data-i18n="testimonials.lead">مقتطفات من تجارب واقعية داخل المعهد.</p> |
|
<div class="carousel" style="padding:10px"> |
|
<div class="slides" id="testiSlides"></div> |
|
<div class="ctrl left" id="testiPrev">❮</div> |
|
<div class="ctrl right" id="testiNext">❮</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="partners" class="section"> |
|
<div class="container"> |
|
<h2 data-i18n="partners.title">شركاؤنا</h2> |
|
<p class="muted" data-i18n="partners.lead">شراكات تدريب وتوظيف مع جهات رائدة.</p> |
|
<div class="marquee" aria-label="شركاؤنا"> |
|
<div class="marquee-track" id="partnersTrack"> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="faq" class="section"> |
|
<div class="container"> |
|
<h2 data-i18n="faq.title">الأسئلة الشائعة</h2> |
|
<div id="faqWrap" class="grid grid-2" style="margin-top:12px"></div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="contact" class="section" style="padding-top:40px"> |
|
<div class="container"> |
|
<h2 data-i18n="contact.title">تواصل معنا</h2> |
|
<div class="grid grid-2" style="margin-top:14px"> |
|
<div class="card"> |
|
<h3 data-i18n="contact.h3_1">العنوان وساعات العمل</h3> |
|
<p class="muted" id="address"></p> |
|
<p class="muted" id="hours"></p> |
|
<div class="card" style="margin-top:10px; padding:0; overflow:hidden"> |
|
<iframe id="mapFrame" title="Map" style="border:0; width:100%; height:260px" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> |
|
</div> |
|
</div> |
|
<div class="card"> |
|
<h3 data-i18n="contact.h3_2">أرقام ووسائل التواصل</h3> |
|
<ul class="muted" id="phones" style="margin:0; padding-inline-start:1.2rem"></ul> |
|
<p class="muted" id="email"></p> |
|
<div class="socials" style="margin-top:8px"> |
|
<a id="fb" href="#" aria-label="Facebook" title="Facebook"> |
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 12.06C22 6.505 17.523 2 12 2S2 6.505 2 12.06c0 4.99 3.657 9.129 8.438 9.94v-7.03H7.898v-2.91h2.54V9.845c0-2.506 1.492-3.89 3.772-3.89 1.094 0 2.238.196 2.238.196v2.47h-1.26c-1.243 0-1.63.776-1.63 1.571v1.885h2.773l-.443 2.91h-2.33v7.03C18.343 21.188 22 17.049 22 12.06z" fill="currentColor"/></svg> |
|
</a> |
|
<a id="ig" href="#" aria-label="Instagram" title="Instagram"> |
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm10 2H7a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3zm-5 3a5 5 0 110 10 5 5 0 010-10zm6.5-.25a1.25 1.25 0 110 2.5 1.25 1.25 0 010-2.5z" fill="currentColor"/></svg> |
|
</a> |
|
<a id="yt" href="#" aria-label="YouTube" title="YouTube"> |
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.5 7.5s-.2-1.6-.8-2.3c-.7-.8-1.6-.8-2-1C18.7 3.8 12 3.8 12 3.8h0s-6.7 0-8.7.4c-.4.1-1.3.2-2 1C.7 5.9.5 7.5.5 7.5S0 9.5 0 11.5v1c0 2 .5 4 .5 4s.2 1.6.8 2.3c.7.8 1.6.8 2 1 2 .4 8.7.4 8.7.4s.6.1 0 0zM9.5 9.8l6 3.2-6 3.2V9.8z" fill="currentColor"/></svg> |
|
</a> |
|
<a id="wa" href="#" aria-label="WhatsApp" title="WhatsApp"> |
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 .5a11.5 11.5 0 00-9.94 17.28L.5 23.5l5.9-1.54A11.5 11.5 0 1012 .5zm0 2a9.5 9.5 0 110 19 9.41 9.41 0 01-4.86-1.33l-.35-.21-3.49.91.93-3.42-.22-.36A9.41 9.41 0 012 12a9.5 9.5 0 0110-9.5zm5.54 12.74c-.09-.15-.35-.24-.73-.42s-2.25-1.11-2.6-1.24c-.35-.13-.61-.2-.86.2-.25.4-.99 1.24-1.21 1.5-.22.26-.45.3-.83.11-.38-.2-1.6-.59-3.04-1.88-1.12-.99-1.87-2.22-2.09-2.6-.22-.38-.02-.59.17-.78.17-.17.38-.45.56-.67.19-.22.25-.38.38-.63.13-.25.07-.48-.03-.67-.11-.2-.86-2.06-1.18-2.83-.31-.75-.63-.65-.86-.66l-.73-.01c-.25 0-.67.1-1.02.48-.35.38-1.34 1.31-1.34 3.2 0 1.9 1.37 3.74 1.56 4 .19.26 2.69 4.1 6.5 5.75.91.39 1.62.62 2.17.79.91.29 1.74.25 2.4.15.73-.11 2.25-.92 2.57-1.81.32-.89.32-1.65.22-1.81z" fill="currentColor"/></svg> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="apply" class="section" style="padding-top:20px"> |
|
<div class="container card"> |
|
<div style="display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap"> |
|
<div> |
|
<h3 style="margin:0 0 .4rem" data-i18n="cta.title">انضم الآن إلى مجتمعنا</h3> |
|
<p class="muted" style="margin:0" data-i18n="cta.desc">ابدأ رحلتك المهنية مع برامجنا العملية وشركائنا في السوق.</p> |
|
</div> |
|
<a class="btn btn-primary" href="#contact" title="التقديم" data-i18n="cta.button">قدّم الآن</a> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<footer> |
|
<div class="container footer-grid"> |
|
<div> |
|
<div class="brand" style="margin-bottom:8px"> |
|
<img src="https://ufastpro.com/wp-content/uploads/2025/04/476234917_1002033431973236_2935522081755714863_n.jpg" alt="شعار المعهد"/> |
|
<div class="title" id="brandTitleFooter">معهد مدينة العلوم العصرية</div> |
|
</div> |
|
<p class="muted" data-i18n="footer.tagline">نصنع تجربة تعليمية تجمع بين العلم والتطبيق والتقنية، لنبني مستقبلًا أفضل لطلابنا.</p> |
|
<div class="socials" style="margin-top:10px"> |
|
<a id="fb2" href="#" aria-label="Facebook" title="Facebook"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12.06C22 6.505 17.523 2 12 2S2 6.505 2 12.06c0 4.99 3.657 9.129 8.438 9.94v-7.03H7.898v-2.91h2.54V9.845c0-2.506 1.492-3.89 3.772-3.89 1.094 0 2.238.196 2.238.196v2.47h-1.26c-1.243 0-1.63.776-1.63 1.571v1.885h2.773l-.443 2.91h-2.33v7.03C18.343 21.188 22 17.049 22 12.06z"/></svg></a> |
|
<a id="ig2" href="#" aria-label="Instagram" title="Instagram"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm10 2H7a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3zm-5 3a5 5 0 110 10 5 5 0 010-10zm6.5-.25a1.25 1.25 0 110 2.5 1.25 1.25 0 010-2.5z"/></svg></a> |
|
<a id="yt2" href="#" aria-label="YouTube" title="YouTube"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M23.5 7.5s-.2-1.6-.8-2.3c-.7-.8-1.6-.8-2-1C18.7 3.8 12 3.8 12 3.8h0s-6.7 0-8.7.4c-.4.1-1.3.2-2 1C.7 5.9.5 7.5.5 7.5S0 9.5 0 11.5v1c0 2 .5 4 .5 4s.2 1.6.8 2.3c.7.8 1.6.8 2 1 2 .4 8.7.4 8.7.4s.6.1 0 0z"/></svg></a> |
|
<a id="wa2" href="#" aria-label="WhatsApp" title="WhatsApp"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5a11.5 11.5 0 00-9.94 17.28L.5 23.5l5.9-1.54A11.5 11.5 0 1012 .5z"/></svg></a> |
|
</div> |
|
<div class="copyright"> |
|
© <span id="year"></span> <span data-i18n="brand">معهد مدينة العلوم العصرية</span> — <span data-i18n="rights">جميع الحقوق محفوظة.</span> |
|
<br/><span data-i18n="footer.designedBy">تصميم شركة فاست برو — </span><a href="https://ufastpro.com" target="_blank" rel="noopener">ufastpro.com</a> |
|
</div> |
|
</div> |
|
<div> |
|
<h4 style="margin:6px 0 8px" data-i18n="footer.quick">روابط سريعة</h4> |
|
<ul style="list-style:none; padding:0; margin:0; color:var(--text-dim)"> |
|
<li><a href="#about" data-i18n="nav.about">عن المعهد</a></li> |
|
<li><a href="#departments" data-i18n="nav.depts">الأقسام</a></li> |
|
<li><a href="#numbers" data-i18n="nav.numbers">في أرقام</a></li> |
|
<li><a href="#gallery" data-i18n="nav.gallery">المعرض</a></li> |
|
<li><a href="#faq" data-i18n="nav.faq">الأسئلة</a></li> |
|
</ul> |
|
</div> |
|
<div> |
|
<h4 style="margin:6px 0 8px" data-i18n="footer.contact">للتواصل</h4> |
|
<ul style="list-style:none; padding:0; margin:0; color:var(--text-dim)" id="footerContact"></ul> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
|
|
<button id="toTop" aria-label="أعلى">↑</button> |
|
|
|
<script> |
|
|
|
document.getElementById('year').textContent = new Date().getFullYear(); |
|
|
|
|
|
document.querySelectorAll('a[href="#"]').forEach(a=>{ |
|
a.addEventListener('click', e=> e.preventDefault()); |
|
}); |
|
|
|
|
|
const GALLERY_IMAGES = [ |
|
'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-07-29-at-5.22.39-AM-2.jpeg', |
|
'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.46-PM.jpeg', |
|
'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.47-PM-1.jpeg', |
|
'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.47-PM.jpeg', |
|
'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.48-PM-1.jpeg', |
|
'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.49-PM-2.jpeg', |
|
'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.49-PM.jpeg', |
|
'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.50-PM-1.jpeg', |
|
'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.50-PM-2.jpeg', |
|
'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.51-PM-3.jpeg', |
|
'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.52-PM.jpeg', |
|
'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.54-PM-2-scaled.jpeg' |
|
]; |
|
|
|
const CONTACT = { |
|
addressAR: 'القاهرة، جاردن سيتي، شارع جمال الدين أبو المحاسن', |
|
addressEN: 'Cairo, Garden City, Gamal El-Din Abu El-Mahasen St.', |
|
hoursAR: 'التقديم يوميًا من 10 صباحًا لـ 5 عصرًا (ماعدا الجمعة)', |
|
hoursEN: 'Applications daily 10:00–17:00 (except Friday)', |
|
phones: ['01020272465','01142369026','0227905507'], |
|
email: 'mscieg.proton.me', |
|
mapsQuery: 'Cairo%2C%20Garden%20City%2C%20Gamal%20El-Din%20Abu%20El-Mahasen' |
|
}; |
|
|
|
const ACCREDIT = { |
|
ar: [ |
|
'وزارة التربية والتعليم — (رقم 54 لسنة 1994)', |
|
'وزارة الاتصالات — (رقم 15 لسنة 1994)', |
|
'وزارة الدفاع — (تأجيل التجنيد رقم 176 لسنة 2004)' |
|
], |
|
en: [ |
|
'Ministry of Education — (Decree No. 54/1994)', |
|
'Ministry of Communications — (Decree No. 15/1994)', |
|
'Ministry of Defense — (Service deferment No. 176/2004)' |
|
], |
|
noteAR: 'يؤجل التجنيد، ويُقبل من مجموع 50% فأكثر دون شرط سن أو سنة تخرج. مدة الدراسة: سنتان (4 تيرم).', |
|
noteEN: 'Military service deferred. Admission 50%+ with no age or grad-year limits. Study: 2 years (4 terms).' |
|
}; |
|
|
|
|
|
const DEPARTMENTS = [ |
|
{ key: 'intl_comm', img: 'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.34.01-PM-2.jpeg' }, |
|
{ key: 'it_is', img: 'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.49-PM-3.jpeg' }, |
|
{ key: 'survey', img: 'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.53-PM-2.jpeg' }, |
|
{ key: 'business', img: 'https://mscieg.pro/wp-content/uploads/2025/07/WhatsApp-Image-2025-07-29-at-4.52.34-AM.jpeg' }, |
|
{ key: 'tourism', img: 'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.56-PM-2.jpeg' }, |
|
{ key: 'languages', img: 'https://mscieg.pro/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-08-at-8.33.48-PM-2.jpeg' } |
|
]; |
|
|
|
|
|
const TRACKS = [ |
|
{ key:'ai_track', img:'https://images.unsplash.com/photo-1677442136019-21780ecad995?q=80&w=1600&auto=format&fit=crop' }, |
|
{ key:'cyber_track', img:'https://images.unsplash.com/photo-1510511459019-5dda7724fd87?q=80&w=1600&auto=format&fit=crop' }, |
|
{ key:'media_track', img:'https://images.unsplash.com/photo-1516280440614-37939bbacd81?q=80&w=1600&auto=format&fit=crop' } |
|
]; |
|
|
|
|
|
const PARTNERS = ['TelecomCo','EduLabs','MediaHub','CityBank','Nile Tours','Atlas GIS','SoftVision','TechBridge','SmartHotels','FutureNet','Mediatech','CloudX','SecureNet','GreenMap']; |
|
|
|
|
|
const TESTIMONIALS = [ |
|
{ nameAR:'آية محمد', nameEN:'Aya Mohamed', roleAR:'خريجة نظم ومعلومات', roleEN:'IS Graduate', textAR:'الدراسة عملية جدًا، تدريبنا في شركات حقيقية وساعدوني أجهز CV ومقابلات.', textEN:'Very practical studies, real-company internships and strong career support.' }, |
|
{ nameAR:'يوسف علي', nameEN:'Youssef Ali', roleAR:'طالب اتصالات', roleEN:'Communications Student', textAR:'المعامل ممتازة والأساتذة مهتمين، في مشاريع كل تيرم بتخلينا نتعلم بسرعة.', textEN:'Great labs and engaged instructors; term projects really accelerate learning.' }, |
|
{ nameAR:'مريم خالد', nameEN:'Maryam Khaled', roleAR:'خريجة لغات وترجمة', roleEN:'Languages Graduate', textAR:'استفدت من ورش الترجمة والتدريب العملي، وقدرت ألاقي تدريب ثم وظيفة.', textEN:'Workshops + internships helped me land a job after graduation.' } |
|
]; |
|
|
|
|
|
const FAQ = [ |
|
{ qAR:'هل يوجد حد أقصى للعمر؟', aAR:'لا يوجد حد للسن أو سنة التخرج.', qEN:'Is there an age limit?', aEN:'No age or graduation-year limits.' }, |
|
{ qAR:'ما الحد الأدنى للقبول؟', aAR:'50% فأكثر للثانوية العامة والأزهرية والدبلومات أو ما يعادلها.', qEN:'Minimum admission?', aEN:'50%+ (or equivalent) for eligible certificates.' }, |
|
{ qAR:'مدة الدراسة؟', aAR:'سنتان فقط (4 تيرم).', qEN:'Study duration?', aEN:'Two years (4 terms).' }, |
|
{ qAR:'هل يؤجل التجنيد؟', aAR:'نعم، يوجد تأجيل للتجنيد وفق القرار المذكور.', qEN:'Military deferment?', aEN:'Yes, deferment as indicated in accreditation.' }, |
|
{ qAR:'هل يوجد تقسيط للمصروفات؟', aAR:'نظام تقسيط على 3 أقساط مع خصومات للمتفوقين وغير القادرين.', qEN:'Installments/discounts?', aEN:'Tuition can be paid in 3 installments; merit and hardship discounts available.' } |
|
]; |
|
|
|
|
|
const FEATURES = [ |
|
{ icon:'🖥️', key:'modern_classrooms' }, |
|
{ icon:'🧪', key:'intensive_training' }, |
|
{ icon:'👩🏫', key:'top_faculty' }, |
|
{ icon:'💼', key:'career_fair' }, |
|
{ icon:'🏆', key:'awards' }, |
|
{ icon:'💳', key:'discounts' }, |
|
{ icon:'🏠', key:'housing' }, |
|
{ icon:'🤝', key:'industry_partners' }, |
|
{ icon:'📜', key:'gov_certs' } |
|
]; |
|
|
|
|
|
function applyI18N(lang){ |
|
const dict = I18N[lang]; |
|
document.querySelectorAll('[data-i18n]').forEach(node=>{ |
|
const key = node.getAttribute('data-i18n'); |
|
const parts = key.split('.'); |
|
let val = dict; |
|
for(const p of parts){ val = val?.[p]; } |
|
if(typeof val === 'string'){ node.textContent = val; } |
|
}); |
|
document.getElementById('brandTitle').textContent = dict.brand; |
|
document.getElementById('brandTitleFooter').textContent = dict.brand; |
|
|
|
|
|
const list = document.getElementById('accreditList'); |
|
list.innerHTML = ''; |
|
(lang==='ar' ? ACCREDIT.ar : ACCREDIT.en).forEach((item)=>{ |
|
const [name, detail=''] = item.split('—'); |
|
const li = document.createElement('li'); |
|
li.className = 'acc-card'; |
|
li.innerHTML = `<strong>${name.trim()}</strong><span class="muted">${detail.trim()}</span>`; |
|
list.appendChild(li); |
|
}); |
|
document.getElementById('admissionsNote').textContent = (lang==='ar') ? ACCREDIT.noteAR : ACCREDIT.noteEN; |
|
|
|
|
|
const grid = document.getElementById('deptsGrid'); |
|
grid.innerHTML = ''; |
|
DEPARTMENTS.forEach(dep=>{ |
|
const card = document.createElement('div'); card.className = 'card'; |
|
const img = document.createElement('img'); img.src = dep.img; img.alt = dict.depTitles[dep.key]; |
|
const h3 = document.createElement('h3'); h3.textContent = dict.depTitles[dep.key]; |
|
const p = document.createElement('p'); p.className='muted'; p.textContent = dict.depDescs[dep.key]; |
|
card.append(img,h3,p); grid.appendChild(card); |
|
}); |
|
|
|
|
|
const tracksGrid = document.getElementById('tracksGrid'); |
|
tracksGrid.innerHTML = ''; |
|
TRACKS.forEach(t=>{ |
|
const c = document.createElement('div'); c.className='card'; |
|
c.innerHTML = `<img src="${t.img}" alt=""><h3>${dict.trackTitles[t.key]}</h3><p class="muted">${dict.trackDescs[t.key]}</p>`; |
|
tracksGrid.appendChild(c); |
|
}); |
|
|
|
|
|
const fgrid = document.getElementById('featuresGrid'); |
|
fgrid.innerHTML = ''; |
|
FEATURES.forEach(f=>{ |
|
const c = document.createElement('div'); c.className='card'; |
|
const title = dict.features.titles[f.key]; const d = dict.features.descs[f.key]; |
|
c.innerHTML = `<div class="chip">${f.icon}</div><h3>${title}</h3><p class="muted">${d}</p>`; |
|
fgrid.appendChild(c); |
|
}); |
|
|
|
|
|
const stepsList = document.getElementById('stepsList'); |
|
stepsList.innerHTML = ''; |
|
dict.steps.list.forEach(s=>{ |
|
const el = document.createElement('div'); el.className='step'; |
|
el.innerHTML = `<strong>${s.t}</strong><div class="muted">${s.d}</div>`; |
|
stepsList.appendChild(el); |
|
}); |
|
|
|
|
|
const docs = document.getElementById('docsList'); docs.innerHTML=''; |
|
dict.docs.items.forEach(i=> docs.insertAdjacentHTML('beforeend', `<li>${i}</li>`)); |
|
const certs = document.getElementById('certsList'); certs.innerHTML=''; |
|
dict.certs.items.forEach(i=> certs.insertAdjacentHTML('beforeend', `<li>${i}</li>`)); |
|
|
|
|
|
document.getElementById('address').textContent = (lang==='ar') ? CONTACT.addressAR : CONTACT.addressEN; |
|
document.getElementById('hours').textContent = (lang==='ar') ? CONTACT.hoursAR : CONTACT.hoursEN; |
|
|
|
const mapSrc = `https://www.google.com/maps?q=${CONTACT.mapsQuery}&output=embed`; |
|
document.getElementById('mapFrame').src = mapSrc; |
|
|
|
|
|
const phones = document.getElementById('phones'); phones.innerHTML = ''; |
|
CONTACT.phones.forEach(ph=>{ |
|
const li = document.createElement('li'); |
|
const tel = document.createElement('a'); tel.href = `tel:+2${ph.replace(/\D/g,'')}`; tel.textContent = ph; li.appendChild(tel); |
|
const wa = document.createElement('a'); wa.href = `https://wa.me/2${ph.replace(/\D/g,'')}`; wa.target='_blank'; wa.style.marginInlineStart = '.6rem'; wa.textContent = (lang==='ar') ? 'واتساب' : 'WhatsApp'; |
|
li.appendChild(document.createTextNode(' — ')); li.appendChild(wa); |
|
phones.appendChild(li); |
|
}); |
|
const mail = document.getElementById('email'); |
|
mail.innerHTML = (lang==='ar' ? 'البريد الإلكتروني: ' : 'Email: ') + `<a href="mailto:${CONTACT.email}">${CONTACT.email}</a>`; |
|
|
|
|
|
const fc = document.getElementById('footerContact'); |
|
fc.innerHTML = ''; |
|
CONTACT.phones.forEach(ph=>{ |
|
const li = document.createElement('li'); |
|
li.innerHTML = `<a href="tel:+2${ph.replace(/\D/g,'')}">${ph}</a>`; fc.appendChild(li); |
|
}); |
|
const liMail = document.createElement('li'); |
|
liMail.innerHTML = `<a href="mailto:${CONTACT.email}">${CONTACT.email}</a>`; fc.appendChild(liMail); |
|
|
|
|
|
document.documentElement.lang = (lang==='ar' ? 'ar' : 'en'); |
|
document.documentElement.dir = (lang==='ar' ? 'rtl' : 'ltr'); |
|
|
|
|
|
document.querySelectorAll('[data-i18n="footer.designedBy"]').forEach(n=> n.textContent = dict.footer.designedBy); |
|
|
|
|
|
initAccreditSlider(); |
|
} |
|
|
|
|
|
const I18N = { |
|
ar: { |
|
brand: 'معهد مدينة العلوم العصرية', |
|
rights: 'جميع الحقوق محفوظة.', |
|
nav: { about: 'عن المعهد', depts: 'الأقسام', numbers: 'في أرقام', gallery: 'المعرض', contact: 'تواصل', apply: 'قدّم الآن', features:'المميزات', steps:'خطوات التقديم', docs:'الوثائق', faq:'الأسئلة', partners:'شركاؤنا', testimonials:'آراء طلاب' }, |
|
hero: { title: 'تعليم يواكب المستقبل —', since: 'منذ 1994', desc: 'نقدّم برامج تعليمية متخصصة بدمج التقنيات الحديثة والمهارات العملية ضمن بيئة أكاديمية داعمة.', cta1:'استكشف الأقسام', cta2:'شاهد المعرض' }, |
|
about: { |
|
title:'عن المعهد', |
|
lead:'مؤسسة تعليمية فوق متوسطة معتمدة تركز على إعداد كوادر مؤهلة علميًا وعمليًا، مع دمج الذكاء الاصطناعي والتحول الرقمي في المناهج.', |
|
chip1:'📚 مناهج مطوَّرة', h3_1:'تعلم تطبيقي', p1:'مشاريع عملية وتدريب ميداني وشراكات مع شركات رائدة لتجربة تعليم واقعية.', |
|
chip2:'💡 تقنيات حديثة', h3_2:'ذكاء اصطناعي في التعليم', p2:'تضمين مفاهيم وأدوات الذكاء الاصطناعي في أغلب المقررات لتنمية مهارات المستقبل.', |
|
chip3:'🎯 توظيف', h3_3:'جاهزية لسوق العمل', p3:'إرشاد مهني وورش عمل وسجل قوي لتوظيف الخريجين في قطاعات متعددة.' |
|
}, |
|
accredit: { title:'الاعتمادات الرسمية' }, |
|
depts: { title:'الأقسام الأكاديمية' }, |
|
depTitles: { |
|
intl_comm:'اتصالات دولية ولاسلكية', |
|
it_is:'نظم ومعلومات وحاسب آلي', |
|
survey:'مساحة وخرائط هندسية', |
|
business:'إدارة أعمال', |
|
tourism:'سياحة وفنادق وضيافة', |
|
languages:'لغات وترجمة' |
|
}, |
|
depDescs: { |
|
intl_comm:'اتصالات رقمية، شبكات لاسلكية، إنترنت الأشياء وتقنيات الجيل الجديد.', |
|
it_is:'برمجة، قواعد بيانات، شبكات، وأمن معلومات مع تطبيقات الذكاء الاصطناعي.', |
|
survey:'قياسات طبوغرافية، GIS، استشعار عن بُعد، وتطبيقات الخرائط الذكية.', |
|
business:'إدارة، محاسبة، تسويق، ريادة أعمال، ومهارات قيادية.', |
|
tourism:'إدارة الفنادق، الضيافة، التسويق السياحي وخدمة العملاء.', |
|
languages:'مهارات الترجمة والتحرير واللغويات التطبيقية.' |
|
}, |
|
tracks: { title:'مسارات اختيارية متقدمة' }, |
|
trackTitles:{ ai_track:'مسار الذكاء الاصطناعي والتحول الرقمي', cyber_track:'مسار الأمن السيبراني', media_track:'مسار الإنتاج الإعلامي الرقمي' }, |
|
trackDescs:{ ai_track:'مشاريع تطبيقية بالذكاء الاصطناعي ضمن التخصصات.', cyber_track:'أساسيات أمن الشبكات والاختبارات.', media_track:'صناعة محتوى وتصوير ومونتاج.' }, |
|
|
|
features:{ title:'مميزات المعهد', lead:'قيمة حقيقية أثناء الدراسة وبعد التخرج.', |
|
titles:{ |
|
modern_classrooms:'قاعات حديثة مجهزة', |
|
intensive_training:'تدريب عملي مكثف', |
|
top_faculty:'هيئة تدريس متميزة', |
|
career_fair:'ملتقى توظيفي سنوي', |
|
awards:'جوائز وتكريم للأوائل', |
|
discounts:'خصومات وتقسيط', |
|
housing:'سكن للمغتربين', |
|
industry_partners:'شراكات صناعية', |
|
gov_certs:'شهادات حكومية إضافية' |
|
}, |
|
descs:{ |
|
modern_classrooms:'قاعات مكيفة مزودة بشاشات عرض ومعامل متقدمة.', |
|
intensive_training:'برامج تدريب داخل كبرى الشركات أثناء الدراسة.', |
|
top_faculty:'محاضرون من نخبة الخبراء على مستوى مصر.', |
|
career_fair:'ربط مباشر مع جهات التوظيف قبل التخرج.', |
|
awards:'تكريم للأوائل في احتفال التخرج السنوي.', |
|
discounts:'خصم للمتفوقين وغير القادرين وتقسيط على 3 أقساط.', |
|
housing:'توفير سكن للطلبة المغتربين وإقامة للوافدين.', |
|
industry_partners:'مشاريع مشتركة وزيارات ميدانية.', |
|
gov_certs:'توثيق وشهادات معتمدة حسب التخصص.' |
|
} |
|
}, |
|
|
|
steps:{ |
|
title:'خطوات التقديم', |
|
list:[ |
|
{t:'استشارة وتواصل', d:'اتصل بنا أو راسلنا واتساب للاستفسار المبدئي.'}, |
|
{t:'تجهيز المستندات', d:'أحضر الأوراق المطلوبة المذكورة أدناه.'}, |
|
{t:'سداد القسط الأول', d:'خيارات دفع مرنة مع خصومات متاحة.'}, |
|
{t:'جلسة تعريفية', d:'تعريف باللوائح والخطة الدراسية والجداول.'}, |
|
{t:'بدء الدراسة', d:'استلام الجدول والحضور إلى أول محاضرة.'} |
|
] |
|
}, |
|
|
|
docs:{ |
|
title:'الأوراق المطلوبة', |
|
items:[ |
|
'أصل أو صورة المؤهل الدراسي', |
|
'صورة شهادة الميلاد', |
|
'4 صور بطاقة رقم قومي', |
|
'8 صور شخصية' |
|
] |
|
}, |
|
|
|
certs:{ |
|
title:'الشهادات بعد التخرج', |
|
items:[ |
|
'شهادة معتمدة من وزارة التربية والتعليم ✔️', |
|
'شهادة معتمدة من إحدى الجامعات المصرية ✔️', |
|
'بيان تقدير معتمد بمواد السنتين ✔️', |
|
'شهادات حكومية إضافية في تخصص التخرج ✔️', |
|
'إمكانية استكمال السنة التخصصية للخريجين فقط' |
|
] |
|
}, |
|
|
|
numbers: { title:'المعهد في أرقام', lead:'نمو مستمر وشراكات فعّالة وبرامج تعلّم تطبيقي منذ 1994.', years:'سنة خبرة', grads:'+ خريج', students:'+ طالب حاليًا', partners:'+ شراكة وتعاون' }, |
|
gallery: { title:'معرض الصور', lead:'لقطات من الفعاليات، القاعات، المعامل، وأنشطة الطلاب.' }, |
|
|
|
testimonials:{ title:'آراء طلابنا', lead:'مقتطفات من تجارب واقعية داخل المعهد.' }, |
|
|
|
partners:{ title:'شركاؤنا', lead:'شراكات تدريب وتوظيف مع جهات رائدة.' }, |
|
|
|
faq:{ title:'الأسئلة الشائعة' }, |
|
|
|
contact: { title:'تواصل معنا', h3_1:'العنوان وساعات العمل', h3_2:'أرقام ووسائل التواصل' }, |
|
cta: { title:'انضم الآن إلى مجتمعنا', desc:'ابدأ رحلتك المهنية مع برامجنا العملية وشركائنا في السوق.', button:'قدّم الآن' }, |
|
footer: { tagline:'نصنع تجربة تعليمية تجمع بين العلم والتطبيق والتقنية، لنبني مستقبلًا أفضل لطلابنا.', quick:'روابط سريعة', contact:'للتواصل', designedBy:'تصميم شركة فاست برو — ' } |
|
}, |
|
|
|
en: { |
|
brand: 'Modern City of Sciences Institute', |
|
rights: 'All rights reserved.', |
|
nav: { about: 'About', depts: 'Departments', numbers: 'By the Numbers', gallery: 'Gallery', contact: 'Contact', apply: 'Apply Now', features:'Features', steps:'How to Apply', docs:'Documents', faq:'FAQ', partners:'Partners', testimonials:'Testimonials' }, |
|
hero: { title: 'Education for the Future —', since: 'Since 1994', desc: 'We offer accredited, practice-driven programs blending modern tech and real-world skills in a supportive academic environment.', cta1:'Explore Departments', cta2:'View Gallery' }, |
|
about: { |
|
title:'About the Institute', |
|
lead:'An accredited higher institute focused on preparing career-ready graduates by integrating AI and digital transformation into curricula.', |
|
chip1:'📚 Updated Curricula', h3_1:'Hands-on Learning', p1:'Practical projects, internships, and industry partnerships for real experience.', |
|
chip2:'💡 Modern Tech', h3_2:'AI-infused Education', p2:'AI concepts and tools across most courses to build future skills.', |
|
chip3:'🎯 Employability', h3_3:'Job-market Readiness', p3:'Career guidance, workshops, and a strong placement record.' |
|
}, |
|
accredit: { title:'Official Accreditations' }, |
|
depts: { title:'Academic Departments' }, |
|
depTitles: { |
|
intl_comm:'International & Wireless Communications', |
|
it_is:'Information Systems & Computer Science', |
|
survey:'Surveying & Mapping Engineering', |
|
business:'Business Administration', |
|
tourism:'Tourism, Hotels & Hospitality', |
|
languages:'Languages & Translation' |
|
}, |
|
depDescs: { |
|
intl_comm:'Digital communications, wireless networks, IoT, and next-gen technologies.', |
|
it_is:'Programming, databases, networking, and cybersecurity with AI applications.', |
|
survey:'Topography, GIS, remote sensing, and smart mapping.', |
|
business:'Management, accounting, marketing, entrepreneurship, and leadership.', |
|
tourism:'Hotel management, hospitality, tourism marketing, and service excellence.', |
|
languages:'Translation skills, editing, and applied linguistics.' |
|
}, |
|
tracks: { title:'Advanced Optional Tracks' }, |
|
trackTitles:{ ai_track:'AI & Digital Transformation Track', cyber_track:'Cybersecurity Track', media_track:'Digital Media Production Track' }, |
|
trackDescs:{ ai_track:'Applied AI projects within majors.', cyber_track:'Network security foundations & testing.', media_track:'Content creation, filming & editing.' }, |
|
|
|
features:{ title:'Institute Advantages', lead:'Real value during study and after graduation.', |
|
titles:{ |
|
modern_classrooms:'Modern Equipped Classrooms', |
|
intensive_training:'Intensive Practical Training', |
|
top_faculty:'Outstanding Faculty', |
|
career_fair:'Annual Career Fair', |
|
awards:'Awards for Top Students', |
|
discounts:'Discounts & Installments', |
|
housing:'Dorms for Non-residents', |
|
industry_partners:'Industry Partnerships', |
|
gov_certs:'Additional Gov. Certificates' |
|
}, |
|
descs:{ |
|
modern_classrooms:'Air-conditioned halls with displays and advanced labs.', |
|
intensive_training:'In-company training programs during study.', |
|
top_faculty:'Lecturers from top national experts.', |
|
career_fair:'Direct connection with employers before graduation.', |
|
awards:'Recognition during the annual graduation ceremony.', |
|
discounts:'Merit and hardship discounts; 3-installment plan.', |
|
housing:'Dorm options for non-resident students.', |
|
industry_partners:'Joint projects and field visits.', |
|
gov_certs:'Certified documents depending on specialization.' |
|
} |
|
}, |
|
|
|
steps:{ |
|
title:'How to Apply', |
|
list:[ |
|
{t:'Contact & Inquiry', d:'Call or WhatsApp us for initial guidance.'}, |
|
{t:'Prepare Documents', d:'Bring the required documents listed below.'}, |
|
{t:'Pay First Installment', d:'Flexible payment options and discounts.'}, |
|
{t:'Orientation Session', d:'Policies, curriculum, and schedules overview.'}, |
|
{t:'Start Classes', d:'Receive your timetable and attend your first lecture.'} |
|
] |
|
}, |
|
|
|
docs:{ |
|
title:'Required Documents', |
|
items:[ |
|
'Original or copy of the educational certificate', |
|
'Copy of birth certificate', |
|
'4 copies of national ID', |
|
'8 personal photos' |
|
] |
|
}, |
|
|
|
certs:{ |
|
title:'Post-graduation Certificates', |
|
items:[ |
|
'Ministry of Education accredited certificate ✔️', |
|
'Certificate from an Egyptian university ✔️', |
|
'Official two-year transcript ✔️', |
|
'Additional governmental certificates in the major ✔️', |
|
'Eligibility to pursue a specialization year' |
|
] |
|
}, |
|
|
|
numbers: { title:'By the Numbers', lead:'Sustained growth, strong partnerships, and applied learning since 1994.', years:'Years of Experience', grads:'+ Graduates', students:'+ Current Students', partners:'+ Partnerships' }, |
|
gallery: { title:'Photo Gallery', lead:'Highlights from events, classrooms, labs, and student life.' }, |
|
|
|
testimonials:{ title:'Student Testimonials', lead:'Real snapshots from our campus experience.' }, |
|
|
|
partners:{ title:'Partners', lead:'Training and hiring agreements with leading organizations.' }, |
|
|
|
faq:{ title:'Frequently Asked Questions' }, |
|
|
|
contact: { title:'Contact Us', h3_1:'Address & Hours', h3_2:'Phones & Channels' }, |
|
cta: { title:'Join Our Community', desc:'Start your career journey with our practical programs and market partners.', button:'Apply Now' }, |
|
footer: { tagline:'We craft a learning experience that blends knowledge, practice, and technology for a better future.', quick:'Quick Links', contact:'Contact', designedBy:'Designed by Fast Pro — ' } |
|
} |
|
}; |
|
|
|
|
|
let accIdx = 0, accTimer; |
|
function initAccreditSlider(){ |
|
const list = document.getElementById('accreditList'); |
|
const cards = [...list.children]; |
|
if(!cards.length) return; |
|
|
|
function centerTo(i){ |
|
const card = cards[i]; |
|
const targetLeft = card.offsetLeft - (list.clientWidth - card.clientWidth)/2; |
|
list.scrollTo({ left: Math.max(0, targetLeft), behavior:'smooth' }); |
|
} |
|
|
|
function accGo(i){ |
|
accIdx = (i + cards.length) % cards.length; |
|
cards.forEach((c,j)=> c.classList.toggle('active', j===accIdx)); |
|
centerTo(accIdx); |
|
} |
|
function accPlay(){ clearInterval(accTimer); accTimer = setInterval(()=> accGo(accIdx+1), 3800); } |
|
|
|
document.getElementById('accPrev').onclick = ()=>{ accGo(accIdx-1); accPlay(); }; |
|
document.getElementById('accNext').onclick = ()=>{ accGo(accIdx+1); accPlay(); }; |
|
|
|
|
|
list.addEventListener('mouseenter', ()=> clearInterval(accTimer)); |
|
list.addEventListener('mouseleave', accPlay); |
|
|
|
accGo(0); accPlay(); |
|
} |
|
|
|
|
|
const counters = document.querySelectorAll('.num'); |
|
const easeOut = t => 1 - Math.pow(1 - t, 3); |
|
const animateCounter = (el, to, duration = 1400) => { |
|
const start = performance.now(); |
|
const from = 0; |
|
const step = (now) => { |
|
const p = Math.min(1, (now - start) / duration); |
|
const val = Math.floor(from + (to - from) * easeOut(p)); |
|
const lang = localStorage.getItem('lang') || 'ar'; |
|
el.textContent = (lang==='ar') ? val.toLocaleString('ar-EG') : val.toLocaleString('en-US'); |
|
if (p < 1) requestAnimationFrame(step); |
|
}; |
|
requestAnimationFrame(step); |
|
}; |
|
const io = new IntersectionObserver((entries) => { |
|
entries.forEach(e => { |
|
if (e.isIntersecting){ |
|
const to = parseInt(e.target.getAttribute('data-to'), 10); |
|
animateCounter(e.target, to); |
|
io.unobserve(e.target); |
|
} |
|
}); |
|
}, {threshold:.6}); |
|
counters.forEach(c => io.observe(c)); |
|
|
|
|
|
const slidesEl = document.getElementById('slides'); |
|
const thumbsEl = document.getElementById('thumbs'); |
|
function buildGallery(){ |
|
slidesEl.innerHTML = ''; thumbsEl.innerHTML = ''; |
|
GALLERY_IMAGES.forEach((src, i) => { |
|
const s = document.createElement('div'); s.className = 'slide'; |
|
const img = document.createElement('img'); img.src = src; img.alt = 'students photo'; img.loading = 'lazy'; |
|
img.addEventListener('click', () => openLightbox(src, 'photo')); |
|
s.appendChild(img); slidesEl.appendChild(s); |
|
|
|
const t = document.createElement('div'); t.className = 'thumb'; |
|
const ti = document.createElement('img'); ti.src = src; ti.alt = 'thumb'; ti.loading = 'lazy'; |
|
t.appendChild(ti); t.addEventListener('click', ()=> goTo(i)); |
|
thumbsEl.appendChild(t); |
|
}); |
|
} |
|
buildGallery(); |
|
|
|
let idx = 0; let lock = false; let auto; let dx = 0; let startX = 0; |
|
const goTo = (i) => { |
|
idx = (i + GALLERY_IMAGES.length) % GALLERY_IMAGES.length; |
|
slidesEl.style.transform = `translateX(${-idx * 100}%)`; |
|
[...thumbsEl.children].forEach((c, j) => c.classList.toggle('active', j===idx)); |
|
resetAuto(); |
|
}; |
|
const next = () => !lock && goTo(idx+1); |
|
const prev = () => !lock && goTo(idx-1); |
|
document.getElementById('next').onclick = next; |
|
document.getElementById('prev').onclick = prev; |
|
|
|
const resetAuto = () => { clearInterval(auto); auto = setInterval(next, 4300); }; |
|
resetAuto(); goTo(0); |
|
|
|
|
|
const carousel = document.querySelector('.carousel'); |
|
slidesEl.addEventListener('pointerdown', e=>{ lock = true; startX = e.clientX; slidesEl.setPointerCapture(e.pointerId); clearInterval(auto); }); |
|
slidesEl.addEventListener('pointermove', e=>{ if(!lock) return; dx = e.clientX - startX; slidesEl.style.transform = `translateX(calc(${-idx*100}% + ${dx}px))`; }); |
|
slidesEl.addEventListener('pointerup', e=>{ slidesEl.releasePointerCapture(e.pointerId); lock = false; if (Math.abs(dx) > 60) (dx<0? next(): prev()); else goTo(idx); dx = 0; resetAuto(); }); |
|
carousel.addEventListener('mouseenter', ()=> clearInterval(auto)); |
|
carousel.addEventListener('mouseleave', resetAuto); |
|
document.addEventListener('visibilitychange', ()=> document.hidden ? clearInterval(auto) : resetAuto()); |
|
|
|
|
|
const box = document.getElementById('lightbox'); |
|
const boxImg = document.getElementById('lightboxImg'); |
|
function openLightbox(src, alt){ boxImg.src = src; boxImg.alt = alt; box.classList.add('open'); box.setAttribute('aria-hidden','false'); } |
|
box.addEventListener('click', (e)=>{ if(e.target===box) { box.classList.remove('open'); box.setAttribute('aria-hidden','true'); }}); |
|
|
|
|
|
const testiSlides = document.getElementById('testiSlides'); |
|
let tIdx=0, tTimer; |
|
function buildTestimonials(){ |
|
testiSlides.innerHTML=''; |
|
const lang = localStorage.getItem('lang') || 'ar'; |
|
TESTIMONIALS.forEach(t=>{ |
|
const name = (lang==='ar')?t.nameAR:t.nameEN; |
|
const role = (lang==='ar')?t.roleAR:t.roleEN; |
|
const text = (lang==='ar')?t.textAR:t.textEN; |
|
const s = document.createElement('div'); s.className='slide'; |
|
s.innerHTML = `<div class="card" style="margin:14px; min-height:180px"><h3 style="margin:0 0 6px">${name} — <span class="muted">${role}</span></h3><p class="muted" style="margin:0">${text}</p></div>`; |
|
testiSlides.appendChild(s); |
|
}); |
|
testiGo(0); testiPlay(); |
|
} |
|
function testiGo(i){ |
|
tIdx = (i + TESTIMONIALS.length) % TESTIMONIALS.length; |
|
testiSlides.style.transform = `translateX(${-tIdx*100}%)`; |
|
} |
|
function testiPlay(){ clearInterval(tTimer); tTimer = setInterval(()=> testiGo(tIdx+1), 4600); } |
|
document.getElementById('testiNext').onclick = ()=>{ testiGo(tIdx+1); testiPlay(); }; |
|
document.getElementById('testiPrev').onclick = ()=>{ testiGo(tIdx-1); testiPlay(); }; |
|
|
|
|
|
function buildFAQ(){ |
|
const wrap = document.getElementById('faqWrap'); wrap.innerHTML=''; |
|
const lang = localStorage.getItem('lang') || 'ar'; |
|
(lang==='ar'?FAQ:FAQ.map(f=>({qAR:f.qEN,aAR:f.aEN})) ).forEach(item=>{ |
|
const el = document.createElement('div'); el.className='faq-item'; |
|
el.innerHTML = `<div class="faq-q">${item.qAR}<span>+</span></div><div class="faq-a">${item.aAR}</div>`; |
|
el.querySelector('.faq-q').onclick = ()=> el.classList.toggle('open'); |
|
wrap.appendChild(el); |
|
}); |
|
} |
|
|
|
|
|
function buildPartners(){ |
|
const track = document.getElementById('partnersTrack'); |
|
track.innerHTML=''; |
|
const arr = PARTNERS.concat(PARTNERS); |
|
arr.forEach(p=>{ |
|
const el = document.createElement('div'); el.className='partner'; |
|
el.textContent = p; track.appendChild(el); |
|
}); |
|
} |
|
|
|
|
|
const toTop = document.getElementById('toTop'); |
|
window.addEventListener('scroll', ()=>{ if (window.scrollY > 300) toTop.classList.add('show'); else toTop.classList.remove('show'); }); |
|
toTop.addEventListener('click', ()=> window.scrollTo({top:0, behavior:'smooth'})); |
|
|
|
|
|
const langAR = document.getElementById('langAR'); |
|
const langEN = document.getElementById('langEN'); |
|
const themeBtn = document.getElementById('themeToggle'); |
|
const navBar = document.getElementById('navBar'); |
|
const menuToggle = document.getElementById('menuToggle'); |
|
|
|
function setLang(lang){ |
|
localStorage.setItem('lang', lang); |
|
applyI18N(lang); |
|
langAR.classList.toggle('active', lang==='ar'); |
|
langEN.classList.toggle('active', lang==='en'); |
|
document.title = (lang==='ar') ? 'معهد مدينة العلوم العصرية | Modern City of Sciences Institute' : 'Modern City of Sciences Institute | معهد مدينة العلوم العصرية'; |
|
buildTestimonials(); |
|
buildFAQ(); |
|
} |
|
function setTheme(theme){ |
|
document.documentElement.setAttribute('data-theme', theme); |
|
localStorage.setItem('theme', theme); |
|
themeBtn.textContent = theme==='dark' ? '🌙' : '☀️'; |
|
} |
|
|
|
langAR.addEventListener('click', ()=> setLang('ar')); |
|
langEN.addEventListener('click', ()=> setLang('en')); |
|
themeBtn.addEventListener('click', ()=> setTheme(document.documentElement.getAttribute('data-theme')==='dark' ? 'light':'dark')); |
|
|
|
|
|
menuToggle.addEventListener('click', ()=> navBar.classList.toggle('open')); |
|
|
|
|
|
const initLang = localStorage.getItem('lang') || 'ar'; |
|
const initTheme = localStorage.getItem('theme') || 'dark'; |
|
setTheme(initTheme); setLang(initLang); |
|
|
|
|
|
function initContacts(){ |
|
const fc = document.getElementById('footerContact'); fc.innerHTML = ''; |
|
CONTACT.phones.forEach(ph=>{ |
|
const li = document.createElement('li'); |
|
li.innerHTML = `<a href="tel:+2${ph.replace(/\D/g,'')}">${ph}</a>`; fc.appendChild(li); |
|
}); |
|
const liMail = document.createElement('li'); |
|
liMail.innerHTML = `<a href="mailto:${CONTACT.email}">${CONTACT.email}</a>`; fc.appendChild(liMail); |
|
} |
|
initContacts(); |
|
|
|
|
|
buildGallery(); |
|
buildTestimonials(); |
|
buildFAQ(); |
|
buildPartners(); |
|
</script> |
|
</body> |
|
</html> |
|
|