anonymous_github/public/partials/home.htm

<div class="paper-landing">
  <!-- Hero: copy on the left, the product on the right -->
  <section class="paper-hero">
    <div class="paper-hero-copy">
      <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, pull
        request, or gist with every trace of identity removed, so you can
        attach a link to your submission without breaking anonymity.
      </p>

      <div class="paper-cta-row">
        <a href="/github/login" target="_self" class="btn-hero" v-if="!user">
          <i class="fab fa-github mr-2" aria-hidden="true"></i>Sign in with GitHub
        </a>
        <a href="/anonymize" class="btn-hero" v-if="user">
          Anonymize a repository &rarr;
        </a>
        <a class="paper-link-arrow" target="_self" href="https://anonymous.4open.science/r/840c8c57-3c32-451e-bf12-0e20be300389/">See an anonymized repository &rarr;</a>
      </div>
      <ul class="paper-reassure">
        <li>Free and open source</li>
        <li>Read-only: never writes to your repos</li>
        <li>Expires on the date you set</li>
      </ul>
    </div>
    <div class="paper-hero-shot">
      <div class="paper-frame">
        <div class="paper-frame-bar" aria-hidden="true">
          <span class="dots"><i></i><i></i><i></i></span>
          <span class="url">anonymous.4open.science/anonymize</span>
        </div>
        <img src="/imgs/anonymize.png" width="2880" height="1800" alt="The anonymize form with a live README preview showing the redactions">
      </div>
    </div>
  </section>

  <!-- Proof -->
  <section class="paper-proof paper-wrap" aria-label="Venues">
    <div class="paper-eyebrow">Trusted by authors at</div>
    <div class="paper-proof-venues">
      <span>ICSE</span><i aria-hidden="true">&middot;</i>
      <span>FSE</span><i aria-hidden="true">&middot;</i>
      <span>OOPSLA</span>
    </div>
  </section>

  <!-- Live stats -->
  <section class="paper-stats paper-wrap" id="metrics" aria-label="Usage over the last 60 days">
    <div class="paper-stats-meta">
      <div class="paper-stats-meta-left">Live &middot; last 60 days</div>
      <div class="paper-stats-meta-right">
        <span class="paper-stats-dot" aria-hidden="true"></span> updated daily
      </div>
    </div>
    <div class="paper-stats-grid">
      <div class="paper-stat-card" v-for="(card, index) in cards" :key="card?.key">
        <div class="paper-stat-value">{{ fmt?.bigNum(card?.total) }}</div>
        <div class="paper-stat-label">{{ card?.label }}</div>
        <svg class="paper-stat-bars" preserveAspectRatio="none" aria-hidden="true" v-if="history[card?.key].bars?.length &gt; 1" :viewBox="&quot;0 0 &quot; + (history[card?.key].viewW) + &quot; 36&quot;">
          <rect v-for="(b, index) in history[card?.key].bars" :key="index" :class="{&#x27;is-latest&#x27;: index === history[card.key].bars.length - 1}" :x="(b?.x)" :y="(b?.y)" :width="(b?.w)" :height="(b?.h)"></rect>
        </svg>
        <div class="paper-stat-delta" v-if="history[card?.key].bars?.length &gt; 1">
          +{{ fmt?.number(history[card?.key].deltaToday) }} today
        </div>
      </div>
    </div>
  </section>

  <!-- Before / after -->
  <section class="paper-section-head paper-wrap">
    <div>
      <div class="paper-eyebrow">Before &middot; after</div>
      <h2>The same repository, <em>minus you.</em></h2>
    </div>
    <p>
      Names, affiliations, emails, and any term you list are replaced across
      the README, source files, notebooks, and PDF links. Reviewers browse the
      real thing, not a zip.
    </p>
  </section>
  <div class="paper-preview paper-wrap" 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" role="img" aria-label="redacted author name">XXXX-1</span> at <span class="redact" role="img" aria-label="redacted affiliation">XXXX-2</span>.</div>
        <div>See <span class="redact" role="img" aria-label="redacted author name">XXXX-1</span> et&nbsp;al., &ldquo;Attention That Works,&rdquo; 2026.</div>
        <div>Contact: <span class="redact" role="img" aria-label="redacted email address">XXXX-3</span></div>
      </div>
    </div>
  </div>

  <!-- What you get: one screenshot, three tabs -->
  <section class="paper-section-head paper-wrap" id="about">
    <div>
      <div class="paper-eyebrow">What you get</div>
      <h2>Anonymize, review, <em>manage.</em></h2>
    </div>
    <p>
      Every mirror is read-only and passes through the same filter, from the
      README to a PDF's link targets. Monitor it, update it, or remove it the
      day the decision is out.
    </p>
  </section>
  <section class="paper-features paper-wrap" aria-label="Product features">
    <div class="paper-features-list" role="tablist" aria-label="Features" aria-orientation="vertical">
      <div class="paper-feature" v-for="(f, index) in features" :key="f?.key" :class="{&#x27;is-on&#x27;: feature === f?.key}">
        <button type="button" class="paper-feature-tab" role="tab" @click="selectFeature(f.key)" @keydown="featureKeydown($event, index)" :id="&quot;feature-tab-&quot; + (f?.key)" :aria-controls="&quot;feature-panel-&quot; + (f?.key)" :aria-selected="(feature === f?.key)" :tabindex="(feature === f?.key ? 0 : -1)">
          <span class="paper-eyebrow">{{ f?.num }} &middot; {{ f?.eyebrow }}</span>
          <span class="paper-feature-title">{{ f?.title }} <em>{{ f?.accent }}</em></span>
        </button>
        <div class="paper-feature-more">
          <span class="paper-feature-title paper-feature-title-m" aria-hidden="true">{{ f?.title }} <em>{{ f?.accent }}</em></span>
          <p>{{ f?.text }}</p>
          <a class="paper-link-arrow" :href="safeUrl((featureHref(f)))" :target="(featureTarget(f))">{{ f?.cta }} &rarr;</a>
        </div>
      </div>
    </div>
    <div class="paper-features-stage">
      <div class="paper-feature-panel" role="tabpanel" v-for="(f, index) in features" :key="f?.key" v-show="feature === f?.key" :id="&quot;feature-panel-&quot; + (f?.key)" :aria-labelledby="&quot;feature-tab-&quot; + (f?.key)">
        <div class="paper-frame">
          <div class="paper-frame-bar" aria-hidden="true">
            <span class="dots"><i></i><i></i><i></i></span>
            <span class="url">{{ f?.url }}</span>
          </div>
          <div :class="&quot;paper-crop paper-crop-&quot; + (f?.key)">
            <img loading="lazy" width="2880" height="1800" :src="safeUrl((f?.img))" :alt="(f?.alt)">
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- FAQ teaser -->
  <section class="paper-qa paper-wrap" aria-labelledby="qa-heading">
    <div>
      <div class="paper-eyebrow">Before you sign in</div>
      <h2 id="qa-heading">The questions that <em>come up most.</em></h2>
      <a class="paper-link-arrow" href="/faq">Read the full FAQ &rarr;</a>
    </div>
    <div>
      <div class="q">
        <a href="/faq#howWork">Why does GitHub ask for write access at sign-in?</a>
        <p>
          GitHub's OAuth scopes have no read-only option for private
          repositories. Anonymous GitHub only ever reads your repositories; it
          never pushes, modifies, or deletes anything.
        </p>
      </div>
      <div class="q">
        <a href="/faq#formats">Which file formats are supported?</a>
        <p>
          Source code with syntax highlighting, Markdown, Jupyter notebooks,
          PDFs, images, and GitHub Pages sites. Everything passes through the
          same redaction filter.
        </p>
      </div>
      <div class="q">
        <a href="/faq#expiration">What happens when an anonymized repository expires?</a>
        <p>
          You choose: the mirror is removed, or visitors are redirected to the
          original GitHub repository once the review is over.
        </p>
      </div>
    </div>
  </section>

  <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, 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" v-if="user">My work</a>
        <a href="/conferences" v-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" rel="noopener">Source code</a>
        <a href="https://github.com/tdurieux/anonymous_github/issues/new?template=issue_report.yml" target="_blank" rel="noopener">Report a bug</a>
        <a href="https://github.com/sponsors/tdurieux/" target="_blank" rel="noopener">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" rel="noopener">@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>