{% extends "base.html" %}

{% block subtitle %}
  Home
{% endblock subtitle %}

{% block content %}
  <div class="container">
    <div class="row oppia-splash-image-row">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <img src="/images/banner.png" alt="{{BANNER_ALT_TEXT}}" class="oppia-splash-image">
      </div>
    </div>
    <div class="row oppia-splash">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="oppia-align-center">
          <h1>Bite-sized learning journeys, by anyone and for everyone</h1>
        </div>
      </div>
    </div>
    <div class="row oppia-splash">
      <div class="col-lg-6 col-md-6 col-sm-6">
        <p>It's hard to learn to play the piano just by watching a video of a great pianist. Interactive learning is much more effective! {{SITE_NAME}} helps you make <strong>embeddable interactive educational "explorations"</strong> that let people learn by doing.</p>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6">
        <p>
          <a class="btn btn-primary btn-lg" href="/gallery">Browse the explorations gallery</a>
          {% if user_email %}
            <a class="btn btn-primary btn-lg" href="/gallery">Create an exploration</a>
            <a class="btn btn-default btn-lg" href="/about">Learn more</a>
          {% else %}
            <a class="btn btn-default btn-lg" href="/about">Learn more</a>
            <a class="btn btn-default btn-lg" href="{{login_url}}">Create an Oppia account</a>
          {% endif %}
        </p>
      </div>
    </div>
  </div>

  <div class="oppia-splash-highlight">
    <div id="learn-more" class="container">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6">
          <h2><img src="/images/gift.svg" class="icon"> 100% free!</h2>
          <p>No trial periods, no freemium plans, no advertisements. Writing, editing, or learning from explorations on {{SITE_NAME}} is <strong>100% free of charge!</strong></p>
          <p>Additionally, all lessons on {{SITE_NAME}} are licensed <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a>, which means that you are allowed to <strong>copy, modify, and reuse lesson content.</strong></p>
          <p>Want to host an Oppia instance yourself, or make modifications to it? The <a href="https://code.google.com/p/oppia/">code behind {{SITE_NAME}}</a> is licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0.html">Apache License 2.0</a>. You are encouraged to <strong>download, modify, and reuse Oppia's software</strong> to your heart's content!</p>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
          <h2><img src="/images/handshake.svg" class="icon"> You can help!</h2>
          <!-- Handshake designed by Drue McCurdy from the Noun Project (thenounproject.com) -->
          <p>Oppia is the work of a group of open-source volunteers who want to see education improve. Want to add a feature or fix a bug? <a href="https://code.google.com/p/oppia/wiki/Contributing">Here's how to <strong>get started contributing to Oppia's code</strong></a>.</p>
          <p>Want to collaborate with others in writing an Oppia exploration? <a href="{{SITE_FORUM_URL}}"><strong>Join the Oppia users group</strong></a>!</p>
          <p>When you are <a href="/gallery">learning from an Oppia exploration</a>, click the <strong>Feedback</strong> tab to give suggestions on how to improve it!</p>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 pull-right">
          <h4><a href="/about">Learn even more about Oppia &raquo;</a></h4>
        </div>
      </div>
    </div>
  </div>

  {% if SPLASH_PAGE_EXPLORATION_ID %}
    <div id="sample-exploration" class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <h2>Try a sample exploration</h2>
          <oppia oppia-id="{{SPLASH_PAGE_EXPLORATION_ID}}" exploration-version="{{SPLASH_PAGE_EXPLORATION_VERSION}}" width="90%"></oppia>
        </div>
      </div>
    </div>
  {% endif %}

{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script src="/scripts/oppia-player-0.0.1.js"></script>
{% endblock footer_js %}