membersystem/src/project/templates/base.html

122 lines
4.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% load utils %}
{% load i18n %}
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>{% block head_title %}{% endblock %} {{ site.name }}</title>
<link rel="stylesheet" href="{% static "fonts/inter.css" %}">
<link rel="stylesheet" href="{% static "css/style.css" %}">
<link rel="stylesheet" href="{% static "css/dark-style.css" %}">
<script>
const savedTheme = localStorage.getItem('theme');
if (savedTheme === "dark" || (savedTheme == null && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
document.querySelector('html').classList.add('dark');
}
</script>
</head>
<body>
<header>
<h1> data.coop membersystem </h1>
<div>
<a id="theme-switcher" title="Switch theme">
<svg id="switch-icon"
width="20.00033mm"
height="20.000334mm"
viewBox="0 0 20.00033 20.000334"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g id="layer1">
<path id="path1"
style="fill-opacity:1;stroke:none;stroke-width:0.697782;stroke-linecap:round"
d="M 9.999906,20.000334 A 10,10 0 0 0 20.000329,9.999911 10,10 0 0 0 9.999906,0 10,10 0 0 0 0,9.999911 10,10 0 0 0 9.999906,20.000334 Z m 0,-2.00039 V 1.99988 a 8,8 0 0 1 8.000023,8.000031 8,8 0 0 1 -8.000023,8.000033 z" />
</g>
</svg>
</a>
<a id="logout" href="{% url "account_logout" %}">Log out</a>
</div>
</header>
<main>
<aside>
<div>
<figure></figure>
<h2>{{ user }}</h2>
{% if current_membership %}
<dl>
<dt>Membership</dt>
<dd>
Active
</dd>
<dt>Period</dt>
<dd>
Until {{ current_period.upper }} <span class="time_remaining">({{ current_period.upper|timeuntil }})</span>
</dd>
<dt>Membership type</dt>
<dd>Normal member</dd>
</dl>
{% else %}
Your membership status will be displayed here in the future.
{% endif %}
</div>
</aside>
<nav>
<ol>
<li>
<a href="/" class="{% active_path "index" "current" %}">
Dashboard
</a>
</li>
{% comment %}
<li>
<a href="/services" class="{% active_path "services" "current" %}">
Services
</a>
</li>
{% endcomment %}
<li>
<a href="{% url "account_email" %}" class="{% active_path "account_email" "current" %}">
Email
</a>
</li>
{% if perms.membership.administrate_memberships %}
<li>
<a href="{% url "admin-members:list" %}" class="{% active_path "admin-members:list" "current" %}">
Admin
</a>
</li>
{% endif %}
</ol>
</nav>
<article>
{% block content %}{% endblock %}
</article>
</main>
<footer>
data.coop membersystem version 0.0.1
</footer>
<script>
const themeSwitcher = document.getElementById('theme-switcher');
themeSwitcher.addEventListener('click', function() {
themeSwitcher.classList.toggle('active')
let isDark = document.querySelector('html').classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});
</script>
</body>
</html>