김명주 / kartrider

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

Design test result page

Inline Side-by-side
Showing 2 changed files with 224 additions and 0 deletions
1 +#total
2 +{
3 + position:absolute;
4 + background-image:url("metadata/image/background.png");
5 + top:50%;
6 + left:50%;
7 + width:1300px;
8 + height:650px;
9 + margin:-325px 0px 0px -650px;
10 +}
11 +#words
12 +{
13 + position:absolute;
14 + top:42%;
15 + left:16%;
16 + width:400px;
17 + height:350px;
18 + margin:-75px 0px 0px 0px;
19 +}
20 +#imgkey
21 +{
22 + position:relative;
23 + left:15%;
24 +}
25 +#rkart
26 +{
27 + position:absolute;
28 + background-image: url("metadata/image/kart.png");
29 + width:350px;
30 + height:350px;
31 + top:30%;
32 + left:60%;
33 +}
34 +#imgId
35 +{
36 + position:relative;
37 + top:20%;
38 + left:15%;
39 + width:70%;
40 + height:60%;
41 +
42 +}
43 +#word1
44 +{
45 + position:relative;
46 + font-family: 'Nanum Gothic';
47 + font-size:large;
48 + font-weight: bold;
49 + top:10%;
50 + width:160px;
51 + height:40px;
52 + border-radius: 30px;
53 + border:0;
54 + background: rgb(192, 234, 250);
55 + box-shadow: 3px 3px 3px rgb(209, 207, 207);
56 +}
57 +#word2
58 +{
59 + position:relative;
60 + font-family: 'Nanum Gothic';
61 + font-size:large;
62 + font-weight: bold;
63 + top:19%;
64 + left:15%;
65 + width:160px;
66 + height:40px;
67 + border-radius: 30px;
68 + border:0;
69 + background: rgb(192, 234, 250);
70 + box-shadow: 3px 3px 3px rgb(209, 207, 207);
71 +}
72 +#word3
73 +{
74 + position:relative;
75 + font-family: 'Nanum Gothic';
76 + font-size:large;
77 + font-weight: bold;
78 + top:19%;
79 + width:160px;
80 + height:40px;
81 + border-radius: 30px;
82 + border:0;
83 + background: rgb(192, 234, 250);
84 + box-shadow: 3px 3px 3px rgb(209, 207, 207);
85 +}
86 +#word4
87 +{
88 + position:relative;
89 + font-family: 'Nanum Gothic';
90 + font-size:large;
91 + font-weight: bold;
92 + top:28%;
93 + left:15%;
94 + width:160px;
95 + height:40px;
96 + border-radius: 30px;
97 + border:0;
98 + background: rgb(192, 234, 250);
99 + box-shadow: 3px 3px 3px rgb(209, 207, 207);
100 +}
101 +#word5
102 +{
103 + position:relative;
104 + font-family: 'Nanum Gothic';
105 + font-size:large;
106 + font-weight: bold;
107 + top:28%;
108 + width:160px;
109 + height:40px;
110 + border-radius: 30px;
111 + border:0;
112 + background: rgb(192, 234, 250);
113 + box-shadow: 3px 3px 3px rgb(209, 207, 207);
114 +}
115 +#word6
116 +{
117 + position:relative;
118 + font-family: 'Nanum Gothic';
119 + font-size:large;
120 + font-weight: bold;
121 + top:35%;
122 + left:15%;
123 + width:160px;
124 + height:40px;
125 + border-radius: 30px;
126 + border:0;
127 + background: rgb(192, 234, 250);
128 + box-shadow: 3px 3px 3px rgb(209, 207, 207);
129 +}
130 +#word7
131 +{
132 + position:relative;
133 + font-family: 'Nanum Gothic';
134 + font-size:large;
135 + font-weight: bold;
136 + top:38%;
137 + width:160px;
138 + height:40px;
139 + border-radius: 30px;
140 + border:0;
141 + background: rgb(192, 234, 250);
142 + box-shadow: 3px 3px 3px rgb(209, 207, 207);
143 +}
144 +#text1
145 +{
146 + position:relative;
147 + left:15%;
148 + font-family: 'Nanum Gothic';
149 + font-size:50px;
150 + font-weight: bold;
151 +}
152 +#text2
153 +{
154 + position:relative;
155 + left:15%;
156 + font-family: 'Nanum Gothic';
157 + font-size:70px;
158 + font-weight: bold;
159 + color:rgb(0, 153, 255);
160 +}
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <title>추천 카트</title>
5 + <link rel="stylesheet" type="text/css" href="test_result.css" />
6 +</head>
7 +<script>
8 + var item='<%- body %>';
9 + var url='<%- url %>';
10 + var stritem=item.split(".");
11 + function load() {
12 + return fetch("metadata/kart.json")
13 + .then((response) => response.json())
14 + .then((json) => json.kart);
15 + }
16 + load().then((kart) => {
17 + const div_target = document.querySelector("#total");
18 + var obj = document.createElement('text');
19 + var obj2=document.createElement('text');
20 + for (var i = 0; i < kart.length; i++) {
21 + if (kart[i]['id'] == stritem[0]) {
22 + obj.id="text1";
23 + obj2.id="text2";
24 + obj.innerText = "나에게 맞는 카트는 ";
25 + obj2.innerText=kart[i]['name'];
26 + break;
27 + }
28 + }
29 + div_target.append(obj);
30 + div_target.append(obj2);
31 + });
32 +
33 + function Img() {
34 + return url+item;
35 + }
36 +</script>
37 +<body>
38 + <div id="total">
39 + <div id="words">
40 + <img id="imgkey" src="metadata/image/keyword.png">
41 + </div>
42 + <div id="rkart">
43 + <img id="imgId" src="">
44 + <script>document.getElementById("imgId").src = Img()</script>
45 + </div>
46 + </div>
47 +</body>
48 +<script>
49 + var keyword="<%- keyword %>";
50 + var keyarr=keyword.split(',');
51 + const div_target=document.querySelector("#words");
52 + var i=0, index=0;
53 + while(index<7){
54 + if(keyarr[index]!="empty"){
55 + var obj=document.createElement('button');
56 + obj.id="word"+(i+1);
57 + obj.innerText='#'+keyarr[index];
58 + div_target.append(obj);
59 + i++;
60 + }
61 + index++;
62 + }
63 +</script>
64 +</html>
...\ No newline at end of file ...\ No newline at end of file