downloads count

docs/index.html

@@ -53,19 +53,13 @@
       <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
+          <p class="hero-subtitle">A beautiful, lightning-fast cross-platform system monitor.</p>
-            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"
@@ -127,11 +121,11 @@
 
     <section id="download" class="downloads">
       <div class="download-container glass-card">
-        <h2>Download NeoHtop</h2>
+        <h2>Download NeoHtop <span id="current-version">Loading...</span></h2>
-        <p class="download-subtitle">Choose your platform to get started</p>
+        <div class="download-stats">
-        <div class="version-info">
+          <span id="download-count">...</span> Total Downloads
-          Current Version: <span id="current-version">Loading...</span>
         </div>
+        <p class="download-subtitle">Choose your platform to get started</p>
         <div class="download-options">
           <!-- macOS Downloads -->
           <div class="download-group">
@@ -402,68 +396,6 @@
       </p>
     </div>
   </footer>
-  <script>
-    async function updateVersion() {
-      try {
-        const response = await fetch('https://api.github.com/repos/Abdenasser/neohtop/releases/latest');
-        const data = await response.json();
-        const version = data.tag_name;
-
-        // Extract just the version number (e.g., "1.0.6" from "macos-nightly-1.0.6")
-        const versionNumber = version.match(/\d+\.\d+\.\d+/)?.[0];
-        document.getElementById('current-version').textContent = versionNumber;
-
-        if (versionNumber) {
-          // Update all download URLs with the latest version
-          const downloadLinks = document.querySelectorAll('.download-button');
-          downloadLinks.forEach(link => {
-            const platform = link.getAttribute('data-type');
-            let newHref;
-
-            switch (platform) {
-              case 'macos-intel':
-                newHref = `https://github.com/Abdenasser/neohtop/releases/download/v${versionNumber}/intel-NeoHtop_${versionNumber}_x64.dmg`;
-                break;
-              case 'macos-silicon':
-                newHref = `https://github.com/Abdenasser/neohtop/releases/download/v${versionNumber}/silicon-NeoHtop_${versionNumber}_aarch64.dmg`;
-                break;
-              case 'windows':
-                newHref = `https://github.com/Abdenasser/neohtop/releases/download/v${versionNumber}/NeoHtop_${versionNumber}_x64.exe`;
-                break;
-              case 'linux-deb-x64':
-                newHref = `https://github.com/Abdenasser/neohtop/releases/download/v${versionNumber}/NeoHtop_${versionNumber}_x86_64.deb`;
-                break;
-              case 'linux-appimage-x64':
-                newHref = `https://github.com/Abdenasser/neohtop/releases/download/v${versionNumber}/NeoHtop_${versionNumber}_x86_64.AppImage`;
-                break;
-              case 'linux-rpm-x64':
-                newHref = `https://github.com/Abdenasser/neohtop/releases/download/v${versionNumber}/NeoHtop_${versionNumber}_x86_64.rpm`;
-                break;
-              case 'linux-deb-arm64':
-                newHref = `https://github.com/Abdenasser/neohtop/releases/download/v${versionNumber}/NeoHtop_${versionNumber}_aarch64.deb`;
-                break;
-              case 'linux-appimage-arm64':
-                newHref = `https://github.com/Abdenasser/neohtop/releases/download/v${versionNumber}/NeoHtop_${versionNumber}_aarch64.AppImage`;
-                break;
-              case 'linux-rpm-arm64':
-                newHref = `https://github.com/Abdenasser/neohtop/releases/download/v${versionNumber}/NeoHtop_${versionNumber}_aarch64.rpm`;
-                break;
-            }
-
-            if (newHref) {
-              link.href = newHref;
-            }
-          });
-        }
-      } catch (error) {
-        console.error('Failed to fetch version:', error);
-      }
-    }
-
-    document.addEventListener('DOMContentLoaded', () => {
-      updateVersion();
-    });
-  </script>
 </body>
 
 </html>

