created quality page

py_app/app/static/style.css

@@ -556,4 +556,87 @@ body.dark-mode .scan-table tr:nth-child(odd) {
     .scan-form-card, .scan-table-card {
         width: 100%; /* Make both cards take full width */
     }
+}
+
+/* Dashboard container */
+.dashboard-container {
+    display: flex;
+    flex-wrap: wrap; /* Allow wrapping to the next row if needed */
+    justify-content: space-between; /* Distribute cards evenly */
+    gap: 20px; /* Add spacing between the cards */
+    margin: 20px auto; /* Center the container */
+    max-width: 1200px; /* Optional: Limit the maximum width of the container */
+}
+
+/* Full-width card for the dashboard */
+.dashboard-full-width-card {
+    flex: 0 0 100%; /* Take up the full width of the container */
+    text-align: center;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
+}
+
+/* Individual cards for the dashboard */
+.dashboard-card {
+    flex: 1 1 calc(25% - 20px); /* Ensure cards are evenly distributed */
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
+}
+
+/* Light mode styles for dashboard cards */
+body.light-mode .dashboard-card,
+body.light-mode .dashboard-full-width-card {
+    background: #fff;
+    color: #000;
+    border: 1px solid #ddd;
+}
+
+/* Dark mode styles for dashboard cards */
+body.dark-mode .dashboard-card,
+body.dark-mode .dashboard-full-width-card {
+    background: #1e1e1e;
+    color: #fff;
+    border: 1px solid #444;
+}
+
+/* Ensure cards have consistent height */
+.dashboard-card h3 {
+    margin-bottom: 15px;
+    font-size: 1.5em;
+}
+
+.dashboard-card p {
+    margin-bottom: 20px;
+    color: inherit; /* Inherit text color from the card */
+}
+
+.dashboard-card .btn {
+    display: inline-block;
+    padding: 10px 20px;
+    font-size: 1em;
+    color: #fff;
+    background-color: #007bff;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+.dashboard-card .btn:hover {
+    background-color: #0056b3;
+}
+
+/* Responsive design for smaller screens */
+@media (max-width: 768px) {
+    .dashboard-card {
+        flex: 1 1 100%; /* Stack cards vertically on smaller screens */
+    }
+
+    .dashboard-full-width-card {
+        flex: 1 1 100%; /* Ensure the full-width card spans the entire width */
+    }
 }