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" i18n>About Ghostfolio</h3>
      <mat-card class="about-container">
        <mat-card-content>
          <p>
            <strong>Ghostfolio</strong> is a lightweight wealth management
            application for individuals to keep track of their wealth like
            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="lastPublish">
              This instance is running Ghostfolio {{ version }} and has been
              last published on {{ lastPublish }}.
            </ng-container>
            <ng-container *ngIf="hasPermissionForStatistics" i18n
              >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 feature, 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>
        </mat-card-content>
      </mat-card>
    </div>
  </div>

  <div *ngIf="hasPermissionForStatistics" class="mb-5 row">
    <div class="col">
      <h3 class="mb-3 text-center" i18n>Ghostfolio in Numbers</h3>
      <mat-card>
        <mat-card-content>
          <div class="row">
            <div class="col-xs-12 col-md-4 my-2">
              <h3 class="mb-0">{{ statistics?.activeUsers1d || '-' }}</h3>
              <div class="h6 mb-0">
                <span i18n>Active Users</span>&nbsp;<small class="text-muted"
                  >(Last 24 hours)</small
                >
              </div>
            </div>
            <div class="col-xs-12 col-md-4 my-2">
              <h3 class="mb-0">{{ statistics?.newUsers30d ?? '-' }}</h3>
              <div class="h6 mb-0">
                <span i18n>New Users</span>&nbsp;<small class="text-muted"
                  >(Last 30 days)</small
                >
              </div>
            </div>
            <div class="col-xs-12 col-md-4 my-2">
              <h3 class="mb-0">{{ statistics?.activeUsers30d ?? '-' }}</h3>
              <div class="h6 mb-0">
                <span i18n>Active Users</span>&nbsp;<small class="text-muted"
                  >(Last 30 days)</small
                >
              </div>
            </div>
            <div class="col-xs-12 col-md-4 my-2">
              <h3 class="mb-0">{{ statistics?.slackCommunityUsers ?? '-' }}</h3>
              <div class="h6 mb-0" i18n>Users in Slack community</div>
            </div>
            <div class="col-xs-12 col-md-4 my-2">
              <h3 class="mb-0">{{ statistics?.gitHubContributors ?? '-' }}</h3>
              <div class="h6 mb-0" i18n>Contributors on GitHub</div>
            </div>
            <div class="col-xs-12 col-md-4 my-2">
              <h3 class="mb-0">{{ statistics?.gitHubStargazers ?? '-' }}</h3>
              <div class="h6 mb-0" i18n>Stars on GitHub</div>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>

  <div class="row">
    <div *ngIf="hasPermissionForBlog" class="col-md-6 col-xs-12 my-2">
      <a class="py-2 w-100" i18n mat-stroked-button [routerLink]="['/blog']"
        >Blog</a
      >
    </div>
    <div
      class="col-md-6 col-xs-12 my-2"
      [ngClass]="{ 'offset-md-3': !hasPermissionForBlog }"
    >
      <a
        class="py-2 w-100"
        i18n
        mat-stroked-button
        [routerLink]="['/about', 'changelog']"
        >Changelog & License</a
      >
    </div>
  </div>
</div>