From ed2f4e177fc8677592b3188c9bbef15f757c0fcb Mon Sep 17 00:00:00 2001
From: Bot Bahlul <88623122+botbahlul@users.noreply.github.com>
Date: Mon, 8 Jul 2024 08:40:37 +0800
Subject: [PATCH] Add files via upload

---
 index.html | 748 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 439 insertions(+), 309 deletions(-)
diff --git a/index.html b/index.html
index 787dc26..f16f165 100644
--- a/index.html
+++ b/index.html
@@ -1,411 +1,541 @@
 <!DOCTYPE html>
 <style>
 	* {
-		margin: 0;
-		padding: 0;
-		box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
 	}
 	*:before,
 	*:after {
-		font-family: Arial, sans-serif;
-		font-size: 12px;
-		box-sizing: inherit;
+	font-family: Arial, sans-serif;
+	font-size: 12px;
+	box-sizing: inherit;
 	}
 	body {
-		font-family: Arial, sans-serif;
+	font-family: Arial, sans-serif;
 	}
-
+	
 	.container {
-		width: 100%;
-		margin: 10px auto;
+	width: 100%;
+	margin: 10px auto;
 	}
 	.two-column {
-		display: flex;
-		gap: 10px;
+	display: flex;
+	gap: 10px;
+	}
+	.two-column-2 {
+	display: flex;
+	gap: 10px;
 	}
 	.column {
-		flex: 1;
-		background: #f4f4f4;
-		padding: 10px;
-		border: 1px solid #ddd;
+	flex: 1;
+	background: #f4f4f4;
+	padding: 10px;
+	border: 1px solid #ddd;
 	}
-
+	.column-2-1 {
+	width: 25%
+	}
+	.column-2-2 {
+	width: 75%
+	}
+	
 	#select_src_language {
-		width: 160px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	width: 160px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
 	#select_src_dialect {
-		width: 240px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	width: 240px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
 	#select_src_font {
-		width: 160px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	width: 160px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
 	#input_src_font_size {
-		width: 40px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	width: 40px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
-	#input_src_font_color {
-		width: 50px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	#slider_src_font_color {
+	width: 40px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
 	#input_src_container_width_factor {
-		width: 56px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	width: 50px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
 	#input_src_container_height_factor {
-		width: 56px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	width: 50px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
 	#input_src_container_top_factor {
-		width: 56px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	width: 50px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
 	#input_src_container_left_factor {
-		width: 56px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	width: 50px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
-	#input_src_container_color {
-		width: 56px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	#slider_src_container_color {
+	width: 100px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
-	#input_src_container_opacity {
-		width: 80px; /* Adjust width as needed */
-		height: 4px; /* Adjust height as needed */
+	#slider_src_container_opacity {
+	width: 100px; /* Adjust width as needed */
+	height: 4px; /* Adjust height as needed */
 	}
 	#select_dst_language {
-		width: 160px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	width: 160px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
 	#select_dst_dialect {
-		width: 240px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	width: 240px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
 	#select_dst_font {
-		width: 160px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	width: 160px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
 	#input_dst_font_size {
-		width: 40px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	width: 40px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
-	#input_dst_font_color {
-		width: 50px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	#slider_dst_font_color {
+	width: 40px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
 	#input_dst_container_width_factor {
-		width: 56px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	width: 50px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
 	#input_dst_container_height_factor {
-		width: 56px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	width: 50px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
 	#input_dst_container_top_factor {
-		width: 56px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	width: 50px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
 	#input_dst_container_left_factor {
-		width: 56px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	width: 50px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
-	#input_dst_container_color {
-		width: 56px; /* Adjust width as needed */
-		height: 16px; /* Adjust height as needed */
+	#slider_dst_container_color {
+	width: 100px; /* Adjust width as needed */
+	height: 16px; /* Adjust height as needed */
 	}
-	#input_dst_container_opacity {
-		width: 80px; /* Adjust width as needed */
-		height: 4px; /* Adjust height as needed */
+	#slider_dst_container_opacity {
+	width: 100px; /* Adjust width as needed */
+	height: 4px; /* Adjust height as needed */
 	}
