| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>RecoFuchsia - Recommendations Engine</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <link rel="stylesheet" href="style.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#fdf4ff', |
| 100: '#fae8ff', |
| 200: '#f5d0fe', |
| 300: '#f0abfc', |
| 400: '#e879f9', |
| 500: '#d946ef', |
| 600: '#c026d3', |
| 700: '#a21caf', |
| 800: '#86198f', |
| 900: '#701a75', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-neutral-900 text-neutral-100"> |
| <custom-navbar></custom-navbar> |
| |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
| <section class="mb-16"> |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6 text-center"> |
| <span class="text-primary-400">Recommendations</span> Engine |
| </h1> |
| <p class="text-neutral-400 text-lg max-w-2xl mx-auto text-center mb-12"> |
| Real-time AI-powered recommendations tailored for each user |
| </p> |
| </section> |
|
|
| <div class="grid md:grid-cols-2 gap-8"> |
| |
| <div class="bg-neutral-800 border border-neutral-700 rounded-2xl p-6"> |
| <h2 class="text-xl font-semibold mb-4 flex items-center gap-2"> |
| <i data-feather="zap" class="text-primary-400 w-5 h-5"></i> |
| <span>Live Demo</span> |
| </h2> |
| |
| <div id="recommendation-results" class="grid grid-cols-2 gap-4 mb-6"> |
| |
| <div class="animate-pulse bg-neutral-700 rounded-lg aspect-square"></div> |
| <div class="animate-pulse bg-neutral-700 rounded-lg aspect-square"></div> |
| <div class="animate-pulse bg-neutral-700 rounded-lg aspect-square"></div> |
| <div class="animate-pulse bg-neutral-700 rounded-lg aspect-square"></div> |
| </div> |
| |
| <div class="flex gap-3"> |
| <button id="fetch-recommendations" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg font-medium transition-colors"> |
| Get Recommendations |
| </button> |
| <button id="clear-results" class="border border-neutral-700 hover:border-neutral-600 text-neutral-300 px-4 py-2 rounded-lg font-medium transition-colors"> |
| Clear |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-neutral-800 border border-neutral-700 rounded-2xl p-6"> |
| <h2 class="text-xl font-semibold mb-4 flex items-center gap-2"> |
| <i data-feather="code" class="text-primary-400 w-5 h-5"></i> |
| <span>Integration</span> |
| </h2> |
| |
| <div class="bg-neutral-900 rounded-lg p-4 mb-6 overflow-x-auto"> |
| <pre class="text-sm text-primary-400 font-mono"><code>// Initialize SDK |
| const reco = new RecoFuchsia('YOUR_API_KEY'); |
|
|
| // Get recommendations |
| const recommendations = await reco.getForUser('user123', { |
| limit: 4, |
| categories: ['products', 'content'] |
| }); |
|
|
| // Display results |
| recommendations.forEach(item => { |
| renderRecommendation(item); |
| });</code></pre> |
| </div> |
| |
| <div class="flex gap-3"> |
| <a href="#docs" class="bg-neutral-700 hover:bg-neutral-600 text-white px-4 py-2 rounded-lg font-medium transition-colors"> |
| View Documentation |
| </a> |
| <a href="#api" class="border border-neutral-700 hover:border-neutral-600 text-neutral-300 px-4 py-2 rounded-lg font-medium transition-colors"> |
| API Reference |
| </a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <section class="mt-16"> |
| <h2 class="text-2xl font-bold mb-8">Features</h2> |
| <div class="grid md:grid-cols-3 gap-6"> |
| <div class="bg-neutral-800 border border-neutral-700 rounded-xl p-6 hover:border-primary-500 transition-colors"> |
| <div class="w-10 h-10 rounded-lg bg-primary-900 text-primary-400 flex items-center justify-center mb-4"> |
| <i data-feather="clock" class="w-5 h-5"></i> |
| </div> |
| <h3 class="text-lg font-semibold mb-2">Real-time Updates</h3> |
| <p class="text-neutral-400">Recommendations update instantly as users interact with your platform.</p> |
| </div> |
| |
| <div class="bg-neutral-800 border border-neutral-700 rounded-xl p-6 hover:border-primary-500 transition-colors"> |
| <div class="w-10 h-10 rounded-lg bg-primary-900 text-primary-400 flex items-center justify-center mb-4"> |
| <i data-feather="sliders" class="w-5 h-5"></i> |
| </div> |
| <h3 class="text-lg font-semibold mb-2">Customizable Models</h3> |
| <p class="text-neutral-400">Fine-tune the AI to match your business goals and user behavior.</p> |
| </div> |
| |
| <div class="bg-neutral-800 border border-neutral-700 rounded-xl p-6 hover:border-primary-500 transition-colors"> |
| <div class="w-10 h-10 rounded-lg bg-primary-900 text-primary-400 flex items-center justify-center mb-4"> |
| <i data-feather="bar-chart-2" class="w-5 h-5"></i> |
| </div> |
| <h3 class="text-lg font-semibold mb-2">Performance Analytics</h3> |
| <p class="text-neutral-400">Track click-through rates, conversions, and other key metrics.</p> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <custom-footer></custom-footer> |
| <script src="/components/navbar.js"></script> |
| <script src="/components/footer.js"></script> |
| <script src="/script.js"></script> |
| <script> |
| feather.replace(); |
| |
| |
| const mockRecommendations = [ |
| { id: 1, title: 'Premium Headphones', category: 'electronics', image: 'http://static.photos/technology/320x240/1' }, |
| { id: 2, title: 'Fitness Tracker', category: 'fitness', image: 'http://static.photos/black/320x240/2' }, |
| { id: 3, title: 'Programming Book', category: 'books', image: 'http://static.photos/education/320x240/3' }, |
| { id: 4, title: 'Smart Watch', category: 'electronics', image: 'http://static.photos/technology/320x240/4' } |
| ]; |
| |
| document.getElementById('fetch-recommendations').addEventListener('click', function() { |
| const resultsContainer = document.getElementById('recommendation-results'); |
| resultsContainer.innerHTML = ''; |
| |
| mockRecommendations.forEach(item => { |
| const recElement = document.createElement('div'); |
| recElement.className = 'bg-neutral-700 rounded-lg aspect-square flex flex-col overflow-hidden hover:scale-[1.02] transition-transform'; |
| recElement.innerHTML = ` |
| <div class="h-[70%] bg-neutral-900"> |
| <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover"> |
| </div> |
| <div class="p-3 flex-grow"> |
| <h4 class="font-medium text-sm">${item.title}</h4> |
| <span class="text-xs text-neutral-400">${item.category}</span> |
| </div> |
| `; |
| resultsContainer.appendChild(recElement); |
| }); |
| }); |
| |
| document.getElementById('clear-results').addEventListener('click', function() { |
| const resultsContainer = document.getElementById('recommendation-results'); |
| resultsContainer.innerHTML = ` |
| <div class="animate-pulse bg-neutral-700 rounded-lg aspect-square"></div> |
| <div class="animate-pulse bg-neutral-700 rounded-lg aspect-square"></div> |
| <div class="animate-pulse bg-neutral-700 rounded-lg aspect-square"></div> |
| <div class="animate-pulse bg-neutral-700 rounded-lg aspect-square"></div> |
| `; |
| }); |
| </script> |
| </body> |
| </html> |