docs/main.js

@@ -1,4 +1,6 @@
+// ===============================
 // Theme Management
+// ===============================
 const themeToggle = document.getElementById('themeToggle');
 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
 
@@ -16,77 +18,136 @@ if (savedTheme) {
   setTheme(prefersDark.matches);
 }
 
-// Theme toggle button
+// Theme event listeners
 themeToggle.addEventListener('click', () => {
   const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
   setTheme(!isDark);
 });
 
-// System theme changes
 prefersDark.addEventListener('change', (e) => {
   if (!localStorage.getItem('theme')) {
     setTheme(e.matches);
   }
 });
 
+// ===============================
+// Version and Download Management
+// ===============================
+async function fetchDownloadStats() {
+  try {
+    const releasesResponse = await fetch('https://api.github.com/repos/abdenasser/neohtop/releases');
+    const releases = await releasesResponse.json();
+    const githubDownloads = releases.reduce((total, release) => {
+      const releaseDownloads = release.assets.reduce((sum, asset) =>
+        sum + asset.download_count, 0);
+      return total + releaseDownloads;
+    }, 0);
+
+    const brewResponse = await fetch('https://formulae.brew.sh/api/analytics/install/homebrew-core/365d.json');
+    const brewData = await brewResponse.json();
+    const brewInstalls = brewData.formulae?.neohtop?.[0]?.count || 0;
+
+    const totalDownloads = githubDownloads + brewInstalls;
+    document.getElementById('download-count').textContent = new Intl.NumberFormat().format(totalDownloads);
+  } catch (error) {
+    console.error('Failed to fetch download stats:', error);
+    document.getElementById('download-count').textContent = 'N/A';
+  }
+}
+
+async function updateVersion() {
+  try {
+    const response = await fetch('https://api.github.com/repos/Abdenasser/neohtop/releases/latest');
+    const data = await response.json();
+    const version = data.tag_name;
+    const versionNumber = version.match(/\d+\.\d+\.\d+/)?.[0];
+
+    if (versionNumber) {
+      document.getElementById('current-version').textContent = "v" + versionNumber;
+      updateDownloadLinks(versionNumber);
+    }
+  } catch (error) {
+    console.error('Failed to fetch version:', error);
+  }
+}
+
+function updateDownloadLinks(versionNumber) {
+  const platformUrls = {
+    'macos-intel': `intel-NeoHtop_${versionNumber}_x64.dmg`,
+    'macos-silicon': `silicon-NeoHtop_${versionNumber}_aarch64.dmg`,
+    'windows': `NeoHtop_${versionNumber}_x64.exe`,
+    'linux-deb-x64': `NeoHtop_${versionNumber}_x86_64.deb`,
+    'linux-appimage-x64': `NeoHtop_${versionNumber}_x86_64.AppImage`,
+    'linux-rpm-x64': `NeoHtop_${versionNumber}_x86_64.rpm`,
+    'linux-deb-arm64': `NeoHtop_${versionNumber}_aarch64.deb`,
+    'linux-appimage-arm64': `NeoHtop_${versionNumber}_aarch64.AppImage`,
+    'linux-rpm-arm64': `NeoHtop_${versionNumber}_aarch64.rpm`
+  };
+
+  document.querySelectorAll('.download-button').forEach(link => {
+    const platform = link.getAttribute('data-type');
+    if (platformUrls[platform]) {
+      link.href = `https://github.com/Abdenasser/neohtop/releases/download/v${versionNumber}/${platformUrls[platform]}`;
+    }
+  });
+}
+
+// ===============================
+// UI Interactions
+// ===============================
 // FAQ Accordion
 document.querySelectorAll('.faq-question').forEach(button => {
   button.addEventListener('click', () => {
     const faqItem = button.parentElement;
     const isActive = faqItem.classList.contains('active');
-
+    document.querySelectorAll('.faq-item').forEach(item => item.classList.remove('active'));
-    // Close all FAQ items
+    if (!isActive) faqItem.classList.add('active');
-    document.querySelectorAll('.faq-item').forEach(item => {
-      item.classList.remove('active');
-    });
-
-    // Toggle clicked item
-    if (!isActive) {
-      faqItem.classList.add('active');
-    }
   });
 });
 
 // Download tracking
 document.querySelectorAll('.download-button').forEach(button => {
   button.addEventListener('click', (e) => {
-    const version = button.getAttribute('data-version');
-    const type = button.getAttribute('data-type');
-
-    // Google Analytics event
     gtag('event', 'download', {
       'event_category': 'App',
-      'event_label': type,
+      'event_label': button.getAttribute('data-type'),
-      'value': version
+      'value': button.getAttribute('data-version')
     });
   });
 });
 
