yurt

app/templates/index.html

@@ -0,0 +1,92 @@
+{% extends "base.html" %} {% block title %}Pet Pictures - Pets of Powerwashing{%
+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 and not public_view %}opacity-50{% endif %}"
+  >
+    <div class="relative group">
+      <a
+        href="javascript:void(0)"
+        onclick="openModal('{{ url_for('static', filename='uploads/' + picture.filename) }}', 'From: {{ picture.subscriber_name }}', '{{ picture.description or '' }}', 'Uploaded: {{ picture.uploaded_at }}')"
+        class="block transform transition-transform hover:scale-105"
+      >
+        <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"
+        />
+        <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 fullscreen
+          </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">
+        <div class="flex space-x-2 mb-2">
+          <button
+            onclick="likePicture({{ picture.id }})"
+            id="like-btn-{{ picture.id }}"
+            class="flex-1 flex items-center justify-center px-4 py-2 rounded transition-colors {% if picture.user_liked %}bg-red-500 text-white hover:bg-red-600{% else %}bg-gray-200 text-gray-700 hover:bg-gray-300{% endif %}"
+          >
+            <span class="mr-1">{% if picture.user_liked %}❤️{% else %}🤍{% endif %}</span>
+            <span id="like-count-{{ picture.id }}">{{ picture.likes or 0 }}</span>
+          </button>
+        </div>
+        <a
+          href="{{ url_for('pictures.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 public_view %}
+          {% if not picture.posted %}
+          <form
+            action="{{ url_for('pictures.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 %}
+        {% endif %}
+      </div>
+    </div>
+  </div>
+  {% else %}
+  <div class="col-span-full text-center py-12">
+    {% if public_view %}
+    <p class="text-gray-600 text-lg">No published pet pictures yet.</p>
+    <p class="text-gray-500 text-sm mt-2">Pictures will appear here once they are marked as posted by an admin.</p>
+    {% else %}
+    <p class="text-gray-600 text-lg">No pet pictures uploaded yet.</p>
+    <a
+      href="{{ url_for('pictures.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>
+    {% endif %}
+  </div>
+  {% endfor %}
+</div>
+{% endblock %}