added external server settings save to the settings page

py_app/app/static/style.css

@@ -230,12 +230,12 @@ body.dark-mode .card {
 
 /* Common card styles */
 .card {
-    width: 600px;
+    flex: 1 1 500px; /* Allow cards to grow and shrink, with a base width of 500px */
+    max-width: 500px; /* Ensure cards don't exceed 500px in width */
     background: #fff;
     border-radius: 5px;
     padding: 20px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    margin: 20px auto;
     text-align: center;
 }
 
@@ -244,6 +244,35 @@ body.dark-mode .card {
     font-size: 1.5em;
 }
 
+.card label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.card input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    font-size: 1em;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.card button {
+    padding: 10px 20px;
+    font-size: 1em;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.card button:hover {
+    background-color: #0056b3;
+}
+
 .card p {
     margin-bottom: 20px;
     color: inherit; /* Inherit text color from the card */
@@ -409,4 +438,58 @@ body.dark-mode .popup-content {
 
 .go-to-dashboard-btn:hover {
     background-color: #0056b3;
+}
+
+.form-centered {
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Center the input fields */
+}
+
+.form-centered label {
+    width: 75%; /* Align labels with the input fields */
+    text-align: left;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.form-centered input {
+    width: 75%; /* Set input fields to 75% of the card width */
+    padding: 10px;
+    margin-bottom: 15px;
+    font-size: 1em;
+    border: 1px solid #ccc;
+    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;
+}
+
+.form-centered button:hover {
+    background-color: #0056b3;
+}
+
+/* Container for the cards */
+.card-container {
+    display: flex;
+    flex-wrap: wrap; /* Allow wrapping to the next row if needed */
+    justify-content: center; /* Center the cards horizontally */
+    gap: 20px; /* Add spacing between the cards */
+    margin: 20px auto; /* Center the container */
+    max-width: 1200px; /* Optional: Limit the maximum width of the container */
+}
+
+/* Media query for smaller screens */
+@media (max-width: 768px) {
+    .card {
+        flex: 1 1 100%; /* Make cards take full width on smaller screens */
+    }
 }