🛂
VisaGate
المنصة الاحترافية لإصدار الفيز
🔐 تسجيل الدخول للوحة التحكم
👤
🔑
⚠️ اسم المستخدم أو كلمة المرور غير صحيحة
✦ المنصة الرائدة في إصدار الفيز
سافر بثقة مع
فيزتك الصحيحة
نوفر لك جميع المعلومات اللازمة عن الفيز حول العالم — أسعار شفافة، متطلبات واضحة، وخدمة إصدار سريعة واحترافية
0دولة متاحة
98%نسبة القبول
+5Kعميل راضٍ
24hدعم متواصل
🌍
0
إجمالي الفيز
✅
0
فيز نشطة
🔴
فيز مخفية
🧩
0
حقول مفعّلة
📋 آخر الفيز المضافة
| الدولة | النوع | السعر | مدة الإصدار | الحالة |
|---|
قائمة الفيز
| الدولة | النوع | السعر | الإقامة | الإصدار | الحالة | إجراءات |
|---|
الحقول المتاحة
فعّل / أخفِ / أعد التسميةيمكنك تغيير اسم أي حقل وإظهاره أو إخفاءه. الحقول المفعّلة ستظهر للزبون في بطاقة تفاصيل الفيزا.
👁️ معاينة البطاقة
هذا هو شكل بطاقة الفيزا التي يراها الزبون بناءً على الحقول المفعّلة حالياً.
⚙️ الإعدادات العامة
📱 اختبار واتساب
تأكد أن رقم واتساب يعمل بشكل صحيح. سيُرسل الزبون إلى هذا الرقم عند الضغط على زر التقديم.
الرقم الحالي:
+9905526058765
🎨 تخصيص الألوان
معاينة:
📐 إعدادات العرض
✅
تم بنجاح
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VisaGate Pro — منصة الفيز الاحترافية</title>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&family=Scheherazade+New:wght@400;700&display=swap" rel="stylesheet">
<style>
/* ============================================================
ROOT & BASE
============================================================ */
:root {
--ink: #050d1a;
--ink2: #0b1830;
--ink3: #112244;
--gold: #c8a84b;
--gold2: #e8cc78;
--gold3: #8a6f28;
--silver: #9db0cc;
--light: #dce8f5;
--white: #f5f0e8;
--green: #27ae60;
--red: #c0392b;
--amber: #e67e22;
--r: 14px;
--r2: 20px;
--shadow: 0 24px 64px rgba(0,0,0,.55);
--glow: 0 0 40px rgba(200,168,75,.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
font-family:'Cairo',sans-serif;
background:var(--ink);
color:var(--white);
min-height:100vh;
overflow-x:hidden;
}
/* ============================================================
ANIMATED BACKGROUND
============================================================ */
#bg-canvas{
position:fixed;inset:0;z-index:0;
pointer-events:none;
background:
radial-gradient(ellipse 70% 50% at 15% 20%, rgba(200,168,75,.09) 0%, transparent 60%),
radial-gradient(ellipse 50% 70% at 85% 80%, rgba(17,34,68,.9) 0%, transparent 60%),
linear-gradient(170deg, #050d1a 0%, #0b1830 55%, #050d1a 100%);
}
.grid-lines{
position:fixed;inset:0;z-index:0;pointer-events:none;
background-image:
linear-gradient(rgba(200,168,75,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(200,168,75,.035) 1px, transparent 1px);
background-size: 60px 60px;
}
.orb{
position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;
animation:float 8s ease-in-out infinite;
}
.orb1{width:400px;height:400px;background:rgba(200,168,75,.07);top:-100px;right:-100px;animation-delay:0s;}
.orb2{width:300px;height:300px;background:rgba(17,34,68,.6);bottom:-50px;left:-80px;animation-delay:3s;}
.orb3{width:200px;height:200px;background:rgba(200,168,75,.05);top:50%;left:30%;animation-delay:5s;}
@keyframes float{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-30px) scale(1.05);}}
/* ============================================================
PAGE SYSTEM
============================================================ */
.page{display:none;position:relative;z-index:10;min-height:100vh;}
.page.active{display:block;}
/* ============================================================
██╗ ██████╗ ██████╗ ██╗███╗ ██╗
██║ ██╔═══██╗██╔════╝ ██║████╗ ██║
██║ ██║ ██║██║ ███╗██║██╔██╗ ██║
██║ ██║ ██║██║ ██║██║██║╚██╗██║
███████╗╚██████╔╝╚██████╔╝██║██║ ╚████║
============================================================ */
#page-login{
display:flex;align-items:center;justify-content:center;
min-height:100vh;padding:20px;
}
.login-wrap{
width:100%;max-width:440px;
animation:slideUp .6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes slideUp{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}
.login-logo{text-align:center;margin-bottom:40px;}
.login-logo .symbol{
display:inline-flex;align-items:center;justify-content:center;
width:72px;height:72px;border-radius:20px;
background:linear-gradient(135deg,var(--gold),var(--gold3));
font-size:2rem;margin-bottom:14px;
box-shadow:0 8px 32px rgba(200,168,75,.4);
}
.login-logo h1{
font-size:2rem;font-weight:900;letter-spacing:-1px;
background:linear-gradient(135deg,var(--gold),var(--gold2));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.login-logo p{color:var(--silver);font-size:.9rem;margin-top:4px;}
.login-card{
background:rgba(11,24,48,.85);
border:1px solid rgba(200,168,75,.2);
border-radius:var(--r2);
padding:40px;
backdrop-filter:blur(30px);
box-shadow:var(--shadow),var(--glow);
}
.login-card h2{font-size:1.2rem;font-weight:700;margin-bottom:28px;color:var(--light);}
.lf-group{margin-bottom:20px;}
.lf-group label{
display:block;font-size:.78rem;font-weight:700;
color:var(--silver);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;
}
.lf-group .input-wrap{position:relative;}
.lf-group input{
width:100%;padding:14px 44px 14px 16px;
background:rgba(255,255,255,.04);
border:1px solid rgba(200,168,75,.18);
border-radius:var(--r);
color:var(--white);font-family:'Cairo',sans-serif;font-size:.95rem;
outline:none;transition:all .3s;
}
.lf-group input:focus{border-color:var(--gold);background:rgba(200,168,75,.06);box-shadow:0 0 0 3px rgba(200,168,75,.12);}
.lf-group .ico{
position:absolute;left:14px;top:50%;transform:translateY(-50%);
font-size:1.1rem;pointer-events:none;
}
.btn-login{
width:100%;padding:15px;margin-top:10px;
background:linear-gradient(135deg,var(--gold) 0%,var(--gold3) 100%);
color:var(--ink);font-family:'Cairo',sans-serif;font-weight:900;font-size:1.05rem;
border:none;border-radius:var(--r);cursor:pointer;transition:all .3s;
letter-spacing:.3px;
box-shadow:0 4px 20px rgba(200,168,75,.35);
}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 10px 35px rgba(200,168,75,.5);}
.btn-login:active{transform:translateY(0);}
.login-err{
display:none;margin-top:16px;padding:12px 16px;
background:rgba(192,57,43,.15);border:1px solid rgba(192,57,43,.3);
border-radius:var(--r);color:#e74c3c;font-size:.88rem;text-align:center;
}
.login-err.show{display:block;}
/* ============================================================
CUSTOMER PORTAL
============================================================ */
/* ---- NAV ---- */
.portal-nav{
position:sticky;top:0;z-index:500;
display:flex;align-items:center;justify-content:space-between;
padding:0 40px;height:70px;
background:rgba(5,13,26,.92);
border-bottom:1px solid rgba(200,168,75,.15);
backdrop-filter:blur(30px);
}
.nav-logo{
font-size:1.5rem;font-weight:900;
background:linear-gradient(135deg,var(--gold),var(--gold2));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.nav-logo span{-webkit-text-fill-color:rgba(220,232,245,.5);font-weight:300;}
.nav-right{display:flex;gap:12px;align-items:center;}
.nav-btn{
padding:9px 22px;border-radius:10px;font-family:'Cairo',sans-serif;
font-size:.85rem;font-weight:700;cursor:pointer;transition:all .3s;border:none;
}
.nav-ghost{background:transparent;color:var(--silver);border:1.5px solid rgba(200,168,75,.3);}
.nav-ghost:hover{border-color:var(--gold);color:var(--gold);}
.nav-cta{
background:linear-gradient(135deg,var(--gold),var(--gold3));
color:var(--ink);
box-shadow:0 4px 15px rgba(200,168,75,.3);
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 25px rgba(200,168,75,.45);}
/* ---- HERO ---- */
.hero{
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:90px 20px 60px;min-height:88vh;
position:relative;
}
.hero-tag{
display:inline-flex;align-items:center;gap:8px;
padding:7px 18px;border-radius:50px;
background:rgba(200,168,75,.1);border:1px solid rgba(200,168,75,.25);
font-size:.82rem;color:var(--gold);font-weight:600;
margin-bottom:28px;letter-spacing:.3px;
animation:fadeUp .7s .1s both;
}
.hero h1{
font-size:clamp(2.8rem,6.5vw,5.5rem);font-weight:900;line-height:1.08;
margin-bottom:22px;animation:fadeUp .7s .25s both;
}
.hero h1 .grad{
background:linear-gradient(135deg,var(--gold) 20%,var(--gold2) 60%,var(--gold) 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero p{
font-size:1.15rem;color:var(--silver);max-width:580px;
line-height:1.85;margin:0 auto 42px;
animation:fadeUp .7s .4s both;font-weight:300;
}
.hero-btns{
display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
animation:fadeUp .7s .55s both;
}
.btn-hero{
padding:16px 40px;border-radius:12px;font-family:'Cairo',sans-serif;
font-weight:800;font-size:1.05rem;cursor:pointer;transition:all .3s;border:none;
}
.btn-hero-p{
background:linear-gradient(135deg,var(--gold),var(--gold3));
color:var(--ink);box-shadow:0 8px 28px rgba(200,168,75,.4);
}
.btn-hero-p:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(200,168,75,.55);}
.btn-hero-s{
background:transparent;color:var(--light);
border:1.5px solid rgba(220,232,245,.2);
}
.btn-hero-s:hover{border-color:var(--gold);color:var(--gold);}
.stats{
display:flex;gap:60px;margin-top:80px;flex-wrap:wrap;justify-content:center;
animation:fadeUp .7s .7s both;
}
.stat{text-align:center;}
.stat b{display:block;font-size:2.4rem;font-weight:900;color:var(--gold);line-height:1;}
.stat small{color:var(--silver);font-size:.82rem;font-weight:300;margin-top:5px;display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
/* ---- SEARCH SECTION ---- */
.search-section{
padding:60px 20px 80px;max-width:1100px;margin:0 auto;
}
.sec-head{text-align:center;margin-bottom:48px;}
.sec-head h2{font-size:2.2rem;font-weight:900;margin-bottom:8px;}
.sec-head h2 em{
font-style:normal;
background:linear-gradient(135deg,var(--gold),var(--gold2));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sec-head p{color:var(--silver);font-size:.95rem;}
.search-card{
background:rgba(11,24,48,.8);
border:1px solid rgba(200,168,75,.22);
border-radius:var(--r2);padding:38px;
backdrop-filter:blur(25px);
box-shadow:var(--shadow);
margin-bottom:44px;
}
.search-card h3{font-size:1rem;font-weight:700;color:var(--gold);margin-bottom:24px;display:flex;align-items:center;gap:8px;}
.sgrid{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:end;}
.fg label{display:block;font-size:.77rem;font-weight:700;color:var(--silver);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.fg select,.fg input{
width:100%;padding:13px 15px;
background:rgba(255,255,255,.04);border:1px solid rgba(200,168,75,.18);
border-radius:var(--r);color:var(--white);font-family:'Cairo',sans-serif;font-size:.92rem;
outline:none;transition:all .3s;cursor:pointer;
}
.fg select:focus,.fg input:focus{border-color:var(--gold);background:rgba(200,168,75,.07);}
.fg select option{background:#0b1830;}
.btn-srch{
padding:13px 32px;
background:linear-gradient(135deg,var(--gold),var(--gold3));
color:var(--ink);font-family:'Cairo',sans-serif;font-weight:900;font-size:.95rem;
border:none;border-radius:var(--r);cursor:pointer;transition:all .3s;white-space:nowrap;
box-shadow:0 4px 18px rgba(200,168,75,.3);
}
.btn-srch:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(200,168,75,.45);}
/* ---- COUNTRIES GRID ---- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px;}
.ccard{
background:rgba(11,24,48,.7);border:1px solid rgba(200,168,75,.12);
border-radius:16px;padding:24px 16px;text-align:center;cursor:pointer;
transition:all .35s;backdrop-filter:blur(10px);
}
.ccard:hover{
border-color:var(--gold);transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.ccard .cf{font-size:2.8rem;margin-bottom:10px;}
.ccard .cn{font-weight:700;font-size:.92rem;}
.ccard .cp{color:var(--gold);font-size:.82rem;margin-top:4px;font-weight:600;}
/* ---- RESULT CARD ---- */
.result-wrap{display:none;}
.result-wrap.open{display:block;animation:fadeUp .45s ease;}
.rcard{
background:rgba(11,24,48,.85);
border:1px solid rgba(200,168,75,.28);
border-radius:var(--r2);overflow:hidden;
box-shadow:var(--shadow),var(--glow);
}
.rhead{
padding:30px 38px;
background:linear-gradient(120deg,rgba(200,168,75,.12) 0%,transparent 70%);
border-bottom:1px solid rgba(200,168,75,.18);
display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.rflag{font-size:3.8rem;line-height:1;}
.rinfo h3{font-size:1.7rem;font-weight:900;}
.rinfo p{color:var(--silver);font-size:.88rem;margin-top:3px;}
.ravail{
margin-right:auto;padding:8px 20px;border-radius:50px;
background:rgba(39,174,96,.12);border:1px solid rgba(39,174,96,.35);
color:var(--green);font-size:.8rem;font-weight:700;display:flex;align-items:center;gap:5px;
}
.ravail::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.fgrid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
gap:18px;padding:32px 38px;
}
.fc{
background:rgba(255,255,255,.025);border:1px solid rgba(200,168,75,.1);
border-radius:12px;padding:18px;transition:all .3s;
}
.fc:hover{border-color:rgba(200,168,75,.35);transform:translateY(-3px);}
.fc-ico{font-size:1.6rem;margin-bottom:9px;}
.fc-lbl{font-size:.7rem;color:var(--silver);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;}
.fc-val{font-size:1.05rem;font-weight:700;}
.fc-val.hi{color:var(--gold);font-size:1.35rem;}
.req-wrap{padding:0 38px 30px;}
.req-wrap h4{font-size:.95rem;font-weight:700;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:6px;}
.req-tags{display:flex;flex-wrap:wrap;gap:9px;}
.req-tag{
padding:7px 14px;
background:rgba(200,168,75,.07);border:1px solid rgba(200,168,75,.18);
border-radius:8px;font-size:.82rem;color:var(--light);
display:flex;align-items:center;gap:5px;
}
.req-tag::before{content:'✓';color:var(--gold);font-weight:900;font-size:.8rem;}
.notes-wrap{
padding:0 38px 26px;
font-size:.88rem;color:var(--silver);line-height:1.7;
display:flex;gap:8px;align-items:flex-start;
}
.ract{
padding:24px 38px;
border-top:1px solid rgba(200,168,75,.15);
display:flex;gap:12px;align-items:center;flex-wrap:wrap;
}
.btn-wa{
display:inline-flex;align-items:center;gap:10px;
padding:15px 36px;
background:linear-gradient(135deg,#25D366,#128C7E);
color:#fff;font-family:'Cairo',sans-serif;font-weight:800;font-size:1rem;
border:none;border-radius:12px;cursor:pointer;transition:all .3s;
text-decoration:none;
box-shadow:0 6px 22px rgba(37,211,102,.35);
}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(37,211,102,.5);}
.btn-wa svg{width:22px;height:22px;fill:#fff;}
.btn-back{
padding:15px 24px;background:transparent;
color:var(--silver);font-family:'Cairo',sans-serif;font-weight:600;
border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:all .3s;
}
.btn-back:hover{border-color:var(--gold);color:var(--gold);}
/* ============================================================
█████╗ ██████╗ ███╗ ███╗██╗███╗ ██╗
██╔══██╗██╔══██╗████╗ ████║██║████╗ ██║
███████║██║ ██║██╔████╔██║██║██╔██╗ ██║
██╔══██║██║ ██║██║╚██╔╝██║██║██║╚██╗██║
██║ ██║██████╔╝██║ ╚═╝ ██║██║██║ ╚████║
============================================================ */
#page-admin{display:none;min-height:100vh;}
#page-admin.active{display:flex;}
/* sidebar */
.sidebar{
width:260px;min-height:100vh;flex-shrink:0;
background:rgba(8,18,38,.95);
border-left:1px solid rgba(200,168,75,.15);
display:flex;flex-direction:column;
position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sb-logo{
padding:28px 24px 20px;
border-bottom:1px solid rgba(200,168,75,.12);
}
.sb-logo h2{
font-size:1.4rem;font-weight:900;
background:linear-gradient(135deg,var(--gold),var(--gold2));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sb-logo p{color:var(--silver);font-size:.75rem;margin-top:3px;}
.sb-user{
margin:16px;padding:14px;
background:rgba(200,168,75,.07);border:1px solid rgba(200,168,75,.15);
border-radius:12px;display:flex;align-items:center;gap:10px;
}
.sb-avatar{
width:38px;height:38px;border-radius:10px;
background:linear-gradient(135deg,var(--gold),var(--gold3));
display:flex;align-items:center;justify-content:center;
font-size:1rem;font-weight:900;color:var(--ink);flex-shrink:0;
}
.sb-uname{font-size:.88rem;font-weight:700;}
.sb-role{font-size:.72rem;color:var(--gold);font-weight:600;}
.sb-menu{flex:1;padding:12px 12px 20px;}
.sb-section{font-size:.65rem;font-weight:700;color:var(--silver);text-transform:uppercase;letter-spacing:.8px;padding:14px 12px 6px;}
.sb-item{
display:flex;align-items:center;gap:10px;
padding:11px 12px;border-radius:10px;
font-size:.88rem;font-weight:600;color:var(--silver);
cursor:pointer;transition:all .25s;margin-bottom:3px;
border:none;background:transparent;width:100%;text-align:right;
font-family:'Cairo',sans-serif;
}
.sb-item .sico{font-size:1.05rem;width:22px;text-align:center;}
.sb-item:hover{background:rgba(200,168,75,.08);color:var(--light);}
.sb-item.active{background:rgba(200,168,75,.12);color:var(--gold);border-left:2px solid var(--gold);}
.sb-logout{
margin:12px;padding:12px;
border:1px solid rgba(192,57,43,.3);border-radius:10px;
background:rgba(192,57,43,.07);color:#e74c3c;
font-family:'Cairo',sans-serif;font-size:.85rem;font-weight:700;
cursor:pointer;transition:all .3s;
display:flex;align-items:center;gap:8px;justify-content:center;
}
.sb-logout:hover{background:rgba(192,57,43,.18);}
/* main admin */
.admin-main{
flex:1;overflow-y:auto;min-height:100vh;
padding:32px;
background:rgba(5,13,26,.5);
}
.apanel{display:none;}
.apanel.active{display:block;animation:fadeUp .35s ease;}
/* top bar */
.atopbar{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:30px;padding-bottom:22px;
border-bottom:1px solid rgba(200,168,75,.12);
}
.atopbar h2{font-size:1.6rem;font-weight:900;}
.atopbar h2 span{color:var(--gold);}
.atopbar p{color:var(--silver);font-size:.85rem;margin-top:3px;}
/* stats cards */
.sc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
.sc{
background:rgba(11,24,48,.8);border:1px solid rgba(200,168,75,.15);
border-radius:16px;padding:22px 20px;
backdrop-filter:blur(15px);transition:all .3s;
}
.sc:hover{border-color:rgba(200,168,75,.3);transform:translateY(-3px);}
.sc-ico{font-size:1.8rem;margin-bottom:12px;}
.sc-num{font-size:2rem;font-weight:900;color:var(--gold);}
.sc-lbl{font-size:.78rem;color:var(--silver);font-weight:600;margin-top:3px;}
/* panel card */
.pcard{
background:rgba(11,24,48,.8);
border:1px solid rgba(200,168,75,.15);
border-radius:16px;overflow:hidden;
backdrop-filter:blur(20px);
}
.pcard-head{
padding:18px 24px;
background:rgba(200,168,75,.05);
border-bottom:1px solid rgba(200,168,75,.12);
display:flex;align-items:center;justify-content:space-between;
}
.pcard-head h3{font-size:.95rem;font-weight:700;color:var(--gold);}
.pcard-body{padding:24px;}
/* table */
.vtable{width:100%;border-collapse:collapse;}
.vtable th{
text-align:right;padding:11px 14px;
font-size:.72rem;font-weight:700;color:var(--silver);text-transform:uppercase;letter-spacing:.5px;
border-bottom:1px solid rgba(200,168,75,.12);
}
.vtable td{
padding:13px 14px;font-size:.87rem;
border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle;
}
.vtable tr:last-child td{border:none;}
.vtable tr:hover td{background:rgba(200,168,75,.03);}
.fl{font-size:1.4rem;}
.sbadge{
padding:4px 11px;border-radius:50px;font-size:.72rem;font-weight:700;
}
.sbadge.on{background:rgba(39,174,96,.14);color:var(--green);border:1px solid rgba(39,174,96,.3);}
.sbadge.off{background:rgba(192,57,43,.14);color:#e74c3c;border:1px solid rgba(192,57,43,.3);}
.abtn-row{display:flex;gap:6px;}
.abtn{
width:30px;height:30px;border-radius:7px;border:none;cursor:pointer;
display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:all .2s;
}
.abtn.edit{background:rgba(200,168,75,.12);color:var(--gold);}
.abtn.edit:hover{background:var(--gold);color:var(--ink);}
.abtn.del{background:rgba(192,57,43,.12);color:#e74c3c;}
.abtn.del:hover{background:#c0392b;color:#fff;}
.abtn.tog{background:rgba(39,174,96,.12);color:var(--green);}
.abtn.tog:hover{background:var(--green);color:#fff;}
/* forms */
.frow{margin-bottom:17px;}
.frow label{display:block;font-size:.77rem;font-weight:700;color:var(--silver);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px;}
.frow input,.frow select,.frow textarea{
width:100%;padding:12px 14px;
background:rgba(255,255,255,.04);border:1px solid rgba(200,168,75,.18);
border-radius:10px;color:var(--white);font-family:'Cairo',sans-serif;font-size:.9rem;
outline:none;transition:all .3s;
}
.frow input:focus,.frow select:focus,.frow textarea:focus{
border-color:var(--gold);background:rgba(200,168,75,.07);
}
.frow select option{background:#0b1830;}
.frow textarea{resize:vertical;min-height:85px;line-height:1.7;}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.btn-save{
width:100%;padding:13px;margin-top:8px;
background:linear-gradient(135deg,var(--gold),var(--gold3));
color:var(--ink);font-family:'Cairo',sans-serif;font-weight:900;font-size:.95rem;
border:none;border-radius:10px;cursor:pointer;transition:all .3s;
box-shadow:0 4px 18px rgba(200,168,75,.3);
}
.btn-save:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(200,168,75,.45);}
/* fields manager */
.fitem{
display:flex;align-items:center;gap:10px;
background:rgba(255,255,255,.025);border:1px solid rgba(200,168,75,.1);
border-radius:10px;padding:11px 14px;margin-bottom:8px;
transition:all .2s;
}
.fitem:hover{border-color:rgba(200,168,75,.25);}
.fdrg{color:var(--silver);cursor:grab;font-size:1rem;user-select:none;}
.fitem-ico{font-size:1.1rem;}
.fitem input{
flex:1;background:transparent;border:none;color:var(--white);
font-family:'Cairo',sans-serif;font-size:.88rem;outline:none;
}
.ftoggle{
width:30px;height:17px;border-radius:50px;cursor:pointer;
background:var(--green);position:relative;transition:all .3s;flex-shrink:0;
border:none;
}
.ftoggle.off{background:rgba(255,255,255,.2);}
.ftoggle::after{
content:'';position:absolute;top:2.5px;right:2.5px;
width:12px;height:12px;border-radius:50%;background:#fff;transition:all .3s;
}
.ftoggle.off::after{right:unset;left:2.5px;}
.fadd-row{display:flex;gap:10px;margin-top:16px;}
.fadd-row input{
flex:1;padding:10px 14px;
background:rgba(255,255,255,.04);border:1px solid rgba(200,168,75,.18);
border-radius:9px;color:var(--white);font-family:'Cairo',sans-serif;outline:none;
}
.btn-fadd{
padding:10px 18px;
background:linear-gradient(135deg,var(--gold),var(--gold3));
color:var(--ink);border:none;border-radius:9px;font-family:'Cairo',sans-serif;
font-weight:700;cursor:pointer;font-size:.88rem;white-space:nowrap;
}
/* ============================================================
MODAL
============================================================ */
.modal-bg{
display:none;position:fixed;inset:0;z-index:9000;
background:rgba(0,0,0,.72);backdrop-filter:blur(12px);
align-items:center;justify-content:center;padding:20px;
}
.modal-bg.open{display:flex;}
.modal{
background:var(--ink2);border:1px solid rgba(200,168,75,.28);
border-radius:var(--r2);padding:36px;max-width:560px;width:100%;
animation:slideUp .3s ease;
max-height:90vh;overflow-y:auto;
}
.modal h3{font-size:1.3rem;font-weight:900;color:var(--gold);margin-bottom:24px;}
.modal-actions{display:flex;gap:12px;margin-top:20px;}
.btn-mcancel{
flex:1;padding:12px;background:transparent;
border:1px solid rgba(255,255,255,.12);color:var(--silver);
font-family:'Cairo',sans-serif;font-weight:600;border-radius:10px;cursor:pointer;
}
.btn-mok{
flex:2;padding:12px;
background:linear-gradient(135deg,var(--gold),var(--gold3));
color:var(--ink);font-family:'Cairo',sans-serif;font-weight:900;
border:none;border-radius:10px;cursor:pointer;
}
.btn-mdel{
flex:2;padding:12px;background:linear-gradient(135deg,#c0392b,#922b21);
color:#fff;font-family:'Cairo',sans-serif;font-weight:900;
border:none;border-radius:10px;cursor:pointer;
}
/* ============================================================
TOAST
============================================================ */
.toast{
position:fixed;bottom:28px;right:28px;z-index:9999;
background:var(--ink2);border:1px solid var(--gold);
border-radius:14px;padding:15px 22px;
display:flex;align-items:center;gap:12px;
box-shadow:var(--shadow);
transform:translateX(130%);transition:transform .4s cubic-bezier(.16,1,.3,1);
min-width:250px;
}
.toast.show{transform:translateX(0);}
.toast-i{font-size:1.4rem;}
.toast-m{font-size:.9rem;font-weight:600;}
/* ============================================================
SETTINGS
============================================================ */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.color-preview{
width:100%;height:50px;border-radius:10px;margin-top:10px;
background:linear-gradient(135deg,var(--gold),var(--gold3));
transition:all .3s;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media(max-width:900px){
.portal-nav{padding:0 20px;}
.sgrid{grid-template-columns:1fr;}
.sc-row{grid-template-columns:1fr 1fr;}
.settings-grid{grid-template-columns:1fr;}
#page-admin.active{flex-direction:column;}
.sidebar{width:100%;min-height:unset;height:auto;position:static;}
.admin-main{padding:20px;}
.f2{grid-template-columns:1fr;}
.fgrid{padding:20px;}
.rhead{padding:22px;}
.req-wrap,.ract{padding-left:22px;padding-right:22px;}
}
@media(max-width:600px){
.stats{gap:28px;}
.hero h1{font-size:2.4rem;}
.hero-btns{flex-direction:column;align-items:center;}
.btn-hero{width:260px;}
}
</style>
</head>
<body>
<div id="bg-canvas"></div>
<div class="grid-lines"></div>
<div class="orb orb1"></div>
<div class="orb orb2"></div>
<div class="orb orb3"></div>
<!-- ██████████████████████████████████████
LOGIN PAGE
██████████████████████████████████████ -->
<div class="page" id="page-login">
<div class="login-wrap">
<div class="login-logo">
<div class="symbol">🛂</div>
<h1>VisaGate</h1>
<p>المنصة الاحترافية لإصدار الفيز</p>
</div>
<div class="login-card">
<h2>🔐 تسجيل الدخول للوحة التحكم</h2>
<div class="lf-group">
<label>اسم المستخدم</label>
<div class="input-wrap">
<input type="text" id="li-user" placeholder="أدخل اسم المستخدم" autocomplete="username"/>
<span class="ico">👤</span>
</div>
</div>
<div class="lf-group">
<label>كلمة المرور</label>
<div class="input-wrap">
<input type="password" id="li-pass" placeholder="••••••••••" autocomplete="current-password" onkeydown="if(event.key==='Enter')doLogin()"/>
<span class="ico">🔑</span>
</div>
</div>
<button class="btn-login" onclick="doLogin()">دخول إلى لوحة التحكم ←</button>
<div class="login-err" id="login-err">⚠️ اسم المستخدم أو كلمة المرور غير صحيحة</div>
</div>
</div>
</div>
<!-- ██████████████████████████████████████
CUSTOMER PORTAL
██████████████████████████████████████ -->
<div class="page active" id="page-portal">
<nav class="portal-nav">
<div class="nav-logo">Visa<span>Gate</span></div>
<div class="nav-right">
<button class="nav-btn nav-ghost" onclick="showPage('portal','search')">🔍 استعلام</button>
<button class="nav-btn nav-cta" onclick="openWA('مرحباً، أريد الاستفسار عن خدمات الفيزا')">📱 تواصل معنا</button>
</div>
</nav>
<!-- HERO -->
<section class="hero" id="portal-home-section">
<div class="hero-tag">✦ المنصة الرائدة في إصدار الفيز</div>
<h1>سافر بثقة مع<br><span class="grad">فيزتك الصحيحة</span></h1>
<p>نوفر لك جميع المعلومات اللازمة عن الفيز حول العالم — أسعار شفافة، متطلبات واضحة، وخدمة إصدار سريعة واحترافية</p>
<div class="hero-btns">
<button class="btn-hero btn-hero-p" onclick="showPortalSearch()">🌍 ابحث عن فيزتك الآن</button>
<button class="btn-hero btn-hero-s" onclick="openWA('مرحباً، أحتاج مساعدة في الفيزا')">💬 تحدث مع مستشار</button>
</div>
<div class="stats">
<div class="stat"><b id="stat-countries">0</b><small>دولة متاحة</small></div>
<div class="stat"><b>98%</b><small>نسبة القبول</small></div>
<div class="stat"><b>+5K</b><small>عميل راضٍ</small></div>
<div class="stat"><b>24h</b><small>دعم متواصل</small></div>
</div>
</section>
<!-- SEARCH -->
<section class="search-section" id="portal-search-section" style="display:none;">
<div class="sec-head">
<h2>استعلام عن <em>الفيزا</em></h2>
<p>اختر الدولة المقصودة وتعرف على كل التفاصيل</p>
</div>
<div class="search-card">
<h3>🔍 البحث السريع</h3>
<div class="sgrid">
<div class="fg">
<label>الجنسية</label>
<select id="s-nat">
<option value="">اختر جنسيتك</option>
<option value="IQ">🇮🇶 العراق</option>
<option value="SA">🇸🇦 المملكة العربية السعودية</option>
<option value="AE">🇦🇪 الإمارات</option>
<option value="EG">🇪🇬 مصر</option>
<option value="JO">🇯🇴 الأردن</option>
<option value="SY">🇸🇾 سوريا</option>
<option value="LB">🇱🇧 لبنان</option>
</select>
</div>
<div class="fg">
<label>الدولة المقصودة</label>
<select id="s-dest"><option value="">اختر الدولة</option></select>
</div>
<button class="btn-srch" onclick="searchVisa()">بحث ←</button>
</div>
</div>
<div class="result-wrap" id="result-wrap"></div>
<div id="all-countries">
<div class="sec-head" style="margin-top:30px">
<h2>جميع <em>الوجهات</em></h2>
<p>اختر مباشرةً لعرض تفاصيل الفيزا</p>
</div>
<div class="cgrid" id="cgrid"></div>
</div>
</section>
</div>
<!-- ██████████████████████████████████████
ADMIN PANEL
██████████████████████████████████████ -->
<div class="page" id="page-admin">
<!-- SIDEBAR -->
<aside class="sidebar">
<div class="sb-logo">
<h2>VisaGate</h2>
<p>لوحة الإدارة</p>
</div>
<div class="sb-user">
<div class="sb-avatar">M</div>
<div>
<div class="sb-uname">mrmohammad</div>
<div class="sb-role">⭐ مدير النظام</div>
</div>
</div>
<nav class="sb-menu">
<div class="sb-section">الرئيسية</div>
<button class="sb-item active" onclick="switchPanel('dashboard',this)"><span class="sico">📊</span> لوحة المعلومات</button>
<div class="sb-section">إدارة المحتوى</div>
<button class="sb-item" onclick="switchPanel('visas',this)"><span class="sico">🗂️</span> إدارة الفيز</button>
<button class="sb-item" onclick="switchPanel('fields',this)"><span class="sico">🧩</span> إدارة الحقول</button>
<div class="sb-section">الإعدادات</div>
<button class="sb-item" onclick="switchPanel('settings',this)"><span class="sico">⚙️</span> إعدادات المنصة</button>
<button class="sb-item" onclick="switchPanel('appearance',this)"><span class="sico">🎨</span> المظهر والألوان</button>
<div class="sb-section">المعاينة</div>
<button class="sb-item" onclick="showPage('portal')"><span class="sico">👁️</span> معاينة الموقع</button>
</nav>
<button class="sb-logout" onclick="logout()">🚪 تسجيل الخروج</button>
</aside>
<!-- MAIN -->
<main class="admin-main">
<!-- DASHBOARD -->
<div class="apanel active" id="panel-dashboard">
<div class="atopbar">
<div>
<h2>لوحة <span>المعلومات</span></h2>
<p>مرحباً بك، يمكنك إدارة المنصة بالكامل من هنا</p>
</div>
</div>
<div class="sc-row">
<div class="sc"><div class="sc-ico">🌍</div><div class="sc-num" id="d-total">0</div><div class="sc-lbl">إجمالي الفيز</div></div>
<div class="sc"><div class="sc-ico">✅</div><div class="sc-num" id="d-active">0</div><div class="sc-lbl">فيز نشطة</div></div>
<div class="sc"><div class="sc-ico">🔴</div><div class="sc-num" id="d-hidden">0</div><div class="sc-lbl">فيز مخفية</div></div>
<div class="sc"><div class="sc-ico">🧩</div><div class="sc-num" id="d-fields">0</div><div class="sc-lbl">حقول مفعّلة</div></div>
</div>
<div class="pcard" style="margin-top:20px">
<div class="pcard-head"><h3>📋 آخر الفيز المضافة</h3></div>
<div class="pcard-body" style="padding:0;overflow-x:auto">
<table class="vtable" id="dash-table">
<thead><tr><th>الدولة</th><th>النوع</th><th>السعر</th><th>مدة الإصدار</th><th>الحالة</th></tr></thead>
<tbody id="dash-tbody"></tbody>
</table>
</div>
</div>
</div>
<!-- VISAS -->
<div class="apanel" id="panel-visas">
<div class="atopbar">
<div><h2>إدارة <span>الفيز</span></h2><p>أضف أو عدّل أو أخفِ الفيز المتاحة</p></div>
<button class="nav-btn nav-cta" onclick="openAddModal()">＋ إضافة فيزا</button>
</div>
<div class="pcard">
<div class="pcard-head">
<h3>قائمة الفيز</h3>
<span style="font-size:.8rem;color:var(--silver)" id="visa-count-lbl"></span>
</div>
<div style="overflow-x:auto">
<table class="vtable" id="admin-vtable">
<thead><tr><th>الدولة</th><th>النوع</th><th>السعر</th><th>الإقامة</th><th>الإصدار</th><th>الحالة</th><th>إجراءات</th></tr></thead>
<tbody id="admin-vtbody"></tbody>
</table>
</div>
</div>
</div>
<!-- FIELDS -->
<div class="apanel" id="panel-fields">
<div class="atopbar">
<div><h2>إدارة <span>الحقول</span></h2><p>خصّص ما يراه الزبون في بطاقة الفيزا</p></div>
</div>
<div style="display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:start">
<div class="pcard">
<div class="pcard-head"><h3>الحقول المتاحة</h3><span style="font-size:.78rem;color:var(--silver)">فعّل / أخفِ / أعد التسمية</span></div>
<div class="pcard-body">
<p style="color:var(--silver);font-size:.83rem;margin-bottom:18px;line-height:1.7">
يمكنك تغيير اسم أي حقل وإظهاره أو إخفاءه. الحقول المفعّلة ستظهر للزبون في بطاقة تفاصيل الفيزا.
</p>
<div id="fields-list"></div>
<div class="fadd-row">
<input type="text" id="new-field-name" placeholder="اسم الحقل الجديد..." />
<input type="text" id="new-field-icon" placeholder="📌" style="width:60px;text-align:center;"/>
<button class="btn-fadd" onclick="addField()">＋ إضافة</button>
</div>
</div>
</div>
<div class="pcard" style="position:sticky;top:20px">
<div class="pcard-head"><h3>👁️ معاينة البطاقة</h3></div>
<div class="pcard-body">
<div id="field-preview" style="background:rgba(255,255,255,.02);border:1px solid rgba(200,168,75,.1);border-radius:12px;padding:16px;"></div>
<p style="color:var(--silver);font-size:.78rem;margin-top:14px;line-height:1.7;">هذا هو شكل بطاقة الفيزا التي يراها الزبون بناءً على الحقول المفعّلة حالياً.</p>
</div>
</div>
</div>
</div>
<!-- SETTINGS -->
<div class="apanel" id="panel-settings">
<div class="atopbar">
<div><h2>إعدادات <span>المنصة</span></h2><p>عدّل المعلومات الأساسية للمنصة</p></div>
</div>
<div class="settings-grid">
<div class="pcard">
<div class="pcard-head"><h3>⚙️ الإعدادات العامة</h3></div>
<div class="pcard-body">
<div class="frow"><label>اسم المنصة</label><input type="text" id="cfg-name" value="VisaGate"/></div>
<div class="frow"><label>شعار المنصة (رمز تعبيري)</label><input type="text" id="cfg-icon" value="🛂"/></div>
<div class="frow"><label>وصف قصير للمنصة</label><textarea id="cfg-desc">المنصة الاحترافية لإصدار جميع أنواع الفيز</textarea></div>
<div class="frow"><label>رقم واتساب للتواصل</label><input type="text" id="cfg-wa" value="+9905526058765" placeholder="+9905526058765"/></div>
<div class="frow"><label>نص رسالة واتساب الافتراضية</label><input type="text" id="cfg-wa-msg" value="مرحباً، أريد الاستفسار عن الفيزا"/></div>
<div class="frow"><label>نص زر التقديم</label><input type="text" id="cfg-apply-btn" value="تقدم عبر واتساب"/></div>
<button class="btn-save" onclick="saveSettings()">💾 حفظ الإعدادات</button>
</div>
</div>
<div class="pcard">
<div class="pcard-head"><h3>📱 اختبار واتساب</h3></div>
<div class="pcard-body">
<p style="color:var(--silver);font-size:.85rem;margin-bottom:16px;line-height:1.7">
تأكد أن رقم واتساب يعمل بشكل صحيح. سيُرسل الزبون إلى هذا الرقم عند الضغط على زر التقديم.
</p>
<div style="background:rgba(37,211,102,.07);border:1px solid rgba(37,211,102,.2);border-radius:12px;padding:16px;margin-bottom:16px;">
<div style="font-size:.82rem;color:var(--silver);margin-bottom:4px;">الرقم الحالي:</div>
<div style="font-size:1.1rem;font-weight:700;color:var(--green)" id="wa-preview-num">+9905526058765</div>
</div>
<button class="btn-save" onclick="testWA()" style="background:linear-gradient(135deg,#25D366,#128C7E);">
<span style="display:flex;align-items:center;gap:8px;justify-content:center;">
<svg width="18" height="18" viewBox="0 0 24 24" fill="#0b1830"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
اختبار الاتصال
</span>
</button>
</div>
</div>
</div>
</div>
<!-- APPEARANCE -->
<div class="apanel" id="panel-appearance">
<div class="atopbar">
<div><h2>المظهر <span>والألوان</span></h2><p>خصّص ألوان المنصة لتناسب هويتك</p></div>
</div>
<div class="settings-grid">
<div class="pcard">
<div class="pcard-head"><h3>🎨 تخصيص الألوان</h3></div>
<div class="pcard-body">
<div class="frow">
<label>اللون الرئيسي (الذهبي)</label>
<input type="color" id="c-primary" value="#c8a84b" style="height:48px;cursor:pointer;" oninput="previewColor()"/>
</div>
<div class="frow">
<label>لون الخلفية</label>
<input type="color" id="c-bg" value="#050d1a" style="height:48px;cursor:pointer;" oninput="previewColor()"/>
</div>
<div class="frow">
<label>لون الكروت</label>
<input type="color" id="c-card" value="#0b1830" style="height:48px;cursor:pointer;" oninput="previewColor()"/>
</div>
<div style="background:rgba(255,255,255,.03);border:1px solid rgba(200,168,75,.15);border-radius:12px;padding:16px;margin-bottom:16px;">
<div style="font-size:.78rem;color:var(--silver);margin-bottom:10px;">معاينة:</div>
<div id="color-preview" class="color-preview"></div>
</div>
<button class="btn-save" onclick="applyColors()">🎨 تطبيق الألوان</button>
</div>
</div>
<div class="pcard">
<div class="pcard-head"><h3>📐 إعدادات العرض</h3></div>
<div class="pcard-body">
<div class="frow">
<label>حجم الخط الأساسي</label>
<select id="c-font">
<option value="14">صغير (14px)</option>
<option value="16" selected>متوسط (16px)</option>
<option value="18">كبير (18px)</option>
</select>
</div>
<div class="frow">
<label>نمط الزوايا</label>
<select id="c-radius">
<option value="8">حادة (8px)</option>
<option value="14" selected>متوسطة (14px)</option>
<option value="22">دائرية (22px)</option>
</select>
</div>
<button class="btn-save" onclick="applyDisplay()" style="margin-top:20px">✅ تطبيق الإعدادات</button>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- MODAL -->
<div class="modal-bg" id="modal-bg">
<div class="modal" id="modal-content"></div>
</div>
<!-- TOAST -->
<div class="toast" id="toast">
<span class="toast-i" id="toast-i">✅</span>
<span class="toast-m" id="toast-m">تم بنجاح</span>
</div>
<!-- ██████████████████████████████████████
JAVASCRIPT
██████████████████████████████████████ -->
<script>
/* ============================================================
CONFIG
============================================================ */
const ADMIN_USER = 'mrmohammad';
const ADMIN_PASS = '123411234';
const WA_DEFAULT = '+9905526058765';
/* ============================================================
STATE
============================================================ */
let cfg = {
name:'VisaGate', icon:'🛂',
desc:'المنصة الاحترافية لإصدار جميع أنواع الفيز',
wa:WA_DEFAULT,
waMsg:'مرحباً، أريد الاستفسار عن الفيزا',
applyBtn:'تقدم عبر واتساب',
};
let visas = [
{id:1,country:'تركيا',flag:'🇹🇷',type:'سياحية / e-Visa',price:45,currency:'دولار',stay:'90 يوم',processing:'24 ساعة',active:true,
requirements:['جواز سفر ساري','صورة شخصية','حجز فندق','تذكرة عودة','كشف حساب بنكي'],
notes:'فيزا إلكترونية سهلة وسريعة — تُصدر أونلاين'},
{id:2,country:'الإمارات',flag:'🇦🇪',type:'سياحية / عمل',price:80,currency:'دولار',stay:'30 يوم',processing:'24 ساعة',active:true,
requirements:['جواز سفر 6 أشهر','صورة شخصية','إثبات إقامة','تذاكر سفر'],
notes:'خدمة إصدار سريع 24 ساعة'},
{id:3,country:'ماليزيا',flag:'🇲🇾',type:'سياحية',price:35,currency:'دولار',stay:'30 يوم',processing:'5 أيام',active:true,
requirements:['جواز سفر ساري','صورة شخصية','حجز فندق','تأمين سفر'],
notes:'eVISA للزيارات السياحية'},
{id:4,country:'أوروبا (شنغن)',flag:'🇪🇺',type:'شنغن',price:120,currency:'دولار',stay:'90 يوم',processing:'15-20 يوم',active:true,
requirements:['جواز سفر ساري','تأمين سفر 30,000€','كشف حساب 3 أشهر','حجز فندق مفصل','خطة رحلة'],
notes:'تشمل 26 دولة أوروبية'},
{id:5,country:'الأردن',flag:'🇯🇴',type:'سياحية',price:20,currency:'دولار',stay:'30 يوم',processing:'فوري',active:true,
requirements:['جواز سفر ساري','صورة شخصية'],
notes:'تُمنح عند الوصول لمعظم الجنسيات'},
{id:6,country:'كندا',flag:'🇨🇦',type:'سياحية',price:100,currency:'دولار',stay:'6 أشهر',processing:'4-8 أسابيع',active:false,
requirements:['جواز سفر ساري','بيانات بيومترية','كشف حساب','تأمين سفر'],
notes:'قد تُطلب مقابلة'},
{id:7,country:'بريطانيا',flag:'🇬🇧',type:'سياحية',price:115,currency:'دولار',stay:'6 أشهر',processing:'3 أسابيع',active:true,
requirements:['جواز سفر ساري','حجز فندق','كشف حساب','خطاب عمل أو دراسة'],
notes:'مطلوب تعبئة استمارة إلكترونية'},
{id:8,country:'اليابان',flag:'🇯🇵',type:'سياحية',price:55,currency:'دولار',stay:'90 يوم',processing:'7-10 أيام',active:true,
requirements:['جواز سفر ساري','خطة رحلة مفصلة','كشف حساب','صورة شخصية'],
notes:'سفارة اليابان تشترط توفر مبلغ كافٍ'},
];
let fields = [
{id:'price', label:'السعر', icon:'💰',visible:true},
{id:'stay', label:'مدة الإقامة', icon:'📅',visible:true},
{id:'processing',label:'مدة الإصدار',icon:'⏱️',visible:true},
{id:'type', label:'نوع الفيزا', icon:'📋',visible:true},
{id:'requirements',label:'المتطلبات',icon:'📎',visible:true},
{id:'notes', label:'ملاحظات', icon:'💡',visible:true},
];
/* ============================================================
LOGIN
============================================================ */
function doLogin(){
const u=document.getElementById('li-user').value.trim();
const p=document.getElementById('li-pass').value.trim();
const err=document.getElementById('login-err');
if(u===ADMIN_USER && p===ADMIN_PASS){
err.classList.remove('show');
showPage('admin');
renderDashboard();
renderAdminTable();
} else {
err.classList.add('show');
document.getElementById('li-pass').value='';
}
}
function logout(){
showPage('login');
document.getElementById('li-user').value='';
document.getElementById('li-pass').value='';
}
/* ============================================================
PAGE NAVIGATION
============================================================ */
function showPage(p){
document.querySelectorAll('.page').forEach(x=>{
x.classList.remove('active');
if(x.id==='page-'+p) x.style.display = p==='admin'?'flex':'block';
else x.style.display='none';
});
const t=document.getElementById('page-'+p);
if(t){ t.classList.add('active'); }
if(p==='portal'){renderPortal();}
}
function showPortalSearch(){
document.getElementById('portal-home-section').style.display='none';
document.getElementById('portal-search-section').style.display='block';
renderCountriesGrid();
}
/* ============================================================
PORTAL
============================================================ */
function renderPortal(){
const actv=visas.filter(v=>v.active);
document.getElementById('stat-countries').textContent='+'+actv.length;
const dest=document.getElementById('s-dest');
if(dest){
dest.innerHTML='<option value="">اختر الدولة</option>'+
actv.map(v=>`<option value="${v.id}">${v.flag} ${v.country}</option>`).join('');
}
}
function renderCountriesGrid(){
const g=document.getElementById('cgrid');
if(!g) return;
g.innerHTML=visas.filter(v=>v.active).map(v=>`
<div class="ccard" onclick="showVisaResult(${v.id})">
<div class="cf">${v.flag}</div>
<div class="cn">${v.country}</div>
<div class="cp">من $${v.price}</div>
</div>`).join('');
}
function searchVisa(){
const d=document.getElementById('s-dest').value;
if(!d){toast('⚠️','يرجى اختيار الدولة المقصودة');return;}
showVisaResult(parseInt(d));
}
function showVisaResult(id){
const v=visas.find(x=>x.id===id);
if(!v) return;
const vf=fields.filter(f=>f.visible && f.id!=='requirements' && f.id!=='notes');
const fCards=vf.map(f=>{
let val='',cls='fc-val';
if(f.id==='price'){val=`$${v.price} ${v.currency}`;cls='fc-val hi';}
else if(f.id==='stay') val=v.stay;
else if(f.id==='processing') val=v.processing;
else if(f.id==='type') val=v.type;
else val=v[f.id]||'—';
return `<div class="fc"><div class="fc-ico">${f.icon}</div><div class="fc-lbl">${f.label}</div><div class="${cls}">${val}</div></div>`;
}).join('');
const rf=fields.find(f=>f.id==='requirements');
const reqHTML=rf?.visible && v.requirements?.length?`
<div class="req-wrap">
<h4>📎 ${rf.label}</h4>
<div class="req-tags">${v.requirements.map(r=>`<span class="req-tag">${r}</span>`).join('')}</div>
</div>`:'';
const nf=fields.find(f=>f.id==='notes');
const notesHTML=nf?.visible && v.notes?`
<div class="notes-wrap"><span>💡</span><span>${v.notes}</span></div>`:'';
const waMsg=encodeURIComponent(`${cfg.waMsg}\nالدولة: ${v.country}\nنوع الفيزا: ${v.type}`);
const waLink=`https://wa.me/${cfg.wa.replace(/\D/g,'')}?text=${waMsg}`;
const rw=document.getElementById('result-wrap');
rw.innerHTML=`
<div class="rcard">
<div class="rhead">
<span class="rflag">${v.flag}</span>
<div class="rinfo"><h3>فيزا ${v.country}</h3><p>${v.type}</p></div>
<span class="ravail">متوفرة الآن</span>
</div>
<div class="fgrid">${fCards}</div>
${reqHTML}
${notesHTML}
<div class="ract">
<a class="btn-wa" href="${waLink}" target="_blank">
<svg viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
${cfg.applyBtn}
</a>
<button class="btn-back" onclick="backToList()">← العودة للقائمة</button>
</div>
</div>`;
rw.classList.add('open');
document.getElementById('all-countries').style.display='none';
rw.scrollIntoView({behavior:'smooth',block:'start'});
}
function backToList(){
document.getElementById('result-wrap').classList.remove('open');
document.getElementById('all-countries').style.display='block';
}
function openWA(msg){
const m=encodeURIComponent(msg||cfg.waMsg);
window.open(`https://wa.me/${cfg.wa.replace(/\D/g,'')}?text=${m}`,'_blank');
}
function testWA(){
openWA('مرحباً، أختبر الاتصال من لوحة الإدارة');
toast('📱','تم فتح واتساب');
}
/* ============================================================
ADMIN — DASHBOARD
============================================================ */
function renderDashboard(){
const tot=visas.length;
const act=visas.filter(v=>v.active).length;
const hid=tot-act;
const flds=fields.filter(f=>f.visible).length;
document.getElementById('d-total').textContent=tot;
document.getElementById('d-active').textContent=act;
document.getElementById('d-hidden').textContent=hid;
document.getElementById('d-fields').textContent=flds;
const tb=document.getElementById('dash-tbody');
tb.innerHTML=visas.slice(0,5).map(v=>`
<tr>
<td><span class="fl">${v.flag}</span> ${v.country}</td>
<td>${v.type}</td>
<td style="color:var(--gold);font-weight:700">$${v.price}</td>
<td>${v.processing}</td>
<td><span class="sbadge ${v.active?'on':'off'}">${v.active?'✓ نشط':'✗ مخفي'}</span></td>
</tr>`).join('');
}
/* ============================================================
ADMIN — VISAS TABLE
============================================================ */
function renderAdminTable(){
const n=visas.length;
const lbl=document.getElementById('visa-count-lbl');
if(lbl) lbl.textContent=`${n} فيزا إجمالاً`;
const tb=document.getElementById('admin-vtbody');
if(!tb) return;
tb.innerHTML=visas.map(v=>`
<tr>
<td><span class="fl">${v.flag}</span> ${v.country}</td>
<td>${v.type}</td>
<td style="color:var(--gold);font-weight:700">$${v.price}</td>
<td>${v.stay}</td>
<td>${v.processing}</td>
<td><span class="sbadge ${v.active?'on':'off'}">${v.active?'✓ نشط':'✗ مخفي'}</span></td>
<td>
<div class="abtn-row">
<button class="abtn edit" onclick="openEditModal(${v.id})" title="تعديل">✏️</button>
<button class="abtn tog" onclick="toggleVisa(${v.id})" title="تفعيل/إخفاء">👁️</button>
<button class="abtn del" onclick="confirmDel(${v.id})" title="حذف">🗑️</button>
</div>
</td>
</tr>`).join('');
renderDashboard();
}
function toggleVisa(id){
const v=visas.find(x=>x.id===id);
if(v){v.active=!v.active;renderAdminTable();toast(v.active?'✅':'🔴',v.active?'تم تفعيل الفيزا':'تم إخفاء الفيزا');}
}
function confirmDel(id){
const v=visas.find(x=>x.id===id);
document.getElementById('modal-content').innerHTML=`
<h3>🗑️ تأكيد الحذف</h3>
<p style="color:var(--silver);margin-bottom:6px">هل تريد حذف فيزا <strong style="color:var(--white)">${v.flag} ${v.country}</strong>؟</p>
<p style="color:#e74c3c;font-size:.85rem;margin-bottom:20px">⚠️ لا يمكن التراجع عن هذه العملية</p>
<div class="modal-actions">
<button class="btn-mcancel" onclick="closeModal()">إلغاء</button>
<button class="btn-mdel" onclick="delVisa(${id})">نعم، احذف</button>
</div>`;
document.getElementById('modal-bg').classList.add('open');
}
function delVisa(id){
visas=visas.filter(v=>v.id!==id);
closeModal();renderAdminTable();toast('🗑️','تم حذف الفيزا');
}
/* ============================================================
MODAL FORM
============================================================ */
function formHTML(v={}){
return `
<h3>${v.id?'✏️ تعديل الفيزا':'➕ إضافة فيزا جديدة'}</h3>
<div class="f2">
<div class="frow"><label>الدولة</label><input id="f-country" type="text" value="${v.country||''}" placeholder="مثال: تركيا"/></div>
<div class="frow"><label>الرمز 🌍</label><input id="f-flag" type="text" value="${v.flag||''}" placeholder="🇹🇷"/></div>
</div>
<div class="f2">
<div class="frow"><label>نوع الفيزا</label><input id="f-type" type="text" value="${v.type||''}" placeholder="سياحية"/></div>
<div class="frow"><label>السعر (دولار)</label><input id="f-price" type="number" value="${v.price||''}" placeholder="45"/></div>
</div>
<div class="f2">
<div class="frow"><label>مدة الإقامة</label><input id="f-stay" type="text" value="${v.stay||''}" placeholder="30 يوم"/></div>
<div class="frow"><label>مدة الإصدار</label><input id="f-processing" type="text" value="${v.processing||''}" placeholder="3 أيام"/></div>
</div>
<div class="frow"><label>المتطلبات (سطر لكل متطلب)</label>
<textarea id="f-req" placeholder="جواز سفر ساري صورة شخصية كشف حساب">${(v.requirements||[]).join('\n')}</textarea></div>
<div class="frow"><label>ملاحظات</label><input id="f-notes" type="text" value="${v.notes||''}" placeholder="معلومة إضافية للزبون..."/></div>
<div class="modal-actions">
<button class="btn-mcancel" onclick="closeModal()">إلغاء</button>
<button class="btn-mok" onclick="saveVisa(${v.id||0})">💾 حفظ</button>
</div>`;
}
function openAddModal(){
document.getElementById('modal-content').innerHTML=formHTML();
document.getElementById('modal-bg').classList.add('open');
}
function openEditModal(id){
const v=visas.find(x=>x.id===id);
document.getElementById('modal-content').innerHTML=formHTML(v);
document.getElementById('modal-bg').classList.add('open');
}
function saveVisa(id){
const country=document.getElementById('f-country').value.trim();
const flag=document.getElementById('f-flag').value.trim();
if(!country||!flag){toast('⚠️','الرجاء ملء اسم الدولة والرمز');return;}
const data={
country,flag,
type:document.getElementById('f-type').value.trim(),
price:parseFloat(document.getElementById('f-price').value)||0,
currency:'دولار',
stay:document.getElementById('f-stay').value.trim(),
processing:document.getElementById('f-processing').value.trim(),
requirements:document.getElementById('f-req').value.split('\n').map(s=>s.trim()).filter(Boolean),
notes:document.getElementById('f-notes').value.trim(),
active:true,
};
if(id){
const i=visas.findIndex(v=>v.id===id);
visas[i]={...visas[i],...data};
toast('✅','تم تعديل الفيزا بنجاح');
} else {
data.id=Date.now();
visas.push(data);
toast('✅','تمت إضافة الفيزا بنجاح');
}
closeModal();renderAdminTable();
}
function closeModal(){
document.getElementById('modal-bg').classList.remove('open');
}
document.getElementById('modal-bg').addEventListener('click',function(e){
if(e.target===this)closeModal();
});
/* ============================================================
FIELDS MANAGER
============================================================ */
function renderFieldsList(){
const el=document.getElementById('fields-list');
if(!el) return;
el.innerHTML=fields.map((f,i)=>`
<div class="fitem" data-id="${f.id}">
<span class="fdrg">⠿</span>
<span class="fitem-ico">${f.icon}</span>
<input type="text" value="${f.label}" onchange="updateFieldLabel('${f.id}',this.value)"/>
<button class="ftoggle ${f.visible?'':'off'}" onclick="toggleField('${f.id}')"></button>
${!['price','stay','processing','type','requirements'].includes(f.id)?
`<button class="abtn del" style="width:26px;height:26px;font-size:.75rem;" onclick="removeField('${f.id}')">✕</button>`:''}
</div>`).join('');
renderFieldPreview();
}
function toggleField(id){
const f=fields.find(x=>x.id===id);
if(f){f.visible=!f.visible;renderFieldsList();}
}
function updateFieldLabel(id,val){
const f=fields.find(x=>x.id===id);
if(f){f.label=val;renderFieldPreview();}
}
function addField(){
const n=document.getElementById('new-field-name').value.trim();
const ico=document.getElementById('new-field-icon').value.trim()||'🔹';
if(!n){toast('⚠️','أدخل اسم الحقل');return;}
fields.push({id:'c_'+Date.now(),label:n,icon:ico,visible:true});
document.getElementById('new-field-name').value='';
document.getElementById('new-field-icon').value='';
renderFieldsList();toast('✅','تمت إضافة الحقل');
}
function removeField(id){
fields=fields.filter(f=>f.id!==id);
renderFieldsList();toast('🗑️','تم حذف الحقل');
}
function renderFieldPreview(){
const p=document.getElementById('field-preview');
if(!p) return;
const vis=fields.filter(f=>f.visible).slice(0,4);
p.innerHTML=`<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">${
vis.map(f=>`<div style="background:rgba(200,168,75,.06);border:1px solid rgba(200,168,75,.15);border-radius:9px;padding:12px">
<div style="font-size:1.1rem">${f.icon}</div>
<div style="font-size:.68rem;color:var(--silver);margin:4px 0;font-weight:700;text-transform:uppercase;">${f.label}</div>
<div style="font-weight:700;font-size:.9rem">—</div>
</div>`).join('')}
</div>`;
}
/* ============================================================
SETTINGS
============================================================ */
function saveSettings(){
cfg.name=document.getElementById('cfg-name').value;
cfg.icon=document.getElementById('cfg-icon').value;
cfg.desc=document.getElementById('cfg-desc').value;
cfg.wa=document.getElementById('cfg-wa').value;
cfg.waMsg=document.getElementById('cfg-wa-msg').value;
cfg.applyBtn=document.getElementById('cfg-apply-btn').value;
document.getElementById('wa-preview-num').textContent=cfg.wa;
toast('✅','تم حفظ الإعدادات بنجاح');
}
function previewColor(){
const p=document.getElementById('c-primary').value;
document.getElementById('color-preview').style.background=`linear-gradient(135deg,${p},${p}aa)`;
}
function applyColors(){
const p=document.getElementById('c-primary').value;
const b=document.getElementById('c-bg').value;
const c=document.getElementById('c-card').value;
document.documentElement.style.setProperty('--gold',p);
document.documentElement.style.setProperty('--ink',b);
document.documentElement.style.setProperty('--ink2',c);
toast('🎨','تم تطبيق الألوان على المنصة');
}
function applyDisplay(){
const fs=document.getElementById('c-font').value;
const rd=document.getElementById('c-radius').value;
document.documentElement.style.fontSize=fs+'px';
document.documentElement.style.setProperty('--r',rd+'px');
document.documentElement.style.setProperty('--r2',(parseInt(rd)+6)+'px');
toast('✅','تم تطبيق إعدادات العرض');
}
/* ============================================================
PANEL SWITCHING
============================================================ */
function switchPanel(p,btn){
document.querySelectorAll('.apanel').forEach(x=>x.classList.remove('active'));
document.querySelectorAll('.sb-item').forEach(x=>x.classList.remove('active'));
const el=document.getElementById('panel-'+p);
if(el) el.classList.add('active');
if(btn) btn.classList.add('active');
if(p==='fields') renderFieldsList();
if(p==='settings'){
document.getElementById('cfg-name').value=cfg.name;
document.getElementById('cfg-icon').value=cfg.icon;
document.getElementById('cfg-desc').value=cfg.desc;
document.getElementById('cfg-wa').value=cfg.wa;
document.getElementById('cfg-wa-msg').value=cfg.waMsg;
document.getElementById('cfg-apply-btn').value=cfg.applyBtn;
document.getElementById('wa-preview-num').textContent=cfg.wa;
}
}
/* ============================================================
TOAST
============================================================ */
function toast(icon,msg){
document.getElementById('toast-i').textContent=icon;
document.getElementById('toast-m').textContent=msg;
const t=document.getElementById('toast');
t.classList.add('show');
setTimeout(()=>t.classList.remove('show'),3200);
}
/* ============================================================
INIT
============================================================ */
// Show login page initially, but customer portal is default
showPage('portal');
renderPortal();
</script>
</body>
</html>