gallery / index.html
cikuro's picture
Upload index.html with huggingface_hub
57d7e63 verified
Raw History Blame Contribute Delete
14.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NAR Gallery</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#0f1115; color:#e8e8e8; }
header { padding:24px 20px 12px; text-align:center; }
h1 { font-size:1.6rem; letter-spacing:0.5px; }
.sub { color:#888; font-size:.85rem; margin-top:6px; }
nav { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding:16px 12px 8px; }
nav button { background:#1c1f27; color:#ccc; border:1px solid #2a2e3a; padding:8px 16px; border-radius:20px; cursor:pointer; font-size:.85rem; transition:.2s; }
nav button:hover { background:#262b36; }
nav button.active { background:#4a6cf7; color:#fff; border-color:#4a6cf7; }
#count { text-align:center; color:#777; font-size:.8rem; padding:4px 0 12px; }
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; padding:0 16px 40px; max-width:1400px; margin:0 auto; }
.gallery img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; cursor:pointer; background:#1a1d24; transition:transform .15s, box-shadow .15s; }
.gallery img:hover { transform:scale(1.02); box-shadow:0 4px 20px rgba(0,0,0,.5); }
footer { text-align:center; color:#555; font-size:.75rem; padding:20px; }
/* lightbox */
#lb { display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:100; align-items:center; justify-content:center; flex-direction:column; }
#lb img { max-width:92vw; max-height:85vh; border-radius:6px; }
#lb .caption { color:#bbb; margin-top:12px; font-size:.85rem; max-width:90vw; word-break:break-all; text-align:center; }
#lb .close { position:absolute; top:16px; right:24px; font-size:2rem; color:#fff; cursor:pointer; background:none; border:none; }
#lb .nav { position:absolute; top:50%; transform:translateY(-50%); font-size:2.4rem; color:#fff; cursor:pointer; background:none; border:none; padding:10px; }
#lb .prev { left:10px; } #lb .next { right:10px; }
</style>
</head>
<body>
<header>
<h1>🖼️ NAR Gallery</h1>
<div class="sub">Generated images archive</div>
</header>
<nav id="tabs"></nav>
<div id="count"></div>
<div class="gallery" id="gallery"></div>
<footer>Auto-generated from cikuro/zkyf544l · output/</footer>
<div id="lb">
<button class="close" onclick="closeLB()">✕</button>
<button class="nav prev" onclick="moveLB(-1)">‹</button>
<img id="lbImg" src="" alt="">
<div class="caption" id="lbCap"></div>
<button class="nav next" onclick="moveLB(1)">›</button>
</div>
<script>
const BASE = "https://huggingface.co/cikuro/zkyf544l/resolve/main/output";
const DATA = {"NAR-P / Share": ["##NAR-P/Share_2026-08-13/2026-08-13-075929_158725994139661.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-080230_158725994139661_Detail.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-082110_203344884964727.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-082403_203344884964727_Detail.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-083645_83297490648949.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-084024_83297490648949_Detail.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-084550_970352397416994.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-084926_970352397416994_Detail.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-115325_616659860997161.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-115422_616659860997161_Detail.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-115442_551426597543914.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-115525_551426597543914_Detail.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-115820_97082409605251.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-115922_97082409605251_Detail.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-115953_97082409605251.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-120108_97082409605251_Detail.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-122603_645989624180782.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-122636_645989624180782_Detail.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-122735_645989624180782_Detail.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-122808_645989624180782.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-122852_645989624180782_Detail.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-122909_645989624180782.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-122949_645989624180782_Detail.jpg", "##NAR-P/Share_2026-08-13/2026-08-13-123126_645989624180782_Detail.jpg"], "NAR / Final": ["##NAR/Final_2026-08-13/2026-08-13-075928_158725994139661.png", "##NAR/Final_2026-08-13/2026-08-13-080229_158725994139661_Detail.png", "##NAR/Final_2026-08-13/2026-08-13-082110_203344884964727.png", "##NAR/Final_2026-08-13/2026-08-13-082402_203344884964727_Detail.png", "##NAR/Final_2026-08-13/2026-08-13-083644_83297490648949.png", "##NAR/Final_2026-08-13/2026-08-13-084023_83297490648949_Detail.png", "##NAR/Final_2026-08-13/2026-08-13-084549_970352397416994.png", "##NAR/Final_2026-08-13/2026-08-13-084913_970352397416994_Detail.png", "##NAR/Final_2026-08-13/2026-08-13-115325_616659860997161.png", "##NAR/Final_2026-08-13/2026-08-13-115422_616659860997161_Detail.png", "##NAR/Final_2026-08-13/2026-08-13-115442_551426597543914.png", "##NAR/Final_2026-08-13/2026-08-13-115525_551426597543914_Detail.png", "##NAR/Final_2026-08-13/2026-08-13-115819_97082409605251.png", "##NAR/Final_2026-08-13/2026-08-13-115922_97082409605251_Detail.png", "##NAR/Final_2026-08-13/2026-08-13-115952_97082409605251.png", "##NAR/Final_2026-08-13/2026-08-13-120108_97082409605251_Detail.png", "##NAR/Final_2026-08-13/2026-08-13-122603_645989624180782.png", "##NAR/Final_2026-08-13/2026-08-13-122636_645989624180782_Detail.png", "##NAR/Final_2026-08-13/2026-08-13-122735_645989624180782_Detail.png", "##NAR/Final_2026-08-13/2026-08-13-122808_645989624180782.png", "##NAR/Final_2026-08-13/2026-08-13-122852_645989624180782_Detail.png", "##NAR/Final_2026-08-13/2026-08-13-122909_645989624180782.png", "##NAR/Final_2026-08-13/2026-08-13-122949_645989624180782_Detail.png", "##NAR/Final_2026-08-13/2026-08-13-123126_645989624180782_Detail.png"], "NAR": ["NAR_2026-08-13/2026-08-13-075453_657142958739779.png", "NAR_2026-08-13/2026-08-13-075701_657142958739779.png", "NAR_2026-08-13/2026-08-13-075836_158725994139661.png", "NAR_2026-08-13/2026-08-13-080359_158725994139661.png", "NAR_2026-08-13/2026-08-13-080451_158725994139661.png", "NAR_2026-08-13/2026-08-13-080830_158725994139661.png", "NAR_2026-08-13/2026-08-13-080900_158725994139661.png", "NAR_2026-08-13/2026-08-13-080957_158725994139661.png", "NAR_2026-08-13/2026-08-13-081027_158725994139661.png", "NAR_2026-08-13/2026-08-13-081225_158725994139661.png", "NAR_2026-08-13/2026-08-13-081443_158725994139661.png", "NAR_2026-08-13/2026-08-13-081553_158725994139661.png", "NAR_2026-08-13/2026-08-13-081623_158725994139661.png", "NAR_2026-08-13/2026-08-13-081653_158725994139661.png", "NAR_2026-08-13/2026-08-13-082004_203344884964727.png", "NAR_2026-08-13/2026-08-13-083450_83297490648949.png", "NAR_2026-08-13/2026-08-13-084139_970352397416994.png", "NAR_2026-08-13/2026-08-13-115259_616659860997161.png", "NAR_2026-08-13/2026-08-13-115433_551426597543914.png", "NAR_2026-08-13/2026-08-13-115533_149614211295117.png", "NAR_2026-08-13/2026-08-13-115605_1119252782663664.png", "NAR_2026-08-13/2026-08-13-115615_571454608192135.png", "NAR_2026-08-13/2026-08-13-115638_571454608192135.png", "NAR_2026-08-13/2026-08-13-115739_626183686023550.png", "NAR_2026-08-13/2026-08-13-115804_97082409605251.png", "NAR_2026-08-13/2026-08-13-115937_97082409605251.png", "NAR_2026-08-13/2026-08-13-120153_216740368174589.png", "NAR_2026-08-13/2026-08-13-120237_439113792506541.png", "NAR_2026-08-13/2026-08-13-120305_618156743070593.png", "NAR_2026-08-13/2026-08-13-120313_618156743070593.png", "NAR_2026-08-13/2026-08-13-120323_618156743070593.png", "NAR_2026-08-13/2026-08-13-120358_216740368174589.png", "NAR_2026-08-13/2026-08-13-120405_216740368174589.png", "NAR_2026-08-13/2026-08-13-120435_216740368174589.png", "NAR_2026-08-13/2026-08-13-120508_216740368174589.png", "NAR_2026-08-13/2026-08-13-120530_216740368174589.png", "NAR_2026-08-13/2026-08-13-120553_216740368174589.png", "NAR_2026-08-13/2026-08-13-120603_216740368174589.png", "NAR_2026-08-13/2026-08-13-120627_216740368174589.png", "NAR_2026-08-13/2026-08-13-120700_298455225438677.png", "NAR_2026-08-13/2026-08-13-120729_298455225438677_01.png", "NAR_2026-08-13/2026-08-13-120729_298455225438677_02.png", "NAR_2026-08-13/2026-08-13-120729_298455225438677_03.png", "NAR_2026-08-13/2026-08-13-120729_298455225438677_04.png", "NAR_2026-08-13/2026-08-13-120758_273391349411553_01.png", "NAR_2026-08-13/2026-08-13-120758_273391349411553_02.png", "NAR_2026-08-13/2026-08-13-120758_273391349411553_03.png", "NAR_2026-08-13/2026-08-13-120758_273391349411553_04.png", "NAR_2026-08-13/2026-08-13-120828_998624949576641.png", "NAR_2026-08-13/2026-08-13-120836_691935006780416.png", "NAR_2026-08-13/2026-08-13-120921_346378920590360.png", "NAR_2026-08-13/2026-08-13-121031_556523654327343.png", "NAR_2026-08-13/2026-08-13-121042_189970946102086.png", "NAR_2026-08-13/2026-08-13-121111_86302153619697.png", "NAR_2026-08-13/2026-08-13-121144_695519647556617.png", "NAR_2026-08-13/2026-08-13-121156_984305189906702.png", "NAR_2026-08-13/2026-08-13-121217_265314239588085.png", "NAR_2026-08-13/2026-08-13-121224_38838633492362.png", "NAR_2026-08-13/2026-08-13-121245_984433532754360.png", "NAR_2026-08-13/2026-08-13-121307_284082165099230.png", "NAR_2026-08-13/2026-08-13-121321_400747801147694.png", "NAR_2026-08-13/2026-08-13-121343_1027462249955308.png", "NAR_2026-08-13/2026-08-13-121427_1108917041153552.png", "NAR_2026-08-13/2026-08-13-121445_12089185045208.png", "NAR_2026-08-13/2026-08-13-121502_819176006778546.png", "NAR_2026-08-13/2026-08-13-121527_769768351793414.png", "NAR_2026-08-13/2026-08-13-121603_744637255544421.png", "NAR_2026-08-13/2026-08-13-121626_702195237815673.png", "NAR_2026-08-13/2026-08-13-121704_1104194080959634.png", "NAR_2026-08-13/2026-08-13-121738_798699664035767.png", "NAR_2026-08-13/2026-08-13-121753_505535540895878.png", "NAR_2026-08-13/2026-08-13-121818_253563628764968.png", "NAR_2026-08-13/2026-08-13-121834_394926041459206.png", "NAR_2026-08-13/2026-08-13-121851_397258892853556.png", "NAR_2026-08-13/2026-08-13-121908_1083987943984185.png", "NAR_2026-08-13/2026-08-13-121924_1067402825658037.png", "NAR_2026-08-13/2026-08-13-121941_757335126300187.png", "NAR_2026-08-13/2026-08-13-121954_16513833927224.png", "NAR_2026-08-13/2026-08-13-122012_721218442171405.png", "NAR_2026-08-13/2026-08-13-122019_587759056278522.png", "NAR_2026-08-13/2026-08-13-122133_698402348514659_01.png", "NAR_2026-08-13/2026-08-13-122133_698402348514659_02.png", "NAR_2026-08-13/2026-08-13-122133_698402348514659_03.png", "NAR_2026-08-13/2026-08-13-122133_698402348514659_04.png", "NAR_2026-08-13/2026-08-13-122201_1010286750881543_01.png", "NAR_2026-08-13/2026-08-13-122201_1010286750881543_02.png", "NAR_2026-08-13/2026-08-13-122201_1010286750881543_03.png", "NAR_2026-08-13/2026-08-13-122201_1010286750881543_04.png", "NAR_2026-08-13/2026-08-13-122230_375907971646712_01.png", "NAR_2026-08-13/2026-08-13-122230_375907971646712_02.png", "NAR_2026-08-13/2026-08-13-122230_375907971646712_03.png", "NAR_2026-08-13/2026-08-13-122230_375907971646712_04.png", "NAR_2026-08-13/2026-08-13-122259_1025690196322864_01.png", "NAR_2026-08-13/2026-08-13-122259_1025690196322864_02.png", "NAR_2026-08-13/2026-08-13-122259_1025690196322864_03.png", "NAR_2026-08-13/2026-08-13-122259_1025690196322864_04.png", "NAR_2026-08-13/2026-08-13-122328_732431799582585_01.png", "NAR_2026-08-13/2026-08-13-122328_732431799582585_02.png", "NAR_2026-08-13/2026-08-13-122328_732431799582585_03.png", "NAR_2026-08-13/2026-08-13-122328_732431799582585_04.png", "NAR_2026-08-13/2026-08-13-122357_990874428082213_01.png", "NAR_2026-08-13/2026-08-13-122357_990874428082213_02.png", "NAR_2026-08-13/2026-08-13-122357_990874428082213_03.png", "NAR_2026-08-13/2026-08-13-122357_990874428082213_04.png", "NAR_2026-08-13/2026-08-13-122426_575640403876802_01.png", "NAR_2026-08-13/2026-08-13-122426_575640403876802_02.png", "NAR_2026-08-13/2026-08-13-122426_575640403876802_03.png", "NAR_2026-08-13/2026-08-13-122426_575640403876802_04.png", "NAR_2026-08-13/2026-08-13-122455_536342627358596_01.png", "NAR_2026-08-13/2026-08-13-122455_536342627358596_02.png", "NAR_2026-08-13/2026-08-13-122455_536342627358596_03.png", "NAR_2026-08-13/2026-08-13-122455_536342627358596_04.png", "NAR_2026-08-13/2026-08-13-122553_645989624180782.png", "NAR_2026-08-13/2026-08-13-122759_645989624180782.png", "NAR_2026-08-13/2026-08-13-122900_645989624180782.png"]};
const cats = Object.keys(DATA);
let current = [];
const tabs = document.getElementById('tabs');
cats.forEach((c, i) => {
const b = document.createElement('button');
b.textContent = c + ' (' + DATA[c].length + ')';
b.onclick = () => select(i);
tabs.appendChild(b);
});
function select(i) {
document.querySelectorAll('#tabs button').forEach((b, j) => b.classList.toggle('active', j === i));
current = DATA[cats[i]];
render();
}
function render() {
const g = document.getElementById('gallery');
g.innerHTML = '';
document.getElementById('count').textContent = current.length + ' images';
current.forEach((p, idx) => {
const img = document.createElement('img');
img.loading = 'lazy';
img.src = BASE + '/' + encodeURIComponent(p);
img.alt = p.split('/').pop();
img.onclick = () => openLB(idx);
g.appendChild(img);
});
}
let lbIdx = 0;
function openLB(i) { lbIdx = i; updateLB(); document.getElementById('lb').style.display = 'flex'; }
function closeLB() { document.getElementById('lb').style.display = 'none'; }
function moveLB(d) { lbIdx = (lbIdx + d + current.length) % current.length; updateLB(); }
function updateLB() {
const p = current[lbIdx];
document.getElementById('lbImg').src = BASE + '/' + encodeURIComponent(p);
document.getElementById('lbCap').textContent = p;
}
document.addEventListener('keydown', e => {
if (document.getElementById('lb').style.display === 'flex') {
if (e.key === 'Escape') closeLB();
if (e.key === 'ArrowLeft') moveLB(-1);
if (e.key === 'ArrowRight') moveLB(1);
}
});
select(0);
</script>
</body>
</html>