Run details
- Model
- unbiased/pareto-26.10
- Route
- OpenRouter API, one user message
- Served by
- Unbiased
- Reasoning
- provider default
- Limits
- 60 min · 131,072 output tokens
- Date
- 22 Oct 2026
- Time
- 4 min 1 s
- Size
- 20 kB
- Tokens
- 110 in, 6,490 out
- List price
- $0.021 ($0.8 in / $3.2 out per M)
- Paid
- $0.021
Exact prompt
Build the landing page for Lumen Cycles, a Copenhagen workshop that builds custom cargo bikes to order. Make it look like a real brand you would trust with 4,000 euros. It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Reply with the file in a single ```html code block.
Source
20 kB 533 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lumen Cycles | Copenhagen Cargo</title>
<style>
:root {
--primary: #1a1a1a;
--secondary: #8c8c8c;
--accent: #d96c4a; /* Burnt Sienna */
--bg: #fdfbf7; /* Warm off-white */
--white: #ffffff;
--border: #e0e0e0;
--spacing-unit: 1.5rem;
--font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: "SF Mono", "Segoe UI Mono", "Roboto Mono", Courier, monospace;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-main);
background-color: var(--bg);
color: var(--primary);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
a { text-decoration: none; color: inherit; transition: opacity 0.2s; }
ul { list-style: none; }
/* Typography */
h1, h2, h3, h4 {
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.1;
}
h1 { font-size: clamp(3rem, 5vw, 5rem); }
h2 { font-size: clamp(2rem, 3vw, 3rem); margin-bottom: 1.5rem; }
h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
p { margin-bottom: 1.5rem; color: #4a4a4a; }
.small-text { font-size: 0.85rem; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
/* Layout */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
/* Navigation */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.logo {
font-weight: 700;
font-size: 1.25rem;
letter-spacing: -0.03em;
display: flex;
align-items: center;
gap: 0.5rem;
}
.logo svg { width: 24px; height: 24px; fill: var(--primary); }
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a:hover { color: var(--accent); }
.btn-nav {
background: var(--primary);
color: var(--white);
padding: 0.75rem 1.5rem;
border-radius: 4px;
font-size: 0.9rem;
}
.btn-nav:hover { background: #333; }
/* Hero Section */
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
padding: 6rem 0;
}
.hero-content { max-width: 500px; }
.hero-img {
width: 100%;
height: 500px;
background-color: #e5e5e5;
border-radius: 12px;
position: relative;
overflow: hidden;
}
/* CSS Illustration of a bike */
.bike-silhouette {
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 60%;
background: #d1d1d1;
border-radius: 40% 40% 0 0;
box-shadow: inset 0 -20px 40px rgba(0,0,0,0.1);
}
.bike-silhouette::before {
content: '';
position: absolute;
top: 20%;
right: 10%;
width: 30%;
height: 15%;
background: var(--primary);
clip-path: polygon(0 0, 100% 20%, 80% 100%, 0 80%);
}
.hero-badge {
display: inline-block;
background: rgba(217, 108, 74, 0.1);
color: var(--accent);
padding: 0.5rem 1rem;
border-radius: 100px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
/* CTA */
.btn-primary {
display: inline-block;
background-color: var(--primary);
color: var(--white);
padding: 1rem 2.5rem;
border-radius: 6px;
font-weight: 500;
transition: transform 0.2s;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-outline {
display: inline-block;
background-color: transparent;
color: var(--primary);
border: 1px solid var(--primary);
padding: 1rem 2.5rem;
border-radius: 6px;
font-weight: 500;
margin-left: 1rem;
}
/* Features */
.features {
padding: 6rem 0;
background: var(--white);
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 4rem;
margin-top: 3rem;
}
.feature-item svg {
width: 40px;
height: 40px;
stroke: var(--accent);
margin-bottom: 1.5rem;
}
/* Builder Section */
.builder {
padding: 6rem 0;
border-top: 1px solid var(--border);
}
.builder-container {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 4rem;
background: var(--white);
padding: 3rem;
border-radius: 12px;
border: 1px solid var(--border);
}
.builder-options label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
}
.radio-group {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.radio-card {
border: 1px solid var(--border);
padding: 1rem;
border-radius: 6px;
cursor: pointer;
flex: 1;
text-align: center;
font-size: 0.9rem;
}
.radio-card.selected {
border-color: var(--accent);
background-color: rgba(217, 108, 74, 0.05);
color: var(--accent);
}
.price-display {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px dashed var(--border);
text-align: right;
}
.price {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
}
/* Gallery */
.gallery {
padding: 6rem 0;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.gallery-item {
height: 350px;
background-color: #e0e0e0;
border-radius: 8px;
overflow: hidden;
position: relative;
}
/* CSS Shapes for Gallery Images */
.shape {
width: 100%;
height: 100%;
opacity: 0.8;
transition: transform 0.5s;
}
.gallery-item:hover .shape { transform: scale(1.05); }
.shape-1 { background: radial-gradient(circle at 30% 30%, #555, #222); }
.shape-2 { background: linear-gradient(135deg, #8c8c8c 0%, #333 100%); }
.shape-3 { background: conic-gradient(from 180deg at 50% 50%, #1a1a1a, #555, #1a1a1a); }
/* Footer */
footer {
background: var(--primary);
color: var(--white);
padding: 4rem 0;
margin-top: 4rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
}
.footer-col h4 { color: var(--white); margin-bottom: 1.5rem; }
.footer-col ul li { margin-bottom: 0.75rem; color: #888; }
.footer-col ul li:hover { color: var(--white); cursor: pointer; }
.copyright {
margin-top: 4rem;
padding-top: 2rem;
border-top: 1px solid #333;
color: #555;
font-size: 0.9rem;
display: flex;
justify-content: space-between;
}
/* Responsive */
@media (max-width: 768px) {
.hero, .builder-container, .footer-grid, .gallery-grid {
grid-template-columns: 1fr;
}
.hero { padding: 3rem 0; gap: 2rem; }
.hero-content { max-width: 100%; }
.nav-links { display: none; } /* Simplified for demo */
.gallery-grid { grid-template-columns: 1fr; }
.price-display { text-align: left; }
}
</style>
</head>
<body>
<!-- Navigation -->
<div class="container">
<nav>
<a href="#" class="logo">
<svg viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
<circle cx="12" cy="12" r="3" fill="var(--accent)"/>
</svg>
LUMEN CYCLES
</a>
<div class="nav-links">
<a href="#philosophy">Philosophy</a>
<a href="#builder">Configure</a>
<a href="#showroom">Showroom</a>
<a href="#contact">Contact</a>
<a href="#builder" class="btn-nav">Start Building</a>
</div>
</nav>
</div>
<!-- Hero Section -->
<section class="container hero">
<div class="hero-content">
<span class="hero-badge">Handbuilt in Nørrebro</span>
<h1>Made for the city.<br>Built for life.</h1>
<p>
The modern standard for urban mobility. Lumen Cycles are precision-engineered cargo bikes designed to replace your car. 100% Danish steel, custom fitted to your body.
</p>
<div>
<a href="#builder" class="btn-primary">Start Configurator</a>
<a href="#showroom" class="btn-outline">View Gallery</a>
</div>
</div>
<div class="hero-img">
<!-- Abstract representation of the bike -->
<div class="bike-silhouette"></div>
<div style="position: absolute; bottom: 2rem; left: 2rem; color: #555; font-family: var(--font-mono); font-size: 0.8rem; background: rgba(255,255,255,0.8); padding: 0.5rem 1rem; border-radius: 4px;">
Model: Lumen L-1 Standard
</div>
</div>
</section>
<!-- Philosophy / Features -->
<section id="philosophy" class="features">
<div class="container">
<div class="small-text">Philosophy</div>
<h2>Engineering for the long haul.</h2>
<div class="feature-grid">
<div class="feature-item">
<!-- Icon: Shield -->
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
<h3>Chromoly Steel</h3>
<p>We use butted chromoly steel tubes. It’s lighter than aluminum but absorbs road vibration, making for a silky smooth ride over cobblestones.</p>
</div>
<div class="feature-item">
<!-- Icon: Bolt/Tool -->
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3"/>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
</svg>
<h3>Shimano Steps</h3>
<p>We partner exclusively with Shimano for our E8300 motors. Quiet, reliable, and industry-leading battery technology to conquer Copenhagen's hills.</p>
</div>
<div class="feature-item">
<!-- Icon: Ruler -->
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0l12.6 12.6z"/>
<line x1="13" y1="7" x2="17" y2="11"/>
<line x1="9" y1="11" x2="17" y2="19"/>
</svg>
<h3>Perfect Fit</h3>
<p>Not off-the-rack. We measure your inseam and arm reach. The bike is built to fit <i>you</i>, ensuring hours of pain-free riding.</p>
</div>
</div>
</div>
</section>
<!-- Configurator Section -->
<section id="builder" class="builder">
<div class="container">
<div class="small-text" style="margin-bottom: 1rem;">Build Your Machine</div>
<h2 style="margin-bottom: 3rem;">Configure your Lumen</h2>
<div class="builder-container">
<div class="builder-inputs">
<label>Select Model</label>
<div class="radio-group">
<div class="radio-card selected" onclick="updatePrice(4300, this)">L-1 Standard</div>
<div class="radio-card" onclick="updatePrice(4900, this)">L-1 Long</div>
<div class="radio-card" onclick="updatePrice(5100, this)">L-2 Electric</div>
</div>
<label>Colorway</label>
<div class="radio-group">
<div class="radio-card selected">Midnight Black</div>
<div class="radio-card">Forest Green</div>
<div class="radio-card">Copenhagen Cream</div>
</div>
<label>Gear System</label>
<div class="radio-group">
<div class="radio-card selected">Internal Hub (3-speed)</div>
<div class="radio-card">Internal Hub (8-speed)</div>
<div class="radio-card">Derailleur (20-speed)</div>
</div>
</div>
<div class="builder-visual" style="display: flex; flex-direction: column; justify-content: center;">
<!-- CSS Abstract representation of the frame changing -->
<div id="frame-display" style="height: 300px; width: 100%; background: #f0f0f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative;">
<div style="width: 60%; height: 10px; background: #333; position: relative;">
<div style="position: absolute; left: 0; top: -100px; width: 10px; height: 120px; background: #333; transform: rotate(15deg);"></div>
<div style="position: absolute; right: 0; top: -60px; width: 10px; height: 80px; background: #333; transform: rotate(-15deg);"></div>
</div>
<span style="position: absolute; bottom: 2rem; font-size: 0.8rem; color: #999;">Live Preview: Geometries update instantly</span>
</div>
<div class="price-display">
<div style="font-size: 0.8rem; color: var(--secondary);">Estimated Total</div>
<div class="price" id="price-tag">4,300 €</div>
<div style="font-size: 0.8rem; color: var(--secondary); margin-top: 0.5rem;">Excluding VAT. 6 month warranty.</div>
<button class="btn-primary" style="margin-top: 2rem; width: 100%;">Request Quote</button>
</div>
</div>
</div>
</div>
</section>
<!-- Gallery -->
<section id="showroom" class="gallery">
<div class="container">
<div class="small-text">The Workshop</div>
<h2>Gallery</h2>
<div class="gallery-grid">
<div class="gallery-item">
<div class="shape shape-1"></div>
</div>
<div class="gallery-item">
<div class="shape shape-2"></div>
</div>
<div class="gallery-item">
<div class="shape shape-3"></div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="contact">
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<div class="logo" style="color: white; margin-bottom: 1.5rem;">
<svg viewBox="0 0 24 24" style="fill: white;">
<circle cx="12" cy="12" r="10"/>
<circle cx="12" cy="12" r="3" fill="var(--accent)"/>
</svg>
LUMEN CYCLES
</div>
<p style="color: #666; max-width: 300px;">
Designed and built in the heart of Copenhagen. Bringing back the joy of cycling, one cargo bike at a time.
</p>
</div>
<div class="footer-col">
<h4>Products</h4>
<ul>
<li>L-1 Standard</li>
<li>L-1 Long</li>
<li>L-2 Electric</li>
<li>Accessories</li>
</ul>
</div>
<div class="footer-col">
<h4>Company</h4>
<ul>
<li>Our Story</li>
<li>The Workshop</li>
<li>Sustainability</li>
<li>Press</li>
</ul>
</div>
<div class="footer-col">
<h4>Contact</h4>
<ul>
<li>hello@lumencycles.dk</li>
<li>+45 12 34 56 78</li>
<li>Nørrebrogade 12</li>
<li>2200 Copenhagen N</li>
</ul>
</div>
</div>
<div class="copyright">
<span>© 2023 Lumen Cycles ApS. All rights reserved.</span>
<span>Terms of Service | Privacy Policy</span>
</div>
</div>
</footer>
<script>
// Minimal interaction logic
function updatePrice(price, element) {
// Format price
const formatted = price.toLocaleString() + ' €';
// Animate price change
const priceTag = document.getElementById('price-tag');
priceTag.style.opacity = 0;
setTimeout(() => {
priceTag.innerText = formatted;
priceTag.style.opacity = 1;
}, 200);
// Toggle visual class on buttons
if(element.parentNode && element.parentNode.classList.contains('radio-group')) {
const siblings = element.parentNode.children;
for(let sib of siblings) {
sib.classList.remove('selected');
}
element.classList.add('selected');
}
}
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>

