108 lines
4.2 KiB
HTML
108 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html class="is-clipped" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Flask Auth Example</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css', version='0.3') }}">
|
|
</head>
|
|
|
|
<body data-theme="dark" onload="init()">
|
|
<section class="hero is-primary is-fullheight">
|
|
<div class="hero-head">
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<div id="navbarMenuHeroA" class="navbar-menu">
|
|
<div class="navbar-end">
|
|
<a href="{{ url_for('main.index') }}" class="navbar-item">
|
|
Home
|
|
</a>
|
|
{% if current_user.is_authenticated %}
|
|
<a href="{{ url_for('main.profile') }}" class="navbar-item">
|
|
Profile
|
|
</a>
|
|
{% endif %}
|
|
{% if not current_user.is_authenticated %}
|
|
<a href="{{ url_for('auth.login') }}" class="navbar-item">
|
|
Login
|
|
</a>
|
|
<a href="{{ url_for('auth.signup') }}" class="navbar-item">
|
|
Sign Up
|
|
</a>
|
|
{% endif %}
|
|
{% if current_user.is_authenticated %}
|
|
<a href="{{ url_for('auth.logout') }}" class="navbar-item">
|
|
Logout
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="hero-body">
|
|
<div class="container has-text-centered">
|
|
{% block content %}
|
|
{% endblock %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-foot">
|
|
<label class="is-right">
|
|
<input name="dark-mode-toggle" class="dark-toggle" onclick="darkLight()" type="checkbox">
|
|
</label>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
|
|
<script>
|
|
function init() {
|
|
let theme = localStorage.getItem("theme") ?? "dark";
|
|
document.body.dataset.theme = theme;
|
|
|
|
applyTheme(theme);
|
|
}
|
|
|
|
function darkLight() {
|
|
let element = document.body;
|
|
switch (element.dataset.theme) {
|
|
case "light":
|
|
element.dataset.theme = "dark";
|
|
break;
|
|
case "dark":
|
|
element.dataset.theme = "light";
|
|
break;
|
|
}
|
|
localStorage.setItem("theme", element.dataset.theme);
|
|
|
|
applyTheme(element.dataset.theme);
|
|
}
|
|
|
|
function applyTheme(theme) {
|
|
console.log(theme)
|
|
let primaryElements
|
|
switch (theme) {
|
|
case 'dark':
|
|
primaryElements = Array.from(document.querySelectorAll('.is-primary-invert'));
|
|
console.log(primaryElements)
|
|
primaryElements.forEach((element) => {
|
|
element.classList.remove('is-primary-invert');
|
|
element.classList.add('is-primary');
|
|
});
|
|
break;
|
|
case 'light':
|
|
primaryElements = Array.from(document.querySelectorAll('.is-primary'));
|
|
console.log(primaryElements)
|
|
primaryElements.forEach((element) => {
|
|
element.classList.remove('is-primary');
|
|
element.classList.add('is-primary-invert');
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
</script>
|
|
</html>
|