tshenolo
diff --git a/Diff for: ‎screenshot.png
1.73 KB b/Diff for: ‎screenshot.png
1.73 KB
diff --git a/Diff for: ‎templates/index.html
+28-8 b/Diff for: ‎templates/index.html
+28-8
@@ -8,6 +8,26 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
     <!-- Font Awesome CDN -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <style>
+        /* Additional CSS for floating copy button */
+        .copy-button {
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            background-color: #f3f4f6;
+            color: #4b5563;
+            border: none;
+            border-radius: 0.25rem;
+            padding: 0.25rem 0.5rem;
+            font-size: 0.875rem;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        .copy-button:hover {
+            background-color: #e5e7eb;
+        }
+    </style>
 </head>
 <body class="bg-gray-100 flex items-center justify-center min-h-screen">
 
@@ -26,20 +46,20 @@ <h1 class="text-2xl font-bold text-center mb-6">Image to Text Converter</h1>
             <!-- Display Selected File -->
             <div id="fileDetails" class="mt-4 text-center text-gray-700"></div>
 
-            <!-- Convert and Reset Buttons -->
+            <!-- Reset and Convert Buttons (swapped positions) -->
             <div class="flex space-x-4">
                 <button type="button" onclick="resetForm()" class="flex-1 bg-gray-300 text-gray-700 py-2 rounded-lg font-semibold hover:bg-gray-400 transition duration-200"><i class="fas fa-redo"></i> Reset</button>
-                <button type="submit" class="flex-1 bg-blue-500 text-white py-2 rounded-lg font-semibold hover:bg-blue-600 transition duration-200"><i class="fas fa-sync-alt"></i> Convert to Text</button>               
+                <button type="submit" class="flex-1 bg-blue-500 text-white py-2 rounded-lg font-semibold hover:bg-blue-600 transition duration-200"><i class="fas fa-sync-alt"></i> Convert to Text</button>
             </div>
         </form>
 
-        <!-- Text Area to Display Extracted Text -->
-        <div class="mt-6">
+        <!-- Text Area to Display Extracted Text with Floating Copy Button -->
+        <div class="relative mt-6">
             <textarea id="text" rows="10" class="w-full p-3 border border-gray-300 rounded-lg bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" readonly></textarea>
 
-            <!-- Copy Text Button -->
-            <button onclick="copyText()" class="mt-3 w-full bg-green-500 text-white py-2 rounded-lg font-semibold hover:bg-green-600 transition duration-200">
-                <i class="fas fa-copy"></i> Copy Text
+            <!-- Floating Copy Button inside Textarea -->
+            <button onclick="copyText()" class="copy-button">
+                <i class="fas fa-copy"></i> Copy
             </button>
         </div>
     </div>
@@ -136,4 +156,4 @@ <h1 class="text-2xl font-bold text-center mb-6">Image to Text Converter</h1>
     </script>
 
 </body>
-</html>
+</html>