{% 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>
        <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>
        <p>The judges will use all four dimensions in scoring each entry, and
            any additional criteria specified for a particular contest.</p>
        <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>
            
        <h2>Current Judges</h2>
        <ul class="judges">
          <li class="vcard">
            <h3><a href="http://remysharp.com/" class="fn url">Remy Sharp<img src="{{MEDIA_URL}}img/devderby/judges/remysharp.jpg" alt="" class="photo" width="100" height="100"></a></h3>
            <h4 class="title">MasterChef of code and cookies</h4>
            <p class="twitter"><a href="http://twitter.com/rem" class="url nickname">@rem</a></p>
            <p>Short, ginger, British.  Built a few things: 
            <a href="http://jsbin.com">jsbin.com</a>, <a href="http://html5demos.com">html5demos.com</a>, 
            <a href="http://remote-tilt.com">remote-tilt.com</a>, <a href="http://responsivepx.com">responsivepx.com</a>, 
            nodemon, <a href="http://inliner.leftlogic.com">inliner.leftlogic.com</a>, 
            <a href="http://jqueryfordesigners.com">jqueryfordesigners.com</a>, <a href="http://mit-license.org">mit-license.org</a>, 
            <a href="http://snapbird.org">snapbird.org</a>, <a href="http://jsconsole.com">jsconsole.com</a>. 
            Runs a conference, wrote half a book.</p>
          </li>
          <li class="vcard">
            <h3><a href="http://chriscoyier.net/" class="fn url">Chris Coyier<img src="{{MEDIA_URL}}img/devderby/judges/chriscoyier.jpg" alt="" class="photo" width="100"></a></h3>
            <h4 class="title">Lead Hucklebucker</h4>
            <p class="twitter"><a href="http://twitter.com/chriscoyier" class="url nickname">@chriscoyier</a></p>
            <p>Chris is a web worker currently working for Wufoo &amp; SurveyMonkey. He
            blogs about all things web at the community site CSS-Tricks. He
            co-authored the book Digging Into WordPress and talks shop about the
            web at the aptly named ShopTalk podcast.
            
            You can easily get him excited by talking about HTML, CSS,
            JavaScript, banjos, camping, or serialized sci-fi television shows.</p>
          </li>
          <li class="vcard">
            <h3><a href="http://christianheilmann.com/" class="fn url">Chris Heilmann<img src="{{MEDIA_URL}}img/devderby/judges/chrisheilmann.png" alt="" class="photo" width="100" height="100"></a></h3>
            <h4 class="title">Principal Evangelist at Mozilla</h4>
            <p class="twitter"><a href="http://twitter.com/codepo8" class="url nickname">@codepo8</a></p>
            <p>Chris Heilmann is the principal evangelist for Mozilla and has been blogging on web technologies for the last 6 years. Before Mozilla he was part of the Yahoo Developer Network and before that he spent several years developing large web sites and apps. Originally Chris was a radio journalist and newscaster. Chris lives in England but travels most of the time. His blog mostly contains his presentations, code examples about upcoming technologies and tips and tricks on web development of all kinds.</p>
          </li>
        </ul>
        <h2>Past Judges</h2>
        <ul class="judges">
          <li class="vcard">
            <h3><a href="http://isofarro.com" class="fn url">Mike Davies <img src="{{MEDIA_URL}}img/devderby/judges/mikedavies.jpg" alt="" class="photo" width="100" height="100"></a></h3>
            <h4 class="title">Web Developer, Retro-gamer</h4>
            <p class="twitter"><a href="http://twitter.com/isofarro" class="url nickname">@isofarro</a></p>
            <p>Mike Davies is a Senior Web Developer at <a href="http://www.lovefilm.com/">LOVEFiLM</a> 
            based in West London. He has over 10 years of commercial web development experience, including 
            a stint at Yahoo! Europe. One of his notable career achievements was his lead-developer role 
            for Legal &amp; General's 2005 <a href="http://www.w3.org/WAI/bcase/legal-and-general-case-study">commercially successful accessibility redesign</a>. 
            Mike is passionate about high-quality web development, and Lords of Midnight on the ZX Spectrum. 
            He also worries about online privacy.</p>
          </li>
          <li class="vcard">
            <h3><a href="http://wonko.com" class="fn url">Ryan Grove <img src="{{MEDIA_URL}}img/devderby/judges/ryangrove.jpg" alt="" class="photo" width="100" height="100"></a></h3>
            <h4 class="title">YUI Engineer at Yahoo!</h4>
            <p class="twitter"><a href="http://twitter.com/yaypie" class="url nickname">@yaypie</a></p>
            <p>Ryan Grove works on YUI at Yahoo!. His love of JavaScript is surpassed only by his 
            love of pie. He lives the dream of the 90s in Portland, Oregon, where the weather usually 
            provides a perfect excuse to stay inside eating pie and writing code.</p>
          </li>
          <li class="vcard">
            <h3><a href="http://encoding.com" class="fn url">Jeff Malkin <img src="{{MEDIA_URL}}img/devderby/judges/jeffmalkin.jpg" alt="" class="photo" width="100" height="100"></a></h3>
            <h4 class="title">President, Encoding.com</h4>
            <p class="twitter"><a href="http://twitter.com/jeffmalkin" class="url nickname">@jeffmalkin</a></p>
            <p>Jeff Malkin is a fearless entrepreneur with a proven track record in growing technology 
            startups in the Internet and mobile sectors. Jeff has guided Encoding.com, a Gartner “Cool 
            Vendor 2011,” to its position as the world's largest video encoding service for web and 
            mobile video, with over 2,000 clients and more than 10 million encodes. Jeff was recently 
            named a Streaming Media All Star for 2011.</p>
          </li>
          <li class="vcard">
             <h3><a href="http://nimbupani.com" class="fn url">Divya Manian <img src="{{MEDIA_URL}}img/devderby/judges/divyamanian.jpg" alt="" class="photo" width="100" height="100"></a></h3>
             <h4 class="title">Web Opener at Opera, Open Web Vigilante</h4>
             <p class="twitter"><a href="http://twitter.com/divya" class="url nickname">@divya</a></p>
             <p>Divya Manian is a Web Opener for Opera Software in Seattle. She made the jump from 
             developing device drivers for Motorola phones to designing websites and has not looked 
             back since. She takes her duties as an Open Web vigilante seriously which has resulted 
             in collaborative projects such as <a href="http://html5readiness.com">HTML5 Readiness</a> 
             and <a href="http://html5boilerplate.com">HTML5 Boilerplate</a>.</p>
          </li>
          <li class="vcard">
             <h3><a href="http://ethanmarcotte.com" class="fn url">Ethan Marcotte <img src="{{MEDIA_URL}}img/devderby/judges/ethanmarcotte.jpg" alt="" class="photo" width="100" height="100" title="Photo by Anton Peck"></a></h3>
             <h4 class="title">Web designer, author</h4>
             <p class="twitter"><a href="http://twitter.com/beep" class="url nickname">@beep</a></p>
             <p><a href="http://ethanmarcotte.com/">Ethan Marcotte</a> is a web designer &amp; developer 
             who cares deeply about beautiful design, elegant code, and the intersection of the two. Over 
             the years, Ethan has enjoyed working with such clients as the Sundance Film Festival, Stanford 
             University, <cite>New&nbsp;York Magazine</cite> and The Today Show. He swears profusely 
             <a href="http://twitter.com/beep">on Twitter</a>, and would like to be an 
             <a href="http://unstoppablerobotninja.com/" class="url">unstoppable robot ninja</a> when he grows up. His 
             most recent book is <cite><a href="http://www.abookapart.com/products/responsive-web-design">Responsive Web Design</a></cite>.</p>
          </li>
          <li class="vcard">
             <h3><a href="http://leaverou.me" class="fn url">Lea Verou <img src="{{MEDIA_URL}}img/devderby/judges/leaverou.jpg" alt="" class="photo" width="100" height="100"></a></h3>
             <h4 class="title">Web developer, Co-founder of Fresset Ltd.</h4>
             <p class="twitter"><a href="http://twitter.com/leaverou" class="url nickname">@leaverou</a></p>
             <p>Lea Verou is the lead web developer and designer of Fresset Ltd, which she co-founded in 
             2008. Fresset owns and manages some of the largest greek community websites. Lea has a 
             long-standing passion for open web standards, especially CSS and JavaScript. She loves 
             researching  new ways to use them and shares her findings through her blog, 
             <a href="http://leaverou.me">leaverou.me</a>. She speaks at a number of the largest web 
             development conferences and writes for leading industry publications. Lea also co-organized 
             and occasionally lectures the web development course at the Athens University of Economics 
             and Business.</p>
          </li>
          <li class="vcard">
            <h3><a href="https://github.com/defunkt" class="fn url">Chris Wanstrath <img src="{{MEDIA_URL}}img/devderby/judges/chriswanstrath.jpg" alt="" class="photo" width="100" height="100"></a></h3>
            <h4 class="title">Developer, GitHub co-founder</h4>
						<p class="twitter"><a href="http://twitter.com/defunkt" class="url nickname">@defunkt</a></p>
            <p>Chris Wanstrath lives in San Francisco and co-founded <a href="http://github.com">GitHub</a>. 
            He likes HTML, guitars, and coffee.</p>
          </li>
          <li class="vcard">
            <h3><a href="http://benward.me/" class="fn url">Ben Ward <img src="{{MEDIA_URL}}img/devderby/judges/benward.jpg" alt="" class="photo" width="100" height="100"></a></h3>
            <h4 class="title">Front-end developer at Twitter</h4>
            <p class="twitter"><a href="http://twitter.com/benward" class="url nickname">@benward</a></p>
            <p>Ben Ward is a front-end developer on Twitter's Platform team. He works on products 
            that put Twitter into other contexts all around the web and in applications. Ben cares 
            a great deal about building on robust content with progressive enhancement and designing 
            for failure. He's written at length about and in awe of the linkable, resource-based 
            architecture of the web. He's also a semantics nerd, administrating and editing 
            specifications at <a href="http://microformats.org">microformats.org</a>.</p>
          </li>
        </ul>
        {% endtrans %}
      </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 %}