Files
workout/templates/base.html
2025-02-01 21:26:52 +11:00

217 lines
15 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Workout Tracker</title>
<link rel="icon" type="image/svg+xml"
href='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="currentColor"><title>Workout Favicon</title><g><rect x="20" y="28" width="24" height="8" rx="4"/><circle cx="16" cy="32" r="8"/><circle cx="48" cy="32" r="8"/></g></svg>'>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
<link rel="stylesheet" type="text/css"
href="https://cdn.rawgit.com/dreampulse/computer-modern-web-font/master/fonts.css">
<link type="text/css" rel="stylesheet" href="/static/css/tail.select.min.css">
<script src="/static/js/tail.select.min.js"></script>
<script src="/static/js/tailwindcss@3.2.4.js"></script>
<link href="/static/css/style.css" rel="stylesheet">
<script src="/static/js/htmx.min.js" defer></script>
<script src="/static/js/hyperscript.min.js" defer></script>
<script src="/static/js/sweetalert2@11.js" defer></script>
<!-- Mermaid -->
<script src="/static/js/mermaid.min.js"></script>
<script src="/static/js/plotly-2.35.2.min.js" defer></script>
<script>
// Initialize Mermaid with startOnLoad set to false
mermaid.initialize({
startOnLoad: false, // Prevent automatic rendering
theme: 'neutral',
er: {
diagramPadding: 20,
layoutDirection: 'TB',
}
});
</script>
</head>
<body>
<nav class="bg-white border-b border-gray-200 fixed z-30 w-full">
<div class="px-3 py-3 lg:px-5 lg:pl-3">
<div class="flex items-center justify-between">
<div class="flex items-center justify-start">
<button id="toggleSidebarMobile" aria-expanded="true" aria-controls="sidebar"
class="lg:hidden mr-2 text-gray-600 hover:text-gray-900 cursor-pointer p-2 hover:bg-gray-100 focus:bg-gray-100 focus:ring-2 focus:ring-gray-100 rounded"
_="on click toggle .hidden on #sidebar then toggle .ml-64 on #main">
<svg id="toggleSidebarMobileHamburger" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"></path>
</svg>
<svg id="toggleSidebarMobileClose" class="w-6 h-6 hidden" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
<a href="#" class="text-xl font-bold flex items-center lg:ml-2.5">
<img src="https://demo.themesberg.com/windster/images/logo.svg" class="h-6 mr-2"
alt="Windster Logo">
<span class="self-center whitespace-nowrap">Workout Tracker</span>
</a>
</div>
<div class="flex items-center">
<a href="https://github.com/GabePope/WorkoutTracker"
class="ml-6 block text-slate-400 hover:text-slate-500 dark:hover:text-slate-300"><span
class="sr-only">Workout Tracker on GitHub</span><svg viewBox="0 0 16 16" class="w-6 h-6"
fill="black" aria-hidden="true">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
</path>
</svg>
</a>
</div>
</div>
</div>
</nav>
<div class="flex overflow-hidden bg-white pt-14">
<aside id="sidebar"
class="fixed hidden z-20 h-full top-0 left-0 pt-14 flex lg:flex flex-shrink-0 flex-col w-64 transition-width duration-75"
aria-label="Sidebar">
<div class="relative flex-1 flex flex-col min-h-0 border-r border-gray-200 bg-white pt-0">
<div class="flex-1 flex flex-col pb-4 overflow-y-auto">
<div class="flex-1 px-3 bg-white divide-y space-y-1">
<div class="space-y-2 pt-2">
<a hx-get="{{ url_for('dashboard') }}" hx-push-url="true" hx-target="#container"
class="text-base text-gray-900 font-normal rounded-lg flex items-center p-2 hover:bg-gray-100 group cursor-pointer {{ is_selected_page(url_for('dashboard')) }} page-link"
_="on click add .hidden to #sidebar then remove .ml-64 from #main
on htmx:afterRequest go to the top of the body">
<svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
<path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
</svg>
<span class="ml-3">Dashboard</span>
</a>
</div>
<ul class="space-y-2 pb-2 relative" hx-get="{{ url_for('get_person_list') }}"
hx-trigger="load, updatedPeople from:body" hx-indicator="#person_loader">
<!-- Overlay with Animated Spinner -->
<div id="person_loader"
class="loading-indicator inset-0 flex justify-center items-center opacity-35 p-4">
<svg class="animate-spin h-16 w-16 text-white opacity-100"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
<circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="10"
stroke-linecap="round" class="opacity-20"></circle>
<path d="M50,5 A45,45 0 0,1 95,50" stroke="currentColor" stroke-width="10"
stroke-linecap="round" class="opacity-75"></path>
</svg>
</div>
</ul>
<div class="space-y-2 pt-2">
<a hx-get="{{ url_for('sql_explorer') }}" hx-push-url="true" hx-target="#container"
class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2 cursor-pointer {{ is_selected_page(url_for('sql_explorer')) }} page-link"
_="on click add .hidden to #sidebar then remove .ml-64 from #main
on htmx:afterRequest go to the top of the body">
<svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
d="M2 5a2 2 0 012-2h12a2 2 0 012 2v1c0 1.105-1.343 2-3 2H5c-1.657 0-3-.895-3-2V5z" />
<path fill-rule="evenodd"
d="M2 11v-1c0-1.105 1.343-2 3-2h10c1.657 0 3 .895 3 2v1c0 1.105-1.343 2-3 2H5c-1.657 0-3-.895-3-2zm0 4v-1c0-1.105 1.343-2 3-2h10c1.657 0 3 .895 3 2v1c0 1.105-1.343 2-3 2H5c-1.657 0-3-.895-3-2z"
clip-rule="evenodd" />
</svg>
<span class="ml-3">SQL Explorer</span>
</a>
<a hx-get="{{ url_for('list_endpoints') }}" hx-push-url="true" hx-target="#container"
class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2 cursor-pointer {{ is_selected_page(url_for('list_endpoints')) }} page-link"
_="on click add .hidden to #sidebar then remove .ml-64 from #main
on htmx:afterRequest go to the top of the body">
<!-- Server Icon from Heroicons -->
<svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M4 5a1 1 0 011-1h10a1 1 0 011 1v1H4V5z" />
<path fill-rule="evenodd"
d="M3 7a1 1 0 011-1h12a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1V7zm1 2v4h12V9H4z"
clip-rule="evenodd" />
</svg>
<span class="ml-3">Endpoints</span>
</a>
<a hx-get="{{ url_for('settings') }}" hx-push-url="true" hx-target="#container"
class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2 cursor-pointer {{ is_selected_page(url_for('settings')) }} page-link"
_="on click add .hidden to #sidebar then remove .ml-64 from #main
on htmx:afterRequest go to the top of the body">
<svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;">
<path fill-rule="evenodd"
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd"></path>
</svg>
<span class="ml-3">Settings</span>
</a>
</div>
</div>
</div>
</div>
</aside>
<div class="h-full w-full bg-gray-50 relative overflow-y-auto lg:ml-64">
<main id="main" class="w-full ">
<div class="pt-3 md:pt-4 px-2 md:px-4" id="container">
{% block content %}
{% endblock %}
</div>
<div id="stats">
{% block stats %}
{% endblock %}
</div>
</main>
</div>
</div>
<div class="absolute top-16 right-4 m-4">
<div class="bg-white rounded shadow-md w-64" id="notifications-container">
</div>
</div>
<template id="notification-template">
<div class="bg-white rounded shadow-md w-64" _="init wait 2s then remove me end on click remove me">
<div class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
role="alert">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 20 20" data-darkreader-inline-fill=""
style="--darkreader-inline-fill: currentColor;">
<path
d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z">
</path>
</svg>
<span class="sr-only">Check icon</span>
</div>
<div class="ml-3 text-sm font-normal">${message}</div>
<button type="button"
class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
data-dismiss-target="#toast-success" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke: currentColor;"></path>
</svg>
</button>
</div>
</div>
</template>
{% block add_workout_button %}
{% endblock %}
</body>
</html>