add teacher and student page

ykxie
1 parent 042bc469
Showing 4 changed files with 510 additions and 66 deletions
src/live/review.html
src/live/student.html
src/live/style/main.css
src/live/teacher.html
@@ -3,46 +3,179 @@
 <head>
     <meta charset="UTF-8">
     <title>学生端</title>
+    <link href="../css/reset.css" rel="stylesheet">
+    <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
     <link rel="stylesheet" href="../js/codemirror-5.25.0/lib/codemirror.css">
+    <link rel="stylesheet" href="style/main.css">
+<style>
+
+    .teacher-live, .student-work{
+        position: absolute;
+        width: 50%;
+        height: 100%;
+    }
+    .teacher-live{
+        left: 0;
+        border-right: 1px solid #999;
+    }
+    .student-work{
+        right: 0;
+    }
+</style>
 </head>
 <body>
-    <h1>学生端</h1>
-    <ul id="messages"></ul>
-    <textarea id="student" title="HTML"></textarea>
+<div class="student">
+    <div class="teacher-live">
+        <div class="live-wrap">
+            <!-- 头部信息 -->
+            <div class="header">
+                <h1>老师端</h1>
+            </div>
+
+            <!-- 录制区域 -->
+            <div class="live-code">
+                <textarea id="teacher" title="HTML"></textarea>
+            </div>
+
+            <!-- 编译操作区 -->
+            <!-- 运行结果区 -->
+            <div class="live-console-wrap">
+                <div id="toolbar">
+                    <!-- Nav tabs -->
+                    <ul class="nav nav-tabs result-tabs need-compile" role="tablist" id="cmprun-tabs">
+                        <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text">标准</a></li>
+                        <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text">编译</a></li>
+                        <li><a href="#stderr" role="tab" data-toggle="tab" class="text">错误</a></li>
+                        <li><a href="#output" role="tab" data-toggle="tab" class="text">结果</a></li>
+                    </ul>
+                    <div class="pull-right func">
+                        <button class="btn compile-btn" id="CompileBtn">
+                            <span class="ladda-label">编译运行</span>
+                        </button>
+                        <a id="full-screen" class="fb">
+                            <img src="../img/full-screen-icon.svg" alt="">
+                        </a>
+                        <a id="back-screen" class="fb" style="display: none;">
+                            <img src="../img/full-screen-icon.svg" alt="">
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Tab panes -->
+                <div id="resultoutput" class="tab-content need-compile">
+                    <div class="tab-pane active padall15" id="stdin">
+                        <div class="stdin-wrap">
+                            <input class="effect-2" id="runtimeArgus" type="text" placeholder="标准输入">
+                            <span class="focus-border"></span>
+                        </div>
+                    </div>
+                    <div class="tab-pane padall15" id="cmpinfo"></div>
+                    <div class="tab-pane padall15" id="stderr"></div>
+                    <div class="tab-pane padall15" id="output"></div>
+                </div>
+                <div class="panel-body no-compile" id="ifrcontainer">
+                    <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
+                </div>
+            </div>
+
+            <!-- 录制控制区 -->
+            <div class="live-ctrl">
+                
+            </div>
+        </div>
+    </div>
+    <div class="student-work">
+        <div class="live-wrap">
+            <!-- 头部信息 -->
+            <div class="header">
+                <h1>学生端</h1>
+            </div>
+
+            <!-- 录制区域 -->
+            <div class="live-code">
+                <textarea id="student" title="HTML"></textarea>
+            </div>
+
+            <!-- 编译操作区 -->
+            <!-- 运行结果区 -->
+            <div class="live-console-wrap">
+                <div id="toolbar">
+                    <!-- Nav tabs -->
+                    <ul class="nav nav-tabs result-tabs need-compile" role="tablist" id="cmprun-tabs">
+                        <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text">标准</a></li>
+                        <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text">编译</a></li>
+                        <li><a href="#stderr" role="tab" data-toggle="tab" class="text">错误</a></li>
+                        <li><a href="#output" role="tab" data-toggle="tab" class="text">结果</a></li>
+                    </ul>
+                    <div class="pull-right func">
+                        <button class="btn compile-btn" id="CompileBtn">
+                            <span class="ladda-label">编译运行</span>
+                        </button>
+                        <a id="full-screen" class="fb">
+                            <img src="../img/full-screen-icon.svg" alt="">
+                        </a>
+                        <a id="back-screen" class="fb" style="display: none;">
+                            <img src="../img/full-screen-icon.svg" alt="">
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Tab panes -->
+                <div id="resultoutput" class="tab-content need-compile">
+                    <div class="tab-pane active padall15" id="stdin">
+                        <div class="stdin-wrap">
+                            <input class="effect-2" id="runtimeArgus" type="text" placeholder="标准输入">
+                            <span class="focus-border"></span>
+                        </div>
+                    </div>
+                    <div class="tab-pane padall15" id="cmpinfo"></div>
+                    <div class="tab-pane padall15" id="stderr"></div>
+                    <div class="tab-pane padall15" id="output"></div>
+                </div>
+                <div class="panel-body no-compile" id="ifrcontainer">
+                    <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
+                </div>
+            </div>
+
+            <!-- 录制控制区 -->
+            <div class="live-ctrl">
+                
+            </div>
+        </div>
+    </div>    
+</div>
+
 <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
 <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
 <script src="../js/codemirror-5.25.0/lib/codemirror.js"></script>
