Russell Ballestrini
db81a7aa8e
modified: app.py modified: templates/base.html.j2 modified: templates/daily_puzzle.html.j2
203 lines
5.6 KiB
Django/Jinja
203 lines
5.6 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% block title %}My Puzzle Game{% endblock %}</title>
|
|
<link href="https://www.unturf.com/css/pico.classless.min.css" rel="stylesheet">
|
|
<style>
|
|
/* Styles for the responsive navbar */
|
|
nav {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
align-items: center;
|
|
padding: 0.5em 1em;
|
|
}
|
|
|
|
nav ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-gap: 1em;
|
|
justify-self: end;
|
|
}
|
|
|
|
#mobile-menu-button {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5em;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
nav {
|
|
grid-template-columns: auto auto;
|
|
}
|
|
|
|
nav ul {
|
|
display: none;
|
|
}
|
|
|
|
#mobile-menu-button {
|
|
display: block;
|
|
justify-self: end;
|
|
}
|
|
}
|
|
|
|
/* Modal styles */
|
|
#mobile-menu-dialog {
|
|
display: none;
|
|
}
|
|
|
|
#mobile-menu-dialog[open] {
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--background-color);
|
|
overflow: auto;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Modal content styles */
|
|
#mobile-menu-dialog article {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 1em;
|
|
}
|
|
|
|
#mobile-menu-dialog header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
#mobile-menu-dialog nav ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 1em 0;
|
|
display: grid;
|
|
grid-gap: 1em;
|
|
text-align: left;
|
|
}
|
|
|
|
#mobile-menu-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5em;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
}
|
|
|
|
#mobile-menu-close:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* Ensure links are vertical */
|
|
@media (max-width: 768px) {
|
|
#mobile-menu-dialog nav ul {
|
|
grid-auto-flow: row;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<a href="{{ request.route_url('home') }}"><strong>puzzle.gumyum.com</strong></a>
|
|
<button id="mobile-menu-button" aria-label="Open Menu">☰</button>
|
|
<ul>
|
|
{% if request.user and request.user.is_admin %}
|
|
<li><a href="{{ request.route_url('admin_dashboard') }}">Admin Dashboard</a></li>
|
|
{% endif %}
|
|
<li><a href="{{ request.route_url('puzzle_menu') }}">Today's Puzzles</a></li>
|
|
<li><a href="{{ request.route_url('leaderboard_index') }}">Leaderboards</a></li>
|
|
<li><a href="{{ request.route_url('king_of_the_mountain') }}">King of the Mountain</a></li>
|
|
{% if request.user and request.user.is_verified %}
|
|
<li><a href="{{ request.route_url('profile') }}">Profile</a></li>
|
|
<li><a href="{{ request.route_url('logout') }}">Logout</a></li>
|
|
{% else %}
|
|
<li><a href="{{ request.route_url('login') }}">Login</a></li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Mobile Menu Modal -->
|
|
<dialog id="mobile-menu-dialog">
|
|
<article>
|
|
<header>
|
|
<h2>Menu</h2>
|
|
<button aria-label="Close Menu" id="mobile-menu-close">✕</button>
|
|
</header>
|
|
<nav>
|
|
<ul>
|
|
{% if request.user and request.user.is_admin %}
|
|
<li><a href="{{ request.route_url('admin_dashboard') }}">Admin Dashboard</a></li>
|
|
{% endif %}
|
|
<li><a href="{{ request.route_url('home') }}">Home</a></li>
|
|
<li><a href="{{ request.route_url('puzzle_menu') }}">Today's Puzzles</a></li>
|
|
<li><a href="{{ request.route_url('leaderboard_index') }}">Leaderboards</a></li>
|
|
<li><a href="{{ request.route_url('king_of_the_mountain') }}">King of the Mountain</a></li>
|
|
{% if request.user and request.user.is_verified %}
|
|
<li><a href="{{ request.route_url('profile') }}">Profile</a></li>
|
|
<li><a href="{{ request.route_url('logout') }}">Logout</a></li>
|
|
{% else %}
|
|
<li><a href="{{ request.route_url('login') }}">Login</a></li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|
|
</article>
|
|
</dialog>
|
|
|
|
{% if request.session.peek_flash() %}
|
|
{% for message in request.session.pop_flash() %}
|
|
<div class="alert">{{ message }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<main class="container">
|
|
{% block content %}
|
|
<!-- Default content can go here, or leave blank -->
|
|
{% endblock %}
|
|
</main>
|
|
|
|
<script>
|
|
// JavaScript to handle the mobile menu
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const menuButton = document.getElementById('mobile-menu-button');
|
|
const menuDialog = document.getElementById('mobile-menu-dialog');
|
|
const menuClose = document.getElementById('mobile-menu-close');
|
|
|
|
// Open the menu dialog when the hamburger button is clicked
|
|
menuButton.addEventListener('click', function() {
|
|
menuDialog.showModal();
|
|
});
|
|
|
|
// Close the menu dialog when the close button is clicked
|
|
menuClose.addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
menuDialog.close();
|
|
});
|
|
|
|
// Close the menu dialog when a link is clicked
|
|
const menuLinks = menuDialog.querySelectorAll('nav ul li a');
|
|
menuLinks.forEach(function(link) {
|
|
link.addEventListener('click', function() {
|
|
menuDialog.close();
|
|
});
|
|
});
|
|
|
|
// Close the dialog if the backdrop is clicked
|
|
menuDialog.addEventListener('click', function(event) {
|
|
if (event.target === menuDialog) {
|
|
menuDialog.close();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|