<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Met Object Details</title>
<style>
/* @shared-theme-tokens */
:root {
--placeholder: var(--image-placeholder);
--error: var(--error-color);
}
html,
body {
margin: 0;
width: 100%;
background: var(--surface);
color: var(--text);
font-family:
system-ui,
-apple-system,
sans-serif;
}
* {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
.app {
padding: 10px;
width: 100%;
min-width: 0;
}
.card {
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel);
overflow: hidden;
}
.image-wrap {
position: relative;
margin: 0;
min-height: clamp(300px, 66vh, 860px);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.image-ambient {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: blur(18px) saturate(0.85);
transform: scale(1.08);
opacity: 0.42;
}
.image-stage {
position: relative;
z-index: 1;
min-height: inherit;
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
}
.image-wrap img {
width: auto;
max-width: min(98%, 1080px);
max-height: clamp(340px, 66vh, 860px);
object-fit: contain;
display: block;
background: var(--placeholder);
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
transition:
max-height 160ms ease,
max-width 160ms ease;
}
.image-fallback {
width: min(98%, 1080px);
max-height: clamp(340px, 66vh, 860px);
min-height: clamp(240px, 50vh, 520px);
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
text-align: center;
color: var(--muted);
background: var(--placeholder);
border: 1px solid var(--line);
border-radius: 10px;
}
.body {
padding: 14px;
}
.text-header {
display: grid;
gap: 6px;
}
.kicker {
margin: 0 0 6px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
}
.title {
margin: 0;
font-size: 18px;
line-height: 1.25;
}
.highlights {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.highlights li {
border-radius: 999px;
border: 1px solid var(--line);
background: var(--accent-soft);
color: var(--muted);
padding: 4px 10px;
font-size: 12px;
line-height: 1.4;
}
.meta-details {
margin-top: 10px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel);
overflow: hidden;
}
.meta-details summary {
list-style: none;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--muted);
padding: 10px 12px;
user-select: none;
}
.meta-details summary::-webkit-details-marker {
display: none;
}
.meta-details[open] summary {
border-bottom: 1px solid var(--line);
}
.meta {
margin: 0;
display: grid;
gap: 8px;
padding: 10px 12px 12px;
}
.meta-row {
display: grid;
grid-template-columns: minmax(92px, 116px) 1fr;
align-items: start;
gap: 10px;
}
.meta-key {
margin: 0;
color: var(--muted);
font-size: 12px;
font-weight: 600;
}
.meta-value {
margin: 0;
font-size: 13px;
line-height: 1.4;
}
.object-link {
margin-top: 10px;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--accent);
text-decoration: none;
font-weight: 600;
font-size: 12px;
}
.object-link:hover {
text-decoration: underline;
}
.status {
margin-top: 8px;
min-height: 16px;
font-size: 12px;
color: var(--muted);
}
.status.error {
color: var(--error);
}
.empty {
padding: 20px 14px;
color: var(--muted);
font-size: 13px;
}
@media (max-width: 600px) {
.app {
padding: 8px;
}
.image-wrap {
min-height: clamp(250px, 58vh, 540px);
}
.image-stage {
padding: 10px;
}
.image-wrap img {
max-height: min(64vh, 560px);
}
.image-fallback {
max-height: min(64vh, 560px);
min-height: min(40vh, 300px);
}
.body {
padding: 12px;
}
.meta-row {
grid-template-columns: minmax(84px, 102px) 1fr;
gap: 8px;
}
}
</style>
</head>
<body>
<main class="app">
<article class="card">
<div id="image-wrap" class="image-wrap" hidden>
<div id="image-ambient" class="image-ambient" aria-hidden="true"></div>
<div class="image-stage">
<img id="object-image" alt="Artwork image" />
<div id="image-fallback" class="image-fallback" hidden>Image unavailable for this object.</div>
</div>
</div>
<div class="body">
<div id="text-header" class="text-header">
<p class="kicker">Met Collection Object</p>
<h1 id="title" class="title">Loading object details...</h1>
</div>
<ul id="highlights" class="highlights" hidden></ul>
<details id="meta-details" class="meta-details" open>
<summary id="meta-summary">Show full object details</summary>
<dl id="meta" class="meta"></dl>
</details>
<a id="object-link" class="object-link" href="#" target="_blank" rel="noreferrer noopener" hidden>
Open on metmuseum.org
</a>
</div>
<div id="empty" class="empty" hidden>No object data is available for this result.</div>
</article>
<div id="status" class="status" role="status" aria-live="polite" aria-atomic="true"></div>
</main>
<script src="mcp-app.js"></script>
</body>
</html>
