feat: Add custom styling for the converter page

Introduced a new stylesheet (`style.css`) to enhance the UI/UX of the converter page. This stylesheet implements a clean and modern aesthetic across the page, with improvements to background color, font choices, form appearance, and button styling. Centralized alignment for headers and adjustments to the modal dialog width for better responsiveness are also included. This effort aims at providing a more visually appealing and user-friendly interface, directly addressing feedback regarding the previous lack of custom styling. Additionally, integrated the custom stylesheet into the converter template to ensure these styles are applied.

src/pix360core/static/css/style.css

@@ -0,0 +1,62 @@
+body {
+  background-color: #f8f9fa;
+  font-family: "Arial", sans-serif;
+}
+
+.container {
+  max-width: 800px;
+}
+
+h1,
+h2 {
+  text-align: center;
+  color: #333;
+}
+
+h2 a {
+  text-decoration: none;
+  color: #007bff;
+}
+
+h2 a:hover {
+  text-decoration: underline;
+}
+
+form {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
+}
+
+.form-group label {
+  font-weight: bold;
+}
+
+.form-control {
+  margin-bottom: 10px;
+}
+
+.btn {
+  margin-right: 10px;
+}
+
+#options {
+  display: none;
+}
+
+#cards {
+  margin-top: 20px;
+}
+
+.modal-dialog {
+  max-width: 90%;
+}
+
+.modal-content {
+  background-color: #fff;
+}
+
+#panorama {
+  height: 500px;
+}

src/pix360core/templates/pix360core/converter.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="{% static "dist/css/bootstrap.min.css" %}" type="text/css"> 
     <link rel="stylesheet" href="{% static "dist/css/pannellum.css" %}" type="text/css">
+    <link rel="stylesheet" href="{% static "css/style.css" %}" type="text/css">
     <link rel="icon" type="image/png" href="{% static "img/favicon.png" %}">
     <title>Panorama Image Export</title>
   </head>