1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/assets/styles-C2K1cdYG.css" data-precedence="default"/><title>Community Photo Wall</title><link rel="modulepreload" href="/assets/index-Ns2NWYeH.js"/><link rel="modulepreload" href="/assets/gallery-CYoU8iWI.js"/><link rel="modulepreload" href="/assets/button-DYzrrp25.js"/><link rel="modulepreload" href="/assets/utils-D__KWHVo.js"/><link rel="modulepreload" href="/assets/cloudinary-url-BszzSyUt.js"/>
1<script>(function(){try{var stored=window.localStorage.getItem('theme');var mode=(stored==='light'||stored==='dark'||stored==='auto')?stored:'auto';var prefersDark=window.matchMedia('(prefers-color-scheme: dark)').matches;var resolved=mode==='auto'?(prefersDark?'dark':'light'):mode;var root=document.documentElement;root.classList.remove('light','dark');root.classList.add(resolved);if(mode==='auto'){root.removeAttribute('data-theme')}else{root.setAttribute('data-theme',mode)}root.style.colorScheme=resolved;}catch(e){}})();</script>
1</head><body class="font-sans antialiased wrap-anywhere selection:bg-[rgba(79,184,178,0.24)]"><header class="sticky top-0 z-50 border-b border-(--line) bg-(--header-bg) px-4 backdrop-blur-lg"><nav class="page-wrap flex flex-wrap items-center gap-x-3 gap-y-2 py-3 sm:py-4"><h2 class="m-0 shrink-0 text-base font-semibold tracking-tight"><a href="/" class="inline-flex items-center gap-2 rounded-full border border-(--chip-line) bg-(--chip-bg) px-3 py-1.5 text-sm text-(--sea-ink) no-underline shadow-[0_8px_24px_rgba(30,90,72,0.08)] sm:px-4 sm:py-2"><span class="h-2 w-2 rounded-full bg-linear-to-r from-[#56c6be] to-[#7ed3bf]"></span>PhotoWall</a></h2><div class="order-3 flex w-full flex-wrap items-center gap-x-4 gap-y-1 pb-1 text-sm font-semibold sm:order-0 sm:w-auto sm:flex-nowrap sm:pb-0"><a href="/" class="nav-link">Home</a><a class="nav-link nav-link is-active" href="/gallery" data-status="active" aria-current="page">Gallery</a><a href="/upload" class="nav-link">Upload</a><a href="/moderate" class="nav-link">Moderate</a></div><div class="ml-auto flex items-center gap-1.5 sm:gap-2"><button type="button" aria-label="Theme mode: auto (system). Click to switch to light mode." title="Theme mode: auto (system). Click to switch to light mode." class="rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm font-semibold text-[var(--sea-ink)] shadow-[0_8px_22px_rgba(30,90,72,0.08)] transition hover:-translate-y-0.5">Auto</button></div></nav></header><!--$--><main class="page-wrap px-4 pb-20 pt-14"><div class="mb-10 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between"><div><div class="mb-2 flex items-center gap-2"><p class="island-kicker">Community Gallery</p><span class="flex items-center gap-1 rounded-full border border-(--line) bg-(--surface) px-2.5 py-0.5 text-[11px] font-medium text-(--sea-ink-soft)">â Powered by Cloudinary</span></div><h1 class="display-title text-3xl font-bold tracking-tight text-(--sea-ink) sm:text-4xl">Photo Wall</h1><p class="mt-1 text-sm text-(--sea-ink-soft)">8 photos â all resized, watermarked, and face-cropped by Cloudinary</p></div><a data-slot="button" data-variant="outline" data-size="default" href="/upload" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 shrink-0">+ Submit a Photo</a></div><div class="mb-6 flex flex-wrap items-center gap-3 rounded-xl border border-(--line) bg-(--surface) px-4 py-2.5"><span class="text-xs font-medium text-(--sea-ink-soft)">Card legend:</span><span class="flex items-center gap-1.5 text-xs text-(--sea-ink-soft)"><span class="h-2 w-2 rounded-full bg-emerald-500"></span>Approved</span><span class="flex items-center gap-1.5 text-xs text-(--sea-ink-soft)"><span class="h-2 w-2 rounded-full bg-amber-500"></span>Pending</span><span class="flex items-center gap-1.5 text-xs text-(--sea-ink-soft)"><span class="h-2 w-2 rounded-full bg-red-500"></span>Rejected</span><span class="ml-auto text-xs text-(--sea-ink-soft)">Hover a card to see Cloudinary transforms â</span></div><div class="columns-1 gap-5 sm:columns-2 md:columns-3 lg:columns-4"><div class="mb-5 break-inside-avoid"><article class="group relative aspect-4/5 cursor-pointer overflow-hidden rounded-2xl border border-(--line) shadow-[0_4px_24px_rgba(23,58,64,0.14)] transition-shadow hover:shadow-[0_8px_32px_rgba(23,58,64,0.22)]" role="button" tabindex="0" aria-label="Open Beachside"><img src="https://res.cloudinary.com/demo-article-projects/image/upload/f_auto,q_auto,c_fill,g_auto:faces,w_800,h_800/community-photo-wall/1779028913900-Beachside" alt="Beachside" loading="lazy" class="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="pointer-events-none absolute inset-0 bg-linear-to-b from-black/50 via-trans
1parent to-transparent"></div><div class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/80 via-black/25 to-transparent"></div><div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-semibold capitalize bg-emerald-500/90 text-white"><span class="h-1.5 w-1.5 rounded-full bg-white/70"></span>approved</div><div class="absolute right-3 top-3 flex items-center gap-1 rounded-full bg-black/50 px-2.5 py-1 text-[10px] font-medium text-white/90 backdrop-blur-sm">â Cloudinary</div><div class="absolute left-3 top-10"><span class="flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold backdrop-blur-sm bg-sky-500/80 text-white">ð¤ WebPurify</span></div><div class="absolute inset-x-0 bottom-0 p-4"><p class="mb-0.5 line-clamp-2 text-sm font-semibold leading-snug text-white">Beachside</p><p class="text-xs text-white/60">May 17, 2026</p><div class="mt-2 flex flex-wrap gap-1 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">â 800Ã800</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">ð¤ Face crop</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">ð§ Watermarked</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">â¡ Auto WebP</span></div><p class="mt-2 text-[10px] text-white/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100">Click to expand</p></div></article></div><div class="mb-5 break-inside-avoid"><article class="group relative aspect-4/5 cursor-pointer overflow-hidden rounded-2xl border border-(--line) shadow-[0_4px_24px_rgba(23,58,64,0.14)] transition-shadow hover:shadow-[0_8px_32px_rgba(23,58,64,0.22)]" role="button" tabindex="0" aria-label="Open Birds"><img src="https://res.cloudinary.com/demo-article-projects/image/upload/f_auto,q_auto,c_fill,g_auto:faces,w_800,h_800/community-photo-wall/1779015970782-birds" alt="Birds" loading="lazy" class="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="pointer-events-none absolute inset-0 bg-linear-to-b from-black/50 via-transparent to-transparent"></div><div class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/80 via-black/25 to-transparent"></div><div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-semibold capitalize bg-emerald-500/90 text-white"><span class="h-1.5 w-1.5 rounded-full bg-white/70"></span>approved</div><div class="absolute right-3 top-3 flex items-center gap-1 rounded-full bg-black/50 px-2.5 py-1 text-[10px] font-medium text-white/90 backdrop-blur-sm">â Cloudinary</div><div class="absolute left-3 top-10"><span class="flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold backdrop-blur-sm bg-sky-500/80 text-white">ð¤ WebPurify</span></div><div class="absolute inset-x-0 bottom-0 p-4"><p class="mb-0.5 line-clamp-2 text-sm font-semibold leading-snug text-white">Birds</p><p class="text-xs text-white/60">May 17, 2026</p><div class="mt-2 flex flex-wrap gap-1 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">â 800Ã800</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">ð¤ Face crop</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">ð§ Watermarked</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">â¡ Auto WebP</span></div><p class="mt-2 text-[10px] text-white/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100">Click to expand</p></div></article></div><div class="mb-5 break-inside-avoid"><article class="group relative aspect-4/5 cursor-pointer overflow-hidden rounded-2xl border border-(--line) shadow-[0_4px_24px_rgba(23,58,64,0.14)] transition-shadow hover:shadow-[0_8px_32px_rgba(23,58,64,0.22)]" role="button" tabindex="0" aria-label="Open Lion"><img src="https://res.cloudinary.com/demo-article-projects/image/upload/f_auto,q_auto,c_fill,g_auto:faces,w_800,h_800/community-photo-wall/1779014866792-lion" alt="Lion" loading="lazy" class="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="pointer-events-none absolute inset-0 bg-linear-to-b from-black/50 via-trans
1parent to-transparent"></div><div class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/80 via-black/25 to-transparent"></div><div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-semibold capitalize bg-emerald-500/90 text-white"><span class="h-1.5 w-1.5 rounded-full bg-white/70"></span>approved</div><div class="absolute right-3 top-3 flex items-center gap-1 rounded-full bg-black/50 px-2.5 py-1 text-[10px] font-medium text-white/90 backdrop-blur-sm">â Cloudinary</div><div class="absolute left-3 top-10"><span class="flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold backdrop-blur-sm bg-sky-500/80 text-white">ð¤ WebPurify</span></div><div class="absolute inset-x-0 bottom-0 p-4"><p class="mb-0.5 line-clamp-2 text-sm font-semibold leading-snug text-white">Lion</p><p class="text-xs text-white/60">May 17, 2026</p><div class="mt-2 flex flex-wrap gap-1 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">â 800Ã800</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">ð¤ Face crop</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">ð§ Watermarked</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">â¡ Auto WebP</span></div><p class="mt-2 text-[10px] text-white/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100">Click to expand</p></div></article></div><div class="mb-5 break-inside-avoid"><article class="group relative aspect-4/5 cursor-pointer overflow-hidden rounded-2xl border border-(--line) shadow-[0_4px_24px_rgba(23,58,64,0.14)] transition-shadow hover:shadow-[0_8px_32px_rgba(23,58,64,0.22)]" role="button" tabindex="0" aria-label="Open 1779011686926-Tropical sunset with palm silhouettes"><img src="https://res.cloudinary.com/demo-article-projects/image/upload/f_auto,q_auto,c_fill,g_auto:faces,w_800,h_800/community-photo-wall/1779011686926-Tropical sunset with palm silhouettes" alt="1779011686926-Tropical sunset with palm silhouettes" loading="lazy" class="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="pointer-events-none absolute inset-0 bg-linear-to-b from-black/50 via-transparent to-transparent"></div><div class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/80 via-black/25 to-transparent"></div><div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-semibold capitalize bg-emerald-500/90 text-white"><span class="h-1.5 w-1.5 rounded-full bg-white/70"></span>approved</div><div class="absolute right-3 top-3 flex items-center gap-1 rounded-full bg-black/50 px-2.5 py-1 text-[10px] font-medium text-white/90 backdrop-blur-sm">â Cloudinary</div><div class="absolute left-3 top-10"><span class="flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold backdrop-blur-sm bg-violet-500/80 text-white">ð¤ Human</span></div><div class="absolute inset-x-0 bottom-0 p-4"><p class="mb-0.5 line-clamp-2 text-sm font-semibold leading-snug text-white">1779011686926-Tropical sunset with palm silhouettes</p><p class="text-xs text-white/60">May 17, 2026</p><div class="mt-2 flex flex-wrap gap-1 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">â 800Ã800</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">ð¤ Face crop</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">ð§ Watermarked</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">â¡ Auto WebP</span></div><p class="mt-2 text-[10px] text-white/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100">Click to expand</p></div></article></div><div class="mb-5 break-inside-avoid"><article class="group relative aspect-4/5 cursor-pointer overflow-hidden rounded-2xl border border-(--line) shadow-[0_4px_24px_rgba(23,58,64,0.14)] transition-shadow hover:shadow-[0_8px_32px_rgba(23,58,64,0.22)]" role="button" tabindex="0" aria-label="Open 1779011085504-mtkenya"><img src="https://res.cloudinary.com/demo-article-projects/image/upload/f_auto,q_auto,c_fill,g_auto:faces,w_800,h_800/community-photo-wall/1779011085504-mtkenya" alt="1779011085504-mtkenya" loading="lazy" class="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="pointer-events-none absolute inset-0 bg-linear-to-b from-black/50 via-trans
1parent to-transparent"></div><div class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/80 via-black/25 to-transparent"></div><div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-semibold capitalize bg-emerald-500/90 text-white"><span class="h-1.5 w-1.5 rounded-full bg-white/70"></span>approved</div><div class="absolute right-3 top-3 flex items-center gap-1 rounded-full bg-black/50 px-2.5 py-1 text-[10px] font-medium text-white/90 backdrop-blur-sm">â Cloudinary</div><div class="absolute left-3 top-10"><span class="flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold backdrop-blur-sm bg-violet-500/80 text-white">ð¤ Human</span></div><div class="absolute inset-x-0 bottom-0 p-4"><p class="mb-0.5 line-clamp-2 text-sm font-semibold leading-snug text-white">1779011085504-mtkenya</p><p class="text-xs text-white/60">May 17, 2026</p><div class="mt-2 flex flex-wrap gap-1 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">â 800Ã800</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">ð¤ Face crop</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">ð§ Watermarked</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">â¡ Auto WebP</span></div><p class="mt-2 text-[10px] text-white/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100">Click to expand</p></div></article></div><div class="mb-5 break-inside-avoid"><article class="group relative aspect-4/5 cursor-pointer overflow-hidden rounded-2xl border border-(--line) shadow-[0_4px_24px_rgba(23,58,64,0.14)] transition-shadow hover:shadow-[0_8px_32px_rgba(23,58,64,0.22)]" role="button" tabindex="0" aria-label="Open 1779010765506-mtkenya"><img src="https://res.cloudinary.com/demo-article-projects/image/upload/f_auto,q_auto,c_fill,g_auto:faces,w_800,h_800/community-photo-wall/1779010765506-mtkenya" alt="1779010765506-mtkenya" loading="lazy" class="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="pointer-events-none absolute inset-0 bg-linear-to-b from-black/50 via-transparent to-transparent"></div><div class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/80 via-black/25 to-transparent"></div><div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-semibold capitalize bg-emerald-500/90 text-white"><span class="h-1.5 w-1.5 rounded-full bg-white/70"></span>approved</div><div class="absolute right-3 top-3 flex items-center gap-1 rounded-full bg-black/50 px-2.5 py-1 text-[10px] font-medium text-white/90 backdrop-blur-sm">â Cloudinary</div><div class="absolute left-3 top-10"><span class="flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold backdrop-blur-sm bg-violet-500/80 text-white">ð¤ Human</span></div><div class="absolute inset-x-0 bottom-0 p-4"><p class="mb-0.5 line-clamp-2 text-sm font-semibold leading-snug text-white">1779010765506-mtkenya</p><p class="text-xs text-white/60">May 17, 2026</p><div class="mt-2 flex flex-wrap gap-1 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">â 800Ã800</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">ð¤ Face crop</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">ð§ Watermarked</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">â¡ Auto WebP</span></div><p class="mt-2 text-[10px] text-white/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100">Click to expand</p></div></article></div><div class="mb-5 break-inside-avoid"><article class="group relative aspect-4/5 cursor-pointer overflow-hidden rounded-2xl border border-(--line) shadow-[0_4px_24px_rgba(23,58,64,0.14)] transition-shadow hover:shadow-[0_8px_32px_rgba(23,58,64,0.22)]" role="button" tabindex="0" aria-label="Open 1779010133453-Tropical sunset with palm silhouettes"><img src="https://res.cloudinary.com/demo-article-projects/image/upload/f_auto,q_auto,c_fill,g_auto:faces,w_800,h_800/community-photo-wall/1779010133453-Tropical sunset with palm silhouettes" alt="1779010133453-Tropical sunset with palm silhouettes" loading="lazy" class="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="pointer-events-none absolute inset-0 bg-linear-to-b from-black/50 via-trans
1parent to-transparent"></div><div class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/80 via-black/25 to-transparent"></div><div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-semibold capitalize bg-emerald-500/90 text-white"><span class="h-1.5 w-1.5 rounded-full bg-white/70"></span>approved</div><div class="absolute right-3 top-3 flex items-center gap-1 rounded-full bg-black/50 px-2.5 py-1 text-[10px] font-medium text-white/90 backdrop-blur-sm">â Cloudinary</div><div class="absolute left-3 top-10"><span class="flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold backdrop-blur-sm bg-violet-500/80 text-white">ð¤ Human</span></div><div class="absolute inset-x-0 bottom-0 p-4"><p class="mb-0.5 line-clamp-2 text-sm font-semibold leading-snug text-white">1779010133453-Tropical sunset with palm silhouettes</p><p class="text-xs text-white/60">May 17, 2026</p><div class="mt-2 flex flex-wrap gap-1 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">â 800Ã800</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">ð¤ Face crop</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">ð§ Watermarked</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">â¡ Auto WebP</span></div><p class="mt-2 text-[10px] text-white/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100">Click to expand</p></div></article></div><div class="mb-5 break-inside-avoid"><article class="group relative aspect-4/5 cursor-pointer overflow-hidden rounded-2xl border border-(--line) shadow-[0_4px_24px_rgba(23,58,64,0.14)] transition-shadow hover:shadow-[0_8px_32px_rgba(23,58,64,0.22)]" role="button" tabindex="0" aria-label="Open 1779009303713-mtkenya"><img src="https://res.cloudinary.com/demo-article-projects/image/upload/f_auto,q_auto,c_fill,g_auto:faces,w_800,h_800/community-photo-wall/1779009303713-mtkenya" alt="1779009303713-mtkenya" loading="lazy" class="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="pointer-events-none absolute inset-0 bg-linear-to-b from-black/50 via-transparent to-transparent"></div><div class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/80 via-black/25 to-transparent"></div><div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-semibold capitalize bg-emerald-500/90 text-white"><span class="h-1.5 w-1.5 rounded-full bg-white/70"></span>approved</div><div class="absolute right-3 top-3 flex items-center gap-1 rounded-full bg-black/50 px-2.5 py-1 text-[10px] font-medium text-white/90 backdrop-blur-sm">â Cloudinary</div><div class="absolute left-3 top-10"><span class="flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold backdrop-blur-sm bg-violet-500/80 text-white">ð¤ Human</span></div><div class="absolute inset-x-0 bottom-0 p-4"><p class="mb-0.5 line-clamp-2 text-sm font-semibold leading-snug text-white">1779009303713-mtkenya</p><p class="text-xs text-white/60">May 17, 2026</p><div class="mt-2 flex flex-wrap gap-1 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">â 800Ã800</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">ð¤ Face crop</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">ð§ Watermarked</span><span class="rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-medium text-white/90 backdrop-blur-sm">â¡ Auto WebP</span></div><p class="mt-2 text-[10px] text-white/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100">Click to expand</p></div></article></div></div></main>
1<script>(function(t){let s;try{s=JSON.parse(sessionStorage.getItem(t.storageKey)||"{}")}catch(e){console.error(e);return}const c=t.key||window.history.state?.__TSR_key,r=c?s[c]:void 0;if(t.shouldScrollRestoration&&r&&typeof r=="object"&&Object.keys(r).length>0){for(const e in r){const o=r[e];if(!o||typeof o!="object")continue;const l=o.scrollX,i=o.scrollY;if(!(!Number.isFinite(l)||!Number.isFinite(i))){if(e==="window")window.scrollTo({top:i,left:l,behavior:t.behavior});else if(e){let n;try{n=document.querySelector(e)}catch{continue}n&&(n.scrollLeft=l,n.scrollTop=i)}}}return}const a=window.location.hash.split("#",2)[1];if(a){const e=window.history.state?.__hashScrollIntoViewOptions??!0;if(e){const o=document.getElementById(a);o&&o.scrollIntoView(e)}return}window.scrollTo({top:0,left:0,behavior:t.behavior})})({"storageKey":"tsr-scroll-restoration-v1_3","shouldScrollRestoration":true});document.currentScript.remove()</script>
1<!--/$--><footer class="mt-20 border-t border-(--line) px-4 pb-14 pt-10 text-(--sea-ink-soft)"><div class="page-wrap flex flex-col items-center justify-between gap-4 text-center sm:flex-row sm:text-left"><div><p class="m-0 text-sm">© <!-- -->2026<!-- --> <a href="https://github.com/musebe" target="_blank" rel="noreferrer" class="font-medium text-(--sea-ink) hover:underline">Eugene Musebe</a>. All rights reserved.</p><p class="mt-1 text-xs">Built with<!-- --> <a href="https://tanstack.com/start" target="_blank" rel="noreferrer" class="hover:underline">TanStack Start</a> <!-- -->&<!-- --> <a href="https://cloudinary.com" target="_blank" rel="noreferrer" class="hover:underline">Cloudinary</a></p></div><div class="flex items-center gap-3"><a href="https://github.com/musebe/tanstack-start-community-photo-wall" target="_blank" rel="noreferrer" class="flex items-center gap-1.5 rounded-lg border border-(--line) bg-(--surface) px-3 py-1.5 text-xs font-medium text-(--sea-ink-soft) transition hover:text-(--sea-ink)"><svg viewBox="0 0 16 16" aria-hidden="true" width="14" height="14" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>View source</a><a href="https://github.com/musebe" target="_blank" rel="noreferrer" class="rounded-xl p-2 transition hover:bg-(--link-bg-hover) hover:text-(--sea-ink)" aria-label="Eugene Musebe on GitHub"><svg viewBox="0 0 16 16" aria-hidden="true" width="20" height="20" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a><a href="https://cloudinary.com" target="_blank" rel="noreferrer" class="rounded-xl p-2 transition hover:bg-(--link-bg-hover) hover:text-(--sea-ink)" aria-label="Powered by Cloudinary"><svg viewBox="0 0 24 24" aria-hidden="true" width="20" height="20" fill="currentColor"><path d="M23.5 12.6c0 2.9-2.3 5.2-5.2 5.2h-1.1v-1.8h1.1c1.9 0 3.4-1.5 3.4-3.4 0-1.7-1.2-3.1-2.9-3.4l-.7-.1-.1-.7C17.6 6 15.7 4.4 13.5 4.4c-1.7 0-3.3.9-4.2 2.4l-.4.7-.7-.2c-.3-.1-.6-.1-.9-.1-2 0-3.6 1.6-3.6 3.6 0 .5.1 1 .3 1.5l.4.9-.9.2c-1.3.3-2.2 1.5-2.2 2.8 0 1.6 1.3 2.9 2.9 2.9h1.3v1.8H4.2C1.9 20.9 0 19 0 16.7c0-1.7 1-3.2 2.5-3.9-.1-.4-.1-.9-.1-1.3C2.4 8.4 4.8 6 7.8 6c.2 0 .4 0 .6.1C9.5 4.3 11.4 3.2 13.5 3.2c2.8 0 5.2 1.9 5.9 4.6 2.4.6 4.1 2.7 4.1 4.8z"></path></svg></a></div></div></footer>
1<script class="$tsr" id="$tsr-stream-barrier">(self.$R=self.$R||{})["tsr"]=[];self.$_TSR={h(){this.hydrated=!0,this.c()},e(){this.streamEnded=!0,this.c()},c(){this.hydrated&&this.streamEnded&&(delete self.$_TSR,delete self.$R.tsr)},p(e){this.initialized?e():this.buffer.push(e)},buffer:[]};$_TSR.router=($R=>$R[0]={manifest:$R[1]={routes:$R[2]={__root__:$R[3]={preloads:$R[4]=["/assets/index-Ns2NWYeH.js"],assets:$R[5]=[$R[6]={tag:"script",attrs:$R[7]={type:"module",async:!0},children:"import(\"/assets/index-Ns2NWYeH.js\")"}]},"/gallery":$R[8]={preloads:$R[9]=["/assets/gallery-CYoU8iWI.js","/assets/button-DYzrrp25.js","/assets/utils-D__KWHVo.js","/assets/cloudinary-url-BszzSyUt.js"]}}},matches:$R[10]=[$R[11]={i:"__root__�",u:1791013825807,s:"success",ssr:!0},$R[12]={i:"�gallery�gallery",u:1791013826035,s:"success",l:$R[13]=[$R[14]={id:"photo-1779028913900-lig39",title:"Beachside",url:"https://res.cloudinary.com/demo-article-projects/image/upload/v1779028914/community-photo-wall/1779028913900-Beachside.webp",publicId:"community-photo-wall/1779028913900-Beachside",status:"approved",createdAt:"2026-05-17T14:41:54Z",width:800,height:800,processedSize:33864,originalSize:1960957,moderationSource:"webpurify"},$R[15]={id:"photo-1779015970782-st8mv",title:"Birds",url:"https://res.cloudinary.com/demo-article-projects/image/upload/v1779015971/community-photo-wall/1779015970782-birds.webp",publicId:"community-photo-wall/1779015970782-birds",status:"approved",createdAt:"2026-05-17T11:06:11Z",width:800,height:800,processedSize:47942,originalSize:2074768,moderationSource:"webpurify"},$R[16]={id:"photo-1779014866792-fq4gi",title:"Lion",url:"https://res.cloudinary.com/demo-article-projects/image/upload/v1779014869/community-photo-wall/1779014866792-lion.jpg",publicId:"community-photo-wall/1779014866792-lion",status:"approved",createdAt:"2026-05-17T10:47:49Z",width:800,height:800,processedSize:84698,originalSize:2553966,moderationSource:"webpurify"},$R[17]={id:"community-photo-wall/1779011686926-Tropical sunset with palm silhouettes",title:"1779011686926-Tropical sunset with palm silhouettes",url:"https://res.cloudinary.com/demo-article-projects/image/upload/v1779011689/community-photo-wall/1779011686926-Tropical%20sunset%20with%20palm%20silhouettes.webp",publicId:"community-photo-wall/1779011686926-Tropical sunset with palm silhouettes",status:"approved",createdAt:"2026-05-17T09:54:49Z",width:800,height:800,processedSize:108640,originalSize:void 0,moderationSource:"human"},$R[18]={id:"community-photo-wall/1779011085504-mtkenya",title:"1779011085504-mtkenya",url:"https://res.cloudinary.com/demo-article-projects/image/upload/v1779011088/community-photo-wall/1779011085504-mtkenya.webp",publicId:"community-photo-wall/1779011085504-mtkenya",status:"approved",createdAt:"2026-05-17T09:44:48Z",width:800,height:800,processedSize:117066,originalSize:void 0,moderationSource:"human"},$R[19]={id:"community-photo-wall/1779010765506-mtkenya",title:"1779010765506-mtkenya",url:"https://res.cloudinary.com/demo-article-projects/image/upload/v1779010767/community-photo-wall/1779010765506-mtkenya.webp",publicId:"community-photo-wall/1779010765506-mtkenya",status:"approved",createdAt:"2026-05-17T09:39:27Z",width:800,height:800,processedSize:117066,originalSize:void 0,moderationSource:"human"},$R[20]={id:"community-photo-wall/1779010133453-Tropical sunset with palm silhouettes",title:"1779010133453-Tropical sunset with palm silhouettes",url:"https://res.cloudinary.com/demo-article-projects/image/upload/v1779010136/community-photo-wall/1779010133453-Tropical%20sunset%20with%20palm%20silhouettes.webp",publicId:"community-photo-wall/1779010133453-Tropical sunset with palm silhouettes",status:"approved",createdAt:"2026-05-17T09:28:56Z",width:800,height:800,processedSize:108640,originalSize:void 0,moderationSource:"human"},$R[21]={id:"community-photo-wall/1779009303713-mtkenya",title:"1779009303713-mtkenya",url:"https://res.cloudinary.com/demo-article-projects/image/upload/v1779009307/community-photo-wall/1779009303713-mtkenya.webp",publicId:"community-photo-wall/1779009303713-mtkenya",status:"approved",createdAt:"2026-05-17T09:15:07Z",width:800,height:800,processedSize:117066,originalSize:void 0,moderationSource:"human"}],ssr:!0}],lastMatchId:"�gallery�gallery"})($R["tsr"]);$_TSR.e();document.currentScript.remove()</script>
1<script type="module" async="">import("/assets/index-Ns2NWYeH.js")</script>
1</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.