ghostfolio/apps/client/src/app/pages/about/about-page.html

<div class="container">
  <div class="mb-5 row">
    <div class="col">
      <h3 class="d-flex justify-content-center mb-3">About Ghostfolio</h3>
      <div class="about-container">
        <p>
          Ghostfolio is a lightweight wealth management application for
          individuals to keep track of stocks, ETFs or cryptocurrencies and make
          solid, data-driven investment decisions. The source code is fully
          available as open source software (OSS). The project has been
          initiated by
          <a href="https://dotsilver.ch" title="Website of Thomas Kaul"
            >Thomas Kaul</a
          >
          and is driven by the efforts of its
          <a
            href="https://github.com/ghostfolio/ghostfolio/graphs/contributors"
            title="Contributors to Ghostfolio"
            >contributors</a
          >.
          <ng-container *ngIf="version">
            This instance is running Ghostfolio {{ version }}.
          </ng-container>
          <ng-container *ngIf="hasPermissionForStatistics"
            >Check the system status at
            <a href="https://status.ghostfol.io" title="Ghostfolio status"
              >status.ghostfol.io</a
            >.</ng-container
          >
        </p>
        <p>
          If you encounter a bug or would like to suggest an improvement or a
          new
          <a [routerLink]="['/features']">feature</a>, please join the
          Ghostfolio
          <a
            href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
            title="Join the Ghostfolio Slack community"
            >Slack community</a
          >, tweet to
          <a
            href="https://twitter.com/ghostfolio_"
            title="Tweet to Ghostfolio on Twitter"
            >@ghostfolio_</a
          >, send an e-mail to
          <a href="mailto:hi@ghostfol.io" title="Send an e-mail"
            >hi@ghostfol.io</a
          >
          or open an issue at
          <a
            href="https://github.com/ghostfolio/ghostfolio"
            title="Find Ghostfolio on GitHub"
            >GitHub</a
          >.
        </p>
        <p class="text-center">
          <a
            class="mx-2"
            href="https://twitter.com/ghostfolio_"
            mat-icon-button
            title="Follow Ghostfolio on Twitter"
          >
            <ion-icon name="logo-twitter" size="large"></ion-icon>
          </a>
          <a
            class="mx-2"
            href="mailto:hi@ghostfol.io"
            mat-icon-button
            title="Send an e-mail"
          >
            <ion-icon name="mail" size="large"></ion-icon>
          </a>
          <a
            class="mx-2"
            href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
            mat-icon-button
            title="Join the Ghostfolio Slack channel"
          >
            <ion-icon name="logo-slack" size="large"></ion-icon>
          </a>
          <a
            class="mx-2"
            href="https://github.com/ghostfolio/ghostfolio"
            mat-icon-button
            title="Find Ghostfolio on GitHub"
          >
            <ion-icon name="logo-github" size="large"></ion-icon>
          </a>
        </p>
        <div
          *ngIf="hasPermissionForSubscription"
          class="d-flex justify-content-center"
        >
          <div
            class="independent-and-bootstrapped-logo mb-2"
            title="Ghostfolio is an independent & bootstrapped business"
          ></div>
        </div>
      </div>
    </div>
  </div>

  <div *ngIf="hasPermissionForStatistics" class="mb-5 row">
    <div class="col">
      <h3 class="mb-3 text-center">Ghostfolio in Numbers</h3>
      <mat-card>
        <mat-card-content>
          <div class="row">
            <div class="col-xs-12 col-md-4 my-2">
              <gf-value
                label="Active Users"
                size="large"
                subLabel="(Last 24 hours)"
                [value]="statistics?.activeUsers1d ?? '-'"
              ></gf-value>
            </div>
            <div class="col-xs-12 col-md-4 my-2">
              <gf-value
                label="New Users"
                size="large"
                subLabel="(Last 30 days)"
                [value]="statistics?.newUsers30d ?? '-'"
              ></gf-value>
            </div>
            <div class="col-xs-12 col-md-4 my-2">
              <gf-value
                label="Active Users"
                size="large"
                subLabel="(Last 30 days)"
                [value]="statistics?.activeUsers30d ?? '-'"
              ></gf-value>
            </div>
            <div class="col-xs-12 col-md-4 my-2">
              <a
                class="d-block"
                href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
              >
                <gf-value
                  label="Users in Slack community"
                  size="large"
                  [value]="statistics?.slackCommunityUsers ?? '-'"
                ></gf-value>
              </a>
            </div>
            <div class="col-xs-12 col-md-4 my-2">
              <a
                class="d-block"
                href="https://github.com/ghostfolio/ghostfolio/graphs/contributors"
              >
                <gf-value
                  label="Contributors on GitHub"
                  size="large"
                  [value]="statistics?.gitHubContributors ?? '-'"
                ></gf-value>
              </a>
            </div>
            <div class="col-xs-12 col-md-4 my-2">
              <a
                class="d-block"
                href="https://github.com/ghostfolio/ghostfolio/stargazers"
              >
                <gf-value
                  label="Stars on GitHub"
                  size="large"
                  [value]="statistics?.gitHubStargazers ?? '-'"
                ></gf-value>
              </a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>

  <div class="row">
    <div *ngIf="hasPermissionForSubscription" class="col-md-3 col-xs-12 my-2">
      <a
        class="py-2 w-100"
        color="primary"
        mat-stroked-button
        [routerLink]="['/faq']"
        >FAQ</a
      >
    </div>
    <div
      class="col-md-3 col-xs-12 my-2"
      [ngClass]="{ 'offset-md-4': !hasPermissionForBlog }"
    >
      <a
        class="py-2 w-100"
        color="primary"
        mat-stroked-button
        [routerLink]="['/about', 'changelog']"
        >Changelog & License</a
      >
    </div>
    <div *ngIf="hasPermissionForSubscription" class="col-md-3 col-xs-12 my-2">
      <a
        class="py-2 w-100"
        color="primary"
        mat-stroked-button
        [routerLink]="['/about', 'privacy-policy']"
        >Privacy Policy</a
      >
    </div>
    <div *ngIf="hasPermissionForBlog" class="col-md-3 col-xs-12 my-2">
      <a
        class="py-2 w-100"
        color="primary"
        mat-flat-button
        [routerLink]="['/blog']"
        >Blog</a
      >
    </div>
  </div>
</div>