howitworks.html

<%page expression_filter="h"/>
<%inherit file="base.html" />
<%def name="online_help_token()"><% return "welcome" %></%def>
<%namespace name='static' file='static_content.html'/>
<%!
  from django.core.urlresolvers import reverse
  from django.utils.translation import ugettext as _
  from openedx.core.djangolib.markup import HTML, Text
%>

<%block name="title">${_("Welcome")}</%block>
<%block name="bodyclass">not-signedin index view-howitworks</%block>

<%block name="content">

<div class="wrapper-content-header wrapper">
  <section class="content content-header">
    <header>
      <h1><span class="wrapper-text-welcome">${_("Welcome to {studio_name}").format(
          studio_name=settings.STUDIO_NAME
      )}</span></h1>
      <p class="tagline">${_("{studio_name} helps manage your online courses, so you can focus on teaching them").format(
        studio_name=settings.STUDIO_SHORT_NAME
      )}</p>
    </header>
  </section>
</div>

<div class="wrapper-content-features wrapper">
  <section class="content content-features">
    <header>
      <h2 class="sr">${_("{studio_name}'s Many Features").format(studio_name=settings.STUDIO_SHORT_NAME)}</h2>
    </header>

    <ol class="list-features">
      <li class="feature">
        <figure class="img zoom">
          <a rel="modal" href="#hiw-feature1">
            <img src="${static.url("images/thumb-hiw-feature1.png")}" alt="${_('{studio_name} Helps You Keep Your Courses Organized').format(studio_name=settings.STUDIO_SHORT_NAME)}" />
            <figcaption class="sr">${_("{studio_name} Helps You Keep Your Courses Organized").format(studio_name=settings.STUDIO_NAME)}</figcaption>
            <span class="action-zoom">
              <span class="icon fa fa-search-plus" aria-hidden="true"></span><span class="sr">${_("Enlarge image")}</span>
            </span>
          </a>
        </figure>

        <div class="copy">
          <h3>${_("Keeping Your Course Organized")}</h3>
          <p>${Text(_("The backbone of your course is how it is organized. {studio_name} offers an {strong_start}Outline{strong_end} editor, providing a simple hierarchy and easy drag and drop to help you and your students stay organized.")).format(
                  studio_name=settings.STUDIO_SHORT_NAME,
                  strong_start=HTML('<strong>'),
                  strong_end=HTML('</strong>')
              )}</p>

          <ul class="list-proofpoints">
            <li class="proofpoint">
              <h4 class="title">${_("Simple Organization For Content")}</h4>
              <p>${Text(_("{studio_name} uses a simple hierarchy of {strong_start}sections{strong_end} and {strong_start}subsections{strong_end} to organize your content.")).format(
                    studio_name=settings.STUDIO_SHORT_NAME,
                    strong_start=HTML('<strong>'),
                    strong_end=HTML('</strong>')
                  )}</p>
            </li>

            <li class="proofpoint">
              <h4 class="title">${_("Change Your Mind Anytime")}</h4>
              <p>${_("Draft your outline and build content anywhere. Simple drag and drop tools let you reorganize quickly.")}</p>
            </li>

            <li class="proofpoint">
              <h4 class="title">${_("Go A Week Or A Semester At A Time")}</h4>
              <p>${Text(_("Build and release {strong_start}sections{strong_end} to your students incrementally. You don't have to have it all done at once.")).format(
                    strong_start=HTML('<strong>'),
                    strong_end=HTML('</strong>')
                  )}</p>
            </li>
          </ul>
        </div>
      </li>

      <li class="feature">
        <figure class="img zoom">
        <a rel="modal" href="#hiw-feature2">
          <img src="${static.url("images/thumb-hiw-feature2.png")}" alt="${_('Learning is More than Just Lectures')}" />
          <figcaption class="sr">${_("Learning is More than Just Lectures")}</figcaption>
          <span class="action-zoom">
            <span class="icon fa fa-search-plus" aria-hidden="true"></span><span class="sr">${_("Enlarge image")}</span>
          </span>
        </a>
        </figure>

        <div class="copy">
          <h3>${_("Learning is More than Just Lectures")}</h3>
          <p>${_("{studio_name} lets you weave your content together in a way that reinforces learning. Insert videos, discussions, and a wide variety of exercises with just a few clicks.").format(studio_name=settings.STUDIO_SHORT_NAME)} </p>

          <ul class="list-proofpoints">
            <li class="proofpoint">
              <h4 class="title">${_("Create Learning Pathways")}</h4>
              <p>${_("Help your students understand one concept at a time with multimedia, HTML, and exercises.")}</p>
            </li>

            <li class="proofpoint">
              <h4 class="title">${_("Work Visually, Organize Quickly")}</h4>
              <p>${_("Work visually and see exactly what your students will see. Reorganize all your content with drag and drop.")}</p>
            </li>

            <li class="proofpoint">
              <h4 class="title">${_("A Broad Library of Problem Types")}</h4>
              <p>${_("It's more than just multiple choice. {studio_name} supports more than a dozen types of problems to challenge your learners.").format(studio_name=settings.STUDIO_SHORT_NAME)}</p>
            </li>
          </ul>
        </div>
      </li>

      <li class="feature">
        <figure class="img zoom">
          <a rel="modal" href="#hiw-feature3">
            <img src="${static.url("images/thumb-hiw-feature3.png")}" alt="${_('{studio_name} Gives You Simple, Fast, and Incremental Publishing. With Friends.').format(studio_name=settings.STUDIO_SHORT_NAME)}" />
            <figcaption class="sr">${_("{studio_name} Gives You Simple, Fast, and Incremental Publishing. With Friends.").format(studio_name=settings.STUDIO_SHORT_NAME)}</figcaption>
            <span class="action-zoom">
              <span class="icon fa fa-search-plus" aria-hidden="true"></span><span class="sr">${_("Enlarge image")}</span>
            </span>
          </a>
        </figure>

        <div class="copy">
          <h3>${_("Simple, Fast, and Incremental Publishing. With Friends.")}</h3>
          <p>${_("{studio_name} works like web applications you already know, yet understands how you build curriculum. Instant publishing to the web when you want it, incremental release when it makes sense. And with co-authors, you can have a whole team building a course, together.").format(studio_name=settings.STUDIO_SHORT_NAME)}</p>

          <ul class="list-proofpoints">
            <li class="proofpoint">
              <h4 class="title">${_("Instant Changes")}</h4>
              <p>${_("Caught a bug? No problem. When you want, your changes go live when you click Save.")}</p>
            </li>

            <li class="proofpoint">
              <h4 class="title">${_("Release-On Date Publishing")}</h4>
              <p>${Text(_("When you've finished a {strong_start}section{strong_end}, pick when you want it to go live and {studio_name} takes care of the rest. Build your course incrementally.")).format(
                      studio_name=settings.STUDIO_SHORT_NAME,
                      strong_start=HTML('<strong>'),
                      strong_end=HTML('</strong>')
                  )}</p>
            </li>

            <li class="proofpoint">
              <h4 class="title">${_("Work in Teams")}</h4>
              <p>${_("Co-authors have full access to all the same authoring tools. Make your course better through a team effort.")}</p>
            </li>
          </ul>
        </div>
      </li>
    </ol>
  </section>
