umd.template.html 11.8 KB
<!DOCTYPE html>
<html>
<head>
    <title>学点云课堂</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="stylesheets/style.css"/>
  </head>

<body style="visibility: hidden ">
  <div class="container">
    <div class="video_container">
      <div class="video_wrapper">
        <div id="video_mask"></div>
        <div id="video_div"
          class="hide">
          <video id="video"
            autoplay
            autostart
            poster="./images/waiting.jpg"
            controls
            playsinline
            webkit-playsinline>
            该设备不支持HTML5/VIDEO标签播放.
          </video>
        </div>
        <div id="btn_video"
          style="display: none;"></div>
        <div id="btn_document"
          style="display: none;"></div>
        <div id="live_document_container"
          style="display: none;">
          <div>
            <div class="document_none">
              <div class="text-center document_image"></div>
              <p class="text-center">
                            矮油,还没有文档共享哦~
                          </p>
            </div>
            <div class="list_sliders">
              <div class="slideWrapper">
                <img class="slide">
              </div>
              <div class="docAnno"></div>
            </div>
          </div>
          <div class="document_pager dn">
            <p class="text-center">0/1</p>
          </div>
        </div>
      </div>
    </div>
    <div class="content_container">
      <ul id="tabmenu_list"
        style="margin: 0;"
        class="nav nav-tabs"
        role="tablist">
        <li role="chat"
          class="active">
            <a role="tab" data-toggle="tab-message">聊天</a>
          </li>
        <li role="doc">
            <a role="tab" data-toggle="tab-board">文档</a>
          </li>
        <li role="detail">
            <a role="tab" data-toggle="tab-detail">详情</a>
          </li>
      </ul>
      <div class="tab_container">
        <div role="tab-message"
          class="tab_body tab_message active">
          <div class="tab_body_container">
            <div id="panel_message"
              data-empty="true"
              class="message_container">
              <p class="h5 text-center"
                style="color: #666;">
                  暂未收到消息
                </p>
            </div>
          </div>
        </div>
        <div role="tab-board"
          class="tab_body">
          <div class="tab_body_container">
            <div class="document_none">
              <div class="text-center document_image"></div>
              <p class="text-center">
                  矮油,还没有文档共享哦~
                </p>
            </div>
            <div class="list_sliders">
              <div class="slideWrapper">
                <img class="slide">
              </div>
              <div class="docAnno"></div>
            </div>
          </div>
          <div id="document_pager"
            class="document_pager dn">
            <p class="text-center">
                0/1
              </p>
          </div>
        </div>
        <div role="tab-detail"
          class="tab_body">
          <div class="tab_body_container">
            <div id="detail_wrapper"
              class="detail_wrapper"></div>
          </div>
        </div>
        <div class="input_container">
          <div class="input_wrapper"
            style="overflow: hidden;">
            <div class="btn_more"></div>
            <div class="btn_face"></div>
            <div style="float: right; width: 60px;">
              <button id="btn_send"
                type="submit"
                class="btn btn-primary">
                发送
              </button>
            </div>
            <div style="margin:0 84px 0 85px;">
              <input id="txt_message"
                type="text"
                class="form-control"
                maxlength="20" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="panel_more"
      style="display: none;">
      <div class="masker"></div>
      <div class="panel_inner">
        <div class="list_buttons">
          <ul>
            <li class="btn_layout"
              data-layout="live">
                  <div>
                    直播布局
                  </div>
              </li>
            <li class="btn_night">
                  <div>
                    夜间模式
                  </div>
              </li>
          </ul>
          <div class="btn_close">
            <span></span>
          </div>
        </div>
      </div>
    </div>

    <div class="list_faces"
      style="display: none;">
      <div class="list_faces_scroller">
        <ul>
          <li><img data-src="images/face/aimu.gif" data-type="aimu">
            </li>
          <li><img data-src="images/face/daxiao.gif" data-type="daxiao">
            </li>
          <li><img data-src="images/face/huaixiao.gif" data-type="huaixiao">
            </li>
          <li><img data-src="images/face/liuhan.gif" data-type="liuhan">
            </li>
          <li><img data-src="images/face/shuijiao.gif" data-type="shuijiao">
            </li>
          <li><img data-src="images/face/yiwen.gif" data-type="yiwen">
            </li>
          <li><img data-src="images/face/aoman.gif" data-type="aoman">
            </li>
          <li><img data-src="images/face/jiew.gif" data-type="jiew">
            </li>
          <li><img data-src="images/face/liulei.gif" data-type="liulei">
            </li>
          <li><img data-src="images/face/sun.gif" data-type="sun">
            </li>
          <li><img data-src="images/face/youhh.gif" data-type="youhh">
            </li>
          <li><img data-src="images/face/baiyan.gif" data-type="baiyan">
            </li>
          <li><img data-src="images/face/fadai.gif" data-type="fadai">
            </li>
          <li><img data-src="images/face/jingkong.gif" data-type="jingkong">
            </li>
          <li><img data-src="images/face/meiyan.gif" data-type="meiyan">
            </li>
          <li><img data-src="images/face/tiaoxie.gif" data-type="tiaoxie">
            </li>
          <li><img data-src="images/face/yue.gif" data-type="yue">
            </li>
          <li><img data-src="images/face/baoquan.gif" data-type="baoquan">
            </li>
          <li><img data-src="images/face/fanu.gif" data-type="fanu">
            </li>
          <li><img data-src="images/face/jingya.gif" data-type="jingya">
            </li>
          <li><img data-src="images/face/mojing.gif" data-type="mojing">
            </li>
          <li><img data-src="images/face/touxiao.gif" data-type="touxiao">
            </li>
          <li><img data-src="images/face/yumen.gif" data-type="yumen">
            </li>
          <li><img data-src="images/face/bishi.gif" data-type="bishi">
            </li>
          <li><img data-src="images/face/fendou.gif" data-type="fendou">
            </li>
          <li><img data-src="images/face/kafei.gif" data-type="kafei">
            </li>
          <li><img data-src="images/face/piezui.gif" data-type="piezui">
            </li>
          <li><img data-src="images/face/tu.gif" data-type="tu">
            </li>
          <li><img data-src="images/face/yun.gif" data-type="yun">
            </li>
          <li><img data-src="images/face/bizui.gif" data-type="bizui">
            </li>
          <li><img data-src="images/face/ganga.gif" data-type="ganga">
            </li>
          <li><img data-src="images/face/kelian.gif" data-type="kelian">
            </li>
        </ul>
        <ul>
          <li><img data-src="images/face/pijiu.gif" data-type="pijiu">
            </li>
          <li><img data-src="images/face/weiqu.gif" data-type="weiqu">
            </li>
          <li><img data-src="images/face/zaijian.gif" data-type="zaijian">
            </li>
          <li><img data-src="images/face/cahan.gif" data-type="cahan">
            </li>
          <li><img data-src="images/face/guai.gif" data-type="guai">
            </li>
          <li><img data-src="images/face/koubi.gif" data-type="koubi">
            </li>
          <li><img data-src="images/face/qiang.gif" data-type="qiang">
            </li>
          <li><img data-src="images/face/weixiao.gif" data-type="weixiao">
            </li>
          <li><img data-src="images/face/zancheng.gif" data-type="zancheng">
            </li>
          <li><img data-src="images/face/cool.gif" data-type="cool">
            </li>
          <li><img data-src="images/face/guzhang.gif" data-type="guzhang">
            </li>
          <li><img data-src="images/face/kuaikl.gif" data-type="kuaikl">
            </li>
          <li><img data-src="images/face/qinqin.gif" data-type="qinqin">
            </li>
          <li><img data-src="images/face/woshou.gif" data-type="woshou">
            </li>
          <li><img data-src="images/face/zhemo.gif" data-type="zhemo">
            </li>
          <li><img data-src="images/face/dabing.gif" data-type="dabing">
            </li>
          <li><img data-src="images/face/hanxiao.gif" data-type="hanxiao">
            </li>
          <li><img data-src="images/face/kulou.gif" data-type="kulou">
            </li>
          <li><img data-src="images/face/qiu.gif" data-type="qiu">
            </li>
          <li><img data-src="images/face/xigua.gif" data-type="xigua">
            </li>
          <li><img data-src="images/face/zhouma.gif" data-type="zhouma">
            </li>
          <li><img data-src="images/face/daku.gif" data-type="daku">
            </li>
          <li><img data-src="images/face/haqi.gif" data-type="haqi">
            </li>
          <li><img data-src="images/face/kun.gif" data-type="kun">
            </li>
          <li><img data-src="images/face/ruo.gif" data-type="ruo">
            </li>
          <li><img data-src="images/face/xin.gif" data-type="xin">
            </li>
          <li><img data-src="images/face/zuohh.gif" data-type="zuohh">
            </li>
          <li><img data-src="images/face/dangao.gif" data-type="dangao">
            </li>
          <li><img data-src="images/face/hua.gif" data-type="hua">
            </li>
          <li><img data-src="images/face/lianhong.gif" data-type="lianhong">
            </li>
          <li><img data-src="images/face/shuai.gif" data-type="shuai">
            </li>
          <li><img data-src="images/face/yinxian.gif" data-type="yinxian">
            </li>
        </ul>
      </div>
      <div class="list_faces_paginator">
        <b class="selected"></b>
        <b></b>
      </div>
    </div>
    <div class="dlg_login"
      style="display: none;">
      <div class="masker"></div>
      <div class="dlg_inner">
        <div class="dlg_title">
          <p style="font-size: 22px; color: #fff;">
              Welcome!
            </p>
          <p style="font-size: 12px; color: #ccc;">
              欢迎进入直播互动课堂
            </p>
        </div>
        <div class="dlg_content">
          <p class="txt_username">
              <input type="text" class="form-control" placeholder="请输入您的姓名" maxlength="20" />
            </p>
          <p class="txt_password">
              <input type="text" class="form-control" placeholder="请输入课堂密码" maxlength="20" />
            </p>
          <p>
              <button id="btn_login" class="btn_login">
                进入教室
              </button>
            </p>
        </div>
      </div>
    </div>

    <div class="tip_panel"
      style="display: none;">
      用户名或者密码错误!
    </div>
  </div>

  <div class="tip_message"
    style="display: none;"></div>
  <div id="online_users"
    style="display: none;">
    0人在线
  </div>
</body>

</html>