Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChartVista - Beautiful Data Visualization</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <style> | |
| .chart-container { | |
| backdrop-filter: blur(8px); | |
| background-color: rgba(255, 255, 255, 0.15); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| transition: all 0.3s ease; | |
| } | |
| .chart-container:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .gradient-heading { | |
| background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> | |
| <div class="relative z-10"> | |
| <!-- Header --> | |
| <header class="py-8 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="bar-chart-2" class="text-indigo-500 w-8 h-8"></i> | |
| <h1 class="text-3xl font-bold text-gray-900 gradient-heading">ChartVista</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-gray-900 hover:text-indigo-600 font-medium">Home</a> | |
| <a href="#" class="text-gray-900 hover:text-indigo-600 font-medium">Features</a> | |
| <a href="#" class="text-gray-900 hover:text-indigo-600 font-medium">Gallery</a> | |
| <a href="#" class="text-gray-900 hover:text-indigo-600 font-medium">About</a> | |
| </nav> | |
| <button class="md:hidden text-gray-900"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8 text-center"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">Transform Data Into <span class="gradient-heading">Beautiful Stories</span></h1> | |
| <p class="text-xl text-gray-700 mb-10">Create stunning, interactive charts that captivate your audience and make your data shine.</p> | |
| <div class="flex justify-center space-x-4"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-full font-medium transition-all shadow-lg hover:shadow-xl"> | |
| Get Started | |
| </button> | |
| <button class="border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-full font-medium transition-all"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Chart Showcase --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Chart <span class="gradient-heading">Showcase</span></h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Line Chart --> | |
| <div class="chart-container"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Sales Trend</h3> | |
| <canvas id="lineChart" height="250"></canvas> | |
| </div> | |
| <!-- Bar Chart --> | |
| <div class="chart-container"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Revenue by Product</h3> | |
| <canvas id="barChart" height="250"></canvas> | |
| </div> | |
| <!-- Pie Chart --> | |
| <div class="chart-container"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Market Share</h3> | |
| <canvas id="pieChart" height="250"></canvas> | |
| </div> | |
| <!-- Doughnut Chart --> | |
| <div class="chart-container"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Budget Allocation</h3> | |
| <canvas id="doughnutChart" height="250"></canvas> | |
| </div> | |
| <!-- Radar Chart --> | |
| <div class="chart-container"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Skill Assessment</h3> | |
| <canvas id="radarChart" height="250"></canvas> | |
| </div> | |
| <!-- Polar Area Chart --> | |
| <div class="chart-container"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">User Preferences</h3> | |
| <canvas id="polarChart" height="250"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white bg-opacity-80 backdrop-blur-md"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Why Choose <span class="gradient-heading">ChartVista</span></h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all"> | |
| <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="eye" class="text-indigo-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Visual Appeal</h3> | |
| <p class="text-gray-600">Stunning, customizable designs that make your data pop and engage your audience.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all"> | |
| <div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="cpu" class="text-pink-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Interactive</h3> | |
| <p class="text-gray-600">Hover effects, animations, and click interactions to explore your data in depth.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="smartphone" class="text-blue-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Responsive</h3> | |
| <p class="text-gray-600">Perfectly scales across all devices from desktop to mobile without losing clarity.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-4 sm:px-6 lg:px-8 bg-gray-900 text-white"> | |
| <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"> | |
| <i data-feather="bar-chart-2" class="text-indigo-400"></i> | |
| <span class="text-xl font-bold">ChartVista</span> | |
| </div> | |
| <p class="text-gray-400">Making data beautiful since 2023.</p> | |
| </div> | |
| <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">Examples</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">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500"> | |
| <p>© 2023 ChartVista. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.WAVES({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| shininess: 50.00, | |
| waveHeight: 20.00, | |
| waveSpeed: 0.50, | |
| zoom: 0.65 | |
| }); | |
| // Initialize Charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| // Line Chart | |
| const lineCtx = document.getElementById('lineChart').getContext('2d'); | |
| new Chart(lineCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], | |
| datasets: [{ | |
| label: 'Sales', | |
| data: [65, 59, 80, 81, 56, 72], | |
| borderColor: '#3b82f6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| tension: 0.3, | |
| fill: true, | |
| borderWidth: 2 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| } | |
| } | |
| }); | |
| // Bar Chart | |
| const barCtx = document.getElementById('barChart').getContext('2d'); | |
| new Chart(barCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Product A', 'Product B', 'Product C', 'Product D', 'Product E'], | |
| datasets: [{ | |
| label: 'Revenue', | |
| data: [12000, 19000, 3000, 5000, 2000], | |
| backgroundColor: [ | |
| 'rgba(99, 102, 241, 0.7)', | |
| 'rgba(168, 85, 247, 0.7)', | |
| 'rgba(236, 72, 153, 0.7)', | |
| 'rgba(249, 115, 22, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(99, 102, 241, 1)', | |
| 'rgba(168, 85, 247, 1)', | |
| 'rgba(236, 72, 153, 1)', | |
| 'rgba(249, 115, 22, 1)', | |
| 'rgba(16, 185, 129, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| } | |
| } | |
| }); | |
| // Pie Chart | |
| const pieCtx = document.getElementById('pieChart').getContext('2d'); | |
| new Chart(pieCtx, { | |
| type: 'pie', | |
| data: { | |
| labels: ['Apple', 'Samsung', 'Google', 'Huawei', 'Other'], | |
| datasets: [{ | |
| data: [40, 25, 15, 10, 10], | |
| backgroundColor: [ | |
| 'rgba(59, 130, 246, 0.7)', | |
| 'rgba(139, 92, 246, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(245, 158, 11, 0.7)', | |
| 'rgba(239, 68, 68, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(59, 130, 246, 1)', | |
| 'rgba(139, 92, 246, 1)', | |
| 'rgba(16, 185, 129, 1)', | |
| 'rgba(245, 158, 11, 1)', | |
| 'rgba(239, 68, 68, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right' | |
| } | |
| } | |
| } | |
| }); | |
| // Doughnut Chart | |
| const doughnutCtx = document.getElementById('doughnutChart').getContext('2d'); | |
| new Chart(doughnutCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Marketing', 'Product', 'R&D', 'HR', 'Operations'], | |
| datasets: [{ | |
| data: [30, 25, 20, 15, 10], | |
| backgroundColor: [ | |
| 'rgba(59, 130, 246, 0.7)', | |
| 'rgba(139, 92, 246, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(245, 158, 11, 0.7)', | |
| 'rgba(239, 68, 68, 0.7)' | |
| ], | |
| borderColor: '#ffffff', | |
| borderWidth: 2 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| cutout: '70%', | |
| plugins: { | |
| legend: { | |
| position: 'right' | |
| } | |
| } | |
| } | |
| }); | |
| // Radar Chart | |
| const radarCtx = document.getElementById('radarChart').getContext('2d'); | |
| new Chart(radarCtx, { | |
| type: 'radar', | |
| data: { | |
| labels: ['Design', 'Development', 'Marketing', 'Sales', 'Support', 'Strategy'], | |
| datasets: [{ | |
| label: 'Employee A', | |
| data: [65, 59, 90, 81, 56, 55], | |
| backgroundColor: 'rgba(59, 130, 246, 0.2)', | |
| borderColor: 'rgba(59, 130, 246, 1)', | |
| pointBackgroundColor: 'rgba(59, 130, 246, 1)', | |
| pointBorderColor: '#fff', | |
| pointHoverBackgroundColor: '#fff', | |
| pointHoverBorderColor: 'rgba(59, 130, 246, 1)' | |
| }, { | |
| label: 'Employee B', | |
| data: [28, 48, 40, 19, 96, 27], | |
| backgroundColor: 'rgba(236, 72, 153, 0.2)', | |
| borderColor: 'rgba(236, 72, 153, 1)', | |
| pointBackgroundColor: 'rgba(236, 72, 153, 1)', | |
| pointBorderColor: '#fff', | |
| pointHoverBackgroundColor: '#fff', | |
| pointHoverBorderColor: 'rgba(236, 72, 153, 1)' | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false | |
| } | |
| }); | |
| // Polar Area Chart | |
| const polarCtx = document.getElementById('polarChart').getContext('2d'); | |
| new Chart(polarCtx, { | |
| type: 'polarArea', | |
| data: { | |
| labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'], | |
| datasets: [{ | |
| data: [11, 16, 7, 3, 14], | |
| backgroundColor: [ | |
| 'rgba(239, 68, 68, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(245, 158, 11, 0.7)', | |
| 'rgba(156, 163, 175, 0.7)', | |
| 'rgba(59, 130, 246, 0.7)' | |
| ], | |
| borderColor: '#ffffff', | |
| borderWidth: 2 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |