codecombat/app/templates/new-home-view.jade

extends /templates/base-flat

mixin box
  .well.text-center
    if me.isAnonymous() == true
      if ['home-legacy','home-legacy-left'].indexOf(view.variation) != -1
        h6#classroom-edition-header(data-i18n="new_home.classroom_edition")
        div
          button.teacher-btn.btn.btn-primary.btn-lg.btn-block(data-i18n="new_home.im_a_teacher")
        div
          a.btn.btn-forest.btn-lg.btn-block(href="/courses", data-i18n="new_home.im_a_student")
        h6#learn-to-code-header(data-i18n="new_home.learn_to_code")
        a.btn.btn-gold.btn-lg.btn-block.play-btn(href=view.playURL, data-i18n="new_home.play_now")
      else if ['home-teachers','home-dropdowns'].indexOf(view.variation) != -1
        h5#educator-header(data-i18n="new_home.teachers")
        p.small(data-i18n="new_home.class_in_box")

        if view.variation == 'home-dropdowns'
          div.form-group
            h6.control-label(data-i18n="new_home.role")
            select.form-control#request-form-role
              option(value="", data-i18n="new_home.form_select_role")
              option(data-i18n="courses.teacher", value="Teacher")
              option(data-i18n="teachers_quote.tech_coordinator", value="Technology coordinator")
              option(data-i18n="teachers_quote.advisor", value="Advisor")
              option(data-i18n="teachers_quote.principal", value="Principal")
              option(data-i18n="teachers_quote.superintendent", value="Superintendent")
              option(data-i18n="teachers_quote.parent", value="Parent")
          div.form-group
            h6.control-label(data-i18n="new_home.student_count")
            select.form-control#request-form-range
              option(value="", data-i18n="new_home.form_select_range")
              option 1-10
              option 11-50
              option 51-100
              option 101-200
              option 201-500
              option 501-1000
              option 1000+
          div
            button.btn.btn-forest.btn-lg.btn-block.request-demo(href="#",data-i18n="new_home.get_started")
        else
          div
            button.teacher-btn.btn.btn-forest.btn-lg.btn-block(data-i18n="new_home.get_started")

        if view.variation == 'home-teachers'
          h5#students-header(data-i18n="new_home.students")
          div
            button.join-class.btn.btn-primary.btn-lg.btn-block(data-i18n="new_home.join_class", href="/courses")
          div
            a.btn.btn-default.btn-lg.btn-block.play-btn(href=view.playURL, data-i18n="new_home.play_now")
        else
          h6#students-header(data-i18n="new_home.students_and_players")
          div
            a.btn.btn-primary.btn-lg.play-btn.btn-block(href=view.playURL, data-i18n="new_home.play_now")
      else
        h5#educator-header(data-i18n="new_home.start_playing_for_free")
        div
          a.btn.btn-forest.btn-lg.btn-block.play-btn(href=view.playURL, data-i18n="new_home.play_now")
        div
          button.join-class.btn.btn-default.btn-lg.btn-block(data-i18n="new_home.join_class", href="/courses")

        
        h6#classroom-edition-header(style="padding-top: 20px",data-i18n="new_home.teachers_and_educators")
        p.small(data-i18n="new_home.class_in_box")
        button.teacher-btn.btn.btn-primary.btn-lg.btn-block(data-i18n="new_home.get_started")


      if ['home-teachers','home-dropdowns','home-play-for-free'].indexOf(view.variation) != -1
        p.small
          span(data-i18n="new_home.login_switch")
          span  
          a.login-button(data-i18n="login.log_in", href="#")
    else
      h6#classroom-edition-header(data-i18n="new_home.logged_in_as")
      p.small #{me.get("email")}
      if me.isTeacher()
        div
          button.teacher-btn.btn.btn-forest.btn-lg.btn-block(data-i18n="new_home.goto_classes")
        div
          if false
            h6(data-i18n="new_home.check_out_wiki")
            a.btn.btn-primary.btn-lg.btn-block(href="https://sites.google.com/a/codecombat.com/teacher-guides/course-guides", data-i18n="new_home.educator_wiki")
          else
            h6(data-i18n="new_home.want_coco")
            a.btn.btn-primary.btn-lg.btn-block(href="/teachers/convert", data-i18n="new_home.get_started")

      else if view.justPlaysCourses()
        div
          a.btn.btn-forest.btn-lg.btn-block(href='/play/', data-i18n="courses.continue_playing")
        div
          a.btn.btn-primary.btn-lg.btn-block.play-btn(href=view.playURL, data-i18n="new_home.view_progress")
      else
        div
          a.btn.btn-forest.btn-lg.btn-block.play-btn(href=view.playURL, data-i18n="courses.continue_playing")
        div
          a.btn.btn-primary.btn-lg.btn-block(href="/user/#{me.getSlugOrID()}", data-i18n="new_home.view_profile")


      p.small
        span(data-i18n="courses.not_you")
        span  
        a.logout-btn(data-i18n="login.log_out", href="#")

  if (me.get('preferredLanguage', true) || 'en-US').split('-')[0] == 'nl'
    .well#ideal-tickets-well.text-center.hidden-xs.hidden-sm
      h6 Thuis versie:
      a.btn.btn-purple.btn-lg.btn-block(href="http://codecombat.nl/kopen") Prepaid codes (iDeal)
        

