mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-30 10:56:53 -05:00
Add new About page and refactor out flat-style
This commit is contained in:
phoenixeliot
parent
06d838a54e
commit
4b02f120e2
33 changed files with 1513 additions and 848 deletions
BIN
app/assets/images/pages/about/bracket_left.png
Executable file
BIN
app/assets/images/pages/about/bracket_left.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
app/assets/images/pages/about/bracket_right.png
Executable file
BIN
app/assets/images/pages/about/bracket_right.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
app/assets/images/pages/about/character_silouhette.png
Executable file
BIN
app/assets/images/pages/about/character_silouhette.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB |
BIN
app/assets/images/pages/about/codebackground_zoom_compressed.png
Normal file
BIN
app/assets/images/pages/about/codebackground_zoom_compressed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
app/assets/images/pages/about/desert.png
Executable file
BIN
app/assets/images/pages/about/desert.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
BIN
app/assets/images/pages/about/dungeon.png
Executable file
BIN
app/assets/images/pages/about/dungeon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 455 KiB |
BIN
app/assets/images/pages/about/forest.png
Executable file
BIN
app/assets/images/pages/about/forest.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 765 KiB |
BIN
app/assets/images/pages/about/github.png
Executable file
BIN
app/assets/images/pages/about/github.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
app/assets/images/pages/about/github_avatars.png
Normal file
BIN
app/assets/images/pages/about/github_avatars.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
BIN
app/assets/images/pages/about/glacier.png
Executable file
BIN
app/assets/images/pages/about/glacier.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1,018 KiB |
BIN
app/assets/images/pages/about/globe_green.png
Executable file
BIN
app/assets/images/pages/about/globe_green.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
app/assets/images/pages/about/globe_white.png
Executable file
BIN
app/assets/images/pages/about/globe_white.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
app/assets/images/pages/about/languages.png
Executable file
BIN
app/assets/images/pages/about/languages.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
app/assets/images/pages/about/languages_group1.png
Executable file
BIN
app/assets/images/pages/about/languages_group1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
app/assets/images/pages/about/languages_group2.png
Executable file
BIN
app/assets/images/pages/about/languages_group2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
app/assets/images/pages/about/screenshot_desert.png
Executable file
BIN
app/assets/images/pages/about/screenshot_desert.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
app/assets/images/pages/about/screenshot_dungeon.png
Executable file
BIN
app/assets/images/pages/about/screenshot_dungeon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
BIN
app/assets/images/pages/about/screenshot_forest.png
Executable file
BIN
app/assets/images/pages/about/screenshot_forest.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
app/assets/images/pages/about/screenshot_glacier.png
Executable file
BIN
app/assets/images/pages/about/screenshot_glacier.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
BIN
app/assets/images/pages/about/sketch.png
Executable file
BIN
app/assets/images/pages/about/sketch.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
|
|
@ -286,6 +286,7 @@ module.exports.thangNames = thangNames =
|
||||||
'Gom'
|
'Gom'
|
||||||
'Grek'
|
'Grek'
|
||||||
'Gror'
|
'Gror'
|
||||||
|
'Grue'
|
||||||
'Il\'Du\'duka'
|
'Il\'Du\'duka'
|
||||||
'Makas'
|
'Makas'
|
||||||
'Mogadishu'
|
'Mogadishu'
|
||||||
|
|
|
||||||
|
|
@ -545,19 +545,11 @@
|
||||||
editor_config_behaviors_description: "Autocompletes brackets, braces, and quotes."
|
editor_config_behaviors_description: "Autocompletes brackets, braces, and quotes."
|
||||||
|
|
||||||
about:
|
about:
|
||||||
why_codecombat: "Why CodeCombat?"
|
mission_title: "Our mission: make programming accessible to every student on Earth."
|
||||||
why_paragraph_1: "If you want to learn to program, you don't need lessons. You need to write a lot of code and have a great time doing it."
|
mission_description_1: "Programming is magic. It's the ability to create things from pure imagination. We started CodeCombat to give learners the feeling of wizardly power at their fingertips by using typed code."
|
||||||
why_paragraph_2_prefix: "That's what programming is about. It's gotta be fun. Not fun like"
|
mission_description_2: "As it turns out, that enables them to learn faster too. WAY faster. It's like having a conversation instead of reading a manual. We want to bring that conversation to every school and to every student, because everyone should have the chance to learn the magic of programming."
|
||||||
why_paragraph_2_italic: "yay a badge"
|
team_title: "Meet the CodeCombat team"
|
||||||
why_paragraph_2_center: "but fun like"
|
team_values: "We value open and respectful dialog, where the best idea wins. Our decisions are grounded in customer research and our process is focused on delivering tangible results for them. Everyone is hands-on, from our CEO to our Github contributors, because we value growth and learning in our team."
|
||||||
why_paragraph_2_italic_caps: "NO MOM I HAVE TO FINISH THE LEVEL!"
|
|
||||||
why_paragraph_2_suffix: "That's why CodeCombat is a multiplayer game, not a gamified lesson course. We won't stop until you can't stop--but this time, that's a good thing."
|
|
||||||
why_paragraph_3: "If you're going to get addicted to some game, get addicted to this one and become one of the wizards of the tech age."
|
|
||||||
press_title: "Bloggers/Press"
|
|
||||||
press_paragraph_1_prefix: "Want to write about us? Feel free to download and use all of the resources included in our"
|
|
||||||
press_paragraph_1_link: "press packet"
|
|
||||||
press_paragraph_1_suffix: ". All logos and images may be used without contacting us directly."
|
|
||||||
team: "Team"
|
|
||||||
nick_title: "Cofounder, CEO"
|
nick_title: "Cofounder, CEO"
|
||||||
nick_blurb: "Motivation Guru"
|
nick_blurb: "Motivation Guru"
|
||||||
matt_title: "Cofounder, CTO"
|
matt_title: "Cofounder, CTO"
|
||||||
|
|
@ -582,6 +574,49 @@
|
||||||
jose_blurb: "Taking Off"
|
jose_blurb: "Taking Off"
|
||||||
carlos_title: "Region Manager, Brazil"
|
carlos_title: "Region Manager, Brazil"
|
||||||
carlos_blurb: "Celery Man"
|
carlos_blurb: "Celery Man"
|
||||||
|
community_title: "...and our open-source community"
|
||||||
|
community_subtitle: "Over 450 contributors have helped build CodeCombat, with more joining every week!"
|
||||||
|
community_description_1: "CodeCombat is a community project, with hundreds of players volunteering to create levels, contribute to our code to add features, fix bugs, playtest, and even translate the game into 50 languages so far. Employees, contributors and the site gain by sharing ideas and pooling effort, as does the open source community in general. The site is built on numerous open source projects, and we are open sourced to give back to the community and provide code-curious players a familiar project to explore and experiment with. Anyone can join the CodeCombat community! Check out our "
|
||||||
|
community_description_link: "contribute page "
|
||||||
|
community_description_2: "for more info."
|
||||||
|
story_title: "Our story so far"
|
||||||
|
story_subtitle: "Since 2013, CodeCombat has grown from a mere set of sketches to a living, thriving game."
|
||||||
|
story_statistic_1a: "5,000,000+"
|
||||||
|
story_statistic_1b: "total players"
|
||||||
|
story_statistic_2a: "We’ve been translated into over 50 languages — our players hail from"
|
||||||
|
story_statistic_2b: "200+ countries"
|
||||||
|
story_statistic_3a: "Together, they have written"
|
||||||
|
story_statistic_3b: "1 billion lines of code and counting"
|
||||||
|
story_statistic_3c: "across six different programming languages"
|
||||||
|
story_long_way_1: "Though we've come a long way..."
|
||||||
|
story_sketch_caption: "Nick's very first sketch depicting a programming game in action."
|
||||||
|
story_long_way_2: "we still have much to do before we complete our quest, so..."
|
||||||
|
jobs_title: "Come work with us and help write CodeCombat history!"
|
||||||
|
jobs_subtitle: """Don't see a good fit but interested in keeping in touch? See our "Create Your Own" listing."""
|
||||||
|
jobs_benefits: "Employee Benefits"
|
||||||
|
jobs_benefit_1: "Competitive salary and options"
|
||||||
|
jobs_benefit_2: "15 day minimum vacation policy, excluding company holidays"
|
||||||
|
jobs_benefit_3: "Work from home flexibility"
|
||||||
|
jobs_benefit_4: "Unlimited sick/personal days"
|
||||||
|
jobs_benefit_5: "Professional development and continuing education support"
|
||||||
|
jobs_benefit_6: "Medical/dental/vision insurance"
|
||||||
|
jobs_custom_title: "Create Your Own"
|
||||||
|
jobs_custom_description: "Are you passionate about CodeCombat but don't see a job listed that matches your qualifications? Write us and show how you think you can contribute to our team. We'd love to hear from you!"
|
||||||
|
jobs_custom_contact_1: "Send us a note at "
|
||||||
|
jobs_custom_contact_2: "introducing yourself and we might get in touch in the future!"
|
||||||
|
contact_title: "Press & Contact"
|
||||||
|
contact_subtitle: "Need more information? Get in touch with us at "
|
||||||
|
screenshots_title: "Game Screenshots"
|
||||||
|
screenshots_hint: "(click to view full size)"
|
||||||
|
downloads_title: "Download Assets & Information"
|
||||||
|
about_codecombat: "About CodeCombat"
|
||||||
|
logo: "Logo"
|
||||||
|
screenshots: "Screenshots"
|
||||||
|
character_art: "Character Art"
|
||||||
|
download_all: "Download All"
|
||||||
|
location_title: "We're located in downtown SF:"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
teachers:
|
teachers:
|
||||||
who_for_title: "Who is CodeCombat for?"
|
who_for_title: "Who is CodeCombat for?"
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,327 @@
|
||||||
|
@import "app/styles/bootstrap/variables"
|
||||||
|
@import "app/styles/mixins"
|
||||||
|
@import "app/styles/style-flat"
|
||||||
|
|
||||||
#about-view
|
#about-view
|
||||||
|
|
||||||
@import "bootstrap/variables"
|
overflow: hidden
|
||||||
|
|
||||||
.team-column
|
#nav-container
|
||||||
padding-left: 0
|
min-height: 55px
|
||||||
|
nav
|
||||||
|
background: $gold
|
||||||
|
&.affix
|
||||||
|
z-index: 1
|
||||||
|
position: fixed
|
||||||
|
top: 0
|
||||||
|
width: 100%
|
||||||
|
ul
|
||||||
|
margin-top: 5px
|
||||||
|
padding-left: 0
|
||||||
|
list-style: none
|
||||||
|
li
|
||||||
|
height: 22pt
|
||||||
|
display: inline-block
|
||||||
|
margin: 10px 18px 0 18px
|
||||||
|
a
|
||||||
|
color: white
|
||||||
|
text-transform: uppercase
|
||||||
|
text-decoration: none
|
||||||
|
li.active
|
||||||
|
.label
|
||||||
|
padding-left: 0
|
||||||
|
padding-right: 0
|
||||||
|
padding-bottom: 0
|
||||||
|
margin-left: 0.6em
|
||||||
|
margin-right: 0.6em
|
||||||
|
border-bottom: 4px solid white
|
||||||
|
border-radius: 0
|
||||||
|
|
||||||
|
#jumbotron
|
||||||
|
background-color: $navy
|
||||||
|
background-image: url("/images/pages/about/codebackground_zoom_compressed.png")
|
||||||
|
background-size: cover
|
||||||
|
background-repeat: no-repeat
|
||||||
|
|
||||||
|
h1
|
||||||
|
color: white
|
||||||
|
margin-top: 100px
|
||||||
|
|
||||||
|
h2
|
||||||
|
color: white
|
||||||
|
margin-bottom: 100px
|
||||||
|
|
||||||
|
.responsive-side-margins, h3, h4, p
|
||||||
|
max-width: 460px
|
||||||
|
margin-left: auto
|
||||||
|
margin-right: auto
|
||||||
|
@media (min-width: $screen-sm-min)
|
||||||
|
max-width: inherit
|
||||||
|
|
||||||
|
h3
|
||||||
|
margin-top: 60px
|
||||||
|
@media (min-width: $screen-sm-min)
|
||||||
|
margin-top: 150px
|
||||||
|
|
||||||
|
#about-container
|
||||||
|
@media (min-width: $screen-sm-min)
|
||||||
|
margin-top: 85px
|
||||||
|
background-color: white
|
||||||
|
|
||||||
|
#mission-text
|
||||||
|
margin-top: 30px
|
||||||
|
@media (min-width: $screen-sm-min)
|
||||||
|
margin-top: 45px
|
||||||
|
|
||||||
|
#mission-graphic, #community-graphic
|
||||||
|
padding: 30px 40px
|
||||||
|
position: relative
|
||||||
|
min-height: 320px
|
||||||
|
@media (min-width: $screen-sm-min)
|
||||||
|
min-height: 250px
|
||||||
|
|
||||||
ul.thumbnails
|
h2
|
||||||
margin-left: 40px
|
color: white
|
||||||
|
width: 50%
|
||||||
|
|
||||||
|
#mission-graphic
|
||||||
|
margin-top: 30px
|
||||||
|
@media (min-width: $screen-sm-min)
|
||||||
|
margin-top: 45px
|
||||||
|
background: $navy
|
||||||
|
|
||||||
|
h2
|
||||||
|
float: right
|
||||||
|
|
||||||
|
img
|
||||||
|
position: absolute
|
||||||
|
bottom: 0
|
||||||
|
left: 0
|
||||||
|
|
||||||
|
#mission-graphic-filler
|
||||||
|
background: $navy
|
||||||
|
height: 100%
|
||||||
|
width: 2000px
|
||||||
|
position: absolute
|
||||||
|
right: 100%
|
||||||
|
top: 0
|
||||||
|
|
||||||
|
#team
|
||||||
|
ul
|
||||||
|
text-align: center
|
||||||
|
margin-top: 40px
|
||||||
padding: 0
|
padding: 0
|
||||||
|
|
||||||
li
|
li
|
||||||
list-style-type: none
|
width: 200px
|
||||||
|
height: 230px
|
||||||
|
list-style: none
|
||||||
|
display: inline-block
|
||||||
|
text-align: center
|
||||||
|
color: black
|
||||||
|
small
|
||||||
|
display: block
|
||||||
|
white-space: nowrap
|
||||||
|
.img-thumbnail
|
||||||
|
border-radius: 50%
|
||||||
|
padding: 0
|
||||||
|
background-color: $burgandy
|
||||||
|
border: 5px solid $gold
|
||||||
|
|
||||||
|
// #community
|
||||||
|
// margin-top: 100px
|
||||||
|
|
||||||
|
#community-row-1
|
||||||
|
#community-avatars
|
||||||
|
width: 90%
|
||||||
|
margin: 20px 5%
|
||||||
|
|
||||||
|
#community-row-2
|
||||||
|
margin-top: 35px
|
||||||
|
@media (min-width: $screen-sm-min)
|
||||||
|
margin-top: 70px
|
||||||
|
|
||||||
|
#community-graphic
|
||||||
|
background: $burgandy
|
||||||
|
|
||||||
img.img-thumbnail
|
img
|
||||||
background-color: transparent
|
position: absolute
|
||||||
&:hover
|
right: 0
|
||||||
background-color: rgba(200, 244, 255, 0.2)
|
bottom: 0
|
||||||
float: left
|
|
||||||
width: 80px
|
|
||||||
height: 80px
|
|
||||||
margin: 0px 10px 22px 0px
|
|
||||||
|
|
||||||
.team_name
|
#community-graphic-filler
|
||||||
font-size: 20px
|
background: $burgandy
|
||||||
margin-top: 0
|
height: 100%
|
||||||
|
width: 2000px
|
||||||
|
position: absolute
|
||||||
|
left: 100%
|
||||||
|
top: 0
|
||||||
|
|
||||||
.team_bio
|
#story
|
||||||
width: 150px
|
// margin-top: 150px
|
||||||
float: left
|
font-family: $headline-font
|
||||||
|
font-variant: normal
|
||||||
|
#story-graphic-1
|
||||||
|
max-width: 580px
|
||||||
|
margin-top: 50px
|
||||||
|
@media (min-width: $screen-sm-min)
|
||||||
|
margin-top: 80px
|
||||||
|
margin-left: auto
|
||||||
|
margin-right: auto
|
||||||
|
.media-heading
|
||||||
|
color: $burgandy
|
||||||
|
#story-graphic-2
|
||||||
|
//TODO: Fix left-margin of this
|
||||||
|
margin-top: 50px
|
||||||
|
@media (min-width: $screen-sm-min)
|
||||||
|
margin-top: 80px
|
||||||
|
margin-left: auto
|
||||||
|
margin-right: auto
|
||||||
|
max-width: 390px
|
||||||
|
.media-heading
|
||||||
|
color: $forest
|
||||||
|
#story-graphic-3
|
||||||
|
margin-top: 50px
|
||||||
|
@media (min-width: $screen-sm-min)
|
||||||
|
margin-top: 80px
|
||||||
|
p
|
||||||
|
margin-top: 30px
|
||||||
|
img
|
||||||
|
margin-top: 20px
|
||||||
|
#story-bracketed-text
|
||||||
|
width: 100%
|
||||||
|
max-width: 640px
|
||||||
|
margin: 0 auto
|
||||||
|
.text-h1
|
||||||
|
display: inline-block
|
||||||
|
margin: auto 0
|
||||||
|
color: $navy
|
||||||
|
width: 80%
|
||||||
|
vertical-align: bottom
|
||||||
|
img
|
||||||
|
margin: auto 0
|
||||||
|
#left-bracket
|
||||||
|
width: 10%
|
||||||
|
display: inline-block
|
||||||
|
#right-bracket
|
||||||
|
width: 10%
|
||||||
|
display: inline-block
|
||||||
|
#story-languages
|
||||||
|
margin-top: 50px
|
||||||
|
#language-icons
|
||||||
|
display: inline-block
|
||||||
|
padding-left: auto
|
||||||
|
padding-right: auto
|
||||||
|
|
||||||
|
#story-graphic-4
|
||||||
|
margin-left: auto
|
||||||
|
margin-right: auto
|
||||||
|
margin-top: 50px
|
||||||
|
@media (min-width: $screen-sm-min)
|
||||||
|
margin-top: 150px
|
||||||
|
p
|
||||||
|
margin-top: 20px
|
||||||
|
figure
|
||||||
|
img
|
||||||
|
display: block
|
||||||
|
margin: 0 auto
|
||||||
|
#jobs
|
||||||
|
// margin-top: 50px
|
||||||
|
// @media (min-width: $screen-sm-min)
|
||||||
|
// margin-top: 100px
|
||||||
|
#jobs-row
|
||||||
|
#benefits, .job-listing
|
||||||
|
margin-top: 65px
|
||||||
|
border: thin solid $navy
|
||||||
|
border-radius: 8px
|
||||||
|
padding: 50px
|
||||||
|
width: 370px
|
||||||
|
height: 420px
|
||||||
|
margin-left: auto
|
||||||
|
margin-right: auto
|
||||||
|
h5
|
||||||
|
text-align: center
|
||||||
|
color: inherit
|
||||||
|
li
|
||||||
|
padding-bottom: 7px
|
||||||
|
#benefits
|
||||||
|
color: white
|
||||||
|
background: $navy
|
||||||
|
ul
|
||||||
|
margin-top: 20px
|
||||||
|
.job-listing
|
||||||
|
color: $navy
|
||||||
|
background: white
|
||||||
|
// centering hack
|
||||||
|
position: relative
|
||||||
|
.label
|
||||||
|
text-transform: uppercase
|
||||||
|
color: grey
|
||||||
|
a.job-link
|
||||||
|
width: 170px
|
||||||
|
bottom: 45px
|
||||||
|
// centering hack
|
||||||
|
position: absolute
|
||||||
|
left: 50%
|
||||||
|
margin-left: -85px
|
||||||
|
p
|
||||||
|
margin-top: 15px
|
||||||
|
|
||||||
|
#files
|
||||||
|
padding: 30px 0
|
||||||
|
margin-top: 50px
|
||||||
|
border: thin solid gray
|
||||||
|
border-radius: 8px
|
||||||
|
.label
|
||||||
|
color: black
|
||||||
|
display: block
|
||||||
|
#screenshots
|
||||||
|
text-align: center
|
||||||
|
#screenshot-grid
|
||||||
|
img
|
||||||
|
display: inline-block
|
||||||
|
margin: 6.5px
|
||||||
|
|
||||||
|
#downloads-container
|
||||||
|
position: relative
|
||||||
|
height: 250px
|
||||||
|
#downloads
|
||||||
|
//TODO: How do I center this in small view?
|
||||||
|
margin: 20px auto 0
|
||||||
|
width: 260px
|
||||||
|
ul
|
||||||
|
width: 260px
|
||||||
|
margin-top: 10px
|
||||||
|
margin-bottom: 20px
|
||||||
|
margin-left: -25px
|
||||||
|
a
|
||||||
|
color: black
|
||||||
|
#download-button
|
||||||
|
margin: 0 auto
|
||||||
|
color: $navy
|
||||||
|
.glyphicon-download-alt
|
||||||
|
margin-right: 15px
|
||||||
|
vertical-align: middle
|
||||||
|
font-size: 1.5em
|
||||||
|
|
||||||
|
#screenshot-lightbox
|
||||||
|
.modal-dialog
|
||||||
|
width: auto
|
||||||
|
max-width: 1024px
|
||||||
|
|
||||||
div
|
#location
|
||||||
font-size: 12px
|
margin-top: 75px
|
||||||
line-height: 14px
|
margin-bottom: 100px
|
||||||
padding-bottom: 5px
|
text-align: center
|
||||||
|
p b
|
||||||
|
margin-top: 40px
|
||||||
|
a
|
||||||
|
color: inherit
|
||||||
|
text-decoration: underline
|
||||||
|
iframe
|
||||||
|
border: 2px solid lightgray
|
||||||
|
|
||||||
|
.anchor::before
|
||||||
|
content: ""
|
||||||
|
display: block
|
||||||
|
height: 55px
|
||||||
|
margin: -55px 0 0 0
|
||||||
|
|
@ -1,205 +1,6 @@
|
||||||
@import "app/styles/bootstrap/variables"
|
@import "app/styles/bootstrap/variables"
|
||||||
@import "app/styles/mixins"
|
@import "app/styles/mixins"
|
||||||
|
@import "app/styles/style-flat"
|
||||||
// TODO: Move flat style into probably several files and Bootstrap variables
|
|
||||||
|
|
||||||
// Variables
|
|
||||||
|
|
||||||
$headline-font: 'Arvo', serif
|
|
||||||
$body-font: 'Open Sans', sans-serif
|
|
||||||
|
|
||||||
$burgandy: #7D0101
|
|
||||||
$gold: #F2BE19
|
|
||||||
$navy: #0E4C60
|
|
||||||
$forest: #20572B
|
|
||||||
|
|
||||||
.style-flat
|
|
||||||
background: white
|
|
||||||
|
|
||||||
// Fonts
|
|
||||||
h1, h2, h3, h4, h5, h6
|
|
||||||
// Unsetting game styles
|
|
||||||
font-variant: normal
|
|
||||||
color: black
|
|
||||||
margin: 0
|
|
||||||
|
|
||||||
h1
|
|
||||||
font-family: $headline-font
|
|
||||||
font-weight: normal
|
|
||||||
font-size: 46px
|
|
||||||
line-height: 62px
|
|
||||||
|
|
||||||
h2
|
|
||||||
font-family: $body-font
|
|
||||||
font-weight: lighter
|
|
||||||
font-size: 30px
|
|
||||||
line-height: 42px
|
|
||||||
|
|
||||||
h3
|
|
||||||
font-family: $headline-font
|
|
||||||
font-weight: normal
|
|
||||||
font-size: 33px
|
|
||||||
line-height: 45px
|
|
||||||
|
|
||||||
h4
|
|
||||||
font-family: $body-font
|
|
||||||
font-weight: lighter
|
|
||||||
font-size: 22px
|
|
||||||
line-height: 32px
|
|
||||||
|
|
||||||
h5
|
|
||||||
font-family: $headline-font
|
|
||||||
font-weight: bold
|
|
||||||
font-size: 20px
|
|
||||||
line-height: 31px
|
|
||||||
|
|
||||||
h6
|
|
||||||
font-family: $body-font
|
|
||||||
font-weight: bold
|
|
||||||
font-size: 14px
|
|
||||||
line-height: 20px
|
|
||||||
|
|
||||||
p
|
|
||||||
margin: 0 0 14px
|
|
||||||
|
|
||||||
.small
|
|
||||||
font-weight: normal
|
|
||||||
font-size: 14px
|
|
||||||
line-height: 20px
|
|
||||||
|
|
||||||
font-family: $body-font
|
|
||||||
font-size: 18px
|
|
||||||
line-height: 29px
|
|
||||||
|
|
||||||
blockquote
|
|
||||||
border: none
|
|
||||||
|
|
||||||
&:before
|
|
||||||
font-family: "Monaco"
|
|
||||||
content: "\201C"
|
|
||||||
position: absolute
|
|
||||||
left: 0px
|
|
||||||
top: 20px
|
|
||||||
font-size: 40px
|
|
||||||
opacity: 0.5
|
|
||||||
|
|
||||||
// Navbar
|
|
||||||
|
|
||||||
.navbar
|
|
||||||
background: white
|
|
||||||
margin-bottom: 0
|
|
||||||
white-space: nowrap // prevent home icon from going under brand
|
|
||||||
|
|
||||||
a.navbar-brand
|
|
||||||
#logo-img
|
|
||||||
width: 230px
|
|
||||||
height: 65px
|
|
||||||
margin-right: 10px
|
|
||||||
|
|
||||||
color: $burgandy
|
|
||||||
&:hover
|
|
||||||
color: white
|
|
||||||
background: $burgandy
|
|
||||||
|
|
||||||
.glyphicon-home
|
|
||||||
position: relative
|
|
||||||
top: 3px
|
|
||||||
|
|
||||||
.navbar-toggle
|
|
||||||
color: black
|
|
||||||
margin: 30px 25px 0
|
|
||||||
|
|
||||||
.nav > li > a
|
|
||||||
// TODO: Move this to bootstrap variables for navbars
|
|
||||||
font-weight: bold
|
|
||||||
font-family: $body-font
|
|
||||||
font-size: 16px
|
|
||||||
padding: 38px 15px 37px
|
|
||||||
color: $burgandy
|
|
||||||
text-shadow: 0 0 0
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background: $burgandy
|
|
||||||
color: white
|
|
||||||
|
|
||||||
#language-dropdown-wrapper
|
|
||||||
display: inline-block
|
|
||||||
padding: 30px 10px
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
@media (max-width: $screen-sm-min)
|
|
||||||
.nav > li > a
|
|
||||||
padding: 10px 20px
|
|
||||||
#language-dropdown-wrapper
|
|
||||||
display: inline-block
|
|
||||||
padding: 10px 10px
|
|
||||||
.language-dropdown
|
|
||||||
width: 150px
|
|
||||||
|
|
||||||
.img-circle
|
|
||||||
border: $gold 8px solid
|
|
||||||
width: 98px
|
|
||||||
height: 98px // Includes the border
|
|
||||||
|
|
||||||
.user-level
|
|
||||||
position: absolute
|
|
||||||
top: 76px
|
|
||||||
right: 42px
|
|
||||||
color: $gold
|
|
||||||
text-shadow: 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black
|
|
||||||
|
|
||||||
// Buttons
|
|
||||||
|
|
||||||
.btn
|
|
||||||
border: none
|
|
||||||
border-radius: 5px
|
|
||||||
font-family: $body-font
|
|
||||||
font-weight: normal
|
|
||||||
background-image: none // overrides legacy buttons
|
|
||||||
|
|
||||||
.btn-primary, .btn-navy
|
|
||||||
background-color: $navy
|
|
||||||
color: white
|
|
||||||
|
|
||||||
.btn-primary-alt, .btn-navy-alt
|
|
||||||
background-color: white
|
|
||||||
border: 1px solid $navy
|
|
||||||
color: $navy
|
|
||||||
|
|
||||||
.btn-forest
|
|
||||||
background-color: $forest
|
|
||||||
color: white
|
|
||||||
|
|
||||||
.btn-forest-alt
|
|
||||||
background-color: white
|
|
||||||
border: 1px solid $forest
|
|
||||||
color: $forest
|
|
||||||
|
|
||||||
.btn-gold
|
|
||||||
background-color: $gold
|
|
||||||
color: white
|
|
||||||
|
|
||||||
.btn-gold-alt
|
|
||||||
background-color: white
|
|
||||||
border: 1px solid $gold
|
|
||||||
color: $gold
|
|
||||||
|
|
||||||
.btn-lg
|
|
||||||
font-size: 18px
|
|
||||||
|
|
||||||
// Classes
|
|
||||||
|
|
||||||
.text-navy
|
|
||||||
color: $navy
|
|
||||||
|
|
||||||
.bg-navy
|
|
||||||
background-color: $navy
|
|
||||||
color: white
|
|
||||||
h1, h2, h3, h4, h5, h6, a
|
|
||||||
color: white
|
|
||||||
a.btn-primary-alt
|
|
||||||
color: $navy
|
|
||||||
|
|
||||||
|
|
||||||
#new-home-view
|
#new-home-view
|
||||||
|
|
||||||
|
|
@ -464,40 +265,3 @@ $forest: #20572B
|
||||||
img
|
img
|
||||||
margin-bottom: 20px
|
margin-bottom: 20px
|
||||||
|
|
||||||
#footer
|
|
||||||
background-image: url("/images/pages/home/footer_background.png")
|
|
||||||
height: 229px
|
|
||||||
margin: -22px auto 0
|
|
||||||
color: white
|
|
||||||
|
|
||||||
@media (max-width: $screen-sm-min)
|
|
||||||
background-color: #201a15
|
|
||||||
background-image: none
|
|
||||||
height: auto
|
|
||||||
|
|
||||||
ul
|
|
||||||
margin: 30px
|
|
||||||
li:first-child
|
|
||||||
border-bottom: 1px solid white
|
|
||||||
margin-bottom: 10px
|
|
||||||
a
|
|
||||||
color: white
|
|
||||||
|
|
||||||
#final-footer
|
|
||||||
position: absolute
|
|
||||||
left: 0
|
|
||||||
right: 0
|
|
||||||
height: 60px
|
|
||||||
color: white
|
|
||||||
background-color: #463a2c
|
|
||||||
@media (max-width: $screen-sm-min)
|
|
||||||
position: inherit
|
|
||||||
padding: 20px
|
|
||||||
height: auto
|
|
||||||
|
|
||||||
a
|
|
||||||
color: white
|
|
||||||
|
|
||||||
img
|
|
||||||
width: 150px
|
|
||||||
margin: 0 10px
|
|
||||||
239
app/styles/style-flat.sass
Normal file
239
app/styles/style-flat.sass
Normal file
|
|
@ -0,0 +1,239 @@
|
||||||
|
@import "app/styles/bootstrap/variables"
|
||||||
|
@import "app/styles/mixins"
|
||||||
|
|
||||||
|
// TODO: Move flat style into probably several files and Bootstrap variables
|
||||||
|
|
||||||
|
// Variables
|
||||||
|
|
||||||
|
$headline-font: 'Arvo', serif
|
||||||
|
$body-font: 'Open Sans', sans-serif
|
||||||
|
|
||||||
|
$burgandy: #7D0101
|
||||||
|
$gold: #F2BE19
|
||||||
|
$navy: #0E4C60
|
||||||
|
$forest: #20572B
|
||||||
|
|
||||||
|
.style-flat
|
||||||
|
background: white
|
||||||
|
|
||||||
|
// Fonts
|
||||||
|
h1, h2, h3, h4, h5, h6
|
||||||
|
// Unsetting game styles
|
||||||
|
font-variant: normal
|
||||||
|
color: black
|
||||||
|
margin: 0
|
||||||
|
|
||||||
|
h1, .text-h1
|
||||||
|
font-family: $headline-font
|
||||||
|
font-weight: normal
|
||||||
|
font-size: 46px
|
||||||
|
line-height: 62px
|
||||||
|
|
||||||
|
h2, .text-h2
|
||||||
|
font-family: $body-font
|
||||||
|
font-weight: lighter
|
||||||
|
font-size: 30px
|
||||||
|
line-height: 42px
|
||||||
|
|
||||||
|
h3, .text-h3
|
||||||
|
font-family: $headline-font
|
||||||
|
font-weight: normal
|
||||||
|
font-size: 33px
|
||||||
|
line-height: 45px
|
||||||
|
|
||||||
|
h4, .text-h4
|
||||||
|
font-family: $body-font
|
||||||
|
font-weight: lighter
|
||||||
|
font-size: 22px
|
||||||
|
line-height: 32px
|
||||||
|
|
||||||
|
h5, .text-h5
|
||||||
|
font-family: $headline-font
|
||||||
|
font-weight: bold
|
||||||
|
font-size: 20px
|
||||||
|
line-height: 31px
|
||||||
|
|
||||||
|
h6, .text-h6
|
||||||
|
font-family: $body-font
|
||||||
|
font-weight: bold
|
||||||
|
font-size: 14px
|
||||||
|
line-height: 20px
|
||||||
|
|
||||||
|
p
|
||||||
|
margin: 0 0 14px
|
||||||
|
|
||||||
|
.small
|
||||||
|
font-weight: normal
|
||||||
|
font-size: 14px
|
||||||
|
line-height: 20px
|
||||||
|
|
||||||
|
font-family: $body-font
|
||||||
|
font-size: 18px
|
||||||
|
line-height: 29px
|
||||||
|
|
||||||
|
blockquote
|
||||||
|
border: none
|
||||||
|
|
||||||
|
&:before
|
||||||
|
font-family: "Monaco"
|
||||||
|
content: "\201C"
|
||||||
|
position: absolute
|
||||||
|
left: 0px
|
||||||
|
top: 20px
|
||||||
|
font-size: 40px
|
||||||
|
opacity: 0.5
|
||||||
|
|
||||||
|
// Navbar
|
||||||
|
|
||||||
|
.navbar
|
||||||
|
background: white
|
||||||
|
margin-bottom: 0
|
||||||
|
white-space: nowrap // prevent home icon from going under brand
|
||||||
|
|
||||||
|
a.navbar-brand
|
||||||
|
#logo-img
|
||||||
|
width: 230px
|
||||||
|
height: 65px
|
||||||
|
margin-right: 10px
|
||||||
|
|
||||||
|
color: $burgandy
|
||||||
|
&:hover
|
||||||
|
color: white
|
||||||
|
background: $burgandy
|
||||||
|
|
||||||
|
.glyphicon-home
|
||||||
|
position: relative
|
||||||
|
top: 3px
|
||||||
|
|
||||||
|
.navbar-toggle
|
||||||
|
color: black
|
||||||
|
margin: 30px 25px 0
|
||||||
|
|
||||||
|
.nav > li > a
|
||||||
|
// TODO: Move this to bootstrap variables for navbars
|
||||||
|
font-weight: bold
|
||||||
|
font-family: $body-font
|
||||||
|
font-size: 16px
|
||||||
|
padding: 38px 15px 37px
|
||||||
|
color: $burgandy
|
||||||
|
text-shadow: 0 0 0
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background: $burgandy
|
||||||
|
color: white
|
||||||
|
|
||||||
|
#language-dropdown-wrapper
|
||||||
|
display: inline-block
|
||||||
|
padding: 30px 10px
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
@media (max-width: $screen-sm-min)
|
||||||
|
.nav > li > a
|
||||||
|
padding: 10px 20px
|
||||||
|
#language-dropdown-wrapper
|
||||||
|
display: inline-block
|
||||||
|
padding: 10px 10px
|
||||||
|
.language-dropdown
|
||||||
|
width: 150px
|
||||||
|
|
||||||
|
.img-circle
|
||||||
|
border: $gold 8px solid
|
||||||
|
width: 98px
|
||||||
|
height: 98px // Includes the border
|
||||||
|
|
||||||
|
.user-level
|
||||||
|
position: absolute
|
||||||
|
top: 76px
|
||||||
|
right: 42px
|
||||||
|
color: $gold
|
||||||
|
text-shadow: 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
|
||||||
|
.btn
|
||||||
|
border: none
|
||||||
|
border-radius: 5px
|
||||||
|
font-family: $body-font
|
||||||
|
font-weight: normal
|
||||||
|
background-image: none // overrides legacy buttons
|
||||||
|
|
||||||
|
.btn-primary, .btn-navy
|
||||||
|
background-color: $navy
|
||||||
|
color: white
|
||||||
|
|
||||||
|
.btn-primary-alt, .btn-navy-alt
|
||||||
|
background-color: white
|
||||||
|
border: 1px solid $navy
|
||||||
|
color: $navy
|
||||||
|
|
||||||
|
.btn-forest
|
||||||
|
background-color: $forest
|
||||||
|
color: white
|
||||||
|
|
||||||
|
.btn-forest-alt
|
||||||
|
background-color: white
|
||||||
|
border: 1px solid $forest
|
||||||
|
color: $forest
|
||||||
|
|
||||||
|
.btn-gold
|
||||||
|
background-color: $gold
|
||||||
|
color: white
|
||||||
|
|
||||||
|
.btn-gold-alt
|
||||||
|
background-color: white
|
||||||
|
border: 1px solid $gold
|
||||||
|
color: $gold
|
||||||
|
|
||||||
|
.btn-lg
|
||||||
|
font-size: 18px
|
||||||
|
|
||||||
|
// Classes
|
||||||
|
|
||||||
|
.text-navy
|
||||||
|
color: $navy
|
||||||
|
|
||||||
|
.bg-navy
|
||||||
|
background-color: $navy
|
||||||
|
color: white
|
||||||
|
h1, h2, h3, h4, h5, h6, a
|
||||||
|
color: white
|
||||||
|
a.btn-primary-alt
|
||||||
|
color: $navy
|
||||||
|
|
||||||
|
#footer
|
||||||
|
background-image: url("/images/pages/home/footer_background.png")
|
||||||
|
height: 229px
|
||||||
|
margin: -22px auto 0
|
||||||
|
color: white
|
||||||
|
|
||||||
|
@media (max-width: $screen-sm-min)
|
||||||
|
background-color: #201a15
|
||||||
|
background-image: none
|
||||||
|
height: auto
|
||||||
|
|
||||||
|
ul
|
||||||
|
margin: 30px
|
||||||
|
li:first-child
|
||||||
|
border-bottom: 1px solid white
|
||||||
|
margin-bottom: 10px
|
||||||
|
a
|
||||||
|
color: white
|
||||||
|
|
||||||
|
#final-footer
|
||||||
|
position: absolute
|
||||||
|
left: 0
|
||||||
|
right: 0
|
||||||
|
height: 60px
|
||||||
|
color: white
|
||||||
|
background-color: #463a2c
|
||||||
|
@media (max-width: $screen-sm-min)
|
||||||
|
position: inherit
|
||||||
|
padding: 20px
|
||||||
|
height: auto
|
||||||
|
|
||||||
|
a
|
||||||
|
color: white
|
||||||
|
|
||||||
|
img
|
||||||
|
width: 150px
|
||||||
|
margin: 0 10px
|
||||||
|
|
@ -1,188 +1,441 @@
|
||||||
extends /templates/base
|
extends /templates/base-flat
|
||||||
|
|
||||||
block content
|
block content
|
||||||
|
.style-flat(data-spy="scroll", data-target="#nav-container")
|
||||||
|
.container-fluid#jumbotron
|
||||||
|
.container
|
||||||
|
.row
|
||||||
|
//TODO: Size these correctly
|
||||||
|
.col-xs-10
|
||||||
|
h1 If you want to learn to program, you need to write (a lot of) code.
|
||||||
|
.row
|
||||||
|
.col-xs-8
|
||||||
|
h2 At CodeCombat, our job is to make sure you're doing that with a smile on your face.
|
||||||
|
|
||||||
|
#nav-container
|
||||||
|
nav#fixed-nav.nav.navbar
|
||||||
|
.container-fluid.text-center
|
||||||
|
ul.center-block
|
||||||
|
li.active
|
||||||
|
a(href="#mission")#mission-link
|
||||||
|
small.label(data-i18n="about.mission_link")
|
||||||
|
| Mission
|
||||||
|
li
|
||||||
|
a(href="#team")#team-link
|
||||||
|
small.label(data-i18n="about.team_link")
|
||||||
|
| Team
|
||||||
|
li
|
||||||
|
a(href="#community")#community-link
|
||||||
|
small.label(data-i18n="about.community_link")
|
||||||
|
| Community
|
||||||
|
li
|
||||||
|
a(href="#story")#story-link
|
||||||
|
small.label(data-i18n="about.story_link")
|
||||||
|
| Story
|
||||||
|
li
|
||||||
|
a(href="#jobs")#jobs-link
|
||||||
|
small.label(data-i18n="about.jobs_link")
|
||||||
|
| Careers
|
||||||
|
li
|
||||||
|
a(href="#contact")#contact-link
|
||||||
|
small.label(data-i18n="about.contact_link")
|
||||||
|
| Press
|
||||||
|
|
||||||
|
#about-container.container
|
||||||
|
#mission.anchor.row
|
||||||
|
.col-sm-6#mission-graphic.responsive-side-margins
|
||||||
|
img(src="/images/pages/about/globe_white.png")
|
||||||
|
h2(data-i18n="about.mission_title")
|
||||||
|
| Our mission: make programming accessible to every student on Earth.
|
||||||
|
#mission-graphic-filler
|
||||||
|
.col-sm-5.col-sm-offset-1
|
||||||
|
#mission-text.responsive-side-margins
|
||||||
|
p(data-i18n="about.mission_description_1")
|
||||||
|
| Programming is magic. It's the ability to create things from pure imagination. We started CodeCombat to give learners the feeling of wizardly power at their fingertips by using typed code.
|
||||||
|
p(data-i18n="about.mission_description_2")
|
||||||
|
| As it turns out, that enables them to learn faster too. WAY faster. It's like having a conversation instead of reading a manual. We want to bring that conversation to every school and to every student, because everyone should have the chance to learn the magic of programming.
|
||||||
|
|
||||||
img(src="/images/pages/about/coco_comic.jpg")
|
#team.anchor
|
||||||
|
.text-center
|
||||||
.row
|
h3(data-i18n="about.team_title")
|
||||||
|
| Meet the CodeCombat team
|
||||||
.col-sm-6
|
h4.responsive-side-margins(data-i18n="about.team_values")
|
||||||
|
| We value open and respectful dialog, where the best idea wins. Our decisions are grounded in customer research and our process is focused on delivering tangible results for them. Everyone is hands-on, from our CEO to our Github contributors, because we value growth and learning in our team.
|
||||||
h2(data-i18n="about.why_codecombat")
|
ul
|
||||||
| Why CodeCombat?
|
|
||||||
|
|
||||||
p(data-i18n="about.why_paragraph_1")
|
|
||||||
| If you want to learn to program, you don't need lessons.
|
|
||||||
| You need to write a lot of code and have a great time doing it.
|
|
||||||
|
|
||||||
p
|
|
||||||
span(data-i18n="about.why_paragraph_2_prefix")
|
|
||||||
| That's what programming is about. It's gotta be fun.
|
|
||||||
| Not fun like
|
|
||||||
span
|
|
||||||
i(data-i18n="about.why_paragraph_2_italic")
|
|
||||||
| yay a badge
|
|
||||||
span
|
|
||||||
span(data-i18n="about.why_paragraph_2_center")
|
|
||||||
| but fun like
|
|
||||||
span
|
|
||||||
i(data-i18n="about.why_paragraph_2_italic_caps")
|
|
||||||
| NO MOM I HAVE TO FINISH THE LEVEL!
|
|
||||||
span
|
|
||||||
span(data-i18n="about.why_paragraph_2_suffix")
|
|
||||||
| That's why CodeCombat is a multiplayer game,
|
|
||||||
| not a gamified lesson course. We won't stop
|
|
||||||
| until you can't stop--but this time, that's a good thing.
|
|
||||||
|
|
||||||
p(data-i18n="about.why_paragraph_3")
|
|
||||||
| If you're going to get addicted to some game,
|
|
||||||
| get addicted to this one and become one of the wizards of the tech age.
|
|
||||||
|
|
||||||
h2(data-i18n="about.press_title")
|
|
||||||
| Bloggers/Press
|
|
||||||
|
|
||||||
p
|
|
||||||
span.spr(data-i18n="about.press_paragraph_1_prefix")
|
|
||||||
| Want to write about us? Feel free to download and use all of the resources included in our
|
|
||||||
a(href="https://s3.amazonaws.com/CodeCombatMisc/press_packet.zip", data-i18n="about.press_paragraph_1_link") press packet
|
|
||||||
span(data-i18n="about.press_paragraph_1_suffix")
|
|
||||||
| . All logos and images may be used without contacting us directly.
|
|
||||||
|
|
||||||
h2(data-i18n="nav.contact")
|
|
||||||
| Contact
|
|
||||||
p
|
|
||||||
span CodeCombat Inc.
|
|
||||||
br
|
|
||||||
span 360 3rd St Suite 700 (Livefyre)
|
|
||||||
br
|
|
||||||
span San Francisco, CA 94107
|
|
||||||
br
|
|
||||||
a(href='mailto:team@codecombat.com') team@codecombat.com
|
|
||||||
if me.get('preferredLanguage') == 'pt-BR'
|
|
||||||
span CodeCombat, Brazil
|
|
||||||
br
|
|
||||||
span Rua 1814 Militão Chaves
|
|
||||||
br
|
|
||||||
span Natal, Brazil, RN 59064-500
|
|
||||||
|
|
||||||
ul.col-sm-6.team-column
|
|
||||||
|
|
||||||
ul.thumbnails
|
|
||||||
|
|
||||||
li.row
|
|
||||||
|
|
||||||
h2(data-i18n="about.team") Team
|
|
||||||
|
|
||||||
// Full time
|
// Full time
|
||||||
|
li
|
||||||
|
a(href="http://www.nickwinter.net" rel="external")
|
||||||
|
img(src="/images/pages/about/nick_small.png").img-thumbnail
|
||||||
|
.team-bio
|
||||||
|
h6.label.team-name
|
||||||
|
a(href="http://www.nickwinter.net" rel="external") Nick Winter
|
||||||
|
small(data-i18n="about.nick_title")
|
||||||
|
small(data-i18n="about.nick_blurb")
|
||||||
|
|
||||||
a(href="http://www.nickwinter.net")
|
li
|
||||||
img(src="/images/pages/about/nick_small.png").img-thumbnail
|
a(href="http://www.mattlott.com/" rel="external")
|
||||||
.team_bio
|
img(src="/images/pages/about/matt_small.png").img-thumbnail
|
||||||
h4.team_name
|
.team-bio
|
||||||
a(href="http://www.nickwinter.net") Nick Winter
|
h6.label.team-name
|
||||||
div(data-i18n="about.nick_title")
|
a(href="http://www.mattlott.com/" rel="external") Matt Lott
|
||||||
div(data-i18n="about.nick_blurb")
|
small(data-i18n="about.matt_title")
|
||||||
|
small(data-i18n="about.matt_blurb")
|
||||||
|
|
||||||
a(href="http://www.mattlott.com/")
|
li
|
||||||
img(src="/images/pages/about/matt_small.png").img-thumbnail
|
a(href="http://cat.zdh.com/" rel="external")
|
||||||
.team_bio
|
img(src="/images/pages/about/cat_small.png").img-thumbnail
|
||||||
h4.team_name
|
.team-bio
|
||||||
a(href="http://www.mattlott.com/") Matt Lott
|
h6.label.team-name
|
||||||
div(data-i18n="about.matt_title")
|
a(href="http://cat.zdh.com/" rel="external") Catherine Weresow
|
||||||
div(data-i18n="about.matt_blurb")
|
small(data-i18n="about.cat_title")
|
||||||
|
small(data-i18n="about.cat_blurb")
|
||||||
|
|
||||||
li.row
|
li
|
||||||
|
img(src="/images/pages/about/scott_small.png").img-thumbnail
|
||||||
|
.team-bio
|
||||||
|
h6.label.team-name Scott Erickson
|
||||||
|
small(data-i18n="about.scott_title")
|
||||||
|
small(data-i18n="about.scott_blurb")
|
||||||
|
|
||||||
a(href="http://cat.zdh.com/")
|
li
|
||||||
img(src="/images/pages/about/cat_small.png").img-thumbnail
|
img(src="/images/pages/about/maka_small.png").img-thumbnail
|
||||||
.team_bio
|
.team-bio
|
||||||
h4.team_name
|
h6.label.team-name Michael 'Maka' Gradin
|
||||||
a(href="http://cat.zdh.com/") Catherine Weresow
|
small(data-i18n="about.maka_title")
|
||||||
div(data-i18n="about.cat_title")
|
small(data-i18n="about.maka_blurb")
|
||||||
div(data-i18n="about.cat_blurb")
|
|
||||||
|
|
||||||
img(src="/images/pages/about/scott_small.png").img-thumbnail
|
a(href="http://basicer.com/" rel="external")
|
||||||
.team_bio
|
|
||||||
h4.team_name Scott Erickson
|
li
|
||||||
div(data-i18n="about.scott_title")
|
a(href="http://basicer.com/" rel="external")
|
||||||
div(data-i18n="about.scott_blurb")
|
img(src="/images/pages/about/rob_small.png").img-thumbnail
|
||||||
|
.team-bio
|
||||||
|
h6.label.team-name
|
||||||
|
a(href="http://basicer.com/" rel="external") Rob Blanckaert
|
||||||
|
small(data-i18n="about.rob_title")
|
||||||
|
small(data-i18n="about.rob_blurb")
|
||||||
|
|
||||||
li.row
|
li
|
||||||
|
img(src="/images/pages/about/josh_c_small.png").img-thumbnail
|
||||||
|
.team-bio
|
||||||
|
h6.label.team-name Josh Callebaut
|
||||||
|
small(data-i18n="about.josh_c_title")
|
||||||
|
small(data-i18n="about.josh_c_blurb")
|
||||||
|
|
||||||
img(src="/images/pages/about/maka_small.png").img-thumbnail
|
a(href="http://robinyang.com/" rel="external")
|
||||||
.team_bio
|
|
||||||
h4.team_name Michael 'Maka' Gradin
|
li
|
||||||
div(data-i18n="about.maka_title")
|
a(href="http://robinyang.com/" rel="external")
|
||||||
div(data-i18n="about.maka_blurb")
|
img(src="/images/pages/about/robin_small.png").img-thumbnail
|
||||||
|
.team-bio
|
||||||
a(href="http://basicer.com/")
|
h6.label.team-name
|
||||||
img(src="/images/pages/about/rob_small.png").img-thumbnail
|
a(href="http://robinyang.com/" rel="external") Robin Yang
|
||||||
.team_bio
|
small(data-i18n="about.robin_title")
|
||||||
h4.team_name
|
small(data-i18n="about.robin_blurb")
|
||||||
a(href="http://basicer.com/") Rob Blanckaert
|
|
||||||
div(data-i18n="about.rob_title")
|
|
||||||
div(data-i18n="about.rob_blurb")
|
|
||||||
|
|
||||||
li.row
|
|
||||||
|
|
||||||
img(src="/images/pages/about/josh_c_small.png").img-thumbnail
|
|
||||||
.team_bio
|
|
||||||
h4.team_name Josh Callebaut
|
|
||||||
div(data-i18n="about.josh_c_title")
|
|
||||||
div(data-i18n="about.josh_c_blurb")
|
|
||||||
|
|
||||||
a(href="http://robinyang.com/")
|
|
||||||
img(src="/images/pages/about/robin_small.png").img-thumbnail
|
|
||||||
.team_bio
|
|
||||||
h4.team_name
|
|
||||||
a(href="http://robinyang.com/") Robin Yang
|
|
||||||
div(data-i18n="about.robin_title")
|
|
||||||
div(data-i18n="about.robin_blurb")
|
|
||||||
|
|
||||||
|
|
||||||
// Part time / contract
|
// Part time / contract
|
||||||
|
|
||||||
li.row
|
li
|
||||||
|
a(href="http://floor.is/lava/" rel="external")
|
||||||
|
img(src="/images/pages/about/josh_small.png").img-thumbnail
|
||||||
|
.team-bio
|
||||||
|
h6.label.team-name
|
||||||
|
a(href="http://floor.is/lava/" rel="external") Josh Lee
|
||||||
|
small(data-i18n="about.josh_title")
|
||||||
|
small(data-i18n="about.josh_blurb")
|
||||||
|
|
||||||
a(href="http://floor.is/lava/")
|
li
|
||||||
img(src="/images/pages/about/josh_small.png").img-thumbnail
|
a(href="https://soundcloud.com/taking-off" rel="external")
|
||||||
.team_bio
|
img(src="/images/pages/about/jose_small.png").img-thumbnail
|
||||||
h4.team_name
|
.team-bio
|
||||||
a(href="http://floor.is/lava/") Josh Lee
|
h6.label.team-name
|
||||||
div(data-i18n="about.josh_title")
|
a(href="https://soundcloud.com/taking-off" rel="external") Jose Antonini
|
||||||
div(data-i18n="about.josh_blurb")
|
small(data-i18n="about.jose_title")
|
||||||
|
small(data-i18n="about.jose_blurb")
|
||||||
|
|
||||||
a(href="https://soundcloud.com/taking-off")
|
li
|
||||||
img(src="/images/pages/about/jose_small.png").img-thumbnail
|
a(href="http://retrostylegames.com/" rel="external")
|
||||||
.team_bio
|
img(src="/images/pages/about/pavel_small.png").img-thumbnail
|
||||||
h4.team_name
|
.team-bio
|
||||||
a(href="https://soundcloud.com/taking-off") Jose Antonini
|
h6.label.team-name
|
||||||
div(data-i18n="about.jose_title")
|
a(href="http://retrostylegames.com/" rel="external") Pavel Konstantinov
|
||||||
div(data-i18n="about.jose_blurb")
|
small(data-i18n="about.retrostyle_title")
|
||||||
|
small(data-i18n="about.retrostyle_blurb")
|
||||||
|
|
||||||
li.row
|
li
|
||||||
|
a(href="http://retrostylegames.com/" rel="external")
|
||||||
a(href="http://retrostylegames.com/")
|
img(src="/images/pages/about/oleg_small.png").img-thumbnail
|
||||||
img(src="/images/pages/about/pavel_small.png").img-thumbnail
|
.team-bio
|
||||||
.team_bio
|
h6.label.team-name
|
||||||
h4.team_name
|
a(href="http://retrostylegames.com/" rel="external") Oleg Ulyanickiy
|
||||||
a(href="http://retrostylegames.com/") Pavel Konstantinov
|
small(data-i18n="about.retrostyle_title")
|
||||||
div(data-i18n="about.retrostyle_title")
|
small(data-i18n="about.retrostyle_blurb")
|
||||||
div(data-i18n="about.retrostyle_blurb")
|
|
||||||
|
|
||||||
a(href="http://retrostylegames.com/")
|
|
||||||
img(src="/images/pages/about/oleg_small.png").img-thumbnail
|
|
||||||
.team_bio
|
|
||||||
h4.team_name
|
|
||||||
a(href="http://retrostylegames.com/") Oleg Ulyanickiy
|
|
||||||
div(data-i18n="about.retrostyle_title")
|
|
||||||
div(data-i18n="about.retrostyle_blurb")
|
|
||||||
|
|
||||||
li.row
|
|
||||||
|
|
||||||
img(src="/images/pages/about/carlos_small.png").img-thumbnail
|
|
||||||
.team_bio
|
|
||||||
h4.team_name Carlos Maia
|
|
||||||
div(data-i18n="about.carlos_title")
|
|
||||||
div(data-i18n="about.carlos_blurb")
|
|
||||||
|
|
||||||
|
li
|
||||||
|
img(src="/images/pages/about/carlos_small.png").img-thumbnail
|
||||||
|
.team-bio
|
||||||
|
h6.label.team-name Carlos Maia
|
||||||
|
small(data-i18n="about.carlos_title")
|
||||||
|
small(data-i18n="about.carlos_blurb")
|
||||||
|
|
||||||
|
#community.anchor
|
||||||
|
#community-row-1.row.text-center
|
||||||
|
.col-sm-12
|
||||||
|
.text-center
|
||||||
|
h3(data-i18n="about.community_title")
|
||||||
|
| ...and our open-source community
|
||||||
|
h4(data-i18n="about.community_subtitle")
|
||||||
|
| Over 450 contributors have helped build CodeCombat, with more joining every week!
|
||||||
|
img(src="/images/pages/about/github_avatars.png")#community-avatars
|
||||||
|
|
||||||
|
#community-row-2.row
|
||||||
|
.col-sm-5
|
||||||
|
p.responsive-side-margins
|
||||||
|
span(data-i18n="about.community_description_1")
|
||||||
|
| CodeCombat is a community project, with hundreds of players volunteering to create levels, contribute to our code to add features, fix bugs, playtest, and even translate the game into 50 languages so far. Employees, contributors and the site gain by sharing ideas and pooling effort, as does the open source community in general. The site is built on numerous open source projects, and we are open sourced to give back to the community and provide code-curious players a familiar project to explore and experiment with. Anyone can join the CodeCombat community! Check out our
|
||||||
|
a(href="/contribute")
|
||||||
|
span(data-i18n="about.community_description_link")
|
||||||
|
| contribute page
|
||||||
|
span(data-i18n="about.community_description_2")
|
||||||
|
| for more info.
|
||||||
|
.col-sm-6.col-sm-offset-1#community-graphic.responsive-side-margins
|
||||||
|
h2 Over 450 contributors have lent their support and time to this project.
|
||||||
|
img(src="/images/pages/about/github.png")
|
||||||
|
#community-graphic-filler
|
||||||
|
|
||||||
|
#story.anchor
|
||||||
|
.text-center
|
||||||
|
h3(data-i18n="about.story_title")
|
||||||
|
| Our story so far
|
||||||
|
h4.responsive-side-margins(data-i18n="about.story_subtitle")
|
||||||
|
| Since 2013, CodeCombat has grown from a mere set of sketches to a living, thriving game.
|
||||||
|
.row
|
||||||
|
#story-graphic-1.col-lg-6
|
||||||
|
.media
|
||||||
|
.pull-left
|
||||||
|
img.media-object#story-image-1(src="/images/pages/about/Character_Silouhette.png")
|
||||||
|
.media-body
|
||||||
|
.media-heading.text-h1
|
||||||
|
span(data-i18n="about.story_statistic_1a")
|
||||||
|
| 5,000,000+
|
||||||
|
br
|
||||||
|
span(data-i18n="about.story_statistic_1b")
|
||||||
|
| total players
|
||||||
|
p.text-h5 have started their programming journey through CodeCombat
|
||||||
|
|
||||||
|
.col-lg-5.col-lg-offset-1
|
||||||
|
#story-graphic-2
|
||||||
|
.media
|
||||||
|
p.text-h5(data-i18n="about.story_statistic_2a")
|
||||||
|
| We’ve been translated into over 50 languages — our players hail from
|
||||||
|
.pull-right
|
||||||
|
img(src="/images/pages/about/globe_green.png")
|
||||||
|
.media-body
|
||||||
|
.media-heading.text-h1(data-i18n="about.story_statistic_2b")
|
||||||
|
| 200+ countries
|
||||||
|
|
||||||
|
#story-graphic-3.text-center
|
||||||
|
p
|
||||||
|
div.text-h5(data-i18n="about.story_statistic_3a")
|
||||||
|
| Together, they have written
|
||||||
|
#story-bracketed-text
|
||||||
|
div#left-bracket
|
||||||
|
img(src="/images/pages/about/bracket_left.png")
|
||||||
|
div.text-h1(data-i18n="about.story_statistic_3b")
|
||||||
|
| 1 billion lines of code and counting
|
||||||
|
div#right-bracket
|
||||||
|
img(src="/images/pages/about/bracket_right.png")
|
||||||
|
#story-languages
|
||||||
|
.text-center
|
||||||
|
.text-h5(data-i18n="about.story_statistic_3c")
|
||||||
|
| across six different programming languages
|
||||||
|
#language-icons.text-center
|
||||||
|
img.hidden-xs(src="/images/pages/about/Languages.png")
|
||||||
|
img.hidden-sm.hidden-md.hidden-lg(src="/images/pages/about/Languages_group1.png")
|
||||||
|
img.hidden-sm.hidden-md.hidden-lg(src="/images/pages/about/Languages_group2.png")
|
||||||
|
|
||||||
|
#story-graphic-4.text-center
|
||||||
|
p
|
||||||
|
div.text-h5(data-i18n="about.story_long_way_1")
|
||||||
|
| Though we've come a long way...
|
||||||
|
figure
|
||||||
|
img(src="/images/pages/about/sketch.png")
|
||||||
|
figcaption
|
||||||
|
small(data-i18n="about.story_sketch_caption")
|
||||||
|
| Nick's very first sketch depicting a programming game in action.
|
||||||
|
p
|
||||||
|
.text-h5(data-i18n="about.story_long_way_2")
|
||||||
|
| we still have much to do before we complete our quest, so...
|
||||||
|
|
||||||
|
#jobs.anchor
|
||||||
|
.text-center
|
||||||
|
h3(data-i18n="about.jobs_title")
|
||||||
|
| Come work with us and help write CodeCombat history!
|
||||||
|
h4(data-i18n="about.jobs_subtitle")
|
||||||
|
| Don't see a good fit but interested in keeping in touch? See our "Create Your Own" listing.
|
||||||
|
#jobs-row.row
|
||||||
|
.col-sm-6.col-md-5.col-md-offset-1.col-lg-4.col-lg-offset-0
|
||||||
|
#benefits
|
||||||
|
h5(data-i18n="about.jobs_benefits")
|
||||||
|
| Employee Benefits
|
||||||
|
ul
|
||||||
|
li.small(data-i18n="about.jobs_benefit_1")
|
||||||
|
| Competitive salary and options
|
||||||
|
li.small(data-i18n="about.jobs_benefit_2")
|
||||||
|
| 15 day minimum vacation policy, excluding company holidays
|
||||||
|
li.small(data-i18n="about.jobs_benefit_3")
|
||||||
|
| Work from home flexibility
|
||||||
|
li.small(data-i18n="about.jobs_benefit_4")
|
||||||
|
| Unlimited sick/personal days
|
||||||
|
li.small(data-i18n="about.jobs_benefit_5")
|
||||||
|
| Professional development and continuing education support
|
||||||
|
li.small(data-i18n="about.jobs_benefit_6")
|
||||||
|
| Medical/dental/vision insurance
|
||||||
|
.col-sm-6.col-md-5.col-lg-4
|
||||||
|
.job-listing
|
||||||
|
h5 Software Engineer, iOS
|
||||||
|
.text-center
|
||||||
|
small.label
|
||||||
|
| San Francisco • Fulltime
|
||||||
|
p.small Want to write the first iPad app for CodeCombat? We’re looking for a product-focused engineer to translate our core gameplay and educational tools into an experience that feels like it was born on the iPad.
|
||||||
|
a.job-link.btn.btn-lg.btn-navy(href="https://jobs.lever.co/codecombat/eb190007-7195-49ee-a322-893b0d1cdcb4" rel="external")
|
||||||
|
| Learn More
|
||||||
|
.col-sm-6.col-md-5.col-md-offset-1.col-lg-4.col-lg-offset-0
|
||||||
|
.job-listing
|
||||||
|
h5 Head of Sales
|
||||||
|
.text-center
|
||||||
|
small.label
|
||||||
|
| San Francisco • Fulltime
|
||||||
|
p.small School districts are scrambling to offer computer science classes to all their students as a core subject. They have had no solution, because they can't afford to hire enough programming teachers – until now.
|
||||||
|
a.job-link.btn.btn-lg.btn-navy(href="https://jobs.lever.co/codecombat/2d0194ed-7c69-4aab-b1f9-363ca4b9f04b" rel="external")
|
||||||
|
| Learn More
|
||||||
|
.col-sm-6.col-md-5.col-lg-4
|
||||||
|
.job-listing
|
||||||
|
h5 Sales Representative
|
||||||
|
.text-center
|
||||||
|
small.label
|
||||||
|
| San Francisco • Fulltime
|
||||||
|
p.small School districts are scrambling to offer computer science classes to all their students as a core subject. They have had no solution, because they can't afford to hire enough programming teachers – until now.
|
||||||
|
a.job-link.btn.btn-lg.btn-navy(href="https://jobs.lever.co/codecombat/3f6ff123-16ce-4ecb-aba3-dcf4e8927c47" rel="external")
|
||||||
|
| Learn More
|
||||||
|
.col-sm-6.col-md-5.col-md-offset-1.col-lg-4.col-lg-offset-0
|
||||||
|
.job-listing
|
||||||
|
h5(data-i18n="about.jobs_custom_title")
|
||||||
|
| Create Your Own
|
||||||
|
p.small(data-i18n="about.jobs_custom_description")
|
||||||
|
| Are you passionate about CodeCombat but don't see a job listed that matches your qualifications? Write us and show how you think you can contribute to our team. We'd love to hear from you!
|
||||||
|
p.small
|
||||||
|
span(data-i18n="about.jobs_custom_contact_1")
|
||||||
|
| Send us a note at
|
||||||
|
a(href="mailto:team@codecombat.com")
|
||||||
|
| team@codecombat.com
|
||||||
|
span(data-i18n="about.jobs_custom_contact_2")
|
||||||
|
| introducing yourself and we might get in touch in the future!
|
||||||
|
|
||||||
|
#contact.anchor
|
||||||
|
.text-center
|
||||||
|
h3(data-i18n="about.contact_title")
|
||||||
|
| Press & Contact
|
||||||
|
h4(data-i18n="about.contact_subtitle")
|
||||||
|
| Need more information? Get in touch with us at
|
||||||
|
a(href="mailto:team@codecombat.com") team@codecombat.com
|
||||||
|
|
||||||
|
#files
|
||||||
|
.row
|
||||||
|
.col-md-6.col-lg-8
|
||||||
|
#screenshots
|
||||||
|
span.label(data-i18n="about.screenshots_title")
|
||||||
|
| Game Screenshots
|
||||||
|
.hidden-sm.hidden-md.hidden-lg
|
||||||
|
small(data-i18n="about.screenshots_hint")
|
||||||
|
| (click to view full size)
|
||||||
|
#screenshot-grid
|
||||||
|
a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='0')
|
||||||
|
img(src="/images/pages/about/screenshot_desert.png")
|
||||||
|
a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='1')
|
||||||
|
img(src="/images/pages/about/screenshot_forest.png")
|
||||||
|
a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='2')
|
||||||
|
img(src="/images/pages/about/screenshot_dungeon.png")
|
||||||
|
a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='3')
|
||||||
|
img(src="/images/pages/about/screenshot_glacier.png")
|
||||||
|
.clearfix.hidden-xs
|
||||||
|
small(data-i18n="about.screenshots_hint")
|
||||||
|
| (click to view full size)
|
||||||
|
.col-md-6.col-lg-4
|
||||||
|
#downloads-container
|
||||||
|
#downloads
|
||||||
|
.label(data-i18n="about.downloads_title")
|
||||||
|
| Download Assets & Information
|
||||||
|
ul
|
||||||
|
li
|
||||||
|
a.small(href="http://files.codecombat.com/presspack/AboutCodeCombat.pdf")
|
||||||
|
span(data-i18n="about.about_codecombat")
|
||||||
|
| About CodeCombat
|
||||||
|
| (.pdf)
|
||||||
|
li
|
||||||
|
a.small(href="http://files.codecombat.com/presspack/CodeCombat-Logo.ai")
|
||||||
|
span(data-i18n="about.logo")
|
||||||
|
| Logo
|
||||||
|
| (.ai)
|
||||||
|
li
|
||||||
|
a.small(href="http://files.codecombat.com/presspack/CodeCombat-Logo.png")
|
||||||
|
span(data-i18n="about.logo")
|
||||||
|
| Logo
|
||||||
|
| (.png)
|
||||||
|
li
|
||||||
|
a.small(href="http://files.codecombat.com/presspack/GameImages.zip")
|
||||||
|
span(data-i18n="about.screenshots")
|
||||||
|
| Screenshots
|
||||||
|
| (.zip)
|
||||||
|
li
|
||||||
|
a.small(href="http://files.codecombat.com/presspack/gameimages/CodeCombat_Splash.png")
|
||||||
|
span(data-i18n="about.character_art")
|
||||||
|
| Character Art
|
||||||
|
| (.png)
|
||||||
|
.text-center
|
||||||
|
a.btn.btn-lg.btn-primary-alt#download-button(href="http://files.codecombat.com/presspack/CodeCombat_PressPack.zip")
|
||||||
|
span.glyphicon.glyphicon-download-alt
|
||||||
|
span(data-i18n="about.download_all")
|
||||||
|
| Download All
|
||||||
|
|
||||||
|
#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/about/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 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 Next
|
||||||
|
|
||||||
|
#location
|
||||||
|
.row
|
||||||
|
.col-sm-4.col-sm-offset-2
|
||||||
|
p
|
||||||
|
b CodeCombat Inc.
|
||||||
|
p 360 3rd St.
|
||||||
|
p Suite 700 (Livefyre)
|
||||||
|
p San Francisco, CA 94107
|
||||||
|
a(href="mailto:team@codecombat.com") team@codecombat.com
|
||||||
|
.col-sm-4
|
||||||
|
p
|
||||||
|
b(data-i18n="about.location_title")
|
||||||
|
| We're located in downtown SF:
|
||||||
|
iframe(width="370", height="280", frameBorder="2", src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAIGQz3OMbv5YWivScUM86-zESjEgJR2Xo&q=360+3rd+St+Suite+700,+San+Francisco,+CA+94107")
|
||||||
|
|
|
||||||
144
app/templates/base-flat.jade
Normal file
144
app/templates/base-flat.jade
Normal file
|
|
@ -0,0 +1,144 @@
|
||||||
|
.style-flat
|
||||||
|
block header
|
||||||
|
.container-fluid.text-center
|
||||||
|
.alert.alert-danger.lt-ie9
|
||||||
|
strong(data-i18n="home.no_ie") The CodeCombat game 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 gameplay was not 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 play CodeCombat. Sorry!
|
||||||
|
br
|
||||||
|
span(data-i18n="home.old_browser_suffix") You can try anyway, but it probably won't work.
|
||||||
|
|
||||||
|
nav.navbar.navbar-default
|
||||||
|
.container
|
||||||
|
.row
|
||||||
|
.col-md-3.col-sm-4
|
||||||
|
.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")
|
||||||
|
span.glyphicon.glyphicon-home
|
||||||
|
|
||||||
|
.col-md-9.col-sm-8
|
||||||
|
#navbar-collapse.collapse.navbar-collapse
|
||||||
|
ul.nav.navbar-nav.pull-left
|
||||||
|
li
|
||||||
|
a(href="/about") About
|
||||||
|
li
|
||||||
|
a(href="/courses") Courses
|
||||||
|
li
|
||||||
|
a(href="/courses/teachers") Teachers
|
||||||
|
li
|
||||||
|
a(href="https://discourse.codecombat.com/") Forum
|
||||||
|
if me.isAnonymous()
|
||||||
|
li
|
||||||
|
a#create-account-link.signup-button Create Account
|
||||||
|
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")
|
||||||
|
span.spr My Account
|
||||||
|
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")
|
||||||
|
|
||||||
|
li
|
||||||
|
#language-dropdown-wrapper
|
||||||
|
select.language-dropdown.form-control
|
||||||
|
|
||||||
|
|
||||||
|
block outer_content
|
||||||
|
#site-content-area
|
||||||
|
block content
|
||||||
|
p If this is showing, you dun goofed
|
||||||
|
|
||||||
|
block footer
|
||||||
|
#character-lineup.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.
|
||||||
|
br.hidden-lg.hidden-md
|
||||||
|
img(src="/images/pages/base/logo.png" alt="CodeCombat")
|
||||||
|
br.hidden-lg.hidden-md
|
||||||
|
span.spr Need help? Email
|
||||||
|
a(href="mailto:team@codecombat.com") team@codecombat.com
|
||||||
|
span.spl and we'll get in touch!
|
||||||
|
|
@ -1,388 +1,253 @@
|
||||||
.container-fluid.text-center
|
extends /templates/base-flat
|
||||||
.alert.alert-danger.lt-ie9
|
|
||||||
strong(data-i18n="home.no_ie") The CodeCombat game does not run in Internet Explorer 8 or older. Sorry!
|
|
||||||
|
|
||||||
if view.isIPadBrowser() || view.isMobile()
|
block content
|
||||||
.alert.alert-danger.mobile
|
.container-fluid#jumbotron-container-fluid(class=view.jumbotron === 'student' ? 'alt-image' : '')
|
||||||
strong(data-i18n="home.no_mobile") CodeCombat gameplay was not 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 play CodeCombat. Sorry!
|
|
||||||
br
|
|
||||||
span(data-i18n="home.old_browser_suffix") You can try anyway, but it probably won't work.
|
|
||||||
|
|
||||||
nav.navbar.navbar-default
|
|
||||||
.container
|
|
||||||
.row
|
|
||||||
.col-md-3.col-sm-4
|
|
||||||
.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")
|
|
||||||
span.glyphicon.glyphicon-home
|
|
||||||
|
|
||||||
.col-md-9.col-sm-8
|
|
||||||
#navbar-collapse.collapse.navbar-collapse
|
|
||||||
ul.nav.navbar-nav.pull-left
|
|
||||||
li
|
|
||||||
a(href="/about") About
|
|
||||||
li
|
|
||||||
a(href="/courses") Courses
|
|
||||||
li
|
|
||||||
a(href="/courses/teachers") Teachers
|
|
||||||
li
|
|
||||||
a(href="https://discourse.codecombat.com/") Forum
|
|
||||||
if me.isAnonymous()
|
|
||||||
li
|
|
||||||
a#create-account-link.signup-button Create Account
|
|
||||||
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")
|
|
||||||
span.spr My Account
|
|
||||||
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")
|
|
||||||
|
|
||||||
li
|
|
||||||
#language-dropdown-wrapper
|
|
||||||
select.language-dropdown.form-control
|
|
||||||
|
|
||||||
.container-fluid#jumbotron-container-fluid(class=view.jumbotron === 'student' ? 'alt-image' : '')
|
|
||||||
.container
|
|
||||||
.row
|
|
||||||
.col-lg-7.col-md-8
|
|
||||||
h1 The most engaging game for learning programming.
|
|
||||||
|
|
||||||
.col-lg-3.col-lg-offset-2.col-md-4
|
|
||||||
.well.text-center.hidden-md.hidden-lg
|
|
||||||
.row
|
|
||||||
.col-xs-8
|
|
||||||
h6 Classroom Edition:
|
|
||||||
.col-xs-4
|
|
||||||
h6 Learn to code:
|
|
||||||
.row
|
|
||||||
.col-xs-4
|
|
||||||
button#teacher-btn.btn.btn-primary.btn-lg.btn-block Teacher
|
|
||||||
.col-xs-4
|
|
||||||
a.btn.btn-forest.btn-lg.btn-block(href="/courses") Student
|
|
||||||
.col-xs-4
|
|
||||||
a.btn.btn-gold.btn-lg.btn-block(href=view.playURL) Play Now
|
|
||||||
|
|
||||||
.well.text-center.hidden-xs.hidden-sm
|
|
||||||
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-7.col-sm-8.col-sm-push-4.col-lg-push-3
|
|
||||||
blockquote
|
|
||||||
h3 Coding is something I've always wanted to do, and I never thought I would be able to learn it in school.
|
|
||||||
|
|
||||||
.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 Why is learning through games important?
|
|
||||||
|
|
||||||
#benefit-row-1.row
|
|
||||||
#benefit-graphic-1.col-sm-6.col-sm-offset-1.col-sm-push-6
|
|
||||||
h2 Games reward the productive struggle.
|
|
||||||
img(src="/images/pages/home/G1_reward.png")
|
|
||||||
#benefit-graphic-1-filler
|
|
||||||
|
|
||||||
.col-sm-5.col-sm-pull-6
|
|
||||||
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’s engaging and
|
|
||||||
a(href="http://www.gamesandlearning.org/2014/06/09/teachers-on-using-games-in-class/" target="_blank") motivating
|
|
||||||
| , not tedious.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#benefit-row-2.row
|
|
||||||
#benefit-graphic-2.col-sm-6
|
|
||||||
h2 Studies suggest gaming is good for children’s brains. (it’s 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
|
|
||||||
#benefit-graphic-3.col-sm-6.col-sm-offset-1.col-sm-push-6
|
|
||||||
h2 A real game, played with real coding.
|
|
||||||
img(src="/images/pages/home/G3_game.png")
|
|
||||||
#benefit-graphic-3-filler
|
|
||||||
|
|
||||||
.col-sm-5.col-sm-pull-6
|
|
||||||
p
|
|
||||||
| A great game is more than just badges and achievements - it’s about a player’s 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.
|
|
||||||
|
|
||||||
|
|
||||||
.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!
|
|
||||||
div
|
|
||||||
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
|
|
||||||
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(href="/courses/teachers") View my classes
|
|
||||||
span.spr.spl or
|
|
||||||
a#logout-button logout
|
|
||||||
|
|
||||||
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
|
|
||||||
h5.text-center#total-hours-header
|
|
||||||
span.spr Total curriculum hours:
|
|
||||||
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 Free for all students
|
|
||||||
.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 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")
|
|
||||||
|
|
||||||
.clearfix
|
|
||||||
.text-center
|
|
||||||
h4
|
|
||||||
img(src="/images/pages/home/course_languages.png")
|
|
||||||
div 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-7.col-sm-8.col-sm-push-4.col-lg-push-3
|
|
||||||
blockquote
|
|
||||||
h3 A winning combination of RPG gameplay and programming homework that pulls off making kid-friendly education legitimately enjoyable.
|
|
||||||
|
|
||||||
.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 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
|
.container
|
||||||
.row
|
.row
|
||||||
.col-sm-3
|
.col-lg-7.col-md-8
|
||||||
ul.list-unstyled
|
h1 The most engaging game for learning programming.
|
||||||
li
|
|
||||||
strong CodeCombat
|
.col-lg-3.col-lg-offset-2.col-md-4
|
||||||
li
|
.well.text-center.hidden-md.hidden-lg
|
||||||
a(href="/about") About
|
.row
|
||||||
li
|
.col-xs-8
|
||||||
a(href="/Careers") Jobs
|
h6 Classroom Edition:
|
||||||
li
|
.col-xs-4
|
||||||
a(href="http://blog.codecombat.com/", data-i18n="nav.blog")
|
h6 Learn to code:
|
||||||
li
|
.row
|
||||||
a(href="/legal") Legal
|
.col-xs-4
|
||||||
|
button#teacher-btn.btn.btn-primary.btn-lg.btn-block Teacher
|
||||||
|
.col-xs-4
|
||||||
|
a.btn.btn-forest.btn-lg.btn-block(href="/courses") Student
|
||||||
|
.col-xs-4
|
||||||
|
a.btn.btn-gold.btn-lg.btn-block(href=view.playURL) Play Now
|
||||||
|
|
||||||
|
.well.text-center.hidden-xs.hidden-sm
|
||||||
|
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
|
||||||
|
|
||||||
.col-sm-3
|
h6#learn-to-code-header Learn to code:
|
||||||
ul.list-unstyled
|
a.btn.btn-gold.btn-lg.btn-block(href=view.playURL) Play Now
|
||||||
li
|
.row#learn-more-row
|
||||||
strong Schools
|
.col-xs-12.text-center
|
||||||
li
|
a#learn-more-link
|
||||||
a(href="/courses/teachers") Teachers
|
h6 Learn more
|
||||||
li
|
h2
|
||||||
a(href="https://sites.google.com/a/codecombat.com/teacher-guides/") Educator Wiki
|
span.glyphicon.glyphicon-chevron-down
|
||||||
li
|
|
||||||
a(href="/teachers/quote") Request a Quote
|
|
||||||
|
.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-7.col-sm-8.col-sm-push-4.col-lg-push-3
|
||||||
|
blockquote
|
||||||
|
h3 Coding is something I've always wanted to do, and I never thought I would be able to learn it in school.
|
||||||
|
|
||||||
.col-sm-3
|
.col-lg-2.col-sm-3.col-lg-offset-1.text-center.col-sm-pull-8.col-lg-pull-7
|
||||||
ul.list-unstyled
|
img.img-circle(src="/images/pages/home/dylan.png")
|
||||||
li
|
h6 Dylan
|
||||||
strong Get Involved
|
.small 3rd Grader
|
||||||
li
|
|
||||||
a(href='/community', data-i18n="nav.community")
|
|
||||||
li
|
h3.text-center Why is learning through games important?
|
||||||
a(href="/contribute") Contribute
|
|
||||||
li
|
#benefit-row-1.row
|
||||||
a(href=view.forumLink(), data-i18n="nav.forum")
|
#benefit-graphic-1.col-sm-6.col-sm-offset-1.col-sm-push-6
|
||||||
li
|
h2 Games reward the productive struggle.
|
||||||
a(href="/play/ladder") Multiplayer
|
img(src="/images/pages/home/G1_reward.png")
|
||||||
li
|
#benefit-graphic-1-filler
|
||||||
a(href="https://github.com/codecombat/codecombat") Open source (GitHub)
|
|
||||||
.col-sm-3
|
.col-sm-5.col-sm-pull-6
|
||||||
ul.list-unstyled
|
p
|
||||||
li
|
| Gaming is a medium that encourages interaction, discovery, and trial-and-error.
|
||||||
strong Support
|
| A good game challenges the player to master skills over time,
|
||||||
li
|
| which is the same critical process students go through as they learn.
|
||||||
a(href="https://discourse.codecombat.com/t/faq-check-before-posting/1027") FAQs
|
p
|
||||||
li
|
| Games excel at rewarding “
|
||||||
a(tabindex=-1, data-toggle="coco-modal", data-target="core/ContactModal", data-i18n="nav.contact")
|
a(href="http://blog.mindresearch.org/blog/game-based-learning-infographic-strong-math-practices" target="_blank") productive struggle
|
||||||
li
|
span.spr ” - the kind of struggle that results in learning that’s engaging and
|
||||||
a(href="https://www.facebook.com/codecombat", data-i18n="nav.facebook")
|
a(href="http://www.gamesandlearning.org/2014/06/09/teachers-on-using-games-in-class/" target="_blank") motivating
|
||||||
li
|
| , not tedious.
|
||||||
a(href="https://twitter.com/codecombat", data-i18n="nav.twitter")
|
|
||||||
|
|
||||||
#final-footer.small.text-center
|
|
||||||
| Copyright ©2016 CodeCombat. All Rights Reserved.
|
#benefit-row-2.row
|
||||||
br.hidden-lg.hidden-md
|
#benefit-graphic-2.col-sm-6
|
||||||
img(src="/images/pages/base/logo.png" alt="CodeCombat")
|
h2 Studies suggest gaming is good for children’s brains. (it’s true!)
|
||||||
br.hidden-lg.hidden-md
|
img(src="/images/pages/home/G2_brains.png")
|
||||||
span.spr Need help? Email
|
#benefit-graphic-2-filler
|
||||||
a(href="mailto:team@codecombat.com") team@codecombat.com
|
|
||||||
span.spl and we'll get in touch!
|
.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
|
||||||
|
#benefit-graphic-3.col-sm-6.col-sm-offset-1.col-sm-push-6
|
||||||
|
h2 A real game, played with real coding.
|
||||||
|
img(src="/images/pages/home/G3_game.png")
|
||||||
|
#benefit-graphic-3-filler
|
||||||
|
|
||||||
|
.col-sm-5.col-sm-pull-6
|
||||||
|
p
|
||||||
|
| A great game is more than just badges and achievements - it’s about a player’s 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.
|
||||||
|
|
||||||
|
|
||||||
|
.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!
|
||||||
|
div
|
||||||
|
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
|
||||||
|
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(href="/courses/teachers") View my classes
|
||||||
|
span.spr.spl or
|
||||||
|
a#logout-button logout
|
||||||
|
|
||||||
|
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
|
||||||
|
h5.text-center#total-hours-header
|
||||||
|
span.spr Total curriculum hours:
|
||||||
|
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 Free for all students
|
||||||
|
.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 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")
|
||||||
|
|
||||||
|
.clearfix
|
||||||
|
.text-center
|
||||||
|
h4
|
||||||
|
img(src="/images/pages/home/course_languages.png")
|
||||||
|
div 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-7.col-sm-8.col-sm-push-4.col-lg-push-3
|
||||||
|
blockquote
|
||||||
|
h3 A winning combination of RPG gameplay and programming homework that pulls off making kid-friendly education legitimately enjoyable.
|
||||||
|
|
||||||
|
.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 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
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,4 +5,86 @@ module.exports = class AboutView extends RootView
|
||||||
id: 'about-view'
|
id: 'about-view'
|
||||||
template: template
|
template: template
|
||||||
|
|
||||||
logoutRedirectURL: false
|
logoutRedirectURL: false
|
||||||
|
|
||||||
|
events:
|
||||||
|
'click #mission-link': 'onClickMissionLink'
|
||||||
|
'click #team-link': 'onClickTeamLink'
|
||||||
|
'click #community-link': 'onClickCommunityLink'
|
||||||
|
'click #story-link': 'onClickStoryLink'
|
||||||
|
'click #jobs-link': 'onClickJobsLink'
|
||||||
|
'click #contact-link': 'onClickContactLink'
|
||||||
|
'click .screen-thumbnail': 'onClickScreenThumbnail'
|
||||||
|
'click #carousel-left': 'onLeftPressed'
|
||||||
|
'click #carousel-right': 'onRightPressed'
|
||||||
|
|
||||||
|
shortcuts:
|
||||||
|
'right': 'onRightPressed'
|
||||||
|
'left': 'onLeftPressed'
|
||||||
|
'esc': 'onEscapePressed'
|
||||||
|
|
||||||
|
afterRender: ->
|
||||||
|
super(arguments...)
|
||||||
|
@$('#fixed-nav').affix({
|
||||||
|
offset:
|
||||||
|
top: ->
|
||||||
|
$('#nav-container').offset().top
|
||||||
|
})
|
||||||
|
#TODO: Maybe cache top value between page resizes to save CPU
|
||||||
|
$('body').scrollspy(
|
||||||
|
target: '#nav-container'
|
||||||
|
offset: 150
|
||||||
|
)
|
||||||
|
@$('#screenshot-lightbox').modal()
|
||||||
|
|
||||||
|
@$('#screenshot-carousel').carousel({
|
||||||
|
interval: 0
|
||||||
|
keyboard: false
|
||||||
|
})
|
||||||
|
|
||||||
|
onClickMissionLink: (event) ->
|
||||||
|
event.preventDefault()
|
||||||
|
@scrollToLink('#mission')
|
||||||
|
|
||||||
|
onClickTeamLink: (event) ->
|
||||||
|
event.preventDefault()
|
||||||
|
@scrollToLink('#team')
|
||||||
|
|
||||||
|
onClickCommunityLink: (event) ->
|
||||||
|
event.preventDefault()
|
||||||
|
@scrollToLink('#community')
|
||||||
|
|
||||||
|
onClickStoryLink: (event) ->
|
||||||
|
event.preventDefault()
|
||||||
|
@scrollToLink('#story')
|
||||||
|
|
||||||
|
onClickJobsLink: (event) ->
|
||||||
|
event.preventDefault()
|
||||||
|
@scrollToLink('#jobs')
|
||||||
|
|
||||||
|
onClickContactLink: (event) ->
|
||||||
|
event.preventDefault()
|
||||||
|
@scrollToLink('#contact')
|
||||||
|
|
||||||
|
onRightPressed: (event) ->
|
||||||
|
if $('#screenshot-lightbox').data('bs.modal')?.isShown
|
||||||
|
event.preventDefault()
|
||||||
|
$('#screenshot-carousel').carousel('next')
|
||||||
|
|
||||||
|
onLeftPressed: (event) ->
|
||||||
|
if $('#screenshot-lightbox').data('bs.modal')?.isShown
|
||||||
|
event.preventDefault()
|
||||||
|
$('#screenshot-carousel').carousel('prev')
|
||||||
|
|
||||||
|
onEscapePressed: (event) ->
|
||||||
|
if $('#screenshot-lightbox').data('bs.modal')?.isShown
|
||||||
|
event.preventDefault()
|
||||||
|
$('#screenshot-lightbox').modal('hide')
|
||||||
|
|
||||||
|
onClickScreenThumbnail: (event) ->
|
||||||
|
unless $('#screenshot-lightbox').data('bs.modal')?.isShown
|
||||||
|
event.preventDefault()
|
||||||
|
# Modal opening happens automatically from bootstrap
|
||||||
|
$('#screenshot-carousel').carousel($(event.currentTarget).data("index"))
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -41,16 +41,6 @@ module.exports = class HomeView extends RootView
|
||||||
afterInsert: ->
|
afterInsert: ->
|
||||||
super(arguments...)
|
super(arguments...)
|
||||||
|
|
||||||
isOldBrowser: ->
|
|
||||||
if $.browser
|
|
||||||
majorVersion = $.browser.versionNumber
|
|
||||||
return true if $.browser.mozilla && majorVersion < 25
|
|
||||||
return true if $.browser.chrome && majorVersion < 31 # Noticed Gems in the Deep not loading with 30
|
|
||||||
return true if $.browser.safari && majorVersion < 6 # 6 might have problems with Aether, or maybe just old minors of 6: https://errorception.com/projects/51a79585ee207206390002a2/errors/547a202e1ead63ba4e4ac9fd
|
|
||||||
else
|
|
||||||
console.warn 'no more jquery browser version...'
|
|
||||||
return false
|
|
||||||
|
|
||||||
justPlaysCourses: ->
|
justPlaysCourses: ->
|
||||||
# This heuristic could be better, but currently we don't add to me.get('courseInstances') for single-player anonymous intro courses, so they have to beat a level without choosing a hero.
|
# This heuristic could be better, but currently we don't add to me.get('courseInstances') for single-player anonymous intro courses, so they have to beat a level without choosing a hero.
|
||||||
return me.get('stats')?.gamesCompleted and not me.get('heroConfig')
|
return me.get('stats')?.gamesCompleted and not me.get('heroConfig')
|
||||||
|
|
|
||||||
|
|
@ -75,14 +75,5 @@ module.exports = class NewHomeView extends RootView
|
||||||
onClickTeacherButton: ->
|
onClickTeacherButton: ->
|
||||||
@scrollToLink('.request-demo-row', 600)
|
@scrollToLink('.request-demo-row', 600)
|
||||||
|
|
||||||
isOldBrowser: ->
|
|
||||||
if $.browser
|
|
||||||
majorVersion = $.browser.versionNumber
|
|
||||||
return true if $.browser.mozilla && majorVersion < 25
|
|
||||||
return true if $.browser.chrome && majorVersion < 31 # Noticed Gems in the Deep not loading with 30
|
|
||||||
return true if $.browser.safari && majorVersion < 6 # 6 might have problems with Aether, or maybe just old minors of 6: https://errorception.com/projects/51a79585ee207206390002a2/errors/547a202e1ead63ba4e4ac9fd
|
|
||||||
else
|
|
||||||
console.warn 'no more jquery browser version...'
|
|
||||||
return false
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -171,5 +171,15 @@ module.exports = class RootView extends CocoView
|
||||||
console.warn 'Error saving language:', errors
|
console.warn 'Error saving language:', errors
|
||||||
res.success (model, response, options) ->
|
res.success (model, response, options) ->
|
||||||
#console.log 'Saved language:', newLang
|
#console.log 'Saved language:', newLang
|
||||||
|
|
||||||
|
isOldBrowser: ->
|
||||||
|
if $.browser
|
||||||
|
majorVersion = $.browser.versionNumber
|
||||||
|
return true if $.browser.mozilla && majorVersion < 25
|
||||||
|
return true if $.browser.chrome && majorVersion < 31 # Noticed Gems in the Deep not loading with 30
|
||||||
|
return true if $.browser.safari && majorVersion < 6 # 6 might have problems with Aether, or maybe just old minors of 6: https://errorception.com/projects/51a79585ee207206390002a2/errors/547a202e1ead63ba4e4ac9fd
|
||||||
|
else
|
||||||
|
console.warn 'no more jquery browser version...'
|
||||||
|
return false
|
||||||
|
|
||||||
logoutRedirectURL: '/'
|
logoutRedirectURL: '/'
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue