Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TrendMaster Pro | E-Commerce Intelligence Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> | |
| <style> | |
| :root { | |
| --primary-dark: #0a1922; | |
| --primary-blue: #1a5f7a; | |
| --accent-gold: #ffd700; | |
| } | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| background-color: var(--primary-dark); | |
| color: #e2e8f0; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%); | |
| } | |
| .gold-accent { | |
| color: var(--accent-gold); | |
| } | |
| .gold-border { | |
| border-color: var(--accent-gold); | |
| } | |
| .gold-bg { | |
| background-color: var(--accent-gold); | |
| } | |
| .dark-card { | |
| background-color: #162a38; | |
| border: 1px solid var(--primary-blue); | |
| transition: all 0.3s ease; | |
| } | |
| .dark-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); | |
| } | |
| .heatmap-cell { | |
| transition: all 0.3s ease; | |
| } | |
| .heatmap-cell:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); | |
| } | |
| .search-box { | |
| background-color: rgba(26, 95, 122, 0.3); | |
| border: 1px solid var(--primary-blue); | |
| } | |
| .search-box:focus { | |
| outline: none; | |
| border-color: var(--accent-gold); | |
| box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2); | |
| } | |
| .nav-item { | |
| position: relative; | |
| } | |
| .nav-item::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: var(--accent-gold); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-item:hover::after { | |
| width: 100%; | |
| } | |
| .sidebar-item { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-item:hover { | |
| background-color: rgba(26, 95, 122, 0.5); | |
| border-left: 3px solid var(--accent-gold); | |
| } | |
| .trend-up { | |
| color: #4ade80; | |
| } | |
| .trend-down { | |
| color: #f87171; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); | |
| } | |
| .api-endpoint { | |
| background-color: rgba(26, 95, 122, 0.2); | |
| border-left: 3px solid var(--accent-gold); | |
| } | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| border-color: var(--accent-gold); | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: var(--accent-gold); | |
| } | |
| .architecture-diagram { | |
| background: linear-gradient(135deg, rgba(26, 95, 122, 0.1) 0%, rgba(10, 25, 34, 0.8) 100%); | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg py-4 px-6 shadow-lg sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 gold-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /> | |
| </svg> | |
| <span class="text-xl font-bold gold-accent">TrendMaster Pro</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#features" class="nav-item text-white hover:text-gold-300 py-2">Features</a> | |
| <a href="#architecture" class="nav-item text-white hover:text-gold-300 py-2">Architecture</a> | |
| <a href="#api" class="nav-item text-white hover:text-gold-300 py-2">API</a> | |
| <a href="#admin" class="nav-item text-white hover:text-gold-300 py-2">Admin</a> | |
| <a href="#integrations" class="nav-item text-white hover:text-gold-300 py-2">Integrations</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-transparent border gold-border text-white px-4 py-2 rounded hover:bg-opacity-10 hover:bg-gold-300 transition"> | |
| Sign In | |
| </button> | |
| <button class="gold-bg text-gray-900 px-4 py-2 rounded font-medium hover:bg-opacity-90 transition"> | |
| Get Started | |
| </button> | |
| <button class="md:hidden text-white" id="mobile-menu-button"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden absolute left-0 right-0 bg-gray-900 z-50" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-800">Features</a> | |
| <a href="#architecture" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-800">Architecture</a> | |
| <a href="#api" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-800">API</a> | |
| <a href="#admin" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-800">Admin</a> | |
| <a href="#integrations" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-800">Integrations</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center"> | |
| <div> | |
| <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">E-Commerce Intelligence <span class="gold-accent">Powered by AI</span></h1> | |
| <p class="text-xl text-gray-300 mb-8">Aggregate, analyze, and act on trending products across Amazon, Shopify, and Alibaba with our comprehensive intelligence platform.</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <button class="gold-bg text-gray-900 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition text-lg"> | |
| Start Free Trial | |
| </button> | |
| <button class="bg-transparent border gold-border text-white px-6 py-3 rounded-lg hover:bg-opacity-10 hover:bg-gold-300 transition text-lg"> | |
| Watch Demo | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-10 lg:mt-0"> | |
| <div class="dark-card rounded-xl overflow-hidden"> | |
| <div class="p-4 bg-gray-800 flex items-center"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="flex-1 text-center text-sm text-gray-400">TrendMaster Pro Dashboard</div> | |
| </div> | |
| <div class="p-4"> | |
| <div id="heroChart" class="h-64"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div id="features" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-white mb-4">Core Platform Features</h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto">Comprehensive tools designed to give you the competitive edge in e-commerce</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="dark-card p-8 rounded-lg feature-card"> | |
| <div class="w-12 h-12 gold-bg rounded-lg flex items-center justify-center mb-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Real-time Trend Detection</h3> | |
| <p class="text-gray-400">AI-powered algorithms identify emerging product trends before they go mainstream across all major marketplaces.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="dark-card p-8 rounded-lg feature-card"> | |
| <div class="w-12 h-12 gold-bg rounded-lg flex items-center justify-center mb-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Visual Product Search</h3> | |
| <p class="text-gray-400">Upload product images to find similar items across marketplaces with price comparisons and availability metrics.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="dark-card p-8 rounded-lg feature-card"> | |
| <div class="w-12 h-12 gold-bg rounded-lg flex items-center justify-center mb-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Marketplace Analytics</h3> | |
| <p class="text-gray-400">Comprehensive dashboards showing product performance metrics across Amazon, Shopify, and Alibaba in one unified view.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="dark-card p-8 rounded-lg feature-card"> | |
| <div class="w-12 h-12 gold-bg rounded-lg flex items-center justify-center mb-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Mobile Responsive</h3> | |
| <p class="text-gray-400">Fully responsive interface optimized for all devices with dedicated mobile apps for iOS and Android.</p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="dark-card p-8 rounded-lg feature-card"> | |
| <div class="w-12 h-12 gold-bg rounded-lg flex items-center justify-center mb-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Hybrid Database</h3> | |
| <p class="text-gray-400">Optimized SQL/NoSQL hybrid database system designed specifically for high-performance e-commerce data processing.</p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="dark-card p-8 rounded-lg feature-card"> | |
| <div class="w-12 h-12 gold-bg rounded-lg flex items-center justify-center mb-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Role-Based Access</h3> | |
| <p class="text-gray-400">Customizable user permissions with granular control over data access and platform functionality.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Architecture Section --> | |
| <div id="architecture" class="bg-gray-900 py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-white mb-4">Scalable Cloud Architecture</h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto">Microservices design built for performance and reliability</p> | |
| </div> | |
| <div class="architecture-diagram rounded-xl p-8 mb-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Frontend --> | |
| <div class="text-center"> | |
| <div class="dark-card p-6 rounded-lg h-full"> | |
| <div class="w-16 h-16 gold-bg rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Frontend</h3> | |
| <ul class="text-gray-400 space-y-2 text-left"> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>React-based responsive UI</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Progressive Web App</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Dark/light theme support</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Backend --> | |
| <div class="text-center"> | |
| <div class="dark-card p-6 rounded-lg h-full"> | |
| <div class="w-16 h-16 gold-bg rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Backend Services</h3> | |
| <ul class="text-gray-400 space-y-2 text-left"> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Microservices architecture</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Kubernetes orchestration</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Auto-scaling capabilities</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Data --> | |
| <div class="text-center"> | |
| <div class="dark-card p-6 rounded-lg h-full"> | |
| <div class="w-16 h-16 gold-bg rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Data Pipeline</h3> | |
| <ul class="text-gray-400 space-y-2 text-left"> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Hybrid SQL/NoSQL database</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Real-time processing</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 gold-accent mr-2 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Intelligent caching</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="gold-bg text-gray-900 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition text-lg"> | |
| View Technical Documentation | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- API Section --> | |
| <div id="api" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-white mb-4">Developer API</h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto">RESTful API with comprehensive documentation and SDKs</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-6">API Features</h3> | |
| <ul class="space-y-6"> | |
| <li class="flex items-start"> | |
| <div class="gold-bg rounded-full p-2 mr-4 flex-shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-white mb-2">Secure API Gateway</h4> | |
| <p class="text-gray-400">OAuth 2.0 authentication with rate limiting and comprehensive access controls for all API endpoints.</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="gold-bg rounded-full p-2 mr-4 flex-shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-white mb-2">Webhook System</h4> | |
| <p class="text-gray-400">Real-time notifications for product changes, price updates, and inventory alerts delivered to your endpoints.</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="gold-bg rounded-full p-2 mr-4 flex-shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-white mb-2">SDK Support</h4> | |
| <p class="text-gray-400">Official SDKs available for JavaScript, Python, Java, and PHP with comprehensive documentation and examples.</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden"> | |
| <div class="bg-gray-900 px-4 py-3 flex items-center"> | |
| <div class="flex space-x-2 mr-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-sm text-gray-400">GET /api/v1/products/trending</div> | |
| </div> | |
| <div class="p-4"> | |
| <pre class="text-gray-300 text-sm overflow-x-auto"> | |
| <code> | |
| { | |
| "data": [ | |
| { | |
| "id": "prod_abc123", | |
| "name": "Smart Posture Corrector", | |
| "marketplace": "amazon", | |
| "current_price": 39.99, | |
| "original_price": 49.99, | |
| "rating": 4.7, | |
| "review_count": 1245, | |
| "trend_score": 87, | |
| "image_url": "https://example.com/image1.jpg", | |
| "product_url": "https://amazon.com/dp/abc123" | |
| }, | |
| { | |
| "id": "prod_def456", | |
| "name": "Magnetic Phone Car Mount", | |
| "marketplace": "shopify", | |
| "current_price": 24.95, | |
| "original_price": 29.99, | |
| "rating": 4.5, | |
| "review_count": 892, | |
| "trend_score": 65, | |
| "image_url": "https://example.com/image2.jpg", | |
| "product_url": "https://store.com/products/def456" | |
| } | |
| ], | |
| "meta": { | |
| "total_results": 143, | |
| "page": 1, | |
| "per_page": 20 | |
| } | |
| } | |
| </code> | |
| </pre> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-2 gap-4"> | |
| <div class="api-endpoint p-4 rounded-lg"> | |
| <div class="text-xs text-gray-400 mb-1">POST</div> | |
| <div class="text-white font-medium">/api/v1/webhooks</div> | |
| </div> | |
| <div class="api-endpoint p-4 rounded-lg"> | |
| <div class="text-xs text-gray-400 mb-1">GET</div> | |
| <div class="text-white font-medium">/api/v1/suppliers</div> | |
| </div> | |
| <div class="api-endpoint p-4 rounded-lg"> | |
| <div class="text-xs text-gray-400 mb-1">GET</div> | |
| <div class="text-white font-medium">/api/v1/marketplaces</div> | |
| </div> | |
| <div class="api-endpoint p-4 rounded-lg"> | |
| <div class="text-xs text-gray-400 mb-1">POST</div> | |
| <div class="text-white font-medium">/api/v1/visual-search</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Admin Section --> | |
| <div id="admin" class="bg-gray-900 py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-white mb-4">Admin Portal</h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto">Complete system management and configuration</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> | |
| <div class="dark-card p-8 rounded-lg"> | |
| <h3 class="text-2xl font-bold text-white mb-6">User Management</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-300">Role-Based Access Control</span> | |
| <span class="text-green-400 text-sm font-medium">Enabled</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-300">Custom Permission Sets</span> | |
| <span class="text-green-400 text-sm font-medium">Enabled</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-300">Multi-Factor Authentication</span> | |
| <span class="text-green-400 text-sm font-medium">Enabled</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dark-card p-8 rounded-lg"> | |
| <h3 class="text-2xl font-bold text-white mb-6">System Configuration</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-300">Data Retention Policy</span> | |
| <span class="text-blue-400 text-sm font-medium">90 days</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-300">API Rate Limiting</span> | |
| <span class="text-yellow-400 text-sm font-medium">1000 req/min</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-300">Backup Frequency</span> | |
| <span class="text-purple-400 text-sm font-medium">Daily</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dark-card p-8 rounded-lg"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Audit Logs</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-700"> | |
| <thead> | |
| <tr> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Timestamp</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">User</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Action</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">IP Address</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-700"> | |
| <tr class="hover:bg-gray-800"> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">2023-07-15 14:32:45</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-white">admin@example.com</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">User permissions updated</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">192.168.1.1</td> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300">Success</span> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-800"> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">2023-07-15 13:45:12</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-white">analyst@example.com</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">Data export initiated</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">203.0.113.42</td> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300">Success</span> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-800"> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">2023-07-15 11:23:56</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-white">dev@example.com</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">API key generated</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">198.51.100.3</td> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300">Success</span> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-800"> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">2023-07-15 09:12:34</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-white">guest@example.com</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">Unauthorized access attempt</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">172.16.0.12</td> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-300">Failed</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4 text-right"> | |
| <button class="text-sm gold-accent flex items-center ml-auto"> | |
| View All Logs | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Integrations Section --> | |
| <div id="integrations" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-white mb-4">Platform Integrations</h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto">Connect with your existing business tools and workflows</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12"> | |
| <div class="dark-card p-6 rounded-lg flex flex-col items-center"> | |
| <div class="w-16 h-16 bg-gray-700 rounded-full flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-lg font-bold text-white mb-2">Google Analytics</h3> | |
| <div class="relative inline-block w-12 mr-2 align-middle select-none"> | |
| <input type="checkbox" id="ga-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/> | |
| <label for="ga-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label> | |
| </div> | |
| </div> | |
| <div class="dark-card p-6 rounded-lg flex flex-col items-center"> | |
| <div class="w-16 h-16 bg-gray-700 rounded-full flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-lg font-bold text-white mb-2">Tableau</h3> | |
| <div class="relative inline-block w-12 mr-2 align-middle select-none"> | |
| <input type="checkbox" id="tableau-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/> | |
| <label for="tableau-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label> | |
| </div> | |
| </div> | |
| <div class="dark-card p-6 rounded-lg flex flex-col items-center"> | |
| <div class="w-16 h-16 bg-gray-700 rounded-full flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-lg font-bold text-white mb-2">QuickBooks</h3> | |
| <div class="relative inline-block w-12 mr-2 align-middle select-none"> | |
| <input type="checkbox" id="quickbooks-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/> | |
| <label for="quickbooks-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label> | |
| </div> | |
| </div> | |
| <div class="dark-card p-6 rounded-lg flex flex-col items-center"> | |
| <div class="w-16 h-16 bg-gray-700 rounded-full flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-lg font-bold text-white mb-2">Slack</h3> | |
| <div class="relative inline-block w-12 mr-2 align-middle select-none"> | |
| <input type="checkbox" id="slack-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/> | |
| <label for="slack-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <button class="gold-bg text-gray-900 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition text-lg"> | |
| Explore All Integrations | |
| </button> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="gradient-bg py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold text-white mb-6">Ready to Transform Your E-Commerce Strategy?</h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8">Join thousands of businesses using TrendMaster Pro to stay ahead of the competition with data-driven insights.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="gold-bg text-gray-900 px-8 py-4 rounded-lg font-medium hover:bg-opacity-90 transition text-lg"> | |
| Start Your Free Trial | |
| </button> | |
| <button class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg hover:bg-white hover:bg-opacity-10 transition text-lg"> | |
| Schedule a Demo | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 py-12 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 gold-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /> | |
| </svg> | |
| <span class="text-xl font-bold gold-accent">TrendMaster Pro</span> | |
| </div> | |
| <p class="text-gray-400 text-sm">The ultimate e-commerce intelligence platform for professionals who demand data-driven success.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">Platform</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">API</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Integrations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Case Studies</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Community</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Webinars</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Legal</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 TrendMaster Pro. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" /> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> | |
| <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" /> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Hero Chart | |
| var heroChartOptions = { | |
| series: [{ | |
| name: 'Amazon', | |
| data: [30, 40, 45, 50, 49, 60, 70, 91, 125, 150, 170, 200] | |
| }, { | |
| name: 'Shopify', | |
| data: [20, 25, 30, 35, 40, 45, 50, 60, 80, 100, 120, 140] | |
| }, { | |
| name: 'Alibaba', | |
| data: [10, 15, 20, 22, 25, 30, 35, 40, 45, 50, 60, 70] | |
| }], | |
| chart: { | |
| height: '100%', | |
| type: 'area', | |
| toolbar: { | |
| show: false | |
| }, | |
| zoom: { | |
| enabled: false | |
| }, | |
| foreColor: '#e2e8f0' | |
| }, | |
| colors: ['#3b82f6', '#8b5cf6', '#10b981'], | |
| dataLabels: { | |
| enabled: false | |
| }, | |
| stroke: { | |
| curve: 'smooth', | |
| width: 2 | |
| }, | |
| fill: { | |
| type: 'gradient', | |
| gradient: { | |
| shadeIntensity: 1, | |
| opacityFrom: 0.7, | |
| opacityTo: 0.3, | |
| stops: [0, 90, 100] | |
| } | |
| }, | |
| xaxis: { | |
| categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | |
| }, | |
| tooltip: { | |
| theme: 'dark' | |
| }, | |
| legend: { | |
| position: 'top', | |
| horizontalAlign: 'right' | |
| }, | |
| grid: { | |
| borderColor: 'rgba(255, 255, 255, 0.1)' | |
| } | |
| }; | |
| var heroChart = new ApexCharts(document.querySelector("#heroChart"), heroChartOptions); | |
| heroChart.render(); | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Close mobile menu when clicking outside | |
| document.addEventListener('click', function(event) { | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.contains(event.target) && !mobileMenuButton.contains(event.target)) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Toggle switches | |
| document.querySelectorAll('.toggle-checkbox').forEach(checkbox => { | |
| checkbox.addEventListener('change', function() { | |
| const label = this.nextElementSibling; | |
| if (this.checked) { | |
| label.classList.add('bg-gold-300'); | |
| } else { | |
| label.classList.remove('bg-gold-300'); | |
| } | |
| }); | |
| }); | |
| </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=Wasim0606/trendmaster-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |