Update frontend/styles.css

frontend/styles.css

@@ -7,6 +7,8 @@
 html {
     scroll-behavior: smooth;
     font-size: 16px;
+    height: 100%;
+    overflow-x: hidden; /* Prevent horizontal scroll */
 }
 
 body {
@@ -17,6 +19,8 @@ body {
     margin: 0;
     padding: 0;
     min-height: 100vh;
+    position: relative;
+    overflow-x: hidden; /* Prevent horizontal scroll */
 }
 
 /* Desktop Styles */
@@ -24,18 +28,20 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    min-height: 100vh;
     text-align: center;
+    padding: 2rem 1rem;
+    box-sizing: border-box;
 }
 
 .landing h1 {
-    font-size: 3.5rem;
+    font-size: clamp(2rem, 5vw, 3.5rem);
     font-weight: 700;
     margin-bottom: 2rem;
 }
 
 .landing p {
-    font-size: 1.5rem;
+    font-size: clamp(1.1rem, 3vw, 1.5rem);
     font-weight: 400;
     max-width: 1000px;
     padding: 0 25px;
@@ -48,8 +54,10 @@ body {
     border-radius: 12px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     transition: all .3s ease-in-out;
-    margin: auto auto 180px auto;
+    margin: 2rem auto;
     max-width: 1200px;
+    width: calc(100% - 4rem);
+    box-sizing: border-box;
 }
 
 .container:hover {
@@ -57,111 +65,133 @@ body {
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
+/* Form Elements */
 input, select, #output, #reportContainer {
     background-color: rgba(255, 255, 255, 0.1);
-    border: none;
+    border: 1px solid rgba(255, 255, 255, 0.2);
     color: #fff;
     transition: all .3s ease-in-out;
-    padding: 10px;
+    padding: 12px;
     border-radius: 6px;
     width: 100%;
     box-sizing: border-box;
+    margin-bottom: 1rem;
 }
 
 input:hover, input:focus, select:hover, select:focus {
-    background-color: #dfe4ea;
+    background-color: rgba(223, 228, 234, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.5);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    outline: none;
+}
+
+/* Buttons */
+.btn-container {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin: 1rem 0;
 }
 
-.btn-primary {
+.btn-primary, .btn-secondary {
     background: linear-gradient(to right, #0062cc, #007bff);
     border: none;
+    color: white;
     transition: all .3s ease-in-out;
-    padding: 10px 20px;
+    padding: 12px 24px;
     border-radius: 6px;
+    cursor: pointer;
+    font-size: 1rem;
+    min-width: 120px;
+    text-align: center;
+    display: inline-block;
 }
 
 .btn-secondary {
     background: linear-gradient(to right, #6c757d, #6c757d);
-    border: none;
-    transition: all .3s ease-in-out;
-    padding: 10px 20px;
-    border-radius: 6px;
 }
 
 .btn:hover {
-    opacity: 0.8;
-    transform: scale(1.1);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    opacity: 0.9;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }
 
+/* Agent Interaction */
 .agent_question {
-    font-size: 1.4rem;
+    font-size: clamp(1.2rem, 3vw, 1.4rem);
     font-weight: 500;
-    margin-bottom: 0.2rem;
+    margin-bottom: 0.5rem;
 }
 
 .agent_response {
     background-color: #747d8c;
-    margin: 10px;
-    padding: 10px;
+    margin: 1rem 0;
+    padding: 15px;
     border-radius: 12px;
 }
 
 #output {
-    height: 300px;
-    overflow: auto;
-    padding: 10px;
-    margin: 10px 0;
+    height: clamp(250px, 50vh, 400px);
+    overflow-y: auto;
+    padding: 15px;
+    margin: 1rem 0;
     border-radius: 12px;
     -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
 }
 
 #reportContainer {
     font-family: 'Georgia', 'Times New Roman', Times, serif;
-    font-size: 18px !important;
+    font-size: clamp(16px, 2vw, 18px) !important;
     padding: 25px;
     border-radius: 12px;
+    margin: 1rem 0;
 }
 
+/* Tags Input */
 .tags-input {
     display: flex;
     flex-wrap: wrap;
-    gap: 5px;
-    border: 1px solid #ccc;
-    padding: 5px;
-    border-radius: 5px;
+    gap: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 10px;
+    border-radius: 8px;
+    margin-bottom: 1rem;
 }
 
 .tag {
     background-color: #007bff;
     color: white;
-    padding: 5px 10px;
-    border-radius: 3px;
+    padding: 8px 12px;
+    border-radius: 4px;
     display: flex;
     align-items: center;
+    gap: 8px;
 }
 
 .tag .remove-tag {
-    margin-left: 10px;
     cursor: pointer;
     font-weight: bold;
+    opacity: 0.8;
+    padding: 0 4px;
 }
 
+/* Images */
 #selectedImagesContainer {
     background-color: rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     padding: 15px;
-    margin-bottom: 20px;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    justify-content: center;
+    margin: 1rem 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 15px;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 #selectedImagesContainer img {
-    width: 150px;
+    width: 100%;
     height: 150px;
     object-fit: cover;
     cursor: pointer;
@@ -169,18 +199,13 @@ input:hover, input:focus, select:hover, select:focus {
     border-radius: 8px;
 }
 
-#selectedImagesContainer img:hover {
-    transform: scale(1.05);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
 .image-dialog {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: rgba(0, 0, 0, 0.9);
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -190,21 +215,21 @@ input:hover, input:focus, select:hover, select:focus {
 
 .image-dialog img {
     max-width: 90%;
-    max-height: 80%;
+    max-height: 80vh;
     object-fit: contain;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
+/* Footer */
 footer {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    width: 100%;
+    background-color: rgba(30, 39, 46, 0.95);
     color: white;
     text-align: center;
-    padding: 10px 0;
-    background-color: rgba(30, 39, 46, 0.9);
+    padding: 15px;
+    width: 100%;
+    box-sizing: border-box;
+    margin-top: 2rem;
 }
 
 /* Mobile Responsive Styles */
@@ -213,51 +238,27 @@ footer {
         font-size: 14px;
     }
 
-    .landing h1 {
-        font-size: 2rem;
-        margin-bottom: 1rem;
-    }
-
-    .landing p {
-        font-size: 1.1rem;
-        padding: 0 15px;
-    }
-
     .container {
+        width: calc(100% - 2rem);
         padding: 15px;
         margin: 1rem;
-        margin-bottom: 100px;
     }
 
-    .container:hover {
-        transform: none;
+    .btn-container {
+        flex-direction: column;
     }
 
     .btn-primary, .btn-secondary {
         width: 100%;
-        margin: 5px 0;
-        padding: 12px 20px;
-    }
-
-    .btn:hover {
-        transform: none;
-    }
-
-    .agent_question {
-        font-size: 1.2rem;
-    }
-
-    #output {
-        height: 250px;
+        margin: 0;
+        padding: 14px 20px;
     }
 
-    #reportContainer {
-        padding: 15px;
-        font-size: 16px !important;
+    #selectedImagesContainer {
+        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     }
 
     #selectedImagesContainer img {
-        width: 100px;
         height: 100px;
     }
 
@@ -266,25 +267,20 @@ footer {
         max-height: 70vh;
     }
 
-    footer {
-        position: relative;
-        padding: 15px 0;
+    #output, #reportContainer {
+        padding: 12px;
     }
 }
 
-/* Additional tablet-specific adjustments */
+/* Tablet Responsive Styles */
 @media screen and (min-width: 769px) and (max-width: 1024px) {
     .container {
+        width: calc(100% - 4rem);
         margin: 2rem;
-        margin-bottom: 120px;
     }
 
-    .landing h1 {
-        font-size: 2.8rem;
-    }
-
-    .landing p {
-        font-size: 1.3rem;
+    .btn-container {
+        justify-content: center;
     }
 }
 
@@ -300,6 +296,34 @@ footer {
     }
 
     input:focus, select:focus {
-        background-color: rgba(255, 255, 255, 0.2);
+        background-color: rgba(255, 255, 255, 0.15);
+    }
+
+    .btn:active {
+        transform: translateY(1px);
+        opacity: 0.8;
+    }
+}
+
+/* Print styles */
+@media print {
+    body {
+        background: white;
+        color: black;
+    }
+
+    .container {
+        box-shadow: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    #output, #reportContainer {
+        border: 1px solid #ddd;
+    }
+
+    footer {
+        position: fixed;
+        bottom: 0;
     }
 }