Add files via upload

chojeonghyeonee · Dec 9, 2022 · 92b5e4c · 92b5e4c
1 parent 9ec9140
commit 92b5e4c
Show file tree

Hide file tree

Showing 11 changed files with 741 additions and 1 deletion.
diff --git a/Audio1.mp3 b/Audio1.mp3
diff --git a/Audio2.m4a b/Audio2.m4a
diff --git a/Audio3.m4a b/Audio3.m4a
diff --git a/README.md b/README.md
@@ -1 +1,72 @@
-# HUSK
+
+# 상명대학교 AI프로그래밍 경진대회
+
+### HUSK팀 (2021.05.01 ~ 2021.05.31)
+
+**2021년 1학기 SW-PBL 프로그램**
+
+-------------------
+
+**구성원**
+|                            이름                             |              역할              |                          책임                            |
+| :---------------------------------------------------------: | :----------------------------: | :-------------------------------------------------------: |
+|   [Sudy009(조정현)](https://github.com/Sudy009)     |       팀장 👑        |               about 페이지 구현 및 구글링&자료수집                        | 
+|   [kimseongeun1212(김성은)](https://github.com/kimseongeun201910782) |       부원 👑        |              전체적인 프로젝트 구현 및 관리담당              | 
+|   [02010800jaeheonLee(이재헌)](https://github.com/202010800jaeheonLee)     |       부원 👑        |                 전체적인 UI 구현보조 및 코드 분석         | 
+|   [chajunkyu(차준규)](https://github.com/202010823)         |       부원 👑        |                  코드 분석 및 구글링&자료수집           | 
+
+-------------------
+
+**프로젝트 설명**
+별도의 마스크 인식 기계 없이 마스크를 썼는지 안썼는지 또는 코,턱스크를 썼는지
+확인해주는 웹사이트를 제작했습니다.
+
+프로젝트 경험을 쌓기 위해 처음 프로젝트를 해보는 2학년 학우들과 프로젝트 경험이 있는 3학년 학우 한명으로,
+공부하면서 무언가를 만들어본다는 목적으로 참여하게되었습니다.
+
+
+
+-------------------
+
+**사용할 언어 및 프로그램**
+
+- **Visual Studio Code (VSC)** : HTML,CSS,Javascript 코드를 사용하기 편리
+
+- **Github** : 깃헙을 사용하여 팀프로젝트 진행
+
+- **Discord** : 음성, 화상 채팅과 자료저장이 모두 되는 프로그램
+
+- **Teachable Machine** : 티처블 머신이라는 머신러닝을 쉽게 만들어주는 사이트에서 모델을 다운받아 사용
+
+- **Javascript** : 머신러닝 모델 주 언어 - 자바스크립트
+
+- **HTML/CSS** : 웹 UI 구현
+
+----------------------
+**웹사이트 화면/기능 설명**
+
+* 웹사이트에 들어갔을 때 딱 보이는 화면입니다. 
+- '들어가기' 버튼을 누르기전 사이트의 간단한 소개가 나오도록 하였습니다.
+![image](https://user-images.githubusercontent.com/62641359/122771906-d51f3980-d2e1-11eb-8b8b-d24a0e86af76.png)
+
+* 메인 화면 
+- 카메라로 사람 얼굴인지를 인식한 후에 마스크 착용 여부를 체크한다. 
+- 마스크를 썼으면 "안전합니다" 라는 음성이 나오게 되고
+- 코스크나 턱스크를 하면 "마스크를 제대로 써주세요" 라는 음성이 나오게 되며
+- 마스크를 착용하지 않았을 경우 "마스크를 써주세요" 라는 음성이 나오게 된다. 
+![image](https://user-images.githubusercontent.com/62641359/122772795-b1102800-d2e2-11eb-8a5f-b4f6fdd150d4.png)
+![image](https://user-images.githubusercontent.com/62641359/122772836-be2d1700-d2e2-11eb-9fdf-87270cfc9f5b.png)
+![image](https://user-images.githubusercontent.com/62641359/122772874-c7b67f00-d2e2-11eb-9380-3145dfafe6df.png)
+![image](https://user-images.githubusercontent.com/62641359/122772914-d00eba00-d2e2-11eb-9f13-dd67ab22851d.png)
+
+* ABOUT 화면
+- 프로젝트에대한 소개가 나오는 페이지
+- sw-PBL 공모전에 냈던 영상이 추가되어 나타남
+- 각 팀원들의 소개 
+![image](https://user-images.githubusercontent.com/62641359/122772951-dc931280-d2e2-11eb-981b-462d5d411818.png)
+![image](https://user-images.githubusercontent.com/62641359/122773017-e9176b00-d2e2-11eb-8047-2baed61eba0a.png)
+
+
+
+
+
diff --git a/about.css b/about.css
@@ -0,0 +1,174 @@
+/* 네비게이션 */
+.main-logo{
+    position: absolute;
+    z-index:1;
+    float:left;
+    width:100px;
+    height: 100px;
+    margin-top:20px;
+    margin-left: 40px;
+  }
+a{text-decoration:none; color:#000000;}         
+         a:hover{color:#ff0000;}                    
+
+         /* nav tag */
+         nav ul{padding-top:10px;}                     /*  상단 여백 10px  */
+         nav ul li {
+            display:inline;                         /*  세로나열을 가로나열로 변경 */
+            border-left:1px solid #999;             /* 각 메뉴의 왼쪽에 "|" 표시(분류 표시) */
+
+            padding:0 10px;                         /* 각 메뉴 간격 */
+        }
+         nav ul li:first-child{border-left:none;}   
+
+nav{
+  position: absolute;
+  z-index:1;
+  height: 50px;
+  padding: 20px;;
+  margin:0;
+  margin-left:140px;
+}
+
+nav a:link, nav a:visited{
+  font-family: 'Montserrat', sans-serif;
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: #ffff;;
+  text-decoration: none;
+  text-align: center;
+}
+nav a:hover {
+  color:#bbbbbb;
+}
+  /* Window 1 */
+  #window1 {
+    background-image : url('about_backGround.jpg');
+      background-repeat : no-repeat;
+      color: #ffff;
+    background-size: cover;
+    display: table;
+    margin-left: auto;
+    margin-right: auto;
+    align-items: center;
+    justify-content: center;
+  }
+  #intro {
+    position: absolute;
+    top: 50%;
+    height: 240px;
+    margin-top: -200px;
+  }
+  #intro h1 {
+    font-family: 'Palanquin Dark', sans-serif;
+    font-weight: 600;
+    font-size: 72px;
+    text-align: center;
+  }
+  h3 {
+    font-family: "Apple SD Gothic Neo", sans-serif;
+    font-weight: 400;
+    font-size: 24px;
+    color: rgb(172, 169, 169);
+    text-align: center;
+  }
+  /* Window2 */
+  #window2 {
+    background: #292726;
+    background: -webkit-linear-gradient(to right, #3f4242, #eeeaee, #3f3e3d);
+    background: linear-gradient(to right, #505152, #8e7f96, #d6d3d0);
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+    display: flex;
+
+
+  }
+  #window2 video{
+      margin-left: 10%;
+  }
+  #myself{
+      margin-top: 700px;
+  }
+  #myself h1 {
+    font-family: "Apple SD Gothic Neo", sans-serif;
+    font-weight: 700;
+    font-size: 64px;
+    line-height: 1.5;
+    color: #fff;
+    margin-left: 20%;
+  }
+  #myself h2 {
+    font-family: "Apple SD Gothic Neo", sans-serif;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 1.5;
+    color: #fff;
+    margin-left:20%;
+  }
+  #portfoliosite {
+    text-decoration: none;
+    color: #7319F3;
+    font-weight: 600;
+  }
+  #portfoliosite:hover {
+    color: yellow;
+  }
+  /* Window 3 */
+  #window3 {
+    background: #292726;
+    background: -webkit-linear-gradient(to right, #3f4242, #eeeaee, #3f3e3d);
+    background: linear-gradient(to right, #505152, #8e7f96, #d6d3d0);
+    color:#000000;
+  }
+  #window3 h1 {
+    padding-top: 1px;
+    font-family: 'Palanquin Dark', sans-serif;
+    font-weight: 400;
+    font-size: 70px;
+    line-height: 1.5;
+    text-align: center;
+    color: #eeeaee;
+  }
+  .container {
+    display: -webkit-flex;
+    display: flex;
+    margin-top: 50px;
+    width:100%;
+    height:100%;
+  }
+
+  .hobby {
+    -webkit-flex: 1;
+    flex: 1;
+    text-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+  }
+
+ p{
+    font-family: 'Gothic A1', sans-serif;
+    font-weight: 600;
+    font-size:30px;
+  }
+
+  .sub_name{
+    margin-top: 30px;
+    font-family: 'Gothic A1', sans-serif;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 1.5;
+  }
+
+  .hobby_text {
+    margin-top: 30px;
+    font-family: 'Gothic A1', sans-serif;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 1.5;
+  }
+
+
diff --git a/about.html b/about.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>ABOUT HUSK</title>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <style media="screen">
+      * {margin: 0; padding: 0;}
+      header {width: 100%; text-align: center; height: 50px; position: fixed;}
+      b {display: inline-block; margin-left: 50px; margin-top: 20px; cursor: pointer;}
+      div {width: 100vw; height: 100vh;}
+    </style>
+    <link rel="stylesheet" href="about.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;800;900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Palanquin+Dark:wght@400;600&family=Shrikhand&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div class="main-logo">
+        <img src="images/HUSK_SMU.png" style="width:90px;
+        height: 70px;">
+    </div>
+    <nav>
+        <ul>
+            <li><a href="intro.html" >HUSK</a></li>
+            <li><a href="about.html">ABOUT</a></li>
+        </ul>   
+    </nav>
+
+
+    <section>
+      <div id="window1">
+        <div id="intro">
+          <h1>Hi, I'm HUSK!</h1>
+          <h3>상명대학교 2021-1 AI 경진대회 프로젝트</h3>
+        </div>
+      </div>
+
+      <div id="window2">
+        <video width="720" height="560" controls autoplay></video>
+            <source src="Waves.mp4" type="video/mp4" >
+            <!-- <object data="Waves.mp4" width="520" height="360" >
+          </object> -->
+        </video> 
+        <div id="myself">
+          <h1>휴스크 소개</h1>
+          <h2>저는 마스크 착용 여부를 알려주는 휴스크에요!<br>웹캠을 통해 촬영되는 영상에서 마스크 착용 여부를 인식해 <br>정상착용, 코스크, 턱스크, 미착용을 구별해줘요! </h2>
+        </div>
+      </div>
+
+      <div id="window3">
+        <h1>Developer</h1>
+        <div class="container">
+          <div class="hobby">
+            <p class="name">조정현</p>
+            <p class="sub_name">상명대학교 휴먼지능정보공학전공 20학번</p>
+                <p class="hobby_text">처음 참여하는 프로젝트여서<br>
+                모든 것이 익숙하지 않다는 어려움도 있었지만<br>
+                선배님의 도움과 기초 강의를 통해<br>
+                하나씩 차근차근 해결 할 수 있었습니다.<br>
+                html과 css를 배우고 머신러닝을 접할 수<br>
+                있는 좋은 시간이였고, 직접 아이디어를 내서<br>
+                프로젝트를 완성하여 더욱 보람찼습니다.<br>
+                웹사이트 개발에 관심이 생긴 기회였습니다.</p>
+          </div>
+          <div class="hobby">
+            <p class="name">김성은</p>
+            <p class="sub_name">상명대학교 휴먼지능정보공학전공 19학번</p>
+                <p class="hobby_text">프로젝트 처음 참여해보는 후배들과 <br>
+                같이 하게 되면서<br>
+                혼자 해야하는게 많아 힘든 점도 있었지만<br> 
+                그만큼 너무 잘 따라와주고 조금만 설명해도<br> 
+                이해를 잘 해서 진행하는데에 어려움은 없었어요.<br> 
+                2학년때부터 프로젝트를 해봐야겠다는 생각부터가<br> 
+                오히려 존경스러운 부분이었고<br> 
+                또 다른 프로젝트 경험을 쌓게되어<br>
+                뿌듯하고 보람찼습니다. </p>
+          </div>
+          <div class="hobby">
+            <p class="name">이재헌</p>
+            <p class="sub_name">상명대학교 휴먼지능정보공학전공 20학번</p>
+                <p class="hobby_text">프로젝트를 하면서<br>
+                다양한 프로그램들을 응용하는 법을 학습하고<br>
+                내가 원하는 것을 만들 수 있게 된 것 같습니다.<br>
+                또한 강의에서 배우는 것 외에<br>
+                다양한 분야들을 학습하면서<br>
+                코딩의 역량이 더 늘어났습니다.<br></p>
+          </div>
+          <div class="hobby">
+
+            <p class="name">차준규</p>
+            <p class="sub_name"> 상명대학교 휴먼지능정보공학전공 20학번</p>
+                <p class="hobby_text">프로젝트에 참여하는 것은 처음이라<br>
+                이론부터 공부해야돼서 어려움을 겪었지만<br>
+                기초부터 잘 알려주셔서 보다 편하게 <br>
+                프로젝트를 진행 할 수 있었던 것 같습니다.<br> 
+                처음해보는 프로젝트라 기억에 남을 것 같습니다.</p>
+          </div>
+        </div>
+      </div>
+
+
+      </div>
+    </section>
+    <script type="text/javascript" src="app.js"></script>
+  </body>
+</html>
diff --git a/about_background.jpg b/about_background.jpg