Hugging Face's logo

Spaces:
Wasim0606
/
trendmasterpro
Running

App Files Community
trendmasterpro / index.html
Wasim0606's picture
Wasim0606
Add 2 files
f33fd53 verified
raw
history blame contribute delete
48.6 kB
 <!DOCTYPE html>
<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@300;400;500&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<style>
body {
font-family: 'Open Sans', sans-serif;
background-color: #0a1922;
color: #e2e8f0;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #1a5f7a 0%, #0a1922 100%);
}
.gold-accent {
color: #ffd700;
}
.gold-border {
border-color: #ffd700;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}
.nav-link:hover {
color: #ffd700;
}
.search-box {
background-color: rgba(26, 95, 122, 0.5);
backdrop-filter: blur(10px);
}
.heatmap-container {
min-height: 400px;
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.tooltip-custom {
position: relative;
}
.tooltip-custom:hover:after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #1a5f7a;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
z-index: 100;
}
</style>
</head>
<body class="min-h-screen">
<!-- Navigation -->
<nav class="bg-gray-900 bg-opacity-90 backdrop-filter backdrop-blur-lg sticky top-0 z-50 border-b border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<span class="text-xl font-bold gold-accent">TrendMaster</span>
<span class="text-xl font-bold text-white">Pro</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="nav-link text-white hover:text-gray-300 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
<a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Market Analysis</a>
<a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Supplier Network</a>
<a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Knowledge Hub</a>
<a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Community</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div class="ml-3 relative">
<div>
<button type="button" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</button>
</div>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="md:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Market Analysis</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Supplier Network</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Knowledge Hub</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Community</a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</div>
<div class="ml-3">
<div class="text-base font-medium text-white">Tom Cook</div>
<div class="text-sm font-medium text-gray-400">tom@example.com</div>
</div>
<button class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
</div>
<div class="mt-3 px-2 space-y-1">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a>
</div>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Welcome Section -->
<div class="mb-8">
<h1 class="text-3xl font-bold text-white">Welcome back, Tom</h1>
<p class="text-gray-400 mt-2">Here's what's happening in the e-commerce world today</p>
</div>
<!-- Search Bar -->
<div class="mb-8 search-box rounded-lg p-4 shadow-lg">
<div class="flex items-center">
<div class="relative flex-grow">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
<input id="search" name="search" class="block w-full pl-10 pr-3 py-3 border border-transparent bg-gray-800 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent sm:text-sm rounded-md" placeholder="Search for products, trends, or ask a question..." type="search">
</div>
<button class="ml-4 inline-flex items-center px-4 py-3 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
Search
</button>
</div>
<div class="mt-2 text-xs text-gray-400">
Try: "Show me kitchen gadgets under $50 gaining popularity in European markets with 4+ star ratings"
</div>
</div>
<!-- Stats Cards -->
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
<div class="bg-gray-800 overflow-hidden shadow rounded-lg card-hover transition duration-300 ease-in-out">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-900 rounded-md p-3">
<svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" 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>
</div>
<div class="ml-5 w-0 flex-1">
<dt class="text-sm font-medium text-gray-300 truncate">
Emerging Trends
</dt>
<dd class="flex items-baseline">
<div class="text-2xl font-semibold text-white">
24
</div>
<div class="ml-2 flex items-baseline text-sm font-semibold text-green-400">
<svg class="self-center flex-shrink-0 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0v-7.586l-2.293 2.293a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<span class="sr-only">
Increased by
</span>
12%
</div>
</dd>
</div>
</div>
</div>
</div>
<div class="bg-gray-800 overflow-hidden shadow rounded-lg card-hover transition duration-300 ease-in-out">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-900 rounded-md p-3">
<svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" 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>
<div class="ml-5 w-0 flex-1">
<dt class="text-sm font-medium text-gray-300 truncate">
Market Opportunities
</dt>
<dd class="flex items-baseline">
<div class="text-2xl font-semibold text-white">
18
</div>
<div class="ml-2 flex items-baseline text-sm font-semibold text-green-400">
<svg class="self-center flex-shrink-0 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0v-7.586l-2.293 2.293a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<span class="sr-only">
Increased by
</span>
8%
</div>
</dd>
</div>
</div>
</div>
</div>
<div class="bg-gray-800 overflow-hidden shadow rounded-lg card-hover transition duration-300 ease-in-out">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-900 rounded-md p-3">
<svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" 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>
<div class="ml-5 w-0 flex-1">
<dt class="text-sm font-medium text-gray-300 truncate">
Avg. Profit Margin
</dt>
<dd class="flex items-baseline">
<div class="text-2xl font-semibold text-white">
42%
</div>
<div class="ml-2 flex items-baseline text-sm font-semibold text-red-400">
<svg class="self-center flex-shrink-0 h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="sr-only">
Decreased by
</span>
3%
</div>
</dd>
</div>
</div>
</div>
</div>
<div class="bg-gray-800 overflow-hidden shadow rounded-lg card-hover transition duration-300 ease-in-out">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-900 rounded-md p-3">
<svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
</div>
<div class="ml-5 w-0 flex-1">
<dt class="text-sm font-medium text-gray-300 truncate">
Products Tracked
</dt>
<dd class="flex items-baseline">
<div class="text-2xl font-semibold text-white">
5,231
</div>
<div class="ml-2 flex items-baseline text-sm font-semibold text-green-400">
<svg class="self-center flex-shrink-0 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0v-7.586l-2.293 2.293a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<span class="sr-only">
Increased by
</span>
24%
</div>
</dd>
</div>
</div>
</div>
</div>
</div>
<!-- Main Dashboard Content -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Column -->
<div class="lg:col-span-2 space-y-8">
<!-- Trend Analysis Chart -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6 card-hover transition duration-300 ease-in-out">
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-medium text-white">Product Trend Analysis</h2>
<div class="relative">
<select class="appearance-none bg-gray-700 border border-gray-600 text-white pl-3 pr-8 py-2 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>Last 7 days</option>
<option>Last 30 days</option>
<option selected>Last 90 days</option>
<option>Last year</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
</div>
</div>
</div>
<div class="h-80">
<canvas id="trendChart"></canvas>
</div>
</div>
<!-- Market Heatmap -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6 card-hover transition duration-300 ease-in-out">
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-medium text-white">Geographic Demand Heatmap</h2>
<div class="flex space-x-2">
<button class="bg-blue-600 text-white px-3 py-1 rounded-md text-sm">USA</button>
<button class="bg-gray-700 text-gray-300 px-3 py-1 rounded-md text-sm">Europe</button>
<button class="bg-gray-700 text-gray-300 px-3 py-1 rounded-md text-sm">Asia</button>
</div>
</div>
<div class="heatmap-container h-80">
<div id="heatmap"></div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="space-y-8">
<!-- Emerging Trends -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6 card-hover transition duration-300 ease-in-out">
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-medium text-white">Emerging Trends</h2>
<button class="text-blue-400 hover:text-blue-300 text-sm">View All</button>
</div>
<div class="space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-900 flex items-center justify-center">
<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" 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>
</div>
<div class="ml-4">
<h3 class="text-sm font-medium text-white">Smart Kitchen Gadgets</h3>
<p class="text-xs text-gray-400 mt-1">+45% growth in last 30 days</p>
<div class="mt-1 flex items-center">
<span class="text-xs text-gray-400">Amazon, Shopify</span>
<span class="mx-1 text-gray-500">•</span>
<span class="text-xs text-gray-400">$25-$75 range</span>
</div>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-900 flex items-center justify-center">
<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" 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>
</div>
<div class="ml-4">
<h3 class="text-sm font-medium text-white">Eco-Friendly Pet Products</h3>
<p class="text-xs text-gray-400 mt-1">+32% growth in last 30 days</p>
<div class="mt-1 flex items-center">
<span class="text-xs text-gray-400">Amazon, Etsy</span>
<span class="mx-1 text-gray-500">•</span>
<span class="text-xs text-gray-400">$15-$50 range</span>
</div>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-900 flex items-center justify-center">
<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" 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>
</div>
<div class="ml-4">
<h3 class="text-sm font-medium text-white">Home Workout Equipment</h3>
<p class="text-xs text-gray-400 mt-1">+28% growth in last 30 days</p>
<div class="mt-1 flex items-center">
<span class="text-xs text-gray-400">Amazon, Walmart</span>
<span class="mx-1 text-gray-500">•</span>
<span class="text-xs text-gray-400">$30-$100 range</span>
</div>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-900 flex items-center justify-center">
<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" 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>
</div>
<div class="ml-4">
<h3 class="text-sm font-medium text-white">Sustainable Fashion</h3>
<p class="text-xs text-gray-400 mt-1">+21% growth in last 30 days</p>
<div class="mt-1 flex items-center">
<span class="text-xs text-gray-400">Shopify, Etsy</span>
<span class="mx-1 text-gray-500">•</span>
<span class="text-xs text-gray-400">$20-$80 range</span>
</div>
</div>
</div>
</div>
</div>
<!-- Supplier Recommendations -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6 card-hover transition duration-300 ease-in-out">
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-medium text-white">Supplier Recommendations</h2>
<button class="text-blue-400 hover:text-blue-300 text-sm">View All</button>
</div>
<div class="space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-900 flex items-center justify-center">
<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
</div>
<div class="ml-4">
<h3 class="text-sm font-medium text-white">TechGadget Suppliers</h3>
<p class="text-xs text-gray-400 mt-1">Reliability: 94% • MOQ: 100 units</p>
<div class="mt-1 flex items-center">
<span class="text-xs text-gray-400">Shenzhen, China</span>
<span class="mx-1 text-gray-500">•</span>
<span class="text-xs text-gray-400">4.8★ (128 reviews)</span>
</div>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-900 flex items-center justify-center">
<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
</div>
<div class="ml-4">
<h3 class="text-sm font-medium text-white">EcoHome Manufacturers</h3>
<p class="text-xs text-gray-400 mt-1">Reliability: 91% • MOQ: 50 units</p>
<div class="mt-1 flex items-center">
<span class="text-xs text-gray-400">Guangzhou, China</span>
<span class="mx-1 text-gray-500">•</span>
<span class="text-xs text-gray-400">4.7★ (95 reviews)</span>
</div>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-900 flex items-center justify-center">
<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
</div>
<div class="ml-4">
<h3 class="text-sm font-medium text-white">FitnessGear Co.</h3>
<p class="text-xs text-gray-400 mt-1">Reliability: 89% • MOQ: 200 units</p>
<div class="mt-1 flex items-center">
<span class="text-xs text-gray-400">Dongguan, China</span>
<span class="mx-1 text-gray-500">•</span>
<span class="text-xs text-gray-400">4.6★ (142 reviews)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Recent Alerts -->
<div class="mt-8 bg-gray-800 rounded-lg shadow-lg p-6 card-hover transition duration-300 ease-in-out">
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-medium text-white">Recent Alerts</h2>
<button class="text-blue-400 hover:text-blue-300 text-sm">View All</button>
</div>
<div class="space-y-4">
<div class="flex items-start p-3 rounded-md bg-gray-700">
<div class="flex-shrink-0 pt-1">
<div class="h-2 w-2 rounded-full bg-red-400"></div>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-white">Price drop detected: Smart Water Bottles category</p>
<p class="text-xs text-gray-400 mt-1">Average price decreased by 15% in last 7 days. Check competitor pricing strategies.</p>
</div>
</div>
<div class="flex items-start p-3 rounded-md bg-gray-700">
<div class="flex-shrink-0 pt-1">
<div class="h-2 w-2 rounded-full bg-yellow-400"></div>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-white">New competitor entered: Wireless Earbuds market</p>
<p class="text-xs text-gray-400 mt-1">"SoundPeak" launched with aggressive pricing. Monitor their performance.</p>
</div>
</div>
<div class="flex items-start p-3 rounded-md bg-gray-700">
<div class="flex-shrink-0 pt-1">
<div class="h-2 w-2 rounded-full bg-blue-400"></div>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-white">Seasonal trend alert: Outdoor gear demand rising</p>
<p class="text-xs text-gray-400 mt-1">Historical data shows 40% increase in sales for this category in Q2.</p>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-900 mt-12">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3>
<ul class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">API</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">Integrations</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>
<ul class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">Webinars</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
<ul class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">Partners</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
<ul class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li>
<li><a href="#" class="text-base text-gray-300 hover:text-white">GDPR</a></li>
</ul>
</div>
</div>
<div class="mt-8 border-t border-gray-800 pt-8 md:flex md:items-center md:justify-between">
<div class="flex space-x-6 md:order-2">
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Facebook</span>
<svg class="h-6 w-6" 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-gray-300">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" 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-gray-300">
<span class="sr-only">LinkedIn</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
&copy; 2023 TrendMaster Pro. All rights reserved.
</p>
</div>
</div>
</footer>
<script>
// Initialize Trend Chart
const trendCtx = document.getElementById('trendChart').getContext('2d');
const trendChart = new Chart(trendCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'Smart Kitchen Gadgets',
data: [12, 19, 15, 27, 33, 42, 48, 51, 45, 60, 75, 92],
borderColor: '#ffd700',
backgroundColor: 'rgba(255, 215, 0, 0.1)',
tension: 0.3,
fill: true
},
{
label: 'Eco-Friendly Pet Products',
data: [8, 12, 18, 22, 28, 35, 40, 38, 45, 52, 60, 75],
borderColor: '#1a5f7a',
backgroundColor: 'rgba(26, 95, 122, 0.1)',
tension: 0.3,
fill: true
},
{
label: 'Home Workout Equipment',
data: [20, 25, 22, 30, 35, 40, 38, 42, 50, 55, 60, 68],
borderColor: '#4fd1c5',
backgroundColor: 'rgba(79, 209, 197, 0.1)',
tension: 0.3,
fill: true
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: '#e2e8f0',
font: {
family: 'Open Sans'
}
}
},
tooltip: {
mode: 'index',
intersect: false,
backgroundColor: 'rgba(26, 95, 122, 0.9)',
titleColor: '#ffffff',
bodyColor: '#e2e8f0',
borderColor: '#ffd700',
borderWidth: 1
}
},
scales: {
x: {
grid: {
color: 'rgba(226, 232, 240, 0.1)'
},
ticks: {
color: '#e2e8f0'
}
},
y: {
grid: {
color: 'rgba(226, 232, 240, 0.1)'
},
ticks: {
color: '#e2e8f0'
}
}
},
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
}
}
});
// Initialize Heatmap
document.addEventListener('DOMContentLoaded', function() {
const heatmapOptions = {
series: [{
name: 'Demand Intensity',
data: [
{x: 'California', y: 98},
{x: 'Texas', y: 75},
{x: 'New York', y: 89},
{x: 'Florida', y: 82},
{x: 'Illinois', y: 65},
{x: 'Pennsylvania', y: 58},
{x: 'Ohio', y: 45},
{x: 'Georgia', y: 72},
{x: 'North Carolina', y: 55},
{x: 'Michigan', y: 48}
]
}],
chart: {
type: 'heatmap',
height: 350,
toolbar: {
show: false
},
foreColor: '#e2e8f0'
},
dataLabels: {
enabled: false
},
colors: ["#1a5f7a", "#ffd700"],
xaxis: {
type: 'category',
labels: {
style: {
colors: '#e2e8f0'
}
}
},
yaxis: {
labels: {
style: {
colors: '#e2e8f0'
}
}
},
plotOptions: {
heatmap: {
colorScale: {
ranges: [{
from: 0,
to: 50,
color: '#1a5f7a',
name: 'low',
},
{
from: 51,
to: 80,
color: '#1e88a1',
name: 'medium',
},
{
from: 81,
to: 100,
color: '#ffd700',
name: 'high',
}]
}
}
}
};
const heatmap = new ApexCharts(document.querySelector("#heatmap"), heatmapOptions);
heatmap.render();
});
// Mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', function() {
const expanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !expanded);
mobileMenu.classList.toggle('hidden');
// Toggle between menu and close icon
const menuIcon = this.querySelector('.block');
const closeIcon = this.querySelector('.hidden');
menuIcon.classList.toggle('hidden');
closeIcon.classList.toggle('hidden');
});
});
// Fade in animation for elements
document.addEventListener('DOMContentLoaded', function() {
const elements = document.querySelectorAll('.fade-in');
elements.forEach((el, index) => {
setTimeout(() => {
el.style.opacity = '1';
}, index * 200);
});
});
</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/trendmasterpro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>