Add back button to each page

app/static/css/tailwind.css

@@ -640,6 +640,14 @@ video {
   top: 1rem;
 }
 
+.top-6 {
+  top: 1.5rem;
+}
+
+.top-5 {
+  top: 1.25rem;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -653,6 +661,16 @@ video {
   margin-right: auto;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -774,6 +792,18 @@ video {
   height: 0.75rem;
 }
 
+.h-28 {
+  height: 7rem;
+}
+
+.h-32 {
+  height: 8rem;
+}
+
+.h-44 {
+  height: 11rem;
+}
+
 .w-16 {
   width: 4rem;
 }
@@ -806,6 +836,18 @@ video {
   width: 0.75rem;
 }
 
+.w-28 {
+  width: 7rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.w-44 {
+  width: 11rem;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1178,6 +1220,10 @@ video {
   padding-top: 1.5rem;
 }
 
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
 .text-left {
   text-align: left;
 }

app/templates/add_reading.html

@@ -1,6 +1,15 @@
 {% extends "_layout.html" %}
 {% block content %}
-<div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md">
+<div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md relative">
+    <!-- Cancel Button (Top-Left) -->
+    <a href="{{ request.referrer if request.referrer else url_for('main.dashboard') }}"
+        class="absolute top-5 left-4 flex items-center text-gray-600 hover:text-gray-800">
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24"
+            stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+        </svg>
+        <span>Back</span>
+    </a>
     <h1 class="text-3xl font-bold text-center text-gray-800 mb-6">Add Reading</h1>
     <form method="POST" action="{{ url_for('main.add_reading') }}" novalidate class="space-y-6">
         {{ form.hidden_tag() }}

app/templates/confirm_delete.html

@@ -1,28 +1,40 @@
 {% extends "_layout.html" %}
 
 {% block content %}
-<div class="max-w-lg mx-auto bg-white p-6 rounded-lg shadow-md mt-10">
-    <h2 class="text-lg font-bold text-gray-800">Confirm Deletion</h2>
-    <p class="text-sm text-gray-600 mt-2">Are you sure you want to delete the following reading?</p>
+<div class="max-w-lg mx-auto p-4 relative">
+    <!-- Cancel Button (Top-Left) -->
+    <a href="{{ request.referrer if request.referrer else url_for('main.dashboard') }}"
+        class="absolute top-5 left-4 flex items-center text-gray-600 hover:text-gray-800">
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24"
+            stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+        </svg>
+        <span>Back</span>
+    </a>
+    <h2 class="text-2xl font-bold mb-4 text-center">Confirm Deletion</h2>
+    <div class="bg-white p-8 rounded-lg shadow-md">
+        <p class="text-sm text-gray-600 mt-2">Are you sure you want to delete the following reading?</p>
 
-    <!-- Reading Details -->
-    <div class="mt-4 p-4 bg-gray-100 rounded">
-        <p><strong>Timestamp:</strong> {{ reading.timestamp.strftime('%d %b %Y, %I:%M %p') }}</p>
-        <p><strong>Systolic:</strong> {{ reading.systolic }} mmHg</p>
-        <p><strong>Diastolic:</strong> {{ reading.diastolic }} mmHg</p>
-        <p><strong>Heart Rate:</strong> {{ reading.heart_rate }} bpm</p>
-    </div>
+        <!-- Reading Details -->
+        <div class="mt-4 p-4 bg-gray-100 rounded">
+            <p><strong>Timestamp:</strong> {{ reading.timestamp.strftime('%d %b %Y, %I:%M %p') }}</p>
+            <p><strong>Systolic:</strong> {{ reading.systolic }} mmHg</p>
+            <p><strong>Diastolic:</strong> {{ reading.diastolic }} mmHg</p>
+            <p><strong>Heart Rate:</strong> {{ reading.heart_rate }} bpm</p>
+        </div>
 
-    <!-- Confirmation Buttons -->
-    <div class="mt-6 flex justify-end space-x-2">
-        <a href="{{ url_for('main.dashboard') }}" class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400">
-            Cancel
-        </a>
-        <form method="POST" action="{{ url_for('main.confirm_delete', reading_id=reading.id) }}">
-            <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">
-                Confirm
-            </button>
-        </form>
+        <!-- Confirmation Buttons -->
+        <div class="mt-6 flex justify-end space-x-2">
+            <a href="{{ url_for('main.dashboard') }}"
+                class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400">
+                Cancel
+            </a>
+            <form method="POST" action="{{ url_for('main.confirm_delete', reading_id=reading.id) }}">
+                <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">
+                    Confirm
+                </button>
+            </form>
+        </div>
     </div>
 </div>
 {% endblock %}

app/templates/dashboard.html

@@ -288,7 +288,7 @@
                 <!-- Days of the Month -->
                 {% for day in range(1, days_in_month + 1) %}
                 {% set current_day = current_date.replace(day=day) %}
-                <div class="border p-1 md:p-4 rounded-lg bg-gray-50 relative">
+                <div class="border p-1 md:p-4 bg-gray-50 relative">
                     <!-- Day Label -->
                     <div class="text-sm font-bold text-gray-500 text-left">{{ current_day.day }}</div>
 

app/templates/data.html

@@ -1,8 +1,17 @@
 {% extends "_layout.html" %}
 
 {% block content %}
-<div class="max-w-4xl mx-auto p-4">
-    <h1 class="text-2xl font-bold mb-4">Import/Export Data</h1>
+<div class="max-w-4xl mx-auto p-4 relative">
+    <!-- Cancel Button (Top-Left) -->
+    <a href="{{ request.referrer if request.referrer else url_for('main.dashboard') }}"
+        class="absolute top-5 left-4 flex items-center text-gray-600 hover:text-gray-800">
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24"
+            stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+        </svg>
+        <span>Back</span>
+    </a>
+    <h1 class="text-2xl font-bold mb-4 text-center">Import/Export Data</h1>
 
     <!-- Import Data Section -->
     <div class="bg-white p-6 rounded-lg shadow-md mb-6">

app/templates/edit_reading.html

@@ -1,9 +1,9 @@
 {% extends "_layout.html" %}
 {% block content %}
-<div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md relative">
+<div class="max-w-lg mx-auto p-4 relative">
     <!-- Cancel Button (Top-Left) -->
-    <a href="{{ url_for('main.dashboard') }}"
-        class="absolute top-4 left-4 flex items-center text-gray-600 hover:text-gray-800">
+    <a href="{{ request.referrer if request.referrer else url_for('main.dashboard') }}"
+        class="absolute top-5 left-4 flex items-center text-gray-600 hover:text-gray-800">
         <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24"
             stroke="currentColor" stroke-width="2">
             <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
@@ -22,8 +22,9 @@
 
     </a>
 
-    <h1 class="text-3xl font-bold text-center text-gray-800 mb-6">Edit Reading</h1>
-    <form method="POST" action="{{ url_for('main.edit_reading', reading_id=reading.id) }}" novalidate>
+    <h1 class="text-2xl font-bold mb-4 text-center">Edit Reading</h1>
+    <form method="POST" action="{{ url_for('main.edit_reading', reading_id=reading.id) }}" novalidate
+        class="bg-white p-8 rounded-lg shadow-md">
         {{ form.hidden_tag() }}
 
         <!-- Timestamp Field -->

app/templates/profile.html

@@ -1,58 +1,71 @@
 {% extends "_layout.html" %}
 {% block content %}
-<div class="max-w-2xl mx-auto bg-white p-6 rounded-lg shadow-md">
-    <h1 class="text-2xl font-bold text-center mb-6">Profile Settings</h1>
+<div class="max-w-4xl mx-auto p-4 relative">
+    <!-- Cancel Button (Top-Left) -->
+    <a href="{{ request.referrer if request.referrer else url_for('main.dashboard') }}"
+        class="absolute top-5 left-4 flex items-center text-gray-600 hover:text-gray-800">
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24"
+            stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+        </svg>
+        <span>Back</span>
+    </a>
+    <h1 class="text-2xl font-bold mb-4 text-center">Profile Settings</h1>
 
-    <div class="flex items-center justify-center mb-4">
-        {% if profile.profile_pic %}
-        <img src="{{ url_for('user.profile_image', user_id=current_user.id) }}" alt="Profile Picture"
-            class="w-24 h-24 rounded-full border">
-        {% else %}
-        <img src="{{ url_for('static', filename='default.png') }}" alt="Default Profile Picture"
-            class="w-24 h-24 rounded-full border">
-        {% endif %}
+    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
+
+        <div class="flex items-center justify-center mb-4">
+            {% if profile.profile_pic %}
+            <img src="{{ url_for('user.profile_image', user_id=current_user.id) }}" alt="Profile Picture"
+                class="w-44 h-44 rounded-full border">
+            {% else %}
+            <img src="{{ url_for('static', filename='default.png') }}" alt="Default Profile Picture"
+                class="w-44 h-44 rounded-full border">
+            {% endif %}
+        </div>
+
+
+        <form method="POST" enctype="multipart/form-data">
+            {{ form.hidden_tag() }}
+
+            <div class="mb-4">
+                {{ form.name.label(class="block text-sm font-medium text-gray-700") }}
+                {{ form.name(class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500") }}
+            </div>
+
+            <div class="mb-4">
+                {{ form.email.label(class="block text-sm font-medium text-gray-700") }}
+                {{ form.email(class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500") }}
+            </div>
+
+            <div class="mb-4">
+                {{ form.profile_pic.label(class="block text-sm font-medium text-gray-700") }}
+                {{ form.profile_pic(class="w-full p-2 border rounded focus:outline-none focus:ring-2
+                focus:ring-blue-500")
+                }}
+            </div>
+
+            <div class="mb-4">
+                {{ form.systolic_threshold.label(class="block text-sm font-medium text-gray-700") }}
+                {{ form.systolic_threshold(class="w-full p-2 border rounded focus:outline-none focus:ring-2
+                focus:ring-blue-500") }}
+            </div>
+
+            <div class="mb-4">
+                {{ form.diastolic_threshold.label(class="block text-sm font-medium text-gray-700") }}
+                {{ form.diastolic_threshold(class="w-full p-2 border rounded focus:outline-none focus:ring-2
+                focus:ring-blue-500") }}
+            </div>
+
+            <div class="mb-4 flex items-center">
+                {{ form.dark_mode }}
+                {{ form.dark_mode.label(class="ml-2 text-sm font-medium text-gray-700") }}
+            </div>
+
+            <div>
+                {{ form.submit(class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700") }}
+            </div>
+        </form>
     </div>
-
-
-    <form method="POST" enctype="multipart/form-data">
-        {{ form.hidden_tag() }}
-
-        <div class="mb-4">
-            {{ form.name.label(class="block text-sm font-medium text-gray-700") }}
-            {{ form.name(class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500") }}
-        </div>
-
-        <div class="mb-4">
-            {{ form.email.label(class="block text-sm font-medium text-gray-700") }}
-            {{ form.email(class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500") }}
-        </div>
-
-        <div class="mb-4">
-            {{ form.profile_pic.label(class="block text-sm font-medium text-gray-700") }}
-            {{ form.profile_pic(class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500")
-            }}
-        </div>
-
-        <div class="mb-4">
-            {{ form.systolic_threshold.label(class="block text-sm font-medium text-gray-700") }}
-            {{ form.systolic_threshold(class="w-full p-2 border rounded focus:outline-none focus:ring-2
-            focus:ring-blue-500") }}
-        </div>
-
-        <div class="mb-4">
-            {{ form.diastolic_threshold.label(class="block text-sm font-medium text-gray-700") }}
-            {{ form.diastolic_threshold(class="w-full p-2 border rounded focus:outline-none focus:ring-2
-            focus:ring-blue-500") }}
-        </div>
-
-        <div class="mb-4 flex items-center">
-            {{ form.dark_mode }}
-            {{ form.dark_mode.label(class="ml-2 text-sm font-medium text-gray-700") }}
-        </div>
-
-        <div>
-            {{ form.submit(class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700") }}
-        </div>
-    </form>
 </div>
 {% endblock %}