| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Cash UP | المحفظة الذكية</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#EF4444', |
| 'primary-dark': '#DC2626', |
| 'primary-light': '#FECACA', |
| accent: '#F59E0B', |
| 'accent-light': '#FCD34D', |
| success: '#10B981', |
| background: '#F8FAFC', |
| 'card-bg': '#FFFFFF', |
| 'text-primary': '#1E293B', |
| 'text-secondary': '#64748B', |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap'); |
| |
| * { |
| font-family: 'Tajawal', sans-serif; |
| } |
| |
| body { |
| background: linear-gradient(135deg, #FEF2F2 0%, #F8FAFC 100%); |
| min-height: 100vh; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); |
| } |
| |
| .floating-card { |
| animation: float 6s ease-in-out infinite; |
| } |
| |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| .pulse-glow { |
| animation: pulse-glow 2s infinite; |
| } |
| |
| @keyframes pulse-glow { |
| 0% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.4); } |
| 50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.8); } |
| 100% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.4); } |
| } |
| |
| .coin-spin { |
| animation: coin-spin 3s linear infinite; |
| } |
| |
| @keyframes coin-spin { |
| 0% { transform: rotateY(0deg); } |
| 100% { transform: rotateY(360deg); } |
| } |
| |
| .game-character { |
| transition: all 0.3s ease; |
| } |
| |
| .jump { |
| animation: jump 0.5s ease; |
| } |
| |
| @keyframes jump { |
| 0% { transform: translateY(0); } |
| 50% { transform: translateY(-100px); } |
| 100% { transform: translateY(0); } |
| } |
| |
| .slide-in { |
| animation: slideIn 0.5s ease-out; |
| } |
| |
| @keyframes slideIn { |
| from { transform: translateX(100%); opacity: 0; } |
| to { transform: translateX(0); opacity: 1; } |
| } |
| |
| .nav-item.active { |
| background: rgba(239, 68, 68, 0.1); |
| color: #EF4444; |
| border-right: 3px solid #EF4444; |
| } |
| |
| .progress-bar { |
| background: linear-gradient(90deg, #EF4444 0%, #F59E0B 100%); |
| height: 8px; |
| border-radius: 4px; |
| transition: width 0.5s ease; |
| } |
| </style> |
| </head> |
| <body class="text-gray-800"> |
| |
| <header class="gradient-bg text-white rounded-b-3xl shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2 space-x-reverse"> |
| <div class="bg-white p-2 rounded-full"> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M12 2L12 22M12 2C8 2 6 6 6 9C6 12 8 16 12 16C16 16 18 12 18 9C18 6 16 2 12 2Z"></path> |
| </svg> |
| </div> |
| <h1 class="text-2xl font-bold">Cash UP</h1> |
| </div> |
| <div class="flex space-x-4 space-x-reverse"> |
| <button class="bg-white bg-opacity-20 p-2 rounded-full"> |
| <i data-feather="bell"></i> |
| </button> |
| <button class="bg-white bg-opacity-20 p-2 rounded-full"> |
| <i data-feather="user"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="mt-6 bg-white bg-opacity-20 backdrop-blur-lg rounded-2xl p-6 floating-card"> |
| <div class="flex justify-between items-center mb-4"> |
| <span class="text-white text-opacity-80">رصيد النقاط</span> |
| <div class="bg-white bg-opacity-30 rounded-full px-3 py-1 text-sm"> |
| <span class="coin-spin">🪙</span> نقاط |
| </div> |
| </div> |
| <div class="flex justify-between items-end"> |
| <div> |
| <h2 class="text-4xl font-bold" id="balance">1,250</h2> |
| <p class="text-white text-opacity-80 mt-1" id="usd-balance">≈ 12.50 USDT</p> |
| </div> |
| <button class="bg-white text-red-600 px-4 py-2 rounded-full font-bold flex items-center space-x-2 space-x-reverse"> |
| <span>+ إضافة رصيد</span> |
| <i data-feather="plus"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 -mt-8 relative z-10"> |
| |
| <div class="bg-white rounded-2xl shadow-lg p-4 mb-6 slide-in"> |
| <div class="grid grid-cols-4 gap-4"> |
| <button class="flex flex-col items-center p-3 rounded-xl hover:bg-red-50 transition-colors"> |
| <div class="bg-red-100 text-red-600 p-3 rounded-full mb-2"> |
| <i data-feather="download"></i> |
| </div> |
| <span class="text-sm font-medium">إيداع</span> |
| </button> |
| <button class="flex flex-col items-center p-3 rounded-xl hover:bg-red-50 transition-colors"> |
| <div class="bg-red-100 text-red-600 p-3 rounded-full mb-2"> |
| <i data-feather="upload"></i> |
| </div> |
| <span class="text-sm font-medium">سحب</span> |
| </button> |
| <button class="flex flex-col items-center p-3 rounded-xl hover:bg-red-50 transition-colors"> |
| <div class="bg-red-100 text-red-600 p-3 rounded-full mb-2"> |
| <i data-feather="share-2"></i> |
| </div> |
| <span class="text-sm font-medium">تحويل</span> |
| </button> |
| <button class="flex flex-col items-center p-3 rounded-xl hover:bg-red-50 transition-colors"> |
| <div class="bg-red-100 text-red-600 p-3 rounded-full mb-2"> |
| <i data-feather="gift"></i> |
| </div> |
| <span class="text-sm font-medium">هدايا</span> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-2xl shadow-lg p-6 mb-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-bold text-lg">🎮 لعبة كسب النقاط</h3> |
| <span class="text-red-600 font-bold" id="game-score">0 نقطة</span> |
| </div> |
| |
| <div class="bg-gradient-to-r from-red-100 to-orange-100 rounded-xl p-4 mb-4"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h4 class="font-bold">القفز فوق العقبات</h4> |
| <p class="text-sm text-gray-600">اقفز لتجنب العقبات واجمع النقاط!</p> |
| </div> |
| <button class="bg-red-600 text-white px-4 py-2 rounded-full font-bold" onclick="startGame()"> |
| ابدأ اللعب |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="game-area" class="hidden"> |
| <div class="relative h-40 bg-gradient-to-b from-blue-100 to-green-100 rounded-lg overflow-hidden mb-4"> |
| <div id="character" class="absolute bottom-0 left-10 game-character text-3xl">🦊</div> |
| <div id="obstacle" class="absolute bottom-0 right-0 text-3xl hidden">🪨</div> |
| <div id="coin" class="absolute top-10 right-0 text-2xl hidden">🪙</div> |
| </div> |
| <div class="text-center"> |
| <p class="text-sm text-gray-600">انقر على الشاشة للقفز وتجنب العقبات!</p> |
| </div> |
| </div> |
| |
| <div class="flex justify-between items-center text-sm text-gray-600"> |
| <span>أعلى نقاط: 150</span> |
| <span>الوقت المتبقي: <span id="time-left">60</span> ثانية</span> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-2xl shadow-lg p-6 mb-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-bold text-lg">📊 تقدمك اليومي</h3> |
| <span class="text-red-600 font-bold">75%</span> |
| </div> |
| |
| <div class="mb-2"> |
| <div class="flex justify-between text-sm mb-1"> |
| <span>اكتمال المهام</span> |
| <span>3/4</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="progress-bar rounded-full h-2" style="width: 75%"></div> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-2 gap-4 mt-4"> |
| <div class="bg-red-50 p-3 rounded-lg flex items-center space-x-3 space-x-reverse"> |
| <div class="bg-red-100 text-red-600 p-2 rounded-full"> |
| <i data-feather="check-circle"></i> |
| </div> |
| <div> |
| <p class="font-medium text-sm">تسجيل الدخول</p> |
| <p class="text-xs text-gray-600">+10 نقاط</p> |
| </div> |
| </div> |
| <div class="bg-red-50 p-3 rounded-lg flex items-center space-x-3 space-x-reverse"> |
| <div class="bg-red-100 text-red-600 p-2 rounded-full"> |
| <i data-feather="check-circle"></i> |
| </div> |
| <div> |
| <p class="font-medium text-sm">إحالة صديق</p> |
| <p class="text-xs text-gray-600">+50 نقطة</p> |
| </div> |
| </div> |
| <div class="bg-gray-100 p-3 rounded-lg flex items-center space-x-3 space-x-reverse"> |
| <div class="bg-gray-200 text-gray-600 p-2 rounded-full"> |
| <i data-feather="circle"></i> |
| </div> |
| <div> |
| <p class="font-medium text-sm">اللعب 10 دقائق</p> |
| <p class="text-xs text-gray-600">+30 نقطة</p> |
| </div> |
| </div> |
| <div class="bg-gray-100 p-3 rounded-lg flex items-center space-x-3 space-x-reverse"> |
| <div class="bg-gray-200 text-gray-600 p-2 rounded-full"> |
| <i data-feather="circle"></i> |
| </div> |
| <div> |
| <p class="font-medium text-sm">مهمة إضافية</p> |
| <p class="text-xs text-gray-600">+25 نقطة</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-2xl shadow-lg p-6 mb-20"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-bold text-lg">🎁 العروض الخاصة</h3> |
| <span class="text-red-600 text-sm">عرض الكل</span> |
| </div> |
| |
| <div class="space-y-4"> |
| <div class="bg-gradient-to-r from-red-500 to-orange-500 text-white rounded-xl p-4 pulse-glow"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h4 class="font-bold">هدية الترحيب! 🎉</h4> |
| <p class="text-sm opacity-90">احصل على 100 نقطة مجانًا عند تسجيلك الأول</p> |
| </div> |
| <span class="bg-white text-red-600 px-3 py-1 rounded-full text-sm font-bold">+100</span> |
| </div> |
| <button class="w-full bg-white text-red-600 py-2 rounded-lg font-bold mt-3"> |
| احصل عليها الآن |
| </button> |
| </div> |
| |
| <div class="border border-red-200 rounded-xl p-4"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h4 class="font-bold">دعوة الأصدقاء</h4> |
| <p class="text-sm text-gray-600">احصل على 50 نقطة لكل صديق تدعوه</p> |
| </div> |
| <span class="bg-red-100 text-red-600 px-3 py-1 rounded-full text-sm font-bold">+50</span> |
| </div> |
| <button class="w-full border border-red-600 text-red-600 py-2 rounded-lg font-bold mt-3"> |
| مشاركة الرابط |
| </button> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-3 px-6"> |
| <div class="grid grid-cols-4 gap-4"> |
| <a href="#" class="nav-item active flex flex-col items-center space-y-1"> |
| <i data-feather="home" class="text-red-600"></i> |
| <span class="text-xs text-red-600">الرئيسية</span> |
| </a> |
| <a href="#" class="nav-item flex flex-col items-center space-y-1"> |
| <i data-feather="trending-up"></i> |
| <span class="text-xs text-gray-600">كسب النقاط</span> |
| </a> |
| <a href="#" class="nav-item flex flex-col items-center space-y-1"> |
| <i data-feather="credit-card"></i> |
| <span class="text-xs text-gray-600">المحفظة</span> |
| </a> |
| <a href="#" class="nav-item flex flex-col items-center space-y-1"> |
| <i data-feather="user"></i> |
| <span class="text-xs text-gray-600">حسابي</span> |
| </a> |
| </div> |
| </nav> |
|
|
| |
| <div id="welcome-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"> |
| <div class="bg-white rounded-2xl p-6 max-w-md w-full text-center slide-in"> |
| <div class="bg-red-100 text-red-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="gift" class="w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">أهلاً وسهلاً! 🎉</h3> |
| <p class="text-gray-600 mb-6">احصل على 100 نقطة هدية ترحيبية لتبدأ رحلتك معنا</p> |
| <button onclick="closeWelcomeModal()" class="w-full bg-red-600 text-white py-3 rounded-xl font-bold"> |
| احصل على هديتك الآن |
| </button> |
| </div> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| let gameScore = 0; |
| let gameActive = false; |
| let gameTimer; |
| let timeLeft = 60; |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| setTimeout(() => { |
| document.getElementById('welcome-modal').classList.remove('hidden'); |
| }, 1000); |
| }); |
| |
| function closeWelcomeModal() { |
| document.getElementById('welcome-modal').classList.add('hidden'); |
| |
| addPoints(100); |
| } |
| |
| function addPoints(points) { |
| const balanceElement = document.getElementById('balance'); |
| const currentBalance = parseInt(balanceElement.textContent.replace(/,/g, '')); |
| const newBalance = currentBalance + points; |
| balanceElement.textContent = newBalance.toLocaleString(); |
| |
| |
| const usdBalance = (newBalance / 100).toFixed(2); |
| document.getElementById('usd-balance').textContent = `≈ ${usdBalance} USDT`; |
| |
| |
| showPointsAnimation(points); |
| } |
| |
| function showPointsAnimation(points) { |
| const animation = document.createElement('div'); |
| animation.className = 'fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-red-600 text-white px-6 py-3 rounded-full font-bold z-50'; |
| animation.textContent = `+${points} نقطة!`; |
| animation.style.animation = 'slideIn 0.5s ease-out'; |
| document.body.appendChild(animation); |
| |
| setTimeout(() => { |
| animation.remove(); |
| }, 2000); |
| } |
| |
| function startGame() { |
| if (gameActive) return; |
| |
| gameActive = true; |
| gameScore = 0; |
| timeLeft = 60; |
| |
| document.getElementById('game-area').classList.remove('hidden'); |
| document.getElementById('game-score').textContent = '0 نقطة'; |
| document.getElementById('time-left').textContent = timeLeft; |
| |
| |
| gameTimer = setInterval(() => { |
| timeLeft--; |
| document.getElementById('time-left').textContent = timeLeft; |
| |
| if (timeLeft <= 0) { |
| endGame(); |
| } |
| }, 1000); |
| |
| |
| startGeneratingObjects(); |
| |
| |
| document.getElementById('game-area').addEventListener('click', jump); |
| } |
| |
| function jump() { |
| if (!gameActive) return; |
| |
| const character = document.getElementById('character'); |
| character.classList.add('jump'); |
| |
| setTimeout(() => { |
| character.classList.remove('jump'); |
| }, 500); |
| |
| |
| checkCoinCollection(); |
| } |
| |
| function startGeneratingObjects() { |
| |
| setInterval(() => { |
| if (!gameActive) return; |
| |
| const obstacle = document.getElementById('obstacle'); |
| obstacle.classList.remove('hidden'); |
| obstacle.style.right = '0'; |
| obstacle.style.bottom = '0'; |
| |
| |
| setTimeout(() => { |
| obstacle.style.right = '-100px'; |
| }, 10); |
| |
| setTimeout(() => { |
| obstacle.classList.add('hidden'); |
| }, 2000); |
| }, 1500); |
| |
| |
| setInterval(() => { |
| if (!gameActive) return; |
| |
| const coin = document.getElementById('coin'); |
| coin.classList.remove('hidden'); |
| coin.style.right = '0'; |
| coin.style.top = `${Math.random() * 80 + 10}px`; |
| |
| |
| setTimeout(() => { |
| coin.style.right = '-100px'; |
| }, 10); |
| |
| setTimeout(() => { |
| coin.classList.add('hidden'); |
| }, 2000); |
| }, 2000); |
| } |
| |
| function checkCoinCollection() { |
| |
| |
| if (Math.random() > 0.7) { |
| gameScore += 10; |
| document.getElementById('game-score').textContent = `${gameScore} نقطة`; |
| |
| |
| showPointsAnimation(10); |
| } |
| } |
| |
| function endGame() { |
| gameActive = false; |
| clearInterval(gameTimer); |
| |
| document.getElementById('game-area').classList.add('hidden'); |
| |
| |
| addPoints(gameScore); |
| |
| |
| setTimeout(() => { |
| alert(`🎮 انتهت اللعبة! لقد جمعت ${gameScore} نقطة!`); |
| }, 500); |
| } |
| |
| |
| document.querySelectorAll('.nav-item').forEach(item => { |
| item.addEventListener('click', function(e) { |
| e.preventDefault(); |
| document.querySelectorAll('.nav-item').forEach(nav => { |
| nav.classList.remove('active'); |
| nav.querySelector('i').classList.remove('text-red-600'); |
| nav.querySelector('span').classList.remove('text-red-600'); |
| nav.querySelector('span').classList.add('text-gray-600'); |
| }); |
| |
| this.classList.add('active'); |
| this.querySelector('i').classList.add('text-red-600'); |
| this.querySelector('span').classList.add('text-red-600'); |
| this.querySelector('span').classList.remove('text-gray-600'); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
|
|
| This responsive wallet application features: |
|
|
| 1. **Modern Red Color Scheme** - Using Tailwind's red palette (red-500, red-600, etc.) |
| 2. **Arabic RTL Support** - Full right-to-left layout with Tajawal font |
| 3. **Interactive Elements**: |
| - Animated balance card with floating effect |
| - Points system with real-time updates |
| - Mini jumping game to earn points |
| - Progress tracking with visual indicators |
| - Welcome bonus modal |
|
|
| 4. **Gamification Features**: |
| - Character jumping game with obstacles and coins |
| - Daily progress tracker |
| - Special offers section |
| - Points animation when earning rewards |
|
|
| 5. **Responsive Design** - Works perfectly on mobile devices with bottom navigation |
|
|
| 6. **Visual Polish**: |
| - Smooth animations and transitions |
| - Gradient backgrounds |
| - Consistent red theme throughout |
| - Professional iconography using Feather Icons |
|
|
| The application is fully functional with JavaScript interactions for the game, points system, and navigation. |