</div>

<div class="wrapper-content-cta wrapper">
  <section class="content content-cta">
    <header>
      <h2 class="sr">${_("Sign Up for {studio_name} Today!").format(studio_name=settings.STUDIO_SHORT_NAME)}</h2>
    </header>

    <ul class="list-actions">
      <li class="action-item">
        <a href="${reverse('signup')}" class="action action-primary">${_("Sign Up & Start Making Your {platform_name} Course").format(platform_name=settings.PLATFORM_NAME)}</a>
      </li>
      <li class="action-item">
        <a href="${reverse('login')}" class="action action-secondary">${_("Already have a {studio_name} Account? Sign In").format(studio_name=settings.STUDIO_SHORT_NAME)}</a>
      </li>
    </ul>
  </section>
</div>

<div class="content-modal" id="hiw-feature1">
  <h3 class="title">${_("Outlining Your Course")}</h3>
  <figure>
    <img src="${static.url("images/hiw-feature1.png")}" alt="" />
    <figcaption class="description">${_("Simple two-level outline to organize your course. Drag and drop, and see your course at a glance.")}</figcaption>
  </figure>

  <a href="" rel="view" class="action action-modal-close">
    <span class="icon fa fa-times-circle" aria-hidden="true"></span>
    <span class="label">${_("close modal")}</span>
  </a>
</div>

<div class="content-modal" id="hiw-feature2">
  <h3 class="title">${_("More than Just Lectures")}</h3>
  <figure>
    <img src="${static.url("images/hiw-feature2.png")}" alt="" />
    <figcaption class="description">${_("Quickly create videos, text snippets, inline discussions, and a variety of problem types.")}</figcaption>
  </figure>

  <a href="" rel="view" class="action action-modal-close">
    <span class="icon fa fa-times-circle" aria-hidden="true"></span>
    <span class="label">${_("close modal")}</span>
  </a>
</div>

<div class="content-modal" id="hiw-feature3">
  <h3 class="title">${_("Publishing on Date")}</h3>
  <figure>
    <img src="${static.url("images/hiw-feature3.png")}" alt="" />
    <figcaption class="description">${_("Simply set the date of a section or subsection, and {studio_name} will publish it to your students for you.").format(studio_name=settings.STUDIO_SHORT_NAME)}</figcaption>
  </figure>

  <a href="" rel="view" class="action action-modal-close">
    <span class="icon fa fa-times-circle" aria-hidden="true"></span>
    <span class="label">${_("close modal")}</span>
  </a>
</div>
</%block>