Hugging Face's logo

Spaces:
aimevzulari
/
b-nmbv
Running

App Files Community
b-nmbv / index.html
aimevzulari's picture
aimevzulari
A professional landing page for a data analytics platform that centralizes and visualizes statistical records. The layout features multiple interactive widgets displaying bar charts, pie charts, and time series graphs with real-time data transitions. A dark-themed interface with crisp typography and gradient outlines gives it a sleek, enterprise-grade look. Sections include “Data Sources”, “Custom Reports”, “Security & Compliance”, and “API Access”. Hero section shows a central animated dashboard zooming into insights. Floating metrics like “+12% Engagement” and “Real-time Sync” enhance the sense of intelligence. - Follow Up Deployment
713d96a verified
raw
history blame contribute delete
42.8 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InsightFlow | Enterprise Data Analytics</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-border {
position: relative;
border-radius: 0.5rem;
}
.gradient-border::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899);
border-radius: 0.6rem;
z-index: -1;
opacity: 0.7;
}
.dashboard-animation {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
.metric-badge {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 0.8; }
50% { opacity: 1; }
100% { opacity: 0.8; }
}
.chart-container {
transition: all 0.3s ease;
}
.chart-container:hover {
transform: scale(1.02);
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 font-sans">
<!-- Navigation -->
<nav class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
<i class="fas fa-chart-line text-white"></i>
</div>
<span class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">InsightFlow</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#features" class="hover:text-blue-400 transition">Features</a>
<a href="#solutions" class="hover:text-blue-400 transition">Solutions</a>
<a href="#pricing" class="hover:text-blue-400 transition">Pricing</a>
<a href="#resources" class="hover:text-blue-400 transition">Resources</a>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="px-4 py-2 rounded-md hover:bg-gray-800 transition">Sign In</a>
<a href="#" class="px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 rounded-md hover:opacity-90 transition">Get Started</a>
</div>
<button class="md:hidden text-gray-300">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="container mx-auto px-6 py-16 md:py-24">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-12 md:mb-0">
<div class="flex items-center space-x-2 mb-4">
<span class="px-3 py-1 bg-gray-800 rounded-full text-sm">NEW</span>
<span class="text-sm text-gray-400">Real-time AI analytics</span>
</div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
Transform Data Into <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Actionable Insights</span>
</h1>
<p class="text-lg text-gray-400 mb-8 max-w-lg">
The most powerful analytics platform that helps you uncover hidden patterns, predict trends, and make data-driven decisions with confidence.
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<a href="#" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 rounded-md text-center hover:opacity-90 transition">Start Free Trial</a>
<a href="#" class="px-6 py-3 bg-gray-800 rounded-md text-center hover:bg-gray-700 transition">Request Demo</a>
</div>
<div class="mt-8 flex flex-wrap gap-4">
<div class="flex items-center space-x-2 bg-gray-800 px-3 py-2 rounded-lg metric-badge">
<i class="fas fa-bolt text-yellow-400"></i>
<span class="text-sm">Real-time Sync</span>
</div>
<div class="flex items-center space-x-2 bg-gray-800 px-3 py-2 rounded-lg metric-badge">
<i class="fas fa-arrow-up text-green-400"></i>
<span class="text-sm">+12% Engagement</span>
</div>
<div class="flex items-center space-x-2 bg-gray-800 px-3 py-2 rounded-lg metric-badge">
<i class="fas fa-shield-alt text-blue-400"></i>
<span class="text-sm">Enterprise Security</span>
</div>
</div>
</div>
<div class="md:w-1/2 relative">
<div class="gradient-border dashboard-animation">
<div class="bg-gray-800 rounded-lg p-4">
<div class="flex justify-between items-center mb-4">
<h3 class="font-medium">Sales Dashboard</h3>
<div class="flex space-x-2">
<select class="bg-gray-700 text-sm rounded px-2 py-1">
<option>Last 7 Days</option>
<option>Last 30 Days</option>
<option>Last Quarter</option>
</select>
<button class="bg-gray-700 p-1 rounded">
<i class="fas fa-ellipsis-h text-sm"></i>
</button>
</div>
</div>
<div class="grid grid-cols-3 gap-2 mb-4">
<div class="bg-gray-700 p-2 rounded">
<p class="text-xs text-gray-400">Revenue</p>
<p class="font-bold">$124,560</p>
<p class="text-xs text-green-400">+8.2%</p>
</div>
<div class="bg-gray-700 p-2 rounded">
<p class="text-xs text-gray-400">Customers</p>
<p class="font-bold">3,452</p>
<p class="text-xs text-green-400">+12.7%</p>
</div>
<div class="bg-gray-700 p-2 rounded">
<p class="text-xs text-gray-400">Conversion</p>
<p class="font-bold">4.8%</p>
<p class="text-xs text-red-400">-1.2%</p>
</div>
</div>
<div class="h-48 mb-4">
<canvas id="heroChart"></canvas>
</div>
<div class="flex justify-between">
<div class="w-1/3 h-24">
<canvas id="heroPieChart"></canvas>
</div>
<div class="w-2/3 h-24">
<canvas id="heroBarChart"></canvas>
</div>
</div>
</div>
</div>
<div class="absolute -bottom-6 -left-6 w-32 h-32 bg-purple-600 rounded-full filter blur-3xl opacity-20"></div>
<div class="absolute -top-6 -right-6 w-32 h-32 bg-blue-600 rounded-full filter blur-3xl opacity-20"></div>
</div>
</div>
</section>
<!-- Trusted By -->
<section class="bg-gray-800 py-8">
<div class="container mx-auto px-6">
<p class="text-center text-gray-400 mb-6">TRUSTED BY INNOVATIVE TEAMS WORLDWIDE</p>
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-80">
<i class="fab fa-google text-3xl text-gray-300"></i>
<i class="fab fa-microsoft text-3xl text-gray-300"></i>
<i class="fab fa-spotify text-3xl text-gray-300"></i>
<i class="fab fa-slack text-3xl text-gray-300"></i>
<i class="fab fa-airbnb text-3xl text-gray-300"></i>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="container mx-auto px-6 py-16 md:py-24">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful Features for <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Data-Driven Decisions</span></h2>
<p class="text-gray-400 max-w-2xl mx-auto">Unlock the full potential of your data with our comprehensive suite of analytics tools designed for modern businesses.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Data Sources -->
<div class="gradient-border">
<div class="bg-gray-800 rounded-lg p-6 h-full">
<div class="w-12 h-12 bg-blue-900 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-database text-blue-400 text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Data Sources</h3>
<p class="text-gray-400 mb-4">Connect to 100+ data sources including databases, APIs, and cloud services with seamless integration.</p>
<ul class="space-y-2 text-gray-400 text-sm">
<li class="flex items-center">
<i class="fas fa-check-circle text-green-400 mr-2"></i>
SQL & NoSQL databases
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-green-400 mr-2"></i>
Cloud storage integration
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-green-400 mr-2"></i>
Custom API connectors
</li>
</ul>
</div>
</div>
<!-- Custom Reports -->
<div class="gradient-border">
<div class="bg-gray-800 rounded-lg p-6 h-full">
<div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-chart-pie text-purple-400 text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Custom Reports</h3>
<p class="text-gray-400 mb-4">Create beautiful, interactive reports tailored to your specific business needs with drag-and-drop simplicity.</p>
<div class="chart-container h-32 mt-4">
<canvas id="featurePieChart"></canvas>
</div>
</div>
</div>
<!-- Security & Compliance -->
<div class="gradient-border">
<div class="bg-gray-800 rounded-lg p-6 h-full">
<div class="w-12 h-12 bg-green-900 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-shield-alt text-green-400 text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Security & Compliance</h3>
<p class="text-gray-400 mb-4">Enterprise-grade security with SOC 2, GDPR, and HIPAA compliance to protect your most sensitive data.</p>
<div class="flex flex-wrap gap-2 mt-4">
<span class="px-2 py-1 bg-gray-700 rounded text-xs">SOC 2</span>
<span class="px-2 py-1 bg-gray-700 rounded text-xs">GDPR</span>
<span class="px-2 py-1 bg-gray-700 rounded text-xs">HIPAA</span>
<span class="px-2 py-1 bg-gray-700 rounded text-xs">ISO 27001</span>
</div>
</div>
</div>
<!-- API Access -->
<div class="gradient-border">
<div class="bg-gray-800 rounded-lg p-6 h-full">
<div class="w-12 h-12 bg-indigo-900 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-code text-indigo-400 text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">API Access</h3>
<p class="text-gray-400 mb-4">Full REST API access to integrate analytics into your existing workflows and applications.</p>
<div class="bg-gray-700 p-3 rounded-md font-mono text-sm overflow-x-auto mt-4">
<code class="text-gray-300">
GET /api/v1/metrics<br>
Authorization: Bearer {api_key}<br>
{ "metric": "revenue", "period": "Q1" }
</code>
</div>
</div>
</div>
</div>
</section>
<!-- Interactive Dashboard Section -->
<section class="bg-gray-800 py-16 md:py-24">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Interactive <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Dashboards</span> That Tell a Story</h2>
<p class="text-gray-400 mb-6">Our intuitive dashboard designer lets you create beautiful, interactive visualizations that bring your data to life. Drill down into details, compare time periods, and share insights with your team.</p>
<ul class="space-y-4 mb-8">
<li class="flex items-start">
<div class="bg-blue-600 p-1 rounded-full mr-3 mt-1">
<i class="fas fa-check text-xs"></i>
</div>
<div>
<h4 class="font-medium">Drag-and-drop interface</h4>
<p class="text-gray-400 text-sm">No coding required to build professional dashboards</p>
</div>
</li>
<li class="flex items-start">
<div class="bg-purple-600 p-1 rounded-full mr-3 mt-1">
<i class="fas fa-check text-xs"></i>
</div>
<div>
<h4 class="font-medium">Real-time collaboration</h4>
<p class="text-gray-400 text-sm">Work together with your team on the same dashboard</p>
</div>
</li>
<li class="flex items-start">
<div class="bg-pink-600 p-1 rounded-full mr-3 mt-1">
<i class="fas fa-check text-xs"></i>
</div>
<div>
<h4 class="font-medium">AI-powered insights</h4>
<p class="text-gray-400 text-sm">Get automatic anomaly detection and trend predictions</p>
</div>
</li>
</ul>
<a href="#" class="inline-block px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 rounded-md hover:opacity-90 transition">Explore Dashboard Features</a>
</div>
<div class="md:w-1/2 relative">
<div class="gradient-border">
<div class="bg-gray-700 rounded-lg p-4">
<div class="flex justify-between items-center mb-4">
<h3 class="font-medium">Marketing Performance</h3>
<div class="flex space-x-2">
<button class="bg-gray-600 p-1 rounded">
<i class="fas fa-sync-alt text-sm"></i>
</button>
<button class="bg-gray-600 p-1 rounded">
<i class="fas fa-ellipsis-h text-sm"></i>
</button>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div class="bg-gray-800 p-3 rounded">
<p class="text-xs text-gray-400">Impressions</p>
<p class="font-bold">1.2M</p>
<div class="h-20 mt-2">
<canvas id="dashboardLineChart1"></canvas>
</div>
</div>
<div class="bg-gray-800 p-3 rounded">
<p class="text-xs text-gray-400">Click Rate</p>
<p class="font-bold">3.4%</p>
<div class="h-20 mt-2">
<canvas id="dashboardLineChart2"></canvas>
</div>
</div>
</div>
<div class="h-48 mb-4">
<canvas id="dashboardMainChart"></canvas>
</div>
<div class="bg-gray-800 p-3 rounded">
<div class="flex justify-between items-center mb-2">
<p class="text-sm">Campaign Performance</p>
<p class="text-xs text-gray-400">Last 30 Days</p>
</div>
<div class="h-32">
<canvas id="dashboardBarChart"></canvas>
</div>
</div>
</div>
</div>
<div class="absolute -bottom-6 -right-6 w-32 h-32 bg-pink-600 rounded-full filter blur-3xl opacity-20"></div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="container mx-auto px-6 py-16 md:py-24">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Trusted by <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Data Teams</span> Worldwide</h2>
<p class="text-gray-400 max-w-2xl mx-auto">Join thousands of companies that rely on InsightFlow to power their data-driven decisions.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gray-800 rounded-lg p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mr-3">
<span class="font-bold">JD</span>
</div>
<div>
<h4 class="font-medium">Jane Doe</h4>
<p class="text-sm text-gray-400">Data Director, TechCorp</p>
</div>
</div>
<p class="text-gray-300 mb-4">"InsightFlow has transformed how we analyze customer behavior. The real-time dashboards have helped us reduce churn by 18% in just three months."</p>
<div class="flex">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
<div class="bg-gray-800 rounded-lg p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center mr-3">
<span class="font-bold">MS</span>
</div>
<div>
<h4 class="font-medium">Michael Smith</h4>
<p class="text-sm text-gray-400">CTO, AnalyticsPro</p>
</div>
</div>
<p class="text-gray-300 mb-4">"The API integration was seamless with our existing systems. Our data team can now focus on insights rather than data wrangling."</p>
<div class="flex">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star-half-alt text-yellow-400"></i>
</div>
</div>
<div class="bg-gray-800 rounded-lg p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-pink-600 flex items-center justify-center mr-3">
<span class="font-bold">AR</span>
</div>
<div>
<h4 class="font-medium">Amanda Rodriguez</h4>
<p class="text-sm text-gray-400">Head of BI, RetailGiant</p>
</div>
</div>
<p class="text-gray-300 mb-4">"From the security features to the beautiful visualizations, InsightFlow has exceeded our expectations at every level."</p>
<div class="flex">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="bg-gradient-to-r from-blue-900 to-purple-900 py-16 md:py-24">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Data Strategy?</h2>
<p class="text-xl text-blue-100 max-w-2xl mx-auto mb-8">Join thousands of businesses unlocking the power of their data with InsightFlow.</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<a href="#" class="px-8 py-3 bg-white text-blue-900 font-medium rounded-md hover:bg-gray-100 transition">Start Free Trial</a>
<a href="#" class="px-8 py-3 border border-white text-white rounded-md hover:bg-white hover:bg-opacity-10 transition">Contact Sales</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 mb-8">
<div>
<h4 class="text-lg font-semibold mb-4">Product</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Integrations</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Updates</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Legal</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Privacy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Terms</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Security</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Compliance</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Connect</h4>
<div class="flex space-x-4 mb-4">
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-700 transition">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition">
<i class="fab fa-github"></i>
</a>
</div>
<p class="text-gray-400 text-sm">Subscribe to our newsletter</p>
<div class="flex mt-2">
<input type="email" placeholder="Your email" class="bg-gray-800 px-3 py-2 rounded-l-md focus:outline-none focus:ring-1 focus:ring-blue-500 w-full">
<button class="bg-blue-600 px-4 py-2 rounded-r-md hover:bg-blue-700 transition">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-2 mb-4 md:mb-0">
<div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
<i class="fas fa-chart-line text-white"></i>
</div>
<span class="text-lg font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">InsightFlow</span>
</div>
<p class="text-gray-400 text-sm">© 2023 InsightFlow Analytics. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Hero Chart
const heroCtx = document.getElementById('heroChart').getContext('2d');
const heroChart = new Chart(heroCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Revenue',
data: [65000, 59000, 80000, 81000, 86000, 92500],
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
borderWidth: 2,
tension: 0.3,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: false,
grid: {
color: 'rgba(255, 255, 255, 0.05)'
},
ticks: {
color: 'rgba(255, 255, 255, 0.6)'
}
},
x: {
grid: {
display: false
},
ticks: {
color: 'rgba(255, 255, 255, 0.6)'
}
}
}
}
});
// Hero Pie Chart
const heroPieCtx = document.getElementById('heroPieChart').getContext('2d');
const heroPieChart = new Chart(heroPieCtx, {
type: 'doughnut',
data: {
labels: ['Direct', 'Organic', 'Referral', 'Social'],
datasets: [{
data: [35, 25, 20, 20],
backgroundColor: [
'#3b82f6',
'#8b5cf6',
'#ec4899',
'#10b981'
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
cutout: '70%'
}
});
// Hero Bar Chart
const heroBarCtx = document.getElementById('heroBarChart').getContext('2d');
const heroBarChart = new Chart(heroBarCtx, {
type: 'bar',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
datasets: [{
label: 'Sessions',
data: [1250, 1900, 1750, 2100, 1950],
backgroundColor: 'rgba(59, 130, 246, 0.7)',
borderRadius: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
display: false
},
ticks: {
display: false
}
},
x: {
grid: {
display: false
},
ticks: {
color: 'rgba(255, 255, 255, 0.6)'
}
}
}
}
});
// Feature Pie Chart
const featurePieCtx = document.getElementById('featurePieChart').getContext('2d');
const featurePieChart = new Chart(featurePieCtx, {
type: 'pie',
data: {
labels: ['Desktop', 'Mobile', 'Tablet'],
datasets: [{
data: [60, 30, 10],
backgroundColor: [
'#8b5cf6',
'#3b82f6',
'#ec4899'
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
labels: {
color: 'rgba(255, 255, 255, 0.8)',
font: {
size: 10
}
}
}
}
}
});
// Dashboard Line Chart 1
const dashboardLineCtx1 = document.getElementById('dashboardLineChart1').getContext('2d');
const dashboardLineChart1 = new Chart(dashboardLineCtx1, {
type: 'line',
data: {
labels: ['', '', '', '', '', ''],
datasets: [{
data: [5, 20, 15, 25, 30, 35],
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
borderWidth: 2,
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
display: false
},
x: {
display: false
}
}
}
});
// Dashboard Line Chart 2
const dashboardLineCtx2 = document.getElementById('dashboardLineChart2').getContext('2d');
const dashboardLineChart2 = new Chart(dashboardLineCtx2, {
type: 'line',
data: {
labels: ['', '', '', '', '', ''],
datasets: [{
data: [30, 25, 35, 20, 40, 30],
borderColor: '#8b5cf6',
backgroundColor: 'rgba(139, 92, 246, 0.1)',
borderWidth: 2,
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
display: false
},
x: {
display: false
}
}
}
});
// Dashboard Main Chart
const dashboardMainCtx = document.getElementById('dashboardMainChart').getContext('2d');
const dashboardMainChart = new Chart(dashboardMainCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [
{
label: 'Organic',
data: [5000, 7000, 6500, 8000, 8500, 9000, 9500],
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
borderWidth: 2,
tension: 0.3,
fill: true
},
{
label: 'Paid',
data: [3000, 4000, 4500, 5000, 6000, 7000, 8000],
borderColor: '#8b5cf6',
backgroundColor: 'rgba(139, 92, 246, 0.1)',
borderWidth: 2,
tension: 0.3,
fill: true
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: 'rgba(255, 255, 255, 0.8)'
}
}
},
scales: {
y: {
beginAtZero: false,
grid: {
color: 'rgba(255, 255, 255, 0.05)'
},
ticks: {
color: 'rgba(255, 255, 255, 0.6)'
}
},
x: {
grid: {
display: false
},
ticks: {
color: 'rgba(255, 255, 255, 0.6)'
}
}
}
}
});
// Dashboard Bar Chart
const dashboardBarCtx = document.getElementById('dashboardBarChart').getContext('2d');
const dashboardBarChart = new Chart(dashboardBarCtx, {
type: 'bar',
data: {
labels: ['Email', 'Social', 'Search', 'Direct'],
datasets: [{
label: 'Conversions',
data: [1200, 800, 1500, 900],
backgroundColor: [
'rgba(59, 130, 246, 0.7)',
'rgba(139, 92, 246, 0.7)',
'rgba(236, 72, 153, 0.7)',
'rgba(16, 185, 129, 0.7)'
],
borderRadius: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(255, 255, 255, 0.05)'
},
ticks: {
color: 'rgba(255, 255, 255, 0.6)'
}
},
x: {
grid: {
display: false
},
ticks: {
color: 'rgba(255, 255, 255, 0.6)'
}
}
}
}
});
// Animate metrics
function animateMetrics() {
const metrics = document.querySelectorAll('.metric-badge');
metrics.forEach((metric, index) => {
setTimeout(() => {
metric.style.animation = 'pulse 2s infinite';
}, index * 300);
});
}
// Initialize animations
document.addEventListener('DOMContentLoaded', () => {
animateMetrics();
// Simulate real-time data updates
setInterval(() => {
// Update hero chart
const newData = heroChart.data.datasets[0].data.map(value => {
const change = Math.floor(Math.random() * 2000) - 1000;
return Math.max(50000, value + change);
});
heroChart.data.datasets[0].data = newData;
heroChart.update();
// Update dashboard charts
const newMainData1 = dashboardMainChart.data.datasets[0].data.map(value => {
const change = Math.floor(Math.random() * 500) - 250;
return Math.max(4000, value + change);
});
const newMainData2 = dashboardMainChart.data.datasets[1].data.map(value => {
const change = Math.floor(Math.random() * 500) - 250;
return Math.max(2000, value + change);
});
dashboardMainChart.data.datasets[0].data = newMainData1;
dashboardMainChart.data.datasets[1].data = newMainData2;
dashboardMainChart.update();
// Update bar chart
const newBarData = dashboardBarChart.data.datasets[0].data.map(value => {
const change = Math.floor(Math.random() * 100) - 50;
return Math.max(500, value + change);
});
dashboardBarChart.data.datasets[0].data = newBarData;
dashboardBarChart.update();
}, 3000);
});
</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=aimevzulari/b-nmbv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>