msci-home / index.html
joermd's picture
Update index.html
347c648 verified
<!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 */
.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 */
.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.' }
];
// FAQ
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' }
];
// i18n + البناء الديناميكي
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();
}
// i18n نصوص
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());
// Lightbox
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(); };
// FAQ
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>