Hugging Face's logo

Spaces:
themeht
/
telegram-profile-elite
Running

App Files Community
telegram-profile-elite
File size: 11,559 Bytes 
7b65a9a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
 
<!DOCTYPE html>
<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>