mobile responsiveness

script.js

@@ -66,7 +66,7 @@ function uploadFile(file) {
   fetch('https://api.remove.bg/v1.0/removebg', {
     method: 'POST',
     headers: {
-      'X-Api-Key': 'UartFkyZmYmZfJvykz6e5AAG',
+      'X-Api-Key': 'PJ6coatQNuA8gZHZHaU7XLex',
     },
     body: formData
   })
@@ -118,7 +118,7 @@ function uploadFileFromBlob(blob) {
   fetch('https://api.remove.bg/v1.0/removebg', {
     method: 'POST',
     headers: {
-      'X-Api-Key': 'UartFkyZmYmZfJvykz6e5AAG',
+      'X-Api-Key': 'PJ6coatQNuA8gZHZHaU7XLex',
     },
     body: formData
   })
@@ -164,3 +164,18 @@ resetBtn.addEventListener('click', () => {
   resetBtn.classList.add('hidden');
   output.classList.add('hidden');
 });
+function showOutput() {
+  comparisonContainer.style.display = 'flex';
+  output.classList.remove('hidden');
+}
+function showOutput() {
+  comparisonContainer.style.display = 'flex';
+  output.classList.remove('hidden');
+
+  // Smoothly scroll to the output section and ensure it's fully visible
+  output.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+  // Optionally, set focus to the output container to ensure it's active
+  output.focus({ preventScroll: true });
+}
+

style.css

@@ -1,9 +1,11 @@
+/* General reset */
 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
+/* Body styling */
 body {
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   background-color: #292826;
@@ -16,6 +18,7 @@ body {
   min-height: 100vh; /* Minimum height to cover the viewport */
 }
 
+/* Main container styling */
 .main-container {
   display: flex;
   justify-content: space-between;
@@ -28,6 +31,7 @@ body {
   user-select: none;
 }
 
+/* Title container styling */
 .title-container {
   width: 40%;
   text-align: left;
@@ -56,6 +60,7 @@ body {
   color: #2C65AE;
 }
 
+/* Upload container styling */
 .upload-container {
   text-align: center; /* Center text inside upload-container */
   width: 40%;
@@ -81,6 +86,7 @@ h2 {
   margin-bottom: 20px;
 }
 
+/* Drag and drop area styling */
 #drop-area {
   font-weight: bold;
   border: 2px dashed #3ABEF9;
@@ -105,6 +111,7 @@ h2 {
   background-color: #2d2c2c;
 }
 
+/* Button styling */
 #choose-file-btn {
   padding: 12px 24px;
   background-color: #3ABEF9;
@@ -121,6 +128,7 @@ h2 {
   background-color: #2C65AE;
 }
 
+/* URL container styling */
 .url-container {
   margin-top: 10px;
   margin-bottom: 10px;
@@ -174,6 +182,7 @@ h2 {
   color: #3ABEF9;
 }
 
+/* Comparison section styling */
 #comparison {
   display: flex;
   justify-content: space-between;
@@ -198,6 +207,7 @@ img {
   margin-top: 10px;
 }
 
+/* Button container styling */
 .button-container {
   text-align: center;
   margin-top: 10px;
@@ -256,6 +266,13 @@ img {
     text-align: center; /* Center text */
   }
 
+  #drop-area {
+    width: 90%; /* Adjust the width for smaller screens */
+    height: auto; /* Let height adjust automatically */
+    max-width: 350px; /* Set a maximum width */
+    margin: 20px auto; /* Center the drag-and-drop box */
+  }
+
   #comparison {
     flex-direction: column; /* Stack images vertically */
     margin-left: 0; /* Remove left margin */