| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>KDR1S - Panel</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet"> |
| <style> |
| :root{ |
| --c-green:#00ff88; --c-blue:#0088ff; --c-yellow:#ffcc00; --c-red:#ff2a2a; --c-bg:#050505; |
| } |
| body{font-family:'Cairo',sans-serif;background:var(--c-bg);color:#e0e0e0;overflow-x:hidden;} |
| .lantern{position:fixed;border-radius:50%;filter:blur(2px);opacity:.8;pointer-events:none;animation:floatLantern linear infinite;z-index:0;} |
| @keyframes floatLantern{ |
| 0%{transform:translateY(110vh) translateX(0) scale(1);opacity:0;} |
| 10%{opacity:1;} |
| 90%{opacity:1;} |
| 100%{transform:translateY(-10vh) translateX(30px) scale(.6);opacity:0;} |
| } |
| .string-box{position:relative;width:100%;height:70px;margin-bottom:1rem;overflow:hidden;} |
| .wire-svg{position:absolute;top:18px;left:0;width:100%;height:40px;} |
| .bulb{position:absolute;width:14px;height:14px;border-radius:50%;box-shadow:0 0 12px currentColor;animation:twinkle 1.5s infinite alternate;} |
| @keyframes twinkle{from{opacity:.4;transform:scale(1);}to{opacity:1;transform:scale(1.25);}} |
| .glass-panel{background:rgba(20,20,20,.92);border:1px solid rgba(0,255,136,.15);backdrop-filter:blur(8px);border-radius:1.5rem;} |
| .neon-text{text-shadow:0 0 6px rgba(0,255,136,.6),0 0 12px rgba(0,136,255,.4);} |
| .neon-border{box-shadow:0 0 8px rgba(0,255,136,.2),inset 0 0 12px rgba(0,255,136,.05);} |
| .btn-neon{background:linear-gradient(135deg,var(--c-green),var(--c-blue));color:#000;font-weight:800;border-radius:9999px;transition:.2s;} |
| .btn-neon:hover{transform:scale(1.04);box-shadow:0 0 18px rgba(0,255,136,.5);cursor:pointer;} |
| .btn-yellow{background:linear-gradient(135deg,var(--c-yellow),#ffaa00);color:#000;font-weight:800;border-radius:9999px;} |
| .card-green{background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.35);border-radius:1.5rem;} |
| .card-blue{background:rgba(0,136,255,.08);border:1px solid rgba(0,136,255,.35);border-radius:1.5rem;} |
| .card-yellow{background:rgba(255,204,0,.08);border:1px solid rgba(255,204,0,.35);border-radius:1.5rem;} |
| .input-neon{background:#0b0b0b;border:1px solid rgba(0,255,136,.3);color:#fff;border-radius:1rem;padding:.6rem .8rem;outline:none;transition:.2s;} |
| .input-neon:focus{border-color:var(--c-green);box-shadow:0 0 10px rgba(0,255,136,.2);} |
| .drawer{position:fixed;top:0;right:0;width:300px;height:100%;background:rgba(8,8,8,.97);border-right:1px solid rgba(0,255,136,.15);transform:translateX(100%);transition:.4s;z-index:50;padding-top:4rem;} |
| .drawer.open{transform:translateX(0);} |
| .overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:.3s;z-index:40;} |
| .overlay.show{opacity:1;pointer-events:auto;} |
| .scrollbar-hide::-webkit-scrollbar{display:none;} |
| ::-webkit-scrollbar{width:8px;} |
| ::-webkit-scrollbar-track{background:#0a0a0a;} |
| ::-webkit-scrollbar-thumb{background:rgba(0,255,136,.4);border-radius:4px;} |
| .toast{position:fixed;top:1rem;left:50%;transform:translateX(-50%) translateY(-150%);background:rgba(0,0,0,.9);border:1px solid var(--c-green);color:var(--c-green);padding:.8rem 1.5rem;border-radius:1rem;z-index:100;transition:.4s;font-weight:700;} |
| .toast.show{transform:translateX(-50%) translateY(0);} |
| .msg-user{background:rgba(0,136,255,.15);border:1px solid rgba(0,136,255,.3);border-radius:1rem 1rem .2rem 1rem;padding:.6rem .9rem;margin:.4rem 0;max-width:80%;align-self:flex-end;} |
| .msg-admin{background:rgba(0,255,136,.12);border:1px solid rgba(0,255,136,.3);border-radius:1rem 1rem 1rem .2rem;padding:.6rem .9rem;margin:.4rem 0;max-width:80%;align-self:flex-start;} |
| .msg-ai{background:rgba(255,204,0,.12);border:1px solid rgba(255,204,0,.3);border-radius:1rem 1rem 1rem .2rem;padding:.6rem .9rem;margin:.4rem 0;max-width:80%;align-self:flex-start;} |
| .pulse-dot{animation:pulse 2s infinite;} |
| @keyframes pulse{0%{opacity:1;}50%{opacity:.4;}100%{opacity:1;}} |
| .rotate-tip{animation:spin 1s linear infinite;} |
| @keyframes spin{100%{transform:rotate(360deg);}} |
| </style> |
| </head> |
| <body class="min-h-screen relative"> |
|
|
| <div id="lanterns-container"></div> |
| <div id="overlay" class="overlay" onclick="App.toggleDrawer(false)"></div> |
| <div id="toast" class="toast"></div> |
|
|
| <div id="app" class="relative z-10 p-4 md:p-6 max-w-7xl mx-auto"></div> |
|
|
| <script> |
| /* ===================== DB / Storage ===================== */ |
| const DB={ |
| get(k){ try{return JSON.parse(localStorage.getItem('kdr1s_'+k)||'null');}catch(e){return null;} }, |
| set(k,v){ localStorage.setItem('kdr1s_'+k, JSON.stringify(v)); } |
| }; |
| function initDB(){ |
| if(DB.get('db_init')) return; |
| const sections=[ |
| {id:'ig',name:'انستغرام',apiId:'API-IG'},{id:'tt',name:'تيك توك',apiId:'API-TT'}, |
| {id:'yt',name:'يوتيوب',apiId:'API-YT'},{id:'tw',name:'تويتر / اكس',apiId:'API-X'}, |
| {id:'sc',name:'سناب شات',apiId:'API-SC'},{id:'tg',name:'تيليجرام',apiId:'API-TG'} |
| ]; |
| const services=[ |
| {id:'s1',name:'متابعين انستغرام (جودة عالية)',sectionId:'ig',price:1.2,min:100,max:50000}, |
| {id:'s2',name:'لايكات انستغرام سريعة',sectionId:'ig',price:0.4,min:50,max:100000}, |
| {id:'s3',name:'مشاهدات ستوري انستغرام',sectionId:'ig',price:0.3,min:100,max:200000}, |
| {id:'s4',name:'متابعين تيك توك (حقيقي)',sectionId:'tt',price:2.5,min:100,max:30000}, |
| {id:'s5',name:'لايكات تيك توك',sectionId:'tt',price:0.9,min:100,max:100000}, |
| {id:'s6',name:'مشتركين يوتيوب',sectionId:'yt',price:5.0,min:50,max:10000}, |
| {id:'s7',name:'مشاهدات يوتيوب',sectionId:'yt',price:1.8,min:1000,max:500000}, |
| {id:'s8',name:'متابعين تويتر',sectionId:'tw',price:3.0,min:100,max:20000}, |
| {id:'s9',name:'ريتويت تويتر',sectionId:'tw',price:1.2,min:50,max:50000}, |
| {id:'s10',name:'سكور سناب شات',sectionId:'sc',price:8.0,min:1,max:1000}, |
| {id:'s11',name:'أعضاء قناة تيليجرام',sectionId:'tg',price:1.5,min:50,max:200000}, |
| {id:'s12',name:'مشاهدات تيليجرام',sectionId:'tg',price:0.8,min:100,max:100000} |
| ]; |
| DB.set('sections',sections); |
| DB.set('services',services); |
| DB.set('orders',[]); |
| DB.set('support',[]); |
| DB.set('maintenance',false); |
| DB.set('siteStats',{totalOrders:1243,totalServices:services.length}); |
| DB.set('users',[]); |
| DB.set('db_init',true); |
| } |
| function genID(){ return Math.random().toString(36).slice(2)+Date.now().toString(36); } |
| function fmtMoney(n){ return (n||0).toFixed(2); } |
| |
| /* ===================== App ===================== */ |
| const App={ |
| user:null, |
| admin:false, |
| drawerOpen:false, |
| currentView:'login', |
| |
| init(){ |
| initDB(); |
| startLanterns(); |
| const u=sessionStorage.getItem('kdr1s_currentUser'); |
| const a=sessionStorage.getItem('kdr1s_admin'); |
| if(a==='true'){this.admin=true; this.renderAdmin();} |
| else if(u){this.user=JSON.parse(u); this.renderUser();} |
| else{this.renderLogin();} |
| }, |
| |
| toast(msg, type='success'){ |
| const t=document.getElementById('toast'); |
| t.textContent=msg; |
| t.style.borderColor=type==='error'?'var(--c-red)':'var(--c-green)'; |
| t.style.color=type==='error'?'var(--c-red)':'var(--c-green)'; |
| t.classList.add('show'); |
| setTimeout(()=>t.classList.remove('show'),3000); |
| }, |
| |
| toggleDrawer(show){ |
| this.drawerOpen=show; |
| document.getElementById('drawer')?.classList.toggle('open',show); |
| document.getElementById('overlay').classList.toggle('show',show); |
| }, |
| |
| logout(){ |
| if(this.user){ |
| const users=DB.get('users')||[]; |
| const idx=users.findIndex(x=>x.id===this.user.id); |
| if(idx>-1) users[idx]=this.user; |
| DB.set('users',users); |
| } |
| sessionStorage.removeItem('kdr1s_currentUser'); |
| sessionStorage.removeItem('kdr1s_admin'); |
| this.user=null; this.admin=false; |
| this.renderLogin(); |
| this.toast('تم تسجيل الخروج بنجاح'); |
| }, |
| |
| deleteAccount(){ |
| if(!this.user) return; |
| if(!confirm('هل أنت متأكد من حذف حسابك؟ لا يمكن التراجع!')) return; |
| let users=DB.get('users')||[]; |
| users=users.filter(x=>x.id!==this.user.id); |
| DB.set('users',users); |
| this.logout(); |
| this.toast('تم حذف الحساب بنجاح'); |
| }, |
| |
| /* ===================== Background Fx ===================== */ |
| lanterns(){ |
| const c=document.getElementById('lanterns-container'); |
| const colors=['#00ff88','#0088ff','#ffcc00','#ffffff','#00ccff']; |
| setInterval(()=>{ |
| const el=document.createElement('div'); |
| el.className='lantern'; |
| const size=4+Math.random()*8; |
| el.style.width=size+'px'; el.style.height=size+'px'; |
| el.style.background=colors[Math.floor(Math.random()*colors.length)]; |
| el.style.left=Math.random()*100+'vw'; |
| el.style.boxShadow=`0 0 ${size*2}px ${el.style.background}`; |
| el.style.animationDuration=(6+Math.random()*10)+'s'; |
| c.appendChild(el); |
| setTimeout(()=>el.remove(),18000); |
| },280); |
| }, |
| stringLights(){ |
| const colors=['#00ff88','#0088ff','#ffcc00','#ff2a2a','#ffffff']; |
| let html='<svg class="wire-svg" preserveAspectRatio="none" viewBox="0 0 1000 60"><path d="M0,30 Q250,55 500,30 T1000,30" fill="none" stroke="#333" stroke-width="2"/></svg>'; |
| for(let i=0;i<18;i++){ |
| const left=3+(i/17)*94; |
| const top=18+Math.sin(i*1.1)*12; |
| html+=`<div class="bulb" style="left:${left}%; top:${top}px; background:${colors[i%colors.length]}; color:${colors[i%colors.length]};"></div>`; |
| } |
| return `<div class="string-box">${html}</div>`; |
| }, |
| |
| /* ===================== LOGIN ===================== */ |
| renderLogin(){ |
| this.currentView='login'; |
| document.getElementById('app').innerHTML=` |
| <div class="flex flex-col items-center justify-center min-h-[85vh]"> |
| <div class="glass-panel neon-border p-8 w-full max-w-md text-center relative overflow-hidden"> |
| <div class="absolute inset-0 opacity-10 pointer-events-none" style="background:radial-gradient(circle at 50% 0%, var(--c-green), transparent 70%);"></div> |
| <h1 class="text-5xl font-extrabold mb-2 neon-text tracking-wider">KDR1S</h1> |
| <p class="text-blue-400 mb-8 text-sm">موقع رشق احترافي لجميع المنصات</p> |
| |
| <div class="flex gap-3 mb-6"> |
| <button id="tab-user" class="flex-1 py-2 px-4 rounded-full bg-green-500/20 border border-green-500/40 text-green-300 hover:bg-green-500/30 transition font-bold">دخول مستخدم</button> |
| <button id="tab-admin" class="flex-1 py-2 px-4 rounded-full bg-blue-500/20 border border-blue-500/40 text-blue-300 hover:bg-blue-500/30 transition font-bold">دخول أدمن</button> |
| </div> |
| |
| <div id="login-form-area"></div> |
| </div> |
| </div>`; |
| |
| const area=document.getElementById('login-form-area'); |
| const renderUserForm=()=>{ |
| area.innerHTML=` |
| <div class="space-y-4 text-right" id="user-form"> |
| <input id="u-name" type="text" placeholder="اسم المستخدم" class="input-neon w-full text-right"> |
| <input id="u-email" type="email" placeholder="البريد الإلكتروني" class="input-neon w-full text-right"> |
| <label class="flex items-center gap-2 cursor-pointer justify-end text-sm text-gray-300"> |
| <input id="not-robot" type="checkbox" class="accent-green-500 w-4 h-4"> |
| <span>أنا لست روبوتاً</span> |
| </label> |
| <button id="btn-verify-robot" class="w-full py-2 border border-blue-500/50 text-blue-400 rounded-full hover:bg-blue-500/10 transition font-bold">التحقق من أنني لست روبوتاً</button> |
| <div id="robot-status" class="hidden text-green-400 text-sm font-bold"><i class="fas fa-check-circle"></i> تم التحقق من reCAPTCHA</div> |
| <button id="btn-real-user" disabled class="w-full py-2 mt-2 opacity-50 border border-yellow-500/50 text-yellow-400 rounded-full hover:bg-yellow-500/10 transition font-bold">التحقق من المستخدم الحقيقي</button> |
| <div id="real-user-q" class="hidden mt-2 p-3 rounded-xl bg-yellow-500/10 border border-yellow-500/30 text-right"> |
| <p class="text-sm text-yellow-200 mb-2">أجب للتحقق: كم عدد أيام السنة العادية؟</p> |
| <input id="q-answer" type="number" class="input-neon w-full mb-2" placeholder="الإجابة"> |
| <button id="btn-check-q" class="btn-yellow w-full py-1.5 rounded-full text-sm">تحقق</button> |
| </div> |
| <button id="btn-login-final" disabled class="btn-neon w-full py-2.5 mt-2 opacity-40">تسجيل الدخول</button> |
| </div>`; |
| let robotOk=false, realOk=false; |
| document.getElementById('btn-verify-robot').onclick=()=>{ |
| if(!document.getElementById('not-robot').checked){ this.toast('يرجى تأكيد خانة "أنا لست روبوتاً"','error'); return; } |
| robotOk=true; |
| document.getElementById('robot-status').classList.remove('hidden'); |
| document.getElementById('btn-real-user').disabled=false; |
| document.getElementById('btn-real-user').classList.remove('opacity-50'); |
| }; |
| document.getElementById('btn-real-user').onclick=()=>{ |
| document.getElementById('real-user-q').classList.remove('hidden'); |
| }; |
| document.getElementById('btn-check-q').onclick=()=>{ |
| if(document.getElementById('q-answer').value!=='365'){ this.toast('إجابة خاطئة','error'); return; } |
| realOk=true; |
| document.getElementById('real-user-q').innerHTML='<div class="text-green-400 font-bold text-center"><i class="fas fa-check-circle"></i> تم التحقق من المستخدم الحقيقي</div>'; |
| document.getElementById('btn-login-final').disabled=false; |
| document.getElementById('btn-login-final').classList.remove('opacity-40'); |
| }; |
| document.getElementById('btn-login-final').onclick=()=>{ |
| const name=document.getElementById('u-name').value.trim(); |
| const email=document.getElementById('u-email').value.trim(); |
| if(!name||!email){ this.toast('يرجى ملء جميع الحقول','error'); return; } |
| if(!robotOk||!realOk) return; |
| let users=DB.get('users')||[]; |
| let u=users.find(x=>x.username===name && x.email===email); |
| if(!u){ |
| u={id:genID(),username:name,email,balance:0,apiKey:'kdr1s_'+genID().slice(0,16),createdAt:new Date().toLocaleString(),devices:[]}; |
| users.push(u); |
| DB.set('users',users); |
| } |
| u.devices.push({name:navigator.userAgent,time:new Date().toLocaleString()}); |
| DB.set('users',users); |
| this.user=u; |
| sessionStorage.setItem('kdr1s_currentUser',JSON.stringify(u)); |
| this.renderUser(); |
| this.toast('مرحباً بك في KDR1S'); |
| }; |
| }; |
| const renderAdminForm=()=>{ |
| area.innerHTML=` |
| <div class="space-y-4 text-right"> |
| <input id="admin-code" type="password" placeholder="كود الأدمن" class="input-neon w-full text-right"> |
| <button id="btn-admin-login" class="btn-neon w-full py-2.5">دخول الأدمن</button> |
| </div>`; |
| document.getElementById('btn-admin-login').onclick=()=>{ |
| if(document.getElementById('admin-code').value!=='KDR1K2VP'){ |
| this.toast('كود الأدمن غير صحيح','error'); return; |
| } |
| this.admin=true; |
| sessionStorage.setItem('kdr1s_admin','true'); |
| this.renderAdmin(); |
| this.toast('تم دخول لوحة الأدمن'); |
| }; |
| }; |
| document.getElementById('tab-user').onclick=renderUserForm; |
| document.getElementById('tab-admin').onclick=renderAdminForm; |
| renderUserForm(); |
| }, |
| |
| /* ===================== USER DASHBOARD ===================== */ |
| renderUser(){ |
| this.currentView='user'; |
| if(DB.get('maintenance') && !this.admin){ |
| this.renderMaintenance(); return; |
| } |
| const orders=DB.get('orders')||[]; |
| const userOrders=orders.filter(o=>o.userId===this.user.id); |
| const siteStats=DB.get('siteStats')||{totalOrders:0,totalServices:0}; |
| const services=DB.get('services')||[]; |
| const sections=DB.get('sections')||[]; |
| |
| document.getElementById('app').innerHTML=` |
| ${this.stringLights()} |
| |
| <div class="flex items-center justify-between mb-6"> |
| <div class="flex items-center gap-3"> |
| <button onclick="App.toggleDrawer(true)" class="text-green-400 text-2xl p-2 rounded-full hover:bg-white/5 transition"><i class="fas fa-bars"></i></button> |
| <h1 class="text-2xl font-extrabold text-green-400 neon-text tracking-widest">KDR1S</h1> |
| </div> |
| <div class="glass-panel px-4 py-2 flex items-center gap-2 text-yellow-400 rounded-full border-yellow-400/30"> |
| <i class="fas fa-wallet"></i> |
| <span class="font-bold">$${fmtMoney(this.user.balance)}</span> |
| </div> |
| </div> |
| |
| |
| <div id="drawer" class="drawer"> |
| <button onclick="App.toggleDrawer(false)" class="absolute top-4 right-4 text-gray-400 hover:text-white text-xl"><i class="fas fa-times"></i></button> |
| <div class="px-6 space-y-3 text-right"> |
| <h3 class="text-green-400 font-bold mb-4 border-b border-green-500/30 pb-2">القائمة</h3> |
| <button onclick="App.toast('شحن الرصيد غير متاح حالياً','error')" class="w-full text-right py-2 px-3 rounded-xl hover:bg-white/5 text-gray-200 flex items-center gap-2"><i class="fas fa-plus-circle text-green-400 w-5"></i> شحن رصيد</button> |
| <button onclick="App.viewSupport()" class="w-full text-right py-2 px-3 rounded-xl hover:bg-white/5 text-gray-200 flex items-center gap-2"><i class="fas fa-headset text-blue-400 w-5"></i> التواصل مع الدعم</button> |
| <button onclick="App.viewApi()" class="w-full text-right py-2 px-3 rounded-xl hover:bg-white/5 text-gray-200 flex items-center gap-2"><i class="fas fa-key text-yellow-400 w-5"></i> API Key</button> |
| <button onclick="App.viewGPT()" class="w-full text-right py-2 px-3 rounded-xl hover:bg-white/5 text-gray-200 flex items-center gap-2"><i class="fas fa-robot text-green-400 w-5"></i> GPT AI</button> |
| <button onclick="App.deleteAccount()" class="w-full text-right py-2 px-3 rounded-xl hover:bg-red-500/10 text-red-400 flex items-center gap-2"><i class="fas fa-trash-alt w-5"></i> حذف الحساب</button> |
| <button onclick="App.logout()" class="w-full text-right py-2 px-3 rounded-xl hover:bg-white/5 text-gray-200 flex items-center gap-2"><i class="fas fa-sign-out-alt text-blue-400 w-5"></i> تسجيل خروج</button> |
| |
| <h3 class="text-green-400 font-bold mb-2 mt-4 border-b border-green-500/30 pb-2">المزيد</h3> |
| <button onclick="App.viewOrders()" class="w-full text-right py-2 px-3 rounded-xl hover:bg-white/5 text-gray-200 flex items-center gap-2"><i class="fas fa-history text-blue-400 w-5"></i> آخر الطلبات</button> |
| <button onclick="App.showTerms()" class="w-full text-right py-2 px-3 rounded-xl hover:bg-white/5 text-gray-200 flex items-center gap-2"><i class="fas fa-file-contract text-yellow-400 w-5"></i> الشروط والخصوصية</button> |
| <div class="py-2 px-3 text-gray-400 text-sm flex items-center gap-2"><i class="fas fa-code text-green-400 w-5"></i> المطور @IVS_X</div> |
| <button onclick="App.viewSettings()" class="w-full text-right py-2 px-3 rounded-xl hover:bg-white/5 text-gray-200 flex items-center gap-2"><i class="fas fa-cog text-blue-400 w-5"></i> إعدادات الحساب</button> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8"> |
| <div class="card-green p-5 relative overflow-hidden"> |
| <div class="absolute top-2 left-2 text-green-500/20 text-5xl"><i class="fas fa-shopping-cart"></i></div> |
| <h3 class="text-green-300 font-bold mb-1">عدد الطلبات الكلية بالموقع</h3> |
| <div class="text-3xl font-extrabold text-white">${siteStats.totalOrders}</div> |
| </div> |
| <div class="card-green p-5 relative overflow-hidden"> |
| <div class="absolute top-2 left-2 text-green-500/20 text-5xl"><i class="fas fa-layer-group"></i></div> |
| <h3 class="text-green-300 font-bold mb-1">الخدمات / طلباتي</h3> |
| <div class="flex justify-around mt-2"> |
| <div class="text-center"><div class="text-xs text-gray-400">الخدمات</div><div class="text-xl font-bold text-blue-300">${siteStats.totalServices}</div></div> |
| <div class="text-center"><div class="text-xs text-gray-400">طلباتي</div><div class="text-xl font-bold text-yellow-300">${userOrders.length}</div></div> |
| </div> |
| </div> |
| <div class="card-green p-5 relative overflow-hidden"> |
| <div class="absolute top-2 left-2 text-green-500/20 text-5xl"><i class="fas fa-mouse-pointer"></i></div> |
| <h3 class="text-green-300 font-bold mb-2">اختيار القسم والخدمة</h3> |
| <select id="sel-section" class="input-neon w-full text-right mb-2 text-sm"><option value="">اختر قسماً...</option>${sections.map(s=>`<option value="${s.id}">${s.name}</option>`).join('')}</select> |
| <select id="sel-service" class="input-neon w-full text-right mb-2 text-sm hidden"><option value="">اختر خدمة...</option></select> |
| <div id="svc-details" class="hidden text-xs space-y-1 bg-black/40 p-3 rounded-xl border border-white/10"> |
| <div class="flex justify-between"><span class="text-yellow-400">الحد الأدنى:</span><span id="d-min" class="font-bold"></span></div> |
| <div class="flex justify-between"><span class="text-yellow-400">الحد الأقصى:</span><span id="d-max" class="font-bold"></span></div> |
| <div class="flex justify-between"><span class="text-blue-400">السعر لكل 1000:</span><span id="d-price" class="font-bold"></span></div> |
| <input id="in-qty" type="number" class="input-neon w-full text-right mt-1 text-sm" placeholder="الكمية"> |
| <input id="in-link" type="url" class="input-neon w-full text-right text-sm" |
