initial functionality and styling pass

2025-07-29 00:34:03 -04:00
parent 1590ca72c1
commit c67f1afc1f
1763 changed files with 876 additions and 76 deletions
@@ -1,37 +1,133 @@
 <!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') }}">
+  <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>
-    {% if current_user.is_authenticated %}
-        Hello {{ current_user.username }} |
-        <a href="{{ url_for('auth.logout') }}">Logout</a>
-    {% else %}
-        <a href="{{ url_for('auth.login') }}">Login</a> |
-        <a href="{{ url_for('auth.register') }}">Register</a>
+<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>

-<!-- FLASH MESSAGES -->
-{% with messages = get_flashed_messages(with_categories=true) %}
-  {% if messages %}
-    {% for category, message in messages %}
-      <div class="flash {{ category }}">
-        {{ message }}
+</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>
-    {% endfor %}
-  {% endif %}
-{% endwith %}
+    </div>
+  </div>
+</div>

-<hr>

-<!-- MAIN CONTENT -->
-{% block content %}{% endblock %}
+
+<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>