| <html> |
| <head> |
| <meta charset="UTF-8"> |
| <style type="text/css"> |
| |
| .button { |
| display: inline-block; |
| vertical-align: baseline; |
| margin: 0 2px; |
| outline: none; |
| cursor: pointer; |
| text-align: center; |
| text-decoration: none; |
| padding: .5em 2em .55em; |
| text-shadow: 2px 2px 4px rgba(0,0,0,.5); |
| -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); |
| } |
| .button:hover { |
| text-decoration: none; |
| } |
| |
| .bigrounded { |
| -webkit-border-radius: 2em; |
| } |
| |
| .title_box { |
| background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); |
| } |
| |
| .panel_box{ |
| color: #e9e9e9; |
| background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); |
| } |
| |
| .panel_good{ |
| background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); |
| } |
| |
| .panel_bad{ |
| background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)); |
| } |
| |
| .text_shadow { |
| text-shadow: 4px 4px 6px #333333; |
| } |
| |
| .text_shadow_white { |
| text-shadow: 1px 1px 3px #E0E0E0; |
| } |
| |
| .text_shadow_small { |
| text-shadow: 2px 2px 3px #333333; |
| } |
| |
| .color_good { |
| color:#7db72f; |
| } |
| |
| .color_bad { |
| color:#c9151b; |
| } |
| |
| .color_idle { |
| color:LightSkyBlue; |
| } |
| |
| .font_title { |
| font-family:Arial; |
| font-size:150%; |
| font-weight:bold; |
| color:white; |
| } |
| |
| .font_label { |
| font-family:Arial; |
| font-size:110%; |
| } |
| |
| .font_input { |
| font-family:Monospace; |
| font-size:150%; |
| font-weight:bold; |
| } |
| |
| .font_status { |
| font-family:Monospace; |
| font-size:250%; |
| font-weight:bold; |
| } |
| |
| .input_box { |
| text-align: center; |
| width: 100%; |
| height: 100%; |
| border: none; |
| color: -webkit-text; |
| background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); |
| font-family:Monospace; |
| font-size:100%; |
| font-weight:bold; |
| } |
| |
| .input_box:invalid { |
| background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)); |
| } |
| |
| .input_box:valid { |
| background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); |
| } |
| |
| /* color styles */ |
| /* black */ |
| .black { |
| color: #d7d7d7; |
| border:none; |
| background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#222)); |
| -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); |
| } |
| |
| .black:hover { |
| background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); |
| } |
| |
| .black:active { |
| color: #666; |
| background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#444)); |
| } |
| |
| /* gray */ |
| .gray { |
| color: #e9e9e9; |
| background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); |
| } |
| |
| /* white */ |
| .white { |
| color: #606060; |
| background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc)); |
| } |
| |
| /* main image container */ |
| .popup_img{ |
| position: relative; |
| z-index: 1; |
| } |
| |
| /* CSS for image within container */ |
| .popup_img img.original_img{ |
| position: relative; |
| z-index: 3; |
| opacity: 1; |
| -webkit-transition: all 0.5s ease-in-out; |
| } |
| |
| /* CSS for image when mouse hovers over main container */ |
| .popup_img:hover img.original_img{ |
| -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); |
| -webkit-transform: scale(1.20, 1.20); |
| opacity: 0; |
| } |
| |
| /* CSS for desc div of each image. */ |
| .popup_img div.desc{ |
| position: absolute; |
| width: 20%; |
| /* Set z-index to that less than image's, so it's hidden beneath it */ |
| z-index: 1; |
| padding: 8px; |
| background: rgba(0, 0, 0, 0.8); |
| color: white; |
| -webkit-border-radius: 0 0 8px 8px; |
| opacity: 0; /* Set initial opacity to 0 */ |
| -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); |
| -webkit-transition: all 0.5s ease 0.1s; |
| } |
| |
| .popup_img div.desc a{ |
| color: white; |
| } |
| |
| /* CSS for desc div when mouse hovers over main container */ |
| .popup_img:hover div.desc{ |
| opacity:1; |
| } |
| |
| .popup_img div.rightslide{ |
| width:26%; |
| height:84%; |
| top:7%; |
| right:10%; |
| padding-left:25px; |
| -webkit-border-radius: 0 8px 8px 0; |
| } |
| |
| .popup_img:hover div.rightslide{ |
| -webkit-transform: translate(110%, 0%); |
| } |
| |
| .popup_img img.analyzed_img{ |
| position:absolute; |
| margin: auto; |
| top:0%; |
| z-index: 2; |
| opacity: 1; |
| -webkit-transition: all 0.5s ease-in-out; |
| } |
| |
| .popup_img:hover img.analyzed_img{ |
| -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); |
| -webkit-transform: scale(1.20, 1.20); |
| } |
| |
| .progress div.text{ |
| position: relative; |
| z-index: 2; |
| } |
| |
| .progress div.bar_holder{ |
| position:absolute; |
| width:98.5%; |
| z-index:1; |
| height:2.5%; |
| top:94.5%; |
| left:0%; |
| right:0%; |
| bottom:0%; |
| margin:auto; |
| } |
| |
| .progress div.bar{ |
| position: relative; |
| z-index: 1; |
| width: 0%; |
| height: 100%; |
| -webkit-border-radius: 5px; |
| -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; |
| -webkit-transition: width .4s ease-in-out; |
| } |
| |
| .progress div.bar span{ |
| display: inline-block; |
| height: 100%; |
| -webkit-border-radius: 3px; |
| -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; |
| -webkit-transition: width .4s ease-in-out; |
| } |
| |
| .progress div.pgray span { |
| background-color: #999; |
| } |
| |
| .progress div.stripes span { |
| -webkit-background-size: 30px 30px; |
| -webkit-box-shadow: -2px -2px 10px rgba(0, 0, 0, .7) inset; |
| background-image: -webkit-gradient(linear, left top, right bottom, |
| color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), |
| color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), |
| color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), |
| to(transparent)); |
| background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
| transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
| transparent 75%, transparent); |
| -webkit-animation: animate-stripes 3s linear infinite; |
| } |
| |
| @-webkit-keyframes animate-stripes { |
| 0% {background-position: 0 0;} 100% {background-position: 60px 0;} |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div id='prompt_usb' class="panel_box text_shadow" style="height:100%;clear:both;text-align:center"> |
| <table class="font_status" style="margin:auto;height:100%;"><tr><td class="test-vcenter-inner" style="text-align:center;"> |
| <div class="text"> |
| <span class="color_idle goofy-label-en">Please insert the USB stick to load test parameters</span><span class="color_idle goofy-label-zh">请插入U盘读取测试参数</span> |
| </div> |
| </td></tr></table> |
| </div> |
| <div id="container" hidden> |
| <div id="Title" class="title_box" style="height:5%;"> |
| <table class="text_shadow_white font_title" style="margin:auto;height:100%;"><tr><td class="test-vcenter-inner"> |
| <span class="goofy-label-en">Camera Performance Test and ALS Calibration</span><span class="goofy-label-zh">相机效能与ALS校正</span> |
| </td></tr></table> |
| </div> |
| <div id="menu" class="panel_box" style="height:75%;width:20%;float:left;"> |
| <div class="panel_box text_shadow_small font_label" style="height:5%;padding-left:3%"> |
| <span class="goofy-label-en">USB Stick:</span><span class="goofy-label-zh">测试参数U盘:</span> |
| </div> |
| <div id="test_param" class="panel_bad" style="height:10%;text-align:center"> |
| <table class="font_input" style="margin:auto;height:100%;"><tr><td class="test-vcenter-inner"> |
| <div id="usb_status"> |
| <span class="goofy-label-en">UNLOADED</span><span class="goofy-label-zh">未载入</span> |
| </div> |
| </td></tr></table> |
| </div> |
| <div id="test_sn_label" class="panel_box text_shadow_small font_label" style="height:5%;padding-left:3%"> |
| <span class="goofy-label-en">Serial Number:</span><span class="goofy-label-zh">待测物序号:</span> |
| </div> |
| <div id="test_sn" class="panel_good" style="height:10%;text-align:center;"> |
| <table class="font_input" style="margin:auto;height:100%;border:0;border-spacing:0" cellpadding="0" cellspacing="0"> |
| <tr><td class="test-vcenter-inner"> |
| <input id="serial_number" class="input_box" disabled type="text" value="" required pattern="TEST_SN_NUMBER" onclick="OnSnInputBoxClick();" oninput="UpdateTestBottonStatus();"> |
| </td></tr></table> |
| </div> |
| <div class="panel_box text_shadow_small font_label" style="height:5%;padding-left:3%"> |
| <span class="goofy-label-en">Fixture:</span><span class="goofy-label-zh">制具链接:</span> |
| </div> |
| <div id="test_fixture" class="panel_bad" style="height:10%;text-align:center"> |
| <table class="font_input" style="margin:auto;height:100%;"><tr><td class="test-vcenter-inner"> |
| <div id="fixture_status"> |
| <span class="goofy-label-en">UNAVAILABLE</span><span class="goofy-label-zh">未连接</span> |
| </div> |
| </td></tr></table> |
| </div> |
| <div id="menu_placeholder" style="height:15%"> |
| </div> |
| <div style="height:20%;text-align:center"> |
| <button id="btn_run_test" class="button black" disabled type="button" onclick="ButtonRunTestClick();" style="width:100%;height:97%;font-size:140%"> |
| <span class="goofy-label-en">Run Test</span><span class="goofy-label-zh">开始测试</span> |
| </button> |
| </div> |
| <div style="height:20%;text-align:center"> |
| <button id="btn_exit_test" class="button black" type="button" onclick="ButtonExitTestClick();" style="width:100%;height:97%;font-size:140%"> |
| <span class="goofy-label-en">Exit Test</span><span class="goofy-label-zh">离开测试</span> |
| </button> |
| </div> |
| </div> |
| <div id="content" class="white" style="height:75%;width:80%;float:right;"> |
| <table style="margin:auto;height:100%;"><tr><td style="vertical-align:middle"> |
| <div class="popup_img" style=""> |
| <img id="camera_image" class="original_img" hidden src="" alt="Camera Image"></img> |
| <div class="desc rightslide" hidden> |
| </div> |
| <img id="analyzed_image" class="analyzed_img" hidden src=""></img> |
| </div> |
| </td></tr></table> |
| </div> |
| <div id="test_console" class="panel_box text_shadow" style="height:20%;clear:both;text-align:center"> |
| <table class="font_status" style="margin:auto;height:100%;"><tr><td class="test-vcenter-inner" style="text-align:center;"> |
| <div class="progress"> |
| <div id="test_status" class="text"> |
| <span class="color_idle goofy-label-en">IDLE</span><span class="color_idle goofy-label-zh">閒置中</span> |
| <span class="color_idle"></span> |
| </div> |
| <div class="bar_holder"> |
| <div id="progress_bar" class="bar pgray stripes"> |
| <span style="width: 100%"></span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </td></tr></table> |
| </div> |
| </div> |
| </div> |
| </body></html> |