diff --git a/README.md b/README.md deleted file mode 100644 index 9633947..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# Mission Book diff --git a/fonts/AppleSDGothicNeoR.woff b/fonts/AppleSDGothicNeoR.woff new file mode 100644 index 0000000..af0ce5f Binary files /dev/null and b/fonts/AppleSDGothicNeoR.woff differ diff --git a/guide_modal.html b/guide_modal.html new file mode 100644 index 0000000..4ff6741 --- /dev/null +++ b/guide_modal.html @@ -0,0 +1,255 @@ + + + + + + + guide_modal.html + + + + + + + + +
+
+
+
+
+ +
+
+ 왼쪽아이콘 +

엔딩

+ 오른쪽아이콘 +
+

12월 31일이 되었습니다.
+ 지금 바로 엔딩을 확인해보세요!


+

주의사항: 지금부터 미션을 성공해도
+ 더 이상의 스탯, 레벨 변화는 없습니다.

+ + +
+
+ + + + \ No newline at end of file diff --git a/image/blue_star.png b/image/blue_star.png new file mode 100644 index 0000000..740fd06 Binary files /dev/null and b/image/blue_star.png differ diff --git a/image/experience.png b/image/experience.png new file mode 100644 index 0000000..d5b106a Binary files /dev/null and b/image/experience.png differ diff --git a/image/getting.png b/image/getting.png new file mode 100644 index 0000000..11b3e1d Binary files /dev/null and b/image/getting.png differ diff --git a/image/info.png b/image/info.png new file mode 100644 index 0000000..cac0979 Binary files /dev/null and b/image/info.png differ diff --git a/image/info_click.png b/image/info_click.png new file mode 100644 index 0000000..5ed9815 Binary files /dev/null and b/image/info_click.png differ diff --git a/image/insta.png b/image/insta.png new file mode 100644 index 0000000..f6044b9 Binary files /dev/null and b/image/insta.png differ diff --git a/image/kakao.png b/image/kakao.png new file mode 100644 index 0000000..9724d7f Binary files /dev/null and b/image/kakao.png differ diff --git a/image/lion1.jpg b/image/lion1.jpg new file mode 100644 index 0000000..7433954 Binary files /dev/null and b/image/lion1.jpg differ diff --git a/image/minus_icon.png b/image/minus_icon.png new file mode 100644 index 0000000..d677d59 Binary files /dev/null and b/image/minus_icon.png differ diff --git a/image/misson.png b/image/misson.png new file mode 100644 index 0000000..35ef9ab Binary files /dev/null and b/image/misson.png differ diff --git a/image/misson_click.png b/image/misson_click.png new file mode 100644 index 0000000..819d3cb Binary files /dev/null and b/image/misson_click.png differ diff --git a/image/pink_star.png b/image/pink_star.png new file mode 100644 index 0000000..3e5248a Binary files /dev/null and b/image/pink_star.png differ diff --git a/image/profile.png b/image/profile.png new file mode 100644 index 0000000..d29fc4c Binary files /dev/null and b/image/profile.png differ diff --git a/image/purple_star.png b/image/purple_star.png new file mode 100644 index 0000000..b28f37b Binary files /dev/null and b/image/purple_star.png differ diff --git a/image/setup.png b/image/setup.png new file mode 100644 index 0000000..d5093ce Binary files /dev/null and b/image/setup.png differ diff --git a/image/setup_click.png b/image/setup_click.png new file mode 100644 index 0000000..f1fbef7 Binary files /dev/null and b/image/setup_click.png differ diff --git a/image/study.png b/image/study.png new file mode 100644 index 0000000..f0fbe86 Binary files /dev/null and b/image/study.png differ diff --git a/image/sum_icon.png b/image/sum_icon.png new file mode 100644 index 0000000..766a9fe Binary files /dev/null and b/image/sum_icon.png differ diff --git a/image/team_logo.png b/image/team_logo.png new file mode 100644 index 0000000..73f4bf1 Binary files /dev/null and b/image/team_logo.png differ diff --git a/image/yellow_star.png b/image/yellow_star.png new file mode 100644 index 0000000..7f30637 Binary files /dev/null and b/image/yellow_star.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..33a59e8 --- /dev/null +++ b/index.html @@ -0,0 +1,232 @@ + + + + + + + + + + studypage + + + + + +
+
+ 미션아이콘 + 정보아이콘 + 설정아이콘 +
+ + +
+
+
프로필이미지
+ +
+
+
+ + + + + + + +
+ + + + + + + + + + + +
+ + +
+

학업에 관련된 미션을 해결하세요

+
+ + +
+
+
+ 별 +
+
+

3과목 A+ 받기

+
+
+
+ +
+
+
+ 별 +
+
+

책 1권 읽고
독후감 쓰기

+
+
+
+ +
+
+
+ 별 +
+
+

책 40권 읽기

+
+
+
+ + +
+
+
+ 별 +
+
+

토익 200점 넘기

+
+
+
+ +
+
+
+ 별 +
+
+

과제 끝내기

