fix single style

ykxie
1 parent 5f6e3b99
Showing 7 changed files with 386 additions and 130 deletions
src/css/recording.css
src/gxb-ide/Dir.js
src/js/audioPlayer/theme.default.css
src/js/gbreplayer.js
src/player-fuben.html
src/player.html
src/scss/recording.scss
@@ -349,13 +349,10 @@ button {
     margin: 2px 8px;
     border-radius: 50%; }
-#previewpanel #resultiframe {
-  padding-bottom: 24px; }
-
-#previewpanel .nav-tabs {
+.recording-page #previewpanel .nav-tabs {
   margin: 16px 8px; }
-#previewpanel .nav-tabs > li > a {
+.recording-page #previewpanel .nav-tabs > li > a {
   margin-right: 0;
   line-height: 1.428571429;
   border: none !important;
@@ -364,29 +361,31 @@ button {
   padding: 0;
   border-radius: 21px; }
-#previewpanel .nav-tabs > li.active > a {
+.recording-page #previewpanel .nav-tabs > li.active > a {
   background: #fff !important;
   color: #1FB6FF;
   border: 1px solid #1FB6FF !important; }
-#previewpanel .nav-tabs > li > a:hover {
+.recording-page #previewpanel .nav-tabs > li > a:hover {
   background: #FFF !important;
   color: #1FB6FF; }
-#previewpanel .panel {
+.recording-page #previewpanel .panel {
   margin-bottom: 0;
   background-color: #fff;
   border: none;
   border-radius: 0; }
+#previewpanel #resultiframe {
+  padding-bottom: 24px; }
+
 #previewpanel #replay {
   color: #1FB6FF; }
 #previewpanel #cmprun-tabs {
-  background: -webkit-linear-gradient(left, #1FB6FF, #62DDF5);
-  background: -moz-linear-gradient(left, #1FB6FF, #62DDF5);
   border-radius: 32px;
-  padding: 2px 1px; }
+  padding: 2px 1px;
+  border: none; }
   #previewpanel #cmprun-tabs li {
     width: 25%;
     text-align: center; }
