{% extends "demos/base.html" %}

{% block pageid %}devderby{% endblock %}

{% block bodyclass %}section-demos devderby landing{% endblock %}

{% block extrahead %}
    {{ css('devderby') }}
    <link rel="alternate" type="application/atom+xml" title="{{_('Dev Derby Submissions')}}"
        href="{{ url('demos_feed_tag', tag=current_challenge_tag_name, format='atom') }}" />
{% endblock %}

{% block title %}{{ page_title(_('Dev Derby')) }}{% endblock %}

{% set submit_url = url('demos_submit')|urlparams(tags=[current_challenge_tag_name]|join(' ')) %}

{% block content %}
<section id="content">
<div class="wrap">

  <header id="page-head">
    <nav id="nav-derby">
      <ul>
        <li><em>{{_("Home")}}</em></li>
        <li><a href="#upcoming">{{_("Challenges")}}</a></li>
        <li><a href="{{url('demos_devderby_rules')}}">{{_("Rules")}}</a></li>
        <li><a href="#tab-judging" rel="tab">{{_("Judging")}}</a></li>
        <li><a href="#challenge-prizes">{{_("Prizes")}}</a></li>
        <li><a href="#resources">{{_("Resources")}}</a></li>
      </ul>
    </nav>
  </header>

  <section id="content-main" class="full" role="main">
    <header id="derby-head">
      <p class="presents"><a href="{{ url('demos') }}">{{_("Mozilla Demo Studio")}}</a> {{_("presents")}}</p>
      <h1><a href="{{url('demos_devderby_landing')}}">{{_("Dev Derby")}}</a></h1>
      <h2>{% trans title=tag_meta(current_challenge_tag_name, "short_title") %}Show us what you can do with {{ title }}{% endtrans %}</h2>
      <p class="info">{{_("Join the Dev Derby now and submit your demo to win an Android phone or other prizes.")}}</p>
      <p class="submit">{% trans %}<a href="{{ submit_url }}"><b>Submit</b> Your Demo</a>{% endtrans %}</p>
    </header>

  <div class="main">
    <section id="upcoming">
      <header>
        <h1>{{_("Upcoming Challenges for 2012")}}</h1>
      </header>
      <ol>
        <li class="first">
          <h2 class="title">{{tag_meta(current_challenge_tag_name, "short_title")}}</h2>
          <h3 class="date">{{tag_meta(current_challenge_tag_name, "short_dateline")}}</h3>
          <h4 class="tagline">{{tag_meta(current_challenge_tag_name, "tagline")}}</h4>
          <h5 class="current">{% trans %}<span><b>Current</b> Derby</span>{% endtrans %}</h5>
          <p class="desc">{{tag_meta(current_challenge_tag_name, "summary")}}</p>
        </li>
        <li class="second">
          <h2 class="title">{{tag_meta(challenge_choices[1], "short_title")}}</h2>
          <h3 class="date">{{tag_meta(challenge_choices[1], "short_dateline")}}</h3>
          <h4 class="tagline">{{tag_meta(challenge_choices[1], "tagline")}}</h4>
          <p class="desc">{{tag_meta(challenge_choices[1], "summary")}}</p>
        </li>
        <li class="third">
          <h2 class="title">{{tag_meta(challenge_choices[2], "short_title")}}</h2>
          <h3 class="date">{{tag_meta(challenge_choices[2], "short_dateline")}}</h3>
          <h4 class="tagline">{{tag_meta(challenge_choices[2], "tagline")}}</h4>
          <p class="desc">{{tag_meta(challenge_choices[2], "summary")}}</p>
        </li>
      </ol>
    </section>
    
    <section id="current-challenge">
      <ul class="tabs">
        <li class="current"><a href="#tab-challenge">{{_("Current")}}</a></li>
        <li><a href="#tab-submissions">{{_("Submissions")}}</a></li>
        <li><a href="#tab-rules">{{_("Rules")}}</a></li>
        <li><a href="#tab-judging">{{_("Judging")}}</a></li>
        <li><a href="#tab-previous">{{_("Previous")}}</a></li>
      </ul>
      
      <section id="tab-challenge" class="block">
        <header>
          <h1 class="title">{{tag_meta(current_challenge_tag_name, "short_title")}}</h1>
          <h2 class="date">{{tag_meta(current_challenge_tag_name, "short_dateline")}}</h2>
        </header>
        <p class="tagline">{{tag_meta(current_challenge_tag_name, "tagline")}}</p>
        {{tag_meta(current_challenge_tag_name, "tab_copy")|safe}}
        {% trans month=tag_meta(current_challenge_tag_name, "short_dateline") %}
          <p class="demo-submit"><a href="{{ submit_url }}" class="button">Submit your demo</a> for the {{month}} Dev Derby today!</p>
        {% endtrans %}

      </section>
    
      <section id="tab-submissions" class="block">
          {% if submissions_qs|count == 0 %}
              <p class="none">{{_("Developers must be busy tinkering with their demos. No submissions yet. Be the first!")}}</p>
              <p class="demo-submit"><a href="{{ submit_url }}" class="button">{{_("Submit Your Demo")}}</a></p>
          {% else %}
                <ul class="gallery">
                    {% set extra_class = cycler(' row-first', '', '')%}
                    {% for submission in submissions_qs %}
                        {{ submission_thumb(submission, extra_class) }}
                    {% endfor %}
                </ul><!-- /.gallery -->
          {% endif %}
      </section><!-- /#tab-submissions -->
      
      <section id="tab-rules" class="block">
      {% trans rules_url=url('demos_devderby_rules') %}
        <p>A summary of the rules can be found below.  For a complete look at the terms of the contest please see the <a href="{{rules_url}}">Dev Derby Contest Official Rules</a>.</p>
        <ul class="prose">
          <li>Almost anyone can enter (<a href="{{rules_url}}">see the rules</a> for exceptions).</li>
          <li>There will be a new contest every month.</li>
          <li>Your entry must meet certain criteria; <a href="{{rules_url}}">see the rules</a> for the overall criteria and the Current Challenge section for any special criteria for each contest.</li>
          <li>Each contest runs from the first day of the month to the last day of the month (based on <strong>US Pacific time</strong>).</li>
          <li>Entries will be judged by a panel of qualified reviewers, who may or may not take into account how many &ldquo;likes&rdquo; your entry receives.</li>
          <li>The winners of each month's contest will be announced by the <strong>20th of the following month</strong>.</li>
          <li>You can't win more than once in the same calendar year.</li>
          <li>Please read the <a href="{{rules_url}}">Dev Derby Contest Official Rules</a> before submitting your entry.</li>
        </ul>
      {% endtrans %}
      </section>
    
      <section id="tab-judging" class="block">
      {% trans %}
        <p>Entries will be reviewed by a panel of qualified judges, including
            members of the Mozilla team and outside experts. We will rate the demos
            across 4 dimensions:</p>
      {% endtrans %}
      {% trans %}
        <ul class="prose">
            <li><strong>Technology</strong> &ndash; Does the demo showcase the power of open Web technologies?</li>
            <li><strong>Originality</strong> &ndash; How innovative and unique is the demo?</li>
            <li><strong>Aesthetics</strong> &ndash; How good is the visual design and interaction experience?</li>
            <li><strong>Practicality</strong> &ndash; How useful is this demo in enhancing the Web today?</li>
        </ul>
      {% endtrans %}
      {% trans %}
        <p>The judges will use all four dimensions in scoring each entry, and
            any additional criteria specified for a particular contest.</p>
      {% endtrans %}
      {% trans %}
        <p>The judges may also take into account how many &ldquo;likes&rdquo;
            the entries have received from the community. So make sure to share
            your demo with others and encourage them to visit Dev Derby to
            &ldquo;vote.&rdquo;</p>
      {% endtrans %}
        <h2>{{ _("Current Judges") }}</h2>
        <ul class="judges">
          <li class="vcard">
            <h3><a href="http://devthought.com" class="fn url">Guillermo Rauch<img src="{{MEDIA_URL}}img/devderby/judges/guillermorauch.jpg" alt="" class="photo" width="100" height="100"></a></h3>
            <h4 class="title">{{ _("CTO, LearnBoost") }}</h4>
            <p class="twitter"><a href="http://twitter.com/rauchg" class="url nickname">@rauchg</a></p>
            <p>
              {% trans %}
              <a href="http://devthought.com/">Guillermo Rauch</a> is the creator of several
              popular open-source JavaScript libraries like <a href="http://socket.io/">Socket.IO</a>
              and <a href="http://mongoosejs.com/">MongooseJS</a>. He's the author of Wiley's
              <a href="http://amzn.to/smashingnode">Smashing Node.JS</a>, a book about Node.JS and
              JavaScript. In the past he was a core developer of
              <a href="http://mootools.net/">MooTools</a>, the client-side JavaScript library.
              He's the co-founder and CTO of <a href="http://learnboost.com/">LearnBoost</a>,
              an education software company based in San Francisco.
              {% endtrans %}
            </p>
          </li>
          <li class="vcard">
            <h3><a href="http://kaazing.com/training" class="fn url">Peter Lubbers</a><img src="{{MEDIA_URL}}img/devderby/judges/peterlubbers.jpg" alt="" class="photo" width="100" height="100"></a></h3>
        <h4 class="title">{{ _("Senior Director Technical Communication, Kaazing") }}</h4>
            <p class="twitter"><a href="http://twitter.com/peterlubbers" class="url nickname">@peterlubbers</a></p>
            <p>
              {% trans %}
              Peter lives and breathes HTML5. Even his car has the California "HTML5" license
              plate. Peter is the co-author of Pro HTML5 Programming (Apress, 2011) and the
              co-founder of the San Francisco HTML5 User Group, the largest HTML5 User Group
              in the world. Peter frequently speaks at web events and teaches cutting-edge
              HTML5 training courses all over the world. Peter oversees all aspects of
              documentation and training at Kaazing, a start-up company specialized in
              building a high-performance HTML5 WebSocket platform that revolutionizes web
              communication and the first company to offer HTML5 training worldwide.
              {% endtrans %}
            </p>
          </li>
          <li class="vcard">
            <h3><a href="http://rawkes.com/" class="fn url">Rob Hawkes</a><img src="{{MEDIA_URL}}img/devderby/judges/robhawkes.jpg" alt="" class="photo" width="100" height="100"></a></h3>
            <h4 class="title">{{ _("Technical Evangelist at Mozilla") }}</h4>
            <p class="twitter"><a href="http://twitter.com/robhawkes" class="url nickname">@robhawkes</a></p>
            <p>
              {% trans %}
              Rob thrives on solving problems through code. He has an addiction to visual
              programming and can’t get enough of HTML5 and JavaScript. He’s a Technical
              Evangelist at Mozilla and leads the gaming side of their work within the
              developer community.
              {% endtrans %}
            </p>
          </li>
        </ul>
      </section>

      <section id="tab-previous" class="block">
        <header>
            <h2>{{_("Previous Dev Derby Challenges")}}</h2>
        </header>
        <ul class="previous">
            {% for tag_name in previous_challenge_tag_names %}
                <li>
                  <h3><a href="{{ devderby_tag_to_date_url(tag_name) }}"><span>{{ tag_meta(tag_name, 'dateline') }}</span> {{ tag_meta(tag_name, 'short_title') }}</a></h3>
                  <p class="desc">{{ tag_meta(tag_name, 'summary') }}</p>
                </li>
            {% endfor %}
        </ul>
      </section>
    
    </section><!-- /#current-challenge -->
  </div><!-- /.main -->
      
  <div class="sub">
    {% if previous_winner_qs|count > 0 %}
    {% set submission = previous_winner_qs[0] %}
    <section id="prev-winner">
      <h1>{{_("Previous Winner")}}</h1>
      <h2 class="title"><a href="{{ url('demos_detail', slug=submission.slug) }}">{{ submission.title }}</a></h2>
      {# TODO: This should probably be the author's avatar, at some point #}
      <h3 class="author"><a href="{{ url('demos_detail', slug=submission.slug) }}"><img src="{{ submission.creator.get_profile().gravatar }}" alt="{{ submission.title }}" width="52" height="52"></a> {{ submission_creator(submission) }}</h3>
      <p class="desc">{{ submission.summary }}</p>
      <p class="launch"><a href="{{ url('demos_detail', slug=submission.slug) }}">{{_("See the Demo")}}</a></p>
    </section><!-- /#prev-winner -->
    {% endif %}
      
    <section id="challenge-prizes">
      {% trans %}
      <h1>Prizes</h1>
      <img src="{{MEDIA_URL}}img/devderby/prize-androids.png" alt="Android mobile device" width="135" height="150" class="prize"/>
      <ol>
        <li class="first">
          <h3>Android mobile device</h3>
          <p>Winner gets an Android mobile device from <a rel="external" href="http://www.motorola.com/Consumers/US-EN/Consumer-Product-and-Services/Mobile-Phones/">Motorola</a> or <a rel="external" href="http://www.samsung.com/us/mobile/cell-phones">Samsung</a>.</p>
        </li>
        <li class="second">
          <h3>Rickshaw laptop bag</h3>
          <p>Runner-up gets a hand-crafted laptop messenger bag from <a rel="external" href="http://www.rickshawbags.com/bags/laptop-messenger-bag/standard/standard-commuter-laptop-bag-black.html">Rickshaw</a>.</p>
        </li>
        <li class="third">
          <h3>MDN t-shirt</h3>
          <p>3rd place gets a limited edition MDN t-shirt to show off their geek cred.</p>
        </li>
      </ol>
      {% endtrans %}
    </section><!-- /#challenge-prizes -->
  </div><!-- /.sub -->
    
    
    <section id="resources">
      <h3>{{_("Resources")}}</h3>
      <ul>
        <li class="res-docs"><a href="{{ url('docs') }}">{{_("Docs")}}</a></li>
        <li class="res-demos"><a href="{{ url('demos') }}">{{_("Demos")}}</a></li>
        <li class="res-articles"><a href="{{ url('learn') }}">{{_("Articles")}}</a></li>
      </ul>
    </section>
    
  </section><!-- /#content-main -->

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

{% block js %}
    {{ js('demostudio_devderby_landing') }}
{% endblock %}