tool.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#0b0712">
  <script src="js/theme.js"></script>
  <meta name="description" content="Tool details for the TermuxVoid repository. Install security tools on Termux with APT or Pacman.">
  <title>Tool details — TermuxVoid</title>
  <link rel="icon" href="assets/favicon.png" type="image/png">
  <meta property="og:title" content="Tool details — TermuxVoid">
  <meta property="og:description" content="Install Termux security tools from the TermuxVoid repository.">
  <meta property="og:image" content="assets/logo.png">
  <meta property="og:type" content="website">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <header class="masthead">
    <div class="masthead__inner">
      <a class="masthead__brand" href="index.html">
        <span class="mark"><img src="assets/logo.png" alt="TermuxVoid logo" width="28" height="28"></span>
        <span class="wordmark">TermuxVoid</span>
      </a>
      <nav class="masthead__nav" id="navLinks" aria-label="Primary">
        <a href="index.html">Home</a>
        <a href="index.html#tools">Tools</a>
        <a href="index.html#installation">Install</a>
        <a href="index.html#faq">FAQ</a>
        <a href="index.html#support">Support</a>
      </nav>
      <button class="theme-toggle" type="button" aria-label="Switch theme"><span class="theme-ico"></span><span class="theme-lbl"></span></button>
      <button class="masthead__menu" id="menuBtn" type="button" aria-label="Toggle menu" aria-controls="navLinks" aria-expanded="false"><span></span><span></span><span></span></button>
    </div>
  </header>

  <main class="tool-page" id="toolDetail">
    <div class="loader loader--full"><span class="loader__spinner"></span><span>Opening tool record…</span></div>
  </main>
  <noscript><p class="noscript">JavaScript is required to open tool records.</p></noscript>

  <footer class="colophon">
    <div class="colophon__grid">
      <div class="colophon__brand">
        <a class="masthead__brand" href="index.html">
          <span class="mark"><img src="assets/logo.png" alt="" width="28" height="28"></span>
          <span class="wordmark">TermuxVoid</span>
        </a>
        <p>Security tools for Termux. Built for security researchers.</p>
      </div>
      <div>
        <h3>Site</h3>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="index.html#tools">Tools</a></li>
          <li><a href="index.html#installation">Installation</a></li>
          <li><a href="index.html#faq">FAQ</a></li>
        </ul>
      </div>
      <div>
        <h3>Resources</h3>
        <ul>
          <li><a href="https://github.com/termuxvoid/repo" target="_blank" rel="noopener">APT repository</a></li>
          <li><a href="https://github.com/termuxvoid/pacman-repo" target="_blank" rel="noopener">Pacman repository</a></li>
          <li><a href="https://github.com/TermuxVoid/repo/blob/main/assets/PACKAGES.md" target="_blank" rel="noopener">Package list</a></li>
        </ul>
      </div>
    </div>
    <div class="colophon__credits">
      © 2026 TermuxVoid · Maintained by <a href="https://github.com/Anon4You" target="_blank" rel="noopener">Alienkrishn</a>
    </div>
  </footer>

  <button class="back-to-top" id="backToTop" type="button" aria-label="Back to top">↑</button>

  <script src="js/packages.js"></script>
  <script src="assets/icons/manifest.js"></script>
  <script src="js/common.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', async () => {
      const container = document.getElementById('toolDetail');
      const toolName = new URLSearchParams(window.location.search).get('name');

      if (!toolName) {
        showError('No tool specified. Go back to the index and pick a tool.');
        return;
      }

      try {
        const packages = await PackagesParser.fetchPackages();
        const tool = packages.find((item) => item.name === toolName);

        if (!tool) {
          showError('Tool "' + toolName + '" was not found in the repository.');
          return;
        }

        document.title = tool.name + ' — TermuxVoid';
        const description = tool.description || 'No description on file.';
        const short = description.match(/^.*?[.!?](?:\s|$)/)?.[0] || description;
        const rest = description.startsWith(short) ? description.slice(short.length).trim() : '';
        const homepage = TV.safeUrl(tool.homepage);
        const groupKey = TV.groupKey(tool.section);
        const groupLabel = TV.groupLabel(tool.section);
        const command = TV.installCommand(tool.name);
        const deps = tool.depends ? tool.depends.split(',').map((item) => item.trim()).filter(Boolean) : [];
        const metaDescription = document.querySelector('meta[name="description"]');
        if (metaDescription) metaDescription.setAttribute('content', description.slice(0, 160));

        container.innerHTML = `
          <a class="detail__back" href="index.html">← All tools</a>

          <article class="tool-layout">
            <aside class="tool-aside" data-group="${groupKey}">
              <div class="tool-avatar"><img class="tool-icon" src="${TV.iconFor(tool.name)}" alt="" width="88" height="88"></div>
              <p class="tool-aside__name mono">${TV.escapeHtml(tool.name)}</p>
              <p class="tool-aside__version">v${TV.escapeHtml(tool.version)} <span>·</span> ${TV.escapeHtml(tool.architecture)}</p>

              <dl class="facts">
                <div><dt>Category</dt><dd>${TV.escapeHtml(groupLabel)}</dd></div>
                <div><dt>Section</dt><dd>${TV.escapeHtml(TV.sectionLabel(tool.section))}</dd></div>
                <div><dt>Size</dt><dd>${TV.formatSize(tool.size)}</dd></div>
                <div><dt>Maintainer</dt><dd>${TV.escapeHtml(tool.maintainer || '—')}</dd></div>
              </dl>

              <div class="aside-links">
                ${homepage ? `<a href="${TV.escapeHtml(homepage)}" target="_blank" rel="noopener">Homepage <span>↗</span></a>` : ''}
                <a href="https://github.com/termuxvoid/repo/tree/main/packages/${encodeURIComponent(tool.name)}/DEBIAN" target="_blank" rel="noopener">APT source <span>↗</span></a>
                <a href="https://github.com/termuxvoid/pacman-repo/tree/main/packages/${encodeURIComponent(tool.name)}" target="_blank" rel="noopener">Pacman source <span>↗</span></a>
                <a href="https://github.com/TermuxVoid/repo/blob/main/assets/PACKAGES.md" target="_blank" rel="noopener">Package list <span>↗</span></a>
              </div>
            </aside>

            <div class="tool-doc">
              <header class="doc-head">
                <span class="eyebrow">Tool record · ${TV.escapeHtml(groupLabel)}</span>
                <h1>${TV.escapeHtml(tool.name)}</h1>
                <p class="doc-lede">${TV.escapeHtml(short)}</p>
                <div class="doc-badges">
                  <span class="badge">v${TV.escapeHtml(tool.version)}</span>
                  <span class="badge">${TV.escapeHtml(tool.architecture || 'all')}</span>
                  <span class="badge" data-group="${groupKey}">${TV.escapeHtml(groupLabel)}</span>
                  <span class="badge">${TV.formatSize(tool.size)}</span>
                </div>
              </header>

              <section class="doc-block">
                <h2>Install</h2>
                <div class="cmdplate cmdplate--primary">
                  <div class="cmdplate__label">
                    <span>From the terminal</span>
                    <span class="idx">CMD</span>
                    <button class="cmdplate__copy" type="button" data-copy="${TV.escapeHtml(command)}">Copy</button>
                  </div>
                  <pre><code>$ ${TV.escapeHtml(command)}</code></pre>
                </div>
              </section>

              ${rest ? `
              <section class="doc-block">
                <h2>Description</h2>
                <p>${TV.escapeHtml(rest)}</p>
              </section>` : ''}

              ${deps.length ? `
              <section class="doc-block">
                <h2>Depends on</h2>
                <div class="ref-row">${deps.map((dep) => `<span class="ref-tag">${TV.escapeHtml(dep)}</span>`).join('')}</div>
              </section>` : ''}

              <div class="doc-actions">
                ${homepage ? `<a class="btn btn--ghost" href="${TV.escapeHtml(homepage)}" target="_blank" rel="noopener">Open homepage ↗</a>` : ''}
                <a class="btn btn--paper" href="index.html#tools">Back to all tools</a>
              </div>
            </div>
          </article>`;
      } catch (error) {
        showError('Could not open the tool record: ' + error.message, true);
      }

      function showError(message, retry) {
        container.innerHTML = `
          <a class="detail__back" href="index.html">← All tools</a>
          <div class="error-state">
            <span class="error-state__icon">!</span>
            <p class="error-state__msg">${TV.escapeHtml(message)}</p>
            ${retry ? '<button class="btn btn--small" type="button" data-action="reload">Try again</button>' : ''}
          </div>`;
      }
    });

    document.addEventListener('click', (event) => {
      if (event.target.closest('[data-action="reload"]')) window.location.reload();
    });
  </script>
</body>
</html>