diff --git a/docs/index.html b/docs/index.html index e4a70fe..265d8ef 100644 --- a/docs/index.html +++ b/docs/index.html @@ -29,85 +29,81 @@ -
+
- -

NeoHtop

-

A modern, cross-platform system monitor

-
- Rust - Tauri - Svelte +
+
+

Monitor Your System
With Style

+

A beautiful, lightning-fast system monitor built with Rust and Svelte. Experience + real-time performance monitoring like never before.

+
+ Download Now + + View on GitHub + +
+
+ Rust + Tauri + Svelte +
+
+
+ NeoHtop Interface +
-
- - License - - - GitHub stars - - - GitHub issues - - - GitHub release - - - Notarized by Apple - -
- -
- NeoHtop Screenshot -
-
-

Features

+

Why Choose NeoHtop?

-
- 🚀 +
+
🚀

Real-time Monitoring

Track system processes in real-time with minimal resource usage

-
- 🎨 +
+
🎨

Modern UI

Beautiful interface with automatic dark/light theme detection

-
- 🔍 +
+
🔍

Smart Search

Quick process search with advanced filtering options

-
- 📌 +
+
📌

Process Pinning

Keep important processes in view for easy monitoring

-
- ⚡️ +
+
⚡️

Resource Efficient

Built with Rust for optimal performance and low memory usage

-
- 🛠 +
+
🛠

Process Management

View and manage processes with detailed information

@@ -115,18 +111,27 @@
-

Download for macOS

-
- - 💻 - Intel Mac - - - 🍎 - Apple Silicon - +
+

Download for macOS

+

Choose the version that matches your Mac

+
+ + 💻 +
+ Intel Mac + For Intel-based Macs +
+ + + 🍎 +
+ Apple Silicon + For M1/M2/M3 Macs +
+ +
@@ -157,26 +162,67 @@
-

Frequently Asked Questions

+

Frequently Asked Questions

-
- How does NeoHtop compare to Activity Monitor? - ▼ -
+
- NeoHtop offers a modern interface with additional features like process pinning, smart search, and themes - while maintaining high performance through its Rust backend. +

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.

+
-
- Is NeoHtop resource intensive? - ▼ -
+
- No, NeoHtop is built with Rust and optimized for minimal resource usage, typically using less than 1% CPU - and minimal memory. +

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.

+
+
+ +
+ +
+

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.

+
+
+ +
+ +
+

Yes, NeoHtop offers various customization options including: +

    +
  • Dark/Light theme switching
    • +
  • Customizable columns and metrics
    • +
  • Adjustable refresh rates
    • +
  • Process grouping options
    • +
+

+
+
+ +
+ +
+

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.