-
+	
 	#start_button {
-		border: 0;
-		/*background-color:transparent;*/
-		padding: 0;
+	border: 0;
+	/*background-color:transparent;*/
+	padding: 0;
 	}
 	#url_box {
-		width: 350px; /* Adjust width as needed */
-		height: 18px; /* Adjust height as needed */
+	width: 350px; /* Adjust width as needed */
+	height: 18px; /* Adjust height as needed */
 	}
 	.mic-button {
-		float: right;
-		width: 48px;
-		height: 48px;
+	float: right;
+	width: 48px;
+	height: 48px;
 	}
-
+	
 	.iframe_header_unit iframe_container yt_iframe {
-		top: 0;
-		left: 0;
-		bottom: 0;
-		width: 100%;
-		height: 100%;
-		text-align: center;
-		border: 0;
-		//position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	border: 0;
+	//position: absolute;
 	}
 	#my_yt_iframe {
-		/*border: 0;*/
-		/*background-color:transparent;*/
-		position: absolute;
-		z-index: 1;
-		display: none;
+	/*border: 0;*/
+	/*background-color:transparent;*/
+	position: absolute;
+	z-index: 1;
+	display: none;
 	}
-
+	
 	.video_header_unit video_container video {
-		top: 0;
-		left: 0;
-		bottom: 0;
-		width: 100%;
-		height: 100%;
-		text-align: center;
-		border: 0;
-		//position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	border: 0;
+	//position: absolute;
 	}
 	video {
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		z-index: 0;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 0;
 	}
 	#my_video {
-		/*border: 0;*/
-		/*background-color:transparent;*/
-		position: absolute;
-		z-index: 1;
-		display: none;
+	/*border: 0;*/
+	/*background-color:transparent;*/
+	position: absolute;
+	z-index: 1;
+	display: none;
 	}
-
+	
 	.flv_video_header_unit flv_video_container flv_video {
-		top: 0;
-		left: 0;
-		bottom: 0;
-		width: 100%;
-		height: 100%;
-		text-align: center;
-		border: 0;
-		//position: absolute;
-	}
-
+	top: 0;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	border: 0;
+	//position: absolute;
+	}
+	
 	flv_video {
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		z-index: 0;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 0;
 	}
-
+	
 	#videojs-flvjs-player {
-		/*border: 0;*/
-		/*background-color:transparent;*/
-		position: absolute;
-		z-index: 1;
-		display: none;
-	}
-
-
+	/*border: 0;*/
+	/*background-color:transparent;*/
+	position: absolute;
+	z-index: 1;
+	display: none;
+	}
+	
+	
 	.detail__media-video {
-		width: 100%;
-		height: 100%;
-		display: none;
-		text-align: center;
-		position: relative;
-		overflow: hidden;
-		//background-color: green;
+	width: 100%;
+	height: 100%;
+	display: none;
+	text-align: center;
+	position: relative;
+	overflow: hidden;
+	//background-color: green;
 	}
 	.ratiobox {
-		left:0%;
-		top:0%;
-		width: 100%;
-		height:100%;
-		overflow: hidden;
-		position: relative;
-		text-align: center;
-		//background-color: red;
-		padding-bottom: 56.25%; /* 16:9 ratio */
+	left:0%;
+	top:0%;
+	width: 100%;
+	height:100%;
+	overflow: hidden;
+	position: relative;
+	text-align: center;
+	//background-color: red;
+	padding-bottom: 56.25%; /* 16:9 ratio */
 	}
 	.ratiobox iframe {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
 	}
 	#controls {
-		margin-top: 10px;
-		z-index: 10;
+	margin-top: 10px;
+	z-index: 10;
 	}
 	#timeSlider {
-		width: 960px;
-		position: absolute;
-		z-index: 111;
+	width: 960px;
+	position: absolute;
+	z-index: 111;
 	}
 </style>
 <html lang="en">
