اريد تطبيق آسمه توتر Tوتصميم شفاف ولونة. مثل لون ايقونة الانستكرام فكرتة كل ٢٤ساعة ينطي ٥٠ نقطة ومحفضة للنقاط ومحفضة. تحول النقاط الى دولار كل 20الف نقطة درلار والدولار بلبوينتات يحسب حتلو نقطة وحدة يحسبها واريد لكل مستخدم جديد كود واريد نضام تحويل النقاط عن طريق كود المستخدم وإنشاء عجلة الحض 1و5و9و١٠٥و0عجلة الحض تلعب كل ٢٤ساعة - Initial Deployment
697e8c9 verified | <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tوتصميم - تطبيق النقاط</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| min-height: 100vh; | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.2); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); | |
| } | |
| .wheel-container { | |
| position: relative; | |
| width: 300px; | |
| height: 300px; | |
| margin: 0 auto; | |
| } | |
| .wheel { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| position: relative; | |
| overflow: hidden; | |
| transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99); | |
| transform: rotate(0deg); | |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .wheel-section { | |
| position: absolute; | |
| width: 50%; | |
| height: 50%; | |
| transform-origin: 100% 100%; | |
| left: 0; | |
| top: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| color: white; | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); | |
| } | |
| .wheel-pointer { | |
| position: absolute; | |
| top: -20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 0; | |
| height: 0; | |
| border-left: 20px solid transparent; | |
| border-right: 20px solid transparent; | |
| border-top: 40px solid #e1306c; | |
| z-index: 10; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .btn-instagram { | |
| background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); | |
| color: white; | |
| border: none; | |
| } | |
| .btn-instagram:hover { | |
| background: linear-gradient(45deg, #fd1d1d, #e1306c, #c13584, #833ab4, #5851db, #405de6); | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-8"> | |
| <div class="flex items-center"> | |
| <i class="fab fa-instagram text-4xl gradient-text mr-3"></i> | |
| <h1 class="text-3xl font-bold gradient-text">Tوتصميم</h1> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="glass-card px-4 py-2 mr-4"> | |
| <span class="font-bold">نقاطك:</span> | |
| <span id="userPoints" class="font-bold text-xl">0</span> | |
| </div> | |
| <div class="glass-card px-4 py-2"> | |
| <span class="font-bold">رصيدك:</span> | |
| <span id="userBalance" class="font-bold text-xl">0</span> $ | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Daily Points Section --> | |
| <div class="glass-card p-6 lg:col-span-2"> | |
| <h2 class="text-2xl font-bold mb-4 gradient-text">النقاط اليومية</h2> | |
| <p class="mb-4">احصل على 50 نقطة كل 24 ساعة بمجرد الضغط على الزر أدناه:</p> | |
| <div class="flex flex-col items-center"> | |
| <button id="dailyPointsBtn" class="btn-instagram px-6 py-3 rounded-full font-bold text-lg mb-4 transition-all hover:scale-105"> | |
| احصل على نقاطك اليومية | |
| </button> | |
| <div id="countdown" class="glass-card px-4 py-2 text-sm"> | |
| يمكنك المطالبة بالنقاط بعد: <span id="timer">24:00:00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User Info Section --> | |
| <div class="glass-card p-6"> | |
| <h2 class="text-2xl font-bold mb-4 gradient-text">معلومات المستخدم</h2> | |
| <div class="mb-4"> | |
| <p class="font-bold">كود المستخدم الخاص بك:</p> | |
| <div class="glass-card px-4 py-2 mt-2 flex justify-between items-center"> | |
| <span id="userCode" class="font-mono">XXXXXX</span> | |
| <button id="copyCodeBtn" class="text-gray-600 hover:text-gray-900"> | |
| <i class="far fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="font-bold mb-2">تحويل النقاط:</p> | |
| <div class="flex"> | |
| <input type="text" id="receiverCode" placeholder="كود المستلم" class="glass-card px-4 py-2 w-full rounded-r-none border-r-0"> | |
| <input type="number" id="transferAmount" placeholder="المبلغ" class="glass-card px-4 py-2 w-24 text-center border-l-0 border-r-0"> | |
| <button id="transferBtn" class="btn-instagram px-4 py-2 rounded-l-none"> | |
| إرسال | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="font-bold mb-2">تحويل النقاط إلى دولار:</p> | |
| <p class="text-sm mb-2">كل 20,000 نقطة = 1 دولار</p> | |
| <div class="flex"> | |
| <input type="number" id="convertAmount" placeholder="عدد النقاط" class="glass-card px-4 py-2 w-full rounded-r-none border-r-0"> | |
| <button id="convertBtn" class="btn-instagram px-4 py-2 rounded-l-none"> | |
| تحويل | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Wheel Section --> | |
| <div class="glass-card p-6 lg:col-span-3"> | |
| <h2 class="text-2xl font-bold mb-4 gradient-text text-center">عجلة الحظ</h2> | |
| <p class="text-center mb-6">يمكنك لعب عجلة الحظ مرة كل 24 ساعة للفوز بجوائز رائعة!</p> | |
| <div class="wheel-container"> | |
| <div class="wheel-pointer"></div> | |
| <div class="wheel" id="wheel"> | |
| <!-- Wheel sections will be added by JavaScript --> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button id="spinWheelBtn" class="btn-instagram px-8 py-3 rounded-full font-bold text-lg mb-4 transition-all hover:scale-105"> | |
| تدوير العجلة | |
| </button> | |
| <div id="wheelCountdown" class="glass-card px-4 py-2 text-sm inline-block"> | |
| يمكنك اللعب مرة أخرى بعد: <span id="wheelTimer">24:00:00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Transactions History --> | |
| <div class="glass-card p-6 lg:col-span-3"> | |
| <h2 class="text-2xl font-bold mb-4 gradient-text">سجل المعاملات</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b border-gray-200"> | |
| <th class="py-2 text-right">التاريخ</th> | |
| <th class="py-2 text-right">النوع</th> | |
| <th class="py-2 text-right">المبلغ</th> | |
| <th class="py-2 text-right">الحالة</th> | |
| </tr> | |
| </thead> | |
| <tbody id="transactionsList"> | |
| <!-- Transactions will be added by JavaScript --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // Initialize user data | |
| let user = { | |
| points: localStorage.getItem('userPoints') ? parseInt(localStorage.getItem('userPoints')) : 0, | |
| balance: localStorage.getItem('userBalance') ? parseFloat(localStorage.getItem('userBalance')) : 0, | |
| lastDailyPoints: localStorage.getItem('lastDailyPoints') ? new Date(localStorage.getItem('lastDailyPoints')) : null, | |
| lastSpin: localStorage.getItem('lastSpin') ? new Date(localStorage.getItem('lastSpin')) : null, | |
| userCode: localStorage.getItem('userCode') || generateUserCode(), | |
| transactions: localStorage.getItem('transactions') ? JSON.parse(localStorage.getItem('transactions')) : [] | |
| }; | |
| // DOM Elements | |
| const userPointsEl = document.getElementById('userPoints'); | |
| const userBalanceEl = document.getElementById('userBalance'); | |
| const userCodeEl = document.getElementById('userCode'); | |
| const dailyPointsBtn = document.getElementById('dailyPointsBtn'); | |
| const countdownEl = document.getElementById('countdown'); | |
| const timerEl = document.getElementById('timer'); | |
| const receiverCodeEl = document.getElementById('receiverCode'); | |
| const transferAmountEl = document.getElementById('transferAmount'); | |
| const transferBtn = document.getElementById('transferBtn'); | |
| const convertAmountEl = document.getElementById('convertAmount'); | |
| const convertBtn = document.getElementById('convertBtn'); | |
| const copyCodeBtn = document.getElementById('copyCodeBtn'); | |
| const spinWheelBtn = document.getElementById('spinWheelBtn'); | |
| const wheelCountdownEl = document.getElementById('wheelCountdown'); | |
| const wheelTimerEl = document.getElementById('wheelTimer'); | |
| const wheelEl = document.getElementById('wheel'); | |
| const transactionsListEl = document.getElementById('transactionsList'); | |
| // Wheel configuration | |
| const wheelSections = [ | |
| { value: 0, text: "0", color: "#FF5252" }, | |
| { value: 1, text: "1", color: "#FFD740" }, | |
| { value: 5, text: "5", color: "#69F0AE" }, | |
| { value: 9, text: "9", color: "#40C4FF" }, | |
| { value: 105, text: "105", color: "#E040FB" } | |
| ]; | |
| // Initialize the app | |
| function initApp() { | |
| updateUI(); | |
| createWheel(); | |
| updateCountdowns(); | |
| renderTransactions(); | |
| // Set up countdown intervals | |
| setInterval(updateCountdowns, 1000); | |
| } | |
| // Update UI with user data | |
| function updateUI() { | |
| userPointsEl.textContent = user.points.toLocaleString(); | |
| userBalanceEl.textContent = user.balance.toFixed(2); | |
| userCodeEl.textContent = user.userCode; | |
| // Save to localStorage | |
| localStorage.setItem('userPoints', user.points); | |
| localStorage.setItem('userBalance', user.balance); | |
| localStorage.setItem('userCode', user.userCode); | |
| localStorage.setItem('transactions', JSON.stringify(user.transactions)); | |
| } | |
| // Generate random user code | |
| function generateUserCode() { | |
| const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; | |
| let result = ''; | |
| for (let i = 0; i < 6; i++) { | |
| result += chars.charAt(Math.floor(Math.random() * chars.length)); | |
| } | |
| return result; | |
| } | |
| // Create the wheel sections | |
| function createWheel() { | |
| wheelEl.innerHTML = ''; | |
| const sectionAngle = 360 / wheelSections.length; | |
| wheelSections.forEach((section, index) => { | |
| const sectionEl = document.createElement('div'); | |
| sectionEl.className = 'wheel-section'; | |
| sectionEl.style.backgroundColor = section.color; | |
| sectionEl.style.transform = `rotate(${index * sectionAngle}deg) skewY(${90 - sectionAngle}deg)`; | |
| sectionEl.innerHTML = `<div style="transform: skewY(${sectionAngle - 90}deg) rotate(${sectionAngle / 2}deg);">${section.text}</div>`; | |
| wheelEl.appendChild(sectionEl); | |
| }); | |
| } | |
| // Spin the wheel | |
| function spinWheel() { | |
| if (user.lastSpin && (new Date() - user.lastSpin) < 24 * 60 * 60 * 1000) { | |
| alert('يمكنك لعب العجلة مرة واحدة كل 24 ساعة فقط!'); | |
| return; | |
| } | |
| spinWheelBtn.disabled = true; | |
| // Randomly select a prize | |
| const randomIndex = Math.floor(Math.random() * wheelSections.length); | |
| const prize = wheelSections[randomIndex].value; | |
| // Calculate rotation (5 full rotations + prize angle) | |
| const sectionAngle = 360 / wheelSections.length; | |
| const targetAngle = 5 * 360 + (360 - (randomIndex * sectionAngle + sectionAngle / 2)); | |
| // Apply rotation | |
| wheelEl.style.transform = `rotate(${targetAngle}deg)`; | |
| // After animation completes | |
| setTimeout(() => { | |
| user.points += prize; | |
| user.lastSpin = new Date(); | |
| localStorage.setItem('lastSpin', user.lastSpin); | |
| addTransaction(new Date(), 'عجلة الحظ', prize, 'تمت بنجاح'); | |
| updateUI(); | |
| updateCountdowns(); | |
| alert(`مبروك! لقد ربحت ${prize} نقطة!`); | |
| }, 3000); | |
| } | |
| // Update countdown timers | |
| function updateCountdowns() { | |
| // Daily points countdown | |
| if (user.lastDailyPoints) { | |
| const now = new Date(); | |
| const lastClaim = new Date(user.lastDailyPoints); | |
| const nextClaim = new Date(lastClaim.getTime() + 24 * 60 * 60 * 1000); | |
| if (now < nextClaim) { | |
| const diff = nextClaim - now; | |
| const hours = Math.floor(diff / (1000 * 60 * 60)); | |
| const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((diff % (1000 * 60)) / 1000); | |
| timerEl.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; | |
| dailyPointsBtn.disabled = true; | |
| countdownEl.style.display = 'block'; | |
| } else { | |
| dailyPointsBtn.disabled = false; | |
| countdownEl.style.display = 'none'; | |
| } | |
| } else { | |
| dailyPointsBtn.disabled = false; | |
| countdownEl.style.display = 'none'; | |
| } | |
| // Wheel countdown | |
| if (user.lastSpin) { | |
| const now = new Date(); | |
| const lastSpin = new Date(user.lastSpin); | |
| const nextSpin = new Date(lastSpin.getTime() + 24 * 60 * 60 * 1000); | |
| if (now < nextSpin) { | |
| const diff = nextSpin - now; | |
| const hours = Math.floor(diff / (1000 * 60 * 60)); | |
| const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((diff % (1000 * 60)) / 1000); | |
| wheelTimerEl.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; | |
| spinWheelBtn.disabled = true; | |
| wheelCountdownEl.style.display = 'inline-block'; | |
| } else { | |
| spinWheelBtn.disabled = false; | |
| wheelCountdownEl.style.display = 'none'; | |
| } | |
| } else { | |
| spinWheelBtn.disabled = false; | |
| wheelCountdownEl.style.display = 'none'; | |
| } | |
| } | |
| // Add daily points | |
| function addDailyPoints() { | |
| if (user.lastDailyPoints && (new Date() - new Date(user.lastDailyPoints)) < 24 * 60 * 60 * 1000) { | |
| alert('يمكنك المطالبة بالنقاط مرة واحدة كل 24 ساعة فقط!'); | |
| return; | |
| } | |
| user.points += 50; | |
| user.lastDailyPoints = new Date(); | |
| localStorage.setItem('lastDailyPoints', user.lastDailyPoints); | |
| addTransaction(new Date(), 'نقاط يومية', 50, 'تمت بنجاح'); | |
| updateUI(); | |
| updateCountdowns(); | |
| alert('تمت إضافة 50 نقطة إلى رصيدك!'); | |
| } | |
| // Transfer points | |
| function transferPoints() { | |
| const receiverCode = receiverCodeEl.value.trim(); | |
| const amount = parseInt(transferAmountEl.value); | |
| if (!receiverCode || !amount) { | |
| alert('الرجاء إدخال كود المستلم والمبلغ'); | |
| return; | |
| } | |
| if (amount <= 0) { | |
| alert('الرجاء إدخال مبلغ صحيح'); | |
| return; | |
| } | |
| if (amount > user.points) { | |
| alert('لا تمتلك نقاط كافية لهذا التحويل'); | |
| return; | |
| } | |
| // In a real app, you would send this to a server | |
| // For this demo, we'll just simulate it | |
| user.points -= amount; | |
| addTransaction(new Date(), `تحويل إلى ${receiverCode}`, -amount, 'تمت بنجاح'); | |
| updateUI(); | |
| alert(`تم تحويل ${amount} نقطة إلى المستخدم ${receiverCode}`); | |
| // Clear inputs | |
| receiverCodeEl.value = ''; | |
| transferAmountEl.value = ''; | |
| } | |
| // Convert points to dollars | |
| function convertPoints() { | |
| const points = parseInt(convertAmountEl.value); | |
| if (!points || points <= 0) { | |
| alert('الرجاء إدخال عدد نقاط صحيح'); | |
| return; | |
| } | |
| if (points > user.points) { | |
| alert('لا تمتلك نقاط كافية لهذا التحويل'); | |
| return; | |
| } | |
| if (points < 20000) { | |
| alert('الحد الأدنى للتحويل هو 20,000 نقطة (1 دولار)'); | |
| return; | |
| } | |
| const dollars = points / 20000; | |
| user.points -= points; | |
| user.balance += dollars; | |
| addTransaction(new Date(), 'تحويل نقاط إلى دولار', -points, 'تمت بنجاح'); | |
| addTransaction(new Date(), 'رصيد دولار', dollars, 'تمت بنجاح'); | |
| updateUI(); | |
| alert(`تم تحويل ${points} نقطة إلى ${dollars.toFixed(2)} دولار`); | |
| // Clear input | |
| convertAmountEl.value = ''; | |
| } | |
| // Add transaction to history | |
| function addTransaction(date, type, amount, status) { | |
| user.transactions.unshift({ | |
| date: date.toLocaleString(), | |
| type, | |
| amount, | |
| status | |
| }); | |
| // Keep only last 50 transactions | |
| if (user.transactions.length > 50) { | |
| user.transactions.pop(); | |
| } | |
| renderTransactions(); | |
| } | |
| // Render transactions list | |
| function renderTransactions() { | |
| transactionsListEl.innerHTML = ''; | |
| user.transactions.forEach(transaction => { | |
| const row = document.createElement('tr'); | |
| row.className = 'border-b border-gray-200'; | |
| const amountClass = transaction.amount >= 0 ? 'text-green-500' : 'text-red-500'; | |
| const amountSign = transaction.amount >= 0 ? '+' : ''; | |
| row.innerHTML = ` | |
| <td class="py-2 px-4">${transaction.date}</td> | |
| <td class="py-2 px-4">${transaction.type}</td> | |
| <td class="py-2 px-4 ${amountClass}">${amountSign}${transaction.amount}</td> | |
| <td class="py-2 px-4">${transaction.status}</td> | |
| `; | |
| transactionsListEl.appendChild(row); | |
| }); | |
| } | |
| // Event Listeners | |
| dailyPointsBtn.addEventListener('click', addDailyPoints); | |
| transferBtn.addEventListener('click', transferPoints); | |
| convertBtn.addEventListener('click', convertPoints); | |
| spinWheelBtn.addEventListener('click', spinWheel); | |
| copyCodeBtn.addEventListener('click', () => { | |
| navigator.clipboard.writeText(user.userCode); | |
| alert('تم نسخ كود المستخدم إلى الحافظة!'); | |
| }); | |
| // Initialize the app | |
| document.addEventListener('DOMContentLoaded', initApp); | |
| </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=12wqhh/twtr" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |