Spaces:

nolanzandi
/

virtual-data-analyst

Running

App Files Files Community

## 1. UI/UX Enhancements

#21

by bvproperty - opened Apr 12

base: refs/heads/main

←

from: refs/pr/21

Discussion Files changed

+853

-0

Files changed (3) hide show

index.html +245 -0
script.js +440 -0
styles.css +168 -0

index.html ADDED Viewed

	@@ -0,0 +1,245 @@

+<!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>

script.js ADDED Viewed

	@@ -0,0 +1,440 @@

+// API Configuration
+const API_URL = 'https://nolanzandi-virtual-data-analyst.hf.space';
+const PREDICT_ENDPOINT = `${API_URL}/api/predict`;
+const SAMPLE_ENDPOINT = `${API_URL}/api/sample`;
+// File Upload and API Integration
+async function handleFileUpload(file) {
+    try {
+        // Show loading state
+        document.querySelector('.upload-icon').style.display = 'none';
+        document.querySelector('.loading-spinner').style.display = 'block';
+        document.querySelector('.progress-bar').style.display = 'block';
+        // Create FormData
+        const formData = new FormData();
+        formData.append('file', file);
+        // Update file info
+        updateFileInfo(file);
+        // Simulate progress while actually uploading
+        const progressInterval = simulateProgress();
+        // Make API request
+        const response = await fetch(API_URL, {
+            method: 'POST',
+            body: formData
+        });
+        if (!response.ok) {
+            throw new Error('API request failed');
+        }
+        const data = await response.json();
+        // Clear progress simulation
+        clearInterval(progressInterval);
+        // Show success state
+        showSuccessState();
+        // Handle API response
+        handleApiResponse(data);
+    } catch (error) {
+        console.error('Error:', error);
+        showErrorState(error.message);
+    }
+}
+function updateFileInfo(file) {
+    const fileInfo = document.getElementById('fileInfo');
+    const fileName = fileInfo.querySelector('.file-name');
+    const fileSize = fileInfo.querySelector('.file-size');
+    const fileIcon = fileInfo.querySelector('.file-type-icon');
+    const fileType = file.name.split('.').pop().toLowerCase();
+    const iconClass = getFileTypeIcon(fileType);
+    fileIcon.className = `file-type-icon fas ${iconClass}`;
+    fileName.textContent = file.name;
+    fileSize.textContent = formatFileSize(file.size);
+    fileInfo.classList.remove('hidden');
+}
+function simulateProgress() {
+    const progressBar = document.querySelector('.progress-bar-fill');
+    let progress = 0;
+    return setInterval(() => {
+        if (progress < 90) { // Only go up to 90% until we get actual completion
+            progress += 5;
+            progressBar.style.width = `${progress}%`;
+        }
+    }, 100);
+}
+function showSuccessState() {
+    document.querySelector('.loading-spinner').style.display = 'none';
+    document.querySelector('.success-checkmark').style.display = 'block';
+    document.querySelector('.progress-bar-fill').style.width = '100%';
+    setTimeout(() => {
+        resetUploadState();
+    }, 2000);
+}
+function showErrorState(message) {
+    // Reset upload UI
+    resetUploadState();
+    // Show error message
+    const errorDiv = document.createElement('div');
+    errorDiv.className = 'text-red-500 mt-4';
+    errorDiv.innerHTML = `<i class="fas fa-exclamation-circle mr-2"></i>${message}`;
+    document.querySelector('.drop-zone').appendChild(errorDiv);
+    setTimeout(() => {
+        errorDiv.remove();
+    }, 5000);
+}
+function resetUploadState() {
+    document.querySelector('.success-checkmark').style.display = 'none';
+    document.querySelector('.upload-icon').style.display = 'block';
+    document.querySelector('.progress-bar').style.display = 'none';
+    document.querySelector('.progress-bar-fill').style.width = '0%';
+    document.getElementById('fileInfo').classList.add('hidden');
+}
+function handleSampleDataClick(datasetName) {
+    // Show loading state in results section
+    const resultsSection = document.getElementById('results');
+    const resultsLoading = document.getElementById('resultsLoading');
+    const resultsContent = document.getElementById('resultsContent');
+    const resultsError = document.getElementById('resultsError');
+    resultsSection.classList.remove('hidden');
+    resultsLoading.classList.remove('hidden');
+    resultsContent.classList.add('hidden');
+    resultsError.classList.add('hidden');
+    // Simulate API delay
+    setTimeout(() => {
+        try {
+            // Mock data based on dataset type
+            const mockData = datasetName === 'marketing_campaign' ? {
+                statistics: {
+                    rows: 10000,
+                    columns: 15,
+                    missing_values: 120,
+                    data_types: ['numeric', 'categorical', 'datetime']
+                },
+                preview: {
+                    columns: ['Campaign ID', 'Customer ID', 'Response', 'Channel'],
+                    data: [
+                        ['CAM001', 'C001', 'Converted', 'Email'],
+                        ['CAM001', 'C002', 'No Response', 'SMS'],
+                        ['CAM002', 'C003', 'Converted', 'Social Media']
+                    ]
+                },
+                visualizations: [
+                    {
+                        title: 'Response Rate by Channel',
+                        description: 'Conversion rates across different marketing channels',
+                        image_url: 'https://via.placeholder.com/400x300'
+                    },
+                    {
+                        title: 'Campaign Performance',
+                        description: 'Success metrics for each campaign',
+                        image_url: 'https://via.placeholder.com/400x300'
+                    }
+                ],
+                insights: [
+                    {
+                        title: 'Best Performing Channel',
+                        description: 'Email campaigns show highest conversion rate at 28%'
+                    },
+                    {
+                        title: 'Optimal Send Time',
+                        description: 'Campaigns sent between 2 PM - 4 PM have better engagement'
+                    }
+                ]
+            } : {
+                statistics: {
+                    rows: 50000,
+                    columns: 12,
+                    missing_values: 85,
+                    data_types: ['numeric', 'categorical', 'datetime']
+                },
+                preview: {
+                    columns: ['Order ID', 'Product', 'Quantity', 'Price'],
+                    data: [
+                        ['ORD001', 'Laptop', '1', '$999.99'],
+                        ['ORD002', 'Mouse', '2', '$29.99'],
+                        ['ORD003', 'Monitor', '1', '$299.99']
+                    ]
+                },
+                visualizations: [
+                    {
+                        title: 'Sales by Category',
+                        description: 'Distribution of sales across product categories',
+                        image_url: 'https://via.placeholder.com/400x300'
+                    },
+                    {
+                        title: 'Monthly Revenue',
+                        description: 'Revenue trends over the past 12 months',
+                        image_url: 'https://via.placeholder.com/400x300'
+                    }
+                ],
+                insights: [
+                    {
+                        title: 'Top Products',
+                        description: 'Electronics category generates 45% of total revenue'
+                    },
+                    {
+                        title: 'Customer Behavior',
+                        description: 'Average order value increased by 15% in Q4'
+                    }
+                ]
+            };
+            handleApiResponse(mockData);
+        } catch (error) {
+            console.error('Error:', error);
+            showErrorState('Failed to process sample dataset');
+        }
+    }, 1000); // 1 second delay to show loading state
+}
+function handleApiResponse(data) {
+    const resultsSection = document.getElementById('results');
+    const resultsLoading = document.getElementById('resultsLoading');
+    const resultsContent = document.getElementById('resultsContent');
+    const resultsError = document.getElementById('resultsError');
+    // Show results section
+    resultsSection.classList.remove('hidden');
+    resultsLoading.classList.add('hidden');
+    resultsError.classList.add('hidden');
+    resultsContent.classList.remove('hidden');
+    // Update Basic Statistics
+    updateBasicStats(data.statistics);
+    // Update Data Preview
+    updateDataPreview(data.preview);
+    // Update Visualizations
+    updateVisualizations(data.visualizations);
+    // Update Insights
+    updateInsights(data.insights);
+}
+function updateBasicStats(statistics) {
+    const statsContainer = document.getElementById('basicStats');
+    statsContainer.innerHTML = '';
+    const stats = [
+        { label: 'Rows', value: statistics.rows, icon: 'fa-list' },
+        { label: 'Columns', value: statistics.columns, icon: 'fa-columns' },
+        { label: 'Missing Values', value: statistics.missing_values, icon: 'fa-exclamation-triangle' },
+        { label: 'Data Types', value: statistics.data_types.length, icon: 'fa-code' }
+    ];
+    stats.forEach(stat => {
+        const statDiv = document.createElement('div');
+        statDiv.className = 'bg-gray-50 rounded-lg p-4';
+        statDiv.innerHTML = `
+            <div class="flex items-center">
+                <i class="fas ${stat.icon} text-primary text-xl mr-3"></i>
+                <div>
+                    <div class="text-sm text-gray-500">${stat.label}</div>
+                    <div class="text-lg font-semibold">${stat.value}</div>
+                </div>
+            </div>
+        `;
+        statsContainer.appendChild(statDiv);
+    });
+}
+function updateDataPreview(preview) {
+    const table = document.getElementById('dataPreview');
+    table.innerHTML = '';
+    // Add header
+    const thead = document.createElement('thead');
+    thead.className = 'bg-gray-50';
+    const headerRow = document.createElement('tr');
+    preview.columns.forEach(column => {
+        const th = document.createElement('th');
+        th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider';
+        th.textContent = column;
+        headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+    // Add body
+    const tbody = document.createElement('tbody');
+    tbody.className = 'bg-white divide-y divide-gray-200';
+    preview.data.forEach(row => {
+        const tr = document.createElement('tr');
+        row.forEach(cell => {
+            const td = document.createElement('td');
+            td.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
+            td.textContent = cell;
+            tr.appendChild(td);
+        });
+        tbody.appendChild(tr);
+    });
+    table.appendChild(tbody);
+}
+function updateVisualizations(visualizations) {
+    const container = document.getElementById('visualizations');
+    container.innerHTML = '';
+    visualizations.forEach(viz => {
+        const vizDiv = document.createElement('div');
+        vizDiv.className = 'bg-white rounded-lg p-4 shadow';
+        vizDiv.innerHTML = `
+            <h4 class="text-lg font-medium text-gray-800 mb-4">${viz.title}</h4>
+            <div class="aspect-w-16 aspect-h-9">
+                <img src="${viz.image_url}" alt="${viz.title}" class="rounded-lg">
+            </div>
+            <p class="mt-2 text-sm text-gray-600">${viz.description}</p>
+        `;
+        container.appendChild(vizDiv);
+    });
+}
+function updateInsights(insights) {
+    const insightsList = document.getElementById('insights');
+    insightsList.innerHTML = '';
+    insights.forEach(insight => {
+        const li = document.createElement('li');
+        li.className = 'bg-blue-50 rounded-lg p-4';
+        li.innerHTML = `
+            <div class="flex items-start">
+                <i class="fas fa-lightbulb text-yellow-500 mt-1 mr-3"></i>
+                <div>
+                    <div class="font-medium text-blue-900">${insight.title}</div>
+                    <p class="mt-1 text-sm text-blue-700">${insight.description}</p>
+                </div>
+            </div>
+        `;
+        insightsList.appendChild(li);
+    });
+}
+function closeResults() {
+    document.getElementById('results').classList.add('hidden');
+}
+function showErrorState(message) {
+    const resultsSection = document.getElementById('results');
+    const resultsLoading = document.getElementById('resultsLoading');
+    const resultsContent = document.getElementById('resultsContent');
+    const resultsError = document.getElementById('resultsError');
+    const errorMessage = document.getElementById('errorMessage');
+    resultsSection.classList.remove('hidden');
+    resultsLoading.classList.add('hidden');
+    resultsContent.classList.add('hidden');
+    resultsError.classList.remove('hidden');
+    errorMessage.textContent = message;
+}
+// Event Listeners
+document.addEventListener('DOMContentLoaded', () => {
+    // File Upload Handling
+    const dropZone = document.querySelector('.drop-zone');
+    const fileInput = document.getElementById('fileInput');
+    // Prevent default drag behaviors
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, preventDefaults, false);
+        document.body.addEventListener(eventName, preventDefaults, false);
+    });
+    // Highlight drop zone when dragging over it
+    ['dragenter', 'dragover'].forEach(eventName => {
+        dropZone.addEventListener(eventName, highlight, false);
+    });
+    ['dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, unhighlight, false);
+    });
+    // Handle dropped files
+    dropZone.addEventListener('drop', (e) => {
+        const dt = e.dataTransfer;
+        const files = dt.files;
+        if (files.length > 0) {
+            handleFileUpload(files[0]);
+        }
+    });
+    fileInput.addEventListener('change', (e) => {
+        if (e.target.files.length > 0) {
+            handleFileUpload(e.target.files[0]);
+        }
+    });
+    // Sample Data Button Handlers
+    const marketingBtn = document.querySelector('.sample-btn:nth-child(1)');
+    const retailBtn = document.querySelector('.sample-btn:nth-child(2)');
+    if (marketingBtn) {
+        marketingBtn.addEventListener('click', () => {
+            console.log('Marketing campaign button clicked');
+            handleSampleDataClick('marketing_campaign');
+        });
+    }
+    if (retailBtn) {
+        retailBtn.addEventListener('click', () => {
+            console.log('Online retail button clicked');
+            handleSampleDataClick('online_retail');
+        });
+    }
+});
+// Utility Functions
+function preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+}
+function highlight(e) {
+    document.querySelector('.drop-zone').classList.add('border-primary', 'bg-blue-50');
+}
+function unhighlight(e) {
+    document.querySelector('.drop-zone').classList.remove('border-primary', 'bg-blue-50');
+}
+function getFileTypeIcon(fileType) {
+    const icons = {
+        'csv': 'fa-file-csv',
+        'tsv': 'fa-file-alt',
+        'txt': 'fa-file-alt',
+        'xls': 'fa-file-excel',
+        'xlsx': 'fa-file-excel',
+        'xml': 'fa-file-code',
+        'json': 'fa-file-code'
+    };
+    return icons[fileType] || 'fa-file';
+}
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}