-<head>
-	<meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Live Audio/Video Translate v0.3.0</title>
-</head>
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>Live Audio/Video Translate v0.3.1</title>
+	</head>
+	
+	<body>
+		<br>
+		<h3 style="font-size: 12px">Live Audio/Video Translate v0.3.1</h3>
+		
+		<div class="container">
+			<div class="two-column">
+				<div class="column">
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<label style='font-size: 12px'>Audio Language</label>
+							<br>
+							<input type="checkbox" id="checkbox_show_src" name="checkbox_show_src" style='font-size: 12px'>
+							<label style='font-size: 12px'> Show Transcription </label>
+							<br>
+							<input type="checkbox" id="checkbox_show_timestamp_src" name="checkbox_show_timestamp_src" style='font-size: 12px'>
+							<label style='font-size: 12px'> Show Timestamps </label>
+						</div>
+						<div class="column-2-2">
+							<select id='select_src_language' style='width: 160px' style='font-size: 12px'></select>
+							<select id='select_src_dialect' style='width: 240px' style='font-size: 12px'></select>
+							<br>
+							<br>
+							<br>
+						</div>
+					</div>
 
-<body>
-	<br>
-	<h3 style="font-size: 12px">Live Audio/Video Translate v0.3.0</h3>
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<label for="select_src_font" style="font-size: 12px">Subtitle Font</label>
+						</div>
+						<div class="column-2-2">
+							<select id="select_src_font" style="font-size: 12px"></select>
+							<input type="number" id="input_src_font_size" min="1" value="18" style='font-size:12px'>
+							<input type="color" id="slider_src_font_color" value="#00ff1e" style='font-size:12px'>
+							&nbsp;
+							<label id="label_src_font_color" for="slider_src_font_color" style="font-size: 12px"></label>
+						</div>
+					</div>
+					
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<label for="input_src_container_width_factor" style="font-size: 12px" >Container Width</label>
+						</div>
+						<div class="column-2-2">
+							<input type="number" id="input_src_container_width_factor" step="0.001" value="0.795" style='font-size:12px'>
+							<label for="src_container_width_continuing_text" style="font-size: 12px" >x Video Width</label>
+						</div>
+					</div>
 
