Update templates/index.html

templates/index.html

@@ -13,7 +13,7 @@
     <h1 class="text-3xl font-bold text-center mb-6">Upload Images</h1>
     <div class="flex flex-col items-center">
       <!-- Upload/Paste Area -->
-      <div id="upload-area" class="border-2 border-dashed border-gray-400 p-8 rounded w-full max-w-lg bg-white">
+      <div id="upload-area" class="border-2 border-dashed border-gray-400 p-8 rounded w-full sm:w-11/12 md:w-3/4 lg:w-1/2 bg-white">
         <p class="mb-4 text-center">
           Paste images with <strong>Ctrl + V</strong> or click "Add Image".
         </p>
@@ -33,13 +33,13 @@
       </div>
 
       <!-- Result Display -->
-      <div id="resultArea" class="mt-6 w-full max-w-lg"></div>
+      <div id="resultArea" class="mt-6 w-full sm:w-11/12 md:w-3/4 lg:w-1/2 overflow-x-auto"></div>
     </div>
   </div>
 
   <!-- Popup Card for First Time -->
   <div id="popupCard" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
-    <div class="bg-white rounded-lg p-6 max-w-md mx-auto shadow-2xl transform transition-all duration-300">
+    <div class="bg-white rounded-lg p-6 w-11/12 sm:max-w-md mx-auto shadow-2xl transform transition-all duration-300">
       <div class="mb-4">
         <h2 class="text-2xl font-bold">👋 Hey, I'm Aditya Devarshi</h2>
         <p class="mt-2 text-gray-700">I'm an AI Engineer 🤖, here to help with your assignments 📚, support multiple images 📷, and provide keyboard shortcuts ⌨️.</p>