Merge branch 'main' of https://github.com/Good-Smart/Comma

kimyenida · Apr 12, 2023 · 62f3733 · 62f3733
2 parents 6f4e9af + 6072153
commit 62f3733
Show file tree

Hide file tree

Showing 13 changed files with 423 additions and 51 deletions.
diff --git a/img/background.jpg b/img/background.jpg
diff --git a/img/bad.png b/img/bad.png
diff --git a/img/good.png b/img/good.png
diff --git a/img/happy.png b/img/happy.png
diff --git a/img/meditate.png b/img/meditate.png
diff --git a/img/start_btn_bg.png b/img/start_btn_bg.png
diff --git a/img/sun.png b/img/sun.png
diff --git a/question.html b/question.html
@@ -5,63 +5,76 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
-    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Song+Myung&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="questionstyle.css">
     <title>'오늘의 쉼표'</title>
 </head>
 <body>
 
-    <article class="start">
+    <article class="q_title">
         <h2>'오늘의 쉼표'</h2>
-        <button type="button" class="btn btn-primary mt-5" onclick='start();'>시작하기</button>
     </article>
+    <div id="sun"></div>
     <article class="question">
-        <div class="progress mt-5">
-            <div class="progress-bar" role="progressbar" style="width: calc(100/12*3%)" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-        <h2 id="title" class="text-center mt-5">문제</h2>
+        <h2 id="title" class="text-center mt-5">"오늘 기분은 어떤가요?"</h2>
 
         <div class="mb-3">
-            <textarea class="form-control" id="exampleFormControlTextarea1" name="answer" id="answer" rows="3"></textarea>
+            <textarea class="form-control" id="textarea_answer" name="answer" rows="3"></textarea>
         </div>
-        <button onclick="next()">다음으로</button>
+        <div id="feelingbox">
+            <button class="feeling" id="bad" value="bad"></button>
+            <button class="feeling" id="good" value="good"></button>
+            <button class="feeling" id="happy" value="happy"></button>
+            <p id="clicked_feeling"></p>
+        </div>
+        <button class="next_btn" onclick="next()">다음으로</button>
 
     </article>
 
     <script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
     <script>
-        var num = 1;
+        var num = 2;
         var q = {
-            1: {"title": "오늘 기분은 어떤가요?"}, 
-            2: {"title": "오늘 가장 기뻤던 일은 무엇인가요?"}, 
-            3: {"title": "오늘 가장 보랍찼던 일은 무엇인가요?"}, 
-            4: {"title": "오늘 후회되는 일이 있나요?"}, 
-            5: {"title": "내일은 무엇을 하고 싶나요?"}
-        }
-
-        function start() {
-            $(".start").hide();
-            $(".question").show();
-            $("#answer").show();
-            next();
+            1: {"title": '"오늘 기분은 어떤가요?"'}, 
+            2: {"title": '"오늘 가장 기뻤던 일은<br/>무엇인가요?"'}, 
+            3: {"title": '"오늘 가장 보람찼던 일은<br/>무엇인가요?"'}, 
+            4: {"title": '"오늘 후회되는 일이<br/>있나요?"'}, 
+            5: {"title": '"내일은 무엇을 <br/>하고 싶나요?"'}
         }
+        var clicked_value = "";
+
+        $('.feeling').click(function(){
+            now_clicked = $(this).val();
+            if (clicked_value != "") {
+                txt = "#" + clicked_value;
+                $(txt).css({"background-color": "rgba(255, 255, 255, 0)"});
+            }
+            $(this).css("background-color", "#FFC480");
+            $('#clicked_feeling').html(now_clicked);
+            clicked_value = now_clicked;
+        })
 
         function next() {
             if (num == 6) {
                 $(".question").hide();
-                // $("#answer").hide();
+                $("#textarea_answer").hide();
                 $(".result").show();
 
-                // 답변 모아서 보여주기
+                // 오늘의 쉼표 분석
+                location.href = 'result.html';
 
             } else {
-                $(".progress-bar").attr('style', 'width: calc(100/5*'+num+'%)');
                 $("#title").html(q[num]["title"]);
-                var inputValue = $("#answer").val();
-                // var inputValue = document.getElmentById('#answer');
+                $("#sun").css({'left' : 'calc(269px+'+num+'px)', 'top' : 'calc(43px + 167/5*'+num+'px)'})
+                var inputValue = $("#textarea_answer").val();
+                $("#"+clicked_value).css({"background-color": "rgba(255, 255, 255, 0)"});
+                $('#clicked_feeling').html("");
+                clicked_value = "";
+
                 console.log(inputValue)
-                $("#answer").val('');
+                $("#textarea_answer").val('');
             num++;
             }
         }

