Bryan Van Deusen
134 lines
3.9 KiB
HTML
134 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Flask Template App</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="mainview">
|
|
<header>
|
|
<header>
|
|
<nav class="navbar">
|
|
<a class="nav-button" href="{{ url_for('main.gallery') if current_user.is_authenticated else url_for('main.index') }}">Home</a>
|
|
|
|
{% if current_user.is_authenticated and current_user.is_admin %}
|
|
<a class="nav-button" href="{{ url_for('main.settings') }}">Settings</a>
|
|
{% endif %}
|
|
|
|
{% if current_user.is_authenticated %}
|
|
<a class="nav-button" href="{{ url_for('auth.logout') }}">Logout</a>
|
|
{% else %}
|
|
<a class="nav-button" href="{{ url_for('auth.login') }}">Login</a>
|
|
<a class="nav-button" href="{{ url_for('auth.register') }}">Register</a>
|
|
{% endif %}
|
|
</nav>
|
|
</header>
|
|
|
|
</header>
|
|
|
|
|
|
<!-- FLASH MESSAGES -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="flash {{ category }}">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<hr>
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<div class="content">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div id="imageModal" class="modal">
|
|
<div class="modal-dialog modal-xl modal-dialog-centered">
|
|
<div class="modal-content bg-transparent border-0">
|
|
<button id="modalClose" class="modal-button modal-close">✕</button>
|
|
<button id="modalPrev" class="modal-button modal-prev">←</button>
|
|
<button id="modalNext" class="modal-button modal-next">→</button>
|
|
<div class="modal-body">
|
|
<h5 id="modalFilename" class="modal-filename"></h5>
|
|
<img id="modalImage" src="" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const modal = document.getElementById('imageModal');
|
|
const modalImage = document.getElementById('modalImage');
|
|
const modalClose = document.getElementById('modalClose');
|
|
const modalPrev = document.getElementById('modalPrev');
|
|
const modalNext = document.getElementById('modalNext');
|
|
const modalFilename = document.getElementById('modalFilename');
|
|
const images = Array.from(document.querySelectorAll('.img-clickable'));
|
|
|
|
let currentIndex = -1;
|
|
|
|
function openModal(index) {
|
|
currentIndex = index;
|
|
const img = images[currentIndex];
|
|
modalImage.src = img.dataset.full;
|
|
modalFilename.textContent = img.dataset.filename || '';
|
|
modal.classList.add('active');
|
|
}
|
|
|
|
function closeModal() {
|
|
modal.classList.remove('active');
|
|
modalImage.src = '';
|
|
modalFilename.textContent = '';
|
|
currentIndex = -1;
|
|
}
|
|
|
|
function showNext() {
|
|
if (images.length === 0) return;
|
|
currentIndex = (currentIndex + 1) % images.length;
|
|
const img = images[currentIndex];
|
|
modalImage.src = img.dataset.full;
|
|
modalFilename.textContent = img.dataset.filename || '';
|
|
}
|
|
|
|
function showPrev() {
|
|
if (images.length === 0) return;
|
|
currentIndex = (currentIndex - 1 + images.length) % images.length;
|
|
const img = images[currentIndex];
|
|
modalImage.src = img.dataset.full;
|
|
modalFilename.textContent = img.dataset.filename || '';
|
|
}
|
|
|
|
images.forEach((img, index) => {
|
|
img.addEventListener('click', () => openModal(index));
|
|
});
|
|
|
|
modalClose.addEventListener('click', closeModal);
|
|
modalNext.addEventListener('click', showNext);
|
|
modalPrev.addEventListener('click', showPrev);
|
|
|
|
modal.addEventListener('click', (e) => {
|
|
if (e.target === modal) closeModal();
|
|
});
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (!modal.classList.contains('active')) return;
|
|
if (e.key === 'ArrowRight') showNext();
|
|
else if (e.key === 'ArrowLeft') showPrev();
|
|
else if (e.key === 'Escape') closeModal();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|