ehagen18/excelwave-live-data-visualization-magic
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>ExcelViz - Transform Excel Data into Stunning Graphs</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>11 <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>12 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>13 <script src="https://cdn.sheetjs.com/xlsx-0.18.5/package/dist/xlsx.full.min.js"></script>14</head>15<body class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">16 <custom-navbar></custom-navbar>17 18 <main class="container mx-auto px-4 py-12">19 <section class="text-center mb-16">20 <h1 class="text-4xl md:text-6xl font-bold text-gray-800 mb-6">Transform Excel Data <span class="text-indigo-600">into Visual Stories</span></h1>21 <p class="text-xl text-gray-600 max-w-3xl mx-auto">Upload your Excel files and instantly create beautiful, interactive charts with just a few clicks.</p>22 </section>23 24 <section class="bg-white rounded-xl shadow-xl p-6 mb-16">25 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">26 <div class="space-y-6">27 <h2 class="text-2xl font-bold text-gray-800">Upload Your Excel File</h2>28 <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-indigo-400 transition-colors">29 <div class="dropzone" id="dropzone">30 <i data-feather="upload-cloud" class="w-12 h-12 text-indigo-500 mx-auto mb-4"></i>31 <p class="text-gray-600 mb-2">Drag & drop your Excel file here</p>32 <p class="text-sm text-gray-500 mb-4">or</p>33 <label for="fileInput" class="cursor-pointer bg-indigo-600 text-white px-6 py-2 rounded-md hover:bg-indigo-700 transition-colors">34 Browse Files35 </label>36 <input type="file" id="fileInput" class="hidden" accept=".xlsx, .xls, .csv">37 </div>38 </div>39 <div class="bg-blue-50 p-4 rounded-lg hidden" id="fileInfo">40 <div class="flex items-center justify-between">41 <div class="flex items-center">42 <i data-feather="file" class="w-5 h-5 text-indigo-500 mr-2"></i>43 <span id="fileName" class="font-medium"></span>44 </div>45 <button id="clearFile" class="text-red-500 hover:text-red-700">46 <i data-feather="x"></i>47 </button>48 </div>49 </div>50 </div>51 52 <div>53 <div class="space-y-6">54 <h2 class="text-2xl font-bold text-gray-800">Chart Options</h2>55 <div class="space-y-4">56 <div>57 <label class="block text-sm font-medium text-gray-700 mb-1">Chart Type</label>58 <select id="chartType" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">59 <option value="bar">Bar Chart</option>60 <option value="line">Line Chart</option>61 <option value="pie">Pie Chart</option>62 <option value="doughnut">Doughnut Chart</option>63 <option value="radar">Radar Chart</option>64 </select>65 </div>66 <div>67 <label class="block text-sm font-medium text-gray-700 mb-1">X-Axis Column</label>68 <select id="xAxis" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" disabled>69 <option value="">Select a file first</option>70 </select>71 </div>72 <div>73 <label class="block text-sm font-medium text-gray-700 mb-1">Y-Axis Column(s)</label>74 <select id="yAxis" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" multiple disabled>75 <option value="">Select a file first</option>76 </select>77 </div>78 <button id="generateChart" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition-colors disabled:opacity-50" disabled>79 Generate Chart80 </button>81 </div>82 </div>83 </div>84 </div>85 </section>86 <section class="bg-white rounded-xl shadow-xl p-6 mb-16">87 <h2 class="text-2xl font-bold text-gray-800 mb-6">Your Visualization</h2>88 <live-updater></live-updater>89<div class="bg-gray-50 p-8 rounded-lg min-h-96 flex items-center justify-center" id="chartContainer">90 <div class="text-center" id="emptyState">91 <i data-feather="bar-chart-2" class="w-12 h-12 text-gray-400 mx-auto mb-4"></i>92 <p class="text-gray-500">Upload an Excel file and configure your chart to see the visualization</p>93 </div>94 <canvas id="dataChart" class="hidden" width="800" height="400"></canvas>95 </div>96 </section>97 98 <section class="bg-indigo-50 rounded-xl shadow-inner p-6">99 <h2 class="text-2xl font-bold text-indigo-800 mb-4">How It Works</h2>100 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">101 <div class="bg-white p-6 rounded-lg shadow-sm">102 <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">103 <i data-feather="upload" class="text-indigo-600"></i>104 </div>105 <h3 class="font-bold text-lg mb-2 text-gray-800">1. Upload Excel File</h3>106 <p class="text-gray-107<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>108</body>109</html>