<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='prompt_ethernet' 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 ethernet dongle to load test parameters</span><span class="color_idle goofy-label-zh">请插入网路介面卡读取测试参数</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 id="usb_status_panel">
<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>

<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 id="fixture_label" 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>