+
+
+
+ +
+
+
+ 별 +
+
+

조기졸업하기

+
+
+
+ +
+
+ + + + \ No newline at end of file diff --git a/join.html b/join.html deleted file mode 100644 index 94a28e2..0000000 --- a/join.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - join - - - -
-

회원가입

-

정보를 입력하세요.

-
-
-
-
-

회원가입을 환영합니다!

- -
- - \ No newline at end of file diff --git a/login.html b/login.html deleted file mode 100644 index fa1747e..0000000 --- a/login.html +++ /dev/null @@ -1,91 +0,0 @@ - - - - - - - login - - - -
-

MISSION BOOK

-

새내기를 위한🌱

-
-
-
- -
- 회원가입 - - \ No newline at end of file diff --git a/misson_modal.html b/misson_modal.html new file mode 100644 index 0000000..90b03be --- /dev/null +++ b/misson_modal.html @@ -0,0 +1,231 @@ + + + + + + + misson_modal + + + + + +
+
+
+
+ +
+
+ 별 + 별 + 별 +

3과목 A+ 받기

+

대학교 과목 중 3개의 과목을 A+ 받습니다.
+ 그래도 됩니다.

+
+
+ 마이너스 버튼 + + 플러스 버튼
+
+
+ + +
+
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..1f91550 --- /dev/null +++ b/style.css @@ -0,0 +1,472 @@ +@font-face{ +font-family : "Apple SD Gothic Neo"; +src:url(./fonts/AppleSDGothicNeoR.woff) format("woff"); +} + +*{ + box-sizing: border-box; + background: #FFFFFF; + font-family: 'Apple SD Gothic Neo'; + font-style: normal; +} + +body{ + margin: 0; + padding: 0; + width: 375px; + height: 812px; + background: #FFFFFF; +} + +.hd{ + margin :0 auto; + padding-top: 50px; + position:relative; + /* display:flex; */ +} + +.hd-container{ + padding-left: 10px; +} + +.hd-container::after{ + content:" "; + display:block; + clear:both; +} + +.profileimg{ + /* position: absolute; */ + float: left; + width: 58px; + height: 58px; + left: 25px; + top: 101px; + object-fit:cover; + margin-right: 10px; + padding-right:10px +} + +.user-info{ + float:left; + margin:10px 40px 0px 0px; +} + +.level{ + /* position: absolute; */ + width: 27px; + height: 14px; + left: 161px; + top: 118px; + font-family: 'Apple SD Gothic Neo'; + font-style: normal; + font-weight: 800; + font-size: 12px; + line-height: 14px; + + color: #666666; +} + +.personal-explanation{ + /* position: absolute; */ + width: 67px; + height: 18px; + left: 99px; + top: 137px; + font-family: 'Apple SD Gothic Neo'; + font-style: normal; + font-weight: 700; + font-size: 15px; + line-height: 18px; + /* identical to box height */ + letter-spacing: 0.02em; + color: #666666; +} + + /* 상단바 css */ +header{ + margin-top: 77px; + display: flex; + justify-content: end; + padding-right: 5px; +} + +header img{ + margin-right: 15px; +} + +.name{ + /* position: absolute; */ + width: 55px; + height: 25px; + left: 99px; + top: 110px; + + font-family: 'Apple SD Gothic Neo'; + font-style: normal; + font-weight: 700; + font-size: 21px; + line-height: 25px; + + color: #000000; +} + +.mission-tab { + margin-top: 60px; + display:flex; + justify-content: center; +} + +.mis-btn{ + padding-right: 80px; +} + +.mis-btn:last-child{ + padding-right:0px; +} + +.main-sec{ + position:relative; + width: 375px; + height: 500px; + left: 0px; + background: #F9F9F9; + border-top: 0.5px solid #C0C0C0; + overflow: scroll; +} + +.msg{ + /* position: absolute; */ + padding-left: 5%; + width: 250px; + height: 17.49px; + left: 25px; + top: 250px; + background-color: transparent; + + font-family: 'Apple SD Gothic Neo'; + font-style: normal; + font-weight: 700; + font-size: 15px; + line-height: 18px; + + color: #8C8C8C; +} + +.msg-stress{ + color: #666666; + background-color: transparent; +} + +h2,img{ + background-color: transparent; +} + +.mission-contents{ + background-color: transparent; + width: 100%; + height: 100%; + padding-top:15px; + padding-left:30px; + overflow: hidden; + /* left: 47px; */ + /* top: 45%; */ + font-family: 'Apple SD Gothic Neo'; + font-style: normal; + font-weight: 800; + font-size: 18px; + line-height: 22px; +/* identical to box height */ + + +color: #666666; +} + +.mission1{ + display:inline-block; + width: 160px; + height: 165.22px; + margin-left : 15px; + margin-right: 15px; + left: 18px; + background: #F6FAFF; + box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.1); + border-radius: 10px; +} + + +.mission2{ + display: inline-block; + width: 160px; + height: 165.22px; + /* margin-right: 15px; */ + left: 18px; + background: #F6FAFF; + box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.1); + border-radius: 10px; +} +.mission3{ + display:inline-block; + width: 160px; + height: 165.22px; + margin-left : 15px; + margin-right: 15px; + left: 18px; + background: #F6FAFF; + box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.1); + border-radius: 10px; +} + +.mission4{ + display: inline-block; + width: 160px; + height: 165.22px; + margin-right: 15px; + left: 18px; + background: #F6FAFF; + box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.1); + border-radius: 10px; +} + +.mission5{ + display:inline-block; + width: 160px; + height: 165.22px; + margin-left : 15px; + margin-right: 15px; + left: 18px; + background: #F6FAFF; + box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.1); + border-radius: 10px; +} +.mission6{ + display: inline-block; + width: 160px; + height: 165.22px; + margin-right: 15px; + left: 18px; + background: #F6FAFF; + box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.1); + border-radius: 10px; +} + +.btn-content{ + position:relative; + background-color: transparent; +} + +.star{ + float:left; + background-color: transparent; + margin:10px 10px 10px 10px; + /* margin-left:10px; + margin-bottom:30px; */ + width: 20px; + height: 20px; +} + +.mis-name{ + background-color: transparent; + width: 103px; + height: 21.38px; + left: 47px; + top: 345.48px; + + font-family: 'Apple SD Gothic Neo'; + font-style: normal; + font-weight: 800; + font-size: 18px; + line-height: 22px; + color: #666666; +} + +.missions{ + width:100%; + height:100%; + background-color: transparent; + align-items: center; + position:relative; + display:flex; + flex-wrap: wrap; + justify-content: space-between; + padding-right: 10px; +} + +.modal{ + position: fixed; + top: 0; left: 0; + width: 100%; height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.md_overlay{ + background: rgba(0, 0, 0, 0.25); + width: 100%; height: 100%; + position: absolute; + display: flex; + justify-content: center; + align-items: center; +} +.md_content{ + width: 100%; height: 420px; + padding-left: 23px; + position: fixed; + bottom: 0; left: 0; + background-color: white; + border-radius: 5px; + animation: slidein 2s ease; +} +.hidden{ + display: none; +} +.md_content>div{ + background: #999999; + width: 80px; + height: 5px; + margin-left: 120px; + margin-top: 20px; + margin-bottom: 0; +} +.md_content>img{ + margin-top: 20px; + margin-bottom: 20px; +} +.md_content>h3{ + color: #666666; + font-weight: 800; + font-size: 25px; + line-height: 30px; + margin-top: 0; + margin-bottom: 14px; +} +.md_content>p{ + font-weight: 700; + font-size: 18px; + line-height: 22px; + color: #7A7A7A; + margin-bottom: 22px; +} +.md_content input[type=submit]{ + margin-bottom: 28px; + box-sizing: border-box; + width: 135px; height: 45px; + padding: 10px; + text-align: center; + background: #FAFAFA; + border: 0.8px solid #C0C0C0; + border-radius: 5px; + font-weight: 800; + font-size: 18px; + line-height: 22px; + color: #666666; +} +.md_content input[type=button]{ + margin-bottom: 28px; + box-sizing: border-box; + width: 135px; height: 45px; + padding: 10px; + text-align: center; + background: #FAFAFA; + border: 0.8px solid #C0C0C0; + border-radius: 5px; + font-size: 18px; + line-height: 22px; + font-weight: 800; + color: #C74E4E; + margin-right: 46px; +} +.md_content input[type=text]{ + box-sizing: border-box; + width: 45px; + font-weight: 800; + font-size: 65px; + line-height: 78px; + color: #666666; + border: none; + border-radius: 0px; +} +form div{ + display: flex; + justify-content: center; + align-items: center; + margin-right: 50px; + margin-bottom: 44px; +} +.minus{ + margin-right: 25px; +} + +.plus{ + margin-left: 25px; +} + +@keyframes slidein{ + from{ + height: 0px; + } + to{ + height: 420px; + } +} +@keyframes slideout{ + from{ + height: 420px; + } + to{ + height: 0px; + } +} + +.sub-wrap-study { + display: inline-block; + margin-top: 2%; + width: 125px; + height: 100px; + background: #ffffff; + box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.1); + border-radius: 10px; + cursor: pointer; + + } + + #star-study { + color: #c6dfff; + font-size: 15px; + margin-left: 10px; + line-height: 40px; + } + + input { + display: none; + } + + label { + /* margin-left: 1rem; */ + display: inline-block; + padding: 10px 15px; + } + + label:hover { + background: #efefef; + border: 0.5px solid #c0c0c0; + border-radius: 2px; + cursor: pointer; + } + + /*input 클릭시, label 스타일*/ + input:checked + label { + background: #efefef; + border: 0.5px solid #c0c0c0; + border-radius: 2px; + } + + /* 텍스트 숨기기 */ + #tab1:checked ~ #content1, + #tab2:checked ~ #content2, + #tab3:checked ~ #content3 { + display: block; + } + + + \ No newline at end of file