-// Smooth scroll for navigation
+// Smooth scroll
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
   anchor.addEventListener('click', function (e) {
     e.preventDefault();
     const target = document.querySelector(this.getAttribute('href'));
     if (target) {
-      target.scrollIntoView({
+      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        behavior: 'smooth',
-        block: 'start'
-      });
     }
   });
 });
-
+// ===============================
-// Intersection Observer for animations
+// Animations
-const observer = new IntersectionObserver((entries) => {
+// ===============================
-  entries.forEach(entry => {
+const observer = new IntersectionObserver(
-    if (entry.isIntersecting) {
+  (entries) => {
-      entry.target.classList.add('visible');
+    entries.forEach(entry => {
-    }
+      if (entry.isIntersecting) {
-  });
+        entry.target.classList.add('visible');
-}, {
+      }
-  threshold: 0.1
+    });
-});
+  },
+  { threshold: 0.1 }
+);
 
 document.querySelectorAll('.feature, .step, .download-button').forEach(el => {
   observer.observe(el);
 });
+
+// ===============================
+// Initialization
+// ===============================
+document.addEventListener('DOMContentLoaded', () => {
+  updateVersion();
+  fetchDownloadStats();
+});

docs/styles.css

@@ -226,12 +226,6 @@ section {
   animation: float 6s ease-in-out infinite;
 }
 
-.tech-stack {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
 /* Responsive design */
 @media (max-width: 1024px) {
   .hero {
@@ -1354,4 +1348,82 @@ footer {
 #current-version {
   font-weight: 600;
   color: var(--primary-color);
+}
+
+/* Download Section Responsive Styles */
+@media (max-width: 768px) {
+  .download-options {
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .download-group {
+    width: 100%;
+  }
+
+  .platform-options {
+    flex-direction: column;
+  }
+
+  .download-button {
+    width: 100%;
+    margin: 0.5rem 0;
+  }
+
+  .linux-downloads {
+    width: 100%;
+    margin-top: 1rem;
+  }
+
+  .linux-downloads h4 {
+    margin-bottom: 0.5rem;
+  }
+
+  /* Adjust text size for better readability on mobile */
+  .button-text .primary {
+    font-size: 0.9rem;
+  }
+
+  .button-text .secondary {
+    font-size: 0.8rem;
+  }
+}
+
+/* Extra small devices */
+@media (max-width: 480px) {
+  .download-container {
+    padding: 1rem;
+  }
+
+  .download-stats {
+    font-size: 0.9rem;
+  }
+
+  .platform-title {
+    font-size: 1.2rem;
+  }
+}
+
+.download-stats {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: rgba(var(--primary-color-rgb), 0.1);
+  border-radius: 6px;
+  margin: 1rem 0;
+  font-size: 0.9rem;
+}
+
+#download-count {
+  font-weight: bold;
+  color: var(--primary-color);
+  font-size: 1.1rem;
+}
+
+/* Adjust the existing download-subtitle margin */
+.download-subtitle {
+  color: var(--text-secondary);
+  margin-bottom: 2rem;
+  margin-top: 0.5rem;
 }