#54 html,css 병합/ 질문,답변 파일 생성

HiAlcohol · Jan 18, 2022 · 81851b6 · 81851b6
1 parent c27263c
commit 81851b6
Show file tree

Hide file tree

Showing 4 changed files with 300 additions and 6 deletions.
diff --git a/config/question.json b/config/question.json
@@ -0,0 +1,62 @@
+{
+    "1" : {
+        "question" : "건배사를 외쳐야하는 술자리에서..",
+        "answer1" : "먼저 나서서 건배사를 외친다.",
+        "answer2" : "하기 싫지만 일단 따라한다."
+    },
+    "2" : {
+        "question" : "술집에서 멍하니 있는 당신의 머리속은?",
+        "answer1" : "상상의 나래",
+        "answer2" : "아.. 집가서 해장 뭐하지"
+    },
+    "3" : {
+        "question" : "술을 마시면 친구가 고민상담을 시작한다.",
+        "answer1" : "고민은 해결해야지! 현실적인 조언을 해준다.",
+        "answer2" : "많이 힘들었겠구나.. 따듯한 위로의 말을 해준다."
+    },
+    "4" : {
+        "question" : "오늘은 집청소를 하기로 한 날! 갑자기 친구가 부른다.",
+        "answer1" : "청소는 내일하면 되지! 일단 나간다.",
+        "answer2" : "오늘은 청소를 해야해! 거절한다."
+    },
+    "5" : {
+        "question" : "오늘은 금요일이니깐 술을 마셔야지.",
+        "answer1" : "역시 술은 여러명이서 먹어야한다. 다 나와!",
+        "answer2" : "술은 혼자 편하게 마시는 게 최고야"
+    },
+    "6" : {
+        "question" : "술자리에서 당신이 친구들과 하는 얘기는?",
+        "answer1" : "만약에.. 일어나지 않을 일들에 대해 얘기를 나눈다.",
+        "answer2" : "취업, 학업 등 현실적인 얘기를 나눈다."
+    },
+    "7" : {
+        "question" : "친구가 술자리에서 눈물을 보인다. 당신의 반응은?",
+        "answer1" : "일단 우는 이유를 물어본다.",
+        "answer2" : "이유는 모르지만 우니깐 일단 달래준다."
+    },
+    "8" : {
+        "question" : "당신이 술집을 고르는 방법은?.",
+        "answer1" : "발이 가는 곳이 내 운명이다! 느낌가는 곳으로 간다.",
+        "answer2" : "술집부터 안주까지 미리 찾아서 최고의 술집을 찾는다."
+    },
+    "9" : {
+        "question" : "술집에 사람이 많다. 당신의 행동은?",
+        "answer1" : "술집에서는 우리 모두가 친구! 이쪽저쪽 말을 걸어본다.",
+        "answer2" : "친구들과 조용히 마시고 나온다."
+    },
+    "10" : {
+        "question" : "술을 마시다가 갑자기 고민이 생긴 당신. 당신의 고민은?",
+        "answer1" : "옆자리 사람이 갑자기 좀비가 되면 도망가야하나?",
+        "answer2" : "아 내일 어떻게 일어나지.."
+    },
+    "11" : {
+        "question" : "어색한 사람과의 술자리. 내가 전혀 관심 없는 이야기를 한다. 당신의 반응은?",
+        "answer1" : "공감은 하지 않고 적당히 질문을 던진다.",
+        "answer2" : "관심은 없지만 무안할 수 있으니 리액션을 해준다."
+    },
+    "12" : {
+        "question" : "수상한 칵테일을 추천받았다. 당신의 반응은?",
+        "answer1" : "친구 추천을 믿고 그냥 마신다.",
+        "answer2" : "어떤 술인지 인터넷에 검색해본 후 선택을 한다."
+    }
+}
diff --git a/public/html/test.html b/public/html/test.html
@@ -1,18 +1,98 @@
 <!DOCTYPE html>
 <html lang="en">
