Conversation
Co-authored-by: shiks2 <115677500+shiks2@users.noreply.github.com>
index.html into a single-file Tailwind landing page for ShellScope
There was a problem hiding this comment.
Pull request overview
This PR replaces the repository root index.html with a single-file Tailwind (CDN) landing page for ShellScope, adding a dark-mode-first, sectioned product narrative intended for a Vercel/Linear-style marketing page.
Changes:
- Replaced custom CSS layout with a Tailwind CDN-based layout and dark-mode styling.
- Added a fixed glassmorphism navbar and hero section with GitHub CTA.
- Added About, Features, Tech Stack, Installation/Usage, Roadmap, and Footer sections.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <script src="https://cdn.tailwindcss.com"></script> | ||
| <script> | ||
| tailwind.config = { | ||
| darkMode: 'class' | ||
| }; | ||
| </script> |
There was a problem hiding this comment.
The Tailwind CDN script is loaded without a pinned version or SRI, which is a supply-chain risk and can also cause unexpected styling changes when the CDN updates. Consider shipping a built Tailwind CSS file (preferred) or at least pinning the CDN URL/version and adding integrity/crossorigin (and a CSP-friendly approach if you use CSP).
| <html lang="en" class="dark"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>ShellScope</title> | ||
| <style> | ||
| :root { | ||
| --bg-color: #050505; | ||
| --text-color: #E8E3C7; | ||
| --accent-color: #F5F5DC; | ||
| } | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| body { | ||
| background-color: var(--bg-color); | ||
| color: var(--text-color); | ||
| font-family: 'Courier New', Courier, monospace; | ||
| line-height: 1.6; | ||
| margin: 0; | ||
| display: flex; | ||
| flex-direction: column; | ||
| min-height: 100vh; | ||
| } | ||
|
|
||
| a { | ||
| text-decoration: none; | ||
| color: inherit; | ||
| transition: all 0.2s ease; | ||
| } | ||
|
|
||
| /* Layout */ | ||
| .container { | ||
| max-width: 1200px; | ||
| margin: 0 auto; | ||
| padding: 0 2rem; | ||
| width: 100%; | ||
| } | ||
|
|
||
| /* Navbar */ | ||
| nav { | ||
| padding: 2rem 0; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .logo { | ||
| font-weight: bold; | ||
| font-size: 1.25rem; | ||
| letter-spacing: -1px; | ||
| } | ||
|
|
||
| .nav-links { | ||
| display: flex; | ||
| gap: 2rem; | ||
| } | ||
|
|
||
| .nav-links a:hover { | ||
| color: var(--accent-color); | ||
| opacity: 0.8; | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| /* Hero */ | ||
| .hero { | ||
| padding: 6rem 0; | ||
| border-bottom: 1px solid rgba(232, 227, 199, 0.1); | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 3.5rem; | ||
| line-height: 1.1; | ||
| margin-bottom: 1.5rem; | ||
| font-weight: normal; | ||
| } | ||
|
|
||
| .hero p { | ||
| font-size: 1.25rem; | ||
| margin-bottom: 3rem; | ||
| opacity: 0.8; | ||
| max-width: 700px; | ||
| } | ||
|
|
||
| .cta-buttons { | ||
| display: flex; | ||
| gap: 1.5rem; | ||
| flex-wrap: wrap; | ||
| } | ||
|
|
||
| .btn { | ||
| padding: 1rem 2rem; | ||
| font-weight: bold; | ||
| border: 1px solid var(--accent-color); | ||
| cursor: pointer; | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .btn-primary { | ||
| background-color: var(--accent-color); | ||
| color: #000; | ||
| } | ||
|
|
||
| .btn-primary:hover { | ||
| background-color: #000; | ||
| color: var(--accent-color); | ||
| } | ||
|
|
||
| .btn-secondary { | ||
| background-color: transparent; | ||
| color: var(--accent-color); | ||
| } | ||
|
|
||
| .btn-secondary:hover { | ||
| background-color: var(--accent-color); | ||
| color: #000; | ||
| } | ||
|
|
||
| /* Features */ | ||
| .features { | ||
| padding: 4rem 0; | ||
| display: grid; | ||
| grid-template-columns: repeat(3, 1fr); | ||
| gap: 2rem; | ||
| } | ||
|
|
||
| .feature-item h3 { | ||
| font-size: 1.25rem; | ||
| margin-bottom: 1rem; | ||
| font-weight: bold; | ||
| border-bottom: 1px solid var(--accent-color); | ||
| display: inline-block; | ||
| padding-bottom: 0.25rem; | ||
| } | ||
|
|
||
| /* Tech Stack */ | ||
| .tech-stack { | ||
| padding: 4rem 0; | ||
| text-align: center; | ||
| opacity: 0.7; | ||
| border-top: 1px solid rgba(232, 227, 199, 0.1); | ||
| } | ||
|
|
||
| /* Footer */ | ||
| footer { | ||
| padding: 2rem 0; | ||
| text-align: center; | ||
| font-size: 0.875rem; | ||
| opacity: 0.5; | ||
| margin-top: auto; | ||
| border-top: 1px solid rgba(232, 227, 199, 0.1); | ||
| } | ||
|
|
||
| /* Responsive */ | ||
| @media (max-width: 768px) { | ||
| h1 { | ||
| font-size: 2.5rem; | ||
| } | ||
|
|
||
| .features { | ||
| grid-template-columns: 1fr; | ||
| } | ||
|
|
||
| .nav-links { | ||
| display: none; | ||
| } | ||
| } | ||
| </style> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>ShellScope | Local Flight Recorder for Windows Terminal Activity</title> | ||
| <meta name="description" content="ShellScope captures transient Windows processes and terminal activity under 100ms using WMI with local SQLite logging and zero cloud dependencies." /> | ||
| <script src="https://cdn.tailwindcss.com"></script> | ||
| <script> | ||
| tailwind.config = { | ||
| darkMode: 'class' | ||
| }; |
There was a problem hiding this comment.
<html class="dark"> forces dark mode permanently, making the light-mode classes effectively unreachable and the darkMode: 'class' config largely redundant. If the intent is “dark by default but switchable”, add a theme toggle (or respect prefers-color-scheme) that adds/removes the dark class instead of hard-coding it.
| <nav class="fixed top-4 left-4 right-4 z-50 mx-auto max-w-7xl px-4"> | ||
| <div class="rounded-2xl border border-gray-200/60 bg-white/80 px-4 py-3 backdrop-blur-sm dark:border-slate-700 dark:bg-slate-800/80"> | ||
| <div class="flex items-center justify-between gap-4"> | ||
| <a href="#hero" class="cursor-pointer text-sm font-semibold tracking-wide text-slate-900 transition-colors duration-200 hover:text-slate-600 dark:text-slate-100 dark:hover:text-slate-300">ShellScope</a> | ||
| <div class="flex items-center gap-4 text-sm"> | ||
| <a href="#about" class="cursor-pointer text-slate-700 transition-colors duration-200 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100">About</a> | ||
| <a href="#features" class="cursor-pointer text-slate-700 transition-colors duration-200 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100">Features</a> | ||
| <a href="#installation" class="cursor-pointer text-slate-700 transition-colors duration-200 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100">Install</a> | ||
| <a href="https://github.com/shiks2/shellscope" class="cursor-pointer text-slate-700 transition-colors duration-200 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100">GitHub</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <main> | ||
| <section id="hero" class="flex min-h-screen items-center pt-24"> | ||
| <div class="mx-auto w-full max-w-7xl px-4"> | ||
| <div class="rounded-3xl border border-gray-200/60 bg-white/80 p-8 backdrop-blur-sm dark:border-slate-700 dark:bg-slate-800/80 md:p-12"> | ||
| <p class="mb-4 text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400">Developer Tool / System Observability</p> | ||
| <h1 class="text-4xl font-semibold leading-tight text-slate-900 dark:text-slate-100 md:text-6xl">ShellScope: The Local Flight Recorder for Windows.</h1> | ||
| <p class="mt-6 max-w-3xl text-base text-slate-700 dark:text-slate-300 md:text-xl">Capture transient processes and terminal activity under 100ms using WMI. Zero cloud dependencies. Logs command-line arguments to local SQLite DB.</p> | ||
| <div class="mt-8 flex flex-wrap items-center gap-4"> | ||
| <a href="https://github.com/shiks2/shellscope" class="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-slate-300 bg-slate-900 px-5 py-3 font-medium text-white transition-colors duration-200 hover:bg-slate-700 dark:border-slate-600 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-300"> | ||
| <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .297a12 12 0 0 0-3.793 23.39c.6.111.793-.26.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.09-.745.083-.729.083-.729 1.205.085 1.84 1.236 1.84 1.236 1.07 1.833 2.807 1.304 3.492.997.108-.775.418-1.305.76-1.605-2.665-.303-5.467-1.334-5.467-5.93 0-1.31.47-2.381 1.236-3.221-.124-.303-.536-1.524.118-3.176 0 0 1.008-.323 3.3 1.23a11.5 11.5 0 0 1 6.006 0c2.291-1.553 3.297-1.23 3.297-1.23.656 1.653.244 2.874.12 3.176.77.84 1.235 1.911 1.235 3.221 0 4.61-2.807 5.624-5.48 5.921.43.372.813 1.102.813 2.222v3.293c0 .32.19.694.8.576A12 12 0 0 0 12 .297"/></svg> | ||
| View on GitHub | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section id="about" class="py-20"> | ||
| <div class="mx-auto max-w-7xl px-4"> | ||
| <div class="rounded-2xl border border-gray-200/60 bg-white/80 p-8 backdrop-blur-sm dark:border-slate-700 dark:bg-slate-800/80"> | ||
| <h2 class="text-3xl font-semibold text-slate-900 dark:text-slate-100">About ShellScope</h2> | ||
| <p class="mt-4 text-slate-700 dark:text-slate-300">ShellScope uses Windows Management Instrumentation (WMI) to capture process creation events, including short-lived "flash" processes (<100ms). Provides audit trail without external dependencies.</p> | ||
| <p class="mt-4 text-slate-700 dark:text-slate-300">A local flight recorder for Windows terminal activity and transient process logging. Highlights: Process List (Green: safe, Red: suspicious like -enc), Status (Running/Closed), Real-time dashboard.</p> | ||
| </div> | ||
| </div> | ||
| </section> |
There was a problem hiding this comment.
With a fixed navbar, in-page anchor jumps (e.g. #about/#features/#installation) can land with the section header hidden underneath the nav. Add scroll-margin-top (e.g. Tailwind scroll-mt-24/scroll-mt-28) to the anchored sections (or use a global scroll-padding-top).
| <article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> | ||
| <svg class="h-6 w-6 text-slate-700 dark:text-slate-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg> | ||
| <h3 class="mt-4 text-lg font-semibold text-slate-900 dark:text-slate-100">Transient Process Capture</h3> | ||
| <p class="mt-2 text-sm text-slate-700 dark:text-slate-300">Detects and logs processes with lifespans <100ms.</p> | ||
| </article> | ||
| <article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> | ||
| <svg class="h-6 w-6 text-slate-700 dark:text-slate-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16l4-2 4 2 4-2 4 2V8z"/><path d="M14 2v6h6"/></svg> | ||
| <h3 class="mt-4 text-lg font-semibold text-slate-900 dark:text-slate-100">Argument Logging</h3> | ||
| <p class="mt-2 text-sm text-slate-700 dark:text-slate-300">Captures full command-line args for detailed analysis.</p> | ||
| </article> | ||
| <article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> | ||
| <svg class="h-6 w-6 text-slate-700 dark:text-slate-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5"/><path d="M3 12c0 1.7 4 3 9 3s9-1.3 9-3"/></svg> | ||
| <h3 class="mt-4 text-lg font-semibold text-slate-900 dark:text-slate-100">Local-First Architecture</h3> | ||
| <p class="mt-2 text-sm text-slate-700 dark:text-slate-300">All data is stored locally in SQLite with no cloud uploads.</p> | ||
| </article> | ||
| <article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> | ||
| <svg class="h-6 w-6 text-slate-700 dark:text-slate-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg> | ||
| <h3 class="mt-4 text-lg font-semibold text-slate-900 dark:text-slate-100">Low Resource Usage</h3> | ||
| <p class="mt-2 text-sm text-slate-700 dark:text-slate-300">Efficient Python WMI backend combined with a performant Flutter UI.</p> | ||
| </article> |
There was a problem hiding this comment.
These feature cards use cursor-pointer and hover styling but aren’t actually interactive elements (no link/button), which can confuse users and is not keyboard accessible. Either remove the pointer/hover affordances or make the cards real interactive elements (wrap in an , or add appropriate role/tabindex and key handling).
| <div class="cursor-pointer rounded-xl border border-gray-200/60 bg-white/80 p-4 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> | ||
| <div class="flex items-center gap-3"> | ||
| <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M11.95.03c-1.97.01-3.84.16-5.47.47C1.7 1.35 0 2.72 0 4.65v14.7c0 1.93 1.7 3.3 6.48 4.15 3.28.59 7.77.59 11.04 0C22.3 22.65 24 21.28 24 19.35V4.65c0-1.93-1.7-3.3-6.48-4.15A33.7 33.7 0 0 0 11.95.03Zm-.2 2.07c1.17 0 2.13.96 2.13 2.14a2.14 2.14 0 0 1-2.13 2.14 2.14 2.14 0 0 1-2.13-2.14c0-1.18.96-2.14 2.13-2.14Zm-4.2 6.1h8.4a1.2 1.2 0 0 1 1.2 1.2v8.4a1.2 1.2 0 0 1-1.2 1.2h-8.4a1.2 1.2 0 0 1-1.2-1.2V9.4a1.2 1.2 0 0 1 1.2-1.2Z"/></svg> | ||
| <span class="text-sm font-medium text-slate-900 dark:text-slate-100">Python</span> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section id="features" class="features"> | ||
| <div class="feature-item"> | ||
| <h3>Flash Capture</h3> | ||
| <p>Detects processes with lifespans under 100 milliseconds.</p> | ||
| </div> | ||
| <div class="cursor-pointer rounded-xl border border-gray-200/60 bg-white/80 p-4 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> | ||
| <div class="flex items-center gap-3"> | ||
| <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.314 12.441-3.11 3.11-3.11-3.11 3.11-3.11 3.11 3.11ZM17.887 8.867l-1.555 1.554-3.11-3.11L14.777 5.76l3.11 3.108Zm0 7.146-3.11 3.109-1.555-1.555 3.11-3.11 1.555 1.556Zm-11.777 0 1.555 1.554 3.11-3.109-1.555-1.556-3.11 3.111Zm0-7.146 3.11-3.109 1.555 1.554-3.11 3.11-1.555-1.555Zm5.095 9.126 1.555 1.554 1.554-1.554-1.554-1.555-1.555 1.555Zm0-11.112 1.555 1.554 1.554-1.554-1.554-1.555-1.555 1.555Z"/></svg> | ||
| <span class="text-sm font-medium text-slate-900 dark:text-slate-100">Flutter</span> | ||
| </div> | ||
| <div class="feature-item"> | ||
| <h3>Deep Visibility</h3> | ||
| <p>Logs parent PIDs and full command line arguments.</p> | ||
| </div> | ||
| <div class="cursor-pointer rounded-xl border border-gray-200/60 bg-white/80 p-4 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> | ||
| <div class="flex items-center gap-3"> | ||
| <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C7 2 3 3.34 3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5c0-1.66-4-3-9-3Zm0 2c4.42 0 7 .99 7 1s-2.58 1-7 1-7-.99-7-1 2.58-1 7-1Zm0 16c-4.42 0-7-.99-7-1v-2c1.7.8 4.4 1 7 1s5.3-.2 7-1v2c0 .01-2.58 1-7 1Zm0-4c-4.42 0-7-.99-7-1v-2c1.7.8 4.4 1 7 1s5.3-.2 7-1v2c0 .01-2.58 1-7 1Zm0-4c-4.42 0-7-.99-7-1V9c1.7.8 4.4 1 7 1s5.3-.2 7-1v2c0 .01-2.58 1-7 1Z"/></svg> | ||
| <span class="text-sm font-medium text-slate-900 dark:text-slate-100">SQLite</span> | ||
| </div> | ||
| <div class="feature-item"> | ||
| <h3>Offline First</h3> | ||
| <p>Zero cloud dependency. Data is stored in a local SQLite database.</p> | ||
| </div> | ||
| <div class="cursor-pointer rounded-xl border border-gray-200/60 bg-white/80 p-4 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> | ||
| <div class="flex items-center gap-3"> | ||
| <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M0 1.418 9.833 0v9.552H0V1.418Zm11.02-1.595L24 0v9.46H11.02V-.177ZM0 10.448h9.833V24L0 22.583V10.448Zm11.02 0H24v13.73l-12.98-1.823V10.448Z"/></svg> | ||
| <span class="text-sm font-medium text-slate-900 dark:text-slate-100">Windows</span> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section id="tech" class="tech-stack"> | ||
| <p>Built with Flutter, Python WMI, and SQLite.</p> | ||
| </section> | ||
| </main> | ||
|
|
||
| <footer> | ||
| <div class="container"> | ||
| <p>© 2026 ShellScope. Released under MIT License.</p> | ||
| </div> |
There was a problem hiding this comment.
Tech stack items are styled as clickable (cursor-pointer + hover) but don’t perform any action and aren’t focusable, which is misleading and not keyboard accessible. Either remove interactive styling or convert them into links/buttons (and include visible focus styles).
| <article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> | ||
| <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Linux Support</h3> | ||
| <p class="mt-2 text-slate-700 dark:text-slate-300">Implementation via Netlink.</p> | ||
| </article> | ||
| <article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> | ||
| <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">macOS Support</h3> | ||
| <p class="mt-2 text-slate-700 dark:text-slate-300">Implementation via Endpoint Security/psutil.</p> | ||
| </article> | ||
| <article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> |
There was a problem hiding this comment.
Roadmap cards are presented with cursor-pointer and hover affordances but aren’t actual controls/links, which is misleading and not accessible via keyboard. Consider removing the interactive affordances or making each card a link/button with proper focus handling.
| <article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> | |
| <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Linux Support</h3> | |
| <p class="mt-2 text-slate-700 dark:text-slate-300">Implementation via Netlink.</p> | |
| </article> | |
| <article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> | |
| <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">macOS Support</h3> | |
| <p class="mt-2 text-slate-700 dark:text-slate-300">Implementation via Endpoint Security/psutil.</p> | |
| </article> | |
| <article class="cursor-pointer rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> | |
| <article class="rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> | |
| <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Linux Support</h3> | |
| <p class="mt-2 text-slate-700 dark:text-slate-300">Implementation via Netlink.</p> | |
| </article> | |
| <article class="rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> | |
| <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">macOS Support</h3> | |
| <p class="mt-2 text-slate-700 dark:text-slate-300">Implementation via Endpoint Security/psutil.</p> | |
| </article> | |
| <article class="rounded-2xl border border-gray-200/60 bg-white/80 p-6 backdrop-blur-sm transition-colors duration-200 dark:border-slate-700 dark:bg-slate-800/80 dark:hover:border-slate-500"> |
Replaced the root
index.htmlwith a dark-mode-first, single-file Tailwind landing page aligned to the requested Vercel/Linear-style aesthetic and strict UI checklist. The page now incorporates the full README product narrative and required sections for positioning, onboarding, and roadmap.Hero + navigation
fixed top-4 left-4 right-4 z-50) with in-page anchors and GitHub link.min-h-screen) with exact required headline/subheadline and GitHub CTA including SVG icon.Product narrative sections
UI system + checklist compliance
darkMode: 'class').aria-hidden="true"on icons).cursor-pointer,transition-colors duration-200, hover color/opacity changes only (no layout/scale shifts).💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.