Redesign root index.html into a dark-first single-file ShellScope landing page

[Copilot]

Reworks the root landing page into a sleek, single-file Tailwind implementation for ShellScope, aligning with the required developer-tool aesthetic and content parity with the README. The page now presents the product narrative, capabilities, stack, setup flow, and roadmap in a scan-friendly structure.

• What this PR changes

  • Fully replaces root index.html content (no new files) with a responsive, dark-mode-first Tailwind CDN page.
  • Implements required sections end-to-end: Hero, About, Features, Tech Stack, Installation, Usage Guide, Roadmap, and Footer.
  • Preserves exact required product messaging (WMI-based <100ms process capture, local SQLite logging, zero cloud dependency).

• UI architecture and interaction model

  • Adds floating glassmorphism navbar (fixed top-4 left-4 right-4 z-50, backdrop-blur-sm, translucent surfaces).
  • Uses full-viewport hero and py-20 section rhythm for consistent visual hierarchy.
  • Applies cursor-pointer, transition-colors duration-200, and color-only hover states across actionable links/cards/buttons.
  • Uses semantic structure (nav, main, section, footer) and dark-mode via class strategy.

• Iconography and visual system

  • Uses SVG-only icons (no emojis), including GitHub CTA icon and feature/stack icons.
  • Maintains accessibility constraints (aria-hidden="true" on decorative icons).
  • Includes Simple Icons-style stack badges for Python, Flutter, SQLite, Windows.

• Content additions included

  • Detailed About copy describing WMI event capture for short-lived “flash” processes.
  • Explicit highlights for process safety coloring and running/closed status semantics.
  • Installation command sequence and roadmap cards (Linux/Netlink, macOS/Endpoint Security/psutil, ETW).

• Example snippet (representative)

  <section id="hero" class="relative flex min-h-screen items-center px-6 pb-16 pt-40">
    <h1 class="text-4xl md:text-6xl font-bold dark:text-slate-100">
      ShellScope: The Local Flight Recorder for Windows.
    </h1>
    <a
      href="https://github.com/shiks2/shellscope"
      class="inline-flex items-center gap-2 rounded-xl bg-indigo-500 px-5 py-3
             text-sm font-semibold text-white transition-colors duration-200 hover:bg-indigo-400 cursor-pointer"
    >
      <svg class="h-6 w-6" viewBox="0 0 24 24" aria-hidden="true">...</svg>
      View on GitHub
    </a>
  </section>

• screenshot

  • https://github.com/user-attachments/assets/3f933cb6-5e5d-4097-84ef-39b78d1459e3

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Copilot]

Pull request overview

This PR redesigns the repository’s root index.html into a single-file Tailwind (CDN) landing page for ShellScope, presenting the tool’s narrative, features, stack, setup, and roadmap in a dark-first layout.

Changes:

• Replaces the existing landing page markup with a new dark-first, sectioned Tailwind layout (hero, about, features, tech stack, installation/usage, roadmap, footer).
• Introduces a fixed “glass” navbar and a consistent section rhythm with reusable card styling.
• Adds a small Tailwind theme extension (custom shadow-glow) used across the page.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The PR description says the page preserves the exact product messaging including “zero cloud dependency”, but the updated meta description no longer mentions that. Consider updating the meta description to include the same key claims (WMI-based <100ms capture, local SQLite logging, and zero cloud/no uploads) so the page metadata matches the required messaging.

[Copilot]

The Tailwind configuration script assigns to tailwind without declaring it, creating an implicit global. To avoid accidental global leakage/collisions, assign via window.tailwind = { config: ... } (if configuring before loading the CDN script) or use tailwind.config = ... after the CDN script has loaded.

[Copilot]

These cards are styled with cursor-pointer and hover states but are not actually interactive (no link/button/onclick). This is confusing for keyboard and screen-reader users. Either remove the pointer/hover affordances or make the card a real interactive element (e.g., wrap content in an <a>/button) and add visible focus styles.

[Copilot]

The stack items use cursor-pointer/hover styling but are plain <div>s with no action. This can mislead users into thinking the items are clickable. Consider removing the interactive styling or converting them to semantic interactive elements (and include focus-visible styles).

[Copilot]

Because the navbar is fixed, jumping to #features/#installation can land with the section header partially hidden under the nav. Consider adding an appropriate scroll-mt-* (scroll-margin-top) class to sections (at least those linked from the nav) to offset for the fixed header height.

Suggested change

	<section id="features" class="px-6 py-20">
	<section id="features" class="px-6 py-20 scroll-mt-24">

[Copilot]

These roadmap cards are styled as clickable (cursor-pointer + hover border) but have no interactive behavior. Either remove the clickable affordances or make them actual links/buttons (with keyboard focus styles) to avoid accessibility/UX confusion.

Suggested change

	<article class="cursor-pointer rounded-2xl border border-gray-200 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-indigo-400 dark:border-slate-700 dark:bg-slate-800/80">
	<p class="text-sm font-semibold uppercase tracking-wide text-indigo-500">Next</p>
	<h3 class="mt-2 text-xl font-semibold text-slate-900 dark:text-slate-100">Linux Support</h3>
	<p class="mt-3 text-slate-700 dark:text-slate-300">via Netlink.</p>
	</article>
	<article class="cursor-pointer rounded-2xl border border-gray-200 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-indigo-400 dark:border-slate-700 dark:bg-slate-800/80">
	<p class="text-sm font-semibold uppercase tracking-wide text-indigo-500">Planned</p>
	<h3 class="mt-2 text-xl font-semibold text-slate-900 dark:text-slate-100">macOS Support</h3>
	<p class="mt-3 text-slate-700 dark:text-slate-300">via Endpoint Security/psutil.</p>
	</article>
	<article class="cursor-pointer rounded-2xl border border-gray-200 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-indigo-400 dark:border-slate-700 dark:bg-slate-800/80">
	<article class="rounded-2xl border border-gray-200 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 dark:border-slate-700 dark:bg-slate-800/80">
	<p class="text-sm font-semibold uppercase tracking-wide text-indigo-500">Next</p>
	<h3 class="mt-2 text-xl font-semibold text-slate-900 dark:text-slate-100">Linux Support</h3>
	<p class="mt-3 text-slate-700 dark:text-slate-300">via Netlink.</p>
	</article>
	<article class="rounded-2xl border border-gray-200 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 dark:border-slate-700 dark:bg-slate-800/80">
	<p class="text-sm font-semibold uppercase tracking-wide text-indigo-500">Planned</p>
	<h3 class="mt-2 text-xl font-semibold text-slate-900 dark:text-slate-100">macOS Support</h3>
	<p class="mt-3 text-slate-700 dark:text-slate-300">via Endpoint Security/psutil.</p>
	</article>
	<article class="rounded-2xl border border-gray-200 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 dark:border-slate-700 dark:bg-slate-800/80">