codecombat/app/templates/new-home-view.jade
phoenixeliot 3d705e5d70 Fix bugquest bugs
Fix link to /teachers/classes (fixes bugquest#20)

Fix edit button color/icon (bugquest#23)

Fix bugquest#34

Fix password input width (bugquest#33)

Center new pasword text

Fix teacher password reset endpoint (bugquest#4)

Refactor+use NewHomeView logic for user page button (Fixes bugquest#2)

Refactor teacher-password-reset endpoint

This makes it much easier to prevent collisions with other logic when PUTing new User attributes.

Add regression test for converting to teacher account

Fix email verified links, require login (fix bugquest#16)

Fix me having stale emailVerified value (Fixes bugquest#40)

Don't show JoinClassModal to students

Add paragraph to JoinClassModal (fixes bugquest#14)

Update change-password label text (fixes bugquest#30)

Fix prompting for login on Account Settings page (bugquest #10)

Show validation errors for teacher password reset (bugquest#36)

Show yellow progress dot in My Classes if anyone has started (bugquest#55)

Remove confusing text (bugquest#100)
2016-05-24 14:10:17 -07:00

411 lines
16 KiB
Text

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.have_an_account")
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 view.isTeacherWithDemo
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="nav.educator_wiki")
else
h6(data-i18n="new_home.want_coco")
a.btn.btn-primary.btn-lg.btn-block(href=view.demoRequestURL, data-i18n="new_home.get_started")
else if me.justPlaysCourses()
div
a.btn.btn-forest.btn-lg.btn-block(href=view.playURL, 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-xs.top-spacer(style="height: 160px")
.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")
.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
a.btn.btn-primary.btn-lg(href="/teachers/classes", data-i18n="new_home.setup_a_class")
else
h4(data-i18n="new_home.request_demo_subtitle")
div
a.btn.btn-primary.btn-lg(href=view.demoRequestURL, 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
a.btn.btn-primary.btn-lg(href="/teachers/classes", data-i18n="new_home.setup_a_class")
else
div
a.btn.btn-primary.btn-lg(href=view.demoRequestURL, 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")