구희연 / Food_recipe_info

Go to a project
Toggle navigation Toggle navigation pinning
윤희찬
fdaabc0a 1 parent 96ae9a88

Update front-end of Welcome Page

Inline Side-by-side
Showing 1 changed file with 50 additions and 5 deletions
......@@ -38,7 +38,7 @@ passport.deserializeUser(function(id, done) { //읽기
//첫 페이지
app.get('/',(req,res)=>{
let page = getFirstPage('Passport','This is Passport Example Page',authInfo(req));
let page = getFirstPage('Welcome!','Food Recipe',authInfo(req));
res.send(page);
});
......@@ -398,13 +398,59 @@ const getFirstPage =(title, content, auth) =>{
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Passport Example</title>
<style>
body{
height: 100vh;
background-image: url('https://images.unsplash.com/photo-1614548539924-5c1f205b3747?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: scroll;
}
h1 {
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -30%);
text-align: center;
font-size: 5em;
font-family: cursive;;
}
p {
position: relative;
left: 50%;
top: 47%;
transform: translate(-50%, -47%);
font-size: 3em;
text-align: center;
}
div {
position: relative;
font-size: 1.3em;
text-align: center;
}
.box1{
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.box2{
position: relative;
left: 50%;
top: 54%;
transform: translate(-50%, -54%);
}
</style>
</head>
<body>
${auth}
<h1>${title}</h1>
<p>${content}</p>
<div>
<input type="button" value="page move" onClick="movepage()"/>
<div class="box1">
${auth}
</div>
<div class="box2">
<input type="button" value="레시피 보러가기" onClick="movepage()"/>
</div>
<script type="text/javascript">
function movepage(){
......@@ -415,4 +461,3 @@ const getFirstPage =(title, content, auth) =>{
`;
}
......