-    <div class="container">
-        <div class="two-column">
-            <div class="column">
-				<label style='font-size: 12px'>Audio Language&nbsp;&nbsp;&nbsp;</label>
-				<select id='select_src_language' style='width: 160px' style='font-size: 12px'></select>
-				<select id='select_src_dialect' style='width: 240px' style='font-size: 12px'></select>
-				<br>
-				<input type="checkbox" id="checkbox_show_src" name="checkbox_show_src" style='font-size: 12px'>
-				<label style='font-size: 12px'> Show Transcription </label>
-				<br>
-				<input type="checkbox" id="checkbox_show_timestamp_src" name="checkbox_show_timestamp_src" style='font-size: 12px'>
-				<label style='font-size: 12px'> Show Timestamps </label>
-				<br>
-				<label for="select_src_font" style="font-size: 12px">Subtitle Font&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
-				<select id="select_src_font" style="font-size: 12px"></select>
-				<input type="number" id="input_src_font_size" min="1" value="18" style='font-size:12px'>
-				<input type="color" id="input_src_font_color" value="#ffff00" style='font-size:12px'>
-				<br>
-				<label for="input_src_container_width_factor" style="font-size: 12px" >Container Width&nbsp;&nbsp;&nbsp;&nbsp;</label>
-				<input type="number" id="input_src_container_width_factor" min="0" max="1" step="0.001" value="0.8" style='font-size:12px'>
-				<label for="src_container_width_continuing_text" style="font-size: 12px" >x Video Width</label>
-				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-				<br>
-				<label for="input_src_container_height_factor" style="font-size: 12px">Container Height&nbsp;&nbsp;&nbsp;</label>
-				<input type="number" id="input_src_container_height_factor" min="0" max="1" step="0.001" value="0.15" style='font-size:12px'>
-				<label for="src_container_height_continuing_text" style="font-size: 12px">x Video Height</label>
-				<br>
-				<label for="input_src_container_top_factor" style="font-size: 12px">Container Top&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
-				<input type="number" id="input_src_container_top_factor" min="0" max="1" step="0.01" value="0.01" style='font-size:12px'>
-				<label for="src_container_top_continuing_text" style="font-size: 12px">x Video Height</label>
-				<br>
-				<label for="input_src_container_left_factor" style="font-size: 12px">Container Left&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
-				<input type="number" id="input_src_container_left_factor" min="0" max="1" step="0.01" value="0.1" style='font-size:12px'>
-				<label for="src_container_left_continuing_text" style="font-size: 12px">x Video Width</label>
-				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-				<input type="checkbox" id="checkbox_centerize_src" name="checkbox_centerize_src" style='font-size: 12px' checked='true;'>
-				<label style='font-size: 12px'> Centerize Horizontally </label>
-				<br>
-				<label for="input_src_container_color" style="font-size: 12px">Container Color&nbsp;&nbsp;&nbsp;&nbsp;</label>
-				<input type="color" id="input_src_container_color" value="#000000" style='font-size:12px'>
-				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-				<br>
-				<label for="input_src_container_opacity" style="font-size: 12px">Container Opacity&nbsp;</label>
-				<input type="range" id="input_src_container_opacity" min="0" max="1" step="0.01" value="0.3" style='font-size:12px'>
-				<br>
-				<input type="checkbox" id="checkbox_save_src" name="checkbox_save_src" style='font-size: 12px' checked='true;'>
-				<label style='font-size: 12px'> Save Transcription </label>
-            </div>
-            <div class="column">
-				<label style='font-size: 12px'>Translation&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
-				<select id='select_dst_language' style='width:160px' style='font-size:12px'></select>
-				<select id='select_dst_dialect' style='width:240px' style='font-size:12px'></select>
-				<br>
-				<input type="checkbox" id="checkbox_show_dst" name="checkbox_show_dst" style='font-size:12px'>
-				<label style='font-size: 12px'> Show Translation </label>
-				<br>
-				<input type="checkbox" id="checkbox_show_timestamp_dst" name="checkbox_show_timestamp_dst" style='font-size: 12px'>
-				<label style='font-size: 12px'> Show Timestamps </label>
-				<br>
-				<label for="select_dst_font" style="font-size: 12px">Subtitle Font&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
-				<select id="select_dst_font" style="font-size: 12px"></select>
-				<input type="number" id="input_dst_font_size" min="1" value="18" style='font-size:12px'>
-				<input type="color" id="input_dst_font_color" value="#ffff00" style='font-size:12px'>
-				<br>
-				<label for="input_dst_container_width_factor" style="font-size: 12px">Container Width&nbsp;&nbsp;&nbsp;&nbsp;</label>
-				<input type="number" id="input_dst_container_width_factor" min="0" max="1" step="0.001" value="0.8" style='font-size:12px'>
-				<label for="dst_container_width_continuing_text" style="font-size: 12px">x Video Width</label>
-				<br>
-				<label for="input_dst_container_height_factor" style="font-size: 12px">Container Height&nbsp;&nbsp;&nbsp;</label>
-				<input type="number" id="input_dst_container_height_factor" min="0" max="1" step="0.001" value="0.15" style='font-size:12px'>
-				<label for="dst_container_height_continuing_text" style="font-size: 12px">x Video Height</label>
-				<br>
-				<label for="input_dst_container_top_factor" style="font-size: 12px">Container Top&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
-				<input type="number" id="input_dst_container_top_factor" min="0" max="1" step="0.01" value="0.65" style='font-size:12px'>
-				<label for="dst_container_top_continuing_text" style="font-size: 12px">x Video Height</label>
-				<br>
-				<label for="input_dst_container_left_factor" style="font-size: 12px">Container Left&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
-				<input type="number" id="input_dst_container_left_factor" min="0" max="1" step="0.01" value="0.1" style='font-size:12px'>
-				<label for="dst_container_left_continuing_text" style="font-size: 12px">x Video Width</label>
-				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-				<input type="checkbox" id="checkbox_centerize_dst" name="checkbox_centerize_dst" style='font-size: 12px' checked='true;'>
-				<label style='font-size: 12px'> Centerize Horizontally </label>
-				<br>
-				<label for="input_dst_container_color" style="font-size: 12px">Container Color&nbsp;&nbsp;&nbsp;&nbsp;</label>
-				<input type="color" id="input_dst_container_color" value="#000000" style='font-size:12px'>
-				<br>
-				<label for="input_dst_container_opacity" style="font-size: 12px">Container Opacity&nbsp;</label>
-				<input type="range" id="input_dst_container_opacity" min="0" max="1" step="0.01" value="0.3" style='font-size:12px'>
-				<br>
-				<input type="checkbox" id="checkbox_save_dst" name="checkbox_save_dst" style='font-size: 12px' checked='true;'>
-				<label style='font-size: 12px'> Save Translation </label>
-			</div>
-		</div>
-	</div>
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<label for="input_src_container_height_factor" style="font-size: 12px">Container Height</label>
+						</div>
+						<div class="column-2-2">
+							<input type="number" id="input_src_container_height_factor" step="0.001" value="0.150" style='font-size:12px'>
+							<label for="src_container_height_continuing_text" style="font-size: 12px">x Video Height</label>
+						</div>
+					</div>
+
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<label for="input_src_container_left_factor" style="font-size: 12px">Container Left</label>
+						</div>
+						<div class="column-2-2">
+							<input type="number" id="input_src_container_left_factor" step="0.01" value="0.100" style='font-size:12px'>
+							<label for="src_container_left_continuing_text" style="font-size: 12px">x Video Width</label>
+							&nbsp;&nbsp;&nbsp;&nbsp;
+							<input type="checkbox" id="checkbox_centerize_src" name="checkbox_centerize_src" style='font-size: 12px' checked='true;'>
+							<label style='font-size: 12px'> Centerize Horizontally </label>
+						</div>
+					</div>
+						
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<label for="input_src_container_top_factor" style="font-size: 12px">Container Top</label>
+						</div>
+						<div class="column-2-2">
+							<input type="number" id="input_src_container_top_factor" step="0.01" value="0.010" style='font-size:12px'>
+							<label for="src_container_top_continuing_text" style="font-size: 12px">x Video Height</label>
+						</div>
+					</div>
+
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<label for="slider_src_container_color" style="font-size: 12px">Container Color</label>
+						</div>
+						<div class="column-2-2">
+							<input type="color" id="slider_src_container_color" value="#000000" style='font-size:12px'>
+							&nbsp;
+							<label id="label_src_container_color" for="slider_src_container_color" style="font-size: 12px"></label>
+						</div>
+					</div>
 
