add upload from computer image then display it

index.html

@@ -58,14 +58,25 @@
                 <p class="text-gray-600 dark:text-gray-300">Built with dark mode support out of the box.</p>
             </div>
         </div>
-
-        <div class="mt-16 text-center">
+        <div class="mt-16 text-center space-y-8">
             <button id="themeToggle" class="px-6 py-3 bg-primary-500 hover:bg-primary-600 text-white rounded-lg font-medium transition-colors flex items-center mx-auto">
                 <i data-feather="moon" class="mr-2"></i>
                 Toggle Theme
             </button>
+
+            <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg max-w-md mx-auto">
+                <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Upload Image</h2>
+                <input type="file" id="imageUpload" accept="image/*" class="hidden">
+                <label for="imageUpload" class="cursor-pointer px-4 py-2 bg-secondary-500 hover:bg-secondary-600 text-white rounded-lg inline-flex items-center">
+                    <i data-feather="upload" class="mr-2"></i>
+                    Choose Image
+                </label>
+                <div id="imagePreview" class="mt-4 hidden">
+                    <img id="previewImage" class="max-w-full h-auto rounded-lg" src="#" alt="Preview">
+                </div>
+            </div>
         </div>
-    </main>
+</main>
 
     <custom-footer></custom-footer>
 

script.js

@@ -30,7 +30,6 @@ document.addEventListener('DOMContentLoaded', () => {
         }
         feather.replace();
     });
-    
     // Watch for system theme changes
     prefersDarkScheme.addEventListener('change', e => {
         if (localStorage.getItem('theme') === null) {
@@ -41,4 +40,23 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         }
     });
+
+    // Image upload and preview functionality
+    const imageUpload = document.getElementById('imageUpload');
+    const imagePreview = document.getElementById('imagePreview');
+    const previewImage = document.getElementById('previewImage');
+
+    imageUpload.addEventListener('change', function(e) {
+        const file = e.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            
+            reader.onload = function(event) {
+                previewImage.src = event.target.result;
+                imagePreview.classList.remove('hidden');
+            }
+            
+            reader.readAsDataURL(file);
+        }
+    });
 });

style.css

@@ -17,11 +17,25 @@ body {
 ::-webkit-scrollbar-track {
     background: #f1f1f1;
 }
-
 .dark ::-webkit-scrollbar-track {
     background: #1a1a1a;
 }
 
+/* Image preview styling */
+#imagePreview {
+    transition: all 0.3s ease;
+}
+
+#previewImage {
+    max-height: 300px;
+    object-fit: contain;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.dark #previewImage {
+    border-color: #374151;
+}
 ::-webkit-scrollbar-thumb {
     background: #888;
     border-radius: 4px;