@@ -614,14 +613,6 @@ button {
   padding: 4px 10px 0 10px;
   box-shadow: 0px 2px 10px #333; }
-#full-screen, #back-screen {
-  background: transparent;
-  color: #FFF;
-  border: transparent;
-  position: absolute;
-  right: 0;
-  margin: 7px 16px; }
-
 .audio-wrap {
   position: relative; }
   .audio-wrap .audio-disable {
@@ -646,7 +646,7 @@
                 source: "https://gxb-file.oss-cn-beijing.aliyuncs.com" + audioUrl,
                 imagePath: '../js/audioPlayer/image',
                 debuggers: false,
-                // allowSeek: false,
+                allowSeek: false,
                 playCallback: function() { // 播放
                     console.log('++++++++');
                     CodingEditer.playCoding();
@@ -16,7 +16,7 @@
     font-size: 15px;
     display: -webkit-flex;
     display: flex;
-    width: 90%;
+    width: 100%;
 }
 #componentWrapper .controls_toggle {
@@ -1208,7 +1208,7 @@ $(function(){
 				}else{
 					$("#recordpanel").height($(window).height() - $recordpanel.top - 16 - 34); 
 					$("#resultpanel").height($(window).height() - $resultpanel.top - 16 - 34);
-					$(".CodeMirror").height($(window).height() - $recordpanel.top - 16 - 34);
+					$(".CodeMirror").height($(window).height() - $recordpanel.top - 288);
 				}
 				$('#resultoutput').find('.tab-content').height($(window).height() - $resultoutput.top - 164).css({'overflow-y': "scroll"})
@@ -1304,8 +1304,9 @@ $(function(){
 				        Hourglass.stopTimer();
 				    }
 				    GBCodePlayBack.triggertotal = 0;
-
-				    $('.play-code').show();
+				    if (_role == 1) {
+				    	$('.play-code').show();
+				    }
 				    $('.play-pause-code').hide();
 				}
 			}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="renderer" content="webkit"> 
+    <title>互动编程</title>
+    <link rel="stylesheet" href="css/responsive/css/bootstrap.min.css">
+    <link href="css/validationEngine.jquery.css" rel="stylesheet">
+    <link href="css/codemirror.css" rel="stylesheet">
+    <link href="css/cm-theme/gbtags.css" rel="stylesheet">
+    <link href="css/cm-theme/gbtags-dark.css" rel="stylesheet">
+    <link href="css/font/iconfont.css" rel="stylesheet">
+    <link href="css/font_all/iconfont.css" rel="stylesheet">
+    <link href="css/layout.css" rel="stylesheet">
+    <!-- <link href="css/main.css" rel="stylesheet"> -->
+    <link href="css/recording.css" rel="stylesheet">
+    <link rel="stylesheet" href="js/audioPlayer/theme.default.css">
+
+    <script>
+        var gxb_api = "https://restful.gaoxiaobang.com";
+        // var gxb_api = "https://restful.gaoxiaobang.com"
+    </script>
+
+    <script src="js/jquery-1.7.1.js"></script>
+    <script src="js/bootstrap.js"></script>
+
+    <script src="js/util/util.js"></script>
+
+    <script src="js/spin.js"></script>
+    <script src="js/ladda.js"></script>
+    <!-- <script src="js/bootstrapslider.js"></script> -->
+    <script src="js/jquery-ui-1.8.20.custom.js"></script>
+    <script src="js/codemirror.js"></script>
+    <!-- <script src="js/handlebars-1.3.js"></script> -->
+    <script src="js/emmet.js"></script>
+    <script  src="js/jshint-2.6.min.js"></script>
+    <script  src="js/jstorage.js"></script>
+    
+
+
+    <script src="js/05-util.js"></script>
+    <script src="js/03-http.js"></script>
+    <script src="js/jquery.iframe-transport.js"></script>
+    <script src="js/jquery.ui.widget.js"></script>
+    <script  src="js/jquery.fileupload.js"></script>
+
+    <script  src="js/jquery.validationEngine.js"></script>
+    <script  src="js/jquery.validationEngine-zh.js"></script>
+    <script  src="js/jquery.isotope.js"></script>
+
+    <script src="js/gbreplayer.js"></script>
+    <script src="js/recording/recording.js"></script>
+    <script src="js/player1.js"></script>
+    
+</head>
+<body>
+    <div id="player">
+        <div class="real-program-content player">
+            <div class="row">
+                <div class="col-md-8 col-sm-8 col-xs-8" id="editorpanel">
+                    <div class="">
+                        <button type="button" class="btn btn-success" data-readonly="1" data-target="#saveModal" id="readonly" title="" style="display: none;"></button>
+                    </div>
+                    <div class="recording-wrap">
+                        <div class="recording-header">
+                            <ul class="nav nav-tabs pull-left" id="recordertab">
+                                <li style="margin-left: 34px;">
+                                    <a href="#replayzone" data-toggle="tab"></a>
+                                </li>
+                            </ul>
+                            <div id="editorwrapper">
+                                <button type="button" class="lang btn btn-default btn-primary pull-right" id="htmlbutton" title="" data-editorname="html">HTML/CSS/JS</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="recordpanel" class="panel panel-default">
+                        <!-- 编辑播放代码区域 -->
+                        <input type="hidden" class="audio-url" value="value">
+                        <div class="tab-content" style="position:relative;">
+                            <div class="tab-pane active" id="replayzone">
+                                <textarea id="HTMLplayer" style="display: none;"></textarea>
+                                <textarea id="CSSplayer" style="display: none;"></textarea>
+                                <textarea id="JSplayer" style="display: none;"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-4 col-xs-4" id="previewpanel">
+                    <div id="resultpanel" class="panel panel-default">
+                        <div class="panel-heading">
+                            <div class="btn-group">
+                                <p id="replay">预览录制</p>
+
+                            </div>
+                            <div class="btn-group pull-right" id="comprunbtngrp"></div>
+                            <div class="clearfix"></div>
+
+                        </div>
+                        <div class="panel-body hidden" id="cmprun-output">
+                            <div id="resultoutput" style="overflow:auto;">
+                                <!-- Nav tabs -->
+                                <ul class="nav nav-tabs" role="tablist" id="cmprun-tabs">
+                                    <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text-warning">标准</a></li>
+                                    <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text-warning">编译</a></li>
+                                    <li><a href="#stderr" role="tab" data-toggle="tab" class="text-danger">错误</a></li>
+                                    <li><a href="#output" role="tab" data-toggle="tab" class="text-success">结果</a></li>
+                                </ul>
+                                <!-- Tab panes -->
+                                <div class="tab-content">
+                                    <div class="tab-pane active padall15" id="stdin">
+                                        <input type="text" class="form-control" id="input" placeholder="标准输入">
+                                    </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>
+                        </div>
+                        <div class="panel-body" id="ifrcontainer">
+                            <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="" id="audioWrap">
+            <button class="play-code" style="display: none;">
+                <i class="icon iconfont icon-play"></i>
+            </button>
+            <button class="play-pause-code" style="display: none;">
+                <i class="icon iconfont icon-playcopy"></i>
+            </button>
+            <button id="full-screen">
+                <i class="icon iconfont icon-fangda"></i>
+            </button>
+            <button id="back-screen" style="display: none;">
+                <i class="icon iconfont icon-fangda"></i>
+            </button>
+        </div>
+        <button id="play" class="hidden" data-status='0' title="暂停">
+            <i class="icon iconfont icon-playcopy"></i>
+        </button>
+    </div>
+
+
+<script type="text/javascript" src="js/audioPlayer/jQuery.AudioPlayer.js"></script>
+<script src="js/gbdebug/mode/xml/xml.js"></script>
+<script src="js/gbdebug/mode/javascript/javascript.js"></script>
+<script src="js/gbdebug/mode/css/css.js"></script>
+<script src="js/gbdebug/mode/htmlmixed/htmlmixed.js"></script>
+<script src="js/gbdebug/mode/clike/clike.js"></script> 
+<script src="js/gbdebug/mode/php/php.js"></script> 
+<script src="js/gbdebug/mode/python/python.js"></script> 
+
+</body>
+</html>
+
@@ -2,7 +2,8 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="renderer" content="webkit"> 
+    <meta name="renderer" content="webkit">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
     <title>互动编程</title>
     <link rel="stylesheet" href="css/responsive/css/bootstrap.min.css">
     <link href="css/validationEngine.jquery.css" rel="stylesheet">
@@ -51,74 +52,192 @@
     <script src="js/gbreplayer.js"></script>
     <script src="js/recording/recording.js"></script>
     <script src="js/player1.js"></script>
-    
+
+<style>
+    .play-editor{
+        width: 100%;
+        height: 100%;
+        background-color: #FFF;
+        position: absolute;
+    }
+    .recording-wrap{
+        display: none;
+    }
+    #previewpanel{
+        position: absolute;
+        bottom: 48px;
+        width: 100%;
+        height: 240px;
+        overflow: hidden;
+        z-index: 99;
+    }
+    .play-editor #resultpanel{
+        height: 100%;
+    }
+    #recordpanel{
+        overflow: hidden;
+        width: 100%;
+    }
+    .editor-wrap{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    .toolbar{
+        width: 100%;
+        height: 40px;
+        overflow: hidden;
+        background-color: #F4F6F9;
+        padding: 0 36px;
+    }
+    #previewpanel .nav-tabs{
+        margin: 0;
+    }
+    #cmprun-tabs{
+        float: left;
+        border-radius: 30px;
+        overflow: hidden;
+        margin: 3px 10px !important;
+        color: #fff;
+    }
+    #previewpanel .nav-tabs > li > a {
+        margin-right: 0;
+        padding: 0;
+        border-radius: 21px;
+        padding: 4px 21px;
+        margin: 1px;
+        border-radius: 15px;
+        font-size: 14px;
+        border: none !important;
+    }
+    .toolbar .result-tabs > li.active > a, 
+    .toolbar .result-tabs > li.active > a:hover, 
+    .toolbar .result-tabs > li > a:hover, 
+    .toolbar .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;
+    }
+    .text{
+        color: #1FB6FF;
+    }
+    .comprun {
+        background: #FFF;
+        border: 1px solid #3ad5f5;
+        color: #1FB6FF;
+        border-radius: 24px;
+    }
+    .toolbar .btn {
+        padding: 3px 18px;
+    }
+    .toolbar #comprunbtngrp{
+        margin-right: 64px;
+        padding-top: 6px;
+    }
+    .full img{
+        width: 32px;
+    }
+    .full #full-screen, .full #back-screen{
+        background: transparent;
+        color: #FFF;
+        border: transparent;
+        position: absolute;
+        right: 0;
+        margin: 4px 52px;
+    }
+    #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;
+    }
+</style>
 </head>
 <body>
     <div id="player">