styles.css ADDED Viewed

	@@ -0,0 +1,168 @@

+/* Loading Animation */
+.loading-spinner {
+    display: none;
+    width: 50px;
+    height: 50px;
+    border: 5px solid #f3f3f3;
+    border-top: 5px solid #3B82F6;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+/* File Upload Progress */
+.progress-bar {
+    width: 100%;
+    height: 6px;
+    background-color: #e5e7eb;
+    border-radius: 3px;
+    overflow: hidden;
+    display: none;
+    margin: 1rem auto;
+    max-width: 300px;
+}
+.progress-bar-fill {
+    height: 100%;
+    background-color: #3B82F6;
+    width: 0%;
+    transition: width 0.3s ease;
+}
+/* Tooltip */
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+.tooltip .tooltip-text {
+    visibility: hidden;
+    background-color: #1f2937;
+    color: white;
+    text-align: center;
+    padding: 8px 12px;
+    border-radius: 6px;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-size: 0.875rem;
+    white-space: nowrap;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}
+/* File Type Icons */
+.file-type-icon {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+    color: #3B82F6;
+}
+/* Success Animation */
+@keyframes checkmark {
+    0% { transform: scale(0); opacity: 0; }
+    50% { transform: scale(1.2); opacity: 0.8; }
+    100% { transform: scale(1); opacity: 1; }
+}
+.success-checkmark {
+    display: none;
+    color: #10B981;
+    animation: checkmark 0.5s ease-in-out forwards;
+}
+/* Sample Data Cards */
+.sample-btn {
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+.sample-btn::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0));
+    transform: translateY(-100%);
+    transition: transform 0.3s ease;
+}
+.sample-btn:hover::after {
+    transform: translateY(0);
+}
+.sample-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
+}
+/* Drop Zone Enhancements */
+.drop-zone {
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+.drop-zone::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 8px;
+    border: 2px dashed #3B82F6;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.drop-zone:hover::before {
+    opacity: 1;
+}
+/* File Info Card */
+#fileInfo {
+    background: linear-gradient(to right, #f8fafc, #f1f5f9);
+    border: 1px solid #e2e8f0;
+    transition: all 0.3s ease;
+}
+#fileInfo:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+/* Features Section */
+.feature-card {
+    transition: all 0.3s ease;
+}
+.feature-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
+}
+.feature-icon {
+    transition: all 0.3s ease;
+}
+.feature-card:hover .feature-icon {
+    transform: scale(1.1);
+    color: #2563eb;
+}