app-MAIL-temp/templates/header.html
doanguyen 7ef78c991f Dark mode implementation
* Using CSS variable as a solution
* The new darkmode css is now live in another file so that upgarding
dashboard.css doesn't affect the darkmode itself
* Used a naive darkmode controller by client javascript. No persistance
state is stored in the backend at the moment
2020-05-10 16:52:14 +02:00

83 lines
2.9 KiB
HTML

<div class="header">
<div class="container">
<div class="d-flex">
<a class="header-brand" href="{{ url_for('dashboard.index') }}">
<img src="/static/logo.svg" class="header-brand-img" style="max-width: 8rem" alt="logo">
</a>
<div class="d-flex order-lg-2 ml-auto">
<div class="nav-item" data-toggle="dark-mode" title='Toggle bright/dark mode'>
<i class="fe fe-moon"></i>
</div>
{% if current_user.should_show_upgrade_button() %}
<div class="nav-item">
<a href="{{ url_for('dashboard.pricing') }}" class="btn btn-sm btn-outline-primary">Upgrade</a>
</div>
{% endif %}
<div class="dropdown">
<a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
{% if current_user.profile_picture_id %}
<span class="avatar" style="background-image: url('{{ current_user.profile_picture_url() }}')"></span>
{% else %}
<span class="avatar avatar-blue">{{ current_user.get_name_initial() or "👻" }}</span>
{% endif %}
<span class="ml-2 d-none d-lg-block">
<span class="text-default">
{{ current_user.name }}
</span>
{% if current_user.in_trial() %}
<small class="text-success d-block mt-1">Premium ends {{ current_user.trial_end|dt }}
<i class="fe fe-info" data-toggle="tooltip"
title="When you signed up, your account is upgraded to the premium plan for 7 days (the trial period). After this period, your account will come back to the free plan"></i>
</small>
{% elif current_user.is_premium() %}
<small class="text-success d-block mt-1">Premium
{% set sub = current_user.get_subscription() %}
{% if sub and sub.cancelled %}
until {{ sub.next_bill_date.strftime("%Y-%m-%d") }}
{% endif %}
</small>
{% endif %}
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="{{ url_for('auth.logout') }}">
<i class="dropdown-icon fe fe-log-out"></i> Sign out
</a>
</div>
</div>
</div>
<a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse"
data-target="#headerMenuCollapse">
<span class="header-toggler-icon"></span>
</a>
</div>
</div>
</div>
<div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
<div class="container">
<div class="row align-items-center">
<div class="col-lg order-lg-first">
{% include "menu.html" %}
</div>
</div>
</div>
</div>
<script>
function startIntro() {
introJs().setOption('showProgress', true).start();
introJs().start();
}
</script>