From 66fc9eac772cccf0edec7d2b84896591b8d9fdc9 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Sat, 13 Apr 2024 08:16:00 +0200
Subject: [PATCH] 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           | 62 +++++++++++++++++++
 .../templates/pix360core/converter.html       |  1 +
 2 files changed, 63 insertions(+)
 create mode 100644 src/pix360core/static/css/style.css

diff --git a/src/pix360core/static/css/style.css b/src/pix360core/static/css/style.css
new file mode 100644
index 0000000..81eecaf
--- /dev/null
+++ b/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;
+}
diff --git a/src/pix360core/templates/pix360core/converter.html b/src/pix360core/templates/pix360core/converter.html
index e6190f3..adcd592 100644
--- a/src/pix360core/templates/pix360core/converter.html
+++ b/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>