Season-Hackathon · yunhee1 · Feb 21, 2023 · Feb 22, 2023 · Feb 22, 2023 · Feb 23, 2023
diff --git a/README.md b/README.md
diff --git a/fonts/AppleSDGothicNeoR.woff b/fonts/AppleSDGothicNeoR.woff
diff --git a/guide_modal.html b/guide_modal.html
@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>guide_modal.html</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
+    <style>
+        /* 안내 메세지 모달창 css */
+        .modal{
+            position: fixed;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+        }
+        .md_overlay{
+            background: rgba(0, 0, 0, 0.25);
+            width: 100%; height: 100%;
+            position: absolute;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .md_position{
+            position: fixed;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .md_content{
+            width: 300px; height: 230px;
+            position: absolute;
+            z-index: 10;
+            background-color: white;
+            border-radius: 5px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+        }
+        .hidden{
+            display: none;
+        }
+        .title_position{
+            display: flex;
+            margin-top: 42px;
+            margin-bottom: 14px;
+        }
+        .md_content>img{
+            display: inline;
+        }
+        .md_content h3{
+            color: #666666;
+            font-weight: 800;
+            font-size: 25px;
+            line-height: 30px;
+            margin: 0;
+        }
+        .md_content p{
+            font-weight: 700;
+            font-size: 18px;
+            line-height: 22px;
+            color: #7A7A7A;
+            margin: 0;
+        }
+        .md_content>input{
+            margin-top: 35px;
+            margin-bottom: 28px;
+            box-sizing: border-box;
+            width: 150px; height: 45px;
+            padding: 10px;
+            background: #FAFAFA;
+            border: 0.8px solid #C0C0C0;
+            border-radius: 5px;
+            font-family: 'Apple SD Gothic Neo';
+            font-style: normal;
+            font-weight: 800;
+            font-size: 18px;
+            line-height: 22px;
+            color: #666666;
+        }
+        .left_icon{
+            margin-right: 8px;
+        }
+        .right_icon{
+            margin-left: 8px;
+        }
+
+        /* 졸업 안내 모달창 css */
+        .modal2{
+            position: fixed;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+        }
+        .md_overlay2{
+            background: rgba(0, 0, 0, 0.25);
+            width: 100%; height: 100%;
+            position: absolute;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .md_position2{
+            position: fixed;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .md_content2{
+            width: 300px; height: 280px;
+            position: absolute;
+            z-index: 10;
+            background-color: white;
+            border-radius: 5px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+        }
+        .hidden{
+            display: none;
+        }
+        .title_position{
+            display: flex;
+            margin-top: 0;
+            margin-bottom: 14px;
+            padding-top: 40px;
+        }
+        .md_content2>img{
+            display: inline;
+        }
+        .md_content2 h3{
+            color: #666666;
+            font-weight: 800;
+            font-size: 25px;
+            line-height: 30px;
+            margin: 0;
+        }
+        .first_p{
+            font-weight: 700;
+            font-size: 18px;
+            line-height: 22px;
+            color: #7A7A7A;
+            margin: 0;
+        }
+        .second_p{
+            font-weight: 700;
+            font-size: 13px;
+            line-height: 16px;
+            margin: 0;
+            color: #7A7A7A;
+            font-family: 'Apple SD Gothic Neo';
+            font-style: normal;
+        }
+        .second_p span{
+            color: #C74E4E;
+        }
+        .md_content2>input{
+            margin-top: 27px;
+            margin-bottom: 28px;
+            box-sizing: border-box;
+            width: 150px; height: 45px;
+            padding: 10px;
+            background: #FAFAFA;
+            border: 0.8px solid #C0C0C0;
+            border-radius: 5px;
+            font-family: 'Apple SD Gothic Neo';
+            font-style: normal;
+            font-weight: 800;
+            font-size: 18px;
+            line-height: 22px;
+            color: #666666;
+        }
+        .left_icon{
+            margin-right: 8px;
+        }
+        .right_icon{
+            margin-left: 8px;
+        }
+
+    </style>
+</head>
+<body>
+    <!-- 안내매세지 모달창 -->
+    <div class="md_position hidden">
+        <div class="modal">
+            <div class="md_overlay ">
+            </div>
+        </div>
+
+        <div class="md_content">
+            <div class="title_position">
+                <img src="image/celebrate_icon.png" alt="왼쪽아이콘" width="25px" height="25px" class="left_icon"/>
+                <h3>축하합니다!</h3>
+                <img src="image/celebrate_icon_reverse.png" alt="오른쪽아이콘" width="25px" height="25px" class="right_icon"/>
+            </div>
+            <p>레벨이 올랐습니다.</p>
+            <input type="button" name="loginErrorModal" value="확인"/>
+
+        </div>  
+    </div>
+
+    <!-- 졸업 안내 모달창 -->
+    <div class="md_position2">
+        <div class="modal2">
+            <div class="md_overlay2">
+            </div>
+        </div>
+
+        <div class="md_content2">
+            <div class="title_position">
+                <img src="image/graduation_icon.png" alt="왼쪽아이콘" width="25px" height="25px" class="left_icon"/>
+                <h3>엔딩</h3>
+                <img src="image/graduation_icon.png" alt="오른쪽아이콘" width="25px" height="25px" class="right_icon"/>
+            </div>
+            <p class="first_p">12월 31일이 되었습니다. <br/>
+                지금 바로 엔딩을 확인해보세요!</p> <br/>
+            <p class="second_p"><span>주의사항</span>: 지금부터 미션을 성공해도 <br/>
+                더 이상의 스탯, 레벨 변화는 없습니다.</p>
+            <input type="button" name="loginErrorModal" value="확인"/>
+
+        </div>  
+    </div>
+
+    <script>
+        // 배경의 까만 부분 누르면 모달창 사라짐 (frame 31 : 엔딩 모달창의 경우만 적용)
+        $('.md_overlay2').click(()=>{$('.md_position2').addClass('hidden')});
+
+        // 모달창 제목의 왼쪽 아이콘 바꾸기 (아이콘 이미지 파일(~_icon) : celebrate / gift / graduation(학사모) / siren(사이렌) / throphy)
+        $('.md_content .left_icon').attr('src','image/trophy_icon.png');
+
+        // 모달창 제목의 오른쪽 아이콘 바꾸기
+        $('.md_content .right_icon').attr('src','image/trophy_icon.png');
+
+        // 모달창 제목 바꾸기
+        $('.md_content h3').text('미션 성공');
+
+        // 모달창 내용 바꾸기
+        $('.md_content p').html('<span>스탯</span>을 달성하여 선물이 왔습니다. <br/> 칭호 창을 확인해보세요!');
+
+        // frame 28처럼 '스탯', '레벨'과 같이 색깔을 진하게 하려면 모달창 내용에 <span>태그로 감싸주고 css 바꾸기
+        $('.md_content span').css('color','#666666');
+
+        // 모달창의 확인 버튼 누르면 모달창 사라짐
+        $('input[name=loginErrorModal]').click(()=>{$('.md_position').addClass('hidden')}); // 안내메세지
+        $('input[name=loginErrorModal]').click(()=>{$('.md_position2').addClass('hidden')}); // 졸업메세지
+    </script>
+</body>
+</html>
diff --git a/image/blue_star.png b/image/blue_star.png
diff --git a/image/experience.png b/image/experience.png
diff --git a/image/getting.png b/image/getting.png
diff --git a/image/info.png b/image/info.png
diff --git a/image/info_click.png b/image/info_click.png
diff --git a/image/insta.png b/image/insta.png
diff --git a/image/kakao.png b/image/kakao.png
diff --git a/image/lion1.jpg b/image/lion1.jpg
diff --git a/image/minus_icon.png b/image/minus_icon.png
diff --git a/image/misson.png b/image/misson.png
diff --git a/image/misson_click.png b/image/misson_click.png
diff --git a/image/pink_star.png b/image/pink_star.png
diff --git a/image/profile.png b/image/profile.png
diff --git a/image/purple_star.png b/image/purple_star.png
diff --git a/image/setup.png b/image/setup.png
diff --git a/image/setup_click.png b/image/setup_click.png
diff --git a/image/study.png b/image/study.png
diff --git a/image/sum_icon.png b/image/sum_icon.png
diff --git a/image/team_logo.png b/image/team_logo.png
diff --git a/image/yellow_star.png b/image/yellow_star.png