anonymous_github/public/partials/home.htm

<div class="paper-landing">
  <!-- Hero -->
  <section class="paper-hero">
    <div class="paper-eyebrow">For double-blind peer review</div>
    <h1 class="hero-title">
      Share the code,<br />
      <span class="accent">not the author.</span>
    </h1>
    <p class="hero-subtitle">
      Anonymous GitHub makes a read-only mirror of your repository or pull
      request with every trace of identity removed &mdash; so you can attach a
      link to your submission without breaking anonymity.
    </p>

    <div class="paper-cta-row">
      <span ng-if="!user">
        <a href="/github/login" target="_self" class="btn-hero">
          <i class="fab fa-github mr-2"></i>Sign in with GitHub
        </a>
      </span>
      <span ng-if="user">
        <a href="/anonymize" class="btn-hero">
          Anonymize a repository &rarr;
        </a>
      </span>
      <a href="/anonymize" ng-if="user" class="btn-hero-ghost">
        Anonymize a pull request
      </a>
      <span class="meta">Free &middot; Open source &middot; Self-hostable</span>
    </div>

    <!-- Before / after -->
    <div class="paper-preview" aria-label="Before and after example">
      <div class="pane">
        <div class="pane-header">
          <span class="pane-label">Before &middot; your repo</span>
          <span class="pane-url">github.com/jane-smith/DeepLearnUtils</span>
        </div>
        <div class="pane-body">
          <div><span class="tok">#</span> <strong>DeepLearnUtils</strong></div>
          <div>Developed by Jane Smith at MIT CSAIL.</div>
          <div>See Smith et&nbsp;al., &ldquo;Attention That Works,&rdquo; 2026.</div>
          <div>Contact: jane.smith@mit.edu</div>
        </div>
      </div>
      <div class="pane">
        <div class="pane-header">
          <span class="pane-label">After &middot; anonymous mirror</span>
          <span class="pane-url">anonymous.4open.science/r/paper-7f2a</span>
        </div>
        <div class="pane-body">
          <div><span class="tok">#</span> <strong>DeepLearnUtils</strong></div>
          <div>Developed by <span class="redact">Jane Smith</span> at <span class="redact">MIT CSAIL</span>.</div>
          <div>See <span class="redact">Smith et al.</span>, &ldquo;Attention That Works,&rdquo; 2026.</div>
          <div>Contact: <span class="redact">jane.smith@mit.edu</span></div>
        </div>
      </div>
    </div>
  </section>

  <!-- Stats strip -->
  <section class="paper-stats" id="metrics">
    <div class="paper-stats-inner">
      <div class="paper-stats-meta">
        <div class="paper-stats-meta-left">LIVE &middot; LAST 60 DAYS</div>
        <div class="paper-stats-meta-right">
          updated daily &middot;
          <span class="paper-stats-dot"></span> in sync
        </div>
      </div>
      <div class="paper-stats-grid">
        <div class="paper-stat-card" ng-repeat="card in cards track by card.key">
          <div class="paper-stat-value">{{card.total | bigNum}}</div>
          <div class="paper-stat-label">{{card.label}}</div>
          <svg class="paper-stat-bars" preserveAspectRatio="none"
               ng-attr-viewBox="0 0 {{history[card.key].viewW}} 36"
               ng-if="history[card.key].bars.length > 1">
            <rect ng-repeat="b in history[card.key].bars track by $index"
                  ng-attr-x="{{b.x}}" ng-attr-y="{{b.y}}"
                  ng-attr-width="{{b.w}}" ng-attr-height="{{b.h}}"
                  ng-class="{'is-latest': $last}"/>
          </svg>
          <div class="paper-stat-delta" ng-if="history[card.key].bars.length > 1">
            <span class="paper-stat-today">+{{history[card.key].deltaToday | number}} today</span>
            <span class="paper-stat-sep">&middot;</span>
            <span class="paper-stat-pct"
                  ng-class="{'is-up': history[card.key].isUp, 'is-down': !history[card.key].isUp}">
              <span class="paper-stat-arrow">{{history[card.key].isUp ? '▲' : '▼'}}</span>
              {{history[card.key].pctAbs}}%
            </span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- How it works -->
  <section class="paper-how" id="usage">
    <div>
      <div class="paper-eyebrow">How it works</div>
      <h2 class="paper-how-heading">
        Three steps,<br />about a minute.
      </h2>
    </div>
    <div>
      <div class="paper-step">
        <div class="step-num">01</div>
        <div>
          <div class="step-title">Authenticate</div>
          <div class="step-desc">
            <a href="/github/login" target="_self">Sign in with GitHub</a> to
            access your dashboard. Anonymous GitHub only ever reads your
            repositories &mdash; we never push, modify, or delete anything.
            GitHub may display a broader scope at sign-in because its OAuth
            scopes don't offer read-only access to private repositories
            (<a href="/faq#permissions">see FAQ</a>).
          </div>
        </div>
      </div>
      <div class="paper-step">
        <div class="step-num">02</div>
        <div>
          <div class="step-title">Configure</div>
          <div class="step-desc">
            Point us at a repo, branch, commit, or pull request. List the
            terms to redact (names, affiliation, emails). Set an expiry.
          </div>
        </div>
      </div>
      <div class="paper-step">
        <div class="step-num">03</div>
        <div>
          <div class="step-title">Share</div>
          <div class="step-desc">
            You get a stable link with a randomised slug. Reviewers browse,
            diff, and download &mdash; never seeing who you are.
          </div>
        </div>
      </div>
      <div class="paper-step" style="border-top: none;">
        <div class="step-num">&nbsp;</div>
        <div>
          <div class="step-desc">
            Example:
            <a
              target="_self"
              href="https://anonymous.4open.science/r/840c8c57-3c32-451e-bf12-0e20be300389/"
              >anonymous.4open.science/r/840c8c57-3c32-451e-bf12-0e20be300389</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Trust row -->
  <section class="paper-trust">
    <div class="paper-trust-inner">
      <div>
        <div class="paper-eyebrow">Trusted by the community</div>
        <div class="paper-trust-lede">
          Used by authors submitting to major software-engineering and systems
          venues.
        </div>
      </div>
      <div class="paper-trust-item">
        <div class="short">ICSE</div>
        <div class="long">International Conference on Software Engineering</div>
      </div>
      <div class="paper-trust-item">
        <div class="short">FSE</div>
        <div class="long">Foundations of Software Engineering</div>
      </div>
      <div class="paper-trust-item">
        <div class="short">OOPSLA</div>
        <div class="long">
          Object-Oriented Programming, Systems, Languages, and Applications
        </div>
      </div>
    </div>
  </section>

  <!-- Featurettes — existing content, kept but restyled -->
  <main class="container home-content" id="about">
    <div class="row featurette align-items-center">
      <div class="col-md-7 order-md-2">
        <h2 class="featurette-heading">Double-anonymous</h2>
        <p class="featurette-lead">
          Anonymize your GitHub repository with options to remove links,
          images, or specific terms. Keep full control &mdash; set an
          expiration date to make your repository unavailable after review.
        </p>
      </div>
      <div class="col-md-5 order-md-1">
        <img
          width="500"
          loading="lazy"
          src="/imgs/anonymize.png"
          class="featurette-image img-fluid mx-auto"
          alt="Anonymize form"
        />
      </div>
    </div>

    <hr class="featurette-divider" />

    <div class="row featurette align-items-center">
      <div class="col-md-7">
        <h2 class="featurette-heading">Explorer</h2>
        <p class="featurette-lead">
          Reviewers can browse your repository with highlighted source code,
          rendered PDFs, images, and notebooks.
          <a href="https://pages.github.com">GitHub Pages</a> is also supported.
        </p>
      </div>
      <div class="col-md-5">
        <img
          width="500"
          loading="lazy"
          src="/imgs/explorer.png"
          class="featurette-image img-fluid mx-auto"
          alt="Repository explorer"
        />
      </div>
    </div>

    <hr class="featurette-divider" />

    <div class="row featurette align-items-center">
      <div class="col-md-7 order-md-2">
        <h2 class="featurette-heading">Manage</h2>
        <p class="featurette-lead">
          Monitor views, edit configuration, remove or update your repository
          &mdash; all from a clean dashboard.
        </p>
      </div>
      <div class="col-md-5 order-md-1">
        <img
          width="500"
          loading="lazy"
          src="/imgs/dashboard.png"
          class="featurette-image img-fluid mx-auto"
          alt="Dashboard"
        />
      </div>
    </div>
  </main>

  <footer class="paper-footer">
    <div class="paper-footer-inner">
      <div class="paper-footer-brand">
        <div class="paper-footer-mark">Anonymous <em>GitHub</em></div>
        <p class="paper-footer-tag">
          A read-only, identity-stripped mirror of your repository &mdash;
          built for double-blind peer review.
        </p>
      </div>
      <div class="paper-footer-col">
        <div class="paper-footer-head">Product</div>
        <a href="/anonymize">Anonymize</a>
        <a href="/dashboard" ng-if="user">My work</a>
        <a href="/conferences" ng-if="user">Conferences</a>
        <a href="/faq">FAQ</a>
      </div>
      <div class="paper-footer-col">
        <div class="paper-footer-head">Project</div>
        <a href="https://github.com/tdurieux/anonymous_github/" target="_blank">Source code</a>
        <a href="https://github.com/tdurieux/anonymous_github/issues/new" target="_blank">Report an issue</a>
        <a href="https://github.com/sponsors/tdurieux/" target="_blank">Sponsor</a>
      </div>
      <div class="paper-footer-col">
        <div class="paper-footer-head">Contact</div>
        <a href="mailto:tdurieux@anonymous.4open.science">Email maintainer</a>
        <a href="https://github.com/tdurieux" target="_blank">@tdurieux</a>
      </div>
    </div>
    <div class="paper-footer-rule"></div>
    <div class="paper-footer-foot">
      <span>&copy; {{year || 2026}} Anonymous GitHub &middot; MIT licensed</span>
      <span class="paper-footer-meta">Built for reviewers, by researchers.</span>
    </div>
  </footer>
</div>