styling on twoMolecules pages

Buringskul · Jan 12, 2024 · ba58a05 · ba58a05
1 parent 41ed906
commit ba58a05
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 12 deletions.
diff --git a/projectApp/templates/projectApp/oneMolecule.html b/projectApp/templates/projectApp/oneMolecule.html
@@ -29,13 +29,6 @@ <h1 class="text-center mb-4">Most Significant Subunit of a Complex Structure</h1
     </form>
 
     <button id="home" class="btn" type="submit" onclick="location.href='{% url 'home' %}'">Back to home</button>
-
-    {% comment %}
-    <form action="{% url 'home' %}" method="get">
-        <button class="btn btn-success btn-lg btn-block" type="submit">Back to home</button>
-      </form>
-
-    {% endcomment %}
 
   </div>
 {% endblock %}
diff --git a/projectApp/templates/projectApp/processedOne.html b/projectApp/templates/projectApp/processedOne.html
@@ -11,6 +11,10 @@
     max-width: 100%;
   }
 
+  .heading {
+    text-align: center;
+  }
+
   .container {
       margin-top: 50px; /* Adjust top margin for spacing */
       background-color: #F8F9FA; /* Light gray background color */
@@ -46,10 +50,10 @@
   }
 
   </style>
-  <div class="container mt-5">
+  <div class="heading">
     <h1 class="text-center mb-4">Most Significant Subunit of a Complex Structure</h1>
     <br>
-    <h2>Substructures of your molecule:</h2>
+    <h2>Substructures of your molecule</h2>
   </div>
 
   <div class ="container">

diff --git a/projectApp/templates/projectApp/processedTwo.html b/projectApp/templates/projectApp/processedTwo.html
@@ -1,12 +1,30 @@
 {% extends 'shared/base.html' %}
 {% block content %}
       <style>
+      body {
+    background-color: #d5ebd8;
+  }
+
   img {
     display: block;
     margin-left: auto;
     margin-right: auto;
     float: left;
   }
+
+  .btn-custom {
+      background-color: #005018; /* Green background color */
+      color: white; /* White text color */
+      padding: 15px; /* Add padding to the button */
+      border: none; /* Remove button border */
+      border-radius: 5px; /* Add border radius for rounded corners */
+      cursor: pointer; /* Add cursor pointer on hover */
+    }
+
+  .return-btn {
+    display: flex;
+    justify-content: center;
+  }
       </style>
       <div class="container mt-5">
             <h1 class="text-center mb-4">Most Significant Subunit of a Complex Structure</h1>
@@ -25,9 +43,10 @@ <h2>Common molecule structure is: {{ molecular_data }}</h2>
                  <img src="data:image/png;base64,{{ common_mol }}" width="90%">
             </div>
       </div>
-      <div class="col-md-6 text-center">
-            <a href="{% url 'collectInputTwo' %}"
+      <br>
+      <div class="return-btn">
+            <a href="{% url 'twoMolecule' %}"
                class="btn btn-custom btn-lg btn-block"
                value="Return">Return</a>
-      </div>
+          </div>
 {% endblock %}
diff --git a/projectApp/templates/projectApp/twoMolecule.html b/projectApp/templates/projectApp/twoMolecule.html
@@ -1,5 +1,21 @@
 {% extends 'shared/base.html' %}
 {% block content %}
+<style>
+  body {
+    background-color: #d5ebd8;
+  }
+
+  #home {
+    margin-top: 3px;
+  }
+
+  .btn {
+    background-color: #005018;
+    color: #fff;
+    border: 2px solid #005018;
+  }
+
+</style>
   <div class="container mt-5">
     <h1 class="text-center mb-4">Compare Subgraphs of Two Complex Structures</h1>
     <form action="{% url 'twoMolecule' %}" method="post">
@@ -14,5 +30,7 @@ <h1 class="text-center mb-4">Compare Subgraphs of Two Complex Structures</h1>
       </div>
       <button class="btn btn-success btn-lg btn-block" type="submit">Compare Now!</button>
     </form>
+
+    <button id="home" class="btn" type="submit" onclick="location.href='{% url 'home' %}'">Back to home</button>
   </div>
 {% endblock %}