I want to start over - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Test
-emoji: 👀
+title: test
+emoji: 🐳
 colorFrom: gray
-colorTo: indigo
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,153 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Excel Data App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js"></script>
+</head>
+<body class="bg-gray-50">
+    <div class="container mx-auto px-4 py-8">
+        <header class="mb-8">
+            <h1 class="text-3xl font-bold text-indigo-700">Excel Data Dashboard</h1>
+            <p class="text-gray-600">Upload and visualize your spreadsheet data</p>
+        </header>
+
+        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
+            <div class="flex items-center justify-between mb-4">
+                <h2 class="text-xl font-semibold">Upload File</h2>
+                <label for="file-upload" class="cursor-pointer bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition flex items-center">
+                    <i data-feather="upload" class="mr-2"></i>
+                    Choose Excel File
+                </label>
+                <input id="file-upload" type="file" accept=".xlsx, .xls" class="hidden">
+            </div>
+            <div id="file-info" class="text-gray-500 italic">
+                No file selected
+            </div>
+        </div>
+
+        <div id="data-display" class="bg-white rounded-lg shadow-md p-6 hidden">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-semibold">Your Data</h2>
+                <div class="flex space-x-2">
+                    <button class="bg-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 transition">
+                        <i data-feather="filter" class="w-4 h-4"></i>
+                    </button>
+                    <button class="bg-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 transition">
+                        <i data-feather="download" class="w-4 h-4"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="overflow-x-auto">
+                <table id="data-table" class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <!-- Table headers will be inserted here -->
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        <!-- Table data will be inserted here -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        AOS.init();
+        feather.replace();
+        
+        document.getElementById('file-upload').addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (!file) return;
+            
+            document.getElementById('file-info').textContent = `Selected: ${file.name} (${(file.size/1024).toFixed(2)} KB)`;
+            
+            // Process Excel file
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                try {
+                    const data = new Uint8Array(e.target.result);
+                    const workbook = XLSX.read(data, { type: 'array' });
+                    
+                    // Get first sheet
+                    const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
+                    const jsonData = XLSX.utils.sheet_to_json(firstSheet);
+                    
+                    // Display data
+                    displayData(jsonData);
+                    
+                    // Update file info
+                    document.getElementById('file-info').textContent = 
+                        `Loaded: ${file.name} (${jsonData.length} rows)`;
+                        
+                } catch (error) {
+                    document.getElementById('file-info').textContent = 
+                        `Error processing file: ${error.message}`;
+                    console.error(error);
+                }
+            };
+            reader.onerror = function() {
+                document.getElementById('file-info').textContent = 
+                    'Error reading file. Please try again.';
+            };
+            reader.readAsArrayBuffer(file);
+        });
+
+        function displayData(data) {
+            if (!data || data.length === 0) {
+                alert('No data found in the file');
+                return;
+            }
+            
+            const table = document.getElementById('data-table');
+            const thead = table.querySelector('thead');
+            const tbody = table.querySelector('tbody');
+            
+            // Clear existing data
+            thead.innerHTML = '';
+            tbody.innerHTML = '';
+            
+            // Create headers
+            const headerRow = document.createElement('tr');
+            Object.keys(data[0]).forEach(key => {
+                const th = document.createElement('th');
+                th.textContent = key;
+                th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider';
+                headerRow.appendChild(th);
+            });
+            thead.appendChild(headerRow);
+            
+            // Create rows (limit to 100 for performance)
+            const displayData = data.length > 100 ? data.slice(0, 100) : data;
+            displayData.forEach(row => {
+                const tr = document.createElement('tr');
+                Object.values(row).forEach(value => {
+                    const td = document.createElement('td');
+                    td.textContent = value !== undefined ? value : '';
+                    td.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
+                    tr.appendChild(td);
+                });
+                tbody.appendChild(tr);
+            });
+            
+            if (data.length > 100) {
+                const tr = document.createElement('tr');
+                const td = document.createElement('td');
+                td.colSpan = Object.keys(data[0]).length;
+                td.className = 'px-6 py-4 text-sm text-gray-500 italic text-center';
+                td.textContent = `Showing 100 of ${data.length} rows...`;
+                tr.appendChild(td);
+                tbody.appendChild(tr);
+            }
+            
+            // Show table
+            document.getElementById('data-display').classList.remove('hidden');
+        }
+    </script>
+</body>
+</html>

prompts.txt

@@ -0,0 +1,3 @@
+Can i upload an excel file here and ask you to create and app from it 
+file uploaded
+I want to start over