block content
  .container-fluid#jumbotron-container-fluid.alt-image
    .container
      .row.hidden-sm.hidden-xs
        case view.variation
          when 'home-legacy-left'
            .col-lg-3.col-md-4
              +box
            .col-lg-7.col-lg-offset-2.col-md-8
              h1(data-i18n="new_home.slogan")
          default
            .col-lg-7.col-md-8
              h1(data-i18n="new_home.slogan")
            .col-lg-3.col-lg-offset-2.col-md-4
              +box
      .row.hidden-lg.hidden-md
        .col-lg-7.col-md-8
          h1(data-i18n="new_home.slogan",style="margin-top: 200px")
        .col
          div(style="margin: auto; max-width: 300px")
            +box

      .row#learn-more-row
        .col-xs-12.text-center
          a#learn-more-link
            h6(data-i18n="new_home.learn_more")
            h2
              span.glyphicon.glyphicon-chevron-down      


  .container#classroom-in-box-container
    #classroom-in-box-row.row
      .col-sm-6
        h2.text-navy(data-i18n="new_home.classroom_in_a_box")
      .col-sm-6
        p(data-i18n="[html]new_home.codecombat_is")
        p(data-i18n="[html]new_home.our_courses")

    .top-screenshots
      .screenshots
        .hidden-sm.hidden-md.hidden-lg
          small(data-i18n="new_home.top_screenshots_hint")
        .screenshot-grid(title='Click to view full size')
          a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='0')
            img(src="/images/pages/home/desert.png")
        .clearfix.hidden-xs
          small(data-i18n="new_home.top_screenshots_hint")

    #feature-spread-row.row.text-center
      h3(data-i18n="new_home.designed_with")
      .col-sm-4
        img.img-circle(src="/images/pages/home/F1_typedcode.png")
        h4
          span(data-i18n="new_home.real_code")
          br
          span(data-i18n="new_home.from_the_first_level")
        p.small(data-i18n="new_home.getting_students")

      .col-sm-4
        img.img-circle(src="/images/pages/home/F2_teacherguides.png")
        h4
          span(data-i18n="new_home.educator_resources")
          br
          span(data-i18n="new_home.course_guides")
        p.small(data-i18n="new_home.teaching_computer_science")

      .col-sm-4
        img.img-circle(src="/images/pages/home/F3_accessible.png")
        h4
          span(data-i18n="new_home.accessible_to")
          br
          span(data-i18n="new_home.everyone")
        p.small(data-i18n="new_home.democratizing")

    .testimonials-rows
      .testimonials-filler-left
      .testimonials-filler-right
      .row
        .col-lg-offset-2.col-lg-7.col-sm-8
          blockquote
            h3(data-i18n="new_home.forgot_learning")

        .col-lg-2.col-sm-3.text-center
          img.img-circle(src="/images/pages/home/timmaki.png")
          h6 Tim Maki
          .small Director of Technology, Tilton School

      .row
        .col-lg-7.col-sm-8.col-sm-push-4.col-lg-push-3
          blockquote
            h3(data-i18n="new_home.wanted_to_do")

        .col-lg-2.col-sm-3.col-lg-offset-1.text-center.col-sm-pull-8.col-lg-pull-7
          img.img-circle(src="/images/pages/home/dylan.png")
          h6 Dylan
          .small 3rd Grader


    h3.text-center(data-i18n="new_home.why_games")

    #benefit-row-1.row
      #benefit-graphic-1.col-sm-6.col-sm-offset-1.col-sm-push-6
        h2(data-i18n="new_home.games_reward")
        img(src="/images/pages/home/G1_reward.png")
        #benefit-graphic-1-filler

      .col-sm-5.col-sm-pull-6
        p(data-i18n="new_home.encourage")

        p
          span.spr(data-i18n="new_home.excel")
          span “
          a(href="http://blog.mindresearch.org/blog/game-based-learning-infographic-strong-math-practices" target="_blank", data-i18n="new_home.struggle")
          span ” -
          span.spl.spr(data-i18n="new_home.kind_of_struggle")
          a(href="http://www.gamesandlearning.org/2014/06/09/teachers-on-using-games-in-class/" target="_blank", data-i18n="new_home.motivating")
          span ,
          span.spl(data-i18n="new_home.not_tedious")



    #benefit-row-2.row
      #benefit-graphic-2.col-sm-6
        h2(data-i18n="new_home.gaming_is_good")
        img(src="/images/pages/home/G2_brains.png")
        #benefit-graphic-2-filler

      .col-sm-5.col-sm-offset-1
        p
          span.spr(data-i18n="new_home.game_based")
          a(href="http://schoolsweek.co.uk/gaming-is-good-for-childrens-brains-study-suggests/" target="_blank", data-i18n="new_home.compared")
          span.spl.spr(data-i18n="new_home.conventional")
          a(href="http://dev.k-12techdecisions.com/article/game_based_learning_is_where_vygotsky_meets_dweck/P3" target="_blank", data-i18n="new_home.perform_at_higher_level")
          span .
        p
          span(data-i18n="new_home.feedback")

    #benefit-row-3.row
      #benefit-graphic-3.col-sm-6.col-sm-offset-1.col-sm-push-6
        h2(data-i18n="new_home.real_game")
        img(src="/images/pages/home/G3_game.png")
        #benefit-graphic-3-filler

      .col-sm-5.col-sm-pull-6
        p
          span(data-i18n="new_home.great_game")
        p
          span(data-i18n="new_home.agency")

    .request-demo-row.text-center
      if me.isTeacher()
        h3(data-i18n="new_home.get_started_title")
      else
        h3(data-i18n="new_home.request_demo_title")

      .teacher-screenshots
        .screenshots
          .hidden-sm.hidden-md.hidden-lg
            small(data-i18n="new_home.teacher_screenshots_hint")
          .screenshot-grid(title='Click to view full size')
            a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='1')
              img(src="/images/pages/about/forest.png")
            a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='2')
              img(src="/images/pages/about/dungeon.png")
            a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='3')
              img(src="/images/pages/about/glacier.png")
          .clearfix.hidden-xs
            small(data-i18n="new_home.teacher_screenshots_hint")

      if me.isTeacher()
        h4(data-i18n="new_home.get_started_subtitle")
        div
          a.btn.btn-primary.btn-lg(href="/courses/teachers", data-i18n="new_home.setup_a_class")
      else
        h4(data-i18n="new_home.request_demo_subtitle")
        div
          a.btn.btn-primary.btn-lg(href="/teachers/demo", data-i18n="new_home.request_demo")
        if me.isAnonymous()
          .have-an-account
            span.spr(data-i18n="new_home.have_an_account")
            a.login-button(data-i18n="new_home.log_in")

    h3.text-center(data-i18n="new_home.computer_science")
    h4.text-center
      span#school-level-label(data-i18n="new_home.show_me_lesson_time")
      select#school-level-dropdown.form-control.text-navy
        option(value='elementary', data-i18n="teachers_quote.elementary_school")
        option(value='middle', selected=true, data-i18n="teachers_quote.middle_school")
        option(value='high', data-i18n="teachers_quote.high_school")
    h5.text-center#total-hours-header
      span.spr(data-i18n="new_home.curriculum")
      span#semester-duration
    #courses-row.row
      - var conceptsSeen = {};
      - var lastScreenshot = "";
      for course, courseIndex in view.courses.models
        .col-md-3.col-sm-4
          .media.course-details(data-course-slug=course.get('slug'))
            if courseIndex === 0
              .free-course
                h6(data-i18n="new_home.ffa")
            .media-body(title=course.get('description'))
              h6.course-name= course.get('name') + ':'
              p.small
                - var total = 0;
                each concept in course.get('concepts')
                  - if (conceptsSeen[concept]) continue;
                  - conceptsSeen[concept] = true;
                  if total === 3
                    - total += 1;
                    span ...
                    - continue;
                  else if total > 3
                    - continue;
                  else if total > 0
                    span.spr ,
                  - total += 1;
                  span(data-i18n="concepts." + concept)
            img.media-object(src="/images/pages/home/course"+(courseIndex+1)+".png")
            - lastScreenshot = course.get('screenshot');
            h6.course-duration
              span.spr(data-i18n="new_home.lesson_time")
              span.course-hours= course.get('duration') || 0
              span.spl.unit(data-i18n="units.hours")
      for upcomingCourse in ['Computer Science 6', 'Computer Science 7', 'Computer Science 8']
        .col-md-3.col-sm-4
          .media.disabled
            .media-body
              h6.course-name= upcomingCourse + ':'
              p.small(data-i18n="new_home.coming_soon")
            img.media-object(src="/images/pages/home/inprogress.png")

      .clearfix
      .text-center
        h4
          img(src="/images/pages/home/course_languages.png")
          div(data-i18n="new_home.courses_available_in")

    .testimonials-rows
      .testimonials-filler-left
      .testimonials-filler-right
      .row
        .col-lg-offset-2.col-lg-7.col-sm-8
          blockquote
            h3(data-i18n="new_home.boast")

        .col-lg-2.col-sm-3.text-center
          img.img-circle(src="/images/pages/home/opensource.png")
          h6 Open Source
          .small opensource.com

      .row
        .col-lg-7.col-sm-8.col-sm-push-4.col-lg-push-3
          blockquote
            h3(data-i18n="new_home.winning")

        .col-lg-2.col-sm-3.col-lg-offset-1.text-center.col-sm-pull-8.col-lg-pull-7
          img.img-circle(src="/images/pages/home/pcmag.png")
          h6 PC Mag
          .small pcmag.com

    .request-demo-row.text-center
      h3(data-i18n="new_home.run_class")
      if me.isTeacher()
        div
          a.btn.btn-primary.btn-lg(href="/courses/teachers", data-i18n="new_home.setup_a_class")
      else
        div
          a.btn.btn-primary.btn-lg(href="/teachers/demo", data-i18n="new_home.request_demo")
        if me.isAnonymous()
          .have-an-account
            span.spr(data-i18n="new_home.have_an_account")
            a.login-button(data-i18n="new_home.log_in")


    #screenshot-lightbox.modal.fade(data-show="false")
      .modal-dialog
        .modal-content
          #screenshot-carousel.carousel
            ol.carousel-indicators
              li(data-target=".screenshot-display", data-slide-to="0").active
              li(data-target=".screenshot-display", data-slide-to="1")
              li(data-target=".screenshot-display", data-slide-to="2")
              li(data-target=".screenshot-display", data-slide-to="3")

            .carousel-inner
              .item.active
                img#screenshot-desert(src="/images/pages/home/desert.png")
              .item
                img#screenshot-forest(src="/images/pages/about/forest.png")
              .item
                img#screenshot-dungeon(src="/images/pages/about/dungeon.png")
              .item
                img#screenshot-glacier(src="/images/pages/about/glacier.png")
            a#carousel-left.left.carousel-control(href="#screenshot-carousel", role="button")
              span.glyphicon.glyphicons-chevron-left.glyphicon-chevron-left(aria-hidden="true")
              span.sr-only(data-i18n="about.previous")
            a#carousel-right.right.carousel-control(href="#screenshot-carousel", role="button")
              span.glyphicon.glyphicons-chevron-right.glyphicon-chevron-right(aria-hidden="true")
              span.sr-only(data-i18n="about.next")