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. It redacts the terms you choose in text files,
        so reviewers can browse your artifact through an anonymous link.
      </p>

      <div class="paper-cta-row">
        <a href="/signin" 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/redaction-preview.png" width="1360" height="960" alt="A reviewer preview with the author, affiliation, and email replaced by anonymous terms">
      </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>
      Terms are redacted in text files. Enabled images and PDFs are served
      unchanged, so review them for identifying content before sharing.
      Monitor your mirror, update it, or remove it when the review is over.
    </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#permissions">What access does GitHub sign-in require?</a>
        <p>
          The GitHub App has read-only access to gists and the repositories you choose.
          Legacy OAuth uses broader permissions.
          Anonymous GitHub never writes to your repositories.
        </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. Text files are anonymized;
          enabled images and PDFs are served unchanged.
        </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-anonymous 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; GPL-3.0 licensed</span>
      <span class="paper-footer-meta">Built for reviewers, by researchers.</span>
    </div>
  </footer>
</div>