style apply css

- 가운데 컨텐츠들 css 수정. - header, footer 추가.

style apply css
- 가운데 컨텐츠들 css 수정. - header, footer 추가.
김태영
Commit 0ef066f66ccd72ccfe9928267c0574ff84ccfb52 0ef066f6 1 parent 69d4b4a8
Showing 3 changed files with 115 additions and 36 deletions
public/stylesheets/style.css
routes/index.js
views/index.ejs
--- a/public/stylesheets/style.css
View file @0ef066f
+++ b/public/stylesheets/style.css
View file @0ef066f
 body {
-  padding: 50px;
+  padding-top: 5px;
+  padding-bottom: 20px;
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
 }
 a {
   color: #00B7FF;
 }
+
+/* 헤더 */
+header{
+  height:70px;
+  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
+  -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
+  box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
+}
+
+.header_name{
+  margin: 15px;
+  margin-left : 30px;
+  float: left;
+  font-size: 30px ;
+  color: white;
+}
+
+/* footer */
+footer{
+  padding: 40px 0;
+  color: #999;
+  text-align: center;
+  background-color: #f9f9f9;
+  border-top: 1px solid #e5e5e5;
+}
+
+/* 메인 div를 나누기 위한 것. */
+.box1{
+  float: left;
+  width: 550px;
+  padding:10px;
+  margin:10px;
+}
+
+.box2{
+  display: inline-block;
+  width: 35%;
+  padding:10px;
+  margin:10px;
+  margin-left: 30px;
+
+}
+
+/* box2안의 이미지와 입력폼에 관한 css */
+.alert_image{
+  width:100%;
+}
+
+.col-lg-6{
+  margin-top: 10px;
+  width:100%
+}
\ No newline at end of file
--- a/routes/index.js
View file @0ef066f
+++ b/routes/index.js
View file @0ef066f
@@ -14,7 +14,7 @@ router.get('/data', function(req, res, next){
   data = {
     image : "/images/"+id+".jpg",
-    audio : "/audio/"+id+".mp3"
+    audio : "/audio"+id+".mp3"
   }
   //데이터 확인
   console.log(data);
--- a/views/index.ejs
View file @0ef066f
+++ b/views/index.ejs
View file @0ef066f
@@ -2,43 +2,69 @@
 <html>
   <head>
     <title><%= title %></title>
+
+    <!-- Bootstrap -->
+    <!-- 합쳐지고 최소화된 최신 CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
     <link rel='stylesheet' href='/stylesheets/style.css' />
+
   </head>
   <body>
-    <h1><%= title %></h1>
+    <!-- header -->
-    <p>Welcome to <%= title %></p>
+    <header>
-    <!--https://teachablemachine.withgoogle.com/ 를 통해 학습시키고 얻은 스켈레톤 코드 -->
+        <p class="header_name">MWD</p>
-
+    </header>
-    <div>Teachable Machine Image Model</div>
+
-    <button type="button" onclick="init()">Start</button>
+    <!-- main contents -->
-    <div id="webcam-container"></div>
+    <div class="container" style="margin-top: 30px">
-    <div id="label-container"></div>
+        <div class="box1">
-    <div id="check_image">
+            <div id="webcam-container"></div>
-        <img src="/images/1.jpg">
+            <div id="label-container" ></div>
+        </div>
+        <div class="box2">
+            <div id="check_image">
+                <img class="alert_image" src="/images/1.jpg">
+            </div>
+
+            <!-- 인풋 폼 나중에 합치기 -->
+            <div class="col-lg-6">
+                <form>
+                    <legend>방문자 인적 사항</legend>
+                    <p>이름: <input class="form-control" type='text' name='name' placeholder="고길동">
+                    </p>
+                    <p>전화번호: <input class="form-control" type='text' name='number' placeholder="010-1234-1234." ></input></p>                
+                    <p>신분:
+                    <select name = "id" class="form-control">
+                        <option value = "재학생">재학생</option>
+                        <option value = "휴학생">휴학생</option>
+                        <option value = "직원">직원</option>
+                        <option value = "외부인">외부인</option>
+                    </select>
+                    </p>
+                    <p>
+                        <input  type = "reset"  style="float:right; margin-left:5px; background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); border: 0;" class="btn btn-warning"value = "다시입력"/>
+                        <input  type = "submit" style="float:right; background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); border: 0; " class="btn btn-success" value = "제출"/>
+                    </p>
+                </form>
+            </div>
+            <!-- 인풋 폼 종료 -->
+        </div>
     </div>
-    <div id = "check_audio">
+    <span id = "check_audio">
         <!--초기값으로 '시작'이라는 음성을 사용 -->
         <!--auto play 기능을 위해 iframe 사용 -->
         <iframe src="/audios/4.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
-    </div>
+    </span>
-    <form>
+    <!-- footer -->
-        <fieldset style = "width:600px">
+    <footer>
-            <legend>방문자 인적 사항</legend>
+        <p>Mask-Wearing Discriminate Program Using Teachable Machine 2.0</p>
-            이름:
+        <p>Using teachable machine 2.0 provided by Google, a model was created that learned the type of mask wearing.</p>
-            <input type='text' name='name' style="width:70px" required/>&nbsp;
+        <p>2017103978김태영  20174015이재호</p>
-            전화번호:
+        <p>contact us <a href="http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject">khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject</a></p>
-            <input type='text' name='number' style="width:250px" placeholder="XXX-XXXX-XXXX 형식으로 입력하세요." required/>&nbsp;
+    </footer>
-            <div style="display:inline">신분:</div>
+
-            <select name = "id" style="width: 50;">
+
-                <option value = "재학생">재학생</option>
+    <!--https://teachablemachine.withgoogle.com/ 를 통해 학습시키고 얻은 스켈레톤 코드 -->
-                <option value = "휴학생">휴학생</option>
-                <option value = "직원">직원</option>
-                <option value = "외부인">외부인</option>
-            </select><br><br>
-            <input type = "submit" value = "제출"/>&nbsp;
-            <input type = "reset" value = "다시입력"/>
-        </fieldset> 
-    </form>
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
@@ -55,7 +81,7 @@
     var last_result_predict=-999;
     // Load the image model and setup the webcam
-    async function init() {
+    window.onload = async function init() {
         const modelURL = URL + "model.json";
         const metadataURL = URL + "metadata.json";
@@ -68,7 +94,7 @@
         // Convenience function to setup a webcam
         const flip = true; // whether to flip the webcam
-        webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip
+        webcam = new tmImage.Webcam(550, 550, flip); // width, height, flip
         await webcam.setup(); // request access to the webcam
         await webcam.play();
         window.requestAnimationFrame(loop);
@@ -126,7 +152,7 @@
           //ajax로 서버에 그 id에 해당하는 이미지의 주소와 음성파일을 달라고 요청한다.
           if(predict_id > 0){
-            //last_result_predict값을 지금 결과로 나옴 predict로 초기화해준다. 
+            //last_result_predict값을 지금 결과로 나온 predict로 초기화해준다. 
             last_result_predict = predict_id;
             $(function() {
                 $.ajax({
@@ -152,7 +178,7 @@
         var audio = json_data.audio;
         var audioName = "";
         //이미지 태그 생성
-        strDOM += '<img src="'+images+'">';
+        strDOM += '<img class="alert_image" src="'+images+'">';
         //오디오 태그 생성
         audioName += '<iframe src="' + audio + '" allow="autoplay" id="audio" style="display:none"></iframe>';
         //#cehck_image div의 이미지 교체