final logics with draft design

ljwoo94 · Jan 14, 2020 · 7da083a · 7da083a
1 parent 208cfe6
commit 7da083a
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 43 deletions.
diff --git a/flasksample/templates/career_stream.html b/flasksample/templates/career_stream.html
@@ -5,9 +5,12 @@
 		<meta name="viewport" content="height=1080,width=1920,user-scalable=no"/>
 
 		<link rel="stylesheet" href="../static/css/mainpage.css">
-
+		<link rel="stylesheet" href="../static/css/plyr.css">
 		<script type="text/javascript" src="https://svcapi.gigagenie.ai/sdk/v1.0/js/gigagenie.js"></script>
 
+		<script src="https://cdn.plyr.io/3.5.6/plyr.polyfilled.js"></script>
+
+
 		<title>Genie School KT Project</title>
 
 		<script type="text/javascript">
@@ -34,10 +37,10 @@
 					console.log("initialize success, appid:" + extra.appid);
 
 					//안내 TTS
-					sendTTS("이제 한번, 경찰이 되어 볼까요?");
-					setTimeout(function() {
-						location.href = "/result";
-					}, 50000);
+					sendTTS("이제한번 경찰이 되어 볼까요?~");
+					//setTimeout(function() {
+					//location.href = "/result";
+					//}, 5000);
 					//Delay 후 send data.
 					//location.href = '/greeting';
 
@@ -67,22 +70,62 @@
 					if(result_cd === 200) {
 						console.log("service finish success");
 						}
-						;
+
 					});
 		};
 
 		</script>
 </head>
 <body onload="init();">
 
-	<center>
-
-	<iframe width="1280" height="720" src="https://www.youtube.com/embed/QI_2N5qOcQE?mute=1&autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-	</center>
+    <!--<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="4zrHnJmNebw"></div>-->
+<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
+<center>
+<div id="player"></div>
+<canvas id="canvas" width="10" height= "10"></canvas>
+</center>
+		<script>
+		// 2. This code loads the IFrame Player API code asynchronously.
+		var tag = document.createElement('script');
+
+		tag.src = "https://www.youtube.com/iframe_api";
+		var firstScriptTag = document.getElementsByTagName('script')[0];
+		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+		// 3. This function creates an <iframe> (and YouTube player)
+		//    after the API code downloads.
+		var player;
+		function onYouTubeIframeAPIReady() {
+		    player = new YT.Player('player', {
+		         height: '1200',
+		         width: '1600',
+		         videoId: 'QI_2N5qOcQE',
+		         events: {
+		           'onReady': onPlayerReady,
+		           'onStateChange': onPlayerStateChange
+		         }
+		     });
+			player.setOption('cc', 'reload', null);
+		}
+
+      // 4. The API will call this function when the video player is ready.
+      function onPlayerReady(event) {
+		          event.target.playVideo();
+				        }
+
+      // 5. The API calls this function when the player's state changes.
+      //    The function indicates that when playing a video (state=1),
+      //    the player should play for six seconds and then stop.
+      var done = false;
+	function onPlayerStateChange(event) {
+	       if (event.data == YT.PlayerState.PLAYING && !done) {
+	          setTimeout(function() {
+					  location.href = '/result';
+					  }, 33000);
+	           done = true;
+		        }
+	     }
+
+    </script>
 </body>
-
 </html>
-
-
-
diff --git a/flasksample/templates/polite_stream.html b/flasksample/templates/polite_stream.html
@@ -9,7 +9,7 @@
 		<script type="text/javascript" src="https://svcapi.gigagenie.ai/sdk/v1.0/js/gigagenie.js"></script>
 
 		<script src="https://cdn.plyr.io/3.5.6/plyr.polyfilled.js"></script>
-		
+
 
 		<title>Genie School KT Project</title>
 
@@ -37,7 +37,7 @@
 					console.log("initialize success, appid:" + extra.appid);
 
 					//안내 TTS
-					sendTTS("자 이제, 우리친구들 차례에요. 다같이 인사~");
+					sendTTS("자 이제, 우리친구들 차례에요. 다같이 인사해볼까요?~");
 					//setTimeout(function() {
 					//location.href = "/result";
 					//}, 5000);
@@ -80,7 +80,7 @@
 
     <!--<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="4zrHnJmNebw"></div>-->
 <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
-<center>	
+<center>
 <div id="player"></div>
 <canvas id="canvas" width="10" height= "10"></canvas>
 </center>
@@ -125,7 +125,7 @@
 	           done = true;
 		        }
 	     }
-				
+
     </script>
 </body>
 </html>
