mirror of
https://github.com/kunkunsh/kunkun-ext-neohtop.git
synced 2025-04-11 17:29:45 +00:00
401 lines
16 KiB
HTML
401 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NeoHtop - Modern System Monitor for macOS</title>
|
|
<meta name="description"
|
|
content="A beautiful, efficient system monitor built with Rust and Svelte. Monitor processes, CPU, and memory usage in real-time with a modern interface.">
|
|
<meta name="keywords"
|
|
content="system monitor, task manager, macos, process monitor, cpu usage, memory usage, rust, svelte">
|
|
<meta name="author" content="Your Name">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://abdenasser.github.io/neohtop/">
|
|
<meta property="og:title" content="NeoHtop - Modern System Monitor">
|
|
<meta property="og:description"
|
|
content="A beautiful, efficient system monitor built with Rust and Svelte. Monitor processes, CPU, and memory usage in real-time.">
|
|
<meta property="og:image" content="https://github.com/Abdenasser/neohtop/raw/main/app-icon.png">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:creator" content="@__abdenasser">
|
|
<meta name="twitter:title" content="NeoHtop - Modern System Monitor">
|
|
<meta name="twitter:description" content="A beautiful, efficient system monitor built with Rust and Svelte.">
|
|
<meta name="twitter:image" content="https://github.com/Abdenasser/neohtop/raw/main/app-icon.png">
|
|
<link rel="icon" type="image/png" href="favicon.ico">
|
|
<link rel="apple-touch-icon" href="apple-touch-icon.png">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="preload" href="https://github.com/Abdenasser/neohtop/raw/main/app-icon.png" as="image">
|
|
<link rel="preload" href="https://github.com/Abdenasser/neohtop/raw/main/screenshot.png" as="image">
|
|
</head>
|
|
|
|
<body>
|
|
<header class="glass-nav">
|
|
<nav>
|
|
<div class="logo-container">
|
|
<img src="https://github.com/Abdenasser/neohtop/raw/main/app-icon.png" alt="NeoHtop" class="nav-logo">
|
|
<span class="nav-brand">NeoHtop</span>
|
|
</div>
|
|
<div class="nav-links">
|
|
<a href="#home">Home</a>
|
|
<a href="#features">Features</a>
|
|
<a href="#download">Download</a>
|
|
<a href="#install">Install</a>
|
|
<a href="#faq">FAQ</a>
|
|
<button id="themeToggle" class="theme-toggle" aria-label="Toggle theme">
|
|
<span class="theme-icon">🌙</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section id="home" class="hero">
|
|
<div class="hero-content">
|
|
<div class="hero-text">
|
|
<h1 class="gradient-text">Monitor Your System<br>With Style</h1>
|
|
<p class="hero-subtitle">A beautiful, lightning-fast cross-platform system monitor.</p>
|
|
<div class="hero-cta">
|
|
<a href="#download" class="primary-button">Download Now</a>
|
|
<a href="https://github.com/abdenasser/neohtop" class="secondary-button">
|
|
View on GitHub
|
|
</a>
|
|
</div>
|
|
<div class="badges">
|
|
<div class="ph-badge-placeholder">
|
|
<a href="https://www.producthunt.com/posts/neohtop?utm_source=badge-featured" target="_blank"
|
|
rel="noopener">
|
|
<img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=neohtop&theme=light"
|
|
alt="NeoHtop - Modern system monitor for macOS | Product Hunt" style="width: 250px; height: 54px;"
|
|
width="250" height="54" />
|
|
</a>
|
|
|
|
</div>
|
|
<script data-name="BMC-Widget" data-cfasync="false"
|
|
src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="abdenasser"
|
|
data-description="Support me on Buy me a coffee!" data-message="" data-color="#FF5F5F"
|
|
data-position="Right" data-x_margin="18" data-y_margin="18"></script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hero-background">
|
|
<img src="https://github.com/Abdenasser/neohtop/raw/main/screenshot-light.png" alt="NeoHtop Interface light" />
|
|
<img src="https://github.com/Abdenasser/neohtop/raw/main/screenshot.png" alt="NeoHtop Interface dark" />
|
|
</div>
|
|
</section>
|
|
|
|
<section id="features" class="features">
|
|
<h2 class="section-title">Why Choose NeoHtop?</h2>
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🚀</div>
|
|
<h3>Real-time Monitoring</h3>
|
|
<p>Track system processes in real-time with minimal resource usage</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🎨</div>
|
|
<h3>Modern UI</h3>
|
|
<p>Beautiful interface with automatic dark/light theme detection</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔍</div>
|
|
<h3>Smart Search</h3>
|
|
<p>Quick process search with advanced filtering options</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📌</div>
|
|
<h3>Process Pinning</h3>
|
|
<p>Keep important processes in view for easy monitoring</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">⚡️</div>
|
|
<h3>Resource Efficient</h3>
|
|
<p>Built with Rust for optimal performance and low memory usage</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🛠</div>
|
|
<h3>Process Management</h3>
|
|
<p>View and manage processes with detailed information</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="download" class="downloads">
|
|
<div class="download-container glass-card">
|
|
<h2>Download NeoHtop <span id="current-version">Loading...</span></h2>
|
|
<div class="download-stats">
|
|
<span id="download-count">...</span> Total Downloads
|
|
</div>
|
|
<p class="download-subtitle">Choose your platform to get started</p>
|
|
<div class="download-options">
|
|
<!-- macOS Downloads -->
|
|
<div class="download-group">
|
|
<h3 class="platform-title">macOS</h3>
|
|
<!-- notarized by apple badge -->
|
|
<div class="notarized-badge">
|
|
<img
|
|
src="https://img.shields.io/badge/Notarized%20by%20Apple-000000?style=for-the-badge&logo=apple&logoColor=white"
|
|
alt="Notarized by Apple">
|
|
</div>
|
|
<div class="platform-options">
|
|
<a href="" class="download-button macos" data-type="macos-intel" data-version="latest">
|
|
<span class="icon">💻</span>
|
|
<div class="button-text">
|
|
<span class="primary">Intel Chip</span>
|
|
<span class="secondary">macOS 10.15 or later</span>
|
|
</div>
|
|
</a>
|
|
<a href="" class="download-button macos" data-type="macos-silicon" data-version="latest">
|
|
<span class="icon">🍎</span>
|
|
<div class="button-text">
|
|
<span class="primary">Apple Silicon</span>
|
|
<span class="secondary">macOS 11.0 or later</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Windows Download -->
|
|
<div class="download-group">
|
|
<h3 class="platform-title">Windows</h3>
|
|
<div class="platform-options">
|
|
<a href="" class="download-button windows" data-type="windows" data-version="latest">
|
|
<span class="icon">🫣</span>
|
|
<div class="button-text">
|
|
<span class="primary">Windows</span>
|
|
<span class="secondary">Windows 10 or later</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Linux Downloads -->
|
|
<div class="download-group">
|
|
<h3 class="platform-title">Linux</h3>
|
|
<div class="platform-options">
|
|
<!-- x86_64 Downloads -->
|
|
<div class="linux-downloads">
|
|
<h4>x86_64</h4>
|
|
<a href="" class="download-button linux" data-type="linux-deb-x64" data-version="latest">
|
|
<span class="icon">📦</span>
|
|
<div class="button-text">
|
|
<span class="primary">.deb Package</span>
|
|
<span class="secondary">Debian/Ubuntu</span>
|
|
</div>
|
|
</a>
|
|
<a href="" class="download-button linux" data-type="linux-appimage-x64" data-version="latest"
|
|
style="margin-top: 10px;">
|
|
<span class="icon">🐧</span>
|
|
<div class="button-text">
|
|
<span class="primary">AppImage</span>
|
|
<span class="secondary">Universal Linux</span>
|
|
</div>
|
|
</a>
|
|
<a href="" class="download-button linux" data-type="linux-rpm-x64" data-version="latest"
|
|
style="margin-top: 10px;">
|
|
<span class="icon">📦</span>
|
|
<div class="button-text">
|
|
<span class="primary">.rpm Package</span>
|
|
<span class="secondary">Fedora/RHEL x86_64</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- ARM64 Downloads -->
|
|
<div class="linux-downloads">
|
|
<h4>ARM64</h4>
|
|
<a href="" class="download-button linux" data-type="linux-deb-arm64" data-version="latest">
|
|
<span class="icon">📦</span>
|
|
<div class="button-text">
|
|
<span class="primary">.deb Package</span>
|
|
<span class="secondary">Debian/Ubuntu ARM64</span>
|
|
</div>
|
|
</a>
|
|
<a href="" class="download-button linux" data-type="linux-appimage-arm64" data-version="latest"
|
|
style="margin-top: 10px;">
|
|
<span class="icon">🐧</span>
|
|
<div class="button-text">
|
|
<span class="primary">AppImage</span>
|
|
<span class="secondary">Universal Linux ARM64</span>
|
|
</div>
|
|
</a>
|
|
<a href="" class="download-button linux" data-type="linux-rpm-arm64" data-version="latest"
|
|
style="margin-top: 10px;">
|
|
<span class="icon">📦</span>
|
|
<div class="button-text">
|
|
<span class="primary">.rpm Package</span>
|
|
<span class="secondary">Fedora/RHEL ARM64</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="install" class="install">
|
|
<h2>Installation Guide</h2>
|
|
<div class="install-steps">
|
|
<div class="step">
|
|
<span class="step-number">1</span>
|
|
<h3>Download</h3>
|
|
<p>Choose and download the appropriate version for your Mac</p>
|
|
</div>
|
|
<div class="step">
|
|
<span class="step-number">2</span>
|
|
<h3>Open DMG</h3>
|
|
<p>Double-click the downloaded .dmg file</p>
|
|
</div>
|
|
<div class="step">
|
|
<span class="step-number">3</span>
|
|
<h3>Install</h3>
|
|
<p>Drag NeoHtop to your Applications folder</p>
|
|
</div>
|
|
<div class="step">
|
|
<span class="step-number">4</span>
|
|
<h3>First Launch</h3>
|
|
<p>Right-click and choose Open to bypass Gatekeeper</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="faq" class="faq">
|
|
<h2 class="section-title">Frequently Asked Questions</h2>
|
|
<div class="faq-list">
|
|
<div class="faq-item">
|
|
<button class="faq-question">
|
|
<span class="question-text">How does NeoHtop compare to Activity Monitor?</span>
|
|
<span class="faq-icon">⌄</span>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<p>NeoHtop offers a modern interface with additional features like process pinning, smart search, and themes
|
|
while maintaining high performance through its Rust backend. It's designed to be more user-friendly and
|
|
efficient than traditional system monitors.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-question">
|
|
<span class="question-text">Is NeoHtop resource intensive?</span>
|
|
<span class="faq-icon">⌄</span>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<p>No, NeoHtop is built with Rust and optimized for minimal resource usage, typically using less than 1% CPU
|
|
and minimal memory. It's designed to be lightweight while monitoring your system.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-question">
|
|
<span class="question-text">Does NeoHtop work on all macOS versions?</span>
|
|
<span class="faq-icon">⌄</span>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<p>NeoHtop supports macOS 10.15 (Catalina) and newer versions. It's optimized for both Intel and Apple
|
|
Silicon Macs, with native support for both architectures.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-question">
|
|
<span class="question-text">Can I customize the interface?</span>
|
|
<span class="faq-icon">⌄</span>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<p>Yes, NeoHtop offers various customization options including:
|
|
<ul>
|
|
<li>Dark/Light theme switching</li>
|
|
<li>Customizable columns and metrics</li>
|
|
<li>Adjustable refresh rates</li>
|
|
<li>Process grouping options</li>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-question">
|
|
<span class="question-text">Is NeoHtop open source?</span>
|
|
<span class="faq-icon">⌄</span>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<p>Yes, NeoHtop is completely open source and available on GitHub. You can contribute to the project, report
|
|
issues, or suggest new features through our GitHub repository.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-88HFXRBNLS"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag() { dataLayer.push(arguments); }
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-88HFXRBNLS');
|
|
</script>
|
|
<script src="main.js"></script>
|
|
</main>
|
|
<footer class="footer">
|
|
<div class="footer-content">
|
|
<div class="footer-section">
|
|
<h3>NeoHtop</h3>
|
|
<p class="footer-description">
|
|
A modern system monitor built with Rust and Svelte.
|
|
Open source and free to use.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="footer-section">
|
|
<h4>Links</h4>
|
|
<ul class="footer-links">
|
|
<li>
|
|
<a href="https://github.com/abdenasser/neohtop" target="_blank" rel="noopener">
|
|
<span class="icon">📦</span> GitHub Repository
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/abdenasser" target="_blank" rel="noopener">
|
|
<span class="icon">👨💻</span> Creator
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/abdenasser/neohtop/issues" target="_blank" rel="noopener">
|
|
<span class="icon">🐛</span> Report Issue
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-section">
|
|
<h4>Tech Stack</h4>
|
|
<ul class="tech-stack-list">
|
|
<li>
|
|
<a href="https://www.rust-lang.org/" target="_blank" rel="noopener">
|
|
<span class="icon">🦀</span> Rust
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://tauri.app/" target="_blank" rel="noopener">
|
|
<span class="icon">⚡</span> Tauri
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://svelte.dev/" target="_blank" rel="noopener">
|
|
<span class="icon">🎯</span> Svelte
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<p>Made with <span class="heart">❤️</span> and <span class="coffee">☕</span> by
|
|
<a href="https://github.com/abdenasser" target="_blank" rel="noopener">Abdenasser</a>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
|
|
</html> |