|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
<title>LightApp — Minimal Light Theme App</title> |
|
|
<meta name="description" content="A minimal light-theme starter app with customizable primary/secondary colors." /> |
|
|
<meta name="color-scheme" content="light" /> |
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Ccircle cx='64' cy='64' r='60' fill='%23006AFF'/%3E%3Ctext x='64' y='76' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='56' fill='white'%3ELA%3C/text%3E%3C/svg%3E" /> |
|
|
<link rel="stylesheet" href="style.css" /> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
|
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
50: '#edf6ff', |
|
|
100: '#d6ebff', |
|
|
200: '#b0daff', |
|
|
300: '#7bc2ff', |
|
|
400: '#45a5ff', |
|
|
500: '#0a84ff', |
|
|
600: '#0066e3', |
|
|
700: '#004db8', |
|
|
800: '#003e91', |
|
|
900: '#003574', |
|
|
950: '#002044', |
|
|
}, |
|
|
secondary: { |
|
|
50: '#f5f8ff', |
|
|
100: '#e8efff', |
|
|
200: '#d4deff', |
|
|
300: '#b3c2ff', |
|
|
400: '#8d9eff', |
|
|
500: '#6b7cff', |
|
|
600: '#515df0', |
|
|
700: '#4246cf', |
|
|
800: '#373ba6', |
|
|
900: '#2e347f', |
|
|
950: '#1b2050', |
|
|
} |
|
|
}, |
|
|
boxShadow: { |
|
|
'soft': '0 10px 30px rgba(0,0,0,0.07)', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="min-h-screen bg-white text-zinc-900 antialiased"> |
|
|
|
|
|
<header class="sticky top-0 z-40 border-b border-zinc-200/80 bg-white/80 backdrop-blur"> |
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex h-16 items-center justify-between"> |
|
|
<a href="#" class="flex items-center gap-3"> |
|
|
<div class="h-8 w-8 rounded-md bg-gradient-to-br from-primary-500 to-secondary-500"></div> |
|
|
<span class="text-lg font-semibold tracking-tight">LightApp</span> |
|
|
</a> |
|
|
<nav class="hidden md:flex items-center gap-8"> |
|
|
<a href="#features" class="text-sm font-medium text-zinc-700 hover:text-zinc-900">Features</a> |
|
|
<a href="#contact" class="text-sm font-medium text-zinc-700 hover:text-zinc-900">Contact</a> |
|
|
<a href="#" class="text-sm font-medium text-primary-600 hover:text-primary-700">Sign in</a> |
|
|
<a href="#" class="inline-flex items-center gap-2 rounded-md bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-primary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50"> |
|
|
Get Started |
|
|
</a> |
|
|
</nav> |
|
|
<button id="menuBtn" class="md:hidden inline-flex items-center justify-center rounded-md p-2 text-zinc-700 hover:bg-zinc-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50" aria-label="Open menu" aria-expanded="false"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="mobileNav" class="md:hidden hidden border-t border-zinc-200/80 bg-white"> |
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-3 flex flex-col gap-2"> |
|
|
<a href="#features" class="py-2 text-sm font-medium text-zinc-700 hover:text-zinc-900">Features</a> |
|
|
<a href="#contact" class="py-2 text-sm font-medium text-zinc-700 hover:text-zinc-900">Contact</a> |
|
|
<a href="#" class="py-2 text-sm font-medium text-primary-600 hover:text-primary-700">Sign in</a> |
|
|
<a href="#" class="mt-1 inline-flex items-center justify-center rounded-md bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-primary-700">Get Started</a> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="relative overflow-hidden"> |
|
|
<div class="absolute inset-0 -z-10"> |
|
|
<div class="pointer-events-none absolute -top-24 left-1/2 h-[480px] w-[900px] -translate-x-1/2 rounded-full blur-3xl opacity-30" style="background: radial-gradient(closest-side, rgba(10,132,255,0.45), rgba(255,255,255,0));"></div> |
|
|
</div> |
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 lg:py-28"> |
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<span class="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs font-medium text-zinc-700 shadow"> |
|
|
<span class="h-1.5 w-1.5 rounded-full bg-primary-500"></span> |
|
|
Light mode by default |
|
|
</span> |
|
|
<h1 class="mt-6 text-4xl font-bold tracking-tight sm:text-5xl"> |
|
|
Build faster with a clean, light theme starter |
|
|
</h1> |
|
|
<p class="mt-4 text-lg text-zinc-600"> |
|
|
A minimal app scaffold you can customize quickly. Configure your brand colors once and ship beautiful UIs with confidence. |
|
|
</p> |
|
|
<div class="mt-8 flex flex-wrap items-center gap-3"> |
|
|
<a href="#" class="inline-flex items-center gap-2 rounded-md bg-primary-600 px-5 py-3 text-sm font-semibold text-white shadow hover:bg-primary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50"> |
|
|
Get Started |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg> |
|
|
</a> |
|
|
<a href="#features" class="inline-flex items-center gap-2 rounded-md border border-zinc-300 bg-white px-5 py-3 text-sm font-semibold text-zinc-800 hover:bg-zinc-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50"> |
|
|
Learn more |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-6 flex items-center gap-4 text-sm text-zinc-600"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://i.pravatar.cc/64?img=1" alt="User avatar" /> |
|
|
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://i.pravatar.cc/64?img=2" alt="User avatar" /> |
|
|
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://i.pravatar.cc/64?img=3" alt="User avatar" /> |
|
|
</div> |
|
|
<span>Trusted by 1,200+ teams</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="absolute -inset-6 -z-10 rounded-3xl bg-gradient-to-br from-primary-500/20 via-secondary-500/10 to-transparent blur-2xl"></div> |
|
|
<div class="rounded-3xl border border-zinc-200 bg-white p-6 shadow-soft"> |
|
|
<div class="flex items-center gap-3 border-b border-zinc-200 pb-4"> |
|
|
<div class="h-3 w-3 rounded-full bg-red-400"></div> |
|
|
<div class="h-3 w-3 rounded-full bg-amber-400"></div> |
|
|
<div class="h-3 w-3 rounded-full bg-emerald-400"></div> |
|
|
<span class="ml-auto text-xs text-zinc-500">Preview</span> |
|
|
</div> |
|
|
<div class="mt-6 grid gap-4 sm:grid-cols-2"> |
|
|
<div class="rounded-xl border border-zinc-200 p-4"> |
|
|
<div class="h-10 w-10 rounded-md bg-gradient-to-br from-primary-500 to-secondary-500"></div> |
|
|
<h3 class="mt-3 font-semibold">Primary color</h3> |
|
|
<p class="text-sm text-zinc-600">Set in Tailwind config. Try blue or your brand color.</p> |
|
|
</div> |
|
|
<div class="rounded-xl border border-zinc-200 p-4"> |
|
|
<div class="h-10 w-10 rounded-md bg-gradient-to-br from-secondary-500 to-primary-500"></div> |
|
|
<h3 class="mt-3 font-semibold">Secondary color</h3> |
|
|
<p class="text-sm text-zinc-600">Accent actions and highlights.</p> |
|
|
</div> |
|
|
<div class="rounded-xl border border-zinc-200 p-4"> |
|
|
<h3 class="font-semibold">Light mode</h3> |
|
|
<p class="text-sm text-zinc-600">Clean UI for daytime use and readability.</p> |
|
|
</div> |
|
|
<div class="rounded-xl border border-zinc-200 p-4"> |
|
|
<h3 class="font-semibold">No build tools</h3> |
|
|
<p class="text-sm text-zinc-600">Drop-in HTML/CSS/JS. Works with CDNs.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="bg-zinc-50 py-16 sm:py-20"> |
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> |
|
|
<div class="mx-auto max-w-2xl text-center"> |
|
|
<h2 class="text-3xl font-bold tracking-tight sm:text-4xl">Features that scale</h2> |
|
|
<p class="mt-3 text-zinc-600">Everything you need to prototype, validate, and ship your next idea.</p> |
|
|
</div> |
|
|
<div class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3"> |
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-6"> |
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-primary-700"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg> |
|
|
</div> |
|
|
<h3 class="mt-4 font-semibold">Instant load</h3> |
|
|
<p class="mt-1 text-sm text-zinc-600">Lightweight CSS and minimal JS for quick first paint.</p> |
|
|
</div> |
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-6"> |
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-100 text-secondary-700"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15l9-5-9-5-9 5 9 5z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v6"/></svg> |
|
|
</div> |
|
|
<h3 class="mt-4 font-semibold">Accessible by default</h3> |
|
|
<p class="mt-1 text-sm text-zinc-600">Contrast-friendly palette and keyboard-friendly controls.</p> |
|
|
</div> |
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-6"> |
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-primary-700"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7h16M4 12h10M4 17h7"/></svg> |
|
|
</div> |
|
|
<h3 class="mt-4 font-semibold">Readable typography</h3> |
|
|
<p class="mt-1 text-sm text-zinc-600">Comfortable line-height and spacing for long reads.</p> |
|
|
</div> |
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-6"> |
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-100 text-secondary-700"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-6-6h12"/></svg> |
|
|
</div> |
|
|
<h3 class="mt-4 font-semibold">Extendable</h3> |
|
|
<p class="mt-1 text-sm text-zinc-600">Drop in components or add your own CSS.</p> |
|
|
</div> |
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-6"> |
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-primary-700"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> |
|
|
</div> |
|
|
<h3 class="mt-4 font-semibold">Modern buttons</h3> |
|
|
<p class="mt-1 text-sm text-zinc-600">Polished focus states and hover feedback.</p> |
|
|
</div> |
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-6"> |
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-100 text-secondary-700"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v6h6M20 20v-6h-6"/><path stroke-linecap="round" stroke-linejoin="round" d="M20 9A8 8 0 104 15"/></svg> |
|
|
</div> |
|
|
<h3 class="mt-4 font-semibold">Reusable patterns</h3> |
|
|
<p class="mt-1 text-sm text-zinc-600">Build quickly with consistent building blocks.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 sm:py-20"> |
|
|
<div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8"> |
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-6 sm:p-8 shadow-soft"> |
|
|
<h2 class="text-2xl font-bold tracking-tight">Get in touch</h2> |
|
|
<p class="mt-2 text-zinc-600">Tell us a bit about your project and we’ll get back within 1–2 business days.</p> |
|
|
<form id="contactForm" class="mt-6 grid gap-4"> |
|
|
<div class="grid gap-4 sm:grid-cols-2"> |
|
|
<div> |
|
|
<label class="text-sm font-medium text-zinc-800" for="name">Name</label> |
|
|
<input id="name" name="name" type="text" required class="mt-1 block w-full rounded-md border-zinc-300 bg-white text-zinc-900 placeholder-zinc-400 shadow-sm focus:border-primary-500 focus:ring-primary-500" placeholder="Ada Lovelace" /> |
|
|
</div> |
|
|
<div> |
|
|
<label class="text-sm font-medium text-zinc-800" for="email">Email</label> |
|
|
<input id="email" name="email" type="email" required class="mt-1 block w-full rounded-md border-zinc-300 bg-white text-zinc-900 placeholder-zinc-400 shadow-sm focus:border-primary-500 focus:ring-primary-500" placeholder="you@company.com" /> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="text-sm font-medium text-zinc-800" for="message">Message</label> |
|
|
<textarea id="message" name="message" rows="4" required class="mt-1 block w-full rounded-md border-zinc-300 bg-white text-zinc-900 placeholder-zinc-400 shadow-sm focus:border-primary-500 focus:ring-primary-500" placeholder="What are you building?"></textarea> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<p class="text-xs text-zinc-500">We’ll never share your info.</p> |
|
|
<button type="submit" class="inline-flex items-center gap-2 rounded-md bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow hover:bg-primary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50"> |
|
|
Send message |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="border-t border-zinc-200 bg-white"> |
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10"> |
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> |
|
|
<p class="text-sm text-zinc-600">© <span id="year"></span> LightApp. All rights reserved.</p> |
|
|
<div class="flex items-center gap-6"> |
|
|
<a class="text-sm text-zinc-600 hover:text-zinc-900" href="#">Privacy</a> |
|
|
<a class="text-sm text-zinc-600 hover:text-zinc-900" href="#">Terms</a> |
|
|
<a class="text-sm text-zinc-600 hover:text-zinc-900" href="#">GitHub</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
