Hugging Face's logo

Spaces:
SCSBIO
/
rpx
Running

App Files Community
rpx / index.html
SCSBIO's picture
SCSBIO
💥 كل الحاجات اللي تبيها في الموقع: 🟪 التصميم والشكل: لون الموقع: أسود × بنفسجي (ستايل فاخر وغامق). اسم الموقع: XPR شعار الموقع: يكون فيه عبارة "أنا نديمي". الصورة في الهيدر/الواجهة: صورة زين الشخصية. التصميم: نفس شكل متجر مرمريتا تمامًا لكن مطور وأحلى. ستايل داكن: زي المتاجر الاحترافية (مرتب - صور - أزرار واضحة - تنسيق مرتب). 🧠 الخصائص والخيارات داخل الموقع: 🛍️ جميع أشياء Blox Fruits (بدون الفواكه): تقدر تشتري: الريسات (Race) V4 + اختيار نوع الريس (إنجل - كيتسوني - غول - سايبورغ...) تحديد إذا معاه مراية ولا لا الأسلحة الديد ريلز (Dead Reels) الشخصيات القطارات أي باوندات من 50 وطالع كل باكجات الحسابات أي شيء ثاني يخص بلوكس فروت كل شي تقدر تختاره لحاله (مش باكج) 💲 الأسعار: يقدر يختار الدفع بـ: الريال السعودي روبوكس يظهر له السعر واضح فيه خصومات مخصصة (قروب واتساب خاص) 🟢 نظام متاح / غير متاح: كل منتج يظهر تحته حالته: ✅ متاح ❌ غير متاح 🧑‍💼 تحكم الأدمن (أنت): تقدر تتحكم بكل شيء: تضيف أو تشيل منتجات تغير الأسعار تغير الحالة (متاح / غير متاح) تضيف صور جديدة تغير الألوان أو الكلام الناس ما يقدرون يتحكمون فيه، بس أنت الأدمن 📲 روابط مهمة: رابط ديسكورد خاص: مضاف رابط واتساب (قروب خصومات): https://whatsapp.com/channel/0029VbAJY2l1NCrRPWiDIA2O 📸 الصور اللي تبيها في الموقع: صور كل المنتجات (ريس، ديد ريلز، شخصيات، أسلحة، باوندات) صور واضحة واحترافية صور تظهر عدد الباوندات (مثلاً: 50 - 100 - 200...) 💵 شكل الدفع: Apple Pay STC Pay روبوكس (مع كتابة اسم الحساب) - Initial Deployment
d8973f3 verified
Raw
History Blame Contribute Delete
40.9 kB
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>XPR - متجر بلوكس فروت</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">
 <script>
 tailwind.config = {
 theme: {
 extend: {
 colors: {
 primary: '#6b21a8',
 dark: '#0f172a',
 secondary: '#1e293b',
 }
 }
 }
 }
 </script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
body {
 font-family: 'Tajawal', sans-serif;
 background-color: #0f172a;
 color: white;
 }