-	<label style="font-size: 12px" for="pause_threshold">Pause Threshold&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
-	<input style='width:60px' type="number" id="input_pause_threshold" min="0" step="1" value="2000">
-	<label for="pause_threshold_continuing_text" style="font-size: 12px"> (in miliseconds, silent duration that will trigger speech engine to restart)</label>
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<label for="slider_src_container_opacity" style="font-size: 12px">Container Opacity</label>
+						</div>
+						<div class="column-2-2">
+							<input type="range" id="slider_src_container_opacity" step="0.01" value="0.3" style='font-size:12px'>
+							&nbsp;
+							<label id="label_src_container_opacity" for="slider_src_container_opacity" style="font-size: 12px"></label>
+						</div>
+					</div>
 
-	<br>
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<input type="checkbox" id="checkbox_save_src" name="checkbox_save_src" style='font-size: 12px' checked='true;'>
+							<label style='font-size: 12px'> Save Transcription </label>
+						</div>
+					</div>
+				</div>
+				<div class="column">
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<label style='font-size: 12px'>Translation Language</label>
+							<br>
+							<input type="checkbox" id="checkbox_show_dst" name="checkbox_show_dst" style='font-size: 12px'>
+							<label style='font-size: 12px'> Show Translation </label>
+							<br>
+							<input type="checkbox" id="checkbox_show_timestamp_dst" name="checkbox_show_timestamp_dst" style='font-size: 12px'>
+							<label style='font-size: 12px'> Show Timestamps </label>
+						</div>
+						<div class="column-2-2">
+							<select id='select_dst_language' style='width: 160px' style='font-size: 12px'></select>
+							<select id='select_dst_dialect' style='width: 240px' style='font-size: 12px'></select>
+							<br>
+							<br>
+							<br>
+						</div>
+					</div>
 