diff --git a/questionstyle.css b/questionstyle.css
@@ -0,0 +1,176 @@
+* {
+    font-family: 'Song Myung', serif;
+}
+
+article {
+    display: flex;
+    flex-direction: column;
+}
+
+
+html, body {
+    min-height: 844px;
+    max-width: 390px;
+}
+
+body {
+    background-image: url('./img/background.jpg');
+    background-size: 390px 844px;
+    background-repeat: no-repeat;
+    margin: 0 35px;
+}
+
+.splash_title {
+    position: absolute;
+    width: 190px;
+    height: 91px;
+    left: 53px;
+    top: 109px;
+    font-weight: 400;
+    font-size: 40px;
+    line-height: 50px;
+
+    color: #000000;
+}
+
+.q_title {
+    position: absolute;
+    width: 164px;
+    height: 26px;
+    left: 67px;
+    top: 81px;
+
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 24px;
+
+    color: #000000;
+    text-align: center;
+}
+
+#meditate {
+    position: absolute;
+    width: 367px;
+    height: 525px;
+    left: 14px;
+    top: 281px;
+}
+.start_btn {
+    border: none;
+    position: absolute;
+    width: 302px;
+    height: 59px;
+    left: 42px;
+    top: 750px;
+
+    background: #FFC480;
+    border-radius: 30px;
+}
+
+.next_btn {
+    border: none;
+    position: absolute;
+    width: 302px;
+    height: 59px;
+    left: 42px;
+    top: 750px;
+
+    background: #FFC480;
+    border-radius: 30px;
+}
+
+#title {
+    position: relative;
+    top: 185px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 28px;
+    line-height: 38px;
+
+    display: flex;
+    text-align: center;
+    vertical-align: middle;
+
+    color: #000000;
+}
+
+#textarea_answer {
+    position: absolute;
+    width: 317px;
+    height: 211px;
+    left: 35px;
+    top: 328px;
+
+    background: #FFDAAF;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 30px;
+    border: none;
+}
+
+#sun {
+    position: absolute;
+    width: 75px;
+    height: 75px;
+    left: 269px;
+    top: 43px;
+
+    background-image: url(img/sun.png);
+}
+
+#feelingbox {
+    position: absolute;
+    width: 215px;
+    height: 69px;
+    left: 86px;
+    top: 562px;
+
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 20px;
+}
+
+#bad {
+    position: absolute;
+    left: 13.49%;
+    right: 66.98%;
+    top: 17.39%;
+    bottom: 21.74%;
+    background-image: url(img/bad.png);
+    border: none;
+    background-color:rgba(255, 255, 255, 0);
+}
+
+#good {
+    position: absolute;
+    left: 40.47%;
+    right: 40%;
+    top: 17.39%;
+    bottom: 21.74%;
+    background-image: url(img/good.png);
+    border: none;
+    background-color:rgba(255, 255, 255, 0);
+}
+
+#happy {
+    position: absolute;
+    left: 67.44%;
+    right: 12.56%;
+    top: 17.39%;
+    bottom: 20.29%;
+    background-image: url(img/happy.png);
+    border: none;
+    background-color:rgba(255, 255, 255, 0);
+}
+
+#clicked_feeling {
+    position: absolute;
+    left: 86px;
+    top: 75px;
+    font-weight: 400;
+    font-size: 16px;
+    color: #FFFFFF;
+}
+
+.question {
+    align-items: center;
+}
diff --git a/result.html b/result.html
@@ -0,0 +1,94 @@
+<!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">
+    <link href="https://fonts.googleapis.com/css2?family=Song+Myung&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="questionstyle.css">
+    <title>'오늘의 쉼표'</title>
+    <style>
+        body {
+            background: #FBEDDD;
+        }
+
+        button {
+            box-sizing: border-box;
+            background: #FA9953;
+            border-radius: 10px;
+            border: none;
+            margin-top: 10px;
+            font-size: 19px;
+            color: #FFFBF5;
+        }
+    </style>
+</head>
+<body>
+    <h2 style="position: absolute;
+    width: 212px;
+    height: 40px;
+    left: 89px;
+    top: 76px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 28px;
+    line-height: 38px;
+    text-align: center;">
+    오늘의 쉼표 분석</h2>
+    <p 
+    style="position: absolute;
+    width: 246px;
+    height: 110px;
+    left: 70px;
+    top: 159px;
+    text-align: center;
+    font-size: 18px;
+    line-height: 38px;">🙂
+        <br/>오늘 기록하신 내용을 
+        <br/>바탕으로 분석해봤어요!</p>
+
+        <div style="position: absolute;
+        width: 290px;
+        height: 211px;
+        left: 36px;
+        top: 297px;
+        padding: 0 15px;
+        
+        background: #FFFBF5;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        border-radius: 30px;">
+        <p style="text-align: center; line-height: 140%;">
+            시험공부에 대한 스트레스와 놀고 싶은 욕구가 충돌한 상황인데, 중요한 것은 시험공부를 잘 마무리하면 더 많은 자유 시간을 가질 수 있다는 것입니다. 집중력을 높이기 위해 작은 목표를 세우고 계획을 세우는 것이 좋습니다. 그리고 산책이나 기분 전환을 할 때는 스마트폰이나 인터넷을 이용하는 것보다는 책을 읽거나 문화생활을 하는 것이 좋습니다.
+        </p>
+        </div>
+
+        <p style="position: absolute;
+        width: 179.25px;
+        height: 22.59px;
+        left: 107.07px;
+        top: 564.58px;
+        text-align: center;">
+        결과를 공유받고 싶다면?</p>
+
+        <button 
+            type="button"
+            style="position: absolute;
+                width: 320px;
+                height: 56px;
+                left: 37px;
+                top: 601px;"
+            onclick="location.href='#'"
+        >회원가입 하러가기</button>
+        <button
+            type="button" 
+            style="position: absolute;
+                width: 320px;
+                height: 56px;
+                left: 37px;
+                top: 672px;"
+            onclick="location.href='#'">
+            로그인 하기
+        </button>
+
+</body>
+</html>