2020-2-capstone-design2 / 2014104149

Go to a project
Toggle navigation Toggle navigation pinning
Graduate
bbbd9ab5 1 parent 6e7fc1c6

Update HTML

Inline Side-by-side
Showing 2 changed files with 26 additions and 12 deletions
...@@ -2,10 +2,14 @@ ...@@ -2,10 +2,14 @@
2 <html> 2 <html>
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 +<meta name="viewport" content="width=device-width, initial-scale=1">
5 <title>Web Attendance System</title> 6 <title>Web Attendance System</title>
7 +<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
8 +<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&amp;subset=korean">
9 +<style>body,h1,h2,h3,h4,h5,p {font-family: "Nanum+Gothic", sans-serif}</style>
6 <style> 10 <style>
7 #container { 11 #container {
8 - margin: 0px auto; 12 + margin: 15px auto;
9 border: 10px #333 solid; 13 border: 10px #333 solid;
10 } 14 }
11 #videoInput { 15 #videoInput {
...@@ -184,9 +188,19 @@ function main() ...@@ -184,9 +188,19 @@ function main()
184 </script> 188 </script>
185 </head> 189 </head>
186 <body onload="cv['onRuntimeInitialized']=()=>{ init(); };"> 190 <body onload="cv['onRuntimeInitialized']=()=>{ init(); };">
187 - <div id="container"> 191 + <div class="w3-content" style="max-width:1400px">
188 - <video autoplay="true" id="videoInput" style="display: none; object-fit: cover;"></video> 192 + <!-- Header -->
189 - <canvas id="canvasOutput"></canvas> 193 + <header class="w3-container w3-center w3-padding-32">
194 + <h1><b>얼굴 인식 출석 시스템</b></h1>
195 + <p>Made by <span class="w3-tag">정해갑</span></p>
196 + </header>
197 +
198 + <div class="w3-row", style='text-align:center'>
199 + <div id="container">
200 + <video autoplay="true" id="videoInput" style="display: none; object-fit: cover;"></video>
201 + <canvas id="canvasOutput"></canvas>
202 + </div>
203 + </div>
190 </div> 204 </div>
191 </body> 205 </body>
192 </html> 206 </html>
......
...@@ -6,10 +6,10 @@ ...@@ -6,10 +6,10 @@
6 <title>Web Attendance System Register</title> 6 <title>Web Attendance System Register</title>
7 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 7 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
8 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&amp;subset=korean"> 8 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&amp;subset=korean">
9 -<style>body,h1,h2,h3,h4,h5 {font-family: "Nanum+Gothic", sans-serif}</style> 9 +<style>body,h1,h2,h3,h4,h5,p {font-family: "Nanum+Gothic", sans-serif}</style>
10 <style> 10 <style>
11 #container { 11 #container {
12 - margin: 0px auto; 12 + margin: 15px auto;
13 } 13 }
14 #videoInput { 14 #videoInput {
15 background-color: #666; 15 background-color: #666;
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
23 <script type='text/javascript' src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 23 <script type='text/javascript' src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
24 <script type='text/javascript'> 24 <script type='text/javascript'>
25 var b64encoded = ''; 25 var b64encoded = '';
26 -var streaming = true; 26 +var streaming = false;
27 function init() 27 function init()
28 { 28 {
29 let video = document.getElementById('videoInput'); 29 let video = document.getElementById('videoInput');
...@@ -173,11 +173,11 @@ function toggle_streaming() ...@@ -173,11 +173,11 @@ function toggle_streaming()
173 streaming = !streaming; 173 streaming = !streaming;
174 if (streaming){ 174 if (streaming){
175 streamButton.value = "촬영중지"; 175 streamButton.value = "촬영중지";
176 - change_notice("1초 후 얼굴을 촬영합니다"); 176 + change_notice("얼굴이 인식되면 얼굴을 촬영합니다");
177 } 177 }
178 else{ 178 else{
179 streamButton.value = "촬영시작"; 179 streamButton.value = "촬영시작";
180 - change_notice("촬영이 중지되었습니다"); 180 + change_notice("촬영 시작 버튼을 누르면 인식된 얼굴을 촬영합니다");
181 } 181 }
182 main(); 182 main();
183 } 183 }
...@@ -230,9 +230,10 @@ and is wrapped around the whole page content, except for the footer in this exam ...@@ -230,9 +230,10 @@ and is wrapped around the whole page content, except for the footer in this exam
230 <h1><b>얼굴 등록</b></h1> 230 <h1><b>얼굴 등록</b></h1>
231 <p>Made by <span class="w3-tag">정해갑</span></p> 231 <p>Made by <span class="w3-tag">정해갑</span></p>
232 </header> 232 </header>
233 - 233 +
234 <div class="w3-row", style='text-align:center'> 234 <div class="w3-row", style='text-align:center'>
235 - <h2 id="notice"><b>1초 후 얼굴을 촬영합니다</b></h2> 235 + <h2 id="notice"><b>촬영 시작 버튼을 누르면 인식된 얼굴을 촬영합니다</b></h2>
236 + <input id="streamButton" type="button" onclick="toggle_streaming()" value="활영시작">
236 <div id="container"> 237 <div id="container">
237 <video autoplay="true" id="videoInput" style="display: none; object-fit:cover;"></video> 238 <video autoplay="true" id="videoInput" style="display: none; object-fit:cover;"></video>
238 <canvas id="canvasOutput"></canvas> 239 <canvas id="canvasOutput"></canvas>
...@@ -240,7 +241,6 @@ and is wrapped around the whole page content, except for the footer in this exam ...@@ -240,7 +241,6 @@ and is wrapped around the whole page content, except for the footer in this exam
240 <div> 241 <div>
241 학번: <input type="text" id="student_id"><br> 242 학번: <input type="text" id="student_id"><br>
242 이름: <input type="text" id="student_name"><br><br> 243 이름: <input type="text" id="student_name"><br><br>
243 - <input id="streamButton" type="button" onclick="toggle_streaming()" value="활영중지">
244 <input id="sender" type="button" onclick="submit()" value="등록" disabled> 244 <input id="sender" type="button" onclick="submit()" value="등록" disabled>
245 </div> 245 </div>
246 </div> 246 </div>
......