Spaces:

Vehicoule
/

lightapp

Running

App Files Files Community

Vehicoule commited on Nov 3, 2025

Commit

2f590d3

verified ·

1 Parent(s): 05d25eb

can you only do websites or also apps

Browse files

Files changed (4) hide show

README.md +8 -5
index.html +261 -19
script.js +69 -0
style.css +20 -20

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Lightapp
-emoji: 🏃
-colorFrom: red
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: LightApp
+colorFrom: pink
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,261 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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 (edit primary/secondary values to your desired colors)
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: {
+              50:  '#edf6ff',
+              100: '#d6ebff',
+              200: '#b0daff',
+              300: '#7bc2ff',
+              400: '#45a5ff',
+              500: '#0a84ff', // main primary
+              600: '#0066e3',
+              700: '#004db8',
+              800: '#003e91',
+              900: '#003574',
+              950: '#002044',
+            },
+            secondary: {
+              50:  '#f5f8ff',
+              100: '#e8efff',
+              200: '#d4deff',
+              300: '#b3c2ff',
+              400: '#8d9eff',
+              500: '#6b7cff', // main secondary
+              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 -->
+  <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>
+  <!-- Hero -->
+  <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>
+  <!-- Features -->
+  <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>
+  <!-- Contact -->
+  <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 -->
+  <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>

script.js ADDED Viewed

	@@ -0,0 +1,69 @@

+// Utility: query helpers
+const $ = (sel, ctx = document) => ctx.querySelector(sel);
+const $$ = (sel, ctx = document) => Array.from(ctx.querySelectorAll(sel));
+// Mobile navigation toggle
+const menuBtn = $('#menuBtn');
+const mobileNav = $('#mobileNav');
+if (menuBtn && mobileNav) {
+  menuBtn.addEventListener('click', () => {
+    const expanded = menuBtn.getAttribute('aria-expanded') === 'true';
+    menuBtn.setAttribute('aria-expanded', String(!expanded));
+    mobileNav.classList.toggle('hidden');
+  });
+}
+// Smooth scroll for in-page links
+$$('a[href^="#"]').forEach(a => {
+  a.addEventListener('click', e => {
+    const href = a.getAttribute('href');
+    if (!href || href === '#') return;
+    const target = $(href);
+    if (target) {
+      e.preventDefault();
+      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      // Close mobile menu after navigation
+      if (!mobileNav.classList.contains('hidden')) {
+        mobileNav.classList.add('hidden');
+        menuBtn.setAttribute('aria-expanded', 'false');
+      }
+    }
+  });
+});
+// Contact form handler
+const form = $('#contactForm');
+if (form) {
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const formData = new FormData(form);
+    const data = Object.fromEntries(formData.entries());
+    // Minimal client validation example
+    if (!data.email || !/^\S+@\S+\.\S+$/.test(data.email)) {
+      alert('Please enter a valid email.');
+      return;
+    }
+    if (!data.name || data.name.trim().length < 2) {
+      alert('Please enter your name.');
+      return;
+    }
+    if (!data.message || data.message.trim().length < 10) {
+      alert('Please enter a longer message (10+ characters).');
+      return;
+    }
+    // Simulated submit (replace with real fetch to your backend)
+    console.log('Submitting contact form:', data);
+    form.reset();
+    alert('Thanks! Your message has been sent.');
+  });
+}
+// Set footer year
+const yearEl = $('#year');
+if (yearEl) yearEl.textContent = String(new Date().getFullYear());
+// Optional: Log Tailwind colors for quick inspection in dev
+console.log('Primary 500:', getComputedStyle(document.documentElement).getPropertyValue('--tw-color-primary-500') || 'N/A');
+console.log('Secondary 500:', getComputedStyle(document.documentElement).getPropertyValue('--tw-color-secondary-500') || 'N/A');

style.css CHANGED Viewed

@@ -1,28 +1,28 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
-}

+/* Base tweaks */
+:root {
+  color-scheme: light;
 }
+html, body {
+  height: 100%;
 }
+::selection {
+  background: rgba(10, 132, 255, 0.15);
 }
+/* Focus outlines */
+:focus-visible {
+  outline: 2px solid theme(colors.primary.500 / 0.5);
+  outline-offset: 2px;
 }
+/* Motion reduction */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}