yurt

2025-08-07 18:18:36 -04:00
parent 8df728530e
commit 918fc91604
28 changed files with 1127 additions and 243 deletions
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{% block title %}Pets of Powerwashing{% endblock %}</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+    <style>
+      .modal {
+        display: none;
+      }
+      .modal.active {
+        display: flex;
+      }
+    </style>
+  </head>
+  <body class="bg-gray-100 min-h-screen">
+    <nav class="bg-white">
+      <div class="max-w-6xl mx-auto px-4">
+        <div class="flex justify-between items-center py-4">
+          <div class="text-xl font-semibold text-gray-800">
+            <a href="{{ url_for('main.index') }}">Pets of Powerwashing</a>
+          </div>
+          <div class="space-x-4">
+            <a
+              href="{{ url_for('main.index') }}"
+              class="text-gray-600 hover:text-gray-800"
+              >Gallery</a
+            >
+            {% if session.logged_in %}
+            <a
+              href="{{ url_for('pictures.upload') }}"
+              class="text-gray-600 hover:text-gray-800"
+              >Upload New</a
+            >
+            <a
+              href="{{ url_for('auth.logout') }}"
+              class="text-gray-600 hover:text-gray-800"
+              >Logout</a
+            >
+            {% else %}
+            <a
+              href="{{ url_for('auth.login') }}"
+              class="text-gray-600 hover:text-gray-800"
+              >Login</a
+            >
+            {% endif %}
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <main class="max-w-6xl mx-auto px-4 py-8">
+      {% with messages = get_flashed_messages() %} {% if messages %} {% for
+      message in messages %}
+      <div
+        class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 mb-4"
+        role="alert"
+      >
+        {{ message }}
+      </div>
+      {% endfor %} {% endif %} {% endwith %} {% block content %}{% endblock %}
+    </main>
+
+    <!-- Modal for fullscreen image view -->
+    <div id="imageModal" class="modal fixed inset-0 bg-black bg-opacity-75 items-center justify-center z-50" onclick="closeModal()">
+      <div class="relative max-w-full max-h-full p-4" onclick="event.stopPropagation()">
+        <button onclick="closeModal()" class="absolute top-4 right-4 text-white text-4xl hover:text-gray-300 z-10">&times;</button>
+        <img id="modalImage" src="" alt="" class="max-w-full max-h-full object-contain">
+        <div id="modalInfo" class="absolute bottom-4 left-4 bg-black bg-opacity-50 text-white p-3 rounded">
+          <h3 id="modalTitle" class="text-lg font-semibold"></h3>
+          <p id="modalDescription" class="text-sm"></p>
+          <p id="modalDate" class="text-xs opacity-75"></p>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      function openModal(imageSrc, title, description, date) {
+        document.getElementById('modalImage').src = imageSrc;
+        document.getElementById('modalTitle').textContent = title;
+        document.getElementById('modalDescription').textContent = description;
+        document.getElementById('modalDate').textContent = date;
+        document.getElementById('imageModal').classList.add('active');
+        document.body.style.overflow = 'hidden';
+      }
+
+      function closeModal() {
+        document.getElementById('imageModal').classList.remove('active');
+        document.body.style.overflow = 'auto';
+      }
+
+      // Close modal with Escape key
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+          closeModal();
+        }
+      });
+
+      // Like functionality
+      function likePicture(pictureId) {
+        fetch('/like/' + pictureId, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        })
+        .then(response => response.json())
+        .then(data => {
+          const likeBtn = document.getElementById('like-btn-' + pictureId);
+          const likeCount = document.getElementById('like-count-' + pictureId);
+          
+          // Update like count
+          likeCount.textContent = data.like_count;
+          
+          // Update button appearance and heart
+          if (data.liked) {
+            likeBtn.className = 'flex-1 flex items-center justify-center px-4 py-2 rounded transition-colors bg-red-500 text-white hover:bg-red-600';
+            likeBtn.querySelector('span').textContent = '❤️';
+          } else {
+            likeBtn.className = 'flex-1 flex items-center justify-center px-4 py-2 rounded transition-colors bg-gray-200 text-gray-700 hover:bg-gray-300';
+            likeBtn.querySelector('span').textContent = '🤍';
+          }
+        })
+        .catch(error => {
+          console.error('Error:', error);
+        });
+      }
+    </script>
+  </body>
+</html>