146 lines
7.4 KiB
HTML
146 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}BP Tracker{% endblock %}</title>
|
|
<link href="/static/css/tailwind.css" rel="stylesheet">
|
|
<script src="/static/js/alpine.min.js" defer></script>
|
|
</head>
|
|
|
|
<body class="bg-gray-100 text-gray-800">
|
|
<nav class="flex items-center justify-between flex-wrap p-6 fixed w-full z-10 top-0" x-data="{ isOpen: false }"
|
|
@keydown.escape="isOpen = false" :class="{ 'shadow-lg bg-indigo-900' : isOpen , 'bg-gray-800' : !isOpen}">
|
|
<!--Logo etc-->
|
|
<div class="flex items-center flex-shrink-0 text-white mr-6">
|
|
<a class="text-white no-underline hover:text-white hover:no-underline" href="#">
|
|
<span class="text-2xl pl-2"><i class="em em-grinning"></i> Blood Pressure</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!--Toggle button (hidden on large screens)-->
|
|
<button @click="isOpen = !isOpen" type="button"
|
|
class="block lg:hidden px-2 text-gray-500 hover:text-white focus:outline-none focus:text-white"
|
|
:class="{ 'transition transform-180': isOpen }">
|
|
<svg class="h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path x-show="isOpen" fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z" />
|
|
<path x-show="!isOpen" fill-rule="evenodd"
|
|
d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!--Menu-->
|
|
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto"
|
|
:class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }" @click.away="isOpen = false"
|
|
x-show.transition="true">
|
|
<ul class="pt-6 lg:pt-0 list-reset lg:flex justify-end flex-1 items-center">
|
|
{% if current_user.is_authenticated %}
|
|
<li class="mr-3">
|
|
<a class="inline-block py-2 px-4 no-underline
|
|
{% if request.path == url_for('main.dashboard') %}
|
|
text-white
|
|
{% else %}
|
|
text-gray-600 hover:text-gray-200 hover:text-underline
|
|
{% endif %}" href="{{ url_for('main.dashboard') }}" @click="isOpen = false">Dashboard
|
|
</a>
|
|
</li>
|
|
<li class="mr-3">
|
|
<a class="inline-block py-2 px-4 no-underline
|
|
{% if request.path == url_for('main.manage_data') %}
|
|
text-white
|
|
{% else %}
|
|
text-gray-600 hover:text-gray-200 hover:text-underline
|
|
{% endif %}" href="{{ url_for('main.manage_data') }}" @click="isOpen = false">Data
|
|
</a>
|
|
</li>
|
|
<li class="mr-3">
|
|
<a class="flex items-center gap-2 text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4"
|
|
href="{{ url_for('user.profile') }}" @click="isOpen = false">
|
|
{% if current_user.profile and current_user.profile.profile_pic %}
|
|
<img src="data:image/png;base64,{{ current_user.profile.profile_pic }}" alt="Profile Picture"
|
|
class="w-8 h-8 rounded-full border-2 border-white object-cover group-hover:scale-105 transition">
|
|
{% else %}
|
|
<!-- Default SVG Icon -->
|
|
<div
|
|
class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center border-2 border-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5 text-gray-600"
|
|
viewBox="0 0 24 24">
|
|
<path
|
|
d="M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
|
|
</svg>
|
|
</div>
|
|
{% endif %}
|
|
<span class="hidden sm:inline text-sm font-medium group-hover:underline
|
|
{% if request.path == url_for('user.profile') %}
|
|
text-white
|
|
{% else %}
|
|
text-gray-600 hover:text-gray-200 hover:text-underline
|
|
{% endif %}">Profile</span>
|
|
</a>
|
|
</li>
|
|
<li class="mr-3">
|
|
<a class="inline-block py-2 px-4 no-underline
|
|
{% if request.path == url_for('auth.logout') %}
|
|
text-white
|
|
{% else %}
|
|
text-gray-600 hover:text-gray-200 hover:text-underline
|
|
{% endif %}" href="{{ url_for('auth.logout') }}" @click="isOpen = false">Logout
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="mr-3">
|
|
<a class="inline-block py-2 px-4 no-underline
|
|
{% if request.path == url_for('auth.login') %}
|
|
text-white
|
|
{% else %}
|
|
text-gray-600 hover:text-gray-200 hover:text-underline
|
|
{% endif %}" href="{{ url_for('auth.login') }}" @click="isOpen = false">Login
|
|
</a>
|
|
</li>
|
|
<li class="mr-3">
|
|
<a class="inline-block py-2 px-4 no-underline
|
|
{% if request.path == url_for('auth.signup') %}
|
|
text-white
|
|
{% else %}
|
|
text-gray-600 hover:text-gray-200 hover:text-underline
|
|
{% endif %}" href="{{ url_for('auth.signup') }}" @click="isOpen = false">Signup
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
{% with messages = get_flashed_messages(with_categories=True) %}
|
|
{% if messages %}
|
|
<div class="container mx-auto mt-4 space-y-4">
|
|
{% for category, message in messages %}
|
|
<div class="flex items-center justify-between p-4 rounded-lg shadow text-white bg-{{ 'red' if category == 'danger' else 'green' }}-500"
|
|
x-data="{ visible: true }" x-show="visible" x-transition.duration.300ms>
|
|
<span>{{ message }}</span>
|
|
<button @click="visible = false" class="text-xl font-bold">×</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto mt-24">
|
|
{% block content %}
|
|
<!-- Content goes here -->
|
|
{% endblock %}
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-gray-800 text-white py-4 mt-10">
|
|
<div class="container mx-auto text-center">
|
|
<p>© 2024 BP Tracker. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
|
|
</html> |