layout: default


<!– Page Content –> <div class=“col-md-8”>

<!-- Overview -->
<section>
  <p>{{ page.description }}</p>
</section>

<!-- Media -->
{% if page.demo %}
<section class="embed-container">
  <iframe src="https://www.youtube-nocookie.com/embed/{{ page.demo }}?controls=0" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope;" allowfullscreen></iframe>
</section>
{% elsif page.image %}
{% if page.image contains '://' %}
{% assign image_url = page.image %}
{% else %}
{% assign image_url = page.image | relative_url %}
{% endif %}
<section>
  <img class="project-portfolio-img" src="{{ image_url }}" alt="{{ page.title }}" />
</section>
{% endif %}

{{ content }}

</div>

<aside class=“col-md-4”>

<!-- Client-->
{% if page.client %}
<section>
  <h2>About the Client</h2>
  {{ page.client }}
</section>
{% endif %}

<!-- Source Code -->
{% if page.code %}
<section>
  <h2>Source Code</h2>
  <p>The source code of this project is publicly available on <a href="https://github.com/{{ page.code }}">Github</a>{% if page.license %} under {{ page.license }} License{% endif %}.</p>
  <div class="github-card" data-github="{{ page.code }}" data-theme="medium" data-width="100%"></div>
  <script src="https://cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
</section>
{% endif %}

<!-- Download -->
{% if page.download %}
<section>
  <h2>Get it now</h2>
  <div>
    {% if page.download.android %}
    <span>
      <a href='https://play.google.com/store/apps/details?id={{ page.download.android }}&hl=en&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1' rel="noopener" target="_blank">
        <img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png' height="64px" />
      </a>
    </span>
    {% endif %}
    {% if page.download.bintray %}
    <p>This project can be used as a Maven and Gradle library via JCenter. It is published on Bintray.</p>
    <a href='https://bintray.com/{{ page.download.bintray }}/_latestVersion' rel="noopener" target="_blank"><img src='https://api.bintray.com/packages/{{ page.download.bintray }}/images/download.svg'></a>
    {% endif %}
    {% if page.download.gem %}
    <a href='https://badge.fury.io/rb/{{ page.download.gem }}' rel="noopener" target="_blank"><img src='https://badge.fury.io/rb/{{ page.download.gem }}.svg'></a>
    {% endif %}
  </div>
</section>
{% endif %}

{% include widget_feedback.html %}

</aside>

<script>

$(function() {
  $('article ol').addClass('mdc-list');
  $('article ol li').each(function(index) {
    $(this).addClass('mdc-list-item');
    $(this).html('<span class="mdc-list-item__text">' + $(this).text() + '</span>');
  });

  $('article ul').addClass('mdc-chip-set');
  $('article ul li').each(function(index) {
    $(this).addClass('mdc-chip');

    var html = "<div class='mdc-chip__ripple'></div><span role='gridcell'>"
    html += "<span role='button' class='mdc-chip__primary-action><span class='mdc-chip__text'>"
    $(this).html(html + $(this).text() + '</span></span>');
  });

  $('.highlighter-rouge').each(function(index) {
    var pre = $(this);
    var code = $(this).find('code');

    var classList = pre.attr('class').split(/\s+/);
    $.each(classList, function(i, item) {
      if (item.startsWith('language-')) {
        code.addClass(item.substring(9));
      }
    });

    $(this).removeClass();
    $(this).children().removeClass();
    $(this).find('pre').removeClass();
  });
})

</script>