Update front-end of Welcome Page

@@ -6,7 +6,7 @@ const fs=require('fs');
 const router = express.Router()
 const router = express.Router()
 const fileStore = require('session-file-store')(session);
 const fileStore = require('session-file-store')(session);
 const app = express();
 const app = express();
-var flash = require('connect-flash'); 
+var flash = require('connect-flash');
 var NaverStrategy = require('passport-naver').Strategy;
 var NaverStrategy = require('passport-naver').Strategy;
 var KakaoStrategy = require('passport-kakao').Strategy;
 var KakaoStrategy = require('passport-kakao').Strategy;
 
 
@@ -38,7 +38,7 @@ passport.deserializeUser(function(id, done) {   //읽기
 
 
 //첫 페이지
 //첫 페이지
 app.get('/',(req,res)=>{
 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);
     res.send(page);
 });
 });
 
 
@@ -57,7 +57,7 @@ app.get('/main',(req,res)=>{
 //로그인 페이지
 //로그인 페이지
 app.get('/login',(req,res)=>{
 app.get('/login',(req,res)=>{
     let page =  getLoginButton(`<a href="/">뒤로가기</a>`);
     let page =  getLoginButton(`<a href="/">뒤로가기</a>`);
-    res.send(page);   
+    res.send(page);
 });
 });
 
 
 
 
@@ -75,7 +75,7 @@ passport.use(new LocalStrategy({
       console.log(user);
       console.log(user);
 
 
         //아이디가 다를때
         //아이디가 다를때
-        if (id !== user.email){  
+        if (id !== user.email){
             //alert("존재하는 아이디가 없습니다.")
             //alert("존재하는 아이디가 없습니다.")
             return done(null, false, { message: '아이디가 다르다' });}
             return done(null, false, { message: '아이디가 다르다' });}
         //비밀번호가 다를때
         //비밀번호가 다를때
@@ -89,18 +89,18 @@ passport.use(new LocalStrategy({
 
 
 //로그인 처리 (Passport)
 //로그인 처리 (Passport)
 app.post('/login',
 app.post('/login',
-passport.authenticate('local', { 
+passport.authenticate('local', {
     //성공시, 메인페이지 이동
     //성공시, 메인페이지 이동
     //실패시 로그인 페이지 이동
     //실패시 로그인 페이지 이동
     successRedirect: '/',
     successRedirect: '/',
     failureRedirect: '/login',
     failureRedirect: '/login',
     badRequestMessage : 'Missing username or password.',
     badRequestMessage : 'Missing username or password.',
-    failureFlash: true 
+    failureFlash: true
 }));
 }));
 
 
 //로그 아웃 처리
 //로그 아웃 처리
 app.get('/logout',(req,res)=>{
 app.get('/logout',(req,res)=>{
-    
+
   //passport 정보 삭제
   //passport 정보 삭제
   req.logout();
   req.logout();
   //서버측 세션 삭제
   //서버측 세션 삭제
@@ -124,20 +124,20 @@ const authInfo = (req)=>{
 // naver 로그인
 // naver 로그인
 app.get('/naverlogin', passport.authenticate('naver'));
 app.get('/naverlogin', passport.authenticate('naver'));
 passport.use('naver',new NaverStrategy({
 passport.use('naver',new NaverStrategy({
-  clientID: 'CGVVomc0bhMhzfzbytK2', 
-  clientSecret: 'XHylcjnZxG', 
+  clientID: 'CGVVomc0bhMhzfzbytK2',
+  clientSecret: 'XHylcjnZxG',
   callbackURL: "http://localhost:3000/",
   callbackURL: "http://localhost:3000/",
   svcType: 0,
   svcType: 0,
   authType: 'reauthenticate'  // enable re-authentication
   authType: 'reauthenticate'  // enable re-authentication
- }, 
- 
- function(accessToken, refreshToken, profile, done) { 
+ },
+
+ function(accessToken, refreshToken, profile, done) {
   var _profile = profile._json;
   var _profile = profile._json;
   console.log(_profile.id);
   console.log(_profile.id);
   console.log(_profile.properties.nickname);
   console.log(_profile.properties.nickname);
- } 
+ }
  ));
  ));
- 
+
 
 
 // kakao 로그인
 // kakao 로그인
 app.get('/kakaologin', passport.authenticate('kakao-login'));
 app.get('/kakaologin', passport.authenticate('kakao-login'));
@@ -230,7 +230,7 @@ app.get('/join',(req,res)=>{
   </style><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
   </style><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
-  
+
 </head>
 </head>
 
 
   <body>
   <body>
@@ -254,7 +254,7 @@ app.get('/join',(req,res)=>{
       </button>
       </button>
   </form>
   </form>
   </html>
   </html>
-  
+
   `,'<a href="/login">뒤로가기</a>');
   `,'<a href="/login">뒤로가기</a>');
   res.send(page);
   res.send(page);
 });
 });
@@ -371,7 +371,7 @@ const getLoginButton = (auth) =>{
             <button type="submit" class="btn btn btn-primary">
             <button type="submit" class="btn btn btn-primary">
            <a href="/join" style="color:white;text-decoration-line:none;"> 회원가입</a>
            <a href="/join" style="color:white;text-decoration-line:none;"> 회원가입</a>
         </form>
         </form>
-        
+
       </div>
       </div>
     </div>
     </div>
   </div>
   </div>
@@ -380,8 +380,8 @@ const getLoginButton = (auth) =>{
   <a href="/naverlogin" class="btn btn-block btn-lg btn-success btn_login">Naver</a>
   <a href="/naverlogin" class="btn btn-block btn-lg btn-success btn_login">Naver</a>
   <a href="/kakaologin" class="btn btn-block btn-lg btn-warning btn_login">KaKao</a>
   <a href="/kakaologin" class="btn btn-block btn-lg btn-warning btn_login">KaKao</a>
   </div>
   </div>
- 
- 
+
+
 </body>
 </body>
 </html>
 </html>
     `;
     `;
@@ -398,13 +398,59 @@ const getFirstPage =(title, content, auth) =>{
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Passport Example</title>
         <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>
     </head>
     <body>
     <body>
-    ${auth}
         <h1>${title}</h1>
         <h1>${title}</h1>
         <p>${content}</p>
         <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>
         </div>
         <script type="text/javascript">
         <script type="text/javascript">
         function movepage(){
         function movepage(){
@@ -415,4 +461,3 @@ const getFirstPage =(title, content, auth) =>{
     `;
     `;
 
 
 }
 }
-