김명주 / 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
#total
{
position:absolute;
background-image:url("metadata/image/background.png");
top:50%;
left:50%;
width:1300px;
height:650px;
margin:-325px 0px 0px -650px;
}
#words
{
position:absolute;
top:42%;
left:16%;
width:400px;
height:350px;
margin:-75px 0px 0px 0px;
}
#imgkey
{
position:relative;
left:15%;
}
#rkart
{
position:absolute;
background-image: url("metadata/image/kart.png");
width:350px;
height:350px;
top:30%;
left:60%;
}
#imgId
{
position:relative;
top:20%;
left:15%;
width:70%;
height:60%;
}
#word1
{
position:relative;
font-family: 'Nanum Gothic';
font-size:large;
font-weight: bold;
top:10%;
width:160px;
height:40px;
border-radius: 30px;
border:0;
background: rgb(192, 234, 250);
box-shadow: 3px 3px 3px rgb(209, 207, 207);
}
#word2
{
position:relative;
font-family: 'Nanum Gothic';
font-size:large;
font-weight: bold;
top:19%;
left:15%;
width:160px;
height:40px;
border-radius: 30px;
border:0;
background: rgb(192, 234, 250);
box-shadow: 3px 3px 3px rgb(209, 207, 207);
}
#word3
{
position:relative;
font-family: 'Nanum Gothic';
font-size:large;
font-weight: bold;
top:19%;
width:160px;
height:40px;
border-radius: 30px;
border:0;
background: rgb(192, 234, 250);
box-shadow: 3px 3px 3px rgb(209, 207, 207);
}
#word4
{
position:relative;
font-family: 'Nanum Gothic';
font-size:large;
font-weight: bold;
top:28%;
left:15%;
width:160px;
height:40px;
border-radius: 30px;
border:0;
background: rgb(192, 234, 250);
box-shadow: 3px 3px 3px rgb(209, 207, 207);
}
#word5
{
position:relative;
font-family: 'Nanum Gothic';
font-size:large;
font-weight: bold;
top:28%;
width:160px;
height:40px;
border-radius: 30px;
border:0;
background: rgb(192, 234, 250);
box-shadow: 3px 3px 3px rgb(209, 207, 207);
}
#word6
{
position:relative;
font-family: 'Nanum Gothic';
font-size:large;
font-weight: bold;
top:35%;
left:15%;
width:160px;
height:40px;
border-radius: 30px;
border:0;
background: rgb(192, 234, 250);
box-shadow: 3px 3px 3px rgb(209, 207, 207);
}
#word7
{
position:relative;
font-family: 'Nanum Gothic';
font-size:large;
font-weight: bold;
top:38%;
width:160px;
height:40px;
border-radius: 30px;
border:0;
background: rgb(192, 234, 250);
box-shadow: 3px 3px 3px rgb(209, 207, 207);
}
#text1
{
position:relative;
left:15%;
font-family: 'Nanum Gothic';
font-size:50px;
font-weight: bold;
}
#text2
{
position:relative;
left:15%;
font-family: 'Nanum Gothic';
font-size:70px;
font-weight: bold;
color:rgb(0, 153, 255);
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>추천 카트</title>
<link rel="stylesheet" type="text/css" href="test_result.css" />
</head>
<script>
var item='<%- body %>';
var url='<%- url %>';
var stritem=item.split(".");
function load() {
return fetch("metadata/kart.json")
.then((response) => response.json())
.then((json) => json.kart);
}
load().then((kart) => {
const div_target = document.querySelector("#total");
var obj = document.createElement('text');
var obj2=document.createElement('text');
for (var i = 0; i < kart.length; i++) {
if (kart[i]['id'] == stritem[0]) {
obj.id="text1";
obj2.id="text2";
obj.innerText = "나에게 맞는 카트는 ";
obj2.innerText=kart[i]['name'];
break;
}
}
div_target.append(obj);
div_target.append(obj2);
});
function Img() {
return url+item;
}
</script>
<body>
<div id="total">
<div id="words">
<img id="imgkey" src="metadata/image/keyword.png">
</div>
<div id="rkart">
<img id="imgId" src="">
<script>document.getElementById("imgId").src = Img()</script>
</div>
</div>
</body>
<script>
var keyword="<%- keyword %>";
var keyarr=keyword.split(',');
const div_target=document.querySelector("#words");
var i=0, index=0;
while(index<7){
if(keyarr[index]!="empty"){
var obj=document.createElement('button');
obj.id="word"+(i+1);
obj.innerText='#'+keyarr[index];
div_target.append(obj);
i++;
}
index++;
}
</script>
</html>
\ No newline at end of file