VIP ZORO STORE
- 📅 2026-03-22T19:09:41.132Z
- 👁️ 12 katselukertaa
- 🔓 Julkinen
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VIP ZORO STORE | النسخة الاحترافية</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap" rel="stylesheet">
<style>
:root {
--gold: #ffd700;
--gold-grad: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728);
--black: #0a0a0a;
--card: #161616;
--success: #25d366;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Tajawal', sans-serif; transition: 0.3s; }
body { background: var(--black); color: white; text-align: center; padding-bottom: 80px; overflow-x: hidden; }
.marquee { background: #1a1a1a; color: var(--gold); padding: 5px 0; font-size: 13px; border-bottom: 1px solid #333; overflow: hidden; white-space: nowrap; }
.marquee span { display: inline-block; padding-left: 100%; animation: scroll 20s linear infinite; }
@keyframes scroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
header { background: rgba(0,0,0,0.9); backdrop-filter: blur(10px); padding: 15px 5%; border-bottom: 2px solid var(--gold); position: sticky; top:0; z-index:100; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 20px; font-weight: 900; background: var(--gold-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nav-controls { display: flex; gap: 15px; align-items: center; }
.back-btn { display: none; background: #222; color: var(--gold); border: 1px solid var(--gold); padding: 5px 12px; border-radius: 5px; font-size: 12px; cursor: pointer; }
.bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background: #111; display: flex; justify-content: space-around; padding: 10px; border-top: 1px solid #333; z-index: 1000; }
.nav-item { color: #888; text-decoration: none; font-size: 12px; cursor: pointer; }
.nav-item i { display: block; font-size: 20px; margin-bottom: 4px; }
.nav-item.active { color: var(--gold); }
.section { display: none; padding: 20px 5%; animation: slideUp 0.4s ease; }
.active { display: block; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-top: 20px; }
.card { background: var(--card); padding: 15px; border-radius: 15px; border: 1px solid #222; position: relative; overflow: hidden; cursor: pointer; }
.card:hover { border-color: var(--gold); transform: translateY(-3px); }
.card img { width: 100%; height: 120px; object-fit: cover; border-radius: 10px; }
.sold-out { position: absolute; top: 10px; right: -30px; background: red; color: white; padding: 5px 40px; transform: rotate(45deg); font-weight: bold; font-size: 10px; z-index: 5; }
.price-tag { display: block; font-size: 18px; color: var(--gold); font-weight: bold; margin: 10px 0; }
.buy-btn { background: var(--gold-grad); color: #000; border: none; padding: 10px; width: 100%; border-radius: 8px; font-weight: bold; cursor: pointer; }
#adminArea { background: #111; border: 2px dashed var(--gold); margin: 20px; padding: 20px; display: none; border-radius: 15px; }
input { width: 100%; padding: 12px; margin: 8px 0; background: #222; border: 1px solid #444; color: white; border-radius: 8px; }
.modal { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.9); z-index: 2000; justify-content: center; align-items: center; }
.modal-content { background: #1a1a1a; padding: 20px; border-radius: 20px; width: 90%; max-width: 400px; border: 1px solid var(--gold); }
.whatsapp-float { position: fixed; bottom: 85px; left: 20px; background: var(--success); color: white; width: 55px; height: 55px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 25px; z-index: 100; }
</style>
</head>
<body onload="renderPacks(); loadAccounts();">
<div class="marquee">
<span id="news-bar">🔥 عرض محدود: اشحن 2420 جوهرة واحصل على بونص إضافي .. متجر زورو يرحب بكم 🔥</span>
</div>
<header>
<button id="backBtn" class="back-btn" onclick="showSec('home')"><i class="fas fa-arrow-right"></i> رجوع</button>
<div class="logo">VIP ZORO STORE</div>
<div class="nav-controls">
<button onclick="alert('قسم التعليقات سيتم تفعيله قريباً!')" style="background:none; border:none; color:var(--gold);"><i class="fas fa-comment-dots fa-lg"></i></button>
<button onclick="adminAuth()" style="background:none; border:none; color:#333;"><i class="fas fa-lock"></i></button>
</div>
</header>
<div id="adminArea">
<h3 style="color:var(--gold);">🛠 لوحة التحكم</h3>
<input type="file" id="accFile" accept="image/*">
<input type="text" id="accTitle" placeholder="اسم الحساب">
<input type="number" id="accPrice" placeholder="السعر">
<button class="buy-btn" onclick="saveNewAccount()">نشر الآن</button>
</div>
<div id="home" class="section active">
<div style="padding: 30px 10px; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://wallpaperaccess.com/full/1155018.jpg'); border-radius: 15px; margin-bottom: 20px;">
<h1 style="color:var(--gold)">الرئيسية 👑</h1>
<p>اختر القسم المفضل لديك</p>
</div>
<div class="grid">
<div class="card" onclick="showSec('ff')"><i class="fas fa-gem fa-2x" style="color:var(--gold)"></i><h3>جواهر فري فاير</h3></div>
<div class="card" onclick="showSec('pubg')"><i class="fas fa-bolt fa-2x" style="color:var(--gold)"></i><h3>شدات ببجي</h3></div>
<div class="card" onclick="showSec('accs')"><i class="fas fa-user-shield fa-2x" style="color:var(--gold)"></i><h3>حسابات نادرة</h3></div>
</div>
</div>
<div id="ff" class="section">
<h2 style="color: var(--gold);">💎 باقات الجواهر</h2>
<div class="grid" id="ff-list"></div>
</div>
<div id="pubg" class="section">
<h2 style="color: var(--gold);">🔫 باقات الشدات</h2>
<div class="grid" id="pubg-list"></div>
</div>
<div id="accs" class="section">
<h2 style="color: var(--gold);">🛡️ الحسابات المتوفرة</h2>
<div class="grid" id="accounts-list"></div>
</div>
<div id="payModal" class="modal">
<div class="modal-content">
<h3 id="m-title" style="color:var(--gold)">تفاصيل الطلب</h3>
<p id="m-price" style="margin: 10px 0;"></p>
<div style="background:#000; padding:10px; border-radius:8px; margin:10px 0; border:1px solid #333;">
<small>إيميل PayPal الدفع:</small><br>
<b id="payEmail">diaamakho05@gmail.com</b>
</div>
<input type="text" id="p-id" placeholder="ID اللاعب">
<input type="text" id="p-trans" placeholder="رقم عملية الدفع">
<button class="buy-btn" onclick="validateAndSend()">تأكيد وإرسال عبر واتساب</button>
<button onclick="closeModal()" style="background:none; border:none; color:gray; margin-top:10px;">إلغاء</button>
</div>
</div>
<div class="bottom-nav">
<div class="nav-item active" onclick="showSec('home', this)"><i class="fas fa-home"></i>الرئيسية</div>
<div class="nav-item" onclick="showSec('ff', this)"><i class="fas fa-gem"></i>جواهر</div>
<div class="nav-item" onclick="showSec('pubg', this)"><i class="fas fa-fire"></i>شدات</div>
<div class="nav-item" onclick="showSec('accs', this)"><i class="fas fa-user-tag"></i>حسابات</div>
</div>
<a href="https://wa.me/9720525049671" class="whatsapp-float"><i class="fab fa-whatsapp"></i></a>
<script>
let curProd = "", curPrice = "";
function showSec(id, el) {
document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
document.getElementById(id).classList.add('active');
// تحكم بزر الرجوع
document.getElementById('backBtn').style.display = (id === 'home') ? 'none' : 'block';
if(el) {
document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
el.classList.add('active');
}
}
function renderPacks() {
const ffPacks = [{q: "110 جوهرة", p: 1.5}, {q: "583 جوهرة", p: 5.5}, {q: "2420 جوهرة", p: 20.5}];
const pubgPacks = [{q: "60 UC", p: 1.2}, {q: "325 UC", p: 5.5}, {q: "8100 UC", p: 99.9}];
const ffDiv = document.getElementById('ff-list');
ffPacks.forEach(pack => {
ffDiv.innerHTML += `<div class="card" onclick="openPay('${pack.q}', '${pack.p}')"><h3>${pack.q}</h3><span class="price-tag">$${pack.p}</span><button class="buy-btn">شراء</button></div>`;
});
const pubgDiv = document.getElementById('pubg-list');
pubgPacks.forEach(pack => {
pubgDiv.innerHTML += `<div class="card" onclick="openPay('${pack.q}', '${pack.p}')"><h3>${pack.q}</h3><span class="price-tag">$${pack.p}</span><button class="buy-btn">شراء</button></div>`;
});
}
function openPay(name, price) {
curProd = name;
curPrice = price;
document.getElementById('m-title').innerText = name;
document.getElementById('m-price').innerText = "المبلغ المطلوب: $" + price;
document.getElementById('payModal').style.display = 'flex';
}
function closeModal() { document.getElementById('payModal').style.display = 'none'; }
function validateAndSend() {
const id = document.getElementById('p-id').value;
const trans = document.getElementById('p-trans').value;
if(!id || !trans) return alert("يرجى ملء البيانات!");
const msg = `*طلب شراء جديد*%0Aالمنتج: ${curProd}%0Aالسعر: ${curPrice}%0AID: ${id}%0Aالتحويل: ${trans}`;
window.open(`https://wa.me/9720525049671?text=${msg}`);
}
function adminAuth() {
if(prompt("كلمة مرور المشرف:") === "ZOROVIP") document.getElementById('adminArea').style.display = 'block';
}
function saveNewAccount() {
const file = document.getElementById('accFile').files[0];
const title = document.getElementById('accTitle').value;
const price = document.getElementById('accPrice').value;
if(!file || !title) return alert("البيانات ناقصة");
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
let accs = JSON.parse(localStorage.getItem('zoro_data') || "[]");
accs.push({img: reader.result, title, price, sold: false});
localStorage.setItem('zoro_data', JSON.stringify(accs));
loadAccounts();
alert("تمت الإضافة");
};
}
function loadAccounts() {
const list = document.getElementById('accounts-list');
list.innerHTML = "";
let accs = JSON.parse(localStorage.getItem('zoro_data') || "[]");
accs.forEach((a, index) => {
list.innerHTML += `
<div class="card" onclick="a.sold ? null : openPay('${a.title}', '${a.price}')">
${a.sold ? '<div class="sold-out">مباع</div>' : ''}
<img src="${a.img}">
<h4>${a.title}</h4>
<span class="price-tag">$${a.price}</span>
</div>`;
});
}
</script>
</body>
</html>