Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WolframAlpha - Computational Intelligence</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes gradientFlow { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .neural-bg { | |
| background: linear-gradient(-45deg, #121212, #1a1a2e, #16213e, #0f3460); | |
| background-size: 400% 400%; | |
| animation: gradientFlow 15s ease infinite; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .neural-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px); | |
| background-size: 30px 30px; | |
| opacity: 0.5; | |
| } | |
| .glassmorphism { | |
| background: rgba(255, 255, 255, 0.15); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| } | |
| .category-tile { | |
| transition: all 0.3s ease; | |
| } | |
| .category-tile:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .example-card { | |
| transition: all 0.3s ease; | |
| } | |
| .example-card:hover { | |
| transform: scale(1.05); | |
| z-index: 10; | |
| } | |
| .stat-counter { | |
| transition: all 0.5s ease; | |
| } | |
| .step-animation { | |
| animation: fadeInSteps 0.5s ease forwards; | |
| opacity: 0; | |
| } | |
| @keyframes fadeInSteps { | |
| to { opacity: 1; } | |
| } | |
| .widget-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .widget-icon:hover { | |
| transform: scale(1.1) rotate(5deg); | |
| } | |
| /* Custom scrollbar */ | |
| .custom-scrollbar::-webkit-scrollbar { | |
| height: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.3); | |
| border-radius: 10px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans text-gray-800 antialiased"> | |
| <!-- Mobile Bottom Nav --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg z-50 flex justify-around items-center p-3 md:hidden"> | |
| <a href="#" class="text-orange-500"> | |
| <i class="fas fa-home text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-orange-500"> | |
| <i class="fas fa-th-large text-xl"></i> | |
| </a> | |
| <div class="bg-orange-500 text-white p-3 rounded-full -mt-8"> | |
| <i class="fas fa-search text-xl"></i> | |
| </div> | |
| <a href="#" class="text-gray-600 hover:text-orange-500"> | |
| <i class="fas fa-crown text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-orange-500"> | |
| <i class="fas fa-user text-xl"></i> | |
| </a> | |
| </div> | |
| <!-- Hero Section --> | |
| <header class="neural-bg text-white py-10 md:py-20 relative overflow-hidden"> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <!-- Navigation --> | |
| <nav class="flex justify-between items-center mb-10 md:mb-16"> | |
| <div class="flex items-center"> | |
| <img src="https://www.wolframalpha.com/_next/static/media/logo.92582cc4.svg" alt="WolframAlpha" class="h-8"> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-orange-400 transition">Examples</a> | |
| <a href="#" class="hover:text-orange-400 transition">Products</a> | |
| <a href="#" class="hover:text-orange-400 transition">Solutions</a> | |
| <a href="#" class="hover:text-orange-400 transition">Resources</a> | |
| <a href="#" class="hover:text-orange-400 transition">Pro</a> | |
| <div class="flex items-center space-x-2 ml-4"> | |
| <a href="#" class="hover:text-orange-400 transition">Sign In</a> | |
| </div> | |
| </div> | |
| <button class="md:hidden text-white"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </nav> | |
| <!-- Hero Content --> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h1 class="text-3xl md:text-5xl font-bold mb-6">Computational Intelligence <br> at Your Fingertips</h1> | |
| <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> | |
| <!-- Search Bar --> | |
| <div class="glassmorphism rounded-lg p-1 backdrop-blur-md max-w-2xl mx-auto"> | |
| <div class="flex items-center bg-white bg-opacity-10 rounded-lg"> | |
| <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"> | |
| <div class="flex space-x-3 px-4"> | |
| <button class="text-white hover:text-orange-400 transition p-2"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| <button class="text-white hover:text-orange-400 transition p-2"> | |
| <i class="fas fa-camera"></i> | |
| </button> | |
| <button class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded transition"> | |
| Compute | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <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> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Smart Suggestion Grid --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Explore by Category</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-4"> | |
| <!-- Math Tile --> | |
| <div class="category-tile glassmorphism rounded-xl p-6 text-center cursor-pointer group"> | |
| <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"> | |
| <i class="fas fa-square-root-alt"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Mathematics</h3> | |
| <div class="hidden group-hover:block"> | |
| <p class="text-sm opacity-80 mb-2">Quick examples:</p> | |
| <ul class="text-xs space-y-1"> | |
| <li class="hover:text-orange-500">Integrate x^2</li> | |
| <li class="hover:text-orange-500">Solve x^3 - 4x^2 + 5x - 2 = 0</li> | |
| <li class="hover:text-orange-500">Plot sin(x)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Science Tile --> | |
| <div class="category-tile glassmorphism rounded-xl p-6 text-center cursor-pointer group"> | |
| <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"> | |
| <i class="fas fa-atom"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Science</h3> | |
| <div class="hidden group-hover:block"> | |
| <p class="text-sm opacity-80 mb-2">Quick examples:</p> | |
| <ul class="text-xs space-y-1"> | |
| <li class="hover:text-orange-500">H2O molecular weight</li> | |
| <li class="hover:text-orange-500">F=ma</li> | |
| <li class="hover:text-orange-500">Quantum numbers</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Society Tile --> | |
| <div class="category-tile glassmorphism rounded-xl p-6 text-center cursor-pointer group"> | |
| <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"> | |
| <i class="fas fa-globe-americas"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Society</h3> | |
| <div class="hidden group-hover:block"> | |
| <p class="text-sm opacity-80 mb-2">Quick examples:</p> | |
| <ul class="text-xs space-y-1"> | |
| <li class="hover:text-orange-500">Life expectancy in India</li> | |
| <li class="hover:text-orange-500">GDP of France</li> | |
| <li class="hover:text-orange-500">Unemployment rate</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Everyday Life Tile --> | |
| <div class="category-tile glassmorphism rounded-xl p-6 text-center cursor-pointer group"> | |
| <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"> | |
| <i class="fas fa-home"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Everyday Life</h3> | |
| <div class="hidden group-hover:block"> | |
| <p class="text-sm opacity-80 mb-2">Quick examples:</p> | |
| <ul class="text-xs space-y-1"> | |
| <li class="hover:text-orange-500">Calories in apple</li> | |
| <li class="hover:text-orange-500">Time in Tokyo</li> | |
| <li class="hover:text-orange-500">Next full moon</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Data Analysis Tile --> | |
| <div class="category-tile glassmorphism rounded-xl p-6 text-center cursor-pointer group"> | |
| <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"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Data Analysis</h3> | |
| <div class="hidden group-hover:block"> | |
| <p class="text-sm opacity-80 mb-2">Quick examples:</p> | |
| <ul class="text-xs space-y-1"> | |
| <li class="hover:text-orange-500">Histogram {2,3,4,5,5,6}</li> | |
| <li class="hover:text-orange-500">Standard deviation</li> | |
| <li class="hover:text-orange-500">Linear regression</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Example Query Carousel --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Popular Queries</h2> | |
| <div class="relative"> | |
| <div class="overflow-x-auto pb-4 custom-scrollbar"> | |
| <div class="flex space-x-6 w-max px-4"> | |
| <!-- Card 1 --> | |
| <div class="example-card bg-white rounded-xl shadow-md overflow-hidden w-64"> | |
| <div class="h-40 bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center"> | |
| <i class="fas fa-square-root-alt text-white text-6xl"></i> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold mb-2">Solve differential equation</h3> | |
| <p class="text-sm text-gray-600 mb-3">y'' + y = 0</p> | |
| <button class="text-orange-500 text-sm font-medium hover:text-orange-700 transition">Try it now →</button> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="example-card bg-white rounded-xl shadow-md overflow-hidden w-64"> | |
| <div class="h-40 bg-gradient-to-r from-orange-400 to-orange-600 flex items-center justify-center"> | |
| <i class="fas fa-globe-americas text-white text-6xl"></i> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold mb-2">Find GDP of France</h3> | |
| <p class="text-sm text-gray-600 mb-3">Economic indicators comparison</p> | |
| <button class="text-orange-500 text-sm font-medium hover:text-orange-700 transition">Try it now →</button> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="example-card bg-white rounded-xl shadow-md overflow-hidden w-64"> | |
| <div class="h-40 bg-gradient-to-r from-green-400 to-green-600 flex items-center justify-center"> | |
| <i class="fas fa-atom text-white text-6xl"></i> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold mb-2">Compare planets</h3> | |
| <p class="text-sm text-gray-600 mb-3">Earth vs Mars properties</p> | |
| <button class="text-orange-500 text-sm font-medium hover:text-orange-700 transition">Try it now →</button> | |
| </div> | |
| </div> | |
| <!-- Card 4 --> | |
| <div class="example-card bg-white rounded-xl shadow-md overflow-hidden w-64"> | |
| <div class="h-40 bg-gradient-to-r from-purple-400 to-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-chart-bar text-white text-6xl"></i> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold mb-2">Stock market data</h3> | |
| <p class="text-sm text-gray-600 mb-3">AAPL historical prices</p> | |
| <button class="text-orange-500 text-sm font-medium hover:text-orange-700 transition">Try it now →</button> | |
| </div> | |
| </div> | |
| <!-- Card 5 --> | |
| <div class="example-card bg-white rounded-xl shadow-md overflow-hidden w-64"> | |
| <div class="h-40 bg-gradient-to-r from-red-400 to-red-600 flex items-center justify-center"> | |
| <i class="fas fa-dna text-white text-6xl"></i> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold mb-2">Protein structure</h3> | |
| <p class="text-sm text-gray-600 mb-3">Hemoglobin visualization</p> | |
| <button class="text-orange-500 text-sm font-medium hover:text-orange-700 transition">Try it now →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <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"> | |
| <i class="fas fa-chevron-left text-gray-600"></i> | |
| </button> | |
| <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"> | |
| <i class="fas fa-chevron-right text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Step-by-Step and Widget Showcase --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <!-- Step-by-Step Demo --> | |
| <div class="md:w-1/2 glassmorphism rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold mb-6">Step-by-Step Solutions</h2> | |
| <div class="example-step mb-6"> | |
| <h3 class="font-bold text-lg mb-3">Compute: ∫x sin(x) dx</h3> | |
| <div class="space-y-4"> | |
| <div class="step-animation" style="animation-delay: 0.1s"> | |
| <p class="font-medium">Step 1: Integration by parts</p> | |
| <div class="bg-gray-100 p-3 rounded">∫u dv = uv - ∫v du</div> | |
| </div> | |
| <div class="step-animation" style="animation-delay: 0.3s"> | |
| <p class="font-medium">Step 2: Choose u and dv</p> | |
| <div class="bg-gray-100 p-3 rounded">Let u = x, dv = sin(x) dx</div> | |
| </div> | |
| <div class="step-animation" style="animation-delay: 0.5s"> | |
| <p class="font-medium">Step 3: Compute derivatives/integrals</p> | |
| <div class="bg-gray-100 p-3 rounded">du = dx, v = -cos(x)</div> | |
| </div> | |
| <div class="step-animation" style="animation-delay: 0.7s"> | |
| <p class="font-medium">Step 4: Apply integration by parts</p> | |
| <div class="bg-gray-100 p-3 rounded">∫x sin(x) dx = -x cos(x) - ∫-cos(x) dx</div> | |
| </div> | |
| <div class="step-animation" style="animation-delay: 0.9s"> | |
| <p class="font-medium">Step 5: Simplify</p> | |
| <div class="bg-gray-100 p-3 rounded rounded-b-none">∫x sin(x) dx = -x cos(x) + ∫cos(x) dx</div> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-lg transition"> | |
| Try Wolfram Pro for full steps | |
| </button> | |
| </div> | |
| <!-- Widget Showcase --> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-2xl font-bold mb-6">Interactive Widgets</h2> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <!-- Plot Widget --> | |
| <div class="widget-icon bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-4 text-center cursor-pointer"> | |
| <div class="w-16 h-16 mx-auto mb-3 bg-blue-500 rounded-full flex items-center justify-center text-white text-2xl"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="font-bold">Graph Plotter</h3> | |
| <p class="text-xs text-gray-600 mt-1">Visualize functions</p> | |
| </div> | |
| <!-- Chemistry Widget --> | |
| <div class="widget-icon bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-4 text-center cursor-pointer"> | |
| <div class="w-16 h-16 mx-auto mb-3 bg-green-500 rounded-full flex items-center justify-center text-white text-2xl"> | |
| <i class="fas fa-atom"></i> | |
| </div> | |
| <h3 class="font-bold">Chemistry</h3> | |
| <p class="text-xs text-gray-600 mt-1">Molecular structures</p> | |
| </div> | |
| <!-- Matrix Widget --> | |
| <div class="widget-icon bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-4 text-center cursor-pointer"> | |
| <div class="w-16 h-16 mx-auto mb-3 bg-purple-500 rounded-full flex items-center justify-center text-white text-2xl"> | |
| <i class="fas fa-border-all"></i> | |
| </div> | |
| <h3 class="font-bold">Matrix Calculator</h3> | |
| <p class="text-xs text-gray-600 mt-1">Linear algebra</p> | |
| </div> | |
| <!-- Image Analysis --> | |
| <div class="widget-icon bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-4 text-center cursor-pointer"> | |
| <div class="w-16 h-16 mx-auto mb-3 bg-orange-500 rounded-full flex items-center justify-center text-white text-2xl"> | |
| <i class="fas fa-image"></i> | |
| </div> | |
| <h3 class="font-bold">Image Analysis</h3> | |
| <p class="text-xs text-gray-600 mt-1">Process and analyze</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI/Pro Feature Promo --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Wolfram Pro Features</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="h-48 bg-gradient-to-r from-orange-500 to-orange-600 flex items-center justify-center"> | |
| <i class="fas fa-list-ol text-white text-8xl opacity-30"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-orange-500 text-white p-3 rounded-full mr-4"> | |
| <i class="fas fa-list-ol"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Step-by-step Solutions</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Get detailed step-by-step breakdowns for math, chemistry, physics and more with Wolfram Pro.</p> | |
| <button class="text-orange-500 font-medium hover:text-orange-700 transition">Learn More →</button> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="h-48 bg-gradient-to-r from-blue-500 to-blue-600 flex items-center justify-center"> | |
| <i class="fas fa-cube text-white text-8xl opacity-30"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-500 text-white p-3 rounded-full mr-4"> | |
| <i class="fas fa-cube"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Pro Widgets</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Enhanced interactive tools for advanced computations, plotting, and visualization.</p> | |
| <button class="text-blue-500 font-medium hover:text-blue-700 transition">Learn More →</button> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="h-48 bg-gradient-to-r from-purple-500 to-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-cloud text-white text-8xl opacity-30"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-500 text-white p-3 rounded-full mr-4"> | |
| <i class="fas fa-cloud"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Wolfram Cloud</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Access Wolfram's computational power anywhere with cloud-based notebooks and deployment.</p> | |
| <button class="text-purple+500 font-medium hover:text-purple-700 transition">Learn More →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats & Ecosystem Showcase --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="glassmorphism rounded-2xl p-8 md:p-12 backdrop-blur-md"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Wolfram Ecosystem</h2> | |
| <div class="grid md:grid-cols-3 gap-8 mb-12"> | |
| <!-- Stat 1 --> | |
| <div class="stat-counter bg-white bg-opacity-70 rounded-xl p-6 text-center"> | |
| <div class="text-4xl font-bold text-orange-500 mb-3" id="counter1">0</div> | |
| <p class="text-gray-700 font-medium">Billion+ queries solved</p> | |
| </div> | |
| <!-- Stat 2 --> | |
| <div class="stat-counter bg-white bg-opacity-70 rounded-xl p-6 text-center"> | |
| <div class="text-4xl font-bold text-orange-500 mb-3" id="counter2">0</div> | |
| <p class="text-gray-700 font-medium">Domains covered</p> | |
| </div> | |
| <!-- Stat 3 --> | |
| <div class="stat-counter bg-white bg-opacity-70 rounded-xl p-6 text-center"> | |
| <div class="text-4xl font-bold text-orange-500 mb-3" id="counter3">0</div> | |
| <p class="text-gray-700 font-medium">Functions available</p> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-6"> | |
| <!-- Product 1 --> | |
| <div class="flex items-center bg-white bg-opacity-80 rounded-full px-6 py-3 shadow-sm"> | |
| <div class="bg-orange-100 text-orange-500 p-2 rounded-full mr-3"> | |
| <i class="fas fa-terminal"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Wolfram Language</h4> | |
| <p class="text-xs text-gray-600">Symbolic programming</p> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="flex items-center bg-white bg-opacity-80 rounded-full px-6 py-3 shadow-sm"> | |
| <div class="bg-blue-100 text-blue-500 p-2 rounded-full mr-3"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Wolfram Alpha API</h4> | |
| <p class="text-xs text-gray-600">Computational API</p> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="flex items-center bg-white bg-opacity-80 rounded-full px-6 py-3 shadow-sm"> | |
| <div class="bg-green-100 text-green-500 p-2 rounded-full mr-3"> | |
| <i class="fas fa-book"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Notebook Edition</h4> | |
| <p class="text-xs text-gray-600">Interactive docs</p> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="flex items-center bg-white bg-opacity-80 rounded-full px-6 py-3 shadow-sm"> | |
| <div class="bg-purple-100 text-purple-500 p-2 rounded-full mr-3"> | |
| <i class="fas fa-cubes"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Mathematica</h4> | |
| <p class="text-xs text-gray-600">Technical computing</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="glassmorphism bg-gray-50 bg-opacity-70 text-gray-700 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-8 mb-8"> | |
| <div> | |
| <h4 class="font-bold mb-4 text-lg">WolframAlpha</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-orange-500 transition">About</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition">Products</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition">Team</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition">Careers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4 text-lg">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-orange-500 transition">Documentation</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition">Examples</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition">Tutorials</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition">Learning Center</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4 text-lg">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-orange-500 transition">Terms of Use</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition">Privacy Policy</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition">Cookie Policy</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition">GDPR</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4 text-lg">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-orange-500 transition">Contact</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition">FAQ</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition">Accessibility</a></li> | |
| <li><a href="#" class="hover:text-orange-500 transition">Feedback</a></li> | |
| </ul> | |
| </div> | |
| <div class="col-span-2 md:col-span-1"> | |
| <h4 class="font-bold mb-4 text-lg">Connect</h4> | |
| <div class="flex space-x-4 mb-6"> | |
| <a href="#" class="text-gray-500 hover:text-orange-500 transition text-xl"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-orange-500 transition text-xl"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-orange-500 transition text-xl"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-orange-500 transition text-xl"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| <div class="flex items-center"> | |
| <button id="darkModeToggle" class="bg-gray-200 hover:bg-gray-300 rounded-full p-2 transition"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| <span class="ml-2 text-sm">Dark Mode</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-8 text-center"> | |
| <p class="text-sm">© 2023 Wolfram Alpha LLC. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Counter animation | |
| function animateCounter(id, target, duration) { | |
| let start = 0; | |
| const increment = target / (duration / 16); // 60fps, duration in ms | |
| const element = document.getElementById(id); | |
| const timer = setInterval(() => { | |
| start += increment; | |
| if (start >= target) { | |
| clearInterval(timer); | |
| element.textContent = target; | |
| } else { | |
| element.textContent = Math.floor(start); | |
| } | |
| }, 16); | |
| } | |
| // Run animations when elements are in view | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| animateCounter('counter1', 1, 1000); | |
| animateCounter('counter2', 20000, 1500); | |
| animateCounter('counter3', 6000, 1800); | |
| // Animate steps sequentially | |
| const steps = document.querySelectorAll('.step-animation'); | |
| steps.forEach(step => { | |
| step.style.opacity = 1; | |
| }); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, { threshold: 0.5 }); | |
| observer.observe(document.querySelector('.stat-counter')); | |
| // Dark mode toggle | |
| document.getElementById('darkModeToggle').addEventListener('click', function() { | |
| document.body.classList.toggle('bg-gray-900'); | |
| document.body.classList.toggle('text-gray-100'); | |
| this.querySelector('i').classList.toggle('fa-moon'); | |
| this.querySelector('i').classList.toggle('fa-sun'); | |
| }); | |
| </script> | |
| <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> | |
| </html> |