Add back button to each page

This commit is contained in:
Peter Stockings
2024-12-26 17:46:45 +11:00
parent 2a0d997927
commit 7e58114cc4
7 changed files with 171 additions and 81 deletions

View File

@@ -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 %}