diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..8619f9c --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,29 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); + +body { + font-family: 'Inter', sans-serif; + background-color: #f8f9fa; +} + +.border-dashed { + border: 2px dashed #dee2e6; + transition: background-color 0.2s ease-in-out; +} + +#drop-zone { + cursor: pointer; +} + +#drop-zone.drag-over { + background-color: #e9ecef; + border-color: #007bff; +} + +.navbar-brand { + font-weight: 500; +} + +.btn-primary { + background-image: linear-gradient(to right, #007bff, #0056b3); + border: none; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..e2f8e2e --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,80 @@ +document.addEventListener('DOMContentLoaded', function () { + const dropZone = document.getElementById('drop-zone'); + const fileInput = document.getElementById('csv-file'); + const fileNameDisplay = document.getElementById('file-name-display'); + const uploadForm = document.getElementById('upload-form'); + const resultsSection = document.getElementById('results-section'); + const analysisOutput = document.getElementById('analysis-output'); + const submitButton = uploadForm.querySelector('button[type="submit"]'); + const spinner = submitButton.querySelector('.spinner-border'); + + // Open file dialog when drop zone is clicked + dropZone.addEventListener('click', () => fileInput.click()); + + // Drag and drop events + dropZone.addEventListener('dragover', (e) => { + e.preventDefault(); + dropZone.classList.add('drag-over'); + }); + + dropZone.addEventListener('dragleave', () => { + dropZone.classList.remove('drag-over'); + }); + + dropZone.addEventListener('drop', (e) => { + e.preventDefault(); + dropZone.classList.remove('drag-over'); + const files = e.dataTransfer.files; + if (files.length > 0) { + fileInput.files = files; + updateFileName(); + } + }); + + // Update file name display on change + fileInput.addEventListener('change', updateFileName); + + function updateFileName() { + if (fileInput.files.length > 0) { + fileNameDisplay.textContent = fileInput.files[0].name; + } else { + fileNameDisplay.textContent = 'No file selected'; + } + } + + // Handle form submission + uploadForm.addEventListener('submit', function (e) { + e.preventDefault(); + + if (fileInput.files.length === 0) { + alert('Please select a CSV file to analyze.'); + return; + } + + // Show spinner and disable button + spinner.classList.remove('d-none'); + submitButton.disabled = true; + + // --- FAKE LOADER FOR DEMO --- + // In the next step, we will replace this with a real AJAX call to the backend. + setTimeout(() => { + // Hide spinner and re-enable button + spinner.classList.add('d-none'); + submitButton.disabled = false; + + // Show results section with a placeholder message + resultsSection.style.display = 'block'; + analysisOutput.innerHTML = ` +
+ +

AI is analyzing your data... This will be implemented in the next step.

+
+ `; + // Scroll to results + resultsSection.scrollIntoView({ behavior: 'smooth' }); + + }, 2000); + }); +}); diff --git a/index.php b/index.php index 7205f3d..351561e 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,96 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + AI Data Analysis + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + +
+
+
+

Unlock Insights from Your CSV Files

+

+ Simply upload your CSV, and our AI will instantly provide a summary, suggest relevant charts, and generate key statistics. +

+
+
+ +
+
+
+
+
+
+ +
+
+ +

+ Drag & drop your file here or click to upload +

+

No file selected

+ +
+
+
+
+ +
+
+
+
+
+
+ + +
+ + + + + - + \ No newline at end of file