unserver-unify/src/app/home/openlearning/home.html

<style>
  .parallax-team{background: url(assets/images/bg4.jpg) 50% 0 repeat fixed; color:#fff;}
</style>
<div ng-controller="oplHomeCtrl as ctrl" class="gsx_home">
  <div class="slider slider_full_middle relative" style="padding-bottom: 25.25%">
    <img ng-if="!currentSchool" ng-src="{{publicUrl}}bamboobanner.jpg"/>
    <div active="active" interval="myInterval" ng-if="currentSchool && slides && slides.length >0" uib-carousel="">
      <div index="$index" ng-repeat="slide in slides" uib-slide="">
        <img ng-src="{{schoolUrl+slide.img}}"/>
      </div>
    </div>
    <img ng-if="currentSchool && (!slides || slides.length == 0)" ng-src="{{currentSchool.bar ? schoolUrl+currentSchool.bar : publicUrl + 'Banner_e.png'}}" style="width:100%;"/>
  </div>
  <div class="clearfix">
  </div>
  <div class="container animated fadeInRight homepage_sec">
    <!--=== Content Part ===-->
    <div class="content">
      <div class="row">
        <div class="col-md-12 home_tab home_new">
          <div class="default_load" ng-if="ctrl.topCourses.length < 0 && ctrl.featureCourses.length < 0 && ctrl.latestCourses.length <0">
            <div class="by2">
              <div class="service-block service-block-red service-or a_color_wt">
                <div class="service-bg">
                </div>
                <div class="row">
                  <i class="fa fa-book fa-5x">
                  </i>
                  <h2 class="font-bold">
                    Online Courses
                  </h2>
                </div>
              </div>
            </div>
            <div class="by2">
              <div class="service-block service-block-green service-or a_color_wt">
                <div class="service-bg">
                </div>
                <div class="row">
                  <a href="">
                    <i class="fa fa-th fa-5x">
                    </i>
                    <h2 class="font-bold ng-binding">
                      Learning Tools
                    </h2>
                  </a>
                </div>
              </div>
            </div>
            <div class="by3">
              <div class="service-block service-block-blue service-or a_color_wt">
                <div class="service-bg">
                </div>
                <div class="row">
                  <a href="">
                    <i class="fa fa-rss fa-5x">
                    </i>
                    <h2 class="font-bold ng-binding">
                      Forum / Blog
                    </h2>
                  </a>
                </div>
              </div>
            </div>
            <div class="by3">
              <div class="service-block service-block-yellow service-or a_color_wt">
                <div class="service-bg">
                </div>
                <div class="row">
                  <a href="">
                    <i class="fa fa-pencil-square-o fa-5x">
                    </i>
                    <h2 class="font-bold ng-binding">
                      Exam
                    </h2>
                  </a>
                </div>
              </div>
            </div>
            <div class="by3">
              <div class="service-block service-block-orange service-or a_color_wt">
                <div class="service-bg">
                </div>
                <div class="row">
                  <a href="">
                    <i class="fa fa-video-camera fa-5x">
                    </i>
                    <h2 class="font-bold ng-binding">
                      Video Class
                    </h2>
                  </a>
                </div>
              </div>
            </div>
            <div class="by3">
              <div class="service-block service-block-green service-or a_color_wt">
                <div class="service-bg">
                </div>
                <div class="row">
                  <a href="">
                    <i class="fa fa-rss fa-5x">
                    </i>
                    <h2 class="font-bold ng-binding">
                      Forum / Blog
                    </h2>
                  </a>
                </div>
              </div>
            </div>
            <div class="by3">
              <div class="service-block service-block-orange service-or a_color_wt">
                <div class="service-bg">
                </div>
                <div class="row">
                  <a href="">
                    <i class="fa fa-video-camera fa-5x">
                    </i>
                    <h2 class="font-bold ng-binding">
                      Video Class
                    </h2>
                  </a>
                </div>
              </div>
            </div>
            <div class="by3">
              <div class="service-block service-block-yellow service-or a_color_wt">
                <div class="service-bg">
                </div>
                <div class="row">
                  <a href="">
                    <i class="fa fa-pencil-square-o fa-5x">
                    </i>
                    <h2 class="font-bold ng-binding">
                      Exam
                    </h2>
                  </a>
                </div>
              </div>
            </div>
            <div class="clearfix">
            </div>
          </div>
          <div class="headline" ng-if="ctrl.topCourses.length > 0 ">
            <a class="btn btn-default btn-sm pull-right hom_btn_aln" ui-sref="index.gsxcourses({tab:'top'})">
              {{ 'View All' | translate }}
              <i class="fa fa-arrow-circle-o-right">
              </i>
            </a>
            <div class="main_banner_search_subholder">
              <div class="main_banner_search">
                <div class="input-group ">
                  <input class="form-control" ng-model="ctrl.q" placeholder="{{ 'search course' | translate }}" type="text"/>
                  <span class="input-group-btn">
                    <button class="btn btn-primary" ng-click="ctrl.searchCourses(ctrl.q)" type="button">
                      <i class="fa fa-search">
                      </i>
                    </button>
                  </span>
                </div>
              </div>
            </div>
            <h2>
              {{'Our Top Courses'|translate }}
            </h2>
          </div>
          <div class="row padding-left-15" ng-if="ctrl.topCourses.length > 0 ">
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 padding-left-0" ng-repeat="lcourse in ctrl.topCourses|limitTo: 4">
              <div class="thumbnails thumbnail-style thumbnail-kenburn new_listing overflow-hidden relative">
                <div class="thumbnail-img">
                  <div class="overflow-hidden">
                    <a ui-sref="{{lcourse.courseurl}}({ cid: lcourse._id })">
                      <img alt="{{ lcourse.name }}" class="img-responsive" ng-src="{{lcourse.photo? _SHOST+'/lcourse/'+lcourse._id +'/'+ lcourse.photo : (lcourse.mvpic? _SHOST+'/public/'+_RES+ lcourse.mvpic : ctrl.defaultCoursePhoto)}}" style="height:150px" title="{{ lcourse.name }}"/>
                    </a>
                    <a class="btn-more" ng-if="lcourse.singlesection" translate="">
                      Micro
                    </a>
                  </div>
                </div>
                <div class="thumbnail-text">
                  <div class="caption overflow-hidden clst" style="height:106px;">
                    <div class="margin-bottom-5">
                    </div>
                    <h3 style="margin-bottom: 5px;">
                      <a class="hover-effect" target="_blank" ui-sref="{{lcourse.courseurl}}({ cid: lcourse._id })">
                        {{ lcourse.name }}
                      </a>
                    </h3>
                    <!--  <b style="margin-bottom: 5px;">
                      {{lcourse.schoolname||'School'}}
                    </b> -->
                    <p>
                      {{ lcourse.description }}
                    </p>
                  </div>
                  <ul class="list-inline text-left course_btm" ng-style="coursebtmStyle" style="margin-bottom: 0">
                    <li class="padding-left-0">
                      <i class="fa fa-users">
                      </i>
                      <span>
                        {{lcourse.enrolledcounter||0}}
                      </span>
                    </li>
                    <li class="padding-left-0">
                      <i class="fa fa-eye">
                      </i>
                      <span>
                        {{lcourse.visitercounter}}
                      </span>
                    </li>
                    <li class="pull-right">
                      <i class="fa fa-usd" ng-if="lcourse.price">
                      </i>
                      <span>
                        {{lcourse.price || 'Free'}}
                      </span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="row padding-left-15">
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 padding-left-0" ng-repeat="lcourse in ctrl.lcourses|limitTo: 4">
              <div class="thumbnails thumbnail-style thumbnail-kenburn new_listing overflow-hidden">
                <div class="thumbnail-img">
                  <div class="overflow-hidden">
                    <a ui-sref="{{lcourse.courseurl}}({ cid: lcourse._id })">
                      <img alt="{{ lcourse.name }}" class="img-responsive" ng-src="{{lcourse.photo? _SHOST+'/lcourse/'+lcourse._id +'/'+ lcourse.photo : (lcourse.mvpic? _SHOST+'/public/'+_RES+ lcourse.mvpic : ctrl.defaultCoursePhoto)}}" style="height:150px" title="{{ lcourse.name }}"/>
                    </a>
                    <a class="btn-more" ng-if="lcourse.singlesection" translate="">
                      Micro
                    </a>
                  </div>
                </div>
                <div class="thumbnail-text">
                  <div class="caption overflow-hidden clst" style="height:106px;">
                    <div class="margin-bottom-5">
                    </div>
                    <h3 style="margin-bottom: 5px;">
                      <a class="hover-effect" target="_blank">
                        {{ lcourse.name }}
                      </a>
                    </h3>
                    <!--    <b style="margin-bottom: 5px;">
                      {{lcourse.schoolname||'School'}}
                    </b> -->
                    <p>
                      {{ lcourse.description }}
                    </p>
                  </div>
                  <ul class="list-inline text-left course_btm" ng-style="coursebtmStyle" style="margin-bottom: 0">
                    <li class="padding-left-0">
                      <i class="fa fa-users">
                      </i>
                      <span>

                        {{lcourse.enrolledcounter||0}}

                      </span>
                    </li>
                    <li class="padding-left-0 thumb_price">
                      <i class="fa fa-eye">
                      </i>
                      <span>
                        {{lcourse.visitercounter}}
                      </span>
                    </li>
                    <li class="pull-right">
                      <i class="fa fa-usd" ng-if="lcourse.price">
                      </i>
                      <span>

                      {{lcourse.price || 'Free'}}

                      </span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="headline" ng-if="ctrl.featureCourses.length > 0 ">
            <h2>
              {{'Our Featured Courses'|translate }}
            </h2>
            <a class="btn btn-default btn-sm pull-right hom_btn_aln" style="position:absolute; right:15px; z-index:1;" ui-sref="index.gsxcourses({tab:'star'})">
              {{ 'View All' | translate }}
              <i class="fa fa-arrow-circle-o-right">
              </i>
            </a>
          </div>
          <div class="row padding-left-15" ng-if="ctrl.featureCourses.length > 0 ">
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 padding-left-0" ng-repeat="lcourse in ctrl.featureCourses|limitTo: 4">
              <div class="thumbnails thumbnail-style thumbnail-kenburn new_listing overflow-hidden">
                <div class="thumbnail-img">
                  <div class="overflow-hidden">
                    <a ui-sref="{{lcourse.courseurl}}({ cid: lcourse._id })">
                      <img alt="{{ lcourse.name }}" class="img-responsive" ng-src="{{lcourse.photo? _SHOST+'/lcourse/'+lcourse._id +'/'+ lcourse.photo : (lcourse.mvpic? _SHOST+'/public/'+_RES+ lcourse.mvpic : ctrl.defaultCoursePhoto)}}" style="height:150px" title="{{ lcourse.name }}"/>
                    </a>
                    <a class="btn-more" ng-if="lcourse.singlesection" translate="">
                      Micro
                    </a>
                  </div>
                </div>
                <div class="thumbnail-text">
                  <div class="caption overflow-hidden clst" style="height:106px;">
                    <div class="margin-bottom-5">
                    </div>
                    <h3 style="margin-bottom: 5px;">
                      <a ui-sref="{{lcourse.courseurl}}({ cid: lcourse._id })" class="hover-effect" target="_blank">
                        {{ lcourse.name }}
                      </a>
                    </h3>
                    <!--      <b style="margin-bottom: 5px;">
                      {{lcourse.schoolname||'School'}}
                    </b> -->
                    <p>
                      {{ lcourse.description }}
                    </p>
                  </div>
                  <ul class="list-inline text-left course_btm" style="margin-bottom: 0">
                    <li class="padding-left-0">
                      <i class="fa fa-users">
                      </i>
                      <span>
                        {{lcourse.enrolledcounter||0}}
                      </span>
                    </li>
                    <li class="padding-left-0">
                      <i class="fa fa-eye">
                      </i>
                      <span>
                        {{lcourse.visitercounter}}
                      </span>
                    </li>
                    <li class="pull-right">
                      <i class="fa fa-usd" ng-if="lcourse.price">
                      </i>
                      <span>

                        {{lcourse.price || 'Free'}}

                      </span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="headline" ng-if="ctrl.latestCourses.length > 0 ">
            <h2>
              {{'Our Latest Courses'|translate }}
            </h2>
            <a class="btn btn-default btn-sm pull-right hom_btn_aln" style="position:absolute; right:15px; z-index:1;" ui-sref="index.gsxcourses({tab:'update'})">
              {{ 'View All' | translate }}
              <i class="fa fa-arrow-circle-o-right">
              </i>
            </a>
          </div>
          <div class="row padding-left-15" ng-if="ctrl.latestCourses.length > 0 ">
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 padding-left-0" ng-repeat="lcourse in ctrl.latestCourses|limitTo: 4">
              <div class="thumbnails thumbnail-style thumbnail-kenburn new_listing overflow-hidden">
                <div class="thumbnail-img">
                  <div class="overflow-hidden">
                    <a ui-sref="{{lcourse.courseurl}}({ cid: lcourse._id })">
                      <img alt="{{ lcourse.name }}" class="img-responsive" ng-src="{{lcourse.photo? _SHOST+'/lcourse/'+lcourse._id +'/'+ lcourse.photo : (lcourse.mvpic? _SHOST+'/public/'+_RES+ lcourse.mvpic : ctrl.defaultCoursePhoto)}}" style="height:150px" title="{{ lcourse.name }}"/>
                    </a>
                    <a class="btn-more" ng-if="lcourse.singlesection" translate="">
                      Micro
                    </a>
                  </div>
                </div>
                <div class="thumbnail-text">
                  <div class="caption overflow-hidden clst" style="height:106px;">
                    <div class="margin-bottom-5">
                    </div>
                    <h3 style="margin-bottom: 5px;">
                      <a ui-sref="{{lcourse.courseurl}}({ cid: lcourse._id })" class="hover-effect" target="_blank">
                        {{ lcourse.name }}
                      </a>
                    </h3>
                    <!--   <b style="margin-bottom: 5px;">
                      {{lcourse.schoolname||'School'}}
                    </b> -->
                    <p>
                      {{ lcourse.description }}
                    </p>
                  </div>
                  <ul class="list-inline text-left course_btm" style="margin-bottom: 0">
                    <li class="padding-left-0">
                      <i class="fa fa-users">
                      </i>
                      <span>
                        {{lcourse.enrolledcounter||0}}
                      </span>
                    </li>
                    <li class="padding-left-0">
                      <i class="fa fa-eye">
                      </i>
                      <span>
                        {{lcourse.visitercounter}}
                      </span>
                    </li>
                    <li class="pull-right">
                      <i class="fa fa-usd" ng-if="lcourse.price">
                      </i>
                      <span>

                        {{lcourse.price || 'Free'}}

                      </span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="clerafix"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row home_new">
    <div class="parallax-team parallaxBg">
      <div class="container">
        <div class="col-md-8 col-md-offset-2">
          <h2 class="title-v2 title-center">
            {{ {eng:'Learning from',chn:'学习要到'} | trans }} {{currentSchool.name}}
          </h2>
          <div class="col-md-5 padding-right-0">
            <i class="fa fa-building-o fa-4x"></i>
            <h4>
              <span style="font-size:20px">
                {{ {eng:'Open',chn:'开放'} | trans }}
              </span>
            </h4>
            <div class="clearfix"></div>
            <p>
              {{ {eng:'An open online learning ecosystem on technical level and participant level',chn:'一个完全开放的在线学习生态系统；技术层面的开放和平台参与者的开放'} | trans }}
            </p>
          </div>
          <div class="col-md-5 pull-right padding-left-0">
            <i class="fa fa-graduation-cap fa-4x"></i>
            <h4>
              <span style="font-size:20px" translate="">
                Learn
              </span>
            </h4>
            <div class="clearfix">
            </div>
            <p>
              {{ {eng:'Online courses creation, management and publication; Question banks and exam modules creation and management',chn:'在线课程创建、管理和发布；题库和考试模块的创建；我的学习空间'} | trans }}
            </p>
          </div>
          <div class="margin-bottom-20"></div>
          <div class="col-md-5 padding-right-0">
            <i class="fa fa-handshake-o fa-4x"></i>
            <h4>
              <span style="font-size:20px">
                {{ {eng:'Collaborate',chn:'协作'} | trans }}
              </span>
            </h4>
            <div class="clearfix">
            </div>
            <p>
              {{ {eng:'Virtual real-time classroom; Real time classroom with interactive whiteboard; Exam and assignment review',chn:'虚拟的实时课堂和可互动的白板'} | trans }}
            </p>
          </div>
          <div class="col-md-5 pull-right padding-left-0">
            <i class="fa fa-users fa-4x"></i>
            <h4>
              <span style="font-size:20px">
                {{ {eng:'Share',chn:'分享'} | trans }}
              </span>
            </h4>
            <div class="clearfix">
            </div>
            <p>
              {{ {eng:'Course-centric discussion forum; Learning community; Teaching note and blogs',chn:'以课程为中心的讨论论坛；学习社区；教学笔记和博客'} | trans }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="white-bg home_new">
    <div class="container">
      <div class="margin-bottom-40"></div>
      <div class="row margin-bottom-40 h4_aln">
        <h2 class="title-v2 title-center">
          {{ {eng:'Partners',chn:'合作名校'} | trans 
          }}
        </h2>
        <ul class="clients_list">
          <li ng-repeat="item in ctrl.companys">
            <a ui-sref="index.company.detail.overview({cid: item._id})">
              <img class="img-responsive" ng-src="{{ item.photo? ctrl.companypath+item._id +'/'+ item.photo :  ctrl.defaultCompanyPhoto }}"/>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>