feature/css (#29)

Reviewed-on: data.coop/membersystem#29
Co-authored-by: Halfdan Mouritzen <halfdan@robothangarskib.dk>
Co-committed-by: Halfdan Mouritzen <halfdan@robothangarskib.dk>
This commit is contained in:
Halfdan Mouritzen 2024-02-29 20:02:39 +00:00 committed by valberg
parent bdc2d8717c
commit 4112069cac
10 changed files with 703 additions and 2392 deletions

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,56 @@
html.dark body {
--splash: #5b47e0;
background: var(--dark-dark);
color: var(--medium-dust)
}
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark footer,
html.dark nav ol li a {
color: var(--medium-dust);
}
html.dark nav ol li a:not(.current):hover {
border-color: var(--medium-dust);
}
html.dark header,
html.dark main aside,
html.dark nav {
background: #1d1d1d;
}
html.dark nav {
border: none;
}
html.dark hr {
border-color: var(--twilight);
}
html.dark main aside div,
html.dark article div.content-view {
background: var(--dark-twilight);
}
html.dark article table tbody {
background: var(--dark-twilight);
}
html.dark article table tbody tr:nth-child(2n+1) {
background: var(--dark);
}
html.dark article table tbody tr:nth-child(2n+1) td {
border-top: 1px solid var(--dark-dark);
border-bottom: 1px solid var(--dark-dark);
}
html.dark article table tbody tr:last-child td {
border-bottom: var(--half-space) solid var(--twilight);
}

View file

@ -1,348 +1,573 @@
/* Reset */
*, *::before, *::after {
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
body {
line-height: 1.5;
}
img, picture, video, canvas, svg {
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
input,
button,
textarea,
select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
#root, #__next {
#root,
#__next {
isolation: isolate;
}
/* Variables */
:root {
/* Colors */
--light : #fff;
--light-dust : #f6f6f6;
--dust : #f1f1f1;
--medium-dust : #dadada;
--dark-dust : #bfbfbf;
--fade : #878787;
--twilight : #4a4a4a;
--dark : #2a2a2a;
--custard : #f0dcac;
--water : #a8f3f4;
--splash : #4b3aba;
--light: #ffffff;
--light-dust: #fefef9;
--dust: #f4f1ef;
--medium-dust: #dadada;
--dark-dust: #bfbfbf;
--fade: #878787;
--twilight: #4a4a4a;
--dark-twilight: #2f2f2f;
--dark: #2a2a2a;
--dark-dark: #121212;
--light-custard: #eee7d5;
--custard: #f0dcac;
--dark-custard: #d4c7a9;
--water: #a8f3f4;
--splash: #4b3aba;
/* Sizes */
--space : 12px;
--double-space : calc(var(--space) * 2);
--half-space : calc(var(--space) / 2);
--quarter-space : calc(var(--space) / 4);
--outer-space : var(--double-space);
--space: 12px;
--double-space: calc(var(--space) * 2);
--half-space: calc(var(--space) / 2);
--quarter-space: calc(var(--space) / 4);
--outer-space: var(--double-space);
}
@media (min-width: 1380px) {
:root {
--outer-space : 15%;
--outer-space: 15%;
}
}
html, body {
height : 100%;
html,
body {
height: 100%;
font-size: 1.05em;
}
h1, h2, h3, h4, h5, h6 {
font-weight : 600;
color : var(--twilight);
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
color: var(--twilight);
}
a {
font-weight : 500;
color : var(--splash);
text-decoration : none;
<<<<<<< HEAD font-weight: 500;
color: var(--splash);
text-decoration: none;
cursor: pointer;
}
hr {
margin: var(--double-space) 0;
height: 0;
border: 0;
border-bottom: 1px solid var(--dark-custard);
=======font-weight: 500;
color: var(--splash);
text-decoration: none;
>>>>>>>bdc2d8717cbcab1795b1b2dc4f08f83242e4a4ca
}
body {
margin : 0;
padding : 0;
background : var(--custard);
font-family : Inter;
font-weight : 400;
line-height : 1.6;
color : var(--dark);
margin: 0;
padding: 0;
background: var(--custard);
font-family: Inter;
font-weight: 400;
line-height: 1.6;
color: var(--dark);
}
header {
display : flex;
padding : var(--double-space) var(--outer-space);
background : var(--light);
justify-content : space-between;
align-items : center;
display: flex;
padding: var(--double-space) var(--outer-space);
background: var(--light);
justify-content: space-between;
align-items: center;
}
header > h1 {
font-size : 1.44em;
header>h1 {
font-size: 1.44em;
}
header > a.logout {
padding : 6px 12px;
border-radius : 6px;
background : var(--twilight);
text-decoration : none;
color : var(--dust);
#switch-icon {
width: 30px;
height: 30px;
display: inline-block;
vertical-align: middle;
margin: 0 var(--space);
top: -2px;
position: relative;
}
header > a.logout:hover {
background : var(--splash);
color : var(--light);
#switch-icon #layer1 path {
fill: var(--twilight);
}
header>div>a#logout {
padding: 6px 12px;
border-radius: 6px;
background: var(--twilight);
text-decoration: none;
color: var(--dust);
transition: background 0.2s;
}
header>div>a#logout:hover {
background: var(--splash);
color: var(--light);
}
aside {
padding : var(--double-space) var(--outer-space);
background : var(--light);
padding: 0 var(--outer-space) var(--double-space) var(--outer-space);
background: var(--light);
}
aside > div {
background : var(--dust);
padding : var(--double-space);
border-radius : var(--quarter-space);
overflow : hidden;
aside>div {
background: var(--dust);
padding: var(--double-space);
border-radius: var(--quarter-space);
overflow: hidden;
}
aside > div > h2 {
font-size : 1.22em;
margin : 0 0 6px 0;
aside>div>h2 {
font-size: 1.22em;
margin: 0 0 6px 0;
}
aside > div > figure {
width : 100px;
height : 100px;
border : 1px solid var(--dark-dust);
float : left;
margin-right : var(--double-space);
aside>div>figure {
width: 100px;
height: 100px;
border: 1px solid var(--dark-dust);
float: left;
margin-right: var(--double-space);
}
aside > div > dl {
overflow : hidden;
aside>div>dl {
overflow: hidden;
}
aside > div > dl > dt {
float : left;
clear : left;
margin : 0 var(--double-space) 0 0;
width : 180px;
font-weight : 600;
color : var(--twilight);
aside>div>dl>dt {
float: left;
clear: left;
margin: 0 var(--double-space) 0 0;
width: 180px;
font-weight: 600;
color: var(--twilight);
}
nav {
display : block;
border-bottom : 1px solid var(--dark-dust);
background : var(--light);
display: block;
border-bottom: 1px solid var(--dark-custard);
background: var(--light);
}
nav ol {
margin: 0 calc(var(--outer-space));
padding : 0;
list-style-type : none;
overflow : hidden;
padding: 0;
list-style-type: none;
overflow: hidden;
}
nav ol li {
margin : 0;
padding : 0;
float : left;
margin: 0;
padding: 0;
float: left;
}
nav > ol > li > a {
display : block;
padding : var(--half-space) var(--half-space) var(--quarter-space);
margin : 0 var(--space);
border-bottom : var(--half-space) solid transparent;
text-decoration : none;
color : var(--dark);
cursor : pointer;
font-weight : 500;
letter-spacing : 0.04em;
nav>ol>li>a {
display: block;
padding: var(--half-space) var(--half-space) var(--quarter-space);
margin: 0 var(--space);
border-bottom: var(--half-space) solid transparent;
text-decoration: none;
color: var(--dark);
cursor: pointer;
font-weight: 500;
letter-spacing: 0.04em;
}
nav > ol > li:first-child > a {
margin-left : 0;
nav>ol>li:first-child>a {
margin-left: 0;
}
nav ol li a:hover {
border-color : rgba(0,0,0,0.6);
border-color: rgba(0, 0, 0, 0.6);
}
nav ol li a.current {
font-weight : bold;
border-color : var(--splash);
color : var(--splash);
font-weight: bold;
border-color: var(--splash);
color: var(--splash);
}
article {
padding : var(--double-space) var(--outer-space);
padding: var(--double-space) var(--outer-space);
}
article > div {
background : var(--dust);
padding : var(--double-space);
margin-bottom : var(--double-space);
article>div.content-view {
background: var(--dust);
padding: var(--double-space);
margin-bottom: var(--space);
}
div.content-view > h2 {
margin : 0 0 var(--double-space) 0;
div.content-view>h2 {
margin: 0 0 var(--space) 0;
}
div.services {
display : flex;
justify-content : space-between;
gap : var(--double-space);
display: flex;
justify-content: space-between;
gap: var(--double-space);
flex-wrap: wrap;
}
div.services > div,
div.services>div,
div.infobox {
background : var(--light);
padding : var(--double-space);
border-radius : 6px;
flex : 240px;
max-width : 420px;
display : flex;
flex-flow : column;
justify-content : space-between;
}
div.infobox button {
margin-top : var(--double-space);
}
div.services > div > div.description {
margin-bottom : var(--double-space);
}
div.services > div > div.description > p {
margin-top : var(--half-space);
}
div.services > div > a,
a.button,
button {
display : block;
color : var(--light);
background : var(--splash);
padding : var(--space) var(--double-space);
border-radius : 3px;
opacity : 0.9;
cursor : pointer;
text-align : center;
border : 0;
font-weight : 600;
letter-spacing : 0.03em;
text-decoration : none;
}
div.services > div > a:hover,
a.button:hover,
button:hover {
opacity : 1.0;
}
article table {
width : 100%;
border-spacing : 0;
margin : var(--space) 0;
}
article table thead th {
text-align : left;
}
article table tbody tr:nth-child(odd) {
background : var(--medium-dust);
}
article table thead th,
article table tbody td {
padding : var(--half-space);
}
form > div {
margin : 0 0 var(--double-space);
}
form > div >label {
display : block;
margin : 0 0 6px;
}
form > div > input[type="text"],
form > div > input[type="password"] {
border : 2px solid var(--twilight);
border-radius : 6px;
padding : 8px;
background : var(--light-dust);
width : 100%;
}
#login {
height : 100%;
display : flex;
align-items : center;
justify-content : center;
}
#loginbox {
border-radius : var(--space);
border : 6px solid white;
width : 800px;
height : 500px;
display : flex;
flex-flow : row;
}
#loginbox > div {
padding : var(--double-space);
flex : 1;
}
#loginbox label {
color : var(--twilight);
}
#loginbox > div.login {
background : var(--light-dust);
<<<<<<< HEAD background: var(--light);
padding: var(--double-space);
border-radius: 6px;
flex: 240px;
max-width: 420px;
=======background: var(--light);
padding: var(--double-space);
border-radius: 6px;
flex: 240px;
max-width: 420px;
display: flex;
flex-flow: column;
justify-content: space-between;
}
#loginbox > div.signup {
background : var(--water);
div.infobox button {
margin-top: var(--double-space);
}
div.services>div>div.description {
margin-bottom: var(--double-space);
}
div.services>div>div.description>p {
margin-top: var(--half-space);
}
div.services>div>a,
a.button,
button {
display: block;
color: var(--light);
background: var(--splash);
padding: var(--space) var(--double-space);
border-radius: 3px;
opacity: 0.9;
cursor: pointer;
text-align: center;
border: 0;
font-weight: 600;
letter-spacing: 0.03em;
text-decoration: none;
}
div.services>div>a:hover,
a.button:hover,
button:hover {
opacity: 1.0;
}
article table {
width: 100%;
border-spacing: 0;
margin: var(--space) 0;
}
article table thead th {
text-align: left;
}
article table tbody tr:nth-child(odd) {
background: var(--medium-dust);
}
article table thead th,
article table tbody td {
padding: var(--half-space);
}
form>div {
margin: 0 0 var(--double-space);
}
form>div>label {
display: block;
margin: 0 0 6px;
}
form>div>input[type="text"],
form>div>input[type="password"] {
border: 2px solid var(--twilight);
border-radius: 6px;
padding: 8px;
background: var(--light-dust);
width: 100%;
}
#login {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#loginbox {
border-radius: var(--space);
border: 6px solid white;
width: 800px;
height: 500px;
display: flex;
flex-flow: row;
}
#loginbox>div {
padding: var(--double-space);
flex: 1;
}
#loginbox label {
color: var(--twilight);
}
#loginbox>div.login {
background: var(--light-dust);
>>>>>>>bdc2d8717cbcab1795b1b2dc4f08f83242e4a4ca display: flex;
flex-flow: column;
justify-content: space-between;
}
div.infobox button {
margin-top: var(--double-space);
}
div.services>div>div.description {
margin-bottom: var(--double-space);
}
div.services>div>div.description>p {
margin-top: var(--half-space);
}
div.services>div>a,
a.button,
button {
display: block;
color: var(--light);
background: var(--splash);
padding: var(--space) var(--double-space);
border-radius: var(--quarter-space);
opacity: 0.85;
cursor: pointer;
text-align: center;
border: 0;
font-weight: 600;
text-decoration: none;
transition: opacity 0.15s;
}
button.small {
font-size: 0.78em;
padding: var(--half-space) var(--space);
}
div.services>div>a:hover,
a.button:hover,
button:hover {
opacity: 1.0;
}
button:disabled {
opacity: 0.6;
background: var(--twilight);
cursor: default;
}
article table {
width: 100%;
border-spacing: 0;
margin: var(--space) 0;
}
article table thead th {
background: var(--twilight);
color: var(--medium-dust);
}
article table thead th a {
color: var(--light);
}
article table thead th:first-child {
border-radius: var(--half-space) 0 0 0;
}
article table thead th:last-child {
border-radius: 0 var(--half-space) 0 0;
}
article table tbody {
background: var(--light-dust);
}
article table tbody tr:nth-child(odd) {
background: var(--light-custard);
}
article table tbody tr:nth-child(odd) td {
border-top: 1px solid var(--dark-custard);
border-bottom: 1px solid var(--dark-custard);
}
article table tbody tr:last-child td {
border-bottom: var(--half-space) solid var(--twilight);
}
article table thead th,
article table tbody td {
padding: var(--space);
text-align: left;
}
article table#user_email_table tbody tr td:first-child {
text-align: center;
}
form>div {
margin: 0 0 var(--double-space);
}
form>div>label {
display: block;
margin: 0 0 6px;
}
form>div>input[type="text"],
form>div>input[type="password"],
input[type="email"] {
border: 2px solid var(--twilight);
border-radius: 6px;
padding: 8px;
background: var(--light-dust);
width: 100%;
color: var(--dark);
}
form fieldset {
border: 0;
padding: 0;
margin: 0;
}
form div.buttonHolder button {
display: inline-block;
}
#login {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#loginbox {
border-radius: var(--space);
border: 6px solid white;
width: 800px;
height: 500px;
display: flex;
flex-flow: row;
}
#loginbox>div {
padding: var(--double-space);
flex: 1;
}
#loginbox label {
color: var(--twilight);
}
#loginbox>div.login {
background: var(--light-dust);
display: flex;
flex-flow: column;
justify-content: space-between;
}
#loginbox>div.signup {
background: var(--water);
display: flex;
flex-flow: column;
align-items: center;
}
#loginbox > div:first-child {
border-radius : var(--half-space) 0 0 var(--half-space);
#loginbox>div:first-child {
border-radius: var(--half-space) 0 0 var(--half-space);
}
#loginbox > div:last-child {
border-radius : 0 var(--half-space) var(--half-space) 0;
#loginbox>div:last-child {
border-radius: 0 var(--half-space) var(--half-space) 0;
}
#loginbox > div:last-child > * {
flex : 1;
#loginbox>div:last-child>* {
flex: 1;
}
#loginbox div.new_here {
margin-top : var(--double-space);
margin-top: var(--double-space);
}
#loginbox div.new_here h2 {
@ -350,35 +575,73 @@ form > div > input[type="password"] {
}
#loginbox button {
width : 100%;
width: 100%;
}
#loginbox img {
padding : 0 var(--double-space);
padding: 0 var(--double-space);
}
footer {
margin : var(--space) var(--outer-space);
padding : var(--space);
border-radius : var(--quarter-space);
background : var(--dark);
color : var(--dust);
font-size : 0.78em;
opacity : 0.8;
margin: var(--space) var(--outer-space);
padding: var(--space);
border-radius: var(--quarter-space);
background: var(--dark);
color: var(--dust);
font-size: 0.78em;
opacity: 0.8;
}
span.time_remaining {
color : var(--fade);
color: var(--fade);
}
.pagination {
display : flex;
justify-content : center;
list-style : none;
padding : 0;
margin : 0;
display: flex;
justify-content: center;
list-style: none;
padding: var(--half-space) 0;
margin: 0;
}
.pagination > li {
margin : 0 6px;
.pagination>li {
margin: 0 var(--half-space);
}
.pagination>li:first-child {
margin-right: var(--double-space);
}
.pagination>li:last-child {
margin-left: var(--double-space);
}
.pagination .page-item {
border: 1px solid var(--fade);
padding: var(--quarter-space) var(--half-space);
border-radius: var(--half-space);
background: var(--light-dust);
font-size: 0.78em;
}
.pagination .page-link {
padding: var(--half-space);
color: var(--twilight);
}
.pagination .page-item.active {
background: var(--twilight);
}
.pagination .page-item.active .page-link {
color: var(--light-dust);
font-weight: bold;
}
.pagination .page-item.disabled {
opacity: 0.6;
}
.pagination .page-item.disabled .page-link {
cursor: default;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -2,29 +2,26 @@
{% load i18n %}
{% block head_title %}{% trans "E-mail Addresses" %}{% endblock %}
{% block head_title %}{% trans "Email Addresses" %}{% endblock %}
{% block content %}
<div class="content-view">
<h2>{% trans "Email Addresses" %}</h2>
<p>{% trans 'The following email addresses are associated with your account:' %}</p>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4>{% trans "E-mail Addresses" %}</h4>
</div>
<div class="panel-body">
<hr />
{% if user.emailaddress_set.all %}
<p>{% trans 'The following e-mail addresses are associated with your account:' %}</p>
<form action="{% url 'account_email' %}" class="email_list"
method="post">
<form action="{% url 'account_email' %}" class="email_list" method="post">
{% csrf_token %}
<fieldset class="blockLabels">
<table class="table">
<div class="buttonHolder">
<button class="small" name="action_add" style="float:right">Add Email …</button>
<button class="small" disabled type="submit" id="action_primary" name="action_primary">Make Primary</button>
<button class="small" type="submit" name="action_send">Re-send Verification</button>
<button class="small" type="submit" name="action_remove">Remove</button>
</div>
<table class="table" id="user_email_table">
<thead>
<tr>
<th></th>
@ -34,9 +31,8 @@
</tr>
</thead>
<tbody>
{% for emailaddress in user.emailaddress_set.all %}
<tr class="ctrlHolder">
<tr>
<label for="email_radio_{{ forloop.counter }}"
class="{% if emailaddress.primary %}primary_email{% endif %}">
<td>
@ -48,6 +44,7 @@
{% if emailaddress.primary or user.emailaddress_set.count == 1 %}
checked="checked"
{% endif %}
class="{% if emailaddress.primary %}primary_email{% endif %}"
/>
</td>
<td>
@ -55,14 +52,15 @@
</td>
<td>
{% if emailaddress.verified %}
<span class="label label-success">Verified</span>
<span class="label label-success">{% trans "Verified" %}</span>
{% else %}
<span class="label label-danger">Unverified</span>
<span class="label label-danger">{% trans "Unverified" %}</span>
{% endif %}
</td>
<td>
{% if emailaddress.primary %}
<span class="label label-primary">Primary</span>{% endif %}
<span class="label label-primary">{% trans "Primary" %}</span>
{% endif %}
</td>
</label>
</tr>
@ -70,19 +68,6 @@
</tbody>
</table>
<div class="buttonHolder">
<button class="btn btn-success" type="submit"
name="action_primary">Make Primary
</button>
<button class="btn btn-primary" type="submit"
name="action_send">Re-send Verification
</button>
<button class="btn btn-danger" type="submit"
name="action_remove">Remove
</button>
</div>
</fieldset>
</form>
{% else %}
@ -91,13 +76,10 @@
{% trans "You currently do not have any e-mail address set up. You should really add an e-mail address so you can receive notifications, reset your password, etc." %}
</p>
{% endif %}
</div>
</div>
<!--
<hr />
<div class="panel panel-default">
<div class="panel-heading">
<h4>{% trans "Add E-mail" %}</h4>
</div>
<h3>{% trans "Add E-mail" %}</h3>
<div class="panel-body">
<form method="post" action="{% url 'account_email' %}"
class="add_email">
@ -108,9 +90,7 @@
</button>
</form>
</div>
</div>
</div>
-->
</div>
<script type="text/javascript">
@ -124,6 +104,15 @@
}
});
}
let radio_actions = document.getElementsByName('email');
if (radio_actions.length) {
for (radio of radio_actions) {
radio.addEventListener("change", function (e) {
document.getElementById('action_primary').disabled = e.target.classList.contains('primary_email')
});
}
}
})();
</script>

