Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>پروفایل کاربر - اپلیکیشن تلگرام</title> | |
| <script src="https://telegram.org/js/telegram-web-app.js"></script> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2'); | |
| @import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2'); | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300"> | |
| <div class="container mx-auto px-4 py-6 max-w-3xl"> | |
| <!-- Loading State --> | |
| <div id="loading" class="flex flex-col items-center justify-center py-20"> | |
| <div class="w-12 h-12 border-4 border-blue-200 border-t-blue-500 rounded-full animate-spin"></div> | |
| <p class="mt-4 text-gray-500 dark:text-gray-400">در حال بارگذاری پروفایل...</p> | |
| </div> | |
| <!-- Error State --> | |
| <div id="error" class="hidden bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-6 text-center"> | |
| <div class="text-red-500 dark:text-red-400 text-lg mb-4"> | |
| <i data-feather="alert-circle" class="w-10 h-10 mx-auto"></i> | |
| </div> | |
| <p class="text-red-600 dark:text-red-300 mb-6">خطا در بارگذاری اطلاعات پروفایل</p> | |
| <button id="retryButton" class="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-6 py-2 rounded-lg font-medium shadow-md transition-all duration-300 transform hover:-translate-y-0.5"> | |
| تلاش مجدد | |
| </button> | |
| </div> | |
| <!-- Content --> | |
| <div id="content" class="hidden"> | |
| <!-- Profile Card --> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden mb-6 transition-all duration-300 hover:shadow-lg"> | |
| <div class="bg-gradient-to-r from-blue-500 to-blue-600 h-2 w-full"></div> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-1"> | |
| <h1 id="userName" class="text-2xl font-bold text-gray-800 dark:text-white mb-2">در حال بارگذاری...</h1> | |
| <div dir="ltr" class="inline-block bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 text-sm px-3 py-1 rounded-full"> | |
| <span id="userUsername">@username</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6"> | |
| <div class="bg-white dark:bg-gray-700 p-4 rounded-lg border-r-4 border-blue-500 shadow-sm transition-all duration-300 hover:shadow-md"> | |
| <div id="walletBalance" class="text-3xl font-bold text-blue-500">0</div> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">موجودی کیف پول</p> | |
| </div> | |
| <div class="bg-white dark:bg-gray-700 p-4 rounded-lg border-r-4 border-green-500 shadow-sm transition-all duration-300 hover:shadow-md"> | |
| <div id="activeSubs" class="text-3xl font-bold text-green-500">0</div> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">اشتراکهای فعال</p> | |
| </div> | |
| <div class="bg-white dark:bg-gray-700 p-4 rounded-lg border-r-4 border-yellow-500 shadow-sm transition-all duration-300 hover:shadow-md"> | |
| <div id="totalOrders" class="text-3xl font-bold text-yellow-500">0</div> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">کل سفارشها</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="flex overflow-x-auto bg-white dark:bg-gray-800 rounded-lg mb-6 shadow-sm scrollbar-hide"> | |
| <button class="tab active px-6 py-3 text-sm font-medium text-blue-600 dark:text-blue-400 border-b-2 border-blue-500" onclick="switchTab('overview')">نمای کلی</button> | |
| <button class="tab px-6 py-3 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" onclick="switchTab('subscriptions')">اشتراکها</button> | |
| <button class="tab px-6 py-3 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" onclick="switchTab('payments')">پرداختها</button> | |
| <button class="tab px-6 py-3 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" onclick="switchTab('history')">سفارشها</button> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div id="overview" class="tab-content active"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4 flex items-center"> | |
| <span class="w-1 h-6 bg-blue-500 rounded-full ml-2"></span> | |
| اطلاعات کاربر | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center py-3 border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 px-2 rounded-lg transition-colors"> | |
| <span class="text-gray-500 dark:text-gray-400">شناسه کاربر:</span> | |
| <span id="infoUserId" class="font-medium text-gray-700 dark:text-gray-300">-</span> | |
| </div> | |
| <div class="flex justify-between items-center py-3 border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 px-2 rounded-lg transition-colors"> | |
| <span class="text-gray-500 dark:text-gray-400">شماره تلفن:</span> | |
| <span id="infoPhone" class="font-medium text-gray-700 dark:text-gray-300">-</span> | |
| </div> | |
| <div class="flex justify-between items-center py-3 border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 px-2 rounded-lg transition-colors"> | |
| <span class="text-gray-500 dark:text-gray-400">تاریخ عضویت:</span> | |
| <span id="infoJoinDate" class="font-medium text-gray-700 dark:text-gray-300">-</span> | |
| </div> | |
| <div class="flex justify-between items-center py-3 border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 px-2 rounded-lg transition-colors"> | |
| <span class="text-gray-500 dark:text-gray-400">درصد تخفیف:</span> | |
| <span id="infoDiscount" class="font-medium text-gray-700 dark:text-gray-300">-</span> | |
| </div> | |
| <div class="flex justify-between items-center py-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 px-2 rounded-lg transition-colors"> | |
| <span class="text-gray-500 dark:text-gray-400">اکانت تست:</span> | |
| <div id="infoTrial" class="hidden"> | |
| <span class="bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs px-3 py-1 rounded-full">یک تست رایگان</span> | |
| </div> | |
| <div id="noTrial" class="hidden"> | |
| <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 text-xs px-3 py-1 rounded-full">تست استفاده شده</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="subscriptions" class="tab-content hidden"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4 flex items-center"> | |
| <span class="w-1 h-6 bg-blue-500 rounded-full ml-2"></span> | |
| اشتراکهای فعال | |
| </h3> | |
| <div id="subscriptionsList" class="space-y-3"> | |
| <!-- Will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="payments" class="tab-content hidden"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4 flex items-center"> | |
| <span class="w-1 h-6 bg-blue-500 rounded-full ml-2"></span> | |
| تاریخچه پرداختها | |
| </h3> | |
| <div id="paymentsList" class="space-y-3"> | |
| <!-- Will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="history" class="tab-content hidden"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4 flex items-center"> | |
| <span class="w-1 h-6 bg-blue-500 rounded-full ml-2"></span> | |
| تاریخچه سفارشها | |
| </h3> | |
| <div id="ordersList" class="space-y-3"> | |
| <!-- Will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Order Details Modal --> | |
| <div id="orderModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-md mx-4 max-h-[90vh] overflow-y-auto"> | |
| <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700"> | |
| <h3 class="text-xl font-semibold text-gray-800 dark:text-white">جزئیات سفارش</h3> | |
| <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div id="orderModalContent" class="p-6"> | |
| <!-- Order details will be populated here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |