a93832aabe
Adding hero to main.html allows for full width marketing images to be used. This commit includes the addition of the hero block into main.html along with the program marketing page's use of that new hero block.
329 lines
12 KiB
HTML
329 lines
12 KiB
HTML
## mako
|
|
<%page expression_filter="h"/>
|
|
|
|
<%inherit file="/main.html" />
|
|
<%!
|
|
from datetime import datetime
|
|
|
|
from django.core.urlresolvers import reverse
|
|
from django.utils.translation import ugettext as _
|
|
from mako import exceptions
|
|
|
|
from openedx.core.djangolib.markup import HTML, Text
|
|
%>
|
|
<%namespace name='static' file='../static_content.html'/>
|
|
|
|
## Override the default styles_version to use Bootstrap
|
|
<%! main_css = "css/bootstrap/lms-main.css" %>
|
|
|
|
|
|
<%
|
|
faqs = program['faq']
|
|
program_type = program['type']
|
|
title = program['title']
|
|
status = program['status']
|
|
courses = program['courses']
|
|
subtitle = program['subtitle']
|
|
overview = program['overview']
|
|
instructors = program['instructors']
|
|
job_outlook_items = program['job_outlook_items']
|
|
weeks_to_complete = program['weeks_to_complete']
|
|
full_program_price_format = '{0:.0f}' if program['full_program_price'].is_integer() else '{0:.2f}'
|
|
full_program_price = full_program_price_format.format(program['full_program_price'])
|
|
corporate_endorsement = program['corporate_endorsements'][0] if program['corporate_endorsements'] else {}
|
|
corporate_endorsement_name = corporate_endorsement.get('corporation_name')
|
|
corporate_endorsement_image = corporate_endorsement.get('image',{}).get('src','')
|
|
endorsement = corporate_endorsement['individual_endorsements'][0]
|
|
endorsement_quote = endorsement.get('quote')
|
|
endorser = endorsement.get('endorser')
|
|
endorser_name = endorser.get('given_name') + ' ' + endorser.get('family_name')
|
|
endorser_position = endorser.get('position') or {}
|
|
endorser_title = endorser_position.get('title')
|
|
endorser_org = endorser_position.get('organization_name') or corporate_endorsement_name
|
|
expected_learning_items = program['expected_learning_items']
|
|
min_hours_effort_per_week = program['min_hours_effort_per_week']
|
|
max_hours_effort_per_week = program['max_hours_effort_per_week']
|
|
%>
|
|
|
|
<%block name="js_extra">
|
|
<script src="${static.url('js/program_marketing.js')}"></script>
|
|
</%block>
|
|
|
|
<%block name="pagetitle">${program['title']}</%block>
|
|
<%block name="marketing_hero">
|
|
<%
|
|
banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
|
|
authoring_organizations = program['authoring_organizations']
|
|
video_url = program['video'].get('src') if program['video'] else ''
|
|
%>
|
|
<div id="program-details-hero">
|
|
<div class="main-banner" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${banner_image}); background-size:100%;">
|
|
<div class="container" >
|
|
<div class="row">
|
|
<div class="col col-12 col-md-8">
|
|
% if authoring_organizations and authoring_organizations[0]['logo_image_url']:
|
|
<div>
|
|
<img class="authoring-org-logo logo" alt="${authoring_organizations[0]['name']}" src="${authoring_organizations[0]['logo_image_url']}"/>
|
|
</div>
|
|
% endif
|
|
<div>
|
|
<h1 class="program_title">${program['title']}</h1>
|
|
</div>
|
|
<div>
|
|
<h2>${program['subtitle']}</h2>
|
|
</div>
|
|
<div>
|
|
% if program.get('is_learner_eligible_for_one_click_purchase'):
|
|
<a href="${buy_button_href}" class="btn btn-success">
|
|
${_('Purchase the Program')}
|
|
</a>
|
|
% else:
|
|
<a href="#courses" class="btn btn-success">
|
|
${_('Start Learning')}
|
|
</a>
|
|
% endif
|
|
</div>
|
|
</div>
|
|
<div class="col col-12 col-md-4">
|
|
% if video_url:
|
|
<div id="program_video">
|
|
<button type="button" class="btn" aria-label="${_('Play')}" onclick="playVideo('${video_url}')">
|
|
<span class="icon fa fa-4x fa-play-circle" aria-hidden="true"></span>
|
|
</button>
|
|
<iframe class="align-middle" title="${_('YouTube Video')}" src="" frameborder="0" allowfullscreen style="display:none;"></iframe>
|
|
</div>
|
|
% endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row quick-nav">
|
|
<div class="container">
|
|
<ul class="nav nav-fill col-lg-12">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#courses">${_('View Courses')}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#instructors">${_('Meet the Instructors')}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#faqs">${_('Frequenty Asked Questions')}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</%block>
|
|
|
|
<div id="program-details-page" class="container">
|
|
<div class="row program-info">
|
|
<div class="col col-12 col-lg-7">
|
|
<div class="section">
|
|
<p>${HTML(program['overview'])}</p>
|
|
</div>
|
|
<div class="section">
|
|
% if job_outlook_items:
|
|
<h3 class="section_title">${_('Job Outlook')}</h3>
|
|
<p>
|
|
<ul>
|
|
% for item in job_outlook_items:
|
|
<li>${item}</li>
|
|
% endfor
|
|
</ul>
|
|
</p>
|
|
% endif
|
|
</div>
|
|
<div class="section">
|
|
% if endorsement:
|
|
<h3 class="section_title">${_('Real Career Impact')}</h3>
|
|
<p>
|
|
<img class="logo" alt="${corporate_endorsement_name}" src="${corporate_endorsement_image}"/>
|
|
<blockquote class="blockquote">
|
|
<p class="quote">"${endorsement_quote}"</p>
|
|
<footer class="blockquote-footer">
|
|
${endorser_name}, ${endorser_title}, ${endorser_org}
|
|
</footer>
|
|
</blockquote>
|
|
</p>
|
|
%endif
|
|
</div>
|
|
<div class="section">
|
|
</div>
|
|
<div class="section">
|
|
% if expected_learning_items:
|
|
<p>
|
|
<h3 class="section_title">${_('What You\'ll Learn')}</h3>
|
|
<ul>
|
|
% for item in expected_learning_items:
|
|
<li>${item}</li>
|
|
% endfor
|
|
</ul>
|
|
</p>
|
|
%endif
|
|
</div>
|
|
</div>
|
|
<div class="col col-12 col-lg-5">
|
|
<div class="facts">
|
|
<ul class="list-unstyled">
|
|
<li class="row">
|
|
<div class="label col col-6">
|
|
<span class="fa fa-clock-o fa-lg" aria-hidden="true"></span>
|
|
<span>${_('Average Length')}</span>
|
|
</div>
|
|
<div class="description col col-6">
|
|
${Text(_('{weeks_to_complete} weeks per course')).format(
|
|
weeks_to_complete=weeks_to_complete
|
|
)}
|
|
</div>
|
|
</li>
|
|
<li class="row">
|
|
<div class="label col col-6">
|
|
<span class="fa fa-tachometer fa-lg" aria-hidden="true"></span>
|
|
<span>${_('Effort')}</span>
|
|
</div>
|
|
<div class="description col col-6">
|
|
${Text(_('{min_hours_effort_per_week}-{max_hours_effort_per_week} hours per week, per course')).format(
|
|
max_hours_effort_per_week=max_hours_effort_per_week,
|
|
min_hours_effort_per_week=min_hours_effort_per_week
|
|
)}
|
|
</div>
|
|
</li>
|
|
<li class="row">
|
|
<div class="label col col-6">
|
|
<span class="fa fa-book fa-lg" aria-hidden="true"></span>
|
|
<span>${_('Number of Courses')}</span>
|
|
</div>
|
|
<div class="description col col-6">
|
|
${Text(_('{number_of_courses} courses in program')).format(
|
|
number_of_courses=len(courses)
|
|
)}
|
|
</div>
|
|
</li>
|
|
<li class="row">
|
|
<div class="label col col-6">
|
|
<span class="fa fa-tag fa-lg" aria-hidden="true"></span>
|
|
<span>${_('Price (USD)')}</span>
|
|
</div>
|
|
<div class="description col col-6">
|
|
% if program.get('discount_data') and program['discount_data']['is_discounted']:
|
|
<span class="price">
|
|
<span aria-label="${_('Original Price')}" class="original-price">
|
|
${Text(_('${oldPrice}')).format(
|
|
oldPrice=full_program_price_format.format(program['discount_data']['total_incl_tax_excl_discounts'])
|
|
)}
|
|
</span>
|
|
<span aria-label="${_('Discounted Price')}" class="discount green-highlight">
|
|
${Text(_('${newPrice}{htmlEnd} for entire program')).format(
|
|
newPrice=full_program_price,
|
|
htmlEnd=HTML('</span>')
|
|
)}
|
|
<span class="savings green-highlight">
|
|
${Text(_('You save ${discount_value} {currency}')).format(
|
|
discount_value=full_program_price_format.format(program['discount_data']['discount_value']),
|
|
currency=program['discount_data']['currency']
|
|
)}
|
|
</span>
|
|
</span>
|
|
% else:
|
|
<span>
|
|
${Text(_('${full_program_price} for entire program')).format(
|
|
full_program_price=full_program_price
|
|
)}
|
|
</span>
|
|
% endif
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="thick_rule">
|
|
<div id="courses">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h2>
|
|
${_('Courses in the {}').format(
|
|
program_type
|
|
)}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
% for course in courses:
|
|
<%
|
|
course_run = course['course_runs'][0]
|
|
course_img = course_run.get('image')
|
|
%>
|
|
<div class="row course">
|
|
<div class="col-3 col-lg-2 course-image">
|
|
% if course_img:
|
|
<img alt="" src="${course_img['src']}" alt=""/>
|
|
% endif
|
|
</div>
|
|
<div class="col-9 col-lg-6">
|
|
<div>
|
|
<a href="${course_run['course_url']}">${course_run['title']}</a>
|
|
</div>
|
|
<div>${course_run['short_description']}</div>
|
|
<div>
|
|
<a href="${course_run['course_url']}">${_('Learn More')}</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-4 course-enroll">
|
|
<div>
|
|
${Text(_('Starts on {}')).format(
|
|
datetime.strptime(course_run['start'], '%Y-%m-%dT%H:%M:%SZ').strftime('%B %-d, %Y')
|
|
)}
|
|
</div>
|
|
% if program.get('is_learner_eligible_for_one_click_purchase') != True:
|
|
% if course_run['is_enrollment_open'] and course_run['can_enroll'] and not course_run['is_course_ended']:
|
|
<div>
|
|
<a class="btn btn-primary btn-block btn-success" href="${course_run['course_url']}about">Enroll Now</a>
|
|
</div>
|
|
% else:
|
|
<div>
|
|
<a class="btn btn-primary btn-block btn-secondary disabled" href="#" >Not Currently Available</a>
|
|
</div>
|
|
% endif
|
|
% endif
|
|
</div>
|
|
</div>
|
|
% endfor
|
|
</div>
|
|
<hr class="thick_rule">
|
|
<div id="instructors" class="row">
|
|
<div class="col-12">
|
|
<h2>${_('Instructors')}</h2>
|
|
</div>
|
|
% for instructor in instructors:
|
|
<div class="col-6 col-sm-3 instructor">
|
|
<div>
|
|
<img alt="" src="${instructor['image']}"/>
|
|
</div>
|
|
<div class="instructor-name">${instructor['name']}</div>
|
|
% if instructor.get('position'):
|
|
<div class="instructor-position">${instructor['position'].get('position')}</div>
|
|
<div class="instructor-org">${instructor['position'].get('organization_name')}</div>
|
|
% endif
|
|
</div>
|
|
% endfor
|
|
</div>
|
|
<hr class="thick_rule">
|
|
% if faqs:
|
|
<div id="faqs" class="row faqs">
|
|
<div class="col-12">
|
|
<h2>${_('Frequently Asked Questions')}</h2>
|
|
</div>
|
|
% for faq in faqs:
|
|
<div class="col-4 faq">
|
|
<div class="question">
|
|
${faq['question']}
|
|
</div>
|
|
<div class="answer">
|
|
${faq['answer']}
|
|
</div>
|
|
</div>
|
|
% endfor
|
|
</div>
|
|
% endif
|
|
</div>
|