From ca4887d0da8b2bed12be9c236686416b6084cc59 Mon Sep 17 00:00:00 2001
From: beroth <beroth@beroth.moe>
Date: Sat, 16 May 2026 00:08:54 -0600
Subject: [PATCH] first commit :)

---
 index.html | 205 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 205 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..60fb6c1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Galería de fotos</title>
+
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      background: #0b0b0b;
+      color: white;
+      padding: 20px;
+    }
+
+    h1 {
+      font-size: 20px;
+      margin-bottom: 10px;
+    }
+
+    .info {
+      font-size: 14px;
+      opacity: 0.8;
+      margin-bottom: 20px;
+    }
+
+    .gallery {
+      column-count: 4;
+      column-gap: 12px;
+    }
+
+    @media (max-width: 1100px) {
+      .gallery { column-count: 3; }
+    }
+
+    @media (max-width: 800px) {
+      .gallery { column-count: 2; }
+    }
+
+    @media (max-width: 500px) {
+      .gallery { column-count: 1; }
+    }
+
+    .card {
+      background: #151515;
+      border-radius: 12px;
+      overflow: hidden;
+      border: 1px solid #222;
+      cursor: pointer;
+      transition: transform 0.2s ease;
+      margin-bottom: 12px;
+      break-inside: avoid;
+      display: inline-block;
+      width: 100%;
+    }
+
+    .card:hover {
+      transform: scale(1.02);
+    }
+
+    .card img {
+      width: 100%;
+      height: auto;
+      object-fit: cover;
+      display: block;
+    }
+
+    .card {
+      background: #151515;
+      border-radius: 12px;
+      overflow: hidden;
+      border: 1px solid #222;
+      cursor: pointer;
+      transition: transform 0.2s ease;
+    }
+
+    .card:hover {
+      transform: scale(1.02);
+    }
+
+    .card img {
+      width: 100%;
+      height: auto;
+      object-fit: cover;
+      display: block;
+    }
+
+    .meta {
+      padding: 10px;
+      font-size: 13px;
+      opacity: 0.85;
+    }
+
+    .error {
+      color: #ff6b6b;
+      font-size: 14px;
+      margin-top: 15px;
+    }
+
+    .loading {
+      font-size: 14px;
+      opacity: 0.8;
+    }
+  </style>
+</head>
+<body>
+
+  <h1>📸 Galería de fotos</h1>
+  <div class="info" id="campaignInfo"></div>
+  <div class="loading" id="loading">Cargando...</div>
+  <div class="error" id="error"></div>
+
+  <div class="gallery" id="gallery"></div>
+
+  <!-- Supabase JS CDN -->
+  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
+
+  <script>
+    // === CONFIG: fill these in ===
+    const SUPABASE_URL = "http://144.217.160.51:8000";
+    const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlzcyI6InN1cGFiYXNlIiwiaWF0IjoxNzc2NTU4OTc2LCJleHAiOjE5MzQyMzg5NzZ9.eFvvIQUstht8TxNffqAcqfmgS7W2JMZsDxkV41XBPOA";
+
+    const supabaseClient = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+
+    function getCampaignId() {
+      const params = new URLSearchParams(window.location.search);
+      return params.get("campaign_id");
+    }
+
+    async function loadMedia(campaignId) {
+      const { data, error } = await supabaseClient
+        .from("media")
+        .select("*")
+        .eq("campaign_id", campaignId)
+        .order("created_at", { ascending: true });
+
+      if (error) throw error;
+      return data;
+    }
+
+    function renderGallery(items) {
+      const gallery = document.getElementById("gallery");
+      gallery.innerHTML = "";
+
+      items.forEach((item) => {
+        const card = document.createElement("div");
+        card.className = "card";
+
+        const img = document.createElement("img");
+        img.src = item.url;
+        img.alt = item.category || "media";
+
+        // open image in new tab when clicked
+        card.onclick = () => window.open(item.url, "_blank");
+
+        const meta = document.createElement("div");
+        meta.className = "meta";
+        meta.innerText = `${item.category || "photo"} • ${item.type || "unknown"}`;
+
+        card.appendChild(img);
+        card.appendChild(meta);
+        gallery.appendChild(card);
+      });
+    }
+
+    async function main() {
+      const loading = document.getElementById("loading");
+      const errorBox = document.getElementById("error");
+      const campaignInfo = document.getElementById("campaignInfo");
+
+      const campaignId = getCampaignId();
+
+      if (!campaignId) {
+        loading.style.display = "none";
+        errorBox.innerText = "Missing campaign_id in URL. Example: ?campaign_id=UUID";
+        return;
+      }
+
+      //campaignInfo.innerText = `Campaign ID: ${campaignId}`;
+
+      try {
+        const media = await loadMedia(campaignId);
+
+        loading.style.display = "none";
+
+        if (!media || media.length === 0) {
+          errorBox.innerText = "No media found for this campaign.";
+          return;
+        }
+
+        renderGallery(media);
+
+      } catch (err) {
+        loading.style.display = "none";
+        errorBox.innerText = "Error loading media: " + (err.message || err);
+        console.error(err);
+      }
+    }
+
+    main();
+  </script>
+
+</body>
+</html>