-        <div class="real-program-content player">
-            <div class="row">
-                <div class="col-md-8 col-sm-8 col-xs-8" id="editorpanel">
-                    <div class="">
-                        <button type="button" class="btn btn-success" data-readonly="1" data-target="#saveModal" id="readonly" title="" style="display: none;"></button>
-                    </div>
-                    <div class="recording-wrap">
-                        <div class="recording-header">
-                            <ul class="nav nav-tabs pull-left" id="recordertab">
-                                <li style="margin-left: 34px;">
-                                    <a href="#replayzone" data-toggle="tab"></a>
-                                </li>
-                            </ul>
-                            <div id="editorwrapper">
-                                <button type="button" class="lang btn btn-default btn-primary pull-right" id="htmlbutton" title="" data-editorname="html">HTML/CSS/JS</button>
-                            </div>
-                        </div>
+        <div class="play-editor">
+            <div class="">
+                <button type="button" class="btn btn-success" data-readonly="1" data-target="#saveModal" id="readonly" title="" style="display: none;"></button>
+            </div>
+            <div class="recording-wrap">
+                <div class="recording-header">
+                    <ul class="nav nav-tabs pull-left" id="recordertab">
+                        <li style="margin-left: 34px;">
+                            <a href="#replayzone" data-toggle="tab"></a>
+                        </li>
+                    </ul>
+                    <div id="editorwrapper">
+                        <button type="button" class="lang btn btn-default btn-primary pull-right" id="htmlbutton" title="" data-editorname="html">HTML/CSS/JS</button>
                     </div>
