Files
wger/wger/software/templates/features.html

637 lines
31 KiB
HTML

{% extends "template_features.html" %}
{% load i18n static wger_extras crispy_forms_tags %}
{# #}
{# Opengraph #}
{# #}
{% block opengraph %}
{{ block.super }}
<meta property="og:title" content="{% translate 'Features' %} - wger">
<meta property="og:description"
content="{% blocktranslate %}wger Workout Manager is a free, open source web application that manages your exercises and workouts.{% endblocktranslate %}">
{% endblock %}
{% block opengraphimages %}
<meta property="og:image" content="{% static 'images/logos/logo-font.svg' %}">
{% endblock %}
{# #}
{# Content #}
{# #}
{% block template %}
<!-- header -->
<header>
<!-- navbar -->
<nav class="navbar navbar-expand-lg px-4">
<div class="container-xl">
<a class="navbar-brand" href="{% url 'core:index' %}">
<img src="{% static 'images/logos/logo-font.svg' %}" alt="wger logo"/>
</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item mx-2 my-1">
<a class="nav-link fw-semibold" aria-current="page"
href="{% url 'software:about-us' %}">{% translate "Contact" %}
</a>
</li>
<li class="nav-item mx-2 my-1">
<a class="nav-link fw-semibold"
href="{% url 'exercise:exercise:overview' %}">
{% translate "Exercises" %}
</a>
</li>
<li class="nav-item mx-2 my-1">
<a class="nav-link fw-semibold"
href="https://play.google.com/store/apps/details?id=de.wger.flutter">
{% translate "Mobile app" %}
</a>
</li>
<li class="nav-item mx-2 my-1">
<a class="nav-link fw-semibold"
href="https://www.buymeacoffee.com/wger">
{% translate "Donate" %}
</a>
</li>
<li class="nav-item mx-2 my-1">
<a class="nav-link fw-semibold" href="https://github.com/wger-project">
{% translate "Develop" %}
</a>
</li>
<li class="nav-item mx-2 my-1">
<a class="nav-link fw-semibold" href="https://discord.gg/rPWFv6W">
{% translate "Community" %}
</a>
</li>
</ul>
<!-- buttons -->
{% if not user.is_authenticated %}
<div class="d-flex gap-2 my-2 my-lg-0">
<a role="button" class="btn btn-transparent"
href="{% url 'core:user:login' %}">
{% translate "Login" %}
</a>
{% if allow_registration %}
<a role="button" class="btn btn-primary rounded-1 bg-dark-blue px-4"
href="{% url 'core:user:registration' %}">
{% translate "Register" %}
</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
</nav>
<div class="container-xl">
<!-- hero section -->
<section
class="row px-3 mb-5 d-flex align-items-center justify-content-center gap-2 flex-row-reverse">
<div class="col-lg-7 col-sm-6 col-12 d-flex px-5 flex-column align-items-center">
<picture>
<source srcset="{% static 'images/hero.avif' %}" type="image/avif">
<img src="{% static 'images/hero.png' %}"
alt="a man with a dumbbell"
class="header-hero-image">
</picture>
</div>
<div class="col-lg-3 col-sm-5 col-11 d-flex py-3 flex-column align-items-start">
<h1 class="font-bebas-neue display-3 uppercase">
{% translate "Track your <br> way to your <br> ideal body" %}
</h1>
<p>
{% translate "Join wger, the community-driven <b>free and open-source fitness tracker</b>" %}
</p>
<a role="button"
class="btn btn-primary rounded-1 bg-dark-blue py-2 px-5"
href="{% if user.is_authenticated %}
{% url 'core:index' %}
{% else %}
{% url 'core:user:login' %}
{% endif %}">
{% translate "Get Started" %}
</a>
</div>
</section>
<!-- board section -->
<section class="row">
<div class="col-6 col-md-3 d-flex flex-column align-items-center">
<h2 class="display-3 font-bebas-neue text-dark-blue mb-0">{{ nr_users }}+</h2>
<p class="text-center">{% translate "people <br> using wger" %}</p>
</div>
<div class="col-6 col-md-3 d-flex flex-column align-items-center">
<h2 class="display-3 font-bebas-neue text-dark-blue mb-0">{{ nr_exercises }}+</h2>
<p class="text-center">{% translate "exercises <br> for workout creation" %}</p>
</div>
<div class="col-6 col-md-3 d-flex flex-column align-items-center">
<h2 class="display-3 font-bebas-neue text-dark-blue mb-0">{{ nr_ingredients }}+</h2>
<p class="text-center">{% translate "foods <br> for meal planing" %}</p>
</div>
<div class="col-6 col-md-3 d-flex flex-column align-items-center">
<h2 class="display-3 font-bebas-neue text-dark-blue mb-0">{{ nr_stars }}+</h2>
<p class="text-center">{% translate "stars <br> on GitHub" %}</p>
</div>
</section>
</div>
</header>
<!-- main content -->
<main>
<div class="container-xl">
<!-- section 1 - workout regimen -->
<section class="main-section">
<div
class="row row-cols row-cols-lg-2 row-cols-sm-1 px-3 w-100 justify-content-center flex-reverse gy-3">
<div
class="col-lg-7 col-sm-12 d-flex flex-column justify-content-center align-items-center position-relative">
<picture>
<source srcset="{% static 'images/screens-1.avif' %}" type="image/avif">
<img src="{% static 'images/screens-1.png' %}"
alt="mobile screen showing wger feature"
class="img-fluid">
</picture>
</div>
<div
class="col-lg-5 col-sm-12 d-flex flex-column align-items-start justify-content-center py-2">
<h2 class="w-100 font-bebas-neue display-4 uppercase header-workout">
{% translate "Craft your perfect <span>workout routines</span>" %}
</h2>
<ul class="hex-bullet bullet-red">
<li>
{% translate "Design a weekly workout plan from more than 100 exercises" %}
</li>
<li>
{% translate "Set reps and sets, duration, or distance goals for each exercise" %}
</li>
<li>
{% translate "Get guided through your workouts step by step" %}
</li>
<li>
{% translate "Keep track of the workouts you've done, including how you felt you performed" %}
</li>
</ul>
</div>
</div>
</section>
<!-- section 2 - daily meals -->
<section class="main-section">
<div
class="row row-cols row-cols-lg-2 row-cols-sm-1 px-3 w-100 justify-content-center gy-3">
<div
class="col-lg-7 col-sm-12 d-flex flex-column justify-content-center align-items-center position-relative"
style="overflow: hidden;">
<picture>
<source srcset="{% static 'images/screens-2.avif' %}" type="image/avif">
<img src="{% static 'images/screens-2.png' %}"
alt="mobile screen showing wger feature"
class="img-fluid">
</picture>
</div>
<div
class="col-lg-5 col-sm-12 d-flex flex-column align-items-start justify-content-center">
<h2 class="w-100 font-bebas-neue display-4 uppercase header-meals">
{% translate "Plan your <span>daily meals</span>" %}
</h2>
<ul class="gap-1 hex-bullet bullet-dark-yellow">
<li>
{% translate "Fill your week with nutritious meals that help you perform better" %}
</li>
<li>
{% translate "Build meals from a database of more than 2 million foods" %}
</li>
<li>
{% blocktranslate trimmed %}Get automatically calculated nutritional
values
(energy, protein, carbs, ...) for both individual meals and your
entire
weekly plan
{% endblocktranslate %}
</li>
</ul>
</div>
</div>
</section>
<!-- section 3 - progress -->
<section class="main-section">
<div
class="row row-cols-lg-2 row-cols-sm-1 px-3 w-100 justify-content-center flex-reverse gy-3">
<div
class="col-lg-7 col-sm-12 d-flex flex-column justify-content-center align-items-center position-relative"
style="overflow: hidden;">
<picture>
<source srcset="{% static 'images/screens-3.avif' %}" type="image/avif">
<img src="{% static 'images/screens-3.png' %}"
alt="mobile screen showing wger feature"
class="img-fluid">
</picture>
</div>
<div
class="col-lg-5 col-sm-12 d-flex flex-column align-items-start justify-content-center py-2">
<h2 class="w-100 font-bebas-neue display-4 uppercase w-100 header-progress">
{% translate "Keep track of <span>your progress</span>" %}
</h2>
<ul class="hex-bullet bullet-green">
<li>
{% translate "Track and annotate everything about your meals and workouts" %}
</li>
<li>
{% translate "Add custom notes" %}
</li>
<li>
{% translate "Record your weight" %}
</li>
<li>
{% translate "Keep a photo log to see your progress" %}
</li>
<li>
{% translate "Use the calendar view to see past entries" %}
</li>
</ul>
</div>
</div>
</section>
</div>
<!-- button -->
<div class="row w-100 p-5 d-flex justify-content-center">
<a role="button"
class="btn btn-primary rounded-1 bg-dark-blue w-auto px-5"
href="{% if allow_guest_users and not user.is_authenticated %}
{% url 'core:user:demo-entries' %}
{% else %}
{% url 'core:index' %}
{% endif %}">
{% translate "Try wger now" %}
</a>
</div>
<!-- community section -->
<section class="main-section p-4 bg-light-blue">
<div class="container-xl">
<div class="row w-100 gy-3">
<div
class="col-lg-7 col-sm-12 d-flex flex-column justify-content-center align-items-center">
<picture>
<source srcset="{% static 'images/community.avif' %}" type="image/avif">
<img src="{% static 'images/community.png' %}"
width="500"
alt="list of human faces"
class="img-fluid">
</picture>
</div>
<div class="col-lg-5 col-sm-12">
<h1 class="display-3 uppercase font-bebas-neue header-community">
{% translate "Powered By <span>the community</span>" %}
</h1>
<p style="line-height: 30px;">
{% blocktranslate trimmed %}
wger is funded and created by the open-source community: people like
you translating, adding exercises and nutritional info, developing,
and more.
{% endblocktranslate %}
<b>
{% blocktranslate trimmed %}
We don't use ads, don't sell your personal info, and we share
the code under a free and open-source license.
{% endblocktranslate %}
</b>
{% blocktranslate trimmed %}
Pitch in and help make wger even better!
{% endblocktranslate %}
</p>
<div class="d-grid gap-2 d-md-block">
<a href=""
class="btn btn-primary rounded-1 w-auto px-5"
target="_blank"
rel="noopener noreferrer">
{% translate "Contribute" %}
</a>
<a href="https://www.buymeacoffee.com/wger"
target="_blank"
rel="noopener noreferrer"
class="btn btn-outline-primary rounded-1 w-auto px-5">
{% translate "Donate" %}
</a>
</div>
</div>
</div>
</div>
</section>
<!-- sign up section -->
{% if allow_registration %}
<section class="main-section">
<div class="container d-flex align-items-center justify-content-center sign-up-bg">
<!-- form -->
<form method="post"
action="{% url 'core:user:registration' %}"
class="row justify-content-center">
{% csrf_token %}
<h3 class="col-12 text-center fs-1 uppercase font-bebas-neue">
{% translate "Sign Up Now For Free" %}
</h3>
<div class="col-lg-5 col-sm-10 col-12">
{% crispy form %}
</div>
</form>
</div>
</section>
{% endif %}
<!-- not enough section -->
<section class="bg-bottom-menu p-5">
<div class="container-xl">
<h1 class="w-100 display-4 text-white text-center text-uppercase heading-h6 py-4">
{% translate "Web version not enough?" %}
<br>
{% translate "Get the code, too!" %}
</h1>
<div class="row py-4">
<div
class="col-lg-4 col-sm-12 d-flex flex-column align-items-center justify-content-start gap-2">
<img src="{% static 'images/dumbbell.svg' %}"
height="96"
width="96"
alt="dumbbell icon"
class="mb-4">
<h6 class="text-white fw-bold text-center">
{% translate "Set up a private server for your gym" %}
</h6>
<p class="text-light fw-lighter text-center">
{% blocktranslate trimmed %}
Don't want your data on an online service? Set up a wger instance
on your own server for free!
{% endblocktranslate %}
</p>
</div>
<div
class="col-lg-4 col-sm-12 d-flex flex-column align-items-center justify-content-start gap-2">
<img src="{% static 'images/code.svg' %}"
height="96"
width="96"
alt="code icon"
class="mb-4">
<h6 class="text-white fw-bold text-center">
{% translate "Integrate with your own app" %}
</h6>
<p class="text-light fw-lighter text-center">
{% translate "wger offers an open API that you can use for your app." %}
</p>
</div>
<div
class="col-lg-4 col-sm-12 d-flex flex-column align-items-center justify-content-start gap-2">
<img src="{% static 'images/fork.svg' %}"
height="96"
width="96"
alt="git branch icon"
class="mb-4">
<h6 class="text-white fw-bold text-center">
{% translate "Create your own version" %}
</h6>
<p class="text-light fw-lighter text-center">
{% blocktranslate trimmed %}
The source code is available under the GNU AGPLv3 license! Feel
free to fork it on GitHub.
{% endblocktranslate %}
</p>
</div>
</div>
</div>
</section>
</main>
<!-- footer -->
<footer class="d-grid gap-3 p-5 footer-bg">
<div class="container-xl">
<div class="d-flex pb-4">
<img src="{% static 'images/logos/logo-font-inverse.svg' %}" alt="wger logo"/>
</div>
<div class="row row-cols-lg-4 row-cols-sm-1 g-2 border-bottom border-light pb-3">
<div class="col-lg-3 col-sm-6 col-12">
<ul class="list-group">
<li class="list-group-item bg-transparent border-0 text-light ps-0">
<h1 class="fs-5 text-white">{% translate "Account" %}</h1>
</li>
{% if allow_registration %}
<li class="list-group-item bg-transparent border-0 text-light fw-lighter ps-0">
<a href="{% url 'core:user:registration' %}">
{% translate "Register" %}
</a>
</li>
{% endif %}
<li class="list-group-item bg-transparent border-0 text-light fw-lighter ps-0">
<a href="{% url 'core:user:login' %}">
{% translate "Login" %}
</a>
</li>
<li class="list-group-item bg-transparent border-0 text-light fw-lighter ps-0">
<a href="{% url 'core:index' %}">
{% translate "Dashboard" %}
</a>
</li>
<li class="list-group-item bg-transparent border-0 text-light fw-lighter ps-0">
<a href="{% url 'manager:routine:overview' %}">
{% translate "Training" %}
</a>
</li>
<li class="list-group-item bg-transparent border-0 text-light fw-lighter ps-0">
<a href="{% url 'weight:overview' %}">
{% translate "Body weight" %}
</a>
</li>
<li class="list-group-item bg-transparent border-0 text-light fw-lighter ps-0">
<a href="{% url 'nutrition:plan:overview' %}">
{% translate "Nutrition" %}
</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-sm-6 col-12">
<ul class="list-group">
<li class="list-group-item bg-transparent border-0 text-light">
<h1 class="fs-5 text-white">{% translate "Community" %}</h1>
</li>
<li class="list-group-item bg-transparent border-0 text-light fw-lighter">
<a href="{% url 'exercise:exercise:overview' %}">
{% translate "Exercises" %}
</a>
</li>
<li class="list-group-item bg-transparent border-0 text-light fw-lighter">
<a href="{% url 'manager:template:public' %}">
{% translate "Workout routines" %}
</a>
</li>
<li class="list-group-item bg-transparent border-0 text-light fw-lighter">
<a href="https://discord.gg/rPWFv6W" target="_blank"
rel="noopener noreferrer">
{% translate "Discord" %}
</a>
</li>
<!--
<li class="list-group-item bg-transparent border-0 text-light fw-lighter">
<a href="http://" target="_blank" rel="noopener noreferrer">
Exercise translation
</a>
</li>
-->
</ul>
</div>
<div class="col-lg-3 col-sm-6 col-12">
<ul class="list-group">
<li class="list-group-item bg-transparent border-0 text-light">
<h1 class="fs-5 text-white">{% translate "Software" %}</h1>
</li>
<li class="list-group-item bg-transparent border-0 text-light">
<a href="https://github.com/wger-project/wger/issues/new/choose"
target="_blank"
rel="noopener noreferrer">
{% translate "Report an issue" %}
</a>
</li>
<li class="list-group-item bg-transparent border-0 text-light">
<a href="https://github.com/wger-project" target="_blank"
rel="noopener noreferrer">
{% translate "Source Code" %}
</a>
</li>
<li class="list-group-item bg-transparent border-0 text-light">
<a href="https://hosted.weblate.org/engage/wger/" target="_blank"
rel="noopener noreferrer">
{% translate "Translation" %}
</a>
</li>
<li class="list-group-item bg-transparent border-0 text-light">
<a href="{% url 'software:api' %}">{% translate "REST API" %}</a>
</li>
<li class="list-group-item bg-transparent border-0 text-light">
<a href="https://wger.readthedocs.io/en/latest/" target="_blank"
rel="noopener noreferrer">
{% translate "Documentation" %}
</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-sm-6 col-12">
<ul class="list-group">
<li class="list-group-item bg-transparent border-0 text-light">
<h1 class="fs-5 text-white">
<a href="https://github.com/wger-project" target="_blank"
rel="noopener noreferrer">
<i class="fab fa-github px-2"></i>
</a>
<a href="https://discord.gg/rPWFv6W" target="_blank"
rel="noopener noreferrer">
<i class="fab fa-discord px-2"></i>
</a>
{% if twitter %}
<a href="https://twitter.com/{{ twitter }}" target="_blank"
rel="noopener noreferrer">
<i class="fab fa-twitter px-2" aria-hidden="true"></i>
</a>
{% endif %}
{% if mastodon %}
<a href="{{ mastodon }}" target="_blank"
rel="noopener noreferrer">
<i class="fab fa-mastodon px-2" aria-hidden="true"></i>
</a>
{% endif %}
</h1>
</li>
<li class="list-group-item bg-transparent border-0">
<a href="{% url 'software:tos' %}"
class="text-light fw-lighter footer-link">
{% translate "Terms of service" %}
</a>
</li>
<li class="list-group-item bg-transparent border-0">
<a href="{% url 'core:imprint' %}">
Privacy policy
</a>
</li>
</ul>
</div>
</div>
<div class="d-flex justify-content-between py-3">
<div class="btn-group dropup">
<button class="btn btn-outline-light dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false">
<span class="{% fa_class 'globe' %}"></span>
{% translate i18n_language.name %}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupLanguages">
{% for language in languages %}
{% language_select language %}
{% endfor %}
<li>
<hr class="dropdown-divider"></hr>
</li>
<li>
<a href="https://hosted.weblate.org/engage/wger/"
class="dropdown-item"
target="_blank">
<span class="{% fa_class 'plus' %}"></span>
{% translate "Translate" %}
</a>
</li>
</ul>
</div>
<a href="https://play.google.com/store/apps/details?id=de.wger.flutter">
<img
src="{% static 'images/logos/play-store/badge.svg' %}"
alt="google play logo"
height="55"
/>
</a>
<a href="https://apps.apple.com/us/app/wger-workout-manager/id6502226792">
<img
src="{% static 'images/logos/app-store/black.svg' %}"
alt="app store logo"
height="55"
/>
</a>
<a href="https://flathub.org/apps/de.wger.flutter">
<img
src="{% static 'images/logos/flathub/black.svg' %}"
alt="flathub logo"
height="55"
/>
</a>
<a href="https://f-droid.org/de/packages/de.wger.flutter/">
<img
src="{% static 'images/logos/fdroid/get-it-on.png' %}"
alt="fdroid logo"
height="55"
/>
</a>
</div>
</div>
</footer>
{% endblock %}