76 lines
2.6 KiB
HTML
76 lines
2.6 KiB
HTML
{% extends "base.html" %} {% block title %}Pet Pictures - Pet Picture Queue{%
|
|
endblock %} {% block content %}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{% for picture in pictures %}
|
|
<div
|
|
class="bg-white rounded-lg shadow-md overflow-hidden {% if picture.posted %}opacity-50{% endif %}"
|
|
>
|
|
<div class="relative group">
|
|
<a
|
|
href="{{ url_for('static', filename='uploads/' + picture.filename) }}"
|
|
target="_blank"
|
|
class="block"
|
|
>
|
|
<img
|
|
src="{{ url_for('static', filename='uploads/' + picture.filename) }}"
|
|
alt="Pet picture from {{ picture.subscriber_name }}"
|
|
class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
<div
|
|
class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-opacity duration-300 flex items-center justify-center"
|
|
>
|
|
<span
|
|
class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
|
>
|
|
Click to view
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="p-4">
|
|
<h3 class="text-lg font-semibold text-gray-800">
|
|
From: {{ picture.subscriber_name }}
|
|
</h3>
|
|
{% if picture.description %}
|
|
<p class="mt-2 text-gray-600">{{ picture.description }}</p>
|
|
{% endif %}
|
|
<p class="text-sm text-gray-600">Uploaded: {{ picture.uploaded_at }}</p>
|
|
<div class="mt-4 space-y-2">
|
|
<a
|
|
href="{{ url_for('download_file', filename=picture.filename) }}"
|
|
class="block w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors text-center"
|
|
>
|
|
Download Original
|
|
</a>
|
|
{% if not picture.posted %}
|
|
<form
|
|
action="{{ url_for('mark_posted', picture_id=picture.id) }}"
|
|
method="POST"
|
|
>
|
|
<button
|
|
type="submit"
|
|
class="w-full bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors"
|
|
>
|
|
Mark as Posted
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<div class="text-center text-green-600 font-semibold">✓ Posted</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="col-span-full text-center py-12">
|
|
<p class="text-gray-600 text-lg">No pet pictures uploaded yet.</p>
|
|
<a
|
|
href="{{ url_for('upload') }}"
|
|
class="mt-4 inline-block bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 transition-colors"
|
|
>
|
|
Upload Your First Picture
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endblock %}
|