-	<label style="font-size: 12px">Video URL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
-	<input id="url_box" type="url"></input>
-	<button type="button" id="embed_button">Embed</button>
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<label for="select_dst_font" style="font-size: 12px">Subtitle Font</label>
+						</div>
+						<div class="column-2-2">
+							<select id="select_dst_font" style="font-size: 12px"></select>
+							<input type="number" id="input_dst_font_size" min="1" value="18" style='font-size:12px'>
+							<input type="color" id="slider_dst_font_color" value="#fff700" style='font-size:12px'>
+							&nbsp;
+							<label id="label_dst_font_color" for="slider_dst_font_color" style="font-size: 12px"></label>
+						</div>
+					</div>
+					
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<label for="input_dst_container_width_factor" style="font-size: 12px" >Container Width</label>
+						</div>
+						<div class="column-2-2">
+							<input type="number" id="input_dst_container_width_factor" step="0.001" value="0.8" style='font-size:12px'>
+							<label for="dst_container_width_continuing_text" style="font-size: 12px" >x Video Width</label>
+						</div>
+					</div>
 
-	<div class="mic-button">
-		<button id="start_button">
-			<img id="start_img" src="images/mic.gif" alt="Start" height="45%" width="45%" border="0">
-		</button>
-	</div>
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<label for="input_dst_container_height_factor" style="font-size: 12px">Container Height</label>
+						</div>
+						<div class="column-2-2">
+							<input type="number" id="input_dst_container_height_factor" step="0.001" value="0.225" style='font-size:12px'>
+							<label for="dst_container_height_continuing_text" style="font-size: 12px">x Video Height</label>
+						</div>
+					</div>
 
-	<br></br>
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<label for="input_dst_container_left_factor" style="font-size: 12px">Container Left</label>
+						</div>
+						<div class="column-2-2">
+							<input type="number" id="input_dst_container_left_factor" step="0.01" value="0.1" style='font-size:12px'>
+							<label for="dst_container_left_continuing_text" style="font-size: 12px">x Video Width</label>
+							&nbsp;&nbsp;&nbsp;&nbsp;
+							<input type="checkbox" id="checkbox_centerize_dst" name="checkbox_centerize_dst" style='font-size: 12px' checked='true;'>
+							<label style='font-size: 12px'> Centerize Horizontally </label>
+						</div>
+					</div>
+						
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<label for="input_dst_container_top_factor" style="font-size: 12px">Container Top</label>
+						</div>
+						<div class="column-2-2">
+							<input type="number" id="input_dst_container_top_factor" step="0.01" value="0.65" style='font-size:12px'>
+							<label for="dst_container_top_continuing_text" style="font-size: 12px">x Video Height</label>
+						</div>
+					</div>
 
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<label for="slider_dst_container_color" style="font-size: 12px">Container Color</label>
+						</div>
+						<div class="column-2-2">
+							<input type="color" id="slider_dst_container_color" value="#000000" style='font-size:12px'>
+							&nbsp;
+							<label id="label_dst_container_color" for="slider_dst_container_color" style="font-size: 12px"></label>
+						</div>
+					</div>
 
