anonymous_github/public/partials/home.htm

<div class="container-fluid">
  <div
    id="home"
    class="row view rgba-gradient d-flex align-self-stretch justify-content-center align-items-center"
  >
    <div class="container px-md-3 px-sm-0">
      <div class="row fadeIn main-options">
        <div class="col-md-12 mb-4 white-text text-center fadeIn">
          <h1 class="hero-title pt-5">
            Anonymous GitHub
          </h1>
          <p class="hero-subtitle mt-3 mb-4">
            Anonymize your repository in 5 minutes &mdash; join {{stat.nbUsers | number}} users.
          </p>
          <span ng-if="!user">
            <a
              href="/github/login"
              target="_self"
              class="btn btn-hero"
              ><i class="fab fa-github mr-2"></i>Login with GitHub</a
            >
          </span>
          <span ng-if="user">
            <a
              href="/anonymize"
              class="btn btn-hero"
              ><i class="fa fa-plus-circle mr-2"></i>Anonymize a Repository</a
            >
          </span>
        </div>
      </div>
    </div>
  </div>
  <main>
    <div class="container home-content">
      <div class="row pt-5">
        <div class="col-md-12">
          <h2 id="usage">How it works</h2>
          <ol class="usage-steps">
            <li>
              <a href="/github/login" target="_self">Login</a> with GitHub to access your dashboard and anonymize your repositories.
            </li>
            <li>Configure which terms, links, and images to anonymize.</li>
            <li>Share the anonymous link in your double-blind paper submission.</li>
          </ol>
          <p class="usage-example">
            Example:
            <a
              target="_self"
              href="https://anonymous.4open.science/r/840c8c57-3c32-451e-bf12-0e20be300389/"
              >https://anonymous.4open.science/r/840c8c57-3c32-451e-bf12-0e20be300389/</a
            >
          </p>
        </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">
            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"
            src="/imgs/anonymize.png"
            class="featurette-image img-fluid mx-auto"
          />
        </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"
            src="/imgs/explorer.png"
            class="featurette-image img-fluid mx-auto"
          />
        </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"
            src="/imgs/dashboard.png"
            class="featurette-image img-fluid mx-auto"
          />
        </div>
      </div>

      <hr class="featurette-divider" />

      <h2 id="about" class="mb-4">Metrics</h2>
      <div class="metrics-grid">
        <div class="metric-card">
          <div class="metric-value">{{stat.nbUsers | number}}</div>
          <div class="metric-label">Users</div>
        </div>
        <div class="metric-card">
          <div class="metric-value">{{stat.nbRepositories | number}}</div>
          <div class="metric-label">Repositories</div>
        </div>
        <div class="metric-card">
          <div class="metric-value">{{stat.nbPageViews | number}}</div>
          <div class="metric-label">Page Views</div>
        </div>
      </div>
    </div>
  </main>
</div>