peterstockings/bloodpressure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign BP tracker with lightweight views and unobtrusive save confirmations

Browse Source
This commit is contained in:
Peter Stockings
2026-09-08 15:07:57 +10:00
parent 25d1774e53
commit 87b60aac9b
40 changed files with 2693 additions and 2553 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/auth/signup.html
+4 -111
View File
@@ -1,111 +1,4 @@
{% extends "_layout.html" %}
{% block content %}
<div class="max-w-md mx-auto mt-12 mb-20">
<div class="bg-white p-10 rounded-3xl shadow-2xl border border-gray-100 relative overflow-hidden">
<!-- Decorative background element -->
<div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-primary-400 to-primary-600"></div>
<h1 class="text-3xl font-extrabold text-center mb-2 text-gray-900">Create Account</h1>
<p class="text-center text-gray-500 mb-8">Join us to start tracking your health.</p>
<form method="POST" action="{{ url_for('auth.signup') }}" novalidate>
{{ form.hidden_tag() }}
<!-- Username Field -->
<div class="mb-5">
{{ form.username.label(class="block text-sm font-semibold text-gray-700 mb-2") }}
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
clip-rule="evenodd" />
</svg>
</div>
{{ form.username(class="w-full pl-11 p-3 border border-gray-300 rounded-xl focus:outline-none
focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all shadow-sm bg-gray-50
focus:bg-white") }}
</div>
{% for error in form.username.errors %}
<p class="text-sm text-red-500 mt-2 font-medium flex items-center">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
clip-rule="evenodd"></path>
</svg>
{{ error }}
</p>
{% endfor %}
</div>
<!-- Password Field -->
<div class="mb-5">
{{ form.password.label(class="block text-sm font-semibold text-gray-700 mb-2") }}
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</div>
{{ form.password(class="w-full pl-11 p-3 border border-gray-300 rounded-xl focus:outline-none
focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all shadow-sm bg-gray-50
focus:bg-white") }}
</div>
{% for error in form.password.errors %}
<p class="text-sm text-red-500 mt-2 font-medium flex items-center">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
clip-rule="evenodd"></path>
</svg>
{{ error }}
</p>
{% endfor %}
</div>
<!-- Confirm Password Field -->
<div class="mb-6">
{{ form.confirm_password.label(class="block text-sm font-semibold text-gray-700 mb-2") }}
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</div>
{{ form.confirm_password(class="w-full pl-11 p-3 border border-gray-300 rounded-xl
focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all
shadow-sm bg-gray-50 focus:bg-white") }}
</div>
{% for error in form.confirm_password.errors %}
<p class="text-sm text-red-500 mt-2 font-medium flex items-center">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
clip-rule="evenodd"></path>
</svg>
{{ error }}
</p>
{% endfor %}
</div>
<!-- Submit Button -->
<div class="mt-8">
{{ form.submit(class="w-full bg-primary-600 hover:bg-primary-700 text-white font-bold py-3 rounded-xl
shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-0.5 cursor-pointer")
}}
</div>
<p class="text-center mt-6 text-gray-600">
Already have an account? <a href="{{ url_for('auth.login') }}"
class="text-primary-600 hover:text-primary-800 font-bold hover:underline">Log in</a>
</p>
</form>
</div>
</div>
{% endblock %}
{% extends '_layout.html' %}
{% from 'components.html' import field %}
{% block title %}Create account · BP Tracker{% endblock %}
{% block content %}<div class="form-page auth-page"><div class="page-heading"><div><p class="eyebrow">START YOUR RECORD</p><h1>Create an account</h1><p class="muted">Keep your blood pressure readings together.</p></div></div><form method="post" class="card entry-form" novalidate>{{ form.hidden_tag() }}{{ field(form.username, autocomplete='username') }}{{ field(form.password, autocomplete='new-password') }}{{ field(form.confirm_password, autocomplete='new-password') }}{% if form.csrf_token is defined and form.csrf_token.errors %}<p class="field-error" role="alert">Your form expired. Please try again.</p>{% endif %}<button class="button primary full-width" type="submit">Create account</button><p class="muted small">Already tracking? <a href="{{ url_for('auth.login') }}">Log in</a></p></form></div>{% endblock %}