diff --git a/flasksample/templates/security_stream.html b/flasksample/templates/security_stream.html
@@ -5,9 +5,12 @@
 		<meta name="viewport" content="height=1080,width=1920,user-scalable=no"/>
 
 		<link rel="stylesheet" href="../static/css/mainpage.css">
-
+		<link rel="stylesheet" href="../static/css/plyr.css">
 		<script type="text/javascript" src="https://svcapi.gigagenie.ai/sdk/v1.0/js/gigagenie.js"></script>
 
+		<script src="https://cdn.plyr.io/3.5.6/plyr.polyfilled.js"></script>
+
+
 		<title>Genie School KT Project</title>
 
 		<script type="text/javascript">
@@ -34,11 +37,10 @@
 					console.log("initialize success, appid:" + extra.appid);
 
 					//안내 TTS
-					sendTTS("자! 멋있는 히어로가 되는 법! 따라해볼까요???");
-
-					setTimeout(function() {
-						location.href = "/result";
-					}, 60000);
+					sendTTS("지진이 일어났어요!! 어서 대피행동을 해야해요!");
+					//setTimeout(function() {
+					//location.href = "/result";
+					//}, 5000);
 					//Delay 후 send data.
 					//location.href = '/greeting';
 
@@ -68,22 +70,62 @@
 					if(result_cd === 200) {
 						console.log("service finish success");
 						}
-						;
+
 					});
 		};
 
 		</script>
 </head>
 <body onload="init();">
 
-	<center>
-    <!-- 시연시작 전에 새로 링크걸기-->
-	<iframe width="1280" height="720" src="https://www.youtube.com/embed/QI_2N5qOcQE?mute=1&autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-	</center>
+    <!--<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="4zrHnJmNebw"></div>-->
+<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
+<center>
+<div id="player"></div>
+<canvas id="canvas" width="10" height= "10"></canvas>
+</center>
+		<script>
+		// 2. This code loads the IFrame Player API code asynchronously.
+		var tag = document.createElement('script');
+
+		tag.src = "https://www.youtube.com/iframe_api";
+		var firstScriptTag = document.getElementsByTagName('script')[0];
+		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+		// 3. This function creates an <iframe> (and YouTube player)
+		//    after the API code downloads.
+		var player;
+		function onYouTubeIframeAPIReady() {
+		    player = new YT.Player('player', {
+		         height: '1200',
+		         width: '1600',
+		         videoId: 'QI_2N5qOcQE',
+		         events: {
+		           'onReady': onPlayerReady,
+		           'onStateChange': onPlayerStateChange
+		         }
+		     });
+			player.setOption('cc', 'reload', null);
+		}
+
+      // 4. The API will call this function when the video player is ready.
+      function onPlayerReady(event) {
+		          event.target.playVideo();
+				        }
+
+      // 5. The API calls this function when the player's state changes.
+      //    The function indicates that when playing a video (state=1),
+      //    the player should play for six seconds and then stop.
+      var done = false;
+	function onPlayerStateChange(event) {
+	       if (event.data == YT.PlayerState.PLAYING && !done) {
+	          setTimeout(function() {
+					  location.href = '/result';
+					  }, 33000);
+	           done = true;
+		        }
+	     }
+
+    </script>
 </body>
-
 </html>
-
-
-
diff --git a/flasksample/templates/select.html b/flasksample/templates/select.html
@@ -99,14 +99,24 @@
 </script>
 	</head>
 	<body onload=init()>
-		<br><br>
-		<center><h1>Genie School!!!!</h1><br>
-			<p>지니스쿨 메인 페이지 입니다.</p><br><br><br>
-			<br>
-			<h2>테마를 골라주세요</h2><br><br><br>
-			<input type='image' src="../static/img/polite_img.jpg" class='btn_theme' onclick=toPolite()>
-			<input type='image' src="../static/img/career_img.jpg" class='btn_theme'>
-			<input type='image' src="../static/img/sec_img.jpg" class='btn_theme'>
+			<header>
+		<center>
+			<div class="logo_img"><a href="http://211.254.213.123:30003"><img src="../static/img/logo.jpg" width="150" height="75"></a> </div>
 		</center>
+		</header>
+
+		<section>
+		<center>
+				<img src="../static/img/theme_1.png" width="100" height="50"><br>
+			</center>
+			<p>
+			</p><div class="theme_img">
+						<div class="img1"><input type="image" id="polite" src="../static/img/polite.png" class="btn_theme" onclick="toPolite()"></div>
+						<div class="img2"><input type="image" src="../static/img/job_3.png" class="btn_theme"></div>
+						<div class="img3"><input type="image" src="../static/img/safety_3.png" class="btn_theme"></div>
+					</div>
+				<p></p>
+				<div>
+			</section>
 	</body>
 </html>