+<style>
+    @charset "utf-8";
+/*폰트*/
+@import url('https://fonts.googleapis.com/css2?family=Pattaya&display=swap');
+*{margin: 0; padding: 0;}
+
+@font-face {
+    font-family: 'GmarketSansMedium';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GmarketSansMedium.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+*:not(i) {
+    font-family: GmarketSansMedium;
+}
+
+a {
+    text-decoration: none;
+    color: white;
+}
+
+p {
+    color: white;
+}
+
+body {
+    margin: auto;
+    background-color: #242424;
+    text-align: center;
+}
+
+main {
+    margin-top: 150px;
+}
+
+.qna {
+    margin: auto;
+    padding: 20px;
+    background-color: #202020;
+    border-radius: 10px;
+    width: 350px;
+}
+
+.qna div {
+    margin: auto;
+    width: 250px;
+    height: 90px;
+    color: white;
+    border: 1px solid #8BFEE2;
+    box-shadow: 0px 0px 10px 0.5px rgba(11, 243, 188, 0.5);
+    border-radius: 20px;
+    padding-top: 60px;
+}
+
+.move {
+    margin: auto;
+    width: 320px;
+    color: white;
+}
+
+.move div{
+    color: white;
+    float: left;
+    margin-right: 5px;
+    margin-left: 5px;
+    padding-top: 10px;
+    width: 150px;
+    height: 30px;
+    border-radius: 10px;
+}
+
+.prev {
+    background-color: #BDBDBD;
+}
+
+.next {
+    background-color: #0BF3BC;
+}
+</style>
 <head>
     <meta charset="UTF-8">
     <title>Hi MBTI</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/public/css/test.css" />
+    <!-- <link rel="stylesheet" href="/public/css/test.css" /> -->
 </head>
 
 <body>
 <header>
 
 </header>
 <main>
-    <div><a>1/13</a></div><br>
+    <div><a>1/12</a></div><br>
 
     <div class="qna">
         <p>Q1. 술집에서 멍하니 있는 당신의 머리속은?</p><br><br>

diff --git a/public/html/test_result.html b/public/html/test_result.html
@@ -1,6 +1,98 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <style>
+      @charset "utf-8";
+/*폰트*/
+@import url('https://fonts.googleapis.com/css2?family=Pattaya&display=swap');
+*{margin: 0; padding: 0;}
+
+@font-face {
+    font-family: 'GmarketSansMedium';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GmarketSansMedium.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+*:not(i) {
+    font-family: GmarketSansMedium;
+}
+
+a {
+    text-decoration: none;
+    color: white;
+}
+
+.result {
+    width: 100%;
+    padding-top: 130px;
+}
+
+.result a {
+    text-decoration: none;
+    font-size: 20px;
+    color: white;
+}
+
+.result img {
+    margin-top: 20px;
+    margin-bottom: 10px;
+    width: 100px;
+}
+
+body {
+    margin: auto;
+    background-color: #242424;
+    text-align: center;
+}
+
+main {
+    margin-top: 150px;
+}
+.exp {
+    margin-top: 50px;
+    margin-bottom: 30px;
+}
+.exp li{
+    margin-top: 10px;
+}
+.match {
+    margin: auto;
+    width: 424px;
+    color: white;
+}
+.match div {
+    float: left;
+    margin-right: 5px;
+    margin-left: 5px;
+    width: 200px;
+    height: 70px;
+    padding-top: 20px;
+    border: 1px solid #0BF3BC;
+    border-radius: 10px;
+}
+
+.return {
+    color: white;
+    font-size: 17px;
+    padding-top: 15px;
+    margin: auto;
+    width: 260px;
+    height: 35px;
+    background: #0BF3BC;
+    border-radius: 10px;
+}
+
+.share {
+    margin-top: 30px;
+    margin-bottom: 30px;
+    font-size: 15px;
+    color: white;
+}
+.share img {
+    width: 50px;
+}
+    </style>
     <meta charset="UTF-8">
     <title>Hi MBTI Result</title>
     <link rel="stylesheet" href="public/css/test_result.css">
@@ -35,7 +127,7 @@
 
   <main>
     <div class="return"><a href="test_start.html">처음으로</a></div>
-    <div class="share"> <img src="bt_kakao.png"><br>공유하기</div>
+    <div class="share"> <img src="/public/img/bt_kakao.png"><br>공유하기</div>
   </main>
 
 </body>

diff --git a/public/html/test_start.html b/public/html/test_start.html
@@ -1,18 +1,78 @@
 <!DOCTYPE html>
 <html lang="en">
+  <style>
+    @charset "utf-8";
+/*폰트*/
+@import url('https://fonts.googleapis.com/css2?family=Pattaya&display=swap');
+*{margin: 0; padding: 0;}
+p {
+    font-family: 'Pattaya', sans-serif;
+    color: white;
+}
+
+@font-face {
+    font-family: 'GmarketSansMedium';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GmarketSansMedium.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+*:not(i) {
+    font-family: GmarketSansMedium;
+}
+
+a {
+    text-decoration: none;
+    color: white;
+}
+
+header {
+    width: 100%;
+    padding-top: 240px;
+    position: fixed;
+}
+
+header a {
+    text-decoration: none;
+    font-size: 20px;
+    color: white;
+}
+
+body {
+    margin: auto;
+    background-color: #242424;
+    text-align: center;
+}
+
+main {
+    padding-top: 540px;
+}
+
+.start {
+    color: white;
+    font-size: 17px;
+    padding-top: 11px;
+    margin: auto;
+    width: 185px;
+    height: 40px;
+    background: #0BF3BC;
+    border-radius: 50px;
+}
+  </style>
+
 <head>
     <meta charset="UTF-8">
-    <title>>Hi MBTI Start</title>
+    <title>Hi MBTI Start</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/public/css/test_start.css" />
+    <!-- <link rel="stylesheet" href="/public/css/test_start.css"/> -->
 </head>
 
 <body>
   <header>
     <a>당신에게 어울리는 <span style="color:#0BF3BC ">술</span>테스트</a>
   </header>
   <main>
-    <div class="start">테스트 시작</div>
+    <div class="start"><a href = "test.html">테스트 시작</a></div>
   </main>
 
 </body>