{% extends "base.html" %}

{% block pageid %}apps{% endblock %}

{% block bodyclass %}section-apps landing{% endblock %}

{% block title %}{{ page_title(_('Apps')) }}{% endblock %}

{% block content %}

<section id="content">
<div class="wrap">
  <section id="content-main" class="full" role="main">
  
    <header id="page-head">
    <div class="wrap">
        <h1 class="page-title">{{ _('Apps')|safe }}</h1> 
        <p class="intro">{{ _('Build and distribute cross-platform HTML5 apps') }}</p>
    </div>
    </header>
  
    <section class="modules">
      <div class="boxed">
        <h2>{{ _('Getting Started') }}</h2>
        {% if waffle.switch('apps-market-launch') %}
          {% trans apps_url=devmo_url(_('/en/Apps')) %}
            <p>The Mozilla Web Apps platform lets you <a href="{{ apps_url }}">build apps</a> powered by Web standards like HTML5, CSS3, JavaScript and related APIs.</p>
          {% endtrans %}
        {% else %}
          {% trans %}
            <p>The Mozilla Marketplace lets you build app experiences powered by Web standards like HTML5, CSS3, JavaScript and related APIs.</p>
          {% endtrans %}
        {% endif %}
        <p class="more"><a href="{{ devmo_url(_('/en/Apps/Getting_Started')) }}" class="go">{{ _('Learn more') }}</a></p>
      </div>
      
      <div class="boxed">
        {% if waffle.switch('apps-market-launch') %}
          <h2>{{ _('Submit Your Apps') }}</h2>
          {% trans marketplace_url="http://marketplace.mozilla.org" %}
            <p>The <a href="{{ marketplace_url }}">Mozilla Marketplace</a> is open. Submit your apps now.</p>
          {% endtrans %}
          <p class="more"><a href="http://marketplace.mozilla.org" class="go" rel="external">{{ _('Submit now') }}</a></p>
        {% else %}
          <h2>{{ _('Follow the project') }}</h2>
          {% trans
              apps_wiki=_('https://wiki.mozilla.org/Apps'),
              apps_market=_('https://wiki.mozilla.org/AMO:Roadmap/2012')
              %}
            <p><a href="{{ apps_wiki }}" rel="external">The Open Web apps project</a> and <a href="{{ apps_market }}" rel="external">Marketplace</a> put you back in control of the app experience.</p>
          {% endtrans %}
          <p class="more"><a href="https://wiki.mozilla.org/Apps" class="go" rel="external">{{ _('Learn more') }}</a></p>
        {% endif %}
      </div>
      
      <div class="boxed" id="newsletter">
        <h2>{{ _('Sign up for the newsletter') }}</h2>
        {% if waffle.switch('apps-market-launch') %}
          {% trans %}
            <p>Mozilla unlocks the power of the Web as the world's largest marketplace. Learn more about the Web Apps platform.</p>
          {% endtrans %}
        {% else %}
          {% trans %}
            <p>Mozilla unlocks the power of the Web as the world's largest marketplace. Learn more about Open Web apps.</p>
          {% endtrans %}
        {% endif %}
        <p class="more"><a href="#newsletter-sub" class="go">{{ _('Sign up now') }}</a></p>
      </div>
    </section>

    <div class="boxed">
      <section class="articles-list">
        <header class="head section-apps">
          {# L10n: Please escape HTML entities here, like &amp; #}
          <h2>{{ _('Resources for App Developers') }}</h2>
        </header>

        <ul class="hfeed">
          <li class="hentry">
            <h4 class="entry-title"><a href="{{ url('learn_html5') }}" rel="bookmark">{{ _('HTML5') }}</a></h4>
            <p class="entry-summary">
            {% trans %}
            Web technologies for building build cross-browser, cross-device app experiences.
            {% endtrans %}
            </p>
          </li>
          <li class="hentry">
            <h4 class="entry-title"><a href="{{ devmo_url(_('/en/Apps/For_mobile_developers')) }}" rel="bookmark">{{ _('For mobile apps developers') }}</a></h4>
            <p class="entry-summary">
            {% trans %}
            If you already develop apps for mobile devices, here's how to develop Open Web apps.
            {% endtrans %}
            </p>
          </li>
          <li class="hentry">
            <h4 class="entry-title"><a href="{{ devmo_url(_('/en/Apps/For_Web_developers')) }}" rel="bookmark">{{ _('For web developers') }}</a></h4>
            <p class="entry-summary">
            {% trans %}
            If you already develop websites, here's how to make them into installable apps.
            {% endtrans %}
            </p>
          </li>
          <li class="hentry">
            <h4 class="entry-title"><a href="{{ devmo_url(_('/en/Apps/Using_apps_offline')) }}" rel="bookmark">{{ _('Using apps offline') }}</a></h4>
            <p class="entry-summary">
            {% trans %}
            How to design apps so they can be cached and used without an Internet connection.
            {% endtrans %}
            </p>
          </li>
        </ul>
      </section>
      
    </div>{# /.boxed #}

    {% include "landing/apps_subscribe.html" %}

  </section>{# /#content-main #}

</div>
</section>{# /#content #}
{% endblock %}

{% block js %}
<script type="text/javascript" src="{{ MEDIA_URL }}js/apps-newsletter.js"></script>
{% endblock %}