codecombat/app/templates/new-home-view.jade
Matt Lott e65dc8e2a5 Update homepage anonymous CTA buttons
I’m a Teacher -> /teachers/signup
I’m a Student -> /home#create-account-student
2016-08-10 13:14:41 -07:00

340 lines
14 KiB
Text

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 = {};
- 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 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")