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"
  >
    <!-- Content -->
    <div class="container px-md-3 px-sm-0">
      <!--Grid row-->
      <form action="" method="post">
        <div class="row fadeIn main-options">
          <!--Grid column-->
          <div class="col-md-12 mb-4 white-text text-center fadeIn">
            <h3 class="display-3 font-weight-bold white-text mb-0 pt-md-5 pt-5">
              Anonymous GitHub
            </h3>
            <hr class="hr-light my-4 w-75" />
            <h4 class="subtext-header mt-2 mb-4">
              Double-blind your repository in 5 min!
            </h4>
            <span ng-if="!user">
              <a href="/github/login" target="_self" class="p-2 white_border"
                >Login with GitHub to anonymize</a
              >
            </span>
          </div>
          <!--Grid column-->
        </div>
      </form>
      <!--Grid row-->
    </div>
    <!-- Content -->
  </div>
  <main>
    <div class="container">
      <!--Grid row-->
      <div class="row py-5">
        <div class="col-md-12">
          <h2 id="usage">Usage</h2>
          <div class="card-text mb-auto">
            <ol>
              <li>
                <a href="/github/login">Login</a> with Github access your
                dashboard and anonymize your repositories.
              </li>
              <li>Complete the list of terms that will be anonymized.</li>
              <li>Anonymize and share your link in your double-blind paper.</li>
            </ol>
            Example of an anonymized repository:
            <a
              href="https://anonymous.4open.science/r/840c8c57-3c32-451e-bf12-0e20be300389/"
              >https://anonymous.4open.science/r/840c8c57-3c32-451e-bf12-0e20be300389/</a
            >.
          </div>
        </div>
        <!--Grid column-->
        <div class="col-md-12"><h2 id="features">Features</h2></div>
        <div class="col-md-6">
          <div
            class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
          >
            <div class="col p-4 d-flex flex-column position-static">
              <h3 class="mb-0">Easy</h3>
              <p class="card-text mb-auto">
                In three clicks, you anonymize your repository. It makes it an
                easy and quick step to do before the submission of paper.
              </p>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div
            class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
          >
            <div class="col p-4 d-flex flex-column position-static">
              <h3 class="mb-0">Always up-to-date</h3>
              <p class="card-text mb-auto">
                Anonymous GitHub tracks the changes on your repository and
                updates the anonymous version automatically.
              </p>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div
            class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
          >
            <div class="col p-4 d-flex flex-column position-static">
              <h3 class="mb-0">Support many file formats</h3>
              <p class="card-text mb-auto">
                Anonymous GitHub renders mainly file, from source code to
                images, notebook or PDF.
              </p>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div
            class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
          >
            <div class="col p-4 d-flex flex-column position-static">
              <h3 class="mb-0">Open-source</h3>
              <p class="card-text mb-auto">
                Anonymous GitHub is open-source
                <a
                  class="nav-icon"
                  target="_blank"
                  href="https://github.com/tdurieux/anonymous_github/"
                  data-offset="30"
                  ><i class="fa fa-github" aria-hidden="true"></i></a
                >, you can easily deploy it for your conference and simplify the
                life of your authors.
              </p>
            </div>
          </div>
        </div>
        <div class="col-md-12"><h2 id="about">Metrics</h2></div>
        <div class="col-md-6">
          <div
            class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
          >
            <div class="col p-4 d-flex flex-column position-static">
              <h3 class="mb-auto text-center">
                {{stat.nbRepositories}} Anonymized Repositories
              </h3>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div
            class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
          >
            <div class="col p-4 d-flex flex-column position-static">
              <h3 class="mb-auto text-center">{{stat.nbUsers}} Users</h3>
            </div>
          </div>
        </div>
        <!--Grid column-->
      </div>
      <!--Grid row-->
    </div>
  </main>
</div>