-                    <div id="recordpanel" class="panel panel-default">
-                        <!-- 编辑播放代码区域 -->
-                        <input type="hidden" class="audio-url" value="value">
-                        <div class="tab-content" style="position:relative;">
-                            <div class="tab-pane active" id="replayzone">
-                                <textarea id="HTMLplayer" style="display: none;"></textarea>
-                                <textarea id="CSSplayer" style="display: none;"></textarea>
-                                <textarea id="JSplayer" style="display: none;"></textarea>
-                            </div>
+                </div>
+            </div>
+            
+            <div class="editor-wrap">
+                <div id="recordpanel" class="panel panel-default">
+                    <!-- 编辑播放代码区域 -->
+                    <input type="hidden" class="audio-url" value="value">
+                    <div class="tab-content" style="position:relative;">
+                        <div class="tab-pane active" id="replayzone">
+                            <textarea id="HTMLplayer" style="display: none;"></textarea>
+                            <textarea id="CSSplayer" style="display: none;"></textarea>
+                            <textarea id="JSplayer" style="display: none;"></textarea>
                         </div>
                     </div>
                 </div>
-                <div class="col-md-4 col-sm-4 col-xs-4" id="previewpanel">
-                    <div id="resultpanel" class="panel panel-default">
-                        <div class="panel-heading">
-                            <div class="btn-group">
-                                <p id="replay">预览录制</p>
-
-                            </div>
-                            <div class="btn-group pull-right" id="comprunbtngrp"></div>
-                            <div class="clearfix"></div>
+            </div>
+            <div class="" id="previewpanel">
+                <div id="resultpanel" class="panel panel-default">
+                    <div class="panel-heading toolbar">
+                        <!-- <div class="btn-group">
+                            <p id="replay">预览录制</p>
+                        </div> -->
+                        <ul class="nav nav-tabs result-tabs" 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="btn-group pull-right" id="comprunbtngrp"></div>
+                        <div class="full">
+                            <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 class="panel-body hidden" id="cmprun-output">
-                            <div id="resultoutput" style="overflow:auto;">
-                                <!-- Nav tabs -->
-                                <ul class="nav nav-tabs" role="tablist" id="cmprun-tabs">
-                                    <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text-warning">标准</a></li>
-                                    <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text-warning">编译</a></li>
-                                    <li><a href="#stderr" role="tab" data-toggle="tab" class="text-danger">错误</a></li>
-                                    <li><a href="#output" role="tab" data-toggle="tab" class="text-success">结果</a></li>
-                                </ul>
-                                <!-- Tab panes -->
-                                <div class="tab-content">
-                                    <div class="tab-pane active padall15" id="stdin">
-                                        <input type="text" class="form-control" id="input" placeholder="标准输入">
-                                    </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 class="clearfix"></div>
+                    </div>
+
+                    <div class="panel-body hidden" id="cmprun-output">
+                        <div id="resultoutput" style="overflow:auto;">
+                            <!-- Tab panes -->
+                            <div class="tab-content">
+                                <div class="tab-pane active padall15" id="stdin">
+                                    <input type="text" class="effect-2" id="input" placeholder="标准输入">
+                                    <span class="focus-border"></span>
                                 </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>
