206 lines
4.6 KiB
HTML
206 lines
4.6 KiB
HTML
<!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>
|