<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Affect Index</title>
<style>
:root { --gap: 14px; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#111; background:#fff; }
header { padding:48px 24px; border-bottom:1px solid #eee; }
h1 { margin:0; font-size:28px; letter-spacing:.02em; }
nav { margin-top:12px; }
nav a { margin-right:16px; text-decoration:underline; color:#111; }
main { padding:24px; max-width:1100px; margin:auto; }
.intro { margin: 6px 0 24px; color:#444; }
/* --- Gallery --- */
.gallery {
display:grid;
grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) );
gap: var(--gap);
align-items: start;
}
.card {
display:block;
border:1px solid #eee;
border-radius:14px;
overflow:hidden;
text-decoration:none;
color:inherit;
transition: transform .08s ease, box-shadow .08s ease;
background:#fff;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.card img {
width:100%; height: auto; display:block;
aspect-ratio: 4/3; object-fit: cover; background:#f6f6f6;
}
.meta { padding:10px 12px; font-size:13px; color:#555; display:flex; justify-content:space-between; gap:8px; }
.meta span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:68%; }
footer { padding:24px; text-align:center; border-top:1px solid #eee; font-size:14px; margin-top:42px; }
</style>
</head>
<body>
<header>
<h1>AFFECT INDEX</h1>
<nav>
<a href="/imgs/">imgs</a>
<a href="/sounds/">sounds</a>
<a href="/movs/">movs</a>
<a href="/txts/">txts</a>
</nav>
</header>
<main>
<p class="intro">Welcome. New site is under construction.</p>
<!-- ====== GALLERY (imgs/ に入れた画像を一覧表示) ======
使い方：
1) /imgs/ に jpg/png/webp などを置く
2) 下の <a class="card"> … </a> をコピペしてファイル名とキャプションを差し替え
3) 画像原寸に飛ばしたくない場合は <a> を <div> にして href を消す
-->
<section class="gallery">
<!-- 例：myphoto-01.jpg を表示 -->
<a class="card" href="imgs/myphoto-01.jpg" target="_blank" rel="noopener">
<img src="imgs/myphoto-01.jpg" alt="myphoto-01" loading="lazy">
<div class="meta"><span>myphoto-01.jpg</span><time></time></div>
</a>
<a class="card" href="imgs/myphoto-02.jpg" target="_blank" rel="noopener">
<img src="imgs/myphoto-02.jpg" alt="myphoto-02" loading="lazy">
<div class="meta"><span>myphoto-02.jpg</span><time></time></div>
</a>
<a class="card" href="imgs/myphoto-03.jpg" target="_blank" rel="noopener">
<img src="imgs/myphoto-03.jpg" alt="myphoto-03" loading="lazy">
<div class="meta"><span>myphoto-03.jpg</span><time></time></div>
</a>
<!-- ここから下、必要なだけコピペしてファイル名だけ変えていけばOK -->
<!--
<a class="card" href="imgs/xxxx.jpg" target="_blank" rel="noopener">
<img src="imgs/xxxx.jpg" alt="xxxx" loading="lazy">
<div class="meta"><span>キャプションやファイル名</span><time></time></div>
</a>
-->
</section>
</main>
<footer>
AFFECT INDEX is based in Tokyo /
<a href="mailto:99@affect-index.com">99@affect-index.com</a> – Hajime Matsuo
</footer>
</body>
</html>