-	<div class="iframe_header_unit">
-		<div class="iframe_container">
-			<div class="yt_iframe">
-				<iframe id="my_yt_iframe" width="960" height="540" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;" allowfullscreen="true" class="fillWidth"></iframe>
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<label for="slider_dst_container_opacity" style="font-size: 12px">Container Opacity</label>
+						</div>
+						<div class="column-2-2">
+							<input type="range" id="slider_dst_container_opacity" step="0.01" value="0.3" style='font-size:12px'>
+							&nbsp;
+							<label id="label_dst_container_opacity" for="slider_dst_container_opacity" style="font-size: 12px"></label>
+						</div>
+					</div>
+
+					<div class="two-column-2">
+						<div class="column-2-1">
+							<input type="checkbox" id="checkbox_save_dst" name="checkbox_save_dst" style='font-size: 12px' checked='true;'>
+							<label style='font-size: 12px'> Save Transcription </label>
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
-	</div>
-
-	<div class="video_header_unit">
-		<div class="video_container">
-			<div class="video">
-				<video id="my_video" class="video-js vjs-default-skin" controls preload="auto" allowfullscreen class="fillWidth"  data-setup='{}'>
-					<source id="video_source" />
-				</video>
+		
+		<label style="font-size: 12px" for="pause_threshold">Pause Threshold&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
+		<input style='width:60px' type="number" id="input_pause_threshold" min="0" step="1" value="2000">
+		<label for="pause_threshold_continuing_text" style="font-size: 12px"> (in miliseconds, silent duration that will trigger speech engine to restart)</label>
+		
+		<br>
+		
+		<label style="font-size: 12px">Video URL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
+		<input id="url_box" type="url"></input>
+		<button type="button" id="embed_button">Embed</button>
+		
+		<div class="mic-button">
+			<button id="start_button">
+				<img id="start_img" src="images/mic.gif" alt="Start" height="45%" width="45%" border="0">
+			</button>
+		</div>
+		
+		<br></br>
+		
+		
+		<div class="iframe_header_unit">
+			<div class="iframe_container">
+				<div class="yt_iframe">
+					<iframe id="my_yt_iframe" width="960" height="540" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;" allowfullscreen="true" class="fillWidth"></iframe>
+				</div>
 			</div>
 		</div>
-	</div>
-
-	<div class="flv_video_header_unit">
-		<div class="flv_video_container">
-			<div class="flv_video">
-				<video id="videojs-flvjs-player" class="video-js vjs-default-skin" controls preload="auto" allowfullscreen class="fillWidth"  data-setup='{}'>
-					<source src="" type='video/x-flv' />
-				</video>
+		
+		<div class="video_header_unit">
+			<div class="video_container">
+				<div class="video">
+					<video id="my_video" class="video-js vjs-default-skin" controls preload="auto" allowfullscreen class="fillWidth"  data-setup='{}'>
+						<source id="video_source" />
+					</video>
+				</div>
 			</div>
 		</div>
-	</div>
-
-	<div class="detail__media-video">
-		<div class="ratiobox" style="margin: 0 auto;">
-			<!--iframe id="cnnlive" width="960" height="540" style="margin: 0 auto;" frameborder="0" allowfullscreen='true;'></iframe-->
-			<iframe id="cnnlive" style="margin: 0 auto;" frameborder="0" allowfullscreen='true;'></iframe>
+		
+		<div class="flv_video_header_unit">
+			<div class="flv_video_container">
+				<div class="flv_video">
+					<video id="videojs-flvjs-player" class="video-js vjs-default-skin" controls preload="auto" allowfullscreen class="fillWidth"  data-setup='{}'>
+						<source src="" type='video/x-flv' />
+					</video>
+				</div>
+			</div>
 		</div>
-	</div>
-
-	<script src="js/jquery.min.js"></script>
-	<link rel="stylesheet" href="css/jquery-ui.css">
-	<script src="js/jquery-ui.min.js"></script>
-
-	<script type='text/javascript' src="js/index.js"></script>
-
-</body>
+		
+		<div class="detail__media-video">
+			<div class="ratiobox" style="margin: 0 auto;">
+				<!--iframe id="cnnlive" width="960" height="540" style="margin: 0 auto;" frameborder="0" allowfullscreen='true;'></iframe-->
+				<iframe id="cnnlive" style="margin: 0 auto;" frameborder="0" allowfullscreen='true;'></iframe>
+			</div>
+		</div>
+		
+		<script src="js/jquery.min.js"></script>
+		<link rel="stylesheet" href="css/jquery-ui.css">
+		<script src="js/jquery-ui.min.js"></script>
+		
+		<script type='text/javascript' src="js/index.js"></script>
+		
+	</body>
 </html>
