README / index.html
jason-res's picture
Restore new-tab navigation for internal MAP links
aa9c244 verified
Raw
History Blame Contribute Delete
5.02 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MAP AI Benchmark</title>
<style>
:root {
color-scheme: light;
--ink: #111827;
--muted: #4b5563;
--line: #d7dee8;
--blue: #1d4ed8;
--green: #0f766e;
--amber: #b45309;
--surface: #f8fafc;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: var(--surface);
color: var(--ink);
}
.skip-link {
position: absolute;
left: 16px;
top: 16px;
z-index: 100;
transform: translateY(-160%);
border-radius: 8px;
padding: 10px 14px;
background: #ffffff;
color: var(--ink);
font-weight: 800;
text-decoration: none;
box-shadow: 0 0 0 3px #fbbf24;
}
.skip-link:focus-visible {
transform: translateY(0);
}
a:focus-visible {
outline: 3px solid #fbbf24;
outline-offset: 3px;
}
main {
max-width: 1060px;
margin: 0 auto;
padding: 48px 20px;
}
h1 {
max-width: 820px;
margin: 0 0 16px;
font-size: 4rem;
line-height: 0.98;
}
p {
max-width: 780px;
margin: 0 0 18px;
color: var(--muted);
font-size: 1.05rem;
line-height: 1.65;
}
.links {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.status {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
max-width: 620px;
margin-top: 30px;
}
.status div {
min-height: 72px;
border: 1px solid var(--line);
border-radius: 8px;
padding: 14px;
background: #ffffff;
}
.status strong,
.status span {
display: block;
}
.status span {
margin-top: 4px;
color: var(--muted);
font-weight: 700;
}
.links a {
min-height: 44px;
display: inline-flex;
align-items: center;
border: 1px solid var(--line);
border-left: 4px solid var(--green);
border-radius: 8px;
padding: 10px 14px;
color: var(--ink);
background: #ffffff;
font-weight: 700;
text-decoration: none;
}
.links a:focus-visible {
box-shadow: 0 0 0 4px #ffffff, 0 0 0 7px #fbbf24;
}
.links a:nth-child(2) {
border-left-color: var(--blue);
}
.links a:nth-child(3) {
border-left-color: var(--amber);
}
.note {
margin-top: 36px;
padding-top: 18px;
border-top: 1px solid var(--line);
color: #64748b;
font-size: 0.96rem;
}
@media (max-width: 760px) {
h1 {
font-size: 2.55rem;
}
}
@media (max-width: 520px) {
main {
padding: 38px 16px;
}
h1 {
font-size: 2.25rem;
}
.links a {
width: 100%;
justify-content: center;
}
.status {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<main id="main-content" tabindex="-1">
<h1>Multimodal Accessibility Planning AI Benchmark</h1>
<p>
MAP evaluates multimodal AI systems as assistants for users with accessibility requirements when planning visits to real places.
The first benchmark setting focuses on Zurich and evidence-backed information about accessibility features of restaurants,
cafes, museums, offices, and other public-facing locations.
</p>
<nav class="links" aria-label="MAP public pages">
<a href="https://huggingface.co/spaces/map-ai-benchmark/challenge" target="_blank" rel="noopener noreferrer" aria-label="Challenge, opens in a new tab">Challenge</a>
<a href="https://huggingface.co/spaces/map-ai-benchmark/workshop" target="_blank" rel="noopener noreferrer" aria-label="Workshop, opens in a new tab">Workshop</a>
<a href="https://huggingface.co/spaces/map-ai-benchmark/benchmark" target="_blank" rel="noopener noreferrer" aria-label="Benchmark, opens in a new tab">Benchmark</a>
</nav>
<section class="status" aria-label="Future MAP repositories">
<div>
<strong>Models</strong>
<span>Coming soon</span>
</div>
<div>
<strong>Datasets</strong>
<span>Coming soon</span>
</div>
</section>
<p class="note">
Submission and leaderboard will be added shortly.
</p>
</main>
</body>
</html>