View file

@ -13,20 +13,20 @@
</div>
{% endfor %}
{% endif %}
<h2>Log in</h2>
<h2>Login</h2>
<form method="post" action="">
{% csrf_token %}
<div>
<label for="id_username"
class="visually-hidden">
{% trans "E-mail" %}
{% trans "Email" %}
</label>
<input type="text"
id="id_username"
name="login"
class="form-control mb-lg-2"
placeholder="{% trans "E-mail" %}"
placeholder="{% trans "Email" %}"
required
autofocus>
</div>
@ -42,7 +42,7 @@
required>
</div>
<div>
<button type="submit">{% trans "Sign in" %}</button>
<button type="submit">{% trans "Login" %}</button>
</div>
</form>
<div>
@ -55,7 +55,7 @@
<div class="signup">
<img src="https://data.coop/static/img/logo_da.svg" alt="data.coop logo">
<div class="new_here">
<h2> Are you new here? </h2>
<h2>{% trans "Are you new here?" %}</h2>
<a class="button" href="{% url "account_signup" %}">{% trans "Become a member" %}</a>
</div>
</div>

View file

@ -10,11 +10,39 @@
<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>
<a class="logout" href="{% url "account_logout" %}">Log out</a>
<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>
@ -80,5 +108,14 @@
<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>