codecombat/app/templates/courses/courses.jade
2015-10-27 13:58:45 -07:00

229 lines
8.6 KiB
Text

extends /templates/base
block content
div(style='border-bottom: 1px solid black')
span *UNDER CONSTRUCTION, please send feedback to
a.spl(href='mailto:team@codecombat.com') team@codecombat.com
br
.hidden-md.hidden-lg
.alert.alert-danger Courses not supported on mobile devices.
.hidden-xs.hidden-sm
if state === 'enrolling'
.alert.alert-info Enrolling in course..
else if state === 'ppc_logged_out'
.alert.alert-danger.logged_out Create account or log in to join this course.
button.btn.btn-sm.btn-primary.header-font.signup-button(data-i18n="login.sign_up")
button.btn.btn-sm.btn-default.header-font.login-button(data-i18n="login.log_in")
else
if state === 'unknown_error'
.alert.alert-danger.alert-dismissible= stateMessage
if hocLandingPage
+hoc-landing
else
if view.courseInstances.size()
+course-instance-list
if studentMode
+student-main
else
if hocMode
+teacher-hoc
else
+teacher-main
.container-fluid
- var i = 0
while i < courses.length
.row
+course-block(courses[i], instances)
- i++
if i < courses.length
+course-block(courses[i], instances)
- i++
mixin hoc-landing
h1.center Welcome to CodeCombat's Hour of Code!
br
.container-fluid
.row
.col-md-6.center
button.btn.btn-lg.btn-success.btn-student(data-i18n="courses.students_click")
.col-md-6.center
button.btn.btn-lg.btn-default.btn-teacher(data-i18n="courses.teachers_click")
mixin course-instance-list
h1.center Courses You Are In
.row
.col-md-10.col-md-offset-1
.list-group
for courseInstance in view.courseInstances.models
- var course = view.courses.get(courseInstance.get('courseID'));
.list-group-item
.list-group-item-heading
h3
a(href="/courses/#{course.id}/#{courseInstance.id}")
span.spr #{courseInstance.get('name')}
small (#{course.get('name')})
p= courseInstance.get('description')
mixin student-main
button.btn.btn-warning.btn-teacher(data-i18n="courses.teachers_click")
h1.center(data-i18n="courses.courses_on_coco")
mixin teacher-hoc
button.btn.btn-warning.btn-student(data-i18n="courses.students_click")
h1.center Welcome to CodeCombat's Hour of Code!
p
strong How to use CodeCombat with your students:
ol
li Click the green 'Get FREE course' button below
li Follow the enrollment instructions
li Add students via the 'Add Students' tab
p
span.spr If you have any problems, please email
a(href='mailto:team@codecombat.com') team@codecombat.com
br
mixin teacher-main
button.btn.btn-warning.btn-student(data-i18n="courses.students_click")
h1.center(data-i18n="courses.courses_on_coco")
.info-container
p(data-i18n="courses.designed_to")
.container-fluid
.row
.col-md-6
ul
li(data-i18n="courses.more_in_less")
li(data-i18n="courses.no_experience")
li(data-i18n="courses.easy_monitor")
p(data-i18n="courses.purchase_for_class")
p.faq-blurb
span.spr(data-i18n="courses.see_the")
a.courses-faq(data-i18n="courses.faq")
span.spl(data-i18n="courses.more_info")
.col-md-6
img.img-quote(src="/images/pages/courses/coco_complab.png")
p
.well.well-sm
div.praise-quote "#{praise.quote}"
div.praise-caption - #{praise.source}
//- h1.center(data-i18n="courses.free_trial")
//- .info-container
//- p
//- span.spr(data-i18n="teachers.teacher_subs_1")
//- a(href='/teachers/freetrial', data-i18n="teachers.teacher_subs_2")
//- span.spl(data-i18n="courses.get_access")
h2.center(data-i18n="courses.choose_course")
mixin student-dialog(course)
.modal.continue-dialog(id="continueModal#{course.id}")
.modal-dialog
.modal-header
button.close(data-dismiss='modal')
span &times;
h3.modal-title= course.get('name')
.modal-body
.container-fluid
.row.button-row
.col-md-12
.well.well-sm
p
div.instruction-label(data-i18n="courses.enter_code")
.container-fluid
.row
.col-md-8
input.code-input(type='text', data-course-id="#{course.id}", data-i18n="[placeholder]courses.enter_code1", placeholder="Enter unlock code")
.col-md-4
button.btn.btn-success.btn-enroll(data-course-id="#{course.id}", data-i18n="courses.enroll")
if hocMode && course.get('pricePerSeat') === 0
.row.button-row.center.row-pick-class
.col-md-12
br
div.or(data-i18n="courses.or")
.row.button-row.center
.col-md-12
button.btn.btn-success.btn-lg.btn-hoc-student-continue(data-course-id="#{course.id}") Continue by yourself
mixin teacher-dialog(course)
.modal.continue-dialog(id="continueModal#{course.id}")
.modal-dialog
.modal-header
button.close(data-dismiss='modal')
span &times;
h3.modal-title= course.get('name')
.modal-body
.container-fluid
if enrolledCourses[course.id]
.row.button-row.row-pick-class
.col-md-12
.well.well-sm
p
div.instruction-label(data-i18n="courses.pick_from_classes")
.container-fluid
.row
.col-md-8
select.form-control.select-session(data-course-id="#{course.id}")
each inst in instances
if inst.get('courseID') == course.id
if inst.get('name')
option(value="#{inst.id}")= inst.get('name')
else
option(value="#{inst.id}", data-i18n="courses.unnamed")
.col-md-4
button.btn.btn-success.btn-enter(data-course-id="#{course.id}", data-i18n="courses.enter")
.row.button-row.center.row-pick-class
.col-md-12
div.or(data-i18n="courses.or")
.row.button-row.center
.col-md-12
if course.get('pricePerSeat') === 0
button.btn.btn-success.btn-lg.btn-buy(data-course-id="#{course.id}") Start new class
else
button.btn.btn-success.btn-lg.btn-buy(data-course-id="#{course.id}", data-i18n="courses.buy_course1")
mixin course-block(course)
if studentMode
+student-dialog(course)
else
+teacher-dialog(course)
.col-md-6
.well.panel.course-panel(class=enrolledCourses[course.id] ? 'panel-success' : 'panel-info')
.panel-heading
.panel-title
span.spr #{course.get('name')}
strong #{enrolledCourses[course.id] ? '[ enrolled ]' : ''}
.panel-body
.container-fluid
.row
.col-md-12
p
img.course-image(src="#{course.get('screenshot')}")
.row.button-row
.col-md-6
strong(data-i18n="courses.topics")
ul
each concept in course.get('concepts')
li(data-i18n="concepts." + concept)
strong
span.spr(data-i18n="courses.hours_content")
span #{course.get('duration')}
.col-md-6.center(style='margin-top: 40px;')
if studentMode
if enrolledCourses[course.id]
a.btn.btn-lg.btn-success.btn-continue(href="/courses/#{course.id}?student=true", data-i18n="common.continue")
else
button.btn.btn-lg.btn-success.btn-continue(data-toggle='modal', data-target="#continueModal#{course.id}", data-i18n="courses.enter") Enter
else if enrolledCourses[course.id]
button.btn.btn-lg.btn-success.btn-continue(data-toggle='modal', data-target="#continueModal#{course.id}", data-i18n="common.continue")
else if course.get('pricePerSeat') === 0
button.btn.btn-lg.btn-success.btn-buy(data-course-id="#{course.id}", data-i18n='courses.get_free')
else
button.btn.btn-lg.btn-success.btn-buy(data-course-id="#{course.id}", data-i18n='courses.buy_course')