348 lines
13 KiB
HTML
348 lines
13 KiB
HTML
<div class="container">
|
||
<div class="row">
|
||
<div class="col">
|
||
<h3 class="d-none d-sm-block mb-3 text-center">Pricing Plans</h3>
|
||
<div class="mb-4">
|
||
<p>
|
||
Our official Ghostfolio Premium cloud offering is the easiest way to
|
||
get started. Due to the time it saves, this will be the best option
|
||
for most people. The revenue is used for covering the hosting costs.
|
||
</p>
|
||
<p *ngIf="user?.subscription?.type === 'Basic'">
|
||
If you plan to open an account at <i>DEGIRO</i>, <i>frankly</i>,
|
||
<i>Interactive Brokers</i>, <i>Swissquote</i>, <i>VIAC</i>, or
|
||
<i>Zak</i>, please
|
||
<a href="mailto:hi@ghostfol.io?Subject=Referral link for..."
|
||
>contact us</a
|
||
>
|
||
to use our referral link and get a Ghostfolio Premium membership for
|
||
one year. Looking for a student discount? Request it
|
||
<a href="mailto:hi@ghostfol.io?Subject=Student Discount">here</a> with
|
||
your university e-mail address.
|
||
</p>
|
||
<p>
|
||
If you prefer to run Ghostfolio on your own infrastructure, please
|
||
find the source code and further instructions on
|
||
<a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
|
||
</p>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-xs-12 col-lg-4 mb-3">
|
||
<mat-card class="d-flex flex-column h-100">
|
||
<div class="flex-grow-1">
|
||
<h4>Open Source</h4>
|
||
<p i18n>
|
||
For tech-savvy investors who prefer to run Ghostfolio on their
|
||
own infrastructure.
|
||
</p>
|
||
<ul class="list-unstyled mb-3">
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Unlimited Transactions</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Unlimited Accounts</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Portfolio Performance</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Portfolio Summary</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Portfolio Allocations</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Performance Benchmarks</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>FIRE Calculator</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Data Import and Export</span>
|
||
<span
|
||
class="align-items-center d-flex ml-1"
|
||
matTooltipPosition="above"
|
||
[matTooltip]="importAndExportTooltipOSS"
|
||
>
|
||
<ion-icon name="information-circle-outline"></ion-icon>
|
||
</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<a i18n [routerLink]="['/features']">and more Features...</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<p i18n>Self-hosted, update manually.</p>
|
||
<p class="h5 text-right" i18n>Free</p>
|
||
<div
|
||
*ngIf="user?.subscription?.type === 'Basic'"
|
||
class="d-none d-lg-block hidden mt-3 text-center"
|
||
>
|
||
<a color="primary" mat-flat-button> </a>
|
||
<p class="m-0 text-muted">
|
||
<small> </small>
|
||
</p>
|
||
</div>
|
||
</mat-card>
|
||
</div>
|
||
<div class="col-xs-12 col-lg-4 mb-3">
|
||
<mat-card
|
||
class="d-flex flex-column h-100"
|
||
[ngClass]="{ 'active': user?.subscription?.type === 'Basic' }"
|
||
>
|
||
<div class="flex-grow-1">
|
||
<div class="align-items-center d-flex mb-2">
|
||
<h4 class="flex-grow-1 m-0">Basic</h4>
|
||
<div *ngIf="user?.subscription?.type === 'Basic'">
|
||
<ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
|
||
</div>
|
||
</div>
|
||
<p i18n>
|
||
For new investors who are just getting started with trading.
|
||
</p>
|
||
<ul class="list-unstyled mb-3">
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Unlimited Transactions</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Unlimited Accounts</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Portfolio Performance</span>
|
||
</li>
|
||
<li>
|
||
<ion-icon
|
||
class="invisible"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
</li>
|
||
<li>
|
||
<ion-icon
|
||
class="invisible"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
</li>
|
||
<li>
|
||
<ion-icon
|
||
class="invisible"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
</li>
|
||
<li>
|
||
<ion-icon
|
||
class="invisible"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
</li>
|
||
<li>
|
||
<ion-icon
|
||
class="invisible"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<p i18n>Fully managed Ghostfolio cloud offering.</p>
|
||
<p class="h5 text-right" i18n>Free</p>
|
||
<div
|
||
*ngIf="user?.subscription?.type === 'Basic'"
|
||
class="d-none d-lg-block hidden mt-3 text-center"
|
||
>
|
||
<a color="primary" mat-flat-button> </a>
|
||
<p class="m-0 text-muted">
|
||
<small> </small>
|
||
</p>
|
||
</div>
|
||
</mat-card>
|
||
</div>
|
||
<div class="col-xs-12 col-lg-4 mb-3">
|
||
<mat-card
|
||
class="d-flex flex-column h-100"
|
||
[ngClass]="{ 'active': user?.subscription?.type === 'Premium' }"
|
||
>
|
||
<div class="flex-grow-1">
|
||
<div class="align-items-center d-flex mb-2">
|
||
<h4 class="align-items-center d-flex flex-grow-1 m-0">
|
||
<span>Premium</span>
|
||
<gf-premium-indicator
|
||
class="ml-1"
|
||
[enableLink]="false"
|
||
></gf-premium-indicator>
|
||
</h4>
|
||
<div *ngIf="user?.subscription?.type === 'Premium'">
|
||
<ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
|
||
</div>
|
||
</div>
|
||
<p i18n>
|
||
For ambitious investors who need the full picture of their
|
||
financial assets.
|
||
</p>
|
||
<ul class="list-unstyled mb-3">
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Unlimited Transactions</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Unlimited Accounts</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Portfolio Performance</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Portfolio Summary</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Portfolio Allocations</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Performance Benchmarks</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>FIRE Calculator</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<span i18n>Data Import and Export</span>
|
||
<span
|
||
class="align-items-center d-flex ml-1"
|
||
matTooltipPosition="above"
|
||
[matTooltip]="importAndExportTooltipPremium"
|
||
>
|
||
<ion-icon name="information-circle-outline"></ion-icon>
|
||
</span>
|
||
</li>
|
||
<li class="align-items-center d-flex mb-1">
|
||
<ion-icon
|
||
class="mr-1"
|
||
name="checkmark-circle-outline"
|
||
></ion-icon>
|
||
<a i18n [routerLink]="['/features']">and more Features...</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<p i18n>Fully managed Ghostfolio cloud offering.</p>
|
||
<p class="h5 text-right" [hidden]="!price">
|
||
<span class="font-weight-normal">
|
||
<ng-container *ngIf="coupon"
|
||
><del class="text-muted"
|
||
>{{ baseCurrency }} {{ price }}</del
|
||
> {{ baseCurrency }} <strong
|
||
>{{ price - coupon }}</strong
|
||
>
|
||
</ng-container>
|
||
<ng-container *ngIf="!coupon"
|
||
>{{ baseCurrency }} <strong
|
||
>{{ price }}</strong
|
||
></ng-container
|
||
> <span>per year</span></span
|
||
>
|
||
</p>
|
||
<div
|
||
*ngIf="user?.subscription?.type === 'Basic'"
|
||
class="mt-3 text-center"
|
||
>
|
||
<a
|
||
color="primary"
|
||
i18n
|
||
mat-flat-button
|
||
[routerLink]="['/account']"
|
||
>
|
||
Upgrade Plan
|
||
</a>
|
||
<p class="m-0 text-muted">
|
||
<small i18n>One-time payment, no auto-renewal.</small>
|
||
</p>
|
||
</div>
|
||
</mat-card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div *ngIf="!user" class="row">
|
||
<div class="col mt-3 text-center">
|
||
<a color="primary" i18n mat-flat-button [routerLink]="['/register']">
|
||
Get Started
|
||
</a>
|
||
<p class="m-0 text-muted"><small i18n>It’s free.</small></p>
|
||
</div>
|
||
</div>
|
||
</div>
|