Russell Ballestrini
d7416d2bae
new file: .gitignore new file: app.py new file: requirements.txt new file: templates/base.html.j2 new file: templates/edit_media.html.j2 new file: templates/home.html.j2 new file: templates/import_user_record.html.j2 new file: templates/list_media.html.j2 new file: templates/login.html.j2 new file: templates/profile.html.j2 new file: templates/upload_media.html.j2 new file: templates/user_media.html.j2 new file: templates/verify.html.j2 new file: templates/view_media.html.j2 new file: templates/view_media_details.html.j2
164 lines
4.5 KiB
Django/Jinja
164 lines
4.5 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{% block title %}Media Hosting App{% endblock %}</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="https://www.unturf.com/css/pico.classless.min.css" rel="stylesheet">
|
|
<style>
|
|
/* Base Styles */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Navigation Styles */
|
|
nav {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
padding: 0.5em 1em;
|
|
}
|
|
|
|
nav a strong {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
/* Navigation Links */
|
|
nav ul {
|
|
list-style: none;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
justify-content: end;
|
|
gap: 1em;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
nav ul li {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Hamburger Menu Button */
|
|
#mobile-menu-button {
|
|
display: none;
|
|
font-size: 1.5em;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Responsive Styles */
|
|
@media only screen and (max-width: 600px) {
|
|
/* Adjust nav grid to include hamburger button */
|
|
nav {
|
|
grid-template-columns: auto 1fr auto;
|
|
}
|
|
|
|
/* Hide navigation links on mobile */
|
|
nav ul {
|
|
display: none;
|
|
}
|
|
|
|
/* Show hamburger menu button on mobile */
|
|
#mobile-menu-button {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* Mobile Menu Modal Styles */
|
|
#mobile-menu-dialog nav ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
grid-auto-flow: row;
|
|
gap: 1em;
|
|
}
|
|
|
|
#mobile-menu-dialog nav ul li {
|
|
margin: 0;
|
|
}
|
|
|
|
#mobile-menu-dialog button#mobile-menu-close {
|
|
position: absolute;
|
|
top: 0.5em;
|
|
right: 1em;
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#mobile-menu-dialog article {
|
|
position: relative;
|
|
padding-top: 2em;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<a href="{{ request.route_url('home') }}"><strong>upload.unturf.com</strong></a>
|
|
<!-- Hamburger Menu Button (only visible on mobile) -->
|
|
<button id="mobile-menu-button" aria-label="Open Menu">☰</button>
|
|
<!-- Navigation Links -->
|
|
<ul>
|
|
<li><a href="{{ request.route_url('list_media') }}">Browse Media</a></li>
|
|
{% if request.user and request.user.is_verified %}
|
|
<li><a href="{{ request.route_url('upload_media') }}">Upload Media</a></li>
|
|
<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>
|
|
<button aria-label="Close Menu" id="mobile-menu-close">✕</button>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="{{ request.route_url('list_media') }}">Browse Media</a></li>
|
|
{% if request.user and request.user.is_verified %}
|
|
<li><a href="{{ request.route_url('upload_media') }}">Upload Media</a></li>
|
|
<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>
|
|
|
|
<!-- Flash messages -->
|
|
{% if request.session.peek_flash() %}
|
|
{% for message in request.session.pop_flash() %}
|
|
<div class="alert">{{ message }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<main class="container">
|
|
{% block content %}
|
|
{% endblock %}
|
|
</main>
|
|
|
|
<!-- JavaScript for Mobile Menu -->
|
|
<script>
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
|
const mobileMenuDialog = document.getElementById('mobile-menu-dialog');
|
|
const mobileMenuClose = document.getElementById('mobile-menu-close');
|
|
|
|
mobileMenuButton.addEventListener('click', () => {
|
|
mobileMenuDialog.showModal();
|
|
});
|
|
|
|
mobileMenuClose.addEventListener('click', () => {
|
|
mobileMenuDialog.close();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|