135 lines
4.8 KiB
HTML
135 lines
4.8 KiB
HTML
<!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">×</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>
|