Update HTML

@@ -15,6 +15,27 @@
 #canvasOutput {
 #canvasOutput {
     background-color: #666;
     background-color: #666;
 }
 }
+#messagebox {
+    height: 300px;
+    overflow-y: auto;
+}
+.message {
+  padding: 20px;
+  font-weight: bold;
+  color: white;
+}
+.attend {
+  background-color: #4CAF50;
+}
+.already {
+  background-color: #2196F3;
+}
+.late {
+  background-color: #ff9800;
+}
+.fail {
+  background-color: #f44336;
+}
 </style>
 </style>
 <script type='text/javascript' src="{{url_for('static', filename='js/opencv.js')}}"></script>
 <script type='text/javascript' src="{{url_for('static', filename='js/opencv.js')}}"></script>
 <script type='text/javascript' src="{{url_for('static', filename='js/utils.js')}}"></script>
 <script type='text/javascript' src="{{url_for('static', filename='js/utils.js')}}"></script>
@@ -150,22 +171,22 @@ function main()
                         data: {'image':b64encoded},
                         data: {'image':b64encoded},
                         success: function(data){
                         success: function(data){
                            if (data.status == "attend"){
                            if (data.status == "attend"){
-                               var newDiv = document.createElement("div");
-                               var newContent = document.createTextNode('[' + data.student_id + '/' + data.student_name + ']' + "출석");
-                               newDiv.appendChild(newContent);
-                               document.body.appendChild(newDiv); 
+                               var newHead = "<div class='message attend'>";
+                               var newTail = "</div>";
+                               var newContent = '[' + data.student_id + '/' + data.student_name + ']' + "출석되었습니다.";
+                               $('#messagebox').prepend(newDiv + newContent + newTail).stop().animate({ scrollTop: $('#messages')[0].scrollHeight }, 300);
                            }
                            }
                            else if (data.status == "already"){
                            else if (data.status == "already"){
-                               var newDiv = document.createElement("div");
-                               var newContent = document.createTextNode('[' + data.student_id + '/' + data.student_name + ']' + "이미 출석처리 되었습니다.");
-                               newDiv.appendChild(newContent);
-                                       document.body.appendChild(newDiv); 
+                               var newHead = "<div class='message already'>";
+                               var newTail = "</div>";
+                               var newContent = '[' + data.student_id + '/' + data.student_name + ']' + "이미 출석되었습니다.";
+                               $('#messagebox').prepend(newDiv + newContent + newTail).stop().animate({ scrollTop: $('#messages')[0].scrollHeight }, 300);
                            }
                            }
-                           else{
-                               var newDiv = document.createElement("div");
-                               var newContent = document.createTextNode("실패");
-                               newDiv.appendChild(newContent);
-                                   document.body.appendChild(newDiv);
+                           else if (data.status == "fail"){
+                               var newHead = "<div class='message fail'>";
+                               var newTail = "</div>";
+                               var newContent = "인식 실패";
+                               $('#messagebox').prepend(newDiv + newContent + newTail).stop().animate({ scrollTop: $('#messages')[0].scrollHeight }, 300);
                            }
                            }
                         }
                         }
                     });
                     });
@@ -196,5 +217,8 @@ function main()
         <video autoplay="true" id="videoInput" style="display: none; object-fit: cover;"></video>
         <video autoplay="true" id="videoInput" style="display: none; object-fit: cover;"></video>
         <canvas id="canvasOutput"></canvas>
         <canvas id="canvasOutput"></canvas>
     </div>
     </div>
+    <div id="messagebox">
+
+    </div>
 </body>
 </body>
 </html>
 </html>