Hugging Face's logo

Spaces:
aniket2025
/
fifth-website
Running

App Files Community
aniket2025 commited on
Commit
33414ba
·
verified ·
1 Parent(s): 00b8295

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +683 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Fifth Website
3
- emoji: 🌖
4
- colorFrom: red
5
- colorTo: pink
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: fifth-website
3
+ emoji: 🐳
4
+ colorFrom: gray
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,683 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>WolframAlpha - Computational Intelligence</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
+ @keyframes gradientFlow {
11
+ 0% { background-position: 0% 50%; }
12
+ 50% { background-position: 100% 50%; }
13
+ 100% { background-position: 0% 50%; }
14
+ }
15
+
16
+ .neural-bg {
17
+ background: linear-gradient(-45deg, #121212, #1a1a2e, #16213e, #0f3460);
18
+ background-size: 400% 400%;
19
+ animation: gradientFlow 15s ease infinite;
20
+ position: relative;
21
+ overflow: hidden;
22
+ }
23
+
24
+ .neural-bg::before {
25
+ content: '';
26
+ position: absolute;
27
+ top: 0;
28
+ left: 0;
29
+ right: 0;
30
+ bottom: 0;
31
+ background: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
32
+ background-size: 30px 30px;
33
+ opacity: 0.5;
34
+ }
35
+
36
+ .glassmorphism {
37
+ background: rgba(255, 255, 255, 0.15);
38
+ backdrop-filter: blur(10px);
39
+ -webkit-backdrop-filter: blur(10px);
40
+ border: 1px solid rgba(255, 255, 255, 0.18);
41
+ }
42
+
43
+ .category-tile {
44
+ transition: all 0.3s ease;
45
+ }
46
+
47
+ .category-tile:hover {
48
+ transform: translateY(-5px);
49
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
50
+ }
51
+
52
+ .example-card {
53
+ transition: all 0.3s ease;
54
+ }
55
+
56
+ .example-card:hover {
57
+ transform: scale(1.05);
58
+ z-index: 10;
59
+ }
60
+
61
+ .stat-counter {
62
+ transition: all 0.5s ease;
63
+ }
64
+
65
+ .step-animation {
66
+ animation: fadeInSteps 0.5s ease forwards;
67
+ opacity: 0;
68
+ }
69
+
70
+ @keyframes fadeInSteps {
71
+ to { opacity: 1; }
72
+ }
73
+
74
+ .widget-icon {
75
+ transition: all 0.3s ease;
76
+ }
77
+
78
+ .widget-icon:hover {
79
+ transform: scale(1.1) rotate(5deg);
80
+ }
81
+
82
+ /* Custom scrollbar */
83
+ .custom-scrollbar::-webkit-scrollbar {
84
+ height: 6px;
85
+ }
86
+
87
+ .custom-scrollbar::-webkit-scrollbar-track {
88
+ background: rgba(255, 255, 255, 0.1);
89
+ border-radius: 10px;
90
+ }
91
+
92
+ .custom-scrollbar::-webkit-scrollbar-thumb {
93
+ background: rgba(255, 255, 255, 0.3);
94
+ border-radius: 10px;
95
+ }
96
+
97
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
98
+ background: rgba(255, 255, 255, 0.5);
99
+ }
100
+ </style>
101
+ </head>
102
+ <body class="bg-gray-50 font-sans text-gray-800 antialiased">
103
+ <!-- Mobile Bottom Nav -->
104
+ <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg z-50 flex justify-around items-center p-3 md:hidden">
105
+ <a href="#" class="text-orange-500">
106
+ <i class="fas fa-home text-xl"></i>
107
+ </a>
108
+ <a href="#" class="text-gray-600 hover:text-orange-500">
109
+ <i class="fas fa-th-large text-xl"></i>
110
+ </a>
111
+ <div class="bg-orange-500 text-white p-3 rounded-full -mt-8">
112
+ <i class="fas fa-search text-xl"></i>
113
+ </div>
114
+ <a href="#" class="text-gray-600 hover:text-orange-500">
115
+ <i class="fas fa-crown text-xl"></i>
116
+ </a>
117
+ <a href="#" class="text-gray-600 hover:text-orange-500">
118
+ <i class="fas fa-user text-xl"></i>
119
+ </a>
120
+ </div>
121
+
122
+ <!-- Hero Section -->
123
+ <header class="neural-bg text-white py-10 md:py-20 relative overflow-hidden">
124
+ <div class="container mx-auto px-4 relative z-10">
125
+ <!-- Navigation -->
126
+ <nav class="flex justify-between items-center mb-10 md:mb-16">
127
+ <div class="flex items-center">
128
+ <img src="https://www.wolframalpha.com/_next/static/media/logo.92582cc4.svg" alt="WolframAlpha" class="h-8">
129
+ </div>
130
+ <div class="hidden md:flex space-x-6">
131
+ <a href="#" class="hover:text-orange-400 transition">Examples</a>
132
+ <a href="#" class="hover:text-orange-400 transition">Products</a>
133
+ <a href="#" class="hover:text-orange-400 transition">Solutions</a>
134
+ <a href="#" class="hover:text-orange-400 transition">Resources</a>
135
+ <a href="#" class="hover:text-orange-400 transition">Pro</a>
136
+ <div class="flex items-center space-x-2 ml-4">
137
+ <a href="#" class="hover:text-orange-400 transition">Sign In</a>
138
+ </div>
139
+ </div>
140
+ <button class="md:hidden text-white">
141
+ <i class="fas fa-bars text-xl"></i>
142
+ </button>
143
+ </nav>
144
+
145
+ <!-- Hero Content -->
146
+ <div class="max-w-4xl mx-auto text-center">
147
+ <h1 class="text-3xl md:text-5xl font-bold mb-6">Computational Intelligence <br> at Your Fingertips</h1>
148
+ <p class="text-lg md:text-xl opacity-80 mb-10">Compute expert-level answers using Wolfram's breakthrough algorithms, knowledgebase and AI technology</p>
149
+
150
+ <!-- Search Bar -->
151
+ <div class="glassmorphism rounded-lg p-1 backdrop-blur-md max-w-2xl mx-auto">
152
+ <div class="flex items-center bg-white bg-opacity-10 rounded-lg">
153
+ <input type="text" placeholder="Enter a question, equation, or calculation..." class="flex-grow py-4 px-6 bg-transparent outline-none text-white placeholder-white placeholder-opacity-70">
154
+ <div class="flex space-x-3 px-4">
155
+ <button class="text-white hover:text-orange-400 transition p-2">
156
+ <i class="fas fa-microphone"></i>
157
+ </button>
158
+ <button class="text-white hover:text-orange-400 transition p-2">
159
+ <i class="fas fa-camera"></i>
160
+ </button>
161
+ <button class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded transition">
162
+ Compute
163
+ </button>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <p class="mt-6 opacity-70 text-sm">Try examples: <span class="text-orange-300">limit of sin(x)/x as x -> 0</span> • <span class="text-orange-300">d/dx x^3</span> • <span class="text-orange-300">population of France</span></p>
169
+ </div>
170
+ </div>
171
+ </header>
172
+
173
+ <!-- Smart Suggestion Grid -->
174
+ <section class="py-16 bg-white">
175
+ <div class="container mx-auto px-4">
176
+ <h2 class="text-3xl font-bold text-center mb-12">Explore by Category</h2>
177
+
178
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
179
+ <!-- Math Tile -->
180
+ <div class="category-tile glassmorphism rounded-xl p-6 text-center cursor-pointer group">
181
+ <div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full flex items-center justify-center text-white text-2xl">
182
+ <i class="fas fa-square-root-alt"></i>
183
+ </div>
184
+ <h3 class="font-bold text-lg mb-2">Mathematics</h3>
185
+ <div class="hidden group-hover:block">
186
+ <p class="text-sm opacity-80 mb-2">Quick examples:</p>
187
+ <ul class="text-xs space-y-1">
188
+ <li class="hover:text-orange-500">Integrate x^2</li>
189
+ <li class="hover:text-orange-500">Solve x^3 - 4x^2 + 5x - 2 = 0</li>
190
+ <li class="hover:text-orange-500">Plot sin(x)</li>
191
+ </ul>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Science Tile -->
196
+ <div class="category-tile glassmorphism rounded-xl p-6 text-center cursor-pointer group">
197
+ <div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-green-400 to-blue-500 rounded-full flex items-center justify-center text-white text-2xl">
198
+ <i class="fas fa-atom"></i>
199
+ </div>
200
+ <h3 class="font-bold text-lg mb-2">Science</h3>
201
+ <div class="hidden group-hover:block">
202
+ <p class="text-sm opacity-80 mb-2">Quick examples:</p>
203
+ <ul class="text-xs space-y-1">
204
+ <li class="hover:text-orange-500">H2O molecular weight</li>
205
+ <li class="hover:text-orange-500">F=ma</li>
206
+ <li class="hover:text-orange-500">Quantum numbers</li>
207
+ </ul>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Society Tile -->
212
+ <div class="category-tile glassmorphism rounded-xl p-6 text-center cursor-pointer group">
213
+ <div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white text-2xl">
214
+ <i class="fas fa-globe-americas"></i>
215
+ </div>
216
+ <h3 class="font-bold text-lg mb-2">Society</h3>
217
+ <div class="hidden group-hover:block">
218
+ <p class="text-sm opacity-80 mb-2">Quick examples:</p>
219
+ <ul class="text-xs space-y-1">
220
+ <li class="hover:text-orange-500">Life expectancy in India</li>
221
+ <li class="hover:text-orange-500">GDP of France</li>
222
+ <li class="hover:text-orange-500">Unemployment rate</li>
223
+ </ul>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Everyday Life Tile -->
228
+ <div class="category-tile glassmorphism rounded-xl p-6 text-center cursor-pointer group">
229
+ <div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-yellow-400 to-pink-500 rounded-full flex items-center justify-center text-white text-2xl">
230
+ <i class="fas fa-home"></i>
231
+ </div>
232
+ <h3 class="font-bold text-lg mb-2">Everyday Life</h3>
233
+ <div class="hidden group-hover:block">
234
+ <p class="text-sm opacity-80 mb-2">Quick examples:</p>
235
+ <ul class="text-xs space-y-1">
236
+ <li class="hover:text-orange-500">Calories in apple</li>
237
+ <li class="hover:text-orange-500">Time in Tokyo</li>
238
+ <li class="hover:text-orange-500">Next full moon</li>
239
+ </ul>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Data Analysis Tile -->
244
+ <div class="category-tile glassmorphism rounded-xl p-6 text-center cursor-pointer group">
245
+ <div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-purple-400 to-indigo-500 rounded-full flex items-center justify-center text-white text-2xl">
246
+ <i class="fas fa-chart-line"></i>
247
+ </div>
248
+ <h3 class="font-bold text-lg mb-2">Data Analysis</h3>
249
+ <div class="hidden group-hover:block">
250
+ <p class="text-sm opacity-80 mb-2">Quick examples:</p>
251
+ <ul class="text-xs space-y-1">
252
+ <li class="hover:text-orange-500">Histogram {2,3,4,5,5,6}</li>
253
+ <li class="hover:text-orange-500">Standard deviation</li>
254
+ <li class="hover:text-orange-500">Linear regression</li>
255
+ </ul>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </section>
261
+
262
+ <!-- Example Query Carousel -->
263
+ <section class="py-16 bg-gray-50">
264
+ <div class="container mx-auto px-4">
265
+ <h2 class="text-3xl font-bold text-center mb-12">Popular Queries</h2>
266
+
267
+ <div class="relative">
268
+ <div class="overflow-x-auto pb-4 custom-scrollbar">
269
+ <div class="flex space-x-6 w-max px-4">
270
+ <!-- Card 1 -->
271
+ <div class="example-card bg-white rounded-xl shadow-md overflow-hidden w-64">
272
+ <div class="h-40 bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center">
273
+ <i class="fas fa-square-root-alt text-white text-6xl"></i>
274
+ </div>
275
+ <div class="p-4">
276
+ <h3 class="font-bold mb-2">Solve differential equation</h3>
277
+ <p class="text-sm text-gray-600 mb-3">y'' + y = 0</p>
278
+ <button class="text-orange-500 text-sm font-medium hover:text-orange-700 transition">Try it now →</button>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Card 2 -->
283
+ <div class="example-card bg-white rounded-xl shadow-md overflow-hidden w-64">
284
+ <div class="h-40 bg-gradient-to-r from-orange-400 to-orange-600 flex items-center justify-center">
285
+ <i class="fas fa-globe-americas text-white text-6xl"></i>
286
+ </div>
287
+ <div class="p-4">
288
+ <h3 class="font-bold mb-2">Find GDP of France</h3>
289
+ <p class="text-sm text-gray-600 mb-3">Economic indicators comparison</p>
290
+ <button class="text-orange-500 text-sm font-medium hover:text-orange-700 transition">Try it now →</button>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Card 3 -->
295
+ <div class="example-card bg-white rounded-xl shadow-md overflow-hidden w-64">
296
+ <div class="h-40 bg-gradient-to-r from-green-400 to-green-600 flex items-center justify-center">
297
+ <i class="fas fa-atom text-white text-6xl"></i>
298
+ </div>
299
+ <div class="p-4">
300
+ <h3 class="font-bold mb-2">Compare planets</h3>
301
+ <p class="text-sm text-gray-600 mb-3">Earth vs Mars properties</p>
302
+ <button class="text-orange-500 text-sm font-medium hover:text-orange-700 transition">Try it now →</button>
303
+ </div>
304
+ </div>
305
+
306
+ <!-- Card 4 -->
307
+ <div class="example-card bg-white rounded-xl shadow-md overflow-hidden w-64">
308
+ <div class="h-40 bg-gradient-to-r from-purple-400 to-purple-600 flex items-center justify-center">
309
+ <i class="fas fa-chart-bar text-white text-6xl"></i>
310
+ </div>
311
+ <div class="p-4">
312
+ <h3 class="font-bold mb-2">Stock market data</h3>
313
+ <p class="text-sm text-gray-600 mb-3">AAPL historical prices</p>
314
+ <button class="text-orange-500 text-sm font-medium hover:text-orange-700 transition">Try it now →</button>
315
+ </div>
316
+ </div>
317
+
318
+ <!-- Card 5 -->
319
+ <div class="example-card bg-white rounded-xl shadow-md overflow-hidden w-64">
320
+ <div class="h-40 bg-gradient-to-r from-red-400 to-red-600 flex items-center justify-center">
321
+ <i class="fas fa-dna text-white text-6xl"></i>
322
+ </div>
323
+ <div class="p-4">
324
+ <h3 class="font-bold mb-2">Protein structure</h3>
325
+ <p class="text-sm text-gray-600 mb-3">Hemoglobin visualization</p>
326
+ <button class="text-orange-500 text-sm font-medium hover:text-orange-700 transition">Try it now →</button>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <button class="hidden md:block absolute left-0 top-1/2 transform -translate-y-1/2 bg-white rounded-full shadow-md p-2 z-10 -ml-6 hover:bg-gray-100 transition">
333
+ <i class="fas fa-chevron-left text-gray-600"></i>
334
+ </button>
335
+ <button class="hidden md:block absolute right-0 top-1/2 transform -translate-y-1/2 bg-white rounded-full shadow-md p-2 z-10 -mr-6 hover:bg-gray-100 transition">
336
+ <i class="fas fa-chevron-right text-gray-600"></i>
337
+ </button>
338
+ </div>
339
+ </div>
340
+ </section>
341
+
342
+ <!-- Step-by-Step and Widget Showcase -->
343
+ <section class="py-16 bg-white">
344
+ <div class="container mx-auto px-4">
345
+ <div class="flex flex-col md:flex-row gap-8">
346
+ <!-- Step-by-Step Demo -->
347
+ <div class="md:w-1/2 glassmorphism rounded-xl p-6">
348
+ <h2 class="text-2xl font-bold mb-6">Step-by-Step Solutions</h2>
349
+
350
+ <div class="example-step mb-6">
351
+ <h3 class="font-bold text-lg mb-3">Compute: ∫x sin(x) dx</h3>
352
+
353
+ <div class="space-y-4">
354
+ <div class="step-animation" style="animation-delay: 0.1s">
355
+ <p class="font-medium">Step 1: Integration by parts</p>
356
+ <div class="bg-gray-100 p-3 rounded">∫u dv = uv - ∫v du</div>
357
+ </div>
358
+
359
+ <div class="step-animation" style="animation-delay: 0.3s">
360
+ <p class="font-medium">Step 2: Choose u and dv</p>
361
+ <div class="bg-gray-100 p-3 rounded">Let u = x, dv = sin(x) dx</div>
362
+ </div>
363
+
364
+ <div class="step-animation" style="animation-delay: 0.5s">
365
+ <p class="font-medium">Step 3: Compute derivatives/integrals</p>
366
+ <div class="bg-gray-100 p-3 rounded">du = dx, v = -cos(x)</div>
367
+ </div>
368
+
369
+ <div class="step-animation" style="animation-delay: 0.7s">
370
+ <p class="font-medium">Step 4: Apply integration by parts</p>
371
+ <div class="bg-gray-100 p-3 rounded">∫x sin(x) dx = -x cos(x) - ∫-cos(x) dx</div>
372
+ </div>
373
+
374
+ <div class="step-animation" style="animation-delay: 0.9s">
375
+ <p class="font-medium">Step 5: Simplify</p>
376
+ <div class="bg-gray-100 p-3 rounded rounded-b-none">∫x sin(x) dx = -x cos(x) + ∫cos(x) dx</div>
377
+ <div class="bg-gray-100 p-3 rounded rounded-t-none border-t border-gray-200">∫x sin(x) dx = -x cos(x) + sin(x) + C</div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ <button class="bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-lg transition">
383
+ Try Wolfram Pro for full steps
384
+ </button>
385
+ </div>
386
+
387
+ <!-- Widget Showcase -->
388
+ <div class="md:w-1/2">
389
+ <h2 class="text-2xl font-bold mb-6">Interactive Widgets</h2>
390
+
391
+ <div class="grid grid-cols-2 gap-4">
392
+ <!-- Plot Widget -->
393
+ <div class="widget-icon bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-4 text-center cursor-pointer">
394
+ <div class="w-16 h-16 mx-auto mb-3 bg-blue-500 rounded-full flex items-center justify-center text-white text-2xl">
395
+ <i class="fas fa-chart-line"></i>
396
+ </div>
397
+ <h3 class="font-bold">Graph Plotter</h3>
398
+ <p class="text-xs text-gray-600 mt-1">Visualize functions</p>
399
+ </div>
400
+
401
+ <!-- Chemistry Widget -->
402
+ <div class="widget-icon bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-4 text-center cursor-pointer">
403
+ <div class="w-16 h-16 mx-auto mb-3 bg-green-500 rounded-full flex items-center justify-center text-white text-2xl">
404
+ <i class="fas fa-atom"></i>
405
+ </div>
406
+ <h3 class="font-bold">Chemistry</h3>
407
+ <p class="text-xs text-gray-600 mt-1">Molecular structures</p>
408
+ </div>
409
+
410
+ <!-- Matrix Widget -->
411
+ <div class="widget-icon bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-4 text-center cursor-pointer">
412
+ <div class="w-16 h-16 mx-auto mb-3 bg-purple-500 rounded-full flex items-center justify-center text-white text-2xl">
413
+ <i class="fas fa-border-all"></i>
414
+ </div>
415
+ <h3 class="font-bold">Matrix Calculator</h3>
416
+ <p class="text-xs text-gray-600 mt-1">Linear algebra</p>
417
+ </div>
418
+
419
+ <!-- Image Analysis -->
420
+ <div class="widget-icon bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-4 text-center cursor-pointer">
421
+ <div class="w-16 h-16 mx-auto mb-3 bg-orange-500 rounded-full flex items-center justify-center text-white text-2xl">
422
+ <i class="fas fa-image"></i>
423
+ </div>
424
+ <h3 class="font-bold">Image Analysis</h3>
425
+ <p class="text-xs text-gray-600 mt-1">Process and analyze</p>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </section>
432
+
433
+ <!-- AI/Pro Feature Promo -->
434
+ <section class="py-16 bg-gray-50">
435
+ <div class="container mx-auto px-4">
436
+ <h2 class="text-3xl font-bold text-center mb-12">Wolfram Pro Features</h2>
437
+
438
+ <div class="grid md:grid-cols-3 gap-8">
439
+ <!-- Feature 1 -->
440
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
441
+ <div class="h-48 bg-gradient-to-r from-orange-500 to-orange-600 flex items-center justify-center">
442
+ <i class="fas fa-list-ol text-white text-8xl opacity-30"></i>
443
+ </div>
444
+ <div class="p-6">
445
+ <div class="flex items-center mb-4">
446
+ <div class="bg-orange-500 text-white p-3 rounded-full mr-4">
447
+ <i class="fas fa-list-ol"></i>
448
+ </div>
449
+ <h3 class="font-bold text-lg">Step-by-step Solutions</h3>
450
+ </div>
451
+ <p class="text-gray-600 mb-4">Get detailed step-by-step breakdowns for math, chemistry, physics and more with Wolfram Pro.</p>
452
+ <button class="text-orange-500 font-medium hover:text-orange-700 transition">Learn More →</button>
453
+ </div>
454
+ </div>
455
+
456
+ <!-- Feature 2 -->
457
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
458
+ <div class="h-48 bg-gradient-to-r from-blue-500 to-blue-600 flex items-center justify-center">
459
+ <i class="fas fa-cube text-white text-8xl opacity-30"></i>
460
+ </div>
461
+ <div class="p-6">
462
+ <div class="flex items-center mb-4">
463
+ <div class="bg-blue-500 text-white p-3 rounded-full mr-4">
464
+ <i class="fas fa-cube"></i>
465
+ </div>
466
+ <h3 class="font-bold text-lg">Pro Widgets</h3>
467
+ </div>
468
+ <p class="text-gray-600 mb-4">Enhanced interactive tools for advanced computations, plotting, and visualization.</p>
469
+ <button class="text-blue-500 font-medium hover:text-blue-700 transition">Learn More →</button>
470
+ </div>
471
+ </div>
472
+
473
+ <!-- Feature 3 -->
474
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
475
+ <div class="h-48 bg-gradient-to-r from-purple-500 to-purple-600 flex items-center justify-center">
476
+ <i class="fas fa-cloud text-white text-8xl opacity-30"></i>
477
+ </div>
478
+ <div class="p-6">
479
+ <div class="flex items-center mb-4">
480
+ <div class="bg-purple-500 text-white p-3 rounded-full mr-4">
481
+ <i class="fas fa-cloud"></i>
482
+ </div>
483
+ <h3 class="font-bold text-lg">Wolfram Cloud</h3>
484
+ </div>
485
+ <p class="text-gray-600 mb-4">Access Wolfram's computational power anywhere with cloud-based notebooks and deployment.</p>
486
+ <button class="text-purple+500 font-medium hover:text-purple-700 transition">Learn More →</button>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </section>
492
+
493
+ <!-- Stats & Ecosystem Showcase -->
494
+ <section class="py-16 bg-white">
495
+ <div class="container mx-auto px-4">
496
+ <div class="glassmorphism rounded-2xl p-8 md:p-12 backdrop-blur-md">
497
+ <h2 class="text-3xl font-bold text-center mb-12">Wolfram Ecosystem</h2>
498
+
499
+ <div class="grid md:grid-cols-3 gap-8 mb-12">
500
+ <!-- Stat 1 -->
501
+ <div class="stat-counter bg-white bg-opacity-70 rounded-xl p-6 text-center">
502
+ <div class="text-4xl font-bold text-orange-500 mb-3" id="counter1">0</div>
503
+ <p class="text-gray-700 font-medium">Billion+ queries solved</p>
504
+ </div>
505
+
506
+ <!-- Stat 2 -->
507
+ <div class="stat-counter bg-white bg-opacity-70 rounded-xl p-6 text-center">
508
+ <div class="text-4xl font-bold text-orange-500 mb-3" id="counter2">0</div>
509
+ <p class="text-gray-700 font-medium">Domains covered</p>
510
+ </div>
511
+
512
+ <!-- Stat 3 -->
513
+ <div class="stat-counter bg-white bg-opacity-70 rounded-xl p-6 text-center">
514
+ <div class="text-4xl font-bold text-orange-500 mb-3" id="counter3">0</div>
515
+ <p class="text-gray-700 font-medium">Functions available</p>
516
+ </div>
517
+ </div>
518
+
519
+ <div class="flex flex-wrap justify-center gap-6">
520
+ <!-- Product 1 -->
521
+ <div class="flex items-center bg-white bg-opacity-80 rounded-full px-6 py-3 shadow-sm">
522
+ <div class="bg-orange-100 text-orange-500 p-2 rounded-full mr-3">
523
+ <i class="fas fa-terminal"></i>
524
+ </div>
525
+ <div>
526
+ <h4 class="font-bold">Wolfram Language</h4>
527
+ <p class="text-xs text-gray-600">Symbolic programming</p>
528
+ </div>
529
+ </div>
530
+
531
+ <!-- Product 2 -->
532
+ <div class="flex items-center bg-white bg-opacity-80 rounded-full px-6 py-3 shadow-sm">
533
+ <div class="bg-blue-100 text-blue-500 p-2 rounded-full mr-3">
534
+ <i class="fas fa-code"></i>
535
+ </div>
536
+ <div>
537
+ <h4 class="font-bold">Wolfram Alpha API</h4>
538
+ <p class="text-xs text-gray-600">Computational API</p>
539
+ </div>
540
+ </div>
541
+
542
+ <!-- Product 3 -->
543
+ <div class="flex items-center bg-white bg-opacity-80 rounded-full px-6 py-3 shadow-sm">
544
+ <div class="bg-green-100 text-green-500 p-2 rounded-full mr-3">
545
+ <i class="fas fa-book"></i>
546
+ </div>
547
+ <div>
548
+ <h4 class="font-bold">Notebook Edition</h4>
549
+ <p class="text-xs text-gray-600">Interactive docs</p>
550
+ </div>
551
+ </div>
552
+
553
+ <!-- Product 4 -->
554
+ <div class="flex items-center bg-white bg-opacity-80 rounded-full px-6 py-3 shadow-sm">
555
+ <div class="bg-purple-100 text-purple-500 p-2 rounded-full mr-3">
556
+ <i class="fas fa-cubes"></i>
557
+ </div>
558
+ <div>
559
+ <h4 class="font-bold">Mathematica</h4>
560
+ <p class="text-xs text-gray-600">Technical computing</p>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </section>
567
+
568
+ <!-- Footer -->
569
+ <footer class="glassmorphism bg-gray-50 bg-opacity-70 text-gray-700 py-12">
570
+ <div class="container mx-auto px-4">
571
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-8 mb-8">
572
+ <div>
573
+ <h4 class="font-bold mb-4 text-lg">WolframAlpha</h4>
574
+ <ul class="space-y-2">
575
+ <li><a href="#" class="hover:text-orange-500 transition">About</a></li>
576
+ <li><a href="#" class="hover:text-orange-500 transition">Products</a></li>
577
+ <li><a href="#" class="hover:text-orange-500 transition">Team</a></li>
578
+ <li><a href="#" class="hover:text-orange-500 transition">Careers</a></li>
579
+ </ul>
580
+ </div>
581
+
582
+ <div>
583
+ <h4 class="font-bold mb-4 text-lg">Resources</h4>
584
+ <ul class="space-y-2">
585
+ <li><a href="#" class="hover:text-orange-500 transition">Documentation</a></li>
586
+ <li><a href="#" class="hover:text-orange-500 transition">Examples</a></li>
587
+ <li><a href="#" class="hover:text-orange-500 transition">Tutorials</a></li>
588
+ <li><a href="#" class="hover:text-orange-500 transition">Learning Center</a></li>
589
+ </ul>
590
+ </div>
591
+
592
+ <div>
593
+ <h4 class="font-bold mb-4 text-lg">Legal</h4>
594
+ <ul class="space-y-2">
595
+ <li><a href="#" class="hover:text-orange-500 transition">Terms of Use</a></li>
596
+ <li><a href="#" class="hover:text-orange-500 transition">Privacy Policy</a></li>
597
+ <li><a href="#" class="hover:text-orange-500 transition">Cookie Policy</a></li>
598
+ <li><a href="#" class="hover:text-orange-500 transition">GDPR</a></li>
599
+ </ul>
600
+ </div>
601
+
602
+ <div>
603
+ <h4 class="font-bold mb-4 text-lg">Support</h4>
604
+ <ul class="space-y-2">
605
+ <li><a href="#" class="hover:text-orange-500 transition">Contact</a></li>
606
+ <li><a href="#" class="hover:text-orange-500 transition">FAQ</a></li>
607
+ <li><a href="#" class="hover:text-orange-500 transition">Accessibility</a></li>
608
+ <li><a href="#" class="hover:text-orange-500 transition">Feedback</a></li>
609
+ </ul>
610
+ </div>
611
+
612
+ <div class="col-span-2 md:col-span-1">
613
+ <h4 class="font-bold mb-4 text-lg">Connect</h4>
614
+ <div class="flex space-x-4 mb-6">
615
+ <a href="#" class="text-gray-500 hover:text-orange-500 transition text-xl"><i class="fab fa-twitter"></i></a>
616
+ <a href="#" class="text-gray-500 hover:text-orange-500 transition text-xl"><i class="fab fa-facebook"></i></a>
617
+ <a href="#" class="text-gray-500 hover:text-orange-500 transition text-xl"><i class="fab fa-linkedin"></i></a>
618
+ <a href="#" class="text-gray-500 hover:text-orange-500 transition text-xl"><i class="fab fa-youtube"></i></a>
619
+ </div>
620
+ <div class="flex items-center">
621
+ <button id="darkModeToggle" class="bg-gray-200 hover:bg-gray-300 rounded-full p-2 transition">
622
+ <i class="fas fa-moon"></i>
623
+ </button>
624
+ <span class="ml-2 text-sm">Dark Mode</span>
625
+ </div>
626
+ </div>
627
+ </div>
628
+
629
+ <div class="border-t border-gray-200 pt-8 text-center">
630
+ <p class="text-sm">© 2023 Wolfram Alpha LLC. All rights reserved.</p>
631
+ </div>
632
+ </div>
633
+ </footer>
634
+
635
+ <script>
636
+ // Counter animation
637
+ function animateCounter(id, target, duration) {
638
+ let start = 0;
639
+ const increment = target / (duration / 16); // 60fps, duration in ms
640
+ const element = document.getElementById(id);
641
+
642
+ const timer = setInterval(() => {
643
+ start += increment;
644
+ if (start >= target) {
645
+ clearInterval(timer);
646
+ element.textContent = target;
647
+ } else {
648
+ element.textContent = Math.floor(start);
649
+ }
650
+ }, 16);
651
+ }
652
+
653
+ // Run animations when elements are in view
654
+ const observer = new IntersectionObserver((entries) => {
655
+ entries.forEach(entry => {
656
+ if (entry.isIntersecting) {
657
+ animateCounter('counter1', 1, 1000);
658
+ animateCounter('counter2', 20000, 1500);
659
+ animateCounter('counter3', 6000, 1800);
660
+
661
+ // Animate steps sequentially
662
+ const steps = document.querySelectorAll('.step-animation');
663
+ steps.forEach(step => {
664
+ step.style.opacity = 1;
665
+ });
666
+
667
+ observer.unobserve(entry.target);
668
+ }
669
+ });
670
+ }, { threshold: 0.5 });
671
+
672
+ observer.observe(document.querySelector('.stat-counter'));
673
+
674
+ // Dark mode toggle
675
+ document.getElementById('darkModeToggle').addEventListener('click', function() {
676
+ document.body.classList.toggle('bg-gray-900');
677
+ document.body.classList.toggle('text-gray-100');
678
+ this.querySelector('i').classList.toggle('fa-moon');
679
+ this.querySelector('i').classList.toggle('fa-sun');
680
+ });
681
+ </script>
682
+ <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=aniket2025/fifth-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
683
+ </html>