Spaces:

themeht
/

telegram-profile-elite

Running

App Files Files Community

themeht commited on Nov 20, 2025

Commit

7b65a9a

verified ·

1 Parent(s): 07afce0

make this html, css code more professional and cool. don't edit the id and class names because my javascript is using them:

Browse files

<!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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
--primary-color: #0088cc;
--primary-light: #e6f7ff;
--primary-dark: #006699;
--secondary-color: #6c757d;
--success-color: #28a745;
--warning-color: #ffc107;
--danger-color: #dc3545;
--light-color: #f8f9fa;
--dark-color: #343a40;
--border-radius: 12px;
--border-radius-sm: 8px;
--box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
--box-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--transition: all 0.3s ease;
--gradient-primary: linear-gradient(135deg, var(--primary-color), #34b7f1);
--gradient-success: linear-gradient(135deg, var(--success-color), #20c997);
--gradient-warning: linear-gradient(135deg, var(--warning-color), #fd7e14);
--gradient-danger: linear-gradient(135deg, var(--danger-color), #e83e8c);
}

body {
font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--tg-theme-bg-color, #f5f5f5);
color: var(--tg-theme-text-color, #333333);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.container {
max-width: 100%;
padding: 16px;
}

.profile-card {
background: var(--tg-theme-secondary-bg-color, #ffffff);
border-radius: var(--border-radius);
padding: 24px;
margin-bottom: 20px;
box-shadow: var(--box-shadow);
border: 1px solid rgba(0, 0, 0, 0.05);
transition: var(--transition);
position: relative;
overflow: hidden;
}

.profile-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 4px;
background: var(--gradient-primary);
}

.profile-card:hover {
transform: translateY(-4px);
box-shadow: var(--box-shadow-lg);
}

.profile-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}

.profile-info {
flex: 1;
}

.profile-name {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 6px;
color: var(--tg-theme-text-color, #000000);
}

.profile-username {
color: var(--tg-theme-hint-color, #666666);
font-size: 0.95rem;
background: rgba(0, 0, 0, 0.03);
padding: 4px 10px;
border-radius: 20px;
display: inline-block;
}

.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 20px 0;
}

.stat-card {
background: var(--tg-theme-bg-color, #ffffff);
border-radius: var(--border-radius-sm);
padding: 16px;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.05);
transition: var(--transition);
position: relative;
overflow: hidden;
}

.stat-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
background: var(--primary-color);
}

.stat-card:nth-child(2)::before {
background: var(--success-color);
}

.stat-card:nth-child(3)::before {
background: var(--warning-color);
}

.stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-number {
font-size: 24px;
font-weight: bold;
color: var(--primary-color);
margin-bottom: 4px;
}

.stat-card:nth-child(2) .stat-number {
color: var(--success-color);
}

.stat-card:nth-child(3) .stat-number {
color: var(--warning-color);
}

.stat-label {
font-size: 12px;
color: var(--tg-theme-hint-color, #666666);
font-weight: 500;
}

.section {
margin: 28px 0;
}

.section-title {
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 18px;
color: var(--tg-theme-text-color, #000000);
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.section-title::before {
content: '';
display: block;
width: 4px;
height: 18px;
background: var(--primary-color);
border-radius: 2px;
}

.list-item {
background: var(--tg-theme-secondary-bg-color, #ffffff);
border-radius: var(--border-radius-sm);
padding: 16px;
margin-bottom: 12px;
border-right: 4px solid var(--primary-color);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
transition: var(--transition);
cursor: pointer;
position: relative;
overflow: hidden;
}

.list-item::before {
content: '';
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: var(--transition);
}

.list-item:hover::before {
right: 100%;
}

.list-item:hover {
transform: translateX(-4px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.list-item-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}

.badge {
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.badge-success {
background: var(--success-color);
color: white;
}

.badge-warning {
background: var(--warning-color);
color: white;
}

.badge-error {
background: var(--danger-color);
color: white;
}

.badge-info {
background: var(--primary-color);
color: white;
}

.badge-secondary {
background: var(--secondary-color);
color: white;
}

.loading {
text-align: center;
padding: 40px;
color: var(--tg-theme-hint-color, #666666);
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}

.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(0, 136, 204, 0.2);
border-radius: 50%;
border-top-color: var(--primary-color);
animation: spin 1s linear infinite;
}

@keyframes
spin {
to { transform: rotate(360deg); }
}

.error {
text-align: center;
padding: 40px 20px;
color: var(--danger-color);
background: rgba(220, 53, 69, 0.05);
border-radius: var(--border-radius);
margin: 16px 0;
border: 1px solid rgba(220, 53, 69, 0.2);
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.1);
}

.tab-container {
display: flex;
border-bottom: 1px solid var(--tg-theme-hint-color, #e0e0e0);
margin-bottom: 20px;
overflow-x: auto;
scrollbar-width: none;
background: var(--tg-theme-secondary-bg-color, #ffffff);
border-radius: var(--border-radius-sm);
padding: 4px;
}

.tab-container::-webkit-scrollbar {
display: none;
}

.tab {
padding: 12px 16px;
background: none;
border: none;
color: var(--tg-theme-text-color, #000000);
cursor: pointer;
border-radius: var(--border-radius-sm);
white-space: nowrap;
transition: var(--transition);
font-family: inherit;
font-weight: 500;
flex: 1;
text-align: center;
position: relative;
overflow: hidden;
}

.tab::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 3px;
background: var(--primary-color);
transition: var(--transition);
}

.tab.active {
color: var(--primary-color);
font-weight: 600;
background: rgba(0, 136, 204, 0.05);
}

.tab.active::before {
width: 100%;
}

.tab-content {
display: none;
}

.tab-content.active {
display: block;
animation: fadeIn 0.3s ease;
}

@keyframes
fadeIn {
from { opacity: 0; transform: transla

Files changed (4) hide show

README.md +8 -5
index.html +173 -19
script.js +87 -0
style.css +131 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Telegram Profile Elite
-emoji: 📉
-colorFrom: green
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Telegram Profile Elite 🚀
+colorFrom: yellow
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,173 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>

script.js ADDED Viewed

	@@ -0,0 +1,87 @@

+// Tab switching functionality
+function switchTab(tabId) {
+    // Hide all tab contents
+    document.querySelectorAll('.tab-content').forEach(tab => {
+        tab.classList.add('hidden');
+        tab.classList.remove('active');
+    });
+    // Deactivate all tabs
+    document.querySelectorAll('.tab').forEach(tab => {
+        tab.classList.remove('active', 'text-blue-600', 'dark:text-blue-400', 'border-blue-500');
+        tab.classList.add('text-gray-500', 'dark:text-gray-400');
+    });
+    // Show selected tab content
+    document.getElementById(tabId).classList.remove('hidden');
+    document.getElementById(tabId).classList.add('active');
+    // Activate selected tab
+    const activeTab = Array.from(document.querySelectorAll('.tab')).find(tab =>
+        tab.getAttribute('onclick').includes(tabId)
+    );
+    if (activeTab) {
+        activeTab.classList.add('active', 'text-blue-600', 'dark:text-blue-400', 'border-b-2', 'border-blue-500');
+        activeTab.classList.remove('text-gray-500', 'dark:text-gray-400');
+    }
+}
+// Modal functionality
+function openModal(content) {
+    const modal = document.getElementById('orderModal');
+    const modalContent = document.getElementById('orderModalContent');
+    modalContent.innerHTML = content;
+    modal.classList.remove('hidden');
+    document.body.style.overflow = 'hidden';
+}
+function closeModal() {
+    document.getElementById('orderModal').classList.add('hidden');
+    document.body.style.overflow = 'auto';
+}
+// Close modal when clicking outside
+document.getElementById('orderModal').addEventListener('click', function(e) {
+    if (e.target === this) {
+        closeModal();
+    }
+});
+// Simulate loading data
+document.addEventListener('DOMContentLoaded', function() {
+    setTimeout(() => {
+        document.getElementById('loading').classList.add('hidden');
+        document.getElementById('content').classList.remove('hidden');
+        // Sample data population
+        document.getElementById('userName').textContent = 'علی محمدی';
+        document.getElementById('userUsername').textContent = '@alimohammadi';
+        document.getElementById('walletBalance').textContent = '1,250,000';
+        document.getElementById('activeSubs').textContent = '2';
+        document.getElementById('totalOrders').textContent = '7';
+        document.getElementById('infoUserId').textContent = 'USER-789456';
+        document.getElementById('infoPhone').textContent = '+98 912 345 6789';
+        document.getElementById('infoJoinDate').textContent = '1402/05/12';
+        document.getElementById('infoDiscount').textContent = '15%';
+        document.getElementById('infoTrial').classList.remove('hidden');
+    }, 1500);
+    // Retry button functionality
+    document.getElementById('retryButton').addEventListener('click', function() {
+        document.getElementById('error').classList.add('hidden');
+        document.getElementById('loading').classList.remove('hidden');
+        setTimeout(() => {
+            document.getElementById('loading').classList.add('hidden');
+            document.getElementById('content').classList.remove('hidden');
+        }, 1000);
+    });
+});
+// Initialize feather icons
+if (typeof feather !== 'undefined') {
+    feather.replace();
+}

style.css CHANGED Viewed

@@ -1,28 +1,141 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+::-webkit-scrollbar-track {
+    @apply bg-gray-100 dark:bg-gray-800;
+}
+::-webkit-scrollbar-thumb {
+    @apply bg-blue-500 rounded-full;
+}
+::-webkit-scrollbar-thumb:hover {
+    @apply bg-blue-600;
+}
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+.tab-content {
+    display: none;
+    animation: fadeIn 0.3s ease;
+}
+.tab-content.active {
+    display: block;
+}
+/* Persian Font */
 body {
+    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+/* List Item Hover Effect */
+.list-item {
+    position: relative;
+    overflow: hidden;
+}
+.list-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    transition: all 0.3s ease;
+}
+.list-item:hover::before {
+    right: 100%;
+}
+/* Button Hover Effect */
+.action-button {
+    position: relative;
+    overflow: hidden;
+}
+.action-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transform: translateX(-100%);
+    transition: all 0.3s ease;
+}
+.action-button:hover::before {
+    transform: translateX(100%);
+}
+/* Empty State */
+.empty-state {
+    @apply flex flex-col items-center justify-center py-12 text-center;
+}
+.empty-state-icon {
+    @apply text-gray-400 dark:text-gray-500 text-5xl mb-4;
+}
+.empty-state-title {
+    @apply text-lg font-medium text-gray-700 dark:text-gray-300 mb-2;
+}
+.empty-state-description {
+    @apply text-gray-500 dark:text-gray-400 max-w-md;
 }
+/* Badges */
+.badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
 }
+.badge-success {
+    @apply bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200;
 }
+.badge-warning {
+    @apply bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200;
 }
+.badge-error {
+    @apply bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200;
 }
+.badge-info {
+    @apply bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200;
+}
+.badge-secondary {
+    @apply bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300;
+}
+/* Responsive Adjustments */
+@media (max-width: 640px) {
+    .stats-grid {
+        @apply grid-cols-1;
+    }
+    .tab-container button {
+        @apply px-3 py-2 text-xs;
+    }
+    .profile-card {
+        @apply p-4;
+    }
+}