diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..f1ce07e --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,34 @@ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + background-color: #F8F9FA; +} + +.header-gradient { + background: linear-gradient(135deg, #007BFF, #0056b3); +} + +.upload-zone { + border: 2px dashed #007BFF; + border-radius: 0.5rem; + padding: 4rem; + text-align: center; + cursor: pointer; + transition: background-color 0.2s ease-in-out; +} + +.upload-zone.drag-over { + background-color: #e9ecef; +} + +.upload-zone .icon { + width: 48px; + height: 48px; + stroke-width: 1.5; + margin-bottom: 1rem; +} + +.result-card { + border-radius: 0.5rem; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..3e8242d --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,29 @@ + +document.addEventListener('DOMContentLoaded', () => { + const uploadZone = document.getElementById('uploadZone'); + const fileInput = document.getElementById('vehicleImage'); + const uploadForm = document.getElementById('uploadForm'); + + if (uploadZone) { + uploadZone.addEventListener('click', () => fileInput.click()); + + uploadZone.addEventListener('dragover', (e) => { + e.preventDefault(); + uploadZone.classList.add('drag-over'); + }); + + uploadZone.addEventListener('dragleave', () => { + uploadZone.classList.remove('drag-over'); + }); + + uploadZone.addEventListener('drop', (e) => { + e.preventDefault(); + uploadZone.classList.remove('drag-over'); + if (e.dataTransfer.files.length > 0) { + fileInput.files = e.dataTransfer.files; + // Automatically submit the form when a file is dropped + uploadForm.submit(); + } + }); + } +}); diff --git a/index.php b/index.php index 7205f3d..3602744 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,108 @@ - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + Acyfer Vision + + + + + + + + + + + -
-
-

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

-
-
- + +
+
+

Acyfer Vision

+
+
+ +
+
+
+
+

Upload Vehicle Photo

+

Get an instant AI-powered damage analysis. Drag and drop an image or click to select a file.

+
+
+ +

Drag & drop or click to browse

+

Supports: JPG, PNG, GIF

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

Analysis Result

+
+ Uploaded Vehicle Image +
+
Image Received
+

+ Status: Pending Analysis +

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