mirror of
https://github.com/kunkunsh/kunkun-ext-neohtop.git
synced 2025-04-04 09:46:43 +00:00
347 lines
14 KiB
HTML
347 lines
14 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.jpg" 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 system monitor built with Rust and Svelte. Experience
|
|
real-time performance monitoring like never before.</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="tech-stack">
|
|
<span class="tech-badge">Rust</span>
|
|
<span class="tech-badge">Tauri</span>
|
|
<span class="tech-badge">Svelte</span>
|
|
</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" class="coming-soon-badge">
|
|
📌 Launching tomorrow on Product Hunt
|
|
</a>
|
|
|
|
<script>
|
|
const launchDate = new Date('2024-11-04 00:00:00 PST'); // Replace with your launch date
|
|
|
|
function updateBadge() {
|
|
if (Date.now() >= launchDate) {
|
|
document.querySelector('.coming-soon-badge').outerHTML = `
|
|
<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>
|
|
`;
|
|
}
|
|
}
|
|
|
|
updateBadge();
|
|
setInterval(updateBadge, 60000); // Check every minute
|
|
</script>
|
|
</div>
|
|
<div class="support-developer">
|
|
<a href="https://www.buymeacoffee.com/abdenasser">
|
|
<img
|
|
src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=abdenasser&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"
|
|
alt="Buy Me A Coffee" style="height: 40px !important;width: auto !important;">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hero-image">
|
|
<img src="https://github.com/Abdenasser/neohtop/raw/main/screenshot.jpg" alt="NeoHtop Interface"
|
|
class="floating-screenshot">
|
|
</div>
|
|
</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 for macOS</h2>
|
|
<p class="download-subtitle">Choose the version that matches your Mac</p>
|
|
<div class="download-options">
|
|
<a href="https://github.com/Abdenasser/neohtop/releases/download/v1.0.1/NeoHtop-intel.dmg"
|
|
class="download-button intel">
|
|
<span class="icon">💻</span>
|
|
<div class="button-text">
|
|
<span class="primary">Intel Mac</span>
|
|
<span class="secondary">For Intel-based Macs</span>
|
|
</div>
|
|
</a>
|
|
<a href="https://github.com/Abdenasser/neohtop/releases/download/v1.0.1/NeoHtop-silicon.dmg"
|
|
class="download-button silicon">
|
|
<span class="icon">🍎</span>
|
|
<div class="button-text">
|
|
<span class="primary">Apple Silicon</span>
|
|
<span class="secondary">For M1/M2/M3 Macs</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="trust-badge">
|
|
<span class="verified-icon">✓</span>
|
|
<span class="verified-text">Notarized by Apple for enhanced security</span>
|
|
<a href="https://developer.apple.com/documentation/security/notarizing-macos-software-before-distribution"
|
|
target="_blank" rel="noopener" class="learn-more">Learn more</a>
|
|
</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> |