extends /templates/base-flat mixin box .well.text-center if me.isAnonymous() == true h6#classroom-edition-header(data-i18n="new_home.classroom_edition") div a.teacher-btn.btn.btn-primary.btn-lg.btn-block(data-event-action="Homepage Click Teacher Button CTA", data-i18n="new_home.im_a_teacher") div a.student-btn.btn.btn-forest.btn-lg.btn-block(href="/home#create-account-student", data-event-action="Homepage Click Student Button CTA", 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-event-action="Homepage Play Now CTA", data-i18n="new_home.play_now") 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-event-action="Homepage Click My Classes CTA", data-i18n="new_home.goto_classes") div if !view.isTeacherWithDemo h6(data-i18n="new_home.want_coco") button.btn.btn-primary.btn-lg.request-demo(data-event-action="Homepage Request Demo CTA", data-i18n="new_home.request_demo") else if me.justPlaysCourses() div a.btn.btn-forest.btn-lg.btn-block.play-btn(href=view.playURL, data-event-action="Homepage Classroom Continue Playing CTA", data-i18n="courses.continue_playing") div a.btn.btn-primary.btn-lg.btn-block.play-btn(href=view.playURL, data-event-action="Homepage View Progress CTA", data-i18n="new_home.view_progress") else div a.btn.btn-forest.btn-lg.btn-block.play-btn(href=view.playURL, data-event-action="Homepage Campaign Continue Playing CTA", data-i18n="courses.continue_playing") div a.btn.btn-primary.btn-lg.btn-block.profile-btn(href=view.playURL, data-event-action="Homepage View Profile CTA", 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-xs.top-spacer(style="height: 160px") .row.hidden-sm.hidden-xs .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") .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 view.isTeacherWithDemo 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.top_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.top_screenshots_hint") if view.isTeacherWithDemo h4(data-i18n="new_home.get_started_subtitle") div button.btn.btn-primary.btn-lg.setup-class-btn(data-event-action="Homepage Setup Class", data-i18n="new_home.setup_a_class") else h4(data-i18n="new_home.request_demo_subtitle") div button.btn.btn-primary.btn-lg.request-demo(data-event-action="Homepage Request 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="login.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 = {}; 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=i18n(course.attributes, 'description')) h6.course-name= i18n(course.attributes, '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.get('slug') + ".png") 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") .col-md-3.col-sm-4 .media.disabled .media-body 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 view.isTeacherWithDemo div button.btn.btn-primary.btn-lg.setup-class-btn(data-event-action="Homepage Setup Class Page Bottom", data-i18n="new_home.setup_a_class") else div button.btn.btn-primary.btn-lg.request-demo(data-event-action="Homepage Request Demo Page Bottom", 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="login.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")