| <!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> |
