change page content like attach image

index.html

@@ -18,7 +18,6 @@
                 <h1 class="text-4xl font-bold text-gray-800 mb-4">CodeCanvas</h1>
                 <p class="text-xl text-gray-600">Transform GitHub repositories into beautiful documentation</p>
             </div>
-
             <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
                 <div class="mb-6">
                     <label for="repo-url" class="block text-sm font-medium text-gray-700 mb-2">GitHub Repository URL</label>
@@ -30,7 +29,20 @@
                     </div>
                 </div>
 
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="mb-6">
+                    <label class="block text-sm font-medium text-gray-700 mb-2">Upload Images</label>
+                    <div id="drop-area" class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer hover:border-blue-500 transition duration-200">
+                        <div id="drop-content">
+                            <i data-feather="upload" class="w-8 h-8 mx-auto text-gray-400 mb-2"></i>
+                            <p class="text-gray-500">Drag & drop images here or click to select</p>
+                            <input type="file" id="file-input" class="hidden" accept="image/*" multiple>
+                        </div>
+                        <div id="preview-container" class="grid grid-cols-3 gap-4 mt-4 hidden">
+                            <p class="col-span-3 text-sm text-gray-500">Selected images:</p>
+                        </div>
+                    </div>
+                </div>
+<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                     <div>
                         <label class="block text-sm font-medium text-gray-700 mb-2">File Filter</label>
                         <select id="file-filter" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">

script.js

@@ -1,6 +1,83 @@
+
 document.addEventListener('DOMContentLoaded', function() {
     const fetchBtn = document.getElementById('fetch-btn');
-    const repoUrlInput = document.getElementById('repo-url');
+    const dropArea = document.getElementById('drop-area');
+    const fileInput = document.getElementById('file-input');
+    const previewContainer = document.getElementById('preview-container');
+    const dropContent = document.getElementById('drop-content');
+
+    // Drag and drop functionality
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dropArea.addEventListener(eventName, preventDefaults, false);
+    });
+
+    function preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    ['dragenter', 'dragover'].forEach(eventName => {
+        dropArea.addEventListener(eventName, highlight, false);
+    });
+
+    ['dragleave', 'drop'].forEach(eventName => {
+        dropArea.addEventListener(eventName, unhighlight, false);
+    });
+
+    function highlight() {
+        dropArea.classList.add('border-blue-500', 'bg-blue-50');
+    }
+
+    function unhighlight() {
+        dropArea.classList.remove('border-blue-500', 'bg-blue-50');
+    }
+
+    dropArea.addEventListener('drop', handleDrop, false);
+    dropArea.addEventListener('click', () => fileInput.click());
+
+    fileInput.addEventListener('change', handleFiles);
+
+    function handleDrop(e) {
+        const dt = e.dataTransfer;
+        const files = dt.files;
+        handleFiles({ target: { files } });
+    }
+
+    function handleFiles(e) {
+        const files = e.target.files;
+        if (!files.length) return;
+
+        dropContent.classList.add('hidden');
+        previewContainer.classList.remove('hidden');
+        previewContainer.innerHTML = '<p class="col-span-3 text-sm text-gray-500">Selected images:</p>';
+
+        Array.from(files).forEach(file => {
+            if (!file.type.match('image.*')) return;
+
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                const preview = document.createElement('div');
+                preview.className = 'relative group';
+                preview.innerHTML = `
+                    <img src="${e.target.result}" class="w-full h-32 object-cover rounded-lg" alt="${file.name}">
+                    <button class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i data-feather="x" class="w-4 h-4"></i>
+                    </button>
+                `;
+                preview.querySelector('button').addEventListener('click', () => {
+                    preview.remove();
+                    if (previewContainer.childElementCount <= 1) {
+                        dropContent.classList.remove('hidden');
+                        previewContainer.classList.add('hidden');
+                    }
+                });
+                previewContainer.appendChild(preview);
+                feather.replace();
+            };
+            reader.readAsDataURL(file);
+        });
+    }
+const repoUrlInput = document.getElementById('repo-url');
     const fileFilterSelect = document.getElementById('file-filter');
     const templateSelect = document.getElementById('template');
     const themeSelect = document.getElementById('theme');

style.css

@@ -23,12 +23,19 @@ body {
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
 }
-
-/* Animation for buttons */
-button {
+/* Animation for buttons and drop area */
+button, #drop-area {
     transition: all 0.2s ease-in-out;
 }
 
+/* Image preview styling */
+#preview-container img {
+    transition: transform 0.2s;
+}
+
+#preview-container img:hover {
+    transform: scale(1.02);
+}
 /* Loading spinner */
 .loading-spinner {
     display: inline-block;