codecombat/app/templates/new-home-view.jade
2016-02-02 17:14:26 -08:00

311 lines
No EOL
12 KiB
Text
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

nav.navbar.navbar-default
.container-fluid
.navbar-header
button.navbar-toggle.collapsed(data-toggle='collapse', data-target='#navbar-collapse' aria-expanded='false')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href="/")
img#logo-img(src="/images/pages/base/logo.png")
#navbar-collapse.collapse.navbar-collapse
ul.nav.navbar-nav
li
a(href="/about") About
li
a(href="/courses/teachers") Teachers
li
a(href="https://discourse.codecombat.com/") Forum
li
a#create-account-link.signup-button Signup
li
a#login-link.login-button Login
#language-dropdown-wrapper.pull-right.hidden-xs.hidden-sm
select.language-dropdown.form-control
.container-fluid#jumbotron-container-fluid(class=view.jumbotron === 'student' ? 'alt-image' : '')
.container
.row
.col-lg-7.col-md-8.col-sm-8.col-xs-6
h1 The most engaging game for learning programming.
.col-lg-3.col-lg-offset-2.col-md-4.col-sm-4.col-xs-6
.well.text-center
h6#classroom-edition-header Classroom Edition:
div
button#teacher-btn.btn.btn-primary.btn-lg.btn-block I'm a Teacher
div
a.btn.btn-forest.btn-lg.btn-block(href="/courses") I'm a Student
h6#learn-to-code-header Learn to code:
a.btn.btn-gold.btn-lg.btn-block(href=view.playURL) Play Now
.row#learn-more-row
.col-xs-12.text-center
a#learn-more-link
h6 Learn more
h2
span.glyphicon.glyphicon-chevron-down
.container#classroom-in-box-container
#classroom-in-box-row.row
.col-sm-6
h2.text-navy A classroom in-a-box for teaching computer science.
.col-sm-6
p CodeCombat is a platform for students to learn computer science while playing through a real game.
p Our courses have been specifically playtested to excel in a classroom setting, even by teachers with little to no prior programming experience.
#feature-spread-row.row.text-center
h3 Designed with teachers in mind
.col-sm-4
img.img-circle(src="/images/pages/home/F1_typedcode.png")
h4
| Real, typed code
br
| from the first level
p.small Getting students to typed code as quickly as possible is critical to learning programming syntax and proper structure.
.col-sm-4
img.img-circle(src="/images/pages/home/F2_teacherguides.png")
h4
| Educator resources
br
| and course guides
p.small Teaching computer science does not require a costly degree, because we provide tools to support educators of all backgrounds.
.col-sm-4
img.img-circle(src="/images/pages/home/F3_accessible.png")
h4
| Accessible to
br
| everyone
p.small Democratizing the process of learning coding is at the core of our philosophy. Everyone should be able to learn to code.
.testimonials-rows
.testimonials-filler-left
.testimonials-filler-right
.row
.col-lg-offset-2.col-lg-7.col-sm-8
blockquote
h3 I think they actually forgot that they were actually learning something.
.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-2.col-sm-3.col-lg-offset-1.text-center
img.img-circle(src="/images/pages/home/dylan.png")
h6 Dylan
.small 3rd Grader
.col-lg-7.col-sm-8
blockquote
h3 Coding is something I've always wanted to do, and I never thought I would be able to learn it in school.
h3.text-center Why is learning through games important?
#benefit-row-1.row
.col-sm-5
p
| Gaming is a medium that encourages interaction, discovery, and trial-and-error.
| A good game challenges the player to master skills over time,
| which is the same critical process students go through as they learn.
p
| Games excel at rewarding “
a(href="http://blog.mindresearch.org/blog/game-based-learning-infographic-strong-math-practices" target="_blank") productive struggle
span.spr ” - the kind of struggle that results in learning thats engaging and
a(href="http://www.gamesandlearning.org/2014/06/09/teachers-on-using-games-in-class/" target="_blank") motivating
| , not tedious.
.col-sm-6.col-sm-offset-1#benefit-graphic-1
h2 Games reward the productive struggle.
img(src="/images/pages/home/G1_reward.png")
#benefit-graphic-1-filler
#benefit-row-2.row
.col-sm-6#benefit-graphic-2
h2 Studies suggest gaming is good for childrens brains. (its true!)
img(src="/images/pages/home/G2_brains.png")
#benefit-graphic-2-filler
.col-sm-5.col-sm-offset-1
p
span.spr When game-based learning systems are
a(href="http://schoolsweek.co.uk/gaming-is-good-for-childrens-brains-study-suggests/" target="_blank") compared
span.spl.spr against conventional assessment methods, the difference is clear: games are better at helping students retain knowledge, concentrate and
a(href="http://dev.k-12techdecisions.com/article/game_based_learning_is_where_vygotsky_meets_dweck/P3" target="_blank") perform at a higher level of achievement
| .
p
| Games also provide real-time feedback that allows students to adjust their solution path and understand concepts more holistically, instead of being limited to just “correct” or “incorrect” answers.
#benefit-row-3.row
.col-sm-5
p
| A great game is more than just badges and achievements - its about a players journey, well-designed puzzles, and the ability to tackle challenges with agency and confidence.
p
| CodeCombat is a game that gives players that agency and confidence with our robust typed code engine, which helps beginner and advanced students alike write proper, valid code.
.col-sm-6.col-sm-offset-1#benefit-graphic-3
h2 A real game, played with real coding.
img(src="/images/pages/home/G3_game.png")
#benefit-graphic-3-filler
#request-demo-row.text-center
h3 Curious? Request a demo and we'll show you the ropes
h4 Or create a class and see it for yourself!
p
a.btn.btn-primary.btn-lg(href="/teachers/freetrial") Request a Demo
a.btn.btn-primary-alt.btn-lg(href="/courses/teachers") Create a Class
h3.text-center Computer science courses for all ages
h4.text-center
span#school-level-label Show me lesson time estimates for:
select#school-level-dropdown.form-control.text-navy
option(value='elementary') Elementary School
option(value='middle', selected=true) Middle School
option(value='high') High School
h4#semester-duration.text-center
#courses-container
- 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 Free for all students
.media-body(title=course.get('description'))
h6.course-name= course.get('name') + ':'
p.small
- var pastFirstConcept = false;
each concept in course.get('concepts')
- if (conceptsSeen[concept]) continue;
- conceptsSeen[concept] = true;
if pastFirstConcept
span.spr ,
- pastFirstConcept = true;
span(data-i18n="concepts." + concept)
.media-object(style="background-image: url(" + course.get('screenshot') + ")")
- lastScreenshot = course.get('screenshot');
h6.course-duration
span.spr 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 Coming soon!
img.media-object(src="/images/pages/home/inprogress.png")
h6.course-duration
span.spr Lesson time:
span.course-hours 5
span.spl(data-i18n="units.hours")
.text-center
h4
img(src="/images/pages/home/course_languages.png")
| Courses are available in JavaScript, Python, and Java (coming soon!)
.testimonials-rows
.testimonials-filler-left
.testimonials-filler-right
.row
.col-lg-offset-2.col-lg-7.col-sm-8
blockquote
h3 Boasts riddles that are complex enough to fascinate gamers and coders alike.
.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-2.col-sm-3.col-lg-offset-1.text-center
img.img-circle(src="/images/pages/home/pcmag.png")
h6 PC Mag
.small pcmag.com
.col-lg-7.col-sm-8
blockquote
h3 A winning combination of RPG gameplay and programming homework that pulls off making kid-friendly education legitimately enjoyable.
.request-demo-row.text-center
h3 Everything you need to run a computer science class in your school today, no CS background required.
p
a.btn.btn-primary.btn-lg(href="/teachers/freetrial") Request a Demo
a.btn.btn-primary-alt.btn-lg(href="/courses/teachers") Create a Class
.text-center
img(src="/images/pages/home/character_lineup.png")
.container-fluid
#footer.small
.container
.row
.col-sm-3
ul.list-unstyled
li
strong CodeCombat
li
a(href="/about") About
li
a(href="/Careers") Jobs
li
a(href="http://blog.codecombat.com/", data-i18n="nav.blog")
li
a(href="/legal") Legal
.col-sm-3
ul.list-unstyled
li
strong Schools
li
a(href="/courses/teachers") Teachers
li
a(href="https://sites.google.com/a/codecombat.com/teacher-guides/") Educator Wiki
li
a(href="/teachers/quote") Request a Quote
.col-sm-3
ul.list-unstyled
li
strong Get Involved
li
a(href='/community', data-i18n="nav.community")
li
a(href="/contribute") Contribute
li
a(href=view.forumLink(), data-i18n="nav.forum")
li
a(href="/play/ladder") Multiplayer
li
a(href="https://github.com/codecombat/codecombat") Open source (GitHub)
.col-sm-3
ul.list-unstyled
li
strong Support
li
a(href="https://discourse.codecombat.com/t/faq-check-before-posting/1027") FAQs
li
a(tabindex=-1, data-toggle="coco-modal", data-target="core/ContactModal", data-i18n="nav.contact")
li
a(href="https://www.facebook.com/codecombat", data-i18n="nav.facebook")
li
a(href="https://twitter.com/codecombat", data-i18n="nav.twitter")
#final-footer.small.text-center
| Copyright ©2016 CodeCombat. All Rights Reserved.
img(src="/images/pages/base/logo.png" alt="CodeCombat")
span.spr Need help? Email
a(href="mailto:team@codecombat.com") team@codecombat.com
span.spl and we'll get in touch!