Skip to content

Commit

Permalink
[Feature] Set up project and re-design landing page
Browse files Browse the repository at this point in the history
* [Feature #159236215] Rework the landing page to give it value
* [Feature #159236193] Adjust travis file contents
* [Feature #159236193] Start tracking settings file because it is necessary
* [Feature #159236193] Untrack unnecessary files
* [Feature #159236193] Delete untracked files' cache
* [Feature #159236193] Reinstate running builds for python version 3.4 and other platform builds
* [Feature #159236193] Avoid double dependecy inclusion in both the requirements files
* [Feature #159236193] Resolve double inclusion of modules
* [Feature] Put features carousel in a separate file
* [Feature] Correct the incomplete div tags

[Delivers #159236215]
  • Loading branch information
wasswa-derick committed Aug 3, 2018
1 parent 67339f3 commit 219d4e0
Show file tree
Hide file tree
Showing 8 changed files with 212 additions and 136 deletions.
5 changes: 0 additions & 5 deletions requirements_devel.txt
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,3 @@

# Production packages
-r requirements.txt

# Development packages
pep8
django-debug-toolbar
coverage
48 changes: 47 additions & 1 deletion wger/software/static/css/agency.css
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ body {
.text-muted {
color: #777777;
}
.text-near-white {
color: #c5c3c3;
}
.text-light {
color: white;
}
Expand Down Expand Up @@ -81,6 +84,9 @@ h6 {
.bg-darkest-gray {
background-color: #222222;
}
.bg-darkest-gray-service {
background-color: #252525;
}
.btn-primary {
color: white;
background-color: #204a87;
Expand Down Expand Up @@ -268,6 +274,9 @@ header .intro-text {
padding-top: 100px;
padding-bottom: 50px;
}
header .feature-sets{
margin-bottom: 200px;
}
header .intro-text .intro-lead-in {
font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
font-style: italic;
Expand All @@ -285,7 +294,7 @@ header .intro-text .intro-heading {
}
@media (min-width: 768px) {
header .intro-text {
padding-top: 300px;
padding-top: 100px;
padding-bottom: 200px;
}
header .intro-text .intro-lead-in {
Expand Down Expand Up @@ -772,3 +781,40 @@ img::-moz-selection {
body {
webkit-tap-highlight-color: #204a87;
}


/* Carousel Fade Transition */

#fade-feature-carousel.carousel {
padding-bottom: 40px;
}
#fade-feature-carousel.carousel .carousel-inner .item {
opacity: 0;
-webkit-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
#fade-feature-carousel.carousel .carousel-inner .active {
opacity: 1;
-webkit-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
#fade-feature-carousel.carousel .carousel-indicators {
margin-bottom: -10px;
}
#fade-feature-carousel.carousel .carousel-indicators > li {
background-color: #e84a64;
border: none;
}
#fade-feature-carousel blockquote {
text-align: center;
border: none;
}
#fade-feature-carousel .feature-circle {
width: 160px;
height: 160px;
margin: 0 auto;
border-radius: 140px;
margin-bottom: 20px;
}
Binary file added wger/software/static/images/free-open-source.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified wger/software/static/images/main.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added wger/software/static/images/mains3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
142 changes: 12 additions & 130 deletions wger/software/templates/features.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,7 @@
<div class="container">
<div class="intro-text">
<div class="intro-heading">{% trans "Welcome to wger" %}</div>
<div class="intro-lead-in">{% trans "Your body." %}</div>
<div class="intro-lead-in">{% trans "Your workouts." %}</div>
<div class="intro-lead-in">{% trans "Your data." %}</div>
<div class="intro-lead-in">{% trans "Your progress." %}</div>
<div class="intro-lead-in">{% trans "Your body." %} | {% trans "Your workouts." %} | {% trans "Your data." %} | {% trans "Your progress." %}</div>
{% if allow_guest_users and not user.is_authenticated %}
<a href="{% url 'core:user:demo-entries' %}" class="page-scroll btn btn-xl" rel="nofollow" style="margin-top: 1em;">
{% trans "Try it now" %}
Expand All @@ -43,17 +40,23 @@
{% trans "Login" %}
</a>
{% endif %}


</div>

<!-- Include the Features Carousel Here -->
{% include "features_carousel.html" %}

</div>
</header>

<!-- Services Section -->
<section id="services" class="bg-darkest-gray">
<section id="services" class="bg-darkest-gray-service">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-light">{% trans "Your advantages" %}</h2>
<h3 class="section-subheading text-muted">
<h3 class="section-subheading text-near-white">
{% blocktrans trimmed %}
wger Workout Manager is a free, open source web application that manages
your exercises, workouts and nutrition. It started as a pet project of
Expand All @@ -70,7 +73,7 @@ <h3 class="section-subheading text-muted">
<i class="fa fa-user fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading text-light">{% trans "Workouts" %}</h4>
<p class="text-muted">
<p class="text-near-white">
{% blocktrans trimmed %}
You can create and manage flexible workout routines for any goals you
have. Select exactly which exercises you'll do and how many repetitions,
Expand All @@ -85,7 +88,7 @@ <h4 class="service-heading text-light">{% trans "Workouts" %}</h4>
<i class="fa fa-cutlery fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading text-light">{% trans "Nutrition" %}</h4>
<p class="text-muted">
<p class="text-near-white">
{% blocktrans trimmed %}
Create your personal diet plan by creating as many meals with as many
different ingredients as you need. The application will calculate the
Expand All @@ -100,7 +103,7 @@ <h4 class="service-heading text-light">{% trans "Nutrition" %}</h4>
<i class="fa fa-line-chart fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading text-light">{% trans 'Diary' %}</h4>
<p class="text-muted">
<p class="text-near-white">
{% blocktrans trimmed %}
Enter the weights and repetitions you did for each exercise to generate
diagrams that let you see at a glance how well you are doing. The raw
Expand All @@ -113,126 +116,5 @@ <h4 class="service-heading text-light">{% trans 'Diary' %}</h4>
</div>
</section>

<section id="about" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">{% trans "Features" %}</h2>
<h3 class="section-subheading text-muted">{% trans "Among many others" %}</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'images/weight-chart.png' %}" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>{% trans "Weight tracker" %}</h4>
</div>
<div class="timeline-body">
<p class="text-muted">
{% blocktrans trimmed %}
Keep track of your progress with the body weight chart. This makes
it easy to see if you are reaching your goals or need to adjust
something.
{% endblocktrans %}
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'images/calendar.png' %}" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>{% trans 'Calendar' %}</h4>
</div>
<div class="timeline-body">
<p class="text-muted">
{% blocktrans trimmed %}
Get an overview of how and when you trained as well as how you
personally felt you performed. Access all your individual diary
entries with one click.
{% endblocktrans %}
</p>
</div>
</div>
</li>
<li class="timeline">
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'images/muscle-overview.png' %}" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>{% trans 'Exercise database' %}</h4>
</div>
<div class="timeline-body">
<p class="text-muted">
{% blocktrans trimmed %}
The exercise database contains more than hundred exercises from
which you can choose when creating a workout. You can view them by
category and equipment used or muscles trained.
{% endblocktrans %}
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'images/gym-management.png' %}" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>{% trans 'Gym management' %}</h4>
</div>
<div class="timeline-body">
<p class="text-muted">
{% blocktrans trimmed %}
Use the application for your gym to manage its members, their
workouts and attendance. You can manage the members' contracts,
keep notes and upload any files you might need.
{% endblocktrans %}
</p>
</div>
</div>
</li>
<li class="timeline">
<div class="timeline-image">
<img class="img-circle img-responsive" src="{% static 'images/rest-api.png' %}" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>{% trans "REST API" %}</h4>
</div>
<div class="timeline-body">
<p class="text-muted">
{% blocktrans trimmed %}
wger provides a REST API with full read and write access to all
data so you can integrate your own application and tools.
{% endblocktrans %}
</p>
</div>
</div>
</li>
<li class="timeline">
<div class="timeline-image">
<h4>{% blocktrans trimmed %}100% Free
<br>and
<br>Open Source{% endblocktrans %}
</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>




{% endblock %}
Loading

0 comments on commit 219d4e0

Please sign in to comment.