Update HTML

Graduate
Commit bbbd9ab5c976eada613ee29b298576ae470c08ee bbbd9ab5 1 parent 6e7fc1c6
Showing 2 changed files with 22 additions and 8 deletions
flask/templates/index.html
flask/templates/register.html
--- a/flask/templates/index.html
View file @bbbd9ab
+++ b/flask/templates/index.html
View file @bbbd9ab
@@ -2,10 +2,14 @@
 <html>
 <head>
 <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Web Attendance System</title>
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&amp;subset=korean">
+<style>body,h1,h2,h3,h4,h5,p {font-family: "Nanum+Gothic", sans-serif}</style>
 <style>
 #container {
-    margin: 0px auto;
+    margin: 15px auto;
     border: 10px #333 solid;
 }
 #videoInput {
@@ -184,9 +188,19 @@ function main()
 </script>
 </head>
 <body onload="cv['onRuntimeInitialized']=()=>{ init(); };">
+    <div class="w3-content" style="max-width:1400px">
+    <!-- Header -->
+        <header class="w3-container w3-center w3-padding-32"> 
+            <h1><b>얼굴 인식 출석 시스템</b></h1>
+            <p>Made by <span class="w3-tag">정해갑</span></p>
+        </header>
+
+        <div class="w3-row", style='text-align:center'>
             <div id="container">
                 <video autoplay="true" id="videoInput" style="display: none; object-fit: cover;"></video>
                 <canvas id="canvasOutput"></canvas>
             </div>
+        </div>
+    </div>
 </body>
 </html>
--- a/flask/templates/register.html
View file @bbbd9ab
+++ b/flask/templates/register.html
View file @bbbd9ab
@@ -6,10 +6,10 @@
 <title>Web Attendance System Register</title>
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&amp;subset=korean">
-<style>body,h1,h2,h3,h4,h5 {font-family: "Nanum+Gothic", sans-serif}</style>
+<style>body,h1,h2,h3,h4,h5,p {font-family: "Nanum+Gothic", sans-serif}</style>
 <style>
 #container {
-    margin: 0px auto;
+    margin: 15px auto;
 }
 #videoInput {
     background-color: #666;
@@ -23,7 +23,7 @@
 <script type='text/javascript' src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 <script type='text/javascript'>
 var b64encoded = '';
-var streaming = true;
+var streaming = false;
 function init()
 {
     let video = document.getElementById('videoInput');
@@ -173,11 +173,11 @@ function toggle_streaming()
     streaming = !streaming;
     if (streaming){
         streamButton.value = "촬영중지";
-        change_notice("1초 후 얼굴을 촬영합니다");
+        change_notice("얼굴이 인식되면 얼굴을 촬영합니다");
     }
     else{
         streamButton.value = "촬영시작";
-        change_notice("촬영이 중지되었습니다");
+        change_notice("촬영 시작 버튼을 누르면 인식된 얼굴을 촬영합니다");
     }
     main();
 }
@@ -232,7 +232,8 @@ and is wrapped around the whole page content, except for the footer in this exam
         </header>
         <div class="w3-row", style='text-align:center'>
-            <h2 id="notice"><b>1초 후 얼굴을 촬영합니다</b></h2>
+            <h2 id="notice"><b>촬영 시작 버튼을 누르면 인식된 얼굴을 촬영합니다</b></h2>
+            <input id="streamButton" type="button" onclick="toggle_streaming()" value="활영시작">
             <div id="container">
                 <video autoplay="true" id="videoInput" style="display: none; object-fit:cover;"></video>
                 <canvas id="canvasOutput"></canvas>
@@ -240,7 +241,6 @@ and is wrapped around the whole page content, except for the footer in this exam
             <div>
                 학번: <input type="text" id="student_id"><br>
                 이름: <input type="text" id="student_name"><br><br>
-                <input id="streamButton" type="button" onclick="toggle_streaming()" value="활영중지">
                 <input id="sender" type="button" onclick="submit()" value="등록" disabled>
             </div>
         </div>