File size: 12,311 Bytes
c918845 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual Data Analyst</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Custom Styles -->
<link rel="stylesheet" href="styles.css">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'sans': ['Inter', 'sans-serif'],
},
colors: {
primary: '#3B82F6',
secondary: '#6B7280',
},
}
}
}
</script>
</head>
<body class="bg-gray-50 font-sans">
<div class="min-h-screen p-6">
<!-- Header -->
<header class="max-w-4xl mx-auto mb-12 text-center">
<h1 class="text-4xl font-bold text-gray-900 mb-4">Virtual Data Analyst</h1>
<p class="text-lg text-gray-600 mb-6">
A powerful tool for data analysis, visualizations, and insights
</p>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 max-w-2xl mx-auto">
<h2 class="font-semibold text-blue-800 mb-2">
<i class="fas fa-info-circle mr-2"></i>Supported Files
</h2>
<div class="flex flex-wrap justify-center gap-3 text-blue-700">
<span class="tooltip">
<i class="fas fa-file-csv mr-1"></i>CSV
<span class="tooltip-text">Comma-separated values</span>
</span>
<span class="tooltip">
<i class="fas fa-file-alt mr-1"></i>TSV
<span class="tooltip-text">Tab-separated values</span>
</span>
<span class="tooltip">
<i class="fas fa-file-alt mr-1"></i>TXT
<span class="tooltip-text">Text files</span>
</span>
<span class="tooltip">
<i class="fas fa-file-excel mr-1"></i>XLS/XLSX
<span class="tooltip-text">Excel spreadsheets</span>
</span>
<span class="tooltip">
<i class="fas fa-file-code mr-1"></i>XML
<span class="tooltip-text">XML documents</span>
</span>
<span class="tooltip">
<i class="fas fa-file-code mr-1"></i>JSON
<span class="tooltip-text">JSON data files</span>
</span>
</div>
</div>
</header>
<!-- Main Content -->
<main class="max-w-4xl mx-auto">
<!-- File Upload Section -->
<div class="bg-white rounded-xl shadow-lg p-8 mb-8">
<div class="drop-zone border-2 border-dashed border-gray-300 rounded-lg p-12 text-center hover:border-primary cursor-pointer bg-gray-50 hover:bg-blue-50 transition-colors duration-300">
<input type="file" id="fileInput" class="hidden" accept=".csv,.tsv,.txt,.xls,.xlsx,.xml,.json">
<!-- Upload Icon & Success Checkmark -->
<div class="relative inline-block">
<i class="fas fa-cloud-upload-alt text-5xl text-gray-400 mb-4 upload-icon"></i>
<i class="fas fa-check-circle text-5xl success-checkmark absolute top-0 left-0"></i>
</div>
<!-- Loading Spinner -->
<div class="loading-spinner mx-auto mb-4"></div>
<h3 class="text-xl font-semibold text-gray-700 mb-2">Drop your data file here</h3>
<p class="text-gray-500 mb-4">or</p>
<button onclick="document.getElementById('fileInput').click()" class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition-colors duration-300">
<i class="fas fa-folder-open mr-2"></i>Browse Files
</button>
<!-- Progress Bar -->
<div class="progress-bar mt-4">
<div class="progress-bar-fill"></div>
</div>
<!-- File Info -->
<div id="fileInfo" class="hidden mt-4 p-4 bg-gray-100 rounded-lg">
<div class="flex items-center justify-center">
<i class="file-type-icon fas"></i>
<span class="file-name font-medium"></span>
</div>
<div class="text-sm text-gray-500 mt-2">
<span class="file-size"></span>
</div>
</div>
<p class="text-sm text-gray-500 mt-4">Maximum file size: 100MB</p>
</div>
</div>
<!-- Sample Data Section -->
<div class="bg-white rounded-xl shadow-lg p-8">
<h2 class="text-2xl font-semibold text-gray-800 mb-6">
<i class="fas fa-flask mr-2"></i>Try Sample Datasets
</h2>
<div class="grid md:grid-cols-2 gap-4">
<!-- Marketing Campaign Sample -->
<button class="sample-btn bg-gradient-to-r from-purple-500 to-indigo-600 text-white p-6 rounded-lg text-left hover:shadow-lg">
<div class="flex items-center mb-3">
<i class="fas fa-bullhorn text-2xl mr-3"></i>
<div>
<h3 class="text-lg font-semibold">Marketing Campaign Data</h3>
<p class="text-sm opacity-90">10,000 records</p>
</div>
</div>
<p class="text-sm opacity-90">Analyze customer responses to marketing campaigns and identify key success factors</p>
<div class="mt-4 text-xs opacity-75">
<i class="fas fa-table mr-1"></i> CSV format
</div>
</button>
<!-- Retail Data Sample -->
<button class="sample-btn bg-gradient-to-r from-green-500 to-teal-600 text-white p-6 rounded-lg text-left hover:shadow-lg">
<div class="flex items-center mb-3">
<i class="fas fa-shopping-cart text-2xl mr-3"></i>
<div>
<h3 class="text-lg font-semibold">Online Retail Data</h3>
<p class="text-sm opacity-90">50,000 records</p>
</div>
</div>
<p class="text-sm opacity-90">Explore sales patterns, customer behavior, and product performance</p>
<div class="mt-4 text-xs opacity-75">
<i class="fas fa-file-excel mr-1"></i> XLSX format
</div>
</button>
</div>
</div>
<!-- Features Preview -->
<div class="mt-12 grid md:grid-cols-3 gap-6">
<div class="feature-card bg-white p-6 rounded-lg shadow-md">
<i class="feature-icon fas fa-chart-line text-primary text-2xl mb-4"></i>
<h3 class="font-semibold text-gray-800 mb-2">Advanced Analytics</h3>
<p class="text-gray-600 text-sm">Run SQL queries, perform regressions, and analyze results with ease</p>
</div>
<div class="feature-card bg-white p-6 rounded-lg shadow-md">
<i class="feature-icon fas fa-chart-pie text-primary text-2xl mb-4"></i>
<h3 class="font-semibold text-gray-800 mb-2">Rich Visualizations</h3>
<p class="text-gray-600 text-sm">Create scatter plots, line charts, pie charts, and more</p>
</div>
<div class="feature-card bg-white p-6 rounded-lg shadow-md">
<i class="feature-icon fas fa-magic text-primary text-2xl mb-4"></i>
<h3 class="font-semibold text-gray-800 mb-2">Automated Insights</h3>
<p class="text-gray-600 text-sm">Get instant insights and recommendations for your data</p>
</div>
</div>
</main>
<!-- Footer -->
<footer class="max-w-4xl mx-auto mt-12 text-center text-gray-500 text-sm">
<p>This application is under active development. For bugs or feedback, please open a discussion in the community tab.</p>
</footer>
</div>
<!-- Results Section -->
<div id="results" class="max-w-4xl mx-auto mt-12 hidden">
<div class="bg-white rounded-xl shadow-lg p-8">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-semibold text-gray-800">
<i class="fas fa-chart-bar mr-2"></i>Analysis Results
</h2>
<button onclick="closeResults()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<!-- Loading State -->
<div id="resultsLoading" class="text-center py-12">
<div class="loading-spinner mx-auto mb-4"></div>
<p class="text-gray-600">Analyzing your data...</p>
</div>
<!-- Error State -->
<div id="resultsError" class="hidden">
<div class="bg-red-50 border border-red-200 rounded-lg p-4 text-red-700">
<i class="fas fa-exclamation-circle mr-2"></i>
<span id="errorMessage">An error occurred</span>
</div>
</div>
<!-- Results Content -->
<div id="resultsContent" class="hidden">
<!-- Basic Statistics -->
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-700 mb-4">Basic Statistics</h3>
<div id="basicStats" class="grid grid-cols-2 md:grid-cols-4 gap-4">
<!-- Stats will be inserted here -->
</div>
</div>
<!-- Data Preview -->
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-700 mb-4">Data Preview</h3>
<div class="overflow-x-auto">
<table id="dataPreview" class="min-w-full divide-y divide-gray-200">
<!-- Table content will be inserted here -->
</table>
</div>
</div>
<!-- Visualizations -->
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-700 mb-4">Visualizations</h3>
<div id="visualizations" class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Visualization charts will be inserted here -->
</div>
</div>
<!-- Insights -->
<div>
<h3 class="text-lg font-semibold text-gray-700 mb-4">Key Insights</h3>
<ul id="insights" class="space-y-3">
<!-- Insights will be inserted here -->
</ul>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
|