<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>LeafBox Technologies — Christmas Theme Demos</title>
<style>
:root {
--bg: #ffffff;
--muted: #f4f6f8;
--accent: #0a8f6b;
--text: #0b1a2b;
}
html,
body {
height: 100%;
margin: 0;
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
body {
background: var(--bg);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
padding: 40px
}
.wrap {
max-width: 960px;
width: 100%
}
header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
margin-bottom: 28px
}
.logo {
font-weight: 700;
color: var(--accent);
font-size: 2.25rem
}
h1 {
margin: 0;
font-size: 1.5rem
}
p.lead {
color: #54636d;
margin: 8px 0 20px
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px
}
.card {
background: var(--muted);
padding: 18px;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(11, 26, 43, 0.06);
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 8px;
transition: transform .18s ease, box-shadow .18s ease
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(11, 26, 43, 0.12)
}
.card .title {
font-weight: 600
}
.card .meta {
font-size: .95rem;
color: #3f5059
}
footer {
margin-top: 28px;
font-size: .9rem;
color: #6b7b84
}
@media (prefers-color-scheme:dark) {
:root {
--bg: #061026;
--muted: #071428;
--accent: #58ffb1;
--text: #e6f7f0
}
body {
background: linear-gradient(180deg, #031026, #061428)
}
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="logo">🍃 LeafBox</div>
<div>
<h1>Christmas Theme — Demo Index</h1>
<p class="lead">Open each demo to compare AI-generated variants. Built with vanilla HTML/CSS/JS.</p>
</div>
</header>
<main>
<div class="grid">
<a class="card" href="minimal/claude/index.html" target="_blank" rel="noopener">
<div class="title">Minimal — Claude</div>
</a>
<a class="card" href="minimal/glm/index.html" target="_blank" rel="noopener">
<div class="title">Minimal — GLM</div>
</a>
<a class="card" href="minimal/minimax/index.html" target="_blank" rel="noopener">
<div class="title">Minimal — Minimax</div>
</a>
<a class="card" href="neon/claude/index.html" target="_blank" rel="noopener">
<div class="title">Neon — Claude</div>
</a>
<a class="card" href="neon/glm/index.html" target="_blank" rel="noopener">
<div class="title">Neon — GLM</div>
</a>
<a class="card" href="neon/minimax/index.html" target="_blank" rel="noopener">
<div class="title">Neon — Minimax</div>
</a>
</div>
</main>
<footer>
Tip: Serve files with a static server for best results:
<pre style="background:#f6f8fa;padding:8px;border-radius:6px;margin-top:8px">python3 -m http.server 8000</pre>
</footer>
</div>
</body>
</html>