.gradient-text {
 background: linear-gradient(90deg, #a855f7, #6b21a8);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
.product-card {
 transition: all 0.3s ease;
 border: 1px solid #1e293b;
 }
.product-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
 border-color: #6b21a8;
 }
.nav-link {
 position: relative;
 }
.nav-link::after {
 content: '';
 position: absolute;
 width: 0;
 height: 2px;
 bottom: -2px;
 right: 0;
 background-color: #a855f7;
 transition: width 0.3s ease;
 }
.nav-link:hover::after {
 width: 100%;
 }
.status-available {
 color: #10b981;
 }
.status-unavailable {
 color: #ef4444;
 }
.payment-method {
 border: 1px solid #334155;
 transition: all 0.3s ease;
 }
.payment-method:hover {
 border-color: #6b21a8;
 background-color: rgba(107, 33, 168, 0.1);
 }
 </style>
</head>
<body>
 <!-- Admin Panel (Hidden by default, shown for admin) -->
 <div id="adminPanel" class="fixed top-0 left-0 w-full bg-gray-900 z-50 p-4 hidden">
 <div class="container mx-auto flex justify-between items-center">
 <h3 class="text-xl font-bold gradient-text">لوحة التحكم</h3>
 <div class="space-x-4">
 <button class="bg-purple-800 hover:bg-purple-700 px-4 py-2 rounded-lg">إضافة منتج</button>
 <button class="bg-purple-800 hover:bg-purple-700 px-4 py-2 rounded-lg">تعديل الأسعار</button>
 <button class="bg-purple-800 hover:bg-purple-700 px-4 py-2 rounded-lg">تغيير الحالة</button>
 <button id="closeAdminPanel" class="bg-red-600 hover:bg-red-500 px-4 py-2 rounded-lg">إغلاق</button>
 </div>
 </div>
 </div>
<!-- Header -->
 <header class="bg-gradient-to-r from-dark to-secondary border-b border-purple-900">
 <div class="container mx-auto px-4 py-6">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="flex items-center space-x-4 mb-4 md:mb-0">
 <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-purple-600">
 <img src="https://via.placeholder.com/150" alt="زين الشخصية" class="w-full h-full object-cover">
 </div>
 <div>
 <h1 class="text-3xl font-bold gradient-text">XPR</h1>
 <p class="text-purple-300"></p>
 </div>
 </div>
<nav class="flex space-x-6">
 <a href="#" class="nav-link">الرئيسية</a>
 <a href="#products" class="nav-link">المنتجات</a>
 <a href="#about" class="nav-link">عن المتجر</a>
 <a href="#contact" class="nav-link">تواصل معنا</a>
 <button id="adminBtn" class="bg-purple-800 hover:bg-purple-700 px-4 py-1 rounded-lg hidden">
 <i class="fas fa-user-shield mr-1"></i> الأدمن
 </button>
 </nav>
 </div>
 </div>
 </header>
<!-- Hero Section -->
 <section class="bg-dark py-16">
 <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
 <div class="md:w-1/2 mb-8 md:mb-0">
 <h2 class="text-4xl md:text-5xl font-bold mb-4">متجر <span class="gradient-text">XPR</span> الرسمي</h2>
 <p class="text-gray-300 mb-6 text-lg">أفضل متجر لشراء جميع مستلزمات بلوكس فروت بأسعار تنافسية وجودة عالية</p>
 <div class="flex space-x-4">
 <a href="#products" class="bg-purple-700 hover:bg-purple-600 px-6 py-3 rounded-lg font-medium">تصفح المنتجات</a>
 <a href="https://whatsapp.com/channel/0029VbAJY2l1NCrRPWiDIA2O" target="_blank" class="bg-green-700 hover:bg-green-600 px-6 py-3 rounded-lg font-medium">
 <i class="fab fa-whatsapp mr-2"></i> قروب الخصومات
 </a>
 </div>
 </div>
 <div class="md:w-1/2 flex justify-center">
 <div class="relative">
 <div class="w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-purple-600 shadow-lg">
 <img src="https://via.placeholder.com/400" alt="زين الشخصية" class="w-full h-full object-cover">
 </div>
 <div class="absolute -bottom-4 -right-4 bg-purple-800 px-4 py-2 rounded-lg shadow-lg">
 <span class="font-bold">أنا نديمي</span>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Products Section -->
 <section id="products" class="py-16 bg-secondary">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold mb-12 text-center gradient-text">منتجاتنا</h2>
<!-- Categories -->
 <div class="flex overflow-x-auto pb-4 mb-8 space-x-4">
 <button class="category-btn px-6 py-2 bg-purple-800 rounded-lg font-medium whitespace-nowrap" data-category="all">الكل</button>
 <button class="category-btn px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium whitespace-nowrap" data-category="races">الريسات</button>
 <button class="category-btn px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium whitespace-nowrap" data-category="v4">V4</button>
 <button class="category-btn px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium whitespace-nowrap" data-category="weapons">الأسلحة</button>
 <button class="category-btn px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium whitespace-nowrap" data-category="reels">ديد ريلز</button>
 <button class="category-btn px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium whitespace-nowrap" data-category="characters">الشخصيات</button>
 <button class="category-btn px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium whitespace-nowrap" data-category="trains">القطارات</button>
 <button class="category-btn px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium whitespace-nowrap" data-category="bundles">الباوندات</button>
 </div>
<!-- Products Grid -->
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
 <!-- Race Product -->
 <div class="product-card bg-dark rounded-lg p-4" data-category="races">
 <div class="relative mb-4">
 <img src="https://via.placeholder.com/300x200?text=Race" alt="ريس" class="w-full h-40 object-cover rounded-lg">
 <span class="absolute top-2 left-2 bg-purple-800 text-white px-2 py-1 rounded text-sm">الريسات</span>
 </div>
 <h3 class="text-xl font-bold mb-2">ريس بلوكس فروت</h3>
 <p class="text-gray-300 mb-4">احصل على ريس قوي لشخصيتك في اللعبة</p>
 <div class="flex justify-between items-center mb-4">
 <span class="text-xl font-bold text-purple-400">50 SAR</span>
 <span class="status-available flex items-center">
 <i class="fas fa-check-circle mr-1"></i> متاح
 </span>
 </div>
 <button class="w-full bg-purple-700 hover:bg-purple-600 py-2 rounded-lg">أضف للسلة</button>
 </div>
<!-- V4 Product -->
 <div class="product-card bg-dark rounded-lg p-4" data-category="v4">
 <div class="relative mb-4">
 <img src="https://via.placeholder.com/300x200?text=V4" alt="V4" class="w-full h-40 object-cover rounded-lg">
 <span class="absolute top-2 left-2 bg-purple-800 text-white px-2 py-1 rounded text-sm">V4</span>
 </div>
 <h3 class="text-xl font-bold mb-2">V4 + مراية</h3>
 <p class="text-gray-300 mb-4">اختر نوع الريس (إنجل - كيتسوني - غول - سايبورغ)</p>
 <div class="flex justify-between items-center mb-4">
 <span class="text-xl font-bold text-purple-400">80 SAR</span>
 <span class="status-available flex items-center">
 <i class="fas fa-check-circle mr-1"></i> متاح
 </span>
 </div>
 <button class="w-full bg-purple-700 hover:bg-purple-600 py-2 rounded-lg">أضف للسلة</button>
 </div>
<!-- Weapon Product -->
 <div class="product-card bg-dark rounded-lg p-4" data-category="weapons">
 <div class="relative mb-4">
 <img src="https://via.placeholder.com/300x200?text=Weapon" alt="سلاح" class="w-full h-40 object-cover rounded-lg">
 <span class="absolute top-2 left-2 bg-purple-800 text-white px-2 py-1 rounded text-sm">الأسلحة</span>
 </div>
 <h3 class="text-xl font-bold mb-2">سيف الظلام</h3>
 <p class="text-gray-300 mb-4">أحد أقوى الأسلحة في اللعبة</p>
 <div class="flex justify-between items-center mb-4">
 <span class="text-xl font-bold text-purple-400">45 SAR</span>
 <span class="status-unavailable flex items-center">
 <i class="fas fa-times-circle mr-1"></i> غير متاح
 </span>
 </div>
 <button class="w-full bg-gray-600 cursor-not-allowed py-2 rounded-lg" disabled>غير متاح</button>
 </div>
<!-- Dead Reels Product -->
 <div class="product-card bg-dark rounded-lg p-4" data-category="reels">
 <div class="relative mb-4">
 <img src="https://via.placeholder.com/300x200?text=Dead+Reels" alt="ديد ريلز" class="w-full h-40 object-cover rounded-lg">
 <span class="absolute top-2 left-2 bg-purple-800 text-white px-2 py-1 rounded text-sm">ديد ريلز</span>
 </div>
 <h3 class="text-xl font-bold mb-2">ديد ريلز كاملة</h3>
 <p class="text-gray-300 mb-4">مجموعة ديد ريلز كاملة لجميع الشخصيات</p>
 <div class="flex justify-between items-center mb-4">
 <span class="text-xl font-bold text-purple-400">60 SAR</span>
 <span class="status-available flex items-center">
 <i class="fas fa-check-circle mr-1"></i> متاح
 </span>
 </div>
 <button class="w-full bg-purple-700 hover:bg-purple-600 py-2 rounded-lg">أضف للسلة</button>
 </div>
<!-- Character Product -->
 <div class="product-card bg-dark rounded-lg p-4" data-category="characters">
 <div class="relative mb-4">
 <img src="https://via.placeholder.com/300x200?text=Character" alt="شخصية" class="w-full h-40 object-cover rounded-lg">
 <span class="absolute top-2 left-2 bg-purple-800 text-white px-2 py-1 rounded text-sm">الشخصيات</span>
 </div>
 <h3 class="text-xl font-bold mb-2">شخصية دراغون</h3>
 <p class="text-gray-300 mb-4">شخصية قوية مع قدرات خاصة</p>
 <div class="flex justify-between items-center mb-4">
 <span class="text-xl font-bold text-purple-400">35 SAR</span>
 <span class="status-available flex items-center">
 <i class="fas fa-check-circle mr-1"></i> متاح
 </span>
 </div>
 <button class="w-full bg-purple-700 hover:bg-purple-600 py-2 rounded-lg">أضف للسلة</button>
 </div>
<!-- Train Product -->
 <div class="product-card bg-dark rounded-lg p-4" data-category="trains">
 <div class="relative mb-4">
 <img src="https://via.placeholder.com/300x200?text=Train" alt="قطار" class="w-full h-40 object-cover rounded-lg">
 <span class="absolute top-2 left-2 bg-purple-800 text-white px-2 py-1 rounded text-sm">القطارات</span>
 </div>
 <h3 class="text-xl font-bold mb-2">قطار الشبح</h3>
 <p class="text-gray-300 mb-4">أسرع قطار في اللعبة</p>
 <div class="flex justify-between items-center mb-4">
 <span class="text-xl font-bold text-purple-400">40 SAR</span>
 <span class="status-available flex items-center">
 <i class="fas fa-check-circle mr-1"></i> متاح
 </span>
 </div>
 <button class="w-full bg-purple-700 hover:bg-purple-600 py-2 rounded-lg">أضف للسلة</button>
 </div>
<!-- Bundle Product -->
 <div class="product-card bg-dark rounded-lg p-4" data-category="bundles">
 <div class="relative mb-4">
 <img src="https://via.placeholder.com/300x200?text=50+Bounty" alt="50 باوند" class="w-full h-40 object-cover rounded-lg">
 <span class="absolute top-2 left-2 bg-purple-800 text-white px-2 py-1 rounded text-sm">الباوندات</span>
 </div>
 <h3 class="text-xl font-bold mb-2">50 باوند</h3>
 <p class="text-gray-300 mb-4">زيادة باوند شخصيتك بمقدار 50</p>
 <div class="flex justify-between items-center mb-4">
 <span class="text-xl font-bold text-purple-400">25 SAR</span>
 <span class="status-available flex items-center">
 <i class="fas fa-check-circle mr-1"></i> متاح
 </span>
 </div>
 <button class="w-full bg-purple-700 hover:bg-purple-600 py-2 rounded-lg">أضف للسلة</button>
 </div>
<!-- Bundle Product 2 -->
 <div class="product-card bg-dark rounded-lg p-4" data-category="bundles">
 <div class="relative mb-4">
 <img src="https://via.placeholder.com/300x200?text=100+Bounty" alt="100 باوند" class="w-full h-40 object-cover rounded-lg">
 <span class="absolute top-2 left-2 bg-purple-800 text-white px-2 py-1 rounded text-sm">الباوندات</span>
 </div>
 <h3 class="text-xl font-bold mb-2">100 باوند</h3>
 <p class="text-gray-300 mb-4">زيادة باوند شخصيتك بمقدار 100</p>
 <div class="flex justify-between items-center mb-4">
 <span class="text-xl font-bold text-purple-400">45 SAR</span>
 <span class="status-unavailable flex items-center">
 <i class="fas fa-times-circle mr-1"></i> غير متاح
 </span>
 </div>
 <button class="w-full bg-gray-600 cursor-not-allowed py-2 rounded-lg" disabled>غير متاح</button>
 </div>
 </div>
 </div>
 </section>
<!-- About Section -->
 <section id="about" class="py-16 bg-dark">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold mb-12 text-center gradient-text">عن المتجر</h2>
<div class="flex flex-col md:flex-row items-center">
 <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
 <h3 class="text-2xl font-bold mb-4">لماذا تختار <span class="gradient-text">XPR</span>؟</h3>
 <p class="text-gray-300 mb-4">نحن متخصصون في توفير جميع مستلزمات لعبة بلوكس فروت بأسعار تنافسية وجودة عالية.</p>
 <p class="text-gray-300 mb-4">نقدم خدمة سريعة وآمنة مع ضمان استرجاع الأموال في حال وجود أي مشكلة.</p>
 <p class="text-gray-300 mb-6">لدينا فريق دعم على مدار الساعة لمساعدتك في أي استفسار.</p>
<div class="bg-secondary p-6 rounded-lg">
 <h4 class="text-xl font-bold mb-3 gradient-text">مميزاتنا</h4>
 <ul class="space-y-2">
 <li class="flex items-center">
 <i class="fas fa-check-circle text-purple-500 mr-2"></i>
 <span>أسعار منافسة</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-check-circle text-purple-500 mr-2"></i>
 <span>توصيل سريع</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-check-circle text-purple-500 mr-2"></i>
 <span>ضمان استرجاع الأموال</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-check-circle text-purple-500 mr-2"></i>
 <span>دعم فني على مدار الساعة</span>
 </li>
 </ul>
 </div>
 </div>
<div class="md:w-1/2">
 <div class="bg-secondary p-6 rounded-lg">
 <h4 class="text-xl font-bold mb-4 gradient-text">كيفية الشراء</h4>
 <div class="space-y-4">
 <div class="flex items-start">
 <div class="bg-purple-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1 flex-shrink-0">1</div>
 <div>
 <h5 class="font-bold mb-1">اختر المنتج</h5>
 <p class="text-gray-300">تصفح قائمة المنتجات واختر ما يناسبك</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="bg-purple-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1 flex-shrink-0">2</div>
 <div>
 <h5 class="font-bold mb-1">أضف للسلة</h5>
 <p class="text-gray-300">اضغط على زر "أضف للسلة" للمنتجات التي تريدها</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="bg-purple-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1 flex-shrink-0">3</div>
 <div>
 <h5 class="font-bold mb-1">اختر طريقة الدفع</h5>
 <p class="text-gray-300">اختر بين الريال السعودي أو الروبوكس</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="bg-purple-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 mt-1 flex-shrink-0">4</div>
 <div>
 <h5 class="font-bold mb-1">استلم المنتج</h5>
 <p class="text-gray-300">ستحصل على المنتج خلال دقائق بعد التأكد من الدفع</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Payment Methods -->
 <section class="py-16 bg-secondary">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold mb-12 text-center gradient-text">طرق الدفع</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
 <div class="payment-method bg-dark rounded-lg p-6 text-center">
 <div class="w-16 h-16 bg-purple-900 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fab fa-apple text-2xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">Apple Pay</h3>
 <p class="text-gray-300">دفع آمن وسريع عبر Apple Pay</p>
 </div>
<div class="payment-method bg-dark rounded-lg p-6 text-center">
 <div class="w-16 h-16 bg-purple-900 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-money-bill-wave text-2xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">STC Pay</h3>
 <p class="text-gray-300">الدفع عبر محفظة STC Pay</p>
 </div>
<div class="payment-method bg-dark rounded-lg p-6 text-center">
 <div class="w-16 h-16 bg-purple-900 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-coins text-2xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">روبوكس</h3>
 <p class="text-gray-300">ادفع بالروبوكس (اكتب اسم الحساب)</p>
 </div>
<div class="payment-method bg-dark rounded-lg p-6 text-center">
 <div class="w-16 h-16 bg-purple-900 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-credit-card text-2xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">الريال السعودي</h3>
 <p class="text-gray-300">الدفع المباشر بالريال السعودي</p>
 </div>
 </div>
 </div>
 </section>
<!-- Contact Section -->
 <section id="contact" class="py-16 bg-dark">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold mb-12 text-center gradient-text">تواصل معنا</h2>
<div class="flex flex-col md:flex-row">
 <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
 <h3 class="text-2xl font-bold mb-4">ابقى على تواصل</h3>
 <p class="text-gray-300 mb-6">لديك أي استفسار أو تحتاج مساعدة؟ لا تتردد في التواصل معنا عبر أي من الطرق التالية:</p>
<div class="space-y-4">
 <div class="flex items-center">
 <div class="bg-purple-800 w-12 h-12 rounded-full flex items-center justify-center mr-4">
 <i class="fab fa-whatsapp text-xl"></i>
 </div>
 <div>
 <h4 class="font-bold">واتساب</h4>
 <a href="https://whatsapp.com/channel/0029VbAJY2l1NCrRPWiDIA2O" target="_blank" class="text-purple-400 hover:underline">قروب الخصومات</a>
 </div>
 </div>
<div class="flex items-center">
 <div class="bg-purple-800 w-12 h-12 rounded-full flex items-center justify-center mr-4">
 <i class="fab fa-discord text-xl"></i>
 </div>
 <div>
 <h4 class="font-bold">ديسكورد</h4>
 <a href="#" class="text-purple-400 hover:underline">XPR Official</a>
 </div>
 </div>
<div class="flex items-center">
 <div class="bg-purple-800 w-12 h-12 rounded-full flex items-center justify-center mr-4">
 <i class="fas fa-envelope text-xl"></i>
 </div>
 <div>
 <h4 class="font-bold">البريد الإلكتروني</h4>
 <a href="mailto:info@xpr.com" class="text-purple-400 hover:underline">info@xpr.com</a>
 </div>
 </div>
 </div>
 </div>
<div class="md:w-1/2">
 <div class="bg-secondary p-6 rounded-lg">
 <h3 class="text-xl font-bold mb-4 gradient-text">أرسل لنا رسالة</h3>
 <form>
 <div class="mb-4">
 <label for="name" class="block mb-2">الاسم</label>
 <input type="text" id="name" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:border-purple-500">
 </div>
<div class="mb-4">
 <label for="email" class="block mb-2">البريد الإلكتروني</label>
 <input type="email" id="email" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:border-purple-500">
 </div>
<div class="mb-4">
 <label for="message" class="block mb-2">الرسالة</label>
 <textarea id="message" rows="4" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:border-purple-500"></textarea>
 </div>
<button type="submit" class="w-full bg-purple-700 hover:bg-purple-600 py-3 rounded-lg font-medium">إرسال</button>
 </form>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-gray-900 py-8">
 <div class="container mx-auto px-4">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="mb-4 md:mb-0">
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full overflow-hidden border-2 border-purple-600 mr-3">
 <img src="https://via.placeholder.com/150" alt="زين الشخصية" class="w-full h-full object-cover">
 </div>
 <div>
 <h2 class="text-xl font-bold gradient-text">XPR</h2>
 <p class="text-sm text-purple-300">أنا نديمي</p>
 </div>
 </div>
 </div>
<div class="flex space-x-6 mb-4 md:mb-0">
 <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-twitter text-xl"></i></a>
 <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-instagram text-xl"></i></a>
 <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-discord text-xl"></i></a>
 <a href="https://whatsapp.com/channel/0029VbAJY2l1NCrRPWiDIA2O" target="_blank" class="text-gray-400 hover:text-purple-400"><i class="fab fa-whatsapp text-xl"></i></a>
 </div>
<div class="text-gray-400 text-sm">
 &copy; 2023 XPR. جميع الحقوق محفوظة.
 </div>
 </div>
 </div>
 </footer>
<!-- Shopping Cart Modal -->
 <div id="cartModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex justify-end hidden">
 <div class="bg-dark w-full max-w-md h-full overflow-y-auto">
 <div class="p-4 border-b border-gray-700 flex justify-between items-center">
 <h3 class="text-xl font-bold">سلة التسوق</h3>
 <button id="closeCart" class="text-gray-400 hover:text-white">
 <i class="fas fa-times text-xl"></i>
 </button>
 </div>
<div class="p-4">
 <div class="cart-items">
 <!-- Cart items will be added here dynamically -->
 <p class="text-gray-400 text-center py-8">السلة فارغة</p>
 </div>
<div class="border-t border-gray-700 pt-4 mt-4">
 <div class="flex justify-between mb-2">
 <span>المجموع:</span>
 <span class="font-bold">0 SAR</span>
 </div>
<div class="mb-4">
 <label class="block mb-2">طريقة الدفع</label>
 <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:border-purple-500">
 <option value="sar">الريال السعودي</option>
 <option value="robux">روبوكس</option>
 <option value="apple">Apple Pay</option>
 <option value="stc">STC Pay</option>
 </select>
 </div>
<button class="w-full bg-purple-700 hover:bg-purple-600 py-3 rounded-lg font-medium">إتمام الشراء</button>
 </div>
 </div>
 </div>
 </div>
<!-- Cart Button -->
 <button id="cartBtn" class="fixed bottom-6 left-6 bg-purple-700 hover:bg-purple-600 w-14 h-14 rounded-full flex items-center justify-center shadow-lg z-40">
 <i class="fas fa-shopping-cart text-xl"></i>
 <span id="cartCount" class="absolute -top-1 -right-1 bg-red-600 text-white text-xs w-5 h-5 flex items-center justify-center rounded-full">0</span>
 </button>
<script>
 // Admin Panel Toggle
 const adminBtn = document.getElementById('adminBtn');
 const adminPanel = document.getElementById('adminPanel');
 const closeAdminPanel = document.getElementById('closeAdminPanel');
// For demo purposes, show admin button (in real app, this would be based on auth)
 adminBtn.classList.remove('hidden');
adminBtn.addEventListener('click', () => {
 adminPanel.classList.remove('hidden');
 });
closeAdminPanel.addEventListener('click', () => {
 adminPanel.classList.add('hidden');
 });
// Category Filter
 const categoryBtns = document.querySelectorAll('.category-btn');
 const productCards = document.querySelectorAll('.product-card');
categoryBtns.forEach(btn => {
 btn.addEventListener('click', () => {
 // Remove active class from all buttons
 categoryBtns.forEach(b => b.classList.remove('bg-purple-800', 'hover:bg-purple-700'));
 categoryBtns.forEach(b => b.classList.add('bg-gray-700', 'hover:bg-gray-600'));
// Add active class to clicked button
 btn.classList.remove('bg-gray-700', 'hover:bg-gray-600');
 btn.classList.add('bg-purple-800', 'hover:bg-purple-700');
const category = btn.dataset.category;
// Show/hide products based on category
 productCards.forEach(card => {
 if (category === 'all' || card.dataset.category === category) {
 card.style.display = 'block';
 } else {
 card.style.display = 'none';
 }
 });
 });
 });
// Shopping Cart
 const cartBtn = document.getElementById('cartBtn');
 const cartModal = document.getElementById('cartModal');
 const closeCart = document.getElementById('closeCart');
 const cartItemsContainer = document.querySelector('.cart-items');
 const cartCount = document.getElementById('cartCount');
let cart = [];
cartBtn.addEventListener('click', () => {
 cartModal.classList.remove('hidden');
 updateCartDisplay();
 });
closeCart.addEventListener('click', () => {
 cartModal.classList.add('hidden');
 });
// Add to cart buttons
 const addToCartBtns = document.querySelectorAll('.product-card button:not([disabled])');
addToCartBtns.forEach(btn => {
 btn.addEventListener('click', () => {
 const productCard = btn.closest('.product-card');
 const productName = productCard.querySelector('h3').textContent;
 const productPrice = productCard.querySelector('span.text-purple-400').textContent;
 const productImage = productCard.querySelector('img').src;
// Check if product already in cart
 const existingItem = cart.find(item => item.name === productName);
if (existingItem) {
 existingItem.quantity += 1;
 } else {
 cart.push({
 name: productName,
 price: productPrice,
 image: productImage,
 quantity: 1
 });
 }
// Update cart count
 cartCount.textContent = cart.reduce((total, item) => total + item.quantity, 0);
// Show success message
 alert(`تم إضافة ${productName} إلى السلة`);
 });
 });
function updateCartDisplay() {
 if (cart.length === 0) {
 cartItemsContainer.innerHTML = '<p class="text-gray-400 text-center py-8">السلة فارغة</p>';
 return;
 }
let html = '';
 let total = 0;
cart.forEach(item => {
 const priceNumber = parseFloat(item.price.replace(' SAR', ''));
 total += priceNumber * item.quantity;
html += `
 <div class="flex items-center mb-4 pb-4 border-b border-gray-700">
 <div class="w-16 h-16 rounded-lg overflow-hidden mr-4">
 <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover">
 </div>
 <div class="flex-1">
 <h4 class="font-medium">${item.name}</h4>
 <p class="text-purple-400">${item.price}</p>
 </div>
 <div class="flex items-center">
 <button class="quantity-btn px-2 py-1 bg-gray-700 rounded" data-name="${item.name}">-</button>
 <span class="mx-2">${item.quantity}</span>
 <button class="quantity-btn px-2 py-1 bg-gray-700 rounded" data-name="${item.name}">+</button>
 </div>
 </div>
 `;
 });
cartItemsContainer.innerHTML = html;
 document.querySelector('.cart-items + div .font-bold').textContent = `${total.toFixed(2)} SAR`;
// Add event listeners to quantity buttons
 document.querySelectorAll('.quantity-btn').forEach(btn => {
 btn.addEventListener('click', (e) => {
 const productName = e.target.dataset.name;
 const item = cart.find(i => i.name === productName);
if (e.target.textContent === '+') {
 item.quantity += 1;
 } else {
 item.quantity -= 1;
 if (item.quantity <= 0) {
 cart = cart.filter(i => i.name !== productName);
 }
 }
// Update cart count
 cartCount.textContent = cart.reduce((total, item) => total + item.quantity, 0);
updateCartDisplay();
 });
 });
 }
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SCSBIO/rpx" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>