codecombat/app/templates/new-home-view.jade
Matt Lott bce9862be2 Update request demo Ux
Renaming request quote to request demo
Changing create class wording to set up class
Showing different UI if teacher or not
Adding gameplay screenshots to homepage
Update request demo email

Closes #3449
2016-03-08 09:30:50 -08:00

309 lines
12 KiB
Text

extends /templates/base-flat
block content
.container-fluid#jumbotron-container-fluid(class=view.jumbotron === 'student' ? 'alt-image' : '')
.container
.row
.col-lg-7.col-md-8
h1(data-i18n="new_home.slogan")
.col-lg-3.col-lg-offset-2.col-md-4
.well.text-center.hidden-md.hidden-lg
.row
.col-xs-8
h6(data-i18n="new_home.classroom_edition")
.col-xs-4
h6(data-i18n="new_home.learn_to_code")
.row
.col-xs-4
button#teacher-btn.btn.btn-primary.btn-lg.btn-block(data-i18n="new_home.teacher")
.col-xs-4
a.btn.btn-forest.btn-lg.btn-block(href="/courses", data-i18n="new_home.student")
.col-xs-4
a.btn.btn-gold.btn-lg.btn-block(href=view.playURL, data-i18n="new_home.play_now")
.well.text-center.hidden-xs.hidden-sm
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(href=view.playURL, data-i18n="new_home.play_now")
.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")
.have-an-account
span.spr(data-i18n="new_home.have_an_account")
a.login-button Login
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")
.have-an-account
span.spr(data-i18n="new_home.have_an_account")
a.login-button Login
#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")