@@ -184,14 +230,66 @@ - -
+ \ No newline at end of file diff --git a/docs/main.js b/docs/main.js index c6d6f1e..359e7a3 100644 --- a/docs/main.js +++ b/docs/main.js @@ -30,23 +30,19 @@ prefersDark.addEventListener('change', (e) => { }); // FAQ Accordion -document.querySelectorAll('.faq-question').forEach(question => { - question.addEventListener('click', () => { - const item = question.parentElement; - const isActive = item.classList.contains('active'); +document.querySelectorAll('.faq-question').forEach(button => { + button.addEventListener('click', () => { + const faqItem = button.parentElement; + const isActive = faqItem.classList.contains('active'); // Close all FAQ items document.querySelectorAll('.faq-item').forEach(item => { item.classList.remove('active'); - const answer = item.querySelector('.faq-answer'); - answer.style.maxHeight = null; }); - // Open clicked item if it wasn't active + // Toggle clicked item if (!isActive) { - item.classList.add('active'); - const answer = item.querySelector('.faq-answer'); - answer.style.maxHeight = answer.scrollHeight + 'px'; + faqItem.classList.add('active'); } }); }); diff --git a/docs/styles.css b/docs/styles.css index 0c9a122..6c60feb 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -1,23 +1,17 @@ :root { - --primary: #2563eb; - --primary-light: #3b82f6; - --text: #1f2937; + --primary-color: #6366f1; + --secondary-color: #818cf8; --background: #ffffff; - --card: #f3f4f6; - --border: #e5e7eb; - --hover: #f9fafb; - --code-bg: #f1f5f9; + --text-primary: #1f2937; + --text-secondary: #4b5563; + --card-background: rgba(255, 255, 255, 0.8); } [data-theme="dark"] { - --primary: #3b82f6; - --primary-light: #60a5fa; - --text: #f3f4f6; - --background: #111827; - --card: #1f2937; - --border: #374151; - --hover: #1f2937; - --code-bg: #1e293b; + --background: #0f172a; + --text-primary: #f1f5f9; + --text-secondary: #cbd5e1; + --card-background: rgba(30, 41, 59, 0.8); } * { @@ -28,11 +22,15 @@ } body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + font-family: 'Inter', system-ui, sans-serif; background: var(--background); - color: var(--text); + color: var(--text-primary); line-height: 1.6; transition: background-color 0.3s, color 0.3s; + margin: 0; + padding: 0; + min-height: 100vh; + width: 100%; } /* Header & Navigation */ @@ -48,22 +46,53 @@ header { nav { max-width: 1200px; margin: 0 auto; - padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; } -nav a { - color: var(--text); - text-decoration: none; - padding: 0.5rem 1rem; - border-radius: 6px; - transition: background-color 0.2s; +.logo-container { + display: flex; + align-items: center; + gap: 0.75rem; } -nav a:hover { - background: var(--hover); +.nav-logo { + width: 32px; + /* Adjust size as needed */ + height: 32px; + object-fit: contain; +} + +.nav-brand { + font-size: 1.25rem; + font-weight: 600; + color: var(--text-primary); +} + +.nav-links { + display: flex; + align-items: center; + gap: 2rem; +} + +.nav-links a { + color: var(--text-primary); + text-decoration: none; + font-weight: 500; + transition: color 0.2s; +} + +.nav-links a:hover { + color: var(--primary-color); +} + +.theme-toggle { + background: transparent; + border: none; + cursor: pointer; + padding: 0.5rem; + color: var(--text-primary); } /* Theme Toggle */ @@ -86,6 +115,12 @@ main { max-width: 1200px; margin: 0 auto; padding: 2rem; + padding-top: 64px; + min-height: 100vh; + display: flex; + flex-direction: column; + width: 100%; + /* Should match the height of your nav */ } /* Sections */ @@ -96,8 +131,105 @@ section { /* Hero Section */ .hero { - text-align: center; - padding: 4rem 0; + display: flex; + align-items: center; + padding: 4rem 2rem; + margin-top: 64px; + /* Account for fixed header */ +} + +.hero-content { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + align-items: center; +} + +.hero-text { + max-width: 540px; +} + +.gradient-text { + font-size: 3rem; + font-weight: 800; + line-height: 1.2; + margin-bottom: 1rem; +} + +.hero-subtitle { + font-size: 1.125rem; + color: var(--text-secondary); + margin-bottom: 1.5rem; +} + +.hero-cta { + display: flex; + gap: 1rem; + margin-bottom: 1.5rem; +} + +.hero-image { + width: 100%; +} + +.floating-screenshot { + width: 100%; + height: auto; + max-width: 600px; + border-radius: 12px; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + animation: float 6s ease-in-out infinite; +} + +.tech-stack { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; +} + +/* Responsive design */ +@media (max-width: 1024px) { + .hero { + padding: 3rem 1.5rem; + } + + .hero-content { + grid-template-columns: 1fr; + gap: 2rem; + text-align: center; + } + + .hero-text { + margin: 0 auto; + } + + .hero-cta { + justify-content: center; + } + + .tech-stack { + justify-content: center; + } + + .gradient-text { + font-size: 3rem; + } +} + +@media (max-width: 640px) { + .hero { + padding: 1rem; + } + + .gradient-text { + font-size: 2.5rem; + } + + .hero-cta { + flex-direction: column; + } } .logo { @@ -156,7 +288,7 @@ section { } .download-button { - background: var(--primary); + background: var(--primary-color); color: white; padding: 1rem 2rem; border-radius: 8px; @@ -169,13 +301,69 @@ section { } .download-button:hover { - background: var(--primary-light); + transform: translateY(-2px); + background: var(--secondary-color); +} + +.download-button .icon { + font-size: 1.5rem; +} + +.button-text { + display: flex; + flex-direction: column; +} + +.button-text .primary { + font-weight: 600; +} + +.button-text .secondary { + font-size: 0.875rem; + opacity: 0.8; +} + +/* Primary button style (can be used for other buttons too) */ +.primary-button { + background: var(--primary-color); + color: white; + padding: 0.75rem 1.5rem; + border-radius: 8px; + text-decoration: none; + font-weight: 500; + transition: all 0.2s; +} + +.primary-button:hover { + background: var(--secondary-color); transform: translateY(-2px); } -.size { - font-size: 0.875rem; - opacity: 0.8; +/* Secondary button style */ +.secondary-button { + background: rgba(99, 102, 241, 0.1); + color: var(--primary-color); + padding: 0.75rem 1.5rem; + border-radius: 8px; + text-decoration: none; + font-weight: 500; + transition: all 0.2s; +} + +.secondary-button:hover { + background: rgba(99, 102, 241, 0.2); + transform: translateY(-2px); +} + +@media (max-width: 640px) { + .download-options { + flex-direction: column; + align-items: stretch; + } + + .download-button { + justify-content: center; + } } /* Installation Steps */ @@ -187,18 +375,25 @@ section { } .step { - background: var(--card); + background: var(--card-background); padding: 2rem; border-radius: 12px; position: relative; - border: 1px solid var(--border); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); + transition: transform 0.2s ease; +} + +.step:hover { + transform: translateY(-4px); } .step-number { position: absolute; top: -1rem; left: -1rem; - background: var(--primary); + background: var(--primary-color); color: white; width: 2rem; height: 2rem; @@ -207,6 +402,31 @@ section { align-items: center; justify-content: center; font-weight: bold; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); +} + +.step h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + font-weight: 600; + color: var(--text-primary); +} + +.step p { + color: var(--text-secondary); + line-height: 1.5; +} + +/* Dark mode adjustments */ +[data-theme="dark"] .step { + border-color: rgba(255, 255, 255, 0.1); + background: rgba(30, 41, 59, 0.8); +} + +@media (max-width: 768px) { + .install-steps { + grid-template-columns: 1fr; + } } /* Keyboard Shortcuts */ @@ -246,29 +466,92 @@ section { /* FAQ Section */ .faq { - margin-top: 2rem; + max-width: 800px; + margin: 4rem auto; + padding: 0 2rem; +} + +.faq-list { + display: flex; + flex-direction: column; + gap: 1rem; } .faq-item { - border-bottom: 1px solid var(--border); - padding: 1rem 0; + background: var(--card-background); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + overflow: hidden; + transition: all 0.3s ease; } .faq-question { - font-weight: 600; - cursor: pointer; + width: 100%; + padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; + background: none; + border: none; + cursor: pointer; + text-align: left; + color: var(--text-primary); + font-size: 1.1rem; + font-weight: 500; +} + +.faq-icon { + font-size: 1.5rem; + transition: transform 0.3s ease; +} + +.faq-item.active .faq-icon { + transform: rotate(180deg); } .faq-answer { - margin-top: 1rem; - display: none; + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease-out; + padding: 0 1.5rem; } .faq-item.active .faq-answer { - display: block; + max-height: 500px; + /* Adjust based on content */ + padding: 0 1.5rem 1.5rem; +} + +.faq-answer p { + color: var(--text-secondary); + line-height: 1.6; +} + +.faq-answer ul { + margin-top: 0.5rem; + margin-left: 1.5rem; + color: var(--text-secondary); +} + +.faq-answer li { + margin-bottom: 0.5rem; +} + +/* Dark mode adjustments */ +[data-theme="dark"] .faq-item { + border-color: rgba(255, 255, 255, 0.1); + background: rgba(30, 41, 59, 0.8); +} + +@media (max-width: 768px) { + .faq { + margin: 3rem auto; + } + + .faq-question { + padding: 1.25rem; + font-size: 1rem; + } } /* Footer */ @@ -352,4 +635,330 @@ footer { height: auto; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.glass-nav { + backdrop-filter: blur(12px); + background: var(--card-background); + position: fixed; + width: 100%; + top: 0; + z-index: 1000; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding: 1rem 2rem; + box-sizing: border-box; + box-shadow: none; +} + +[data-theme="dark"] .glass-nav { + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(30, 41, 59, 0.8); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); +} + +.tech-badge { + background: rgba(99, 102, 241, 0.1); + color: var(--primary-color); + padding: 0.5rem 1rem; + border-radius: 9999px; + font-weight: 500; + margin-right: 0.5rem; +} + +.feature-card { + background: var(--card-background); + border-radius: 16px; + padding: 2rem; + transition: transform 0.2s; +} + +.feature-card:hover { + transform: translateY(-5px); +} + +@keyframes float { + 0% { + transform: translateY(0px); + } + + 50% { + transform: translateY(-20px); + } + + 100% { + transform: translateY(0px); + } +} + +/* Features Section */ +.features { + padding: 4rem 2rem; +} + +.section-title { + text-align: center; + margin-bottom: 3rem; + font-size: 2.5rem; + font-weight: 700; +} + +.feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + max-width: 1200px; + margin: 0 auto; +} + +.feature-card { + background: var(--card-background); + padding: 2rem; + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); + transition: transform 0.2s ease; +} + +.feature-card:hover { + transform: translateY(-4px); +} + +.feature-icon { + font-size: 2.5rem; + margin-bottom: 1rem; +} + +.feature-card h3 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.75rem; + color: var(--text-primary); +} + +.feature-card p { + color: var(--text-secondary); + line-height: 1.5; +} + +/* Dark mode adjustments */ +[data-theme="dark"] .feature-card { + border-color: rgba(255, 255, 255, 0.1); + background: rgba(30, 41, 59, 0.8); +} + +@media (max-width: 768px) { + .feature-grid { + grid-template-columns: 1fr; + } + + .section-title { + font-size: 2rem; + } +} + +/* Footer Styles */ +.footer { + background: var(--card-background); + border-top: 1px solid rgba(0, 0, 0, 0.1); + padding: 4rem 2rem 2rem; + margin-top: 4rem; + width: 100%; + box-sizing: border-box; + box-shadow: none; +} + +[data-theme="dark"] .footer { + background: rgba(30, 41, 59, 0.8); + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.footer-content { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: 2fr 1fr 1fr; + gap: 3rem; + margin-bottom: 3rem; +} + +.footer-section h3 { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.footer-section h4 { + font-size: 1.1rem; + font-weight: 600; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.footer-description { + color: var(--text-secondary); + line-height: 1.6; + margin-bottom: 1rem; +} + +.footer-links, +.tech-stack-list { + list-style: none; + padding: 0; +} + +.footer-links li, +.tech-stack-list li { + margin-bottom: 0.75rem; +} + +.footer-links a, +.tech-stack-list a { + color: var(--text-secondary); + text-decoration: none; + display: flex; + align-items: center; + gap: 0.5rem; + transition: color 0.2s ease; +} + +.footer-links a:hover, +.tech-stack-list a:hover { + color: var(--primary-color); +} + +.footer-bottom { + max-width: 1200px; + margin: 0 auto; + padding-top: 2rem; + border-top: 1px solid rgba(0, 0, 0, 0.1); + text-align: center; + color: var(--text-secondary); +} + +[data-theme="dark"] .footer-bottom { + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.footer-bottom p { + margin-bottom: 0.5rem; +} + +.footer-bottom a { + color: var(--primary-color); + text-decoration: none; +} + +.footer-bottom a:hover { + text-decoration: underline; +} + +.heart { + color: #ff4b4b; + display: inline-block; + animation: heartbeat 1.5s ease infinite; +} + +.coffee { + display: inline-block; + animation: wiggle 1s ease infinite; +} + +@keyframes heartbeat { + + 0%, + 100% { + transform: scale(1); + } + + 50% { + transform: scale(1.1); + } +} + +@keyframes wiggle { + + 0%, + 100% { + transform: rotate(0deg); + } + + 25% { + transform: rotate(-10deg); + } + + 75% { + transform: rotate(10deg); + } +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .footer-content { + grid-template-columns: 1fr; + gap: 2rem; + } + + .footer { + padding: 3rem 1.5rem 1.5rem; + } +} + +/* Dark mode adjustments */ +[data-theme="dark"] .footer { + background: rgba(30, 41, 59, 0.8); + border-color: rgba(255, 255, 255, 0.1); +} + +/* Common card styles */ +.feature-card, +.step, +.faq-item { + background: var(--card-background); + border-radius: 12px; + border: 1px solid rgba(0, 0, 0, 0.1); + transition: transform 0.2s ease; + box-shadow: none; +} + +/* Dark mode specific adjustments */ +[data-theme="dark"] .feature-card, +[data-theme="dark"] .step, +[data-theme="dark"] .faq-item { + border-color: rgba(255, 255, 255, 0.1); + background: rgba(30, 41, 59, 0.8); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2); +} + +/* Hover states */ +.feature-card:hover, +.step:hover { + transform: translateY(-4px); + border-color: var(--primary-color); +} + +.faq-item.active { + border-color: var(--primary-color); +} + +/* Optional: Add subtle hover effect to nav links */ +.nav-links a { + position: relative; + padding-bottom: 2px; +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 2px; + background: var(--primary-color); + transition: width 0.3s ease; +} + +.nav-links a:hover::after { + width: 100%; } \ No newline at end of file