Run details
- Model
- tencent/hy4-preview
- Route
- OpenRouter API, one user message
- Served by
- DeepInfra
- Effort
- high, OpenRouter's default for this model
- Limits
- 60 min · 64,000 output tokens (the model's limit)
- Date
- 23 Oct 2026
- Time
- 7 min 45 s
- Size
- 26 kB
- Tokens
- 107 in, 24,596 out (16,358 of them thinking)
- List price
- $0.055 at today's price ($0.751 in / $2.25 out per M)
- Paid
- $0.062
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
26 kB 940 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 | Custom Cargo Bikes</title>
<style>
:root {
--bg-color: #f4f3ef;
--text-main: #1c1c1a;
--text-muted: #666663;
--accent: #d94f30;
--dark-bg: #1c1c1a;
--border: #dcdad3;
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-serif: "Georgia", "Times New Roman", serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-text);
background-color: var(--bg-color);
color: var(--text-main);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
}
img, svg {
display: block;
max-width: 100%;
}
/* Typography */
h1, h2, h3, h4, .logo, .btn {
font-family: var(--font-sans);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.1;
}
h1 {
font-size: clamp(3rem, 5vw, 5.5rem);
margin: 1.5rem 0;
}
h2 {
font-size: clamp(2rem, 3vw, 3rem);
margin-bottom: 1rem;
}
.overline {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.75rem;
font-weight: 600;
color: var(--accent);
display: block;
margin-bottom: 1rem;
}
/* Layout */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.section {
padding: 8rem 0;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4rem;
}
.text-center { text-align: center; }
.max-w-600 { max-width: 600px; }
.max-w-800 { max-width: 800px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.bg-light { background-color: #EAE8E3; }
.bg-dark { background-color: var(--dark-bg); color: var(--bg-color); }
.bg-accent { background-color: var(--accent); color: #fff; }
.text-white { color: #fff; }
.text-muted { color: var(--text-muted); }
.opacity-80 { opacity: 0.8; }
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--text-main);
color: #fff;
padding: 1rem 2.5rem;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
border: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
}
.btn::after {
content: '';
position: absolute;
bottom: 0; left: 0; width: 100%; height: 100%;
background: var(--accent);
z-index: -1;
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.3s ease;
}
.btn:hover::after {
transform: scaleY(1);
}
.btn-light {
background: #fff;
color: var(--text-main);
}
.btn-light:hover {
color: #fff;
}
.btn-small {
padding: 0.75rem 1.5rem;
font-size: 0.75rem;
}
/* Navigation */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1.5rem 0;
z-index: 100;
transition: all 0.3s ease;
border-bottom: 1px solid transparent;
}
nav.scrolled {
background: rgba(244, 243, 239, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 1rem 0;
border-bottom: 1px solid var(--border);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.nav-links {
display: flex;
gap: 2.5rem;
align-items: center;
}
.nav-links a:not(.btn) {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:not(.btn):hover {
color: var(--accent);
}
/* Hero */
.hero {
position: relative;
padding-top: 8rem;
min-height: 90vh;
display: flex;
align-items: center;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 4rem;
align-items: center;
}
.hero-sub {
font-size: 1.25rem;
color: var(--text-muted);
max-width: 480px;
margin-bottom: 2.5rem;
line-height: 1.6;
}
.hero-visual {
width: 100%;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
.scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
opacity: 0.4;
}
.mouse {
width: 22px;
height: 34px;
border: 2px solid var(--text-main);
border-radius: 12px;
position: relative;
}
.mouse::before {
content: '';
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
background: var(--text-main);
border-radius: 50%;
animation: scrollWheel 2s infinite;
}
@keyframes scrollWheel {
0% { top: 6px; opacity: 1; }
100% { top: 18px; opacity: 0; }
}
/* Marquee */
.marquee-container {
overflow: hidden;
white-space: nowrap;
background: var(--text-main);
color: var(--bg-color);
padding: 1rem 0;
}
.marquee-content {
display: inline-block;
animation: marquee 25s linear infinite;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
}
.marquee-content span {
margin: 0 2rem;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Manifesto */
.manifesto-text {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3.5rem);
font-style: italic;
line-height: 1.3;
color: var(--text-main);
}
/* Specs */
.section-header {
margin-bottom: 4rem;
}
.spec-icon {
width: 50px;
height: 50px;
margin-bottom: 1.5rem;
color: var(--accent);
}
.spec-card h3 {
font-size: 1.25rem;
margin-bottom: 1rem;
letter-spacing: 0.02em;
}
.spec-card p {
color: var(--text-muted);
font-size: 0.95rem;
}
/* Process */
.process-grid .process-step {
border-top: 1px solid #333;
padding-top: 2rem;
transition: border-color 0.3s ease;
}
.process-grid .process-step:hover {
border-color: var(--accent);
}
.process-num {
font-size: 4rem;
font-weight: 300;
font-family: var(--font-serif);
color: #444;
margin-bottom: 1rem;
display: block;
transition: color 0.3s ease;
}
.process-grid .process-step:hover .process-num {
color: var(--accent);
}
.process-step h3 {
font-size: 1.25rem;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #fff;
}
.process-step p {
color: #A0A09D;
}
/* Testimonial */
.quote-icon {
margin: 0 auto 1.5rem auto;
opacity: 0.8;
}
.quote-text {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-style: italic;
line-height: 1.4;
margin: 2rem 0;
color: var(--text-main);
}
.quote-author {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.quote-author strong {
display: block;
color: var(--text-main);
margin-bottom: 0.25rem;
}
/* Configure Form */
.config-form {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
margin-top: 2.5rem;
}
.config-select {
padding: 1rem 1.5rem;
font-family: inherit;
font-size: 0.85rem;
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,0.4);
border-radius: 0;
outline: none;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.config-select option {
color: var(--text-main);
background: #fff;
}
.price-display {
margin-top: 3rem;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.8;
}
.price-tag {
font-size: 1.75rem;
font-weight: 500;
display: block;
margin-top: 0.5rem;
color: #fff;
font-family: var(--font-sans);
}
/* Footer */
.footer {
background: var(--text-main);
color: var(--bg-color);
padding: 6rem 0 2rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 2rem;
margin-bottom: 5rem;
}
.footer-brand p {
color: #A0A09D;
margin-top: 1.5rem;
font-size: 0.9rem;
}
.footer h4 {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.85rem;
color: #666;
margin-bottom: 1.5rem;
}
.footer a {
display: block;
margin-bottom: 0.75rem;
color: #A0A09D;
font-size: 0.9rem;
transition: color 0.2s;
}
.footer a:hover {
color: #fff;
}
.news-form {
display: flex;
border-bottom: 1px solid #444;
padding-bottom: 0.5rem;
margin-top: 1rem;
}
.news-form input {
background: transparent;
border: none;
color: #fff;
flex: 1;
outline: none;
font-family: inherit;
font-size: 0.9rem;
}
.news-form input::placeholder {
color: #666;
}
.news-form button {
background: transparent;
border: none;
color: #fff;
cursor: pointer;
font-size: 1.2rem;
transition: color 0.2s;
}
.news-form button:hover {
color: var(--accent);
}
.footer-bottom {
display: flex;
justify-content: space-between;
border-top: 1px solid #333;
padding-top: 2rem;
font-size: 0.8rem;
color: #666;
}
/* Animations */
.fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 900px) {
.hero-grid {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.hero-sub {
margin-left: auto;
margin-right: auto;
}
.hero-visual {
max-width: 500px;
margin: 0 auto;
}
.grid-3 {
grid-template-columns: 1fr;
gap: 3rem;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.hide-mobile {
display: none;
}
.section {
padding: 5rem 0;
}
.config-form {
flex-direction: column;
}
.config-select {
width: 100%;
}
.footer-grid {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.scroll-indicator {
display: none;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav>
<div class="container nav-container">
<a href="#" class="logo">LUMEN</a>
<div class="nav-links">
<a href="#manifesto" class="hide-mobile">Manifesto</a>
<a href="#specs" class="hide-mobile">Specifications</a>
<a href="#process" class="hide-mobile">The Workshop</a>
<a href="#configure" class="btn btn-small">Configure</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="hero">
<div class="container hero-grid">
<div class="hero-content fade-up">
<span class="overline">Copenhagen • Est. 2018</span>
<h1>The everyday vehicle,<br>perfected.</h1>
<p class="hero-sub">We build custom cargo bikes to order. Hand-welded chromoly steel frames, silent belt drives, and a fit tailored precisely to you. Built to carry what matters.</p>
<div class="hero-action">
<a href="#configure" class="btn">Configure Yours</a>
</div>
</div>
<div class="hero-visual fade-up" style="transition-delay: 0.2s;">
<svg class="hero-svg" viewBox="0 0 1000 600" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="blueprintGrid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="var(--border)" stroke-width="0.5" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#blueprintGrid)" opacity="0.6" />
<circle cx="500" cy="350" r="300" fill="var(--bg-color)" stroke="var(--border)" stroke-width="1" stroke-dasharray="4 8" />
<ellipse cx="500" cy="590" rx="400" ry="10" fill="var(--text-main)" opacity="0.05" />
<g fill="none" stroke="var(--text-main)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<!-- Rear Wheel -->
<circle cx="180" cy="450" r="140" stroke-width="2" />
<circle cx="180" cy="450" r="138" />
<circle cx="180" cy="450" r="4" fill="var(--text-main)" />
<path d="M 180 310 L 180 590 M 40 450 L 320 450 M 80 350 L 280 550 M 80 550 L 280 350" stroke="var(--border)" stroke-width="1" />
<!-- Front Wheel -->
<circle cx="850" cy="450" r="140" stroke-width="2" />
<circle cx="850" cy="450" r="138" />
<circle cx="850" cy="450" r="4" fill="var(--text-main)" />
<path d="M 850 310 L 850 590 M 710 450 L 990 450 M 750 350 L 950 550 M 750 550 L 950 350" stroke="var(--border)" stroke-width="1" />
<!-- Frame Geometry -->
<path d="M 450 450 L 180 450" /> <!-- Chainstay -->
<path d="M 450 450 L 370 230" /> <!-- Seat tube -->
<path d="M 370 230 L 180 450" /> <!-- Seatstay -->
<path d="M 370 230 L 530 200" /> <!-- Top tube -->
<path d="M 450 450 L 530 200" /> <!-- Down tube -->
<!-- Head tube & Fork -->
<path d="M 530 200 L 550 240" /> <!-- Head tube -->
<path d="M 550 240 L 850 450" /> <!-- Fork -->
<path d="M 530 200 L 470 130" /> <!-- Stem -->
<path d="M 470 130 C 440 110, 410 120, 390 150" /> <!-- Handlebar -->
<path d="M 390 150 L 370 145" stroke-width="6" /> <!-- Grip -->
<!-- Saddle -->
<path d="M 340 220 C 360 210, 380 210, 400 220 C 380 225, 360 225, 340 220 Z" fill="var(--text-main)" />
<path d="M 370 230 L 370 220" stroke-width="8" /> <!-- Seatpost -->
<!-- Crankset -->
<circle cx="450" cy="450" r="45" stroke-width="2" />
<circle cx="450" cy="450" r="4" fill="var(--text-main)" />
<path d="M 450 450 L 450 520" stroke-width="8" /> <!-- Crank arm -->
<path d="M 430 520 L 470 520" stroke-width="8" /> <!-- Pedal -->
<!-- Belt drive -->
<path d="M 450 405 L 180 405" stroke-width="4" stroke-dasharray="8 6" />
<path d="M 450 495 L 180 495" stroke-width="4" stroke-dasharray="8 6" />
<!-- Cargo Platform -->
<path d="M 570 320 L 800 320" />
<path d="M 570 320 L 570 450" />
<path d="M 570 450 L 450 450" />
<path d="M 800 320 L 800 450" />
<path d="M 800 450 L 850 450" />
<path d="M 570 320 L 630 385" /> <!-- Cross bracing -->
<path d="M 570 385 L 630 320" /> <!-- Cross bracing -->
<!-- Box Outline -->
<path d="M 570 320 L 570 220 L 800 220 L 800 320 Z" stroke-width="2" stroke-dasharray="6 4" stroke="var(--accent)" />
</g>
</svg>
</div>
</div>
<div class="scroll-indicator">
<div class="mouse"></div>
</div>
</header>
<!-- Marquee Ticker -->
<div class="marquee-container">
<div class="marquee-content">
<span>HANDMADE IN COPENHAGEN</span> •
<span>LIFETIME WARRANTY</span> •
<span>GATES CARBON DRIVE</span> •
<span>ALL-WEATHER READY</span> •
<span>HANDMADE IN COPENHAGEN</span> •
<span>LIFETIME WARRANTY</span> •
<span>GATES CARBON DRIVE</span> •
<span>ALL-WEATHER READY</span> •
<span>HANDMADE IN COPENHAGEN</span> •
<span>LIFETIME WARRANTY</span> •
<span>GATES CARBON DRIVE</span> •
<span>ALL-WEATHER READY</span>
</div>
</div>
<!-- Manifesto -->
<section id="manifesto" class="section bg-light fade-up">
<div class="container text-center max-w-800">
<h2 class="manifesto-text">"We believe the best car for the city is a bicycle."</h2>
</div>
</section>
<!-- Specs -->
<section id="specs" class="section fade-up">
<div class="container">
<div class="section-header text-center max-w-600 mx-auto">
<span class="overline">Anatomy</span>
<h2>Uncompromising Utility.</h2>
<p class="text-muted">Every component is meticulously selected for a lifetime of daily use in harsh urban environments.</p>
</div>
<div class="grid-3">
<div class="spec-card">
<svg class="spec-icon" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round">
<circle cx="25" cy="70" r="15" />
<circle cx="75" cy="70" r="15" />
<path d="M 25 70 L 45 40 L 75 70" />
<path d="M 45 40 L 65 40 L 50 70" />
<path d="M 65 40 L 55 25" />
<path d="M 50 25 L 60 25" />
</svg>
<h3>TIG-Welded Chromoly</h3>
<p>Aircraft-grade steel tubing offers the perfect balance of stiffness for heavy loads, and vertical compliance for cobblestone comfort. Built to absorb the city.</p>
</div>
<div class="spec-card">
<svg class="spec-icon" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="3">
<circle cx="30" cy="50" r="15" />
<circle cx="75" cy="50" r="25" />
<path d="M 30 35 L 75 25" stroke-dasharray="4 4" />
<path d="M 30 65 L 75 75" stroke-dasharray="4 4" />
</svg>
<h3>Gates Carbon Drive</h3>
<p>Rust-free, grease-free, and virtually silent. A carbon fiber belt lasts three times longer than a traditional chain and requires zero maintenance.</p>
</div>
<div class="spec-card">
<svg class="spec-icon" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="3">
<circle cx="50" cy="50" r="30" />
<circle cx="50" cy="50" r="20" stroke-dasharray="4 4" />
<circle cx="50" cy="50" r="5" />
<path d="M 50 20 L 50 10 M 50 80 L 50 90 M 20 50 L 10 50 M 80 50 L 90 50" />
</svg>
<h3>Enviolo CVT Hub</h3>
<p>Infinitely variable planetary gears enclosed within the rear hub. Shift seamlessly at a standstill, even when fully loaded with groceries or children.</p>
</div>
</div>
</div>
</section>
<!-- Process -->
<section id="process" class="section bg-dark fade-up">
<div class="container">
<div class="section-header text-center">
<span class="overline text-white opacity-80">The Workshop</span>
<h2 class="text-white">Built to Order.</h2>
</div>
<div class="grid-3 process-grid">
<div class="process-step">
<span class="process-num">01</span>
<h3>The Fitting</h3>
<p>We measure your inseam, arm length, and torso to determine your ideal frame geometry. No two Lumen bikes are exactly alike.</p>
</div>
<div class="process-step">
<span class="process-num">02</span>
<h3>The Frame</h3>
<p>Your frame is cut, mitered, and TIG-welded by hand in our Copenhagen studio. It takes roughly 14 hours of skilled labor per frame.</p>
</div>
<div class="process-step">
<span class="process-num">03</span>
<h3>The Handover</h3>
<p>Once assembled with your chosen components, we invite you to the workshop for a final test ride and personalized adjustments.</p>
</div>
</div>
</div>
</section>
<!-- Testimonial -->
<section id="testimonial" class="section fade-up">
<div class="container text-center max-w-800">
<svg width="40" height="40" viewBox="0 0 24 24" fill="var(--accent)" class="quote-icon">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
</svg>
<blockquote class="quote-text">
"We sold our car last year. The Lumen carries our two kids, the weekly groceries, and our dreams for a greener city. It is, without a doubt, the best investment we've ever made."
</blockquote>
<div class="quote-author">
<strong>Mette & Jonas</strong>
<span>Nørrebro, Copenhagen</span>
</div>
</div>
</section>
<!-- Configure CTA -->
<section id="configure" class="section bg-accent fade-up">
<div class="container text-center max-w-800">
<span class="overline text-white opacity-80">Your Move</span>
<h2 class="text-white">Ready to build yours?</h2>
<p class="opacity-80 max-w-600 mx-auto" style="margin-top: 1.5rem;">
Configure your drivetrain, color, and cargo box options today. Hand-built and delivered directly to your door in 4-6 weeks.
</p>
<form class="config-form">
<select class="config-select" aria-label="Select Drivetrain">
<option>Choose your drivetrain...</option>
<option value="enviolo">Enviolo CVT (Stepless)</option>
<option value="alfine">Shimano Alfine 11</option>
<option value="singlespeed">Singlespeed</option>
</select>
<button type="button" class="btn btn-light btn-config">Start Configuration</button>
</form>
<div class="price-display">
Estimated Price
<span class="price-tag" id="dynamic-price">From €4,000</span>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container footer-grid">
<div class="footer-brand">
<h2 class="logo text-white">LUMEN</h2>
<p>Refshalevej 153A<br>1432 København K<br>Denmark</p>
</div>
<div class="footer-links">
<h4>Explore</h4>
<a href="#manifesto">Manifesto</a>
<a href="#specs">Specifications</a>
<a href="#process">The Workshop</a>
<a href="#configure">Configure</a>
</div>
<div class="footer-links">
<h4>Legal</h4>
<a href="#">Terms of Service</a>
<a href="#">Privacy Policy</a>
<a href="#">Lifetime Warranty</a>
</div>
<div class="footer-news">
<h4>Newsletter</h4>
<p style="color: #A0A09D; font-size: 0.9rem;">Build slots & workshop updates.</p>
<form class="news-form">
<input type="email" placeholder="Email Address" aria-label="Email Address" required>
<button type="button" aria-label="Subscribe">→</button>
</form>
</div>
</div>
<div class="container footer-bottom">
<p>© 2023 Lumen Cycles ApS. All rights reserved.</p>
<p>Handcrafted in Denmark.</p>
</div>
</footer>
<script>
// Smooth scrolling for navigation anchors
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// Navbar background blur on scroll
const nav = document.querySelector('nav');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
nav.classList.add('scrolled');
} else {
nav.classList.remove('scrolled');
}
});
// Intersection Observer for scroll animations
window.addEventListener('DOMContentLoaded', () => {
const elements = document.querySelectorAll('.fade-up');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.1,
rootMargin: "0px 0px -50px 0px"
});
elements.forEach(el => observer.observe(el));
});
// Interactive Pricing Configuration
const select = document.querySelector('.config-select');
const priceTag = document.getElementById('dynamic-price');
const btnConfig = document.querySelector('.btn-config');
if (select) {
select.addEventListener('change', (e) => {
const val = e.target.value;
if (val === 'enviolo') {
priceTag.innerText = '€4,850';
btnConfig.innerText = 'Configure Enviolo Build';
} else if (val === 'alfine') {
priceTag.innerText = '€4,400';
btnConfig.innerText = 'Configure Alfine Build';
} else if (val === 'singlespeed') {
priceTag.innerText = '€4,000';
btnConfig.innerText = 'Configure Singlespeed Build';
} else {
priceTag.innerText = 'From €4,000';
btnConfig.innerText = 'Start Configuration';
}
});
}
</script>
</body>
</html>

