index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Review the public-facing readiness of a GitHub repository through clear, read-only checks.">
    <meta name="referrer" content="no-referrer">
    <meta name="color-scheme" content="light dark">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src https://api.github.com; img-src 'self' data:; style-src 'self'; script-src 'self'; font-src 'self'; object-src 'none'; base-uri 'none'; form-action 'self'">
    <title>Vettmark</title>
    <link rel="icon" href="assets/logo.svg" type="image/svg+xml">
    <link rel="stylesheet" href="src/styles.css">
    <script type="module" src="src/app.js"></script>
  </head>
  <body>
    <a class="skip-link" href="#main-content">Skip to main content</a>

    <div class="app-shell">
      <header class="site-header">
        <a class="brand" href="./" aria-label="Vettmark home">
          <img src="assets/logo.svg" width="36" height="36" alt="">
          <span>Vettmark</span>
        </a>

        <nav class="primary-navigation" aria-label="Primary navigation">
          <a href="docs/METHOD.md">Method</a>
          <a href="https://github.com/KSAGlory/Vettmark" target="_blank" rel="noopener noreferrer">GitHub</a>
          <button class="theme-button" id="theme-button" type="button" aria-label="Use dark appearance" aria-pressed="false">
            <svg class="moon-icon" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M20.2 15.4A8.5 8.5 0 0 1 8.6 3.8 8.5 8.5 0 1 0 20.2 15.4Z"/>
            </svg>
            <svg class="sun-icon" viewBox="0 0 24 24" aria-hidden="true">
              <circle cx="12" cy="12" r="4"/>
              <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>
            </svg>
          </button>
        </nav>
      </header>

      <main id="main-content">
        <section class="hero" aria-labelledby="page-title">
          <div class="hero-copy">
            <p class="eyebrow">PUBLIC REPOSITORY REVIEW</p>
            <h1 id="page-title">Make your repository ready to share.</h1>
            <p class="hero-description">Review documentation, contributor guidance, security contacts, releases, and maintenance signals using public GitHub data.</p>
          </div>

          <form class="repository-form" id="repository-form" novalidate>
            <label for="repository-input">GitHub repository</label>
            <div class="form-row">
              <span class="repository-input-wrap">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M12 2a10 10 0 0 0-3.2 19.5c.5.1.7-.2.7-.5v-1.9c-2.8.6-3.4-1.2-3.4-1.2-.5-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 0 1.6 1.1 1.6 1.1.9 1.6 2.4 1.1 2.9.9.1-.7.4-1.1.7-1.4-2.2-.3-4.6-1.1-4.6-5A3.9 3.9 0 0 1 6.7 8.6c-.1-.3-.5-1.3.1-2.8 0 0 .9-.3 2.8 1.1a9.6 9.6 0 0 1 5.1 0c2-1.4 2.8-1.1 2.8-1.1.6 1.5.2 2.5.1 2.8a3.9 3.9 0 0 1 1.1 2.8c0 3.9-2.4 4.7-4.6 5 .4.3.7 1 .7 2V21c0 .3.2.6.7.5A10 10 0 0 0 12 2Z"/>
                </svg>
                <input id="repository-input" name="repository" type="text" inputmode="url" autocomplete="off" autocapitalize="none" spellcheck="false" maxlength="300" placeholder="owner/repository" aria-describedby="repository-help repository-error">
              </span>
              <button class="primary-button" type="submit">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <circle cx="11" cy="11" r="7"/>
                  <path d="m20 20-4-4M11 8v6M8 11h6"/>
                </svg>
                Analyze repository
              </button>
            </div>
            <p class="field-help" id="repository-help">Enter a public repository URL or owner/repository. No sign-in or token required.</p>
            <p class="form-error" id="repository-error" role="alert" hidden></p>
          </form>
        </section>

        <section class="state-panel ready-panel" id="ready-panel" aria-labelledby="ready-title">
          <span class="state-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24">
              <path d="M3 7.5A2.5 2.5 0 0 1 5.5 5H10l2 2h6.5A2.5 2.5 0 0 1 21 9.5v7a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 16.5Z"/>
              <circle cx="13.5" cy="13" r="3"/>
              <path d="m16 15.5 2 2"/>
            </svg>
          </span>
          <h2 id="ready-title">Ready when you are</h2>
          <p>Enter a public GitHub repository above to begin a read-only review.</p>
        </section>

        <section class="state-panel loading-panel" id="loading-panel" aria-live="polite" aria-label="Analyzing repository" hidden>
          <span class="loading-indicator" aria-hidden="true"></span>
          <h2>Connecting to GitHub</h2>
          <p>Retrieving public repository information.</p>
        </section>

        <section class="connection-result" id="connection-result" aria-labelledby="connection-title" tabindex="-1" hidden>
          <header class="result-heading">
            <div>
              <p class="success-status" id="report-status"><span aria-hidden="true"></span><span id="report-status-text">Review complete</span></p>
              <h2 id="connection-title">Repository report</h2>
              <p id="connection-description"></p>
            </div>
            <button class="secondary-button" id="new-review-button" type="button">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/></svg>
              New review
            </button>
          </header>

          <div class="report-overview">
            <article class="score-card" aria-labelledby="score-rating">
              <p class="eyebrow">READINESS RESULT</p>
              <div class="score-line">
                <strong id="score-value">0</strong>
                <span id="score-total">/ 100</span>
              </div>
              <h3 id="score-rating">Repository readiness result</h3>
              <p id="score-summary"></p>
              <progress class="score-progress" id="score-progress" aria-label="Repository readiness score" max="100" value="0">0</progress>
              <dl class="score-facts">
                <div><dt>Essentials detected</dt><dd id="detected-count"></dd></div>
                <div><dt>Recommendations</dt><dd id="recommendation-count"></dd></div>
                <div><dt>API requests</dt><dd id="request-count"></dd></div>
              </dl>
            </article>

            <article class="repository-card" aria-labelledby="repository-details-title">
              <h3 id="repository-details-title">Repository details</h3>
              <dl class="repository-details">
              <div>
                <dt>Visibility</dt>
                <dd id="detail-visibility"></dd>
              </div>
              <div>
                <dt>Default branch</dt>
                <dd id="detail-branch"></dd>
              </div>
              <div>
                <dt>Latest activity</dt>
                <dd id="detail-updated"></dd>
              </div>
              <div>
                <dt>API allowance</dt>
                <dd id="detail-rate-limit"></dd>
              </div>
              </dl>
              <a class="secondary-button repository-link" id="repository-link" href="https://github.com" target="_blank" rel="noopener noreferrer">
                Open repository
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 5h5v5M10 14 19 5M19 13v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5"/></svg>
              </a>
            </article>
          </div>

          <aside class="incomplete-notice" id="incomplete-notice" aria-labelledby="incomplete-title" hidden>
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 8v5M12 17h.01"/><path d="M10.3 3.7 2.6 17a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 3.7a2 2 0 0 0-3.4 0Z"/></svg>
            <div><h3 id="incomplete-title">Some checks are unavailable</h3><p id="incomplete-description"></p></div>
          </aside>

          <div class="analysis-grid">
            <section class="report-card recommendations-card" aria-labelledby="recommendations-title">
              <div class="card-heading">
                <div><p class="eyebrow">NEXT ACTIONS</p><h3 id="recommendations-title">Prioritized recommendations</h3></div>
                <span class="count-badge" id="recommendation-badge"></span>
              </div>
              <div class="recommendation-list" id="recommendation-list"></div>
            </section>

            <section class="report-card category-card" aria-labelledby="categories-title">
              <div class="card-heading"><div><p class="eyebrow">SCORE DETAILS</p><h3 id="categories-title">Category breakdown</h3></div></div>
              <div class="category-list" id="category-list"></div>
            </section>

            <section class="report-card strengths-card" aria-labelledby="strengths-title">
              <div class="card-heading"><div><p class="eyebrow">DETECTED</p><h3 id="strengths-title">Repository strengths</h3></div></div>
              <ul class="strength-list" id="strength-list"></ul>
            </section>
          </div>
        </section>

        <section class="state-panel error-panel" id="error-panel" role="alert" aria-labelledby="error-title" hidden>
          <span class="state-icon error-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24"><path d="M12 8v5M12 17h.01"/><path d="M10.3 3.7 2.6 17a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 3.7a2 2 0 0 0-3.4 0Z"/></svg>
          </span>
          <div>
            <p class="eyebrow">REPOSITORY CHECK</p>
            <h2 id="error-title">The repository could not be checked</h2>
            <p id="request-error"></p>
            <p id="rate-limit-reset" hidden></p>
          </div>
          <button class="secondary-button" id="try-again-button" type="button">Try again</button>
        </section>

        <section class="privacy-note" aria-labelledby="privacy-title">
          <span aria-hidden="true">
            <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></svg>
          </span>
          <div>
            <h2 id="privacy-title">Public data only</h2>
            <p>This application is read-only. Repository information is requested directly from GitHub and is not stored by Vettmark.</p>
          </div>
        </section>
      </main>

      <footer class="site-footer">
        <p>Vettmark provides advisory repository-readiness guidance and does not inspect source code.</p>
        <div>
          <span>Author: KSAGlory</span>
          <a href="https://discord.gg/ksahub" target="_blank" rel="noopener noreferrer">Community: discord.gg/ksahub</a>
        </div>
      </footer>
    </div>
  </body>
</html>