Hugging Face's logo

Spaces:
docto41
/
mega-academy
Running

App Files Community
docto41 commited on
Commit
a57ac78
·
verified ·
1 Parent(s): b4d8559

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1028 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mega Academy
3
- emoji: 📈
4
- colorFrom: indigo
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mega-academy
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1028 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Mega AI Learning Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ :root {
11
+ --primary: #6d28d9;
12
+ --secondary: #10b981;
13
+ --dark: #1e293b;
14
+ --light: #f8fafc;
15
+ }
16
+
17
+ body {
18
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
19
+ background-color: #0f172a;
20
+ color: var(--light);
21
+ overflow-x: hidden;
22
+ }
23
+
24
+ .neon-text {
25
+ text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6;
26
+ }
27
+
28
+ .gradient-bg {
29
+ background: linear-gradient(135deg, #1e3a8a 0%, #6d28d9 50%, #10b981 100%);
30
+ }
31
+
32
+ .ai-button {
33
+ transition: all 0.3s ease;
34
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
35
+ }
36
+
37
+ .ai-button:hover {
38
+ transform: translateY(-3px);
39
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
40
+ }
41
+
42
+ .grid-container {
43
+ display: grid;
44
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
45
+ gap: 1rem;
46
+ }
47
+
48
+ .holographic-effect {
49
+ position: relative;
50
+ overflow: hidden;
51
+ }
52
+
53
+ .holographic-effect::before {
54
+ content: '';
55
+ position: absolute;
56
+ top: -50%;
57
+ left: -50%;
58
+ width: 200%;
59
+ height: 200%;
60
+ background: linear-gradient(
61
+ to bottom right,
62
+ rgba(255, 255, 255, 0.1) 0%,
63
+ rgba(255, 255, 255, 0) 50%,
64
+ rgba(255, 255, 255, 0.1) 100%
65
+ );
66
+ transform: rotate(30deg);
67
+ animation: shine 3s infinite;
68
+ }
69
+
70
+ @keyframes shine {
71
+ 0% { transform: rotate(30deg) translate(-30%, -30%); }
72
+ 100% { transform: rotate(30deg) translate(30%, 30%); }
73
+ }
74
+
75
+ .scroll-container {
76
+ scrollbar-width: thin;
77
+ scrollbar-color: var(--primary) var(--dark);
78
+ }
79
+
80
+ .scroll-container::-webkit-scrollbar {
81
+ height: 8px;
82
+ width: 8px;
83
+ }
84
+
85
+ .scroll-container::-webkit-scrollbar-track {
86
+ background: var(--dark);
87
+ }
88
+
89
+ .scroll-container::-webkit-scrollbar-thumb {
90
+ background-color: var(--primary);
91
+ border-radius: 20px;
92
+ }
93
+
94
+ .pulse {
95
+ animation: pulse 2s infinite;
96
+ }
97
+
98
+ @keyframes pulse {
99
+ 0% { box-shadow: 0 0 0 0 rgba(109, 40, 217, 0.7); }
100
+ 70% { box-shadow: 0 0 0 10px rgba(109, 40, 217, 0); }
101
+ 100% { box-shadow: 0 0 0 0 rgba(109, 40, 217, 0); }
102
+ }
103
+ </style>
104
+ </head>
105
+ <body class="min-h-screen">
106
+ <!-- Admin Login Modal -->
107
+ <div id="adminModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
108
+ <div class="bg-slate-800 rounded-xl p-8 max-w-md w-full relative">
109
+ <button onclick="closeAdminModal()" class="absolute top-4 right-4 text-gray-400 hover:text-white">
110
+ <i class="fas fa-times text-2xl"></i>
111
+ </button>
112
+ <h2 class="text-2xl font-bold mb-6 text-center neon-text">Admin Login</h2>
113
+ <form id="adminForm" class="space-y-4">
114
+ <div>
115
+ <label for="adminEmail" class="block text-sm font-medium mb-1">Email</label>
116
+ <input type="email" id="adminEmail" class="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
117
+ </div>
118
+ <div>
119
+ <label for="adminPassword" class="block text-sm font-medium mb-1">Password</label>
120
+ <input type="password" id="adminPassword" class="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
121
+ </div>
122
+ <button type="button" onclick="adminLogin()" class="w-full py-2 px-4 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition duration-200 flex items-center justify-center">
123
+ <i class="fas fa-sign-in-alt mr-2"></i> Login
124
+ </button>
125
+ </form>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Subscription Modal -->
130
+ <div id="subscriptionModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
131
+ <div class="bg-slate-800 rounded-xl p-8 max-w-2xl w-full relative">
132
+ <button onclick="closeSubscriptionModal()" class="absolute top-4 right-4 text-gray-400 hover:text-white">
133
+ <i class="fas fa-times text-2xl"></i>
134
+ </button>
135
+ <h2 class="text-2xl font-bold mb-6 text-center neon-text">Premium Subscription</h2>
136
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
137
+ <div class="bg-slate-700 p-6 rounded-xl border border-slate-600 hover:border-purple-500 transition duration-200">
138
+ <h3 class="text-xl font-bold mb-2">Basic</h3>
139
+ <p class="text-3xl font-bold mb-4">$9.99<span class="text-sm font-normal text-gray-400">/month</span></p>
140
+ <ul class="space-y-2 mb-6">
141
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Access to 100 AI courses</li>
142
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Basic support</li>
143
+ <li class="flex items-center"><i class="fas fa-times text-red-500 mr-2"></i> No premium content</li>
144
+ </ul>
145
+ <button onclick="selectPlan('basic')" class="w-full py-2 px-4 bg-slate-600 hover:bg-slate-500 rounded-lg font-medium transition duration-200">Select Plan</button>
146
+ </div>
147
+ <div class="bg-gradient-to-br from-purple-600 to-blue-500 p-6 rounded-xl border border-transparent transform scale-105">
148
+ <div class="absolute top-0 right-0 bg-yellow-500 text-black px-2 py-1 text-xs font-bold rounded-bl-lg rounded-tr-lg">POPULAR</div>
149
+ <h3 class="text-xl font-bold mb-2">Pro</h3>
150
+ <p class="text-3xl font-bold mb-4">$19.99<span class="text-sm font-normal text-gray-200">/month</span></p>
151
+ <ul class="space-y-2 mb-6">
152
+ <li class="flex items-center"><i class="fas fa-check text-white mr-2"></i> Access to all AI courses</li>
153
+ <li class="flex items-center"><i class="fas fa-check text-white mr-2"></i> Priority support</li>
154
+ <li class="flex items-center"><i class="fas fa-check text-white mr-2"></i> Premium content</li>
155
+ </ul>
156
+ <button onclick="selectPlan('pro')" class="w-full py-2 px-4 bg-white text-purple-600 hover:bg-gray-100 rounded-lg font-medium transition duration-200">Select Plan</button>
157
+ </div>
158
+ <div class="bg-slate-700 p-6 rounded-xl border border-slate-600 hover:border-blue-500 transition duration-200">
159
+ <h3 class="text-xl font-bold mb-2">Enterprise</h3>
160
+ <p class="text-3xl font-bold mb-4">$49.99<span class="text-sm font-normal text-gray-400">/month</span></p>
161
+ <ul class="space-y-2 mb-6">
162
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Unlimited access</li>
163
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 24/7 VIP support</li>
164
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> All premium content</li>
165
+ </ul>
166
+ <button onclick="selectPlan('enterprise')" class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-500 rounded-lg font-medium transition duration-200">Select Plan</button>
167
+ </div>
168
+ </div>
169
+ <div class="mt-6 text-center text-sm text-gray-400">
170
+ <p>All plans include a 7-day free trial. Cancel anytime.</p>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Payment Modal -->
176
+ <div id="paymentModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
177
+ <div class="bg-slate-800 rounded-xl p-8 max-w-md w-full relative">
178
+ <button onclick="closePaymentModal()" class="absolute top-4 right-4 text-gray-400 hover:text-white">
179
+ <i class="fas fa-times text-2xl"></i>
180
+ </button>
181
+ <h2 class="text-2xl font-bold mb-6 text-center neon-text">Complete Payment</h2>
182
+ <div class="space-y-4">
183
+ <div class="bg-slate-700 p-4 rounded-lg">
184
+ <h3 class="font-medium mb-2">Selected Plan: <span id="selectedPlanDisplay" class="text-purple-400">Pro</span></h3>
185
+ <p class="text-xl font-bold">$19.99<span class="text-sm font-normal text-gray-400">/month</span></p>
186
+ </div>
187
+
188
+ <div class="space-y-3">
189
+ <button onclick="payWithStripe()" class="w-full flex items-center justify-center py-3 px-4 bg-[#635bff] hover:bg-[#4f46e5] rounded-lg font-medium transition duration-200">
190
+ <i class="fab fa-stripe text-xl mr-2"></i> Pay with Stripe
191
+ </button>
192
+ <button onclick="payWithPaypal()" class="w-full flex items-center justify-center py-3 px-4 bg-[#009cde] hover:bg-[#0070ba] rounded-lg font-medium transition duration-200">
193
+ <i class="fab fa-paypal text-xl mr-2"></i> Pay with PayPal
194
+ </button>
195
+ </div>
196
+
197
+ <div class="pt-4 border-t border-slate-700">
198
+ <div class="flex items-center mb-2">
199
+ <input type="checkbox" id="savePayment" class="mr-2">
200
+ <label for="savePayment" class="text-sm">Save payment method for future purchases</label>
201
+ </div>
202
+ <p class="text-xs text-gray-400">By completing your purchase, you agree to our Terms of Service and Privacy Policy.</p>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Shopping Cart Sidebar -->
209
+ <div id="cartSidebar" class="fixed top-0 right-0 h-full w-96 bg-slate-800 shadow-2xl transform translate-x-full transition-transform duration-300 z-40 overflow-y-auto">
210
+ <div class="p-6">
211
+ <div class="flex justify-between items-center mb-6">
212
+ <h2 class="text-xl font-bold flex items-center">
213
+ <i class="fas fa-shopping-cart mr-2"></i> Your Cart
214
+ </h2>
215
+ <button onclick="closeCart()" class="text-gray-400 hover:text-white">
216
+ <i class="fas fa-times text-xl"></i>
217
+ </button>
218
+ </div>
219
+
220
+ <div id="cartItems" class="space-y-4 mb-6">
221
+ <!-- Cart items will be added here dynamically -->
222
+ <div class="text-center py-10 text-gray-500">
223
+ <i class="fas fa-shopping-cart text-4xl mb-2"></i>
224
+ <p>Your cart is empty</p>
225
+ </div>
226
+ </div>
227
+
228
+ <div class="border-t border-slate-700 pt-4">
229
+ <div class="flex justify-between mb-2">
230
+ <span>Subtotal:</span>
231
+ <span id="cartSubtotal">$0.00</span>
232
+ </div>
233
+ <div class="flex justify-between mb-4">
234
+ <span>Tax:</span>
235
+ <span id="cartTax">$0.00</span>
236
+ </div>
237
+ <div class="flex justify-between font-bold text-lg">
238
+ <span>Total:</span>
239
+ <span id="cartTotal">$0.00</span>
240
+ </div>
241
+
242
+ <button onclick="checkout()" class="w-full mt-6 py-3 px-4 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition duration-200 flex items-center justify-center">
243
+ <i class="fas fa-credit-card mr-2"></i> Proceed to Checkout
244
+ </button>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Main Layout -->
250
+ <div class="min-h-screen flex flex-col">
251
+ <!-- Header -->
252
+ <header class="gradient-bg text-white sticky top-0 z-30 shadow-lg">
253
+ <div class="container mx-auto px-4 py-3">
254
+ <div class="flex justify-between items-center">
255
+ <div class="flex items-center space-x-4">
256
+ <button onclick="openAdminModal()" class="ai-button bg-purple-700 hover:bg-purple-600 text-white px-3 py-1 rounded-lg text-sm flex items-center">
257
+ <i class="fas fa-user-shield mr-1"></i> Admin
258
+ </button>
259
+ <h1 class="text-2xl font-bold flex items-center">
260
+ <i class="fas fa-robot mr-2"></i> Mega AI Academy
261
+ </h1>
262
+ </div>
263
+
264
+ <div class="flex items-center space-x-4">
265
+ <button onclick="toggleTheme()" class="ai-button bg-slate-700 hover:bg-slate-600 text-white p-2 rounded-full">
266
+ <i class="fas fa-moon" id="themeIcon"></i>
267
+ </button>
268
+ <button id="cartButton" onclick="openCart()" class="ai-button bg-slate-700 hover:bg-slate-600 text-white p-2 rounded-full relative">
269
+ <i class="fas fa-shopping-cart"></i>
270
+ <span id="cartCount" class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center hidden">0</span>
271
+ </button>
272
+ <div id="userSection" class="hidden">
273
+ <button onclick="toggleUserMenu()" class="flex items-center space-x-2 focus:outline-none">
274
+ <div class="h-8 w-8 rounded-full bg-purple-600 flex items-center justify-center">
275
+ <i class="fas fa-user"></i>
276
+ </div>
277
+ <span class="hidden md:inline">Account</span>
278
+ <i class="fas fa-chevron-down text-xs"></i>
279
+ </button>
280
+ <div id="userMenu" class="absolute right-4 mt-2 w-48 bg-slate-800 rounded-md shadow-lg py-1 z-50 hidden">
281
+ <a href="#" class="block px-4 py-2 text-sm hover:bg-slate-700">Dashboard</a>
282
+ <a href="#" class="block px-4 py-2 text-sm hover:bg-slate-700">Settings</a>
283
+ <a href="#" class="block px-4 py-2 text-sm hover:bg-slate-700">Subscriptions</a>
284
+ <div class="border-t border-slate-700"></div>
285
+ <a href="#" class="block px-4 py-2 text-sm hover:bg-slate-700" onclick="logout()">Sign out</a>
286
+ </div>
287
+ </div>
288
+ <div id="authSection" class="flex space-x-2">
289
+ <button onclick="openSubscriptionModal()" class="ai-button bg-green-600 hover:bg-green-500 text-white px-4 py-2 rounded-lg text-sm flex items-center">
290
+ <i class="fas fa-crown mr-1"></i> Subscribe
291
+ </button>
292
+ <button onclick="showLogin()" class="ai-button bg-purple-600 hover:bg-purple-500 text-white px-4 py-2 rounded-lg text-sm flex items-center">
293
+ <i class="fas fa-sign-in-alt mr-1"></i> Login
294
+ </button>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </header>
300
+
301
+ <!-- Admin Dashboard (Hidden by default) -->
302
+ <div id="adminDashboard" class="hidden flex-1 bg-slate-900 p-6">
303
+ <div class="container mx-auto">
304
+ <div class="flex justify-between items-center mb-8">
305
+ <h2 class="text-2xl font-bold flex items-center">
306
+ <i class="fas fa-tachometer-alt mr-2"></i> Admin Dashboard
307
+ </h2>
308
+ <button onclick="logoutAdmin()" class="ai-button bg-red-600 hover:bg-red-500 text-white px-4 py-2 rounded-lg text-sm flex items-center">
309
+ <i class="fas fa-sign-out-alt mr-1"></i> Logout
310
+ </button>
311
+ </div>
312
+
313
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
314
+ <div class="bg-slate-800 p-6 rounded-xl border border-slate-700">
315
+ <h3 class="text-lg font-medium mb-2">Total Revenue</h3>
316
+ <p class="text-3xl font-bold text-green-500">$24,567.89</p>
317
+ <p class="text-sm text-gray-400 mt-1">Last 30 days</p>
318
+ </div>
319
+ <div class="bg-slate-800 p-6 rounded-xl border border-slate-700">
320
+ <h3 class="text-lg font-medium mb-2">Active Subscribers</h3>
321
+ <p class="text-3xl font-bold text-purple-500">1,245</p>
322
+ <p class="text-sm text-gray-400 mt-1">+12% from last month</p>
323
+ </div>
324
+ <div class="bg-slate-800 p-6 rounded-xl border border-slate-700">
325
+ <h3 class="text-lg font-medium mb-2">Courses Available</h3>
326
+ <p class="text-3xl font-bold text-blue-500">990,099</p>
327
+ <p class="text-sm text-gray-400 mt-1">AI-powered courses</p>
328
+ </div>
329
+ </div>
330
+
331
+ <div class="bg-slate-800 p-6 rounded-xl border border-slate-700 mb-8">
332
+ <h3 class="text-lg font-medium mb-4">Recent Transactions</h3>
333
+ <div class="overflow-x-auto">
334
+ <table class="min-w-full divide-y divide-slate-700">
335
+ <thead>
336
+ <tr>
337
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">ID</th>
338
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">User</th>
339
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Amount</th>
340
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Method</th>
341
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Date</th>
342
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Status</th>
343
+ </tr>
344
+ </thead>
345
+ <tbody class="divide-y divide-slate-700">
346
+ <tr>
347
+ <td class="px-4 py-3">#TRX-78945</td>
348
+ <td class="px-4 py-3">[email protected]</td>
349
+ <td class="px-4 py-3">$19.99</td>
350
+ <td class="px-4 py-3"><span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Stripe</span></td>
351
+ <td class="px-4 py-3">2023-07-15</td>
352
+ <td class="px-4 py-3"><span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Completed</span></td>
353
+ </tr>
354
+ <tr>
355
+ <td class="px-4 py-3">#TRX-78944</td>
356
+ <td class="px-4 py-3">[email protected]</td>
357
+ <td class="px-4 py-3">$49.99</td>
358
+ <td class="px-4 py-3"><span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">PayPal</span></td>
359
+ <td class="px-4 py-3">2023-07-14</td>
360
+ <td class="px-4 py-3"><span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Completed</span></td>
361
+ </tr>
362
+ <tr>
363
+ <td class="px-4 py-3">#TRX-78943</td>
364
+ <td class="px-4 py-3">[email protected]</td>
365
+ <td class="px-4 py-3">$9.99</td>
366
+ <td class="px-4 py-3"><span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Stripe</span></td>
367
+ <td class="px-4 py-3">2023-07-14</td>
368
+ <td class="px-4 py-3"><span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Pending</span></td>
369
+ </tr>
370
+ </tbody>
371
+ </table>
372
+ </div>
373
+ </div>
374
+
375
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
376
+ <div class="bg-slate-800 p-6 rounded-xl border border-slate-700">
377
+ <h3 class="text-lg font-medium mb-4">Payment Methods</h3>
378
+ <div class="space-y-4">
379
+ <div class="flex items-center justify-between p-4 bg-slate-700 rounded-lg">
380
+ <div class="flex items-center">
381
+ <i class="fab fa-stripe text-2xl text-[#635bff] mr-3"></i>
382
+ <div>
383
+ <h4 class="font-medium">Stripe</h4>
384
+ <p class="text-sm text-gray-400">Connected</p>
385
+ </div>
386
+ </div>
387
+ <button class="text-purple-500 hover:text-purple-400">
388
+ <i class="fas fa-cog"></i>
389
+ </button>
390
+ </div>
391
+ <div class="flex items-center justify-between p-4 bg-slate-700 rounded-lg">
392
+ <div class="flex items-center">
393
+ <i class="fab fa-paypal text-2xl text-[#009cde] mr-3"></i>
394
+ <div>
395
+ <h4 class="font-medium">PayPal</h4>
396
+ <p class="text-sm text-gray-400">Connected</p>
397
+ </div>
398
+ </div>
399
+ <button class="text-purple-500 hover:text-purple-400">
400
+ <i class="fas fa-cog"></i>
401
+ </button>
402
+ </div>
403
+ </div>
404
+ </div>
405
+
406
+ <div class="bg-slate-800 p-6 rounded-xl border border-slate-700">
407
+ <h3 class="text-lg font-medium mb-4">Admin Accounts</h3>
408
+ <div class="space-y-3">
409
+ <div class="flex items-center justify-between p-3 bg-slate-700 rounded-lg">
410
+ <div class="flex items-center">
411
+ <div class="h-8 w-8 rounded-full bg-purple-600 flex items-center justify-center mr-3">
412
+ <i class="fas fa-user-shield text-sm"></i>
413
+ </div>
414
+ <div>
415
+ <h4 class="font-medium">[email protected]</h4>
416
+ <p class="text-xs text-gray-400">Super Admin</p>
417
+ </div>
418
+ </div>
419
+ <button class="text-red-500 hover:text-red-400">
420
+ <i class="fas fa-trash-alt"></i>
421
+ </button>
422
+ </div>
423
+ <div class="flex items-center justify-between p-3 bg-slate-700 rounded-lg">
424
+ <div class="flex items-center">
425
+ <div class="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center mr-3">
426
+ <i class="fas fa-user-shield text-sm"></i>
427
+ </div>
428
+ <div>
429
+ <h4 class="font-medium">[email protected]</h4>
430
+ <p class="text-xs text-gray-400">Admin</p>
431
+ </div>
432
+ </div>
433
+ <button class="text-red-500 hover:text-red-400">
434
+ <i class="fas fa-trash-alt"></i>
435
+ </button>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+
443
+ <!-- Main Content -->
444
+ <main id="mainContent" class="flex-1 p-6">
445
+ <div class="container mx-auto">
446
+ <!-- Hero Section -->
447
+ <section class="gradient-bg rounded-2xl p-8 mb-10 relative overflow-hidden">
448
+ <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent z-0"></div>
449
+ <div class="relative z-10">
450
+ <h1 class="text-4xl md:text-5xl font-bold mb-4 neon-text">Unlock the Power of AI Learning</h1>
451
+ <p class="text-xl mb-8 max-w-2xl">Access our collection of 990,099 AI-powered courses across all domains. Subscribe now to get unlimited access!</p>
452
+ <div class="flex flex-wrap gap-4">
453
+ <button onclick="openSubscriptionModal()" class="ai-button bg-white text-purple-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-bold flex items-center">
454
+ <i class="fas fa-crown mr-2"></i> Get Premium Access
455
+ </button>
456
+ <button class="ai-button bg-transparent border-2 border-white text-white hover:bg-white hover:text-purple-600 px-6 py-3 rounded-lg font-bold flex items-center">
457
+ <i class="fas fa-play mr-2"></i> Watch Demo
458
+ </button>
459
+ </div>
460
+ </div>
461
+ </section>
462
+
463
+ <!-- Categories -->
464
+ <section class="mb-12">
465
+ <h2 class="text-2xl font-bold mb-6 flex items-center">
466
+ <i class="fas fa-tags mr-2"></i> Popular Categories
467
+ </h2>
468
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
469
+ <button class="ai-button bg-slate-800 hover:bg-slate-700 p-4 rounded-xl flex flex-col items-center">
470
+ <i class="fas fa-brain text-3xl mb-2 text-purple-500"></i>
471
+ <span>Machine Learning</span>
472
+ </button>
473
+ <button class="ai-button bg-slate-800 hover:bg-slate-700 p-4 rounded-xl flex flex-col items-center">
474
+ <i class="fas fa-robot text-3xl mb-2 text-blue-500"></i>
475
+ <span>Robotics</span>
476
+ </button>
477
+ <button class="ai-button bg-slate-800 hover:bg-slate-700 p-4 rounded-xl flex flex-col items-center">
478
+ <i class="fas fa-chart-line text-3xl mb-2 text-green-500"></i>
479
+ <span>Data Science</span>
480
+ </button>
481
+ <button class="ai-button bg-slate-800 hover:bg-slate-700 p-4 rounded-xl flex flex-col items-center">
482
+ <i class="fas fa-eye text-3xl mb-2 text-yellow-500"></i>
483
+ <span>Computer Vision</span>
484
+ </button>
485
+ <button class="ai-button bg-slate-800 hover:bg-slate-700 p-4 rounded-xl flex flex-col items-center">
486
+ <i class="fas fa-language text-3xl mb-2 text-red-500"></i>
487
+ <span>NLP</span>
488
+ </button>
489
+ <button class="ai-button bg-slate-800 hover:bg-slate-700 p-4 rounded-xl flex flex-col items-center">
490
+ <i class="fas fa-shield-alt text-3xl mb-2 text-indigo-500"></i>
491
+ <span>AI Security</span>
492
+ </button>
493
+ </div>
494
+ </section>
495
+
496
+ <!-- AI Courses Grid -->
497
+ <section>
498
+ <div class="flex justify-between items-center mb-6">
499
+ <h2 class="text-2xl font-bold flex items-center">
500
+ <i class="fas fa-robot mr-2"></i> AI-Powered Courses
501
+ </h2>
502
+ <div class="relative">
503
+ <select class="ai-button bg-slate-800 border border-slate-700 text-white px-4 py-2 pr-8 rounded-lg appearance-none focus:outline-none">
504
+ <option>Sort by Popularity</option>
505
+ <option>Sort by Newest</option>
506
+ <option>Sort by Rating</option>
507
+ </select>
508
+ <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
509
+ <i class="fas fa-chevron-down text-gray-400"></i>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <div class="bg-slate-800 rounded-xl p-4 mb-8">
515
+ <div class="flex flex-wrap gap-2 mb-4">
516
+ <input type="text" placeholder="Search courses..." class="flex-1 min-w-[200px] px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
517
+ <button class="ai-button bg-purple-600 hover:bg-purple-500 px-4 py-2 rounded-lg flex items-center">
518
+ <i class="fas fa-search mr-2"></i> Search
519
+ </button>
520
+ </div>
521
+
522
+ <div class="scroll-container overflow-x-auto pb-2">
523
+ <div class="flex space-x-2">
524
+ <button class="ai-button bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded-full text-sm whitespace-nowrap">
525
+ All Categories
526
+ </button>
527
+ <button class="ai-button bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded-full text-sm whitespace-nowrap">
528
+ Beginner
529
+ </button>
530
+ <button class="ai-button bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded-full text-sm whitespace-nowrap">
531
+ Intermediate
532
+ </button>
533
+ <button class="ai-button bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded-full text-sm whitespace-nowrap">
534
+ Advanced
535
+ </button>
536
+ <button class="ai-button bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded-full text-sm whitespace-nowrap">
537
+ Free Courses
538
+ </button>
539
+ <button class="ai-button bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded-full text-sm whitespace-nowrap">
540
+ Premium Only
541
+ </button>
542
+ </div>
543
+ </div>
544
+ </div>
545
+
546
+ <!-- This is a simplified version with just 50 buttons for demonstration -->
547
+ <!-- In a real implementation, you would use pagination or virtualization for 990099 buttons -->
548
+ <div class="grid-container">
549
+ <!-- Generate 50 AI course buttons as a sample -->
550
+ <script>
551
+ const aiDomains = [
552
+ "Machine Learning", "Deep Learning", "Neural Networks", "Computer Vision",
553
+ "Natural Language Processing", "Reinforcement Learning", "Robotics",
554
+ "AI Ethics", "Generative AI", "Predictive Analytics", "AI in Healthcare",
555
+ "AI for Finance", "Autonomous Vehicles", "AI Chips", "Quantum AI",
556
+ "AI Security", "AI Art", "AI Music", "AI Writing", "AI for Business",
557
+ "AI Marketing", "AI Psychology", "AI Education", "AI Agriculture",
558
+ "AI Manufacturing", "AI Logistics", "AI Customer Service", "AI Legal",
559
+ "AI Government", "AI Climate", "AI Space", "AI Gaming", "AI Sports",
560
+ "AI Fashion", "AI Cooking", "AI Architecture", "AI Chemistry",
561
+ "AI Biology", "AI Physics", "AI Mathematics", "AI History",
562
+ "AI Linguistics", "AI Philosophy", "AI Sociology", "AI Anthropology",
563
+ "AI Archaeology", "AI Geology", "AI Oceanography", "AI Meteorology",
564
+ "AI Astronomy"
565
+ ];
566
+
567
+ document.addEventListener('DOMContentLoaded', function() {
568
+ const container = document.querySelector('.grid-container');
569
+
570
+ // Generate 50 buttons for demonstration
571
+ for (let i = 0; i < 50; i++) {
572
+ const domain = aiDomains[i % aiDomains.length];
573
+ const button = document.createElement('button');
574
+ button.className = 'ai-button bg-slate-800 hover:bg-slate-700 p-4 rounded-xl flex flex-col items-center border border-slate-700';
575
+ button.innerHTML = `
576
+ <i class="fas fa-${getIconForDomain(domain)} text-3xl mb-2 ${getColorForIndex(i)}"></i>
577
+ <span class="text-center">${domain}</span>
578
+ <span class="text-xs mt-2 text-gray-400">${Math.floor(Math.random() * 100) + 1} courses</span>
579
+ `;
580
+ button.onclick = function() {
581
+ window.open(`https://example.com/courses/${domain.toLowerCase().replace(/ /g, '-')}`, '_blank');
582
+ };
583
+ container.appendChild(button);
584
+ }
585
+
586
+ // In a real implementation, you would load more buttons dynamically
587
+ // as the user scrolls or implement pagination
588
+ });
589
+
590
+ function getIconForDomain(domain) {
591
+ const icons = {
592
+ "Machine Learning": "brain",
593
+ "Deep Learning": "layer-group",
594
+ "Neural Networks": "project-diagram",
595
+ "Computer Vision": "eye",
596
+ "Natural Language Processing": "language",
597
+ "Reinforcement Learning": "redo",
598
+ "Robotics": "robot",
599
+ "AI Ethics": "balance-scale",
600
+ "Generative AI": "magic",
601
+ "Predictive Analytics": "chart-bar",
602
+ "AI in Healthcare": "heartbeat",
603
+ "AI for Finance": "money-bill-wave",
604
+ "Autonomous Vehicles": "car",
605
+ "AI Chips": "microchip",
606
+ "Quantum AI": "atom",
607
+ "AI Security": "shield-alt",
608
+ "AI Art": "palette",
609
+ "AI Music": "music",
610
+ "AI Writing": "pen-fancy",
611
+ "AI for Business": "briefcase",
612
+ "AI Marketing": "bullhorn",
613
+ "AI Psychology": "brain",
614
+ "AI Education": "graduation-cap",
615
+ "AI Agriculture": "tractor",
616
+ "AI Manufacturing": "industry",
617
+ "AI Logistics": "truck",
618
+ "AI Customer Service": "headset",
619
+ "AI Legal": "gavel",
620
+ "AI Government": "landmark",
621
+ "AI Climate": "cloud-sun",
622
+ "AI Space": "rocket",
623
+ "AI Gaming": "gamepad",
624
+ "AI Sports": "running",
625
+ "AI Fashion": "tshirt",
626
+ "AI Cooking": "utensils",
627
+ "AI Architecture": "building",
628
+ "AI Chemistry": "flask",
629
+ "AI Biology": "dna",
630
+ "AI Physics": "atom",
631
+ "AI Mathematics": "square-root-alt",
632
+ "AI History": "history",
633
+ "AI Linguistics": "comment-alt",
634
+ "AI Philosophy": "question",
635
+ "AI Sociology": "users",
636
+ "AI Anthropology": "user-friends",
637
+ "AI Archaeology": "monument",
638
+ "AI Geology": "mountain",
639
+ "AI Oceanography": "water",
640
+ "AI Meteorology": "cloud-showers-heavy",
641
+ "AI Astronomy": "star"
642
+ };
643
+ return icons[domain] || "robot";
644
+ }
645
+
646
+ function getColorForIndex(index) {
647
+ const colors = [
648
+ "text-purple-500", "text-blue-500", "text-green-500",
649
+ "text-yellow-500", "text-red-500", "text-indigo-500",
650
+ "text-pink-500", "text-teal-500", "text-orange-500"
651
+ ];
652
+ return colors[index % colors.length];
653
+ }
654
+ </script>
655
+ </div>
656
+
657
+ <div class="mt-8 text-center">
658
+ <button class="ai-button bg-slate-800 hover:bg-slate-700 px-6 py-3 rounded-lg font-medium border border-slate-700">
659
+ <i class="fas fa-sync-alt mr-2"></i> Load More Courses
660
+ </button>
661
+ </div>
662
+ </section>
663
+
664
+ <!-- Testimonials -->
665
+ <section class="mb-12">
666
+ <h2 class="text-2xl font-bold mb-6 flex items-center">
667
+ <i class="fas fa-quote-left mr-2"></i> What Our Students Say
668
+ </h2>
669
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
670
+ <div class="bg-slate-800 p-6 rounded-xl border border-slate-700">
671
+ <div class="flex items-center mb-4">
672
+ <div class="h-10 w-10 rounded-full bg-purple-600 flex items-center justify-center mr-3">
673
+ <span>JD</span>
674
+ </div>
675
+ <div>
676
+ <h4 class="font-medium">John Doe</h4>
677
+ <div class="flex text-yellow-400 text-sm">
678
+ <i class="fas fa-star"></i>
679
+ <i class="fas fa-star"></i>
680
+ <i class="fas fa-star"></i>
681
+ <i class="fas fa-star"></i>
682
+ <i class="fas fa-star"></i>
683
+ </div>
684
+ </div>
685
+ </div>
686
+ <p class="text-gray-300">"The AI courses here transformed my career. The quality is unmatched and the instructors are top-notch."</p>
687
+ </div>
688
+ <div class="bg-slate-800 p-6 rounded-xl border border-slate-700">
689
+ <div class="flex items-center mb-4">
690
+ <div class="h-10 w-10 rounded-full bg-blue-600 flex items-center justify-center mr-3">
691
+ <span>AS</span>
692
+ </div>
693
+ <div>
694
+ <h4 class="font-medium">Alice Smith</h4>
695
+ <div class="flex text-yellow-400 text-sm">
696
+ <i class="fas fa-star"></i>
697
+ <i class="fas fa-star"></i>
698
+ <i class="fas fa-star"></i>
699
+ <i class="fas fa-star"></i>
700
+ <i class="fas fa-star-half-alt"></i>
701
+ </div>
702
+ </div>
703
+ </div>
704
+ <p class="text-gray-300">"I've tried many platforms, but the depth of AI content here is incredible. Worth every penny!"</p>
705
+ </div>
706
+ <div class="bg-slate-800 p-6 rounded-xl border border-slate-700">
707
+ <div class="flex items-center mb-4">
708
+ <div class="h-10 w-10 rounded-full bg-green-600 flex items-center justify-center mr-3">
709
+ <span>RJ</span>
710
+ </div>
711
+ <div>
712
+ <h4 class="font-medium">Robert Johnson</h4>
713
+ <div class="flex text-yellow-400 text-sm">
714
+ <i class="fas fa-star"></i>
715
+ <i class="fas fa-star"></i>
716
+ <i class="fas fa-star"></i>
717
+ <i class="fas fa-star"></i>
718
+ <i class="fas fa-star"></i>
719
+ </div>
720
+ </div>
721
+ </div>
722
+ <p class="text-gray-300">"As a researcher, I find the advanced AI courses extremely valuable. The platform keeps getting better."</p>
723
+ </div>
724
+ </div>
725
+ </section>
726
+ </div>
727
+ </main>
728
+
729
+ <!-- Footer -->
730
+ <footer class="bg-slate-900 border-t border-slate-800 py-8">
731
+ <div class="container mx-auto px-4">
732
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
733
+ <div>
734
+ <h3 class="text-lg font-bold mb-4 flex items-center">
735
+ <i class="fas fa-robot mr-2"></i> Mega AI Academy
736
+ </h3>
737
+ <p class="text-gray-400">The world's largest AI learning platform with 990,099 courses across all domains.</p>
738
+ </div>
739
+ <div>
740
+ <h3 class="text-lg font-bold mb-4">Quick Links</h3>
741
+ <ul class="space-y-2">
742
+ <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
743
+ <li><a href="#" class="text-gray-400 hover:text-white">Courses</a></li>
744
+ <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
745
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
746
+ </ul>
747
+ </div>
748
+ <div>
749
+ <h3 class="text-lg font-bold mb-4">Support</h3>
750
+ <ul class="space-y-2">
751
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
752
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
753
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
754
+ <li><a href="#" class="text-gray-400 hover:text-white">Community</a></li>
755
+ </ul>
756
+ </div>
757
+ <div>
758
+ <h3 class="text-lg font-bold mb-4">Legal</h3>
759
+ <ul class="space-y-2">
760
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
761
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
762
+ <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>
763
+ <li><a href="#" class="text-gray-400 hover:text-white">GDPR</a></li>
764
+ </ul>
765
+ </div>
766
+ </div>
767
+ <div class="pt-6 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center">
768
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 Mega AI Academy. All rights reserved.</p>
769
+ <div class="flex space-x-4">
770
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
771
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
772
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
773
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
774
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a>
775
+ </div>
776
+ </div>
777
+ </div>
778
+ </footer>
779
+ </div>
780
+
781
+ <script>
782
+ // Theme toggle
783
+ function toggleTheme() {
784
+ const html = document.documentElement;
785
+ const themeIcon = document.getElementById('themeIcon');
786
+
787
+ if (html.classList.contains('dark')) {
788
+ html.classList.remove('dark');
789
+ themeIcon.classList.remove('fa-sun');
790
+ themeIcon.classList.add('fa-moon');
791
+ localStorage.setItem('theme', 'light');
792
+ } else {
793
+ html.classList.add('dark');
794
+ themeIcon.classList.remove('fa-moon');
795
+ themeIcon.classList.add('fa-sun');
796
+ localStorage.setItem('theme', 'dark');
797
+ }
798
+ }
799
+
800
+ // Check for saved theme preference
801
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
802
+ document.documentElement.classList.add('dark');
803
+ document.getElementById('themeIcon').classList.add('fa-sun');
804
+ document.getElementById('themeIcon').classList.remove('fa-moon');
805
+ } else {
806
+ document.documentElement.classList.remove('dark');
807
+ document.getElementById('themeIcon').classList.add('fa-moon');
808
+ document.getElementById('themeIcon').classList.remove('fa-sun');
809
+ }
810
+
811
+ // Admin modal functions
812
+ function openAdminModal() {
813
+ document.getElementById('adminModal').classList.remove('hidden');
814
+ }
815
+
816
+ function closeAdminModal() {
817
+ document.getElementById('adminModal').classList.add('hidden');
818
+ }
819
+
820
+ function adminLogin() {
821
+ const email = document.getElementById('adminEmail').value;
822
+ const password = document.getElementById('adminPassword').value;
823
+
824
+ // Hardcoded admin credentials
825
+ const admins = {
826
+ '[email protected]': 'Admin270574@',
827
+ '[email protected]': 'Admin270574@'
828
+ };
829
+
830
+ if (admins[email] && password === admins[email]) {
831
+ // Successful login
832
+ document.getElementById('adminModal').classList.add('hidden');
833
+ document.getElementById('mainContent').classList.add('hidden');
834
+ document.getElementById('adminDashboard').classList.remove('hidden');
835
+
836
+ // Clear fields
837
+ document.getElementById('adminEmail').value = '';
838
+ document.getElementById('adminPassword').value = '';
839
+ } else {
840
+ alert('Invalid admin credentials');
841
+ }
842
+ }
843
+
844
+ function logoutAdmin() {
845
+ document.getElementById('adminDashboard').classList.add('hidden');
846
+ document.getElementById('mainContent').classList.remove('hidden');
847
+ }
848
+
849
+ // Subscription modal functions
850
+ function openSubscriptionModal() {
851
+ document.getElementById('subscriptionModal').classList.remove('hidden');
852
+ }
853
+
854
+ function closeSubscriptionModal() {
855
+ document.getElementById('subscriptionModal').classList.add('hidden');
856
+ }
857
+
858
+ function selectPlan(plan) {
859
+ closeSubscriptionModal();
860
+ document.getElementById('selectedPlanDisplay').textContent = plan.charAt(0).toUpperCase() + plan.slice(1);
861
+ document.getElementById('paymentModal').classList.remove('hidden');
862
+ }
863
+
864
+ // Payment modal functions
865
+ function closePaymentModal() {
866
+ document.getElementById('paymentModal').classList.add('hidden');
867
+ }
868
+
869
+ function payWithStripe() {
870
+ alert('Redirecting to Stripe payment...');
871
+ // In a real implementation, you would integrate with Stripe API
872
+ closePaymentModal();
873
+
874
+ // Simulate successful payment
875
+ setTimeout(() => {
876
+ document.getElementById('authSection').classList.add('hidden');
877
+ document.getElementById('userSection').classList.remove('hidden');
878
+ alert('Payment successful! You now have premium access.');
879
+ }, 1000);
880
+ }
881
+
882
+ function payWithPaypal() {
883
+ alert('Redirecting to PayPal payment...');
884
+ // In a real implementation, you would integrate with PayPal API
885
+ closePaymentModal();
886
+
887
+ // Simulate successful payment
888
+ setTimeout(() => {
889
+ document.getElementById('authSection').classList.add('hidden');
890
+ document.getElementById('userSection').classList.remove('hidden');
891
+ alert('Payment successful! You now have premium access.');
892
+ }, 1000);
893
+ }
894
+
895
+ // Shopping cart functions
896
+ let cartItems = [];
897
+ let cartTotal = 0;
898
+
899
+ function openCart() {
900
+ document.getElementById('cartSidebar').classList.remove('translate-x-full');
901
+ }
902
+
903
+ function closeCart() {
904
+ document.getElementById('cartSidebar').classList.add('translate-x-full');
905
+ }
906
+
907
+ function updateCartDisplay() {
908
+ const cartItemsContainer = document.getElementById('cartItems');
909
+ const cartCount = document.getElementById('cartCount');
910
+
911
+ if (cartItems.length === 0) {
912
+ cartItemsContainer.innerHTML = `
913
+ <div class="text-center py-10 text-gray-500">
914
+ <i class="fas fa-shopping-cart text-4xl mb-2"></i>
915
+ <p>Your cart is empty</p>
916
+ </div>
917
+ `;
918
+ cartCount.classList.add('hidden');
919
+ } else {
920
+ cartItemsContainer.innerHTML = '';
921
+ cartItems.forEach(item => {
922
+ const cartItemElement = document.createElement('div');
923
+ cartItemElement.className = 'flex justify-between items-center bg-slate-700 p-3 rounded-lg';
924
+ cartItemElement.innerHTML = `
925
+ <div>
926
+ <h4 class="font-medium">${item.name}</h4>
927
+ <p class="text-sm text-gray-400">${item.category}</p>
928
+ </div>
929
+ <div class="flex items-center">
930
+ <span class="font-bold mr-4">$${item.price.toFixed(2)}</span>
931
+ <button onclick="removeFromCart('${item.id}')" class="text-red-500 hover:text-red-400">
932
+ <i class="fas fa-trash-alt"></i>
933
+ </button>
934
+ </div>
935
+ `;
936
+ cartItemsContainer.appendChild(cartItemElement);
937
+ });
938
+
939
+ cartCount.textContent = cartItems.length;
940
+ cartCount.classList.remove('hidden');
941
+ }
942
+
943
+ // Update totals
944
+ const subtotal = cartItems.reduce((sum, item) => sum + item.price, 0);
945
+ const tax = subtotal * 0.1; // 10% tax for example
946
+ const total = subtotal + tax;
947
+
948
+ document.getElementById('cartSubtotal').textContent = `$${subtotal.toFixed(2)}`;
949
+ document.getElementById('cartTax').textContent = `$${tax.toFixed(2)}`;
950
+ document.getElementById('cartTotal').textContent = `$${total.toFixed(2)}`;
951
+ cartTotal = total;
952
+ }
953
+
954
+ function addToCart(item) {
955
+ cartItems.push(item);
956
+ updateCartDisplay();
957
+ }
958
+
959
+ function removeFromCart(itemId) {
960
+ cartItems = cartItems.filter(item => item.id !== itemId);
961
+ updateCartDisplay();
962
+ }
963
+
964
+ function checkout() {
965
+ if (cartItems.length === 0) {
966
+ alert('Your cart is empty');
967
+ return;
968
+ }
969
+
970
+ closeCart();
971
+ openPaymentModal();
972
+ }
973
+
974
+ // User menu functions
975
+ function toggleUserMenu() {
976
+ const userMenu = document.getElementById('userMenu');
977
+ userMenu.classList.toggle('hidden');
978
+ }
979
+
980
+ function logout() {
981
+ document.getElementById('userSection').classList.add('hidden');
982
+ document.getElementById('authSection').classList.remove('hidden');
983
+ alert('You have been logged out');
984
+ }
985
+
986
+ function showLogin() {
987
+ openSubscriptionModal();
988
+ }
989
+
990
+ // Close menus when clicking outside
991
+ document.addEventListener('click', function(event) {
992
+ const userSection = document.getElementById('userSection');
993
+ const userMenu = document.getElementById('userMenu');
994
+
995
+ if (!userSection.contains(event.target) && !userMenu.contains(event.target)) {
996
+ userMenu.classList.add('hidden');
997
+ }
998
+
999
+ const cartButton = document.getElementById('cartButton');
1000
+ const cartSidebar = document.getElementById('cartSidebar');
1001
+
1002
+ if (!cartButton.contains(event.target) && !cartSidebar.contains(event.target)) {
1003
+ closeCart();
1004
+ }
1005
+ });
1006
+
1007
+ // Sample function to add a course to cart (would be called from course buttons)
1008
+ function sampleAddToCart() {
1009
+ addToCart({
1010
+ id: 'course-' + Math.random().toString(36).substr(2, 9),
1011
+ name: 'Advanced AI Programming',
1012
+ category: 'Machine Learning',
1013
+ price: 49.99
1014
+ });
1015
+ }
1016
+
1017
+ // Initialize with a sample cart item for demonstration
1018
+ setTimeout(() => {
1019
+ addToCart({
1020
+ id: 'course-sample-1',
1021
+ name: 'Introduction to AI',
1022
+ category: 'Beginner',
1023
+ price: 19.99
1024
+ });
1025
+ }, 1000);
1026
+ </script>
1027
+ <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=docto41/mega-academy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1028
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ je veux creer le plus gigantesque générateur de site de cours en ligne marché de INTELIGENCES ARTIFICIEL AVEC PLUS DE 990099 BOUTONS D ASSISANT IA dans toutes les domaine de courses en ligne, je veux q'uon affiche toutes les boutons directement et que chaque boutons cliqué s'ouvre dans une nouvel fenetre je veux que toi soit gré en automatique et aussi ,: je veux un tableau de bord gigantesque ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paement je veux acces et toute produit pour moi seul les autre devront payer un abonnement : [email protected] : Admin270574@ et [email protected] : Admin270574@ avec une interface futiriste