added scan page

py_app/app/static/style.css

@@ -6,8 +6,8 @@ body {
 }
 
 .container {
-    width: 100%;
-    margin: auto;
+    width: 95%;
+    margin: 15px auto; /* Add 15px top margin */
     overflow: hidden;
     padding: 0; /* Remove padding */
     background: none; /* Remove white background */
@@ -443,18 +443,19 @@ body.dark-mode .popup-content {
 .form-centered {
     display: flex;
     flex-direction: column;
-    align-items: center; /* Center the input fields */
+    align-items: center;
+    margin-bottom: 20px;
 }
 
 .form-centered label {
-    width: 75%; /* Align labels with the input fields */
+    width: 100%;
     text-align: left;
     margin-bottom: 5px;
     font-weight: bold;
 }
 
 .form-centered input {
-    width: 75%; /* Set input fields to 75% of the card width */
+    width: 80%;
     padding: 10px;
     margin-bottom: 15px;
     font-size: 1em;
@@ -462,19 +463,44 @@ body.dark-mode .popup-content {
     border-radius: 5px;
 }
 
-.form-centered button {
-    width: 50%; /* Center the button and reduce its width */
-    padding: 10px;
-    font-size: 1em;
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
+.scan-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
 }
 
-.form-centered button:hover {
-    background-color: #0056b3;
+.scan-table th, .scan-table td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: center;
+}
+
+.scan-table th {
+    background-color: #f4f4f4;
+    font-weight: bold;
+}
+
+/* Dark mode styles for the scan table */
+body.dark-mode .scan-table {
+    background-color: #1e1e1e; /* Dark background for the table */
+    color: #fff; /* Light text for better contrast */
+}
+
+body.dark-mode .scan-table th {
+    background-color: #333; /* Darker background for table headers */
+    color: #fff; /* Light text for headers */
+}
+
+body.dark-mode .scan-table td {
+    color: #ddd; /* Slightly lighter text for table cells */
+}
+
+body.dark-mode .scan-table tr:nth-child(even) {
+    background-color: #2a2a2a; /* Slightly lighter background for even rows */
+}
+
+body.dark-mode .scan-table tr:nth-child(odd) {
+    background-color: #1e1e1e; /* Match the table background for odd rows */
 }
 
 /* Container for the cards */
@@ -487,9 +513,66 @@ body.dark-mode .popup-content {
     max-width: 1200px; /* Optional: Limit the maximum width of the container */
 }
 
+/* Container for the scan page */
+.scan-container {
+    display: flex;
+    flex-wrap: wrap; /* Allow wrapping on smaller screens */
+    gap: 20px; /* Add 20px spacing between the cards */
+    margin: 20px auto; /* Center the container vertically and horizontally */
+    justify-content: center; /* Center the cards horizontally */
+    align-items: stretch; /* Make all cards the same height */
+}
+
+/* Input Form Card */
+.scan-form-card {
+    flex: 0 0 500px; /* Fixed width of 500px */
+    max-width: 500px;
+    background: #fff;
+    border-radius: 5px;
+    padding: 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column; /* Ensure content inside the card is vertically aligned */
+}
+
+/* Latest Scans Card */
+.scan-table-card {
+    flex: 2 1 1000px; /* Take up twice the space compared to other cards */
+    max-width: 1000px; /* Ensure the card doesn't exceed 1000px in width */
+    background: #fff;
+    border-radius: 5px;
+    padding: 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    overflow-x: auto; /* Allow horizontal scrolling for the table */
+    display: flex;
+    flex-direction: column; /* Ensure content inside the card is vertically aligned */
+}
+
+/* Table styles */
+.scan-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+.scan-table th, .scan-table td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: center;
+}
+
+.scan-table th {
+    background-color: #f4f4f4;
+    font-weight: bold;
+}
+
 /* Media query for smaller screens */
 @media (max-width: 768px) {
     .card {
         flex: 1 1 100%; /* Make cards take full width on smaller screens */
     }
+
+    .scan-form-card, .scan-table-card {
+        flex: 1 1 100%; /* Make both cards take full width on smaller screens */
+    }
 }