김명주 / kartrider

Go to a project
Toggle navigation Toggle navigation pinning
김명주
d3a9f8e6 1 parent f05497b5

Design test home page

Inline Side-by-side
Showing 2 changed files with 175 additions and 0 deletions
1 +#uni
2 +{
3 + position:fixed;
4 + top:600px;
5 + left:1400px;
6 +}
7 +#dao
8 +{
9 + position:fixed;
10 + top:550px;
11 + left:150px;
12 +
13 +}
14 +#tex1
15 +{
16 + font-family: 'Nanum Gothic';
17 + font-size:80px;
18 + font-weight: bold;
19 +}
20 +#tex2
21 +{
22 + font-family: 'Nanum Gothic';
23 + font-size:30px;
24 + font-weight: bold;
25 +}
26 +#btn
27 +{
28 + position: relative;
29 + top:40%;
30 + width:100%;
31 + height:12%;
32 + font-family: 'Nanum Gothic';
33 + font-size:large;
34 + font-weight: bold;
35 + color:white;
36 + background-color: black;
37 + text-align: center;
38 + border-radius: 12px;
39 +
40 +}
41 +#index
42 +{
43 + position:absolute;
44 + left:55%;
45 +}
46 +
47 +.box {
48 + width: 500px;
49 + height:700px;
50 + margin: 0 auto;
51 + display:block;
52 + background-color: white;
53 + animation: fade-in 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
54 +}
55 +@keyframes fade-in {
56 + 0% {
57 + opacity: 0;
58 + }
59 + 100% {
60 + opacity: 1;
61 + }
62 + }
63 +
64 +@keyframes spin {
65 + 100% {
66 + transform: rotate(360deg);
67 + }
68 +}
69 +.spinner
70 +{
71 + display: inline-block;
72 + width: 50px;
73 + height: 50px;
74 + border: 5px solid black;
75 + border-color: black transparent transparent;
76 + border-radius: 50%;
77 + animation: spin 1s linear infinite;
78 +}
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 +
4 +<head>
5 + <meta charset="utf-8">
6 + <title>카트 테스트</title>
7 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
8 + <link rel="stylesheet" type="text/css" href="test_home.css" />
9 + <script>
10 + var vec = "";
11 + function Ajax(index) {
12 + $.ajax({
13 + url: '/test/result',
14 + async: true,
15 + type: 'POST',
16 + data: {
17 + test: index
18 + }
19 + });
20 + }
21 + function Any(num, index) {
22 + vec += "/" + index;
23 + var a = document.getElementById("div" + num);
24 + var b = document.getElementById("div" + (num + 1));
25 + a.style.display = "none";
26 + b.style.display = "block";
27 + var a = document.getElementById("div" + num);
28 + }
29 + function Post(index) {
30 + vec += "/" + index;
31 + Ajax(vec);
32 + }
33 + </script>
34 +</head>
35 +
36 +<body>
37 + <img id="dao" src="metadata/image/bdao.png"></img>
38 + <img id="uni" src="metadata/image/buni.png"></img>
39 +
40 + <div class="box" id="div1">
41 + <img id="index" src="metadata/image/one.png"></img>
42 + <text id="tex1">Q1.</text><br>
43 + <text id="tex2">대표 카트를 지정할 때</text>
44 + <button id="btn" onClick="Any(1,1)">가장 좋은 신규 카트로 전시한다.</button>
45 + <button id="btn" onClick="Any(1,2)">추억의 카트로 전시한다.</button>
46 + </div>
47 +
48 + <div class="box" id="div2" style="display:none">
49 + <img id="index" src="metadata/image/two.png"></img>
50 + <text id="tex1">Q2.</text><br>
51 + <text id="tex2">3....2.....1 GAME START</text>
52 + <button id="btn" onClick="Any(2,1)">부스터를 사용하여 치고나간다.</button>
53 + <button id="btn" onClick="Any(2,2)">선두의 뒤에서 마지막 역전을 노린다.</button>
54 + </div>
55 +
56 + <div class="box" id="div3" style="display:none">
57 + <img id="index" src="metadata/image/three.png"></img>
58 + <text id="tex1">Q3.</text><br>
59 + <text id="tex2">스피드 전에서 중요하게 생각하는 것</text>
60 + <button id="btn" onClick="Any(3,1)">부스터 갯수</button>
61 + <button id="btn" onClick="Any(3,2)">부스터 길이</button>
62 + </div>
63 +
64 + <div class="box" id="div4" style="display:none">
65 + <img id="index" src="metadata/image/four.png"></img>
66 + <text id="tex1">Q4.</text><br>
67 + <text id="tex2">팀전을 하는 경우</text>
68 + <button id="btn" onClick="Any(4,1)">1등이 우선! 혼자 치고 나가기</button>
69 + <button id="btn" onClick="Any(4,2)">팀 승리가 우선! 전략적인 방법 세우기</button>
70 + </div>
71 +
72 + <div class="box" id="div5" style="display:none">
73 + <img id="index" src="metadata/image/five.png"></img>
74 + <text id="tex1">Q5.</text><br>
75 + <text id="tex2">현재 1등을 잡기위해</text>
76 + <button id="btn" onClick="Any(5,1)">아이템을 사용하여 격추한다.</button>
77 + <button id="btn" onClick="Any(5,2)">부스터를 사용하여 역전한다.</button>
78 + </div>
79 +
80 + <div class="box" id="div6" style="display:none">
81 + <img id="index" src="metadata/image/six.png"></img>
82 + <text id="tex1">Q6.</text><br>
83 + <text id="tex2">나는 카트를 볼 때</text>
84 + <button id="btn" onClick="Any(6,1)">성능이 우선이다.</button>
85 + <button id="btn" onClick="Any(6,2)">외형이 우선이다.</button>
86 + </div>
87 +
88 + <div class="box" id="div7" style="display:none">
89 + <img id="index" src="metadata/image/seven.png"></img>
90 + <text id="tex1">Q7.</text><br>
91 + <text id="tex2">넥슨 캐쉬가 생겼다.</text>
92 + <button id="btn" onClick="Post(1); location.href='test/result'">지금 당장 유료 카트를 구매한다.</button>
93 + <button id="btn" onClick="Post(2); location.href='test/result'">지금 당장은 사용하지 않는다.</button>
94 + </div>
95 +</body>
96 +
97 +</html>
...\ No newline at end of file ...\ No newline at end of file