Update front-end of Welcome Page

윤희찬
Commit fdaabc0a001fe31ed43809b64f9073ff18fd1db6 fdaabc0a 1 parent 96ae9a88
Showing 1 changed file with 50 additions and 5 deletions
index.js
--- a/index.js
View file @fdaabc0
+++ b/index.js
View file @fdaabc0
@@ -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>
+        <div class="box1">
-        <input type="button" value="page move" onClick="movepage()"/>
+        ${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) =>{
     `;
 }
-