2016-02-05 14:39:06 -05:00
.container-fluid.text-center
.alert.alert-danger.lt-ie9
strong(data-i18n="home.no_ie") CodeCombat does not run in Internet Explorer 8 or older. Sorry!
if view.isIPadBrowser() || view.isMobile()
.alert.alert-danger.mobile
strong(data-i18n="home.no_mobile") CodeCombat wasn't designed for mobile devices and may not work!
else if view.isOldBrowser()
.alert.alert-danger.old-browser
strong(data-i18n="home.old_browser") Uh oh, your browser is too old to run CodeCombat. Sorry!
br
span(data-i18n="home.old_browser_suffix") You can try anyway, but it probably won't work.
2016-01-26 19:28:29 -05:00
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")
2016-02-03 13:59:54 -05:00
span.glyphicon.glyphicon-home
2016-01-26 19:28:29 -05:00
#navbar-collapse.collapse.navbar-collapse
ul.nav.navbar-nav
li
a(href="/about") About
2016-02-03 14:16:15 -05:00
li
a(href="/courses") Courses
2016-01-26 19:28:29 -05:00
li
a(href="/courses/teachers") Teachers
li
a(href="https://discourse.codecombat.com/") Forum
2016-02-03 13:59:54 -05:00
if me.isAnonymous()
li
2016-02-03 14:16:15 -05:00
a#create-account-link.signup-button Create Account
2016-02-03 13:59:54 -05:00
li
a#login-link.login-button Login
else
li.dropdown
a.dropdown-toggle(href="#", data-toggle="dropdown" role="button" aroa-haspopup="true" aria-expanded="false")
2016-02-03 14:16:15 -05:00
span.spr My Account
2016-02-03 13:59:54 -05:00
ul.dropdown-menu
li.user-dropdown-header.text-center
span.user-level= me.level()
a(href="/user/#{me.getSlugOrID()}")
img.img-circle(src=me.getPhotoURL())
h5=me.displayName()
li
a(href="/user/#{me.getSlugOrID()}" data-i18n="nav.profile")
li
a(href="/account/settings", data-i18n="play.settings")
li
a(href="/account/payments", data-i18n="account.payments")
li
a(href="/account/subscription", data-i18n="account.subscription")
li
a(href="/account/prepaid", data-i18n="account.prepaid_codes") Prepaid Codes
li
a#logout-button(data-i18n="login.log_out")
2016-01-26 19:28:29 -05:00
#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 that’
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 children’ ’
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 - it’ ’
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
2016-02-03 13:59:54 -05:00
.request-demo-row.text-center
2016-01-26 19:28:29 -05:00
h3 Curious? Request a demo and we'll show you the ropes
h4 Or create a class and see it for yourself!
2016-02-03 19:16:43 -05:00
div
2016-01-26 19:28:29 -05:00
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
2016-02-03 19:16:43 -05:00
div
if me.isAnonymous()
span.spr Already have an account?
a.login-button Login
else
span.spr You are currently logged in as #{me.broadName()}.
a#logout-button Logout?
2016-01-26 19:28:29 -05:00
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
2016-02-03 13:59:54 -05:00
h5.text-center#total-hours-header
span.spr Total curriculum hours:
span#semester-duration
2016-01-26 19:28:29 -05:00
#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)
2016-02-03 13:59:54 -05:00
img.media-object(src="/images/pages/home/course"+(courseIndex+1)+".png")
2016-01-26 19:28:29 -05:00
- 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
2016-02-02 20:14:26 -05:00
a(href="/teachers/quote") Request a Quote
2016-01-26 19:28:29 -05:00
.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!
