diff --git a/app/assets/images/pages/about/bracket_left.png b/app/assets/images/pages/about/bracket_left.png new file mode 100755 index 000000000..ee0521318 Binary files /dev/null and b/app/assets/images/pages/about/bracket_left.png differ diff --git a/app/assets/images/pages/about/bracket_right.png b/app/assets/images/pages/about/bracket_right.png new file mode 100755 index 000000000..7f4b2c11c Binary files /dev/null and b/app/assets/images/pages/about/bracket_right.png differ diff --git a/app/assets/images/pages/about/character_silouhette.png b/app/assets/images/pages/about/character_silouhette.png new file mode 100755 index 000000000..295801566 Binary files /dev/null and b/app/assets/images/pages/about/character_silouhette.png differ diff --git a/app/assets/images/pages/about/coco_comic.jpg b/app/assets/images/pages/about/coco_comic.jpg deleted file mode 100644 index 0cf405379..000000000 Binary files a/app/assets/images/pages/about/coco_comic.jpg and /dev/null differ diff --git a/app/assets/images/pages/about/codebackground_zoom_compressed.png b/app/assets/images/pages/about/codebackground_zoom_compressed.png new file mode 100644 index 000000000..41b957087 Binary files /dev/null and b/app/assets/images/pages/about/codebackground_zoom_compressed.png differ diff --git a/app/assets/images/pages/about/desert.png b/app/assets/images/pages/about/desert.png new file mode 100755 index 000000000..c3f9896e7 Binary files /dev/null and b/app/assets/images/pages/about/desert.png differ diff --git a/app/assets/images/pages/about/dungeon.png b/app/assets/images/pages/about/dungeon.png new file mode 100755 index 000000000..30cb9093a Binary files /dev/null and b/app/assets/images/pages/about/dungeon.png differ diff --git a/app/assets/images/pages/about/forest.png b/app/assets/images/pages/about/forest.png new file mode 100755 index 000000000..e38bad186 Binary files /dev/null and b/app/assets/images/pages/about/forest.png differ diff --git a/app/assets/images/pages/about/github.png b/app/assets/images/pages/about/github.png new file mode 100755 index 000000000..0f436cfe0 Binary files /dev/null and b/app/assets/images/pages/about/github.png differ diff --git a/app/assets/images/pages/about/github_avatars.png b/app/assets/images/pages/about/github_avatars.png new file mode 100644 index 000000000..349f14d71 Binary files /dev/null and b/app/assets/images/pages/about/github_avatars.png differ diff --git a/app/assets/images/pages/about/glacier.png b/app/assets/images/pages/about/glacier.png new file mode 100755 index 000000000..fe43c691c Binary files /dev/null and b/app/assets/images/pages/about/glacier.png differ diff --git a/app/assets/images/pages/about/globe_green.png b/app/assets/images/pages/about/globe_green.png new file mode 100755 index 000000000..6758c53a0 Binary files /dev/null and b/app/assets/images/pages/about/globe_green.png differ diff --git a/app/assets/images/pages/about/globe_white.png b/app/assets/images/pages/about/globe_white.png new file mode 100755 index 000000000..06c470352 Binary files /dev/null and b/app/assets/images/pages/about/globe_white.png differ diff --git a/app/assets/images/pages/about/languages.png b/app/assets/images/pages/about/languages.png new file mode 100755 index 000000000..dd5853318 Binary files /dev/null and b/app/assets/images/pages/about/languages.png differ diff --git a/app/assets/images/pages/about/languages_group1.png b/app/assets/images/pages/about/languages_group1.png new file mode 100755 index 000000000..d0ad87330 Binary files /dev/null and b/app/assets/images/pages/about/languages_group1.png differ diff --git a/app/assets/images/pages/about/languages_group2.png b/app/assets/images/pages/about/languages_group2.png new file mode 100755 index 000000000..b8b8f8f50 Binary files /dev/null and b/app/assets/images/pages/about/languages_group2.png differ diff --git a/app/assets/images/pages/about/screenshot_desert.png b/app/assets/images/pages/about/screenshot_desert.png new file mode 100755 index 000000000..bce53164d Binary files /dev/null and b/app/assets/images/pages/about/screenshot_desert.png differ diff --git a/app/assets/images/pages/about/screenshot_dungeon.png b/app/assets/images/pages/about/screenshot_dungeon.png new file mode 100755 index 000000000..d94ef6f33 Binary files /dev/null and b/app/assets/images/pages/about/screenshot_dungeon.png differ diff --git a/app/assets/images/pages/about/screenshot_forest.png b/app/assets/images/pages/about/screenshot_forest.png new file mode 100755 index 000000000..5a7e06e59 Binary files /dev/null and b/app/assets/images/pages/about/screenshot_forest.png differ diff --git a/app/assets/images/pages/about/screenshot_glacier.png b/app/assets/images/pages/about/screenshot_glacier.png new file mode 100755 index 000000000..6deb148d9 Binary files /dev/null and b/app/assets/images/pages/about/screenshot_glacier.png differ diff --git a/app/assets/images/pages/about/sketch.png b/app/assets/images/pages/about/sketch.png new file mode 100755 index 000000000..b8e90598d Binary files /dev/null and b/app/assets/images/pages/about/sketch.png differ diff --git a/app/core/forms.coffee b/app/core/forms.coffee index 3758de515..698af21a9 100644 --- a/app/core/forms.coffee +++ b/app/core/forms.coffee @@ -83,8 +83,8 @@ module.exports.setErrorToProperty = setErrorToProperty = (el, property, message, setErrorToField input, message, warning module.exports.scrollToFirstError = ($el=$('body')) -> - $first = $el.find('.has-error, .alert-danger, .error-help-block, .has-warning, .alert-warning, .warning-help-block').first() - $('body').animate({ scrollTop: $first.offset().top - 20 }, 300) + $first = $el.find('.has-error, .alert-danger, .error-help-block, .has-warning, .alert-warning, .warning-help-block').filter(':visible').first() + $('html, body').animate({ scrollTop: $first.offset().top - 20 }, 300) module.exports.clearFormAlerts = (el) -> $('.has-error', el).removeClass('has-error') diff --git a/app/lib/LevelSetupManager.coffee b/app/lib/LevelSetupManager.coffee index 1b66c5bf5..78d0c7205 100644 --- a/app/lib/LevelSetupManager.coffee +++ b/app/lib/LevelSetupManager.coffee @@ -25,7 +25,7 @@ module.exports = class LevelSetupManager extends CocoClass loadLevel: -> levelURL = "/db/level/#{@options.levelID}" @level = new Level().setURL levelURL - @level = @supermodel.loadModel(@level, 'level').model + @level = @supermodel.loadModel(@level).model if @level.loaded then @onLevelSync() else @listenToOnce @level, 'sync', @onLevelSync loadSession: -> @@ -33,7 +33,7 @@ module.exports = class LevelSetupManager extends CocoClass #sessionURL += "?team=#{@team}" if @options.team # TODO: figure out how to get the teams for multiplayer PVP hero style sessionURL += "?course=#{@options.courseID}" if @options.courseID @session = new LevelSession().setURL sessionURL - @session = @supermodel.loadModel(@session, 'level_session').model + @session = @supermodel.loadModel(@session).model if @session.loaded then @onSessionSync() else @listenToOnce @session, 'sync', @onSessionSync onLevelSync: -> diff --git a/app/lib/world/names.coffee b/app/lib/world/names.coffee index ecbb007b7..01b39d5df 100644 --- a/app/lib/world/names.coffee +++ b/app/lib/world/names.coffee @@ -286,6 +286,7 @@ module.exports.thangNames = thangNames = 'Gom' 'Grek' 'Gror' + 'Grue' 'Il\'Du\'duka' 'Makas' 'Mogadishu' diff --git a/app/locale/en.coffee b/app/locale/en.coffee index 0e288357e..01213ec2f 100644 --- a/app/locale/en.coffee +++ b/app/locale/en.coffee @@ -545,19 +545,11 @@ editor_config_behaviors_description: "Autocompletes brackets, braces, and quotes." about: - why_codecombat: "Why CodeCombat?" - 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." - why_paragraph_2_prefix: "That's what programming is about. It's gotta be fun. Not fun like" - why_paragraph_2_italic: "yay a badge" - why_paragraph_2_center: "but fun like" - 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" + mission_title: "Our mission: make programming accessible to every student on Earth." + 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." + 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." + team_title: "Meet the CodeCombat team" + 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." nick_title: "Cofounder, CEO" nick_blurb: "Motivation Guru" matt_title: "Cofounder, CTO" @@ -582,6 +574,49 @@ jose_blurb: "Taking Off" carlos_title: "Region Manager, Brazil" 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: who_for_title: "Who is CodeCombat for?" diff --git a/app/models/SuperModel.coffee b/app/models/SuperModel.coffee index 39b44b579..6541b1bac 100644 --- a/app/models/SuperModel.coffee +++ b/app/models/SuperModel.coffee @@ -85,11 +85,11 @@ module.exports = class SuperModel extends Backbone.Model trackModel: (model, value) -> res = @addModelResource(collection, '', {}, value) res.listen() - + trackCollection: (collection, value) -> res = @addModelResource(collection, '', {}, value) res.listen() - + # replace or overwrite shouldSaveBackups: (model) -> false @@ -285,7 +285,7 @@ class ModelResource extends Resource fetchModel: -> @jqxhr = @model.fetch(@fetchOptions) unless @model.loading @listen() - + listen: -> @listenToOnce @model, 'sync', -> @markLoaded() @listenToOnce @model, 'error', -> @markFailed() diff --git a/app/styles/about.sass b/app/styles/about.sass index d067f2455..a9777428f 100644 --- a/app/styles/about.sass +++ b/app/styles/about.sass @@ -1,36 +1,327 @@ +@import "app/styles/bootstrap/variables" +@import "app/styles/mixins" +@import "app/styles/style-flat" + #about-view - @import "bootstrap/variables" + overflow: hidden - .team-column - padding-left: 0 + #nav-container + 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 - margin-left: 40px + h2 + 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 - 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 - background-color: transparent - &:hover - background-color: rgba(200, 244, 255, 0.2) - float: left - width: 80px - height: 80px - margin: 0px 10px 22px 0px + img + position: absolute + right: 0 + bottom: 0 - .team_name - font-size: 20px - margin-top: 0 + #community-graphic-filler + background: $burgandy + height: 100% + width: 2000px + position: absolute + left: 100% + top: 0 - .team_bio - width: 150px - float: left + #story + // margin-top: 150px + 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 - font-size: 12px - line-height: 14px - padding-bottom: 5px \ No newline at end of file + #location + margin-top: 75px + margin-bottom: 100px + 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 \ No newline at end of file diff --git a/app/styles/new-home-view.sass b/app/styles/new-home-view.sass index a6b2ae9c2..2f14dcf87 100644 --- a/app/styles/new-home-view.sass +++ b/app/styles/new-home-view.sass @@ -1,205 +1,6 @@ @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 - 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 - +@import "app/styles/style-flat" #new-home-view @@ -464,40 +265,3 @@ $forest: #20572B img 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 \ No newline at end of file diff --git a/app/styles/request-quote-view.sass b/app/styles/request-quote-view.sass index ce0750610..9749a4752 100644 --- a/app/styles/request-quote-view.sass +++ b/app/styles/request-quote-view.sass @@ -1,27 +1,32 @@ #request-quote-view - - label - margin-bottom: 2px - - .row - margin: 10px 0 + #site-content-area + //TODO: Maybe this should go in style-flat + margin: 50px 10px 100px + .section + margin-top: 80px + margin-bottom: 50px + + .form-group + label + margin-bottom: 0 + + label.checkbox + font-weight: normal + .help-block - margin: 0 + margin: -4px 0 2px p margin: 0 0 20px - hr - margin: 30px 0 - .checkbox, .checkbox-inline - margin: 0 - - #anything-else-row - margin: 50px 0 20px + input + margin-top: 8px #other-education-level-input + label + display: inline-block display: inline-block width: 200px margin-left: 5px diff --git a/app/styles/style-flat.sass b/app/styles/style-flat.sass new file mode 100644 index 000000000..7edea5ac6 --- /dev/null +++ b/app/styles/style-flat.sass @@ -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 diff --git a/app/templates/about.jade b/app/templates/about.jade index a420ab3cf..dbb022f1c 100644 --- a/app/templates/about.jade +++ b/app/templates/about.jade @@ -1,188 +1,441 @@ -extends /templates/base +extends /templates/base-flat 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") - - .row - - .col-sm-6 - - h2(data-i18n="about.why_codecombat") - | 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 - + #team.anchor + .text-center + h3(data-i18n="about.team_title") + | Meet the CodeCombat team + 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. + ul // 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") - img(src="/images/pages/about/nick_small.png").img-thumbnail - .team_bio - h4.team_name - a(href="http://www.nickwinter.net") Nick Winter - div(data-i18n="about.nick_title") - div(data-i18n="about.nick_blurb") + li + a(href="http://www.mattlott.com/" rel="external") + img(src="/images/pages/about/matt_small.png").img-thumbnail + .team-bio + h6.label.team-name + a(href="http://www.mattlott.com/" rel="external") Matt Lott + small(data-i18n="about.matt_title") + small(data-i18n="about.matt_blurb") - a(href="http://www.mattlott.com/") - img(src="/images/pages/about/matt_small.png").img-thumbnail - .team_bio - h4.team_name - a(href="http://www.mattlott.com/") Matt Lott - div(data-i18n="about.matt_title") - div(data-i18n="about.matt_blurb") + li + a(href="http://cat.zdh.com/" rel="external") + img(src="/images/pages/about/cat_small.png").img-thumbnail + .team-bio + h6.label.team-name + a(href="http://cat.zdh.com/" rel="external") Catherine Weresow + 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/") - img(src="/images/pages/about/cat_small.png").img-thumbnail - .team_bio - h4.team_name - a(href="http://cat.zdh.com/") Catherine Weresow - div(data-i18n="about.cat_title") - div(data-i18n="about.cat_blurb") + li + img(src="/images/pages/about/maka_small.png").img-thumbnail + .team-bio + h6.label.team-name Michael 'Maka' Gradin + small(data-i18n="about.maka_title") + small(data-i18n="about.maka_blurb") - img(src="/images/pages/about/scott_small.png").img-thumbnail - .team_bio - h4.team_name Scott Erickson - div(data-i18n="about.scott_title") - div(data-i18n="about.scott_blurb") + a(href="http://basicer.com/" rel="external") + + li + a(href="http://basicer.com/" rel="external") + 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 - .team_bio - h4.team_name Michael 'Maka' Gradin - div(data-i18n="about.maka_title") - div(data-i18n="about.maka_blurb") - - a(href="http://basicer.com/") - img(src="/images/pages/about/rob_small.png").img-thumbnail - .team_bio - h4.team_name - 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") + a(href="http://robinyang.com/" rel="external") + + li + a(href="http://robinyang.com/" rel="external") + img(src="/images/pages/about/robin_small.png").img-thumbnail + .team-bio + h6.label.team-name + a(href="http://robinyang.com/" rel="external") Robin Yang + small(data-i18n="about.robin_title") + small(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/") - img(src="/images/pages/about/josh_small.png").img-thumbnail - .team_bio - h4.team_name - a(href="http://floor.is/lava/") Josh Lee - div(data-i18n="about.josh_title") - div(data-i18n="about.josh_blurb") + li + a(href="https://soundcloud.com/taking-off" rel="external") + img(src="/images/pages/about/jose_small.png").img-thumbnail + .team-bio + h6.label.team-name + a(href="https://soundcloud.com/taking-off" rel="external") Jose Antonini + small(data-i18n="about.jose_title") + small(data-i18n="about.jose_blurb") - a(href="https://soundcloud.com/taking-off") - img(src="/images/pages/about/jose_small.png").img-thumbnail - .team_bio - h4.team_name - a(href="https://soundcloud.com/taking-off") Jose Antonini - div(data-i18n="about.jose_title") - div(data-i18n="about.jose_blurb") + li + a(href="http://retrostylegames.com/" rel="external") + img(src="/images/pages/about/pavel_small.png").img-thumbnail + .team-bio + h6.label.team-name + a(href="http://retrostylegames.com/" rel="external") Pavel Konstantinov + small(data-i18n="about.retrostyle_title") + small(data-i18n="about.retrostyle_blurb") - li.row - - a(href="http://retrostylegames.com/") - img(src="/images/pages/about/pavel_small.png").img-thumbnail - .team_bio - h4.team_name - a(href="http://retrostylegames.com/") Pavel Konstantinov - div(data-i18n="about.retrostyle_title") - 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 + a(href="http://retrostylegames.com/" rel="external") + img(src="/images/pages/about/oleg_small.png").img-thumbnail + .team-bio + h6.label.team-name + a(href="http://retrostylegames.com/" rel="external") Oleg Ulyanickiy + small(data-i18n="about.retrostyle_title") + small(data-i18n="about.retrostyle_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") diff --git a/app/templates/admin/trial-requests.jade b/app/templates/admin/trial-requests.jade index 718848df9..53533d759 100644 --- a/app/templates/admin/trial-requests.jade +++ b/app/templates/admin/trial-requests.jade @@ -20,11 +20,12 @@ block content th Location th Age / Level th Students - th How Found / Notes + th Role + th Phone th Status tbody - var numReviewed = 0 - - var maxReviewedShown = 100 + - var maxReviewedShown = 1000 each trialRequest in trialRequests if trialRequest.get('status') !== 'submitted' - numReviewed++ @@ -42,7 +43,8 @@ block content td= props.location || trialRequest.locationString() td= props.age || trialRequest.educationLevelString() td= props.numStudents - td= props.heardAbout || props.notes + td= props.role + td= props.phoneNumber td.status-cell if trialRequest.get('status') === 'submitted' button.btn.btn-xs.btn-success.btn-approve(data-trial-request-id=trialRequest.id) Approve @@ -51,3 +53,10 @@ block content span= trialRequest.get('prepaidCode') else span= trialRequest.get('status') + if props.heardAbout || props.notes + tr + td(colspan=2) + td(colspan=7) + strong #{trialRequest.nameString()} notes: + div= props.heardAbout || props.notes + td diff --git a/app/templates/base-flat.jade b/app/templates/base-flat.jade new file mode 100644 index 000000000..33203f8e6 --- /dev/null +++ b/app/templates/base-flat.jade @@ -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! \ No newline at end of file diff --git a/app/templates/new-home-view.jade b/app/templates/new-home-view.jade index 7778aba0e..85cff6459 100644 --- a/app/templates/new-home-view.jade +++ b/app/templates/new-home-view.jade @@ -1,388 +1,253 @@ -.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! +extends /templates/base-flat - 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 - -.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 +block content + .container-fluid#jumbotron-container-fluid(class=view.jumbotron === 'student' ? 'alt-image' : '') .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-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 - .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 + 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-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! - \ No newline at end of file + .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 + + diff --git a/app/templates/request-quote-view.jade b/app/templates/request-quote-view.jade index ea0dfebac..433ab3cfb 100644 --- a/app/templates/request-quote-view.jade +++ b/app/templates/request-quote-view.jade @@ -1,155 +1,152 @@ -extends /templates/base +extends /templates/base-flat block content - form.form(class=view.trialRequest.isNew() ? '' : 'hide') - h1.text-center(data-i18n="teachers_quote.title") - p.text-center(data-i18n="teachers_quote.subtitle") + .container + form.form(class=view.trialRequest.isNew() ? '' : 'hide') + h1.text-center(data-i18n="teachers_quote.title") + h2.text-center(data-i18n="teachers_quote.subtitle") - .row - .col-sm-offset-2.col-sm-4 - .form-group - label.control-label(data-i18n="general.name") - - var name = me.get('name') || ''; - input.form-control(name="name" value=name, disabled=!!name) - - .col-sm-4 - #email-form-group.form-group - label.control-label(data-i18n="general.email") - - var email = me.get('email') || ''; - input.form-control(name="email" type="email", value=email, disabled=!!email) - - - .row - .col-sm-offset-2.col-sm-4 - .form-group - label.control-label - span(data-i18n="teachers_quote.phone_number") - span.spl.text-muted(data-i18n="signup.optional") - .help-block - em.text-info(data-i18n="teachers_quote.phone_number_help") - input.form-control(name="phoneNumber") - - .col-sm-4 - .form-group - label.control-label(data-i18n="teachers_quote.role_label") - .help-block - em.text-info(data-i18n="teachers_quote.role_help") - select.form-control(name="role") - option - option(data-i18n="courses.teacher", value="Teacher") - option(data-i18n="teachers_quote.tech_coordinator", value="Technology coordinator") - option(data-i18n="teachers_quote.advisor", value="Advisor") - option(data-i18n="teachers_quote.principal", value="Principal") - option(data-i18n="teachers_quote.superintendent", value="Superintendent") - option(data-i18n="teachers_quote.parent", value="Parent") - - .row - .col-sm-offset-2.col-sm-8 - hr - - .row - .col-sm-offset-2.col-sm-4 - .form-group - label.control-label(data-i18n="teachers_quote.organization_label") - input.form-control(name="organization") - - .col-sm-4 - .form-group - label.control-label(data-i18n="teachers_quote.city") - input.form-control(name="city") - - .row - .col-sm-offset-2.col-sm-4 - .form-group - label.control-label(data-i18n="teachers_quote.state") - input.form-control(name="state") - - .col-sm-4 - .form-group - label.control-labellabel.control-label(data-i18n="teachers_quote.country") - input.form-control(name="country") - - .row - .col-sm-offset-2.col-sm-8 - hr - - .row - .col-sm-offset-2.col-sm-5 - .form-group - label.control-label(data-i18n="courses.number_students") - .help-block - em.text-info(data-i18n="teachers_quote.num_students_help") - select.form-control(name="numStudents") - option - option 1-10 - option 11-50 - option 51-100 - option 101-200 - option 201-500 - option 501-1000 - option 1000+ - - .form-group - - .row - .col-sm-offset-2.col-sm-4 - label.control-label(data-i18n="teachers_quote.education_level_label") - .help-block - em.text-info(data-i18n="teachers_quote.education_level_help") + #form-teacher-info.section + .row + .col-sm-offset-2.col-sm-4 + .form-group + label.control-label(data-i18n="general.name") + - var name = me.get('name') || ''; + input.form-control(name="name" value=name, disabled=!!name) - .row - .col-sm-offset-2.col-sm-2 - label.control-label.checkbox - input(type="checkbox" name="educationLevel" value="Elementary") - span(data-i18n="teachers_quote.elementary_school") - .col-sm-2 - label.control-label.checkbox - input(type="checkbox" name="educationLevel" value="High") - span(data-i18n="teachers_quote.high_school") - .col-sm-6 - // Other field uses custom logic, so no name field is included in either input. - // That way the forms library ignores it. - .checkbox-inline - label.control-label - input#other-education-level-checkbox(type="checkbox") - span(data-i18n="nav.other") - br - span(data-i18n="teachers_quote.please_explain") - input#other-education-level-input.form-control + .col-sm-4 + #email-form-group.form-group + label.control-label(data-i18n="general.email") + - var email = me.get('email') || ''; + input.form-control(name="email" type="email", value=email, disabled=!!email) + - .row - .col-sm-offset-2.col-sm-2 - label.control-label.checkbox - input(type="checkbox" name="educationLevel" value="Middle") - span(data-i18n="teachers_quote.middle_school") - .col-sm-2 - label.control-label.checkbox - input(type="checkbox" name="educationLevel" value="College+") - span(data-i18n="teachers_quote.college_plus") - - #anything-else-row.row - .col-sm-offset-2.col-sm-8 - label.control-label - span(data-i18n="teachers_quote.anything_else") - span.spl.text-muted(data-i18n="signup.optional") - - textarea.form-control(rows=8, name="notes") - - #buttons-row.row.text-center - input#submit-request-btn.btn.btn-primary(type="submit" data-i18n="[value]common.send") + .row + .col-sm-offset-2.col-sm-4 + .form-group + label.control-label + span(data-i18n="teachers_quote.phone_number") + span.spl.text-muted(data-i18n="signup.optional") + .help-block.small + em.text-info(data-i18n="teachers_quote.phone_number_help") + input.form-control(name="phoneNumber") + + .col-sm-4 + .form-group + label.control-label(data-i18n="teachers_quote.role_label") + .help-block.small + em.text-info(data-i18n="teachers_quote.role_help") + select.form-control(name="role") + option + option(data-i18n="courses.teacher", value="Teacher") + option(data-i18n="teachers_quote.tech_coordinator", value="Technology coordinator") + option(data-i18n="teachers_quote.advisor", value="Advisor") + option(data-i18n="teachers_quote.principal", value="Principal") + option(data-i18n="teachers_quote.superintendent", value="Superintendent") + option(data-i18n="teachers_quote.parent", value="Parent") - - #form-submit-success.text-center(class=view.trialRequest.isNew() ? 'hide' : '') - h1.text-center(data-i18n="teachers_quote.thanks_header") - p.text-center - span.spr(data-i18n="teachers_quote.thanks_p") - a.spl(href="mailto:team@codecombat.com") team@codecombat.com + #form-school-info.section + .row + .col-sm-offset-2.col-sm-4 + .form-group + label.control-label(data-i18n="teachers_quote.organization_label") + input.form-control(name="organization") + + .col-sm-4 + .form-group + label.control-label(data-i18n="teachers_quote.city") + input.form-control(name="city") + + .row + .col-sm-offset-2.col-sm-4 + .form-group + label.control-label(data-i18n="teachers_quote.state") + input.form-control(name="state") + + .col-sm-4 + .form-group + label.control-labellabel.control-label(data-i18n="teachers_quote.country") + input.form-control(name="country") + + #form-students-info.section + .row + .col-sm-offset-2.col-sm-5 + .form-group + label.control-label(data-i18n="courses.number_students") + .help-block.small + em.text-info(data-i18n="teachers_quote.num_students_help") + select.form-control(name="numStudents") + option + option 1-10 + option 11-50 + option 51-100 + option 101-200 + option 201-500 + option 501-1000 + option 1000+ + + .form-group - if me.isAnonymous() - p.text-center(data-i18n="teachers_quote.thanks_anon") + .row + .col-sm-offset-2.col-sm-4 + label.control-label(data-i18n="teachers_quote.education_level_label") + .help-block.small + em.text-info(data-i18n="teachers_quote.education_level_help") + + .row + .col-sm-offset-2.col-sm-2 + label.control-label.checkbox + input(type="checkbox" name="educationLevel" value="Elementary") + span(data-i18n="teachers_quote.elementary_school") + .col-sm-2 + label.control-label.checkbox + input(type="checkbox" name="educationLevel" value="High") + span(data-i18n="teachers_quote.high_school") + .col-sm-2 + label.control-label.checkbox + input(type="checkbox" name="educationLevel" value="Middle") + span(data-i18n="teachers_quote.middle_school") + .col-sm-2 + label.control-label.checkbox + input(type="checkbox" name="educationLevel" value="College+") + span(data-i18n="teachers_quote.college_plus") + + .row + .col-sm-offset-2.col-sm-6 + // Other field uses custom logic, so no name field is included in either input. + // That way the forms library ignores it. + .form-group + label.control-label.checkbox + input#other-education-level-checkbox(type="checkbox") + span(data-i18n="nav.other") + | + span(data-i18n="teachers_quote.please_explain") + input#other-education-level-input.form-control + + #anything-else-row.section + .row + .col-sm-offset-2.col-sm-8 + label.control-label + span(data-i18n="teachers_quote.anything_else") + span.spl.text-muted(data-i18n="signup.optional") + + textarea.form-control(rows=8, name="notes") + + #buttons-row.row.text-center + input#submit-request-btn.btn.btn-lg.btn-primary(type="submit" data-i18n="[value]common.send") + + #form-submit-success.text-center(class=view.trialRequest.isNew() ? 'hide' : '') + h1.text-center(data-i18n="teachers_quote.thanks_header") p.text-center - button#login-btn.btn.btn-info(data-i18n="login.log_in") - button#signup-btn.btn.btn-info(data-i18n="login.sign_up") - else - p.text-center(data-i18n="teachers_quote.thanks_logged_in") \ No newline at end of file + span.spr(data-i18n="teachers_quote.thanks_p") + a.spl(href="mailto:team@codecombat.com") team@codecombat.com + + if me.isAnonymous() + p.text-center(data-i18n="teachers_quote.thanks_anon") + + p.text-center + button#login-btn.btn.btn-info(data-i18n="login.log_in") + button#signup-btn.btn.btn-info(data-i18n="login.sign_up") + else + p.text-center(data-i18n="teachers_quote.thanks_logged_in") \ No newline at end of file diff --git a/app/views/AboutView.coffee b/app/views/AboutView.coffee index d8ce5cf41..6e57fe914 100644 --- a/app/views/AboutView.coffee +++ b/app/views/AboutView.coffee @@ -5,4 +5,86 @@ module.exports = class AboutView extends RootView id: 'about-view' template: template - logoutRedirectURL: false \ No newline at end of file + 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")) + + diff --git a/app/views/HomeView.coffee b/app/views/HomeView.coffee index 72d59bc13..6bfa2b7fb 100644 --- a/app/views/HomeView.coffee +++ b/app/views/HomeView.coffee @@ -41,16 +41,6 @@ module.exports = class HomeView extends RootView afterInsert: -> 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: -> # 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') diff --git a/app/views/NewHomeView.coffee b/app/views/NewHomeView.coffee index c99649a0c..cd71c69a6 100644 --- a/app/views/NewHomeView.coffee +++ b/app/views/NewHomeView.coffee @@ -75,14 +75,5 @@ module.exports = class NewHomeView extends RootView onClickTeacherButton: -> @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 diff --git a/app/views/RequestQuoteView.coffee b/app/views/RequestQuoteView.coffee index ced995f85..6040fb4be 100644 --- a/app/views/RequestQuoteView.coffee +++ b/app/views/RequestQuoteView.coffee @@ -105,6 +105,7 @@ module.exports = class RequestQuoteView extends RootView .addClass('has-error') .append($("