+<script src="../js/bootstrap.js"></script>
 <script>
 $(function() {
+    var teacherId = document.getElementById('teacher');
     var studentId = document.getElementById('student');
     var socket = io('http://localhost:3000');
-    var student = CodeMirror.fromTextArea(studentId, {
+    var teacher = CodeMirror.fromTextArea(teacherId, {
       value: '输入HTML代码',
       mode:  'text/javascript',
       lineNumbers: true,
       smartIndent: false
     });
-    // CodeMirror.on(student, "change", function(instance, changeObj) {
-    //     console.log(instance);
-    //     console.log(changeObj);
-    // });
+    var student = CodeMirror.fromTextArea(studentId, {
+      value: '输入HTML代码',
+      mode:  'text/javascript',
+      lineNumbers: true,
+      smartIndent: false
+    });
-    socket.on('connect', function () {
-        socket.on('programming.content', function(msg) {
-            console.log('programming.content ---- ' + msg);
-            student.setValue(msg);
-        });
-      });
-    socket.on('chat message', function(msg) {
+    socket.on('teacher.programming', function(msg) {
         console.log(msg);
         var msgObj = JSON.parse(msg)
         // student.setValue(msg)
-
-        processChangeObject(student, msgObj);
+        processChangeObject(teacher, msgObj);
         $('#messages').append($('<li>').text(msg));
         window.scrollTo(0, document.body.scrollHeight);
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font: 13px Helvetica, Arial;
+}
+
+.live-wrap {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.header {
+    text-align: center;
+    border-bottom: 1px solid #c1c1c1;
+    padding: 8px 0;
+}
+
+.header h1 {
+    font-size: 18px;
+    margin: 0;
+}
+
+.live-code {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding-bottom: 296px;
+}
+
+.live-code .CodeMirror {
+    height: 100%;
+}
+
+.live-console-wrap {
+    width: 100%;
+    background-color: #FFF;
+    height: 200px;
+    position: absolute;
+    bottom: 60px;
+    z-index: 999;
+    overflow: hidden;
+}
+
+#toolbar {
+    width: 100%;
+    height: 40px;
+    overflow: hidden;
+    background-color: #F4F6F9;
+    padding: 0 36px;
+}
+
+.result-tabs {
+    overflow: hidden;
+    margin: 5px 10px;
+    color: #fff;
+}
+
+.text {
+    color: #1FB6FF;
+}
+
+.result-tabs>li.active>a,
+.result-tabs>li.active>a:hover,
+.result-tabs>li>a:hover,
+.result-tabs>li.active>a:focus {
+    color: #FFF;
+    background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
+    background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
+    -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
+    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
+    box-shadow: 0px 0px 2px 0px #B3E5FF;
+    border: none;
+}
+
+.result-tabs>li>a,
+.result-tabs>li.active>a:hover {
+    padding: 4px 21px;
+    border: none;
+    margin: 1px;
+    border-radius: 15px;
+    font-size: 14px;
+    transition: all 0.1s ease;
+}
+
+.func {
+    height: 36px;
+    padding-top: 5px;
+}
+
+.stdin-wrap {
+    margin: 0 48px;
+    position: relative;
+}
+
+#stdin {
+    position: absolute;
+    width: 100%;
+}
+
+#stdin:focus {
+    outline: none;
+}
+
+#stdin input[type="text"] {
+    font: 15px/24px "Lato", Arial, sans-serif;
+    color: #333;
+    width: 100%;
+    box-sizing: border-box;
+    letter-spacing: 1px;
+    padding-left: 12px;
+    outline: none;
+}
+
+#stdin .effect-2 {
+    border: 0;
+    padding: 12px 0 1px;
+    border-bottom: 1px solid #ccc;
+}
+
+#stdin .effect-2 ~ .focus-border {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 2px;
+    background-color: #62DCF5;
+    transition: 1s;
+}
+
+#stdin .effect-2:focus ~ .focus-border {
+    width: 100%;
+    transition: 1s;
+    left: 0;
+}
+
+.nav-tabs {
+    border: none;
+    float: left;
+    border-bottom: 0;
+}
+
+.panel-body {
+    padding: 0;
+}
+
+.compile-btn {
+    background: #FFF;
+    border: 1px solid #3ad5f5;
+    color: #1FB6FF;
+    border-radius: 24px;
+}
+
+.btn {
+    padding: 3px 18px;
+}
+
+.fb {
+    float: right;
+    margin: 0 16px;
+    cursor: pointer;
+}
+
+.fb img {
+    width: 32px;
+}
+
+.live-ctrl {
+    width: 100%;
+    height: 60px;
+    position: absolute;
+    bottom: 0;
+    z-index: 999;
+    padding: 0 136px;
+    background-color: #23383f;
+    box-sizing: border-box;
+}
@@ -4,6 +4,8 @@
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title>老师端</title>
+    <link href="../css/reset.css" rel="stylesheet">
+    <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
     <link rel="stylesheet" href="../js/codemirror-5.25.0/lib/codemirror.css">
     <style>
@@ -16,68 +18,201 @@
     body {
         font: 13px Helvetica, Arial;
     }
-    
-    form {
-        background: #000;
-        padding: 3px;
-        position: fixed;
+    .live-wrap{
+        position: absolute;
         width: 100%;
+        height: 100%;
+        overflow: hidden;
     }
-    
-    form input {
-        border: 0;
-        padding: 10px;
-        width: 80%;
-        margin-right: .5%;
+    .header{
+        text-align: center;
+        border-bottom: 1px solid #c1c1c1;
+        padding: 8px 0;
     }
-    
-    form button {
-        width: 19%;
-        background: rgb(130, 224, 255);
+    .header h1{
+        font-size: 18px;
+        margin: 0;
+    }
+    .live-code{
+        position: relative;
+        width: 100%;
+        height: 100%;
+        padding-bottom: 296px;
+    }
+    .live-code .CodeMirror{
+        height: 100%;
+    }
+    .live-console-wrap{
+        width: 100%;
+        background-color: #FFF;
+        height: 200px;
+        position: absolute;
+        bottom: 60px;
+        z-index: 999;
+        overflow: hidden;
+    }
+    #toolbar{
+        width: 100%;
+        height: 40px;
+        overflow: hidden;
+        background-color: #F4F6F9;
+        padding: 0 36px;
+    }
+    .result-tabs{
+        overflow: hidden;
+        margin: 5px 10px;
+        color: #fff;
+    }
+    .text{
+        color: #1FB6FF;
+    }
+    .result-tabs>li.active>a, .result-tabs>li.active>a:hover, .result-tabs>li>a:hover, .result-tabs>li.active>a:focus{
+        color: #FFF;
+        background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
+        background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
+        -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
+        transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
+        box-shadow: 0px 0px 2px 0px #B3E5FF;
         border: none;
-        padding: 10px;
     }
-    
-    #messages {
-        list-style-type: none;
-        margin: 0;
+    .result-tabs>li>a, .result-tabs>li.active>a:hover{
+        padding: 4px 21px;
+        border: none;
+        margin: 1px;
+        border-radius: 15px;
+        font-size: 14px;
+        transition: all 0.1s ease;
+    }
+    .func{
+        height: 36px;
+        padding-top: 5px;
+    }
+    .stdin-wrap {
+        margin: 0 48px;
+        position: relative;
+    }
+    #stdin {
+        position: absolute;
+        width: 100%;
+    }
+    #stdin :focus{outline: none;}
+
+    #stdin input[type="text"]{font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;padding-left: 12px;}
+
+    #stdin .effect-2{border: 0; padding: 12px 0 1px; border-bottom: 1px solid #ccc;}
+    #stdin .effect-2 ~ .focus-border{position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #62DCF5; transition: 1s;}
+    #stdin .effect-2:focus ~ .focus-border{width: 100%; transition: 1s; left: 0;}
+    .nav-tabs {
+        border: none;
+        float: left;
+        border-bottom: 0;
+    }
+    .panel-body{
         padding: 0;
     }
-    
-    #messages li {
-        padding: 5px 10px;
+
+    .compile-btn {
+        background: #FFF;
+        border: 1px solid #3ad5f5;
+        color: #1FB6FF;
+        border-radius: 24px;
     }
-    
-    #messages li:nth-child(odd) {
-        background: #eee;
+    .btn {
+        padding: 3px 18px;
     }
-    
-    #messages {
-        margin-bottom: 40px
+    .fb {
+        float: right;
+        margin: 0 16px;
+        cursor: pointer;
+    }
+    .fb img {
+        width: 32px;
+    }
+
+    .live-ctrl{
+        width: 100%;
+        height: 60px;
+        position: absolute;
+        bottom: 0;
+        z-index: 999;
+        padding: 0 136px;
+        background-color: #23383f;
+        box-sizing: border-box;
     }
     </style>
 </head>
 <body>
-    <h1>老师端</h1>
-    <ul id="messages"></ul>
-    <textarea id="teacher" title="HTML"></textarea>
-    
-    <form action="">
-        <input id="" autocomplete="off" />
-        <button>Send</button>
-    </form>
+<div class="live-wrap">
+    <!-- 头部信息 -->
+    <div class="header">
+        <h1>老师端</h1>
+    </div>
+
+    <!-- 录制区域 -->
+    <div class="live-code">
+        <textarea id="teacher" title="HTML"></textarea>
+    </div>
+
+    <!-- 编译操作区 -->
+    <!-- 运行结果区 -->
+    <div class="live-console-wrap">
+        <div id="toolbar">
+            <!-- Nav tabs -->
+            <ul class="nav nav-tabs result-tabs need-compile" role="tablist" id="cmprun-tabs">
+                <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text">标准</a></li>
+                <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text">编译</a></li>
+                <li><a href="#stderr" role="tab" data-toggle="tab" class="text">错误</a></li>
+                <li><a href="#output" role="tab" data-toggle="tab" class="text">结果</a></li>
+            </ul>
+            <div class="pull-right func">
+                <button class="btn compile-btn" id="CompileBtn">
+                    <span class="ladda-label">编译运行</span>
+                </button>
+                <a id="full-screen" class="fb">
+                    <img src="../img/full-screen-icon.svg" alt="">
+                </a>
+                <a id="back-screen" class="fb" style="display: none;">
+                    <img src="../img/full-screen-icon.svg" alt="">
+                </a>
+            </div>
+        </div>
+
+        <!-- Tab panes -->
+        <div id="resultoutput" class="tab-content need-compile">
+            <div class="tab-pane active padall15" id="stdin">
+                <div class="stdin-wrap">
+                    <input class="effect-2" id="runtimeArgus" type="text" placeholder="标准输入">
+                    <span class="focus-border"></span>
+                </div>
+            </div>
+            <div class="tab-pane padall15" id="cmpinfo"></div>
+            <div class="tab-pane padall15" id="stderr"></div>
+            <div class="tab-pane padall15" id="output"></div>
+        </div>
+        <div class="panel-body no-compile" id="ifrcontainer">
+            <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
+        </div>
+    </div>
+
+    <!-- 录制控制区 -->
+    <div class="live-ctrl">
+        
+    </div>
+</div>
 <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
 <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
 <script src="../js/codemirror-5.25.0/lib/codemirror.js"></script>
+<script src="../js/bootstrap.js"></script>
 <script>
     $(function() {
         var teacherId = document.getElementById('teacher');
         var socket = io('http://localhost:3000');
+        // 初始化codemirror页面
         var teacher = CodeMirror.fromTextArea(teacherId, {
           value: '输入HTML代码',
           mode:  'text/javascript',
@@ -85,28 +220,24 @@
           smartIndent: false
         });
+        // 记录每次操作的变化
         CodeMirror.on(teacher,"change", function(instance, changeObj) {
             console.log(instance);
             console.log(changeObj);
             var changeObjStr = JSON.stringify(changeObj);
-            socket.emit('chat message', changeObjStr);
+            socket.emit('teacher.programming', changeObjStr);
             socket.emit('programming.content', teacher.getValue());
         });
-        
-        // $('form').submit(function() {
-        //     socket.emit('chat message', $('#m').val());
-        //     $('#m').val('');
-        //     return false;
-        // });
-        // socket.on('chat message', function(msg) {
-        //     console.log(msg);
-        //     $('#messages').append($('<li>').text(msg));
-        //     window.scrollTo(0, document.body.scrollHeight);
-        // });
+        // 链接时执行初始化代码
+        socket.on('programming.content', function(msg) {
+            console.log('programming.content ---- ' + msg);
+            teacher.setValue(msg);
+        });
+
     });
 </script>
 </body>