---
layout: default
title: PhoneGap App Showcase
extra_js:
  - app-showcase.js
---
{% include subheader.html %}
<div class="bounds">
  <!-- This loops through the posts -->
  <div class="app-filters">
    Narrow by platform: <span class="app-filter"><input class="app-filter__input" data-device="ios" type="checkbox" name="ios-filter" id="ios-filter" checked> <label for="ios-filter">IOS</label></span> <span class="app-filter"><input class="app-filter__input" data-device="android" type="checkbox" name="android-filter" id="android-filter" checked> <label for="android-filter">Android</label></span> <span class="app-filter"><input class="app-filter__input" data-device="windows_phone" type="checkbox" name="windows-filter" id="windows-filter" checked> <label for="windows-filter">Windows</label></span>
  </div>
  <ul class="app-list">
    {% for post in site.posts %}
      {% assign device_tags = '' %}
      {% for device in post.devices %}
        {% assign device_tags = device_tags | append: ' ' | append: device %}
      {% endfor %}
      <li class="app__thumbnail {{ device_tags }}">
        <a href="{{ post.url | prepend: site.baseurl }}">
          <img class="app__thumbnail__image" src="{{ post.thumb | prepend: site.baseurl }}" width="100" alt="{{ post.title }}"/>
          <h3 class="app__title">{{ post.title }}</h3>
        </a>
        <div class="app__author">by {{ post.developer }}</div>
      </li>
    {% endfor %}
  </ul>
</div>
{% include subfooter.html %}