-                        <div class="panel-body" id="ifrcontainer">
-                            <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
-                        </div>
+                    </div>
+                    <div class="panel-body" id="ifrcontainer">
+                        <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
                     </div>
                 </div>
             </div>
@@ -131,12 +250,6 @@
             <button class="play-pause-code" style="display: none;">
                 <i class="icon iconfont icon-playcopy"></i>
             </button>
-            <button id="full-screen">
-                <i class="icon iconfont icon-fangda"></i>
-            </button>
-            <button id="back-screen" style="display: none;">
-                <i class="icon iconfont icon-fangda"></i>
-            </button>
         </div>
         <button id="play" class="hidden" data-status='0' title="暂停">
             <i class="icon iconfont icon-playcopy"></i>
@@ -405,46 +405,51 @@ button{
 }
+.recording-page{
+    #previewpanel{
+        .nav-tabs{
+            margin: 16px 8px;
+        }
+        .nav-tabs>li>a {
+            margin-right: 0;
+            line-height: 1.428571429;
+            border: none !important;
+            height: 34px;
+            line-height: 34px;
+            padding: 0;
+            border-radius: 21px;
+        }
+        .nav-tabs>li.active>a{
+            background: #fff !important;
+            color: #1FB6FF;
+            border: 1px solid #1FB6FF !important;
+        }
+        .nav-tabs>li>a:hover{
+            background: #FFF !important;
+            color: #1FB6FF;
+        }
+        .panel{
+            margin-bottom: 0;
+            background-color: #fff;
+            border: none;
+            border-radius: 0;
+        }
+    }
+}
+
 #previewpanel{
     #resultiframe{
         padding-bottom: 24px;
-    }
-
-    .nav-tabs{
-        margin: 16px 8px;
-    }
-    .nav-tabs>li>a {
-        margin-right: 0;
-        line-height: 1.428571429;
-        border: none !important;
-        height: 34px;
-        line-height: 34px;
-        padding: 0;
-        border-radius: 21px;
-    }
-    .nav-tabs>li.active>a{
-        background: #fff !important;
-        color: #1FB6FF;
-        border: 1px solid #1FB6FF !important;
-    }
-    .nav-tabs>li>a:hover{
-        background: #FFF !important;
-        color: #1FB6FF;
-    }
-    .panel{
-        margin-bottom: 0;
-        background-color: #fff;
-        border: none;
-        border-radius: 0;
-    }
+    } 
     #replay{
         color: #1FB6FF;
     }
     #cmprun-tabs{
-        background: -webkit-linear-gradient(left, #1FB6FF, #62DDF5);
-        background: -moz-linear-gradient(left, #1FB6FF, #62DDF5);
+        // background: -webkit-linear-gradient(left, #1FB6FF, #62DDF5);
+        // background: -moz-linear-gradient(left, #1FB6FF, #62DDF5);
         border-radius: 32px;
         padding: 2px 1px;
+        border: none;
         li{
             width: 25%;
@@ -738,18 +743,6 @@ button{
     box-shadow: 0px 2px 10px #333;
 }
-
-#full-screen, #back-screen{
-    background: transparent;
-    color: #FFF;
-    border: transparent;
-    position: absolute;
-    right: 0;
-    margin: 7px 16px;
-}
-    
-
-
 // Player 
 .audio-wrap{
     position: relative;