Update project

- FE 업데이트 했습니다.

Update project
- FE 업데이트 했습니다.
임태민
Commit 76f4ecd843eee4cdf687ea6a900261a7e41d4c6e 76f4ecd8 1 parent e167fc17
Showing 13 changed files with 312 additions and 73 deletions
Project/public/css/master.css
Project/views/home/login.ejs
Project/views/partials/gmap.ejs
Project/views/partials/head.ejs
Project/views/partials/nav.ejs
Project/views/partials/showgmap.ejs
Project/views/posts/edit.ejs
Project/views/posts/index.ejs
Project/views/posts/new.ejs
Project/views/posts/show.ejs
Project/views/users/edit.ejs
Project/views/users/new.ejs
Project/views/users/show.ejs
--- a/Project/public/css/master.css
View file @76f4ecd
+++ b/Project/public/css/master.css
View file @76f4ecd
 body {
     background-color:whitesmoke;
   }
+  .mb-3 {
+    font-family: 'Archivo', sans-serif;
+  }
   .h1 {
     font-family: 'PT Serif', serif;
   }
@@ -38,9 +41,9 @@ body {
   }
-.mb-3{
+/* .mb-3{
   background-color:tan;
-}
+} */
\ No newline at end of file
--- a/Project/views/home/login.ejs
View file @76f4ecd
+++ b/Project/views/home/login.ejs
View file @76f4ecd
@@ -2,18 +2,40 @@
 <html>
   <head>
     <%- include('../partials/head') %>
+    <style>
+      #login {
+        font-family: 'Archivo', sans-serif;
+        /* font-family: 'PT Serif', serif; */
+        font-size:3rem;
+        font-weight: bold;
+      }
+
+      div#login_wrapper{
+        border: 20px transparent white;
+        padding: 5px 20px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 450px; height: 250px;
+        margin-left: -220px;
+        margin-top: -170px;
+
+        display: flex; flex-direction:column; justify-content:center; align-items: center;
+      }
+
+    </style>
   </head>
   <body>
     <%- include('../partials/nav') %>
     <div class="container">
-
+      <div id="login_wrapper">
-      <h3 class="mb-3">Login</h3>
+        <h3 class="mb-3" id="login">Login</h3>
       <form class="user-form" action="/login" method="post">
         <div class="form-group row">
-          <label for="username" class="col-sm-3 col-form-label">Username</label>
+          <label for="username" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Username</label>
           <div class="col-sm-9">
             <input type="text" id="username" name="username" value="<%= username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>">
             <% if(errors.username){ %>
@@ -23,7 +45,7 @@
         </div>
         <div class="form-group row">
-          <label for="password" class="col-sm-3 col-form-label">Password</label>
+          <label for="password" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Password</label>
           <div class="col-sm-9">
             <input type="password" id="password" name="password" value="" class="form-control <%= (errors.password)?'is-invalid':'' %>">
             <% if(errors.password){ %>
@@ -36,12 +58,14 @@
           <div class="invalid-feedback d-block"><%= errors.login %></div>
         <% } %>
-        <div class="mt-3">
+        <div class="mt-3" style="float:right">
-          <input class="btn btn-primary" type="submit" value="Submit">
+          <input class="btn btn-outline-primary" type="submit" value="Submit">
         </div>
-
       </form>
       </div>
+      
+
+    </div>
   </body>
 </html>
\ No newline at end of file
--- a/Project/views/partials/gmap.ejs
View file @76f4ecd
+++ b/Project/views/partials/gmap.ejs
View file @76f4ecd
@@ -5,7 +5,7 @@
     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
     <style type="text/css">
       #map {
-        height: 100%;
+        height: 50%;
       }
       html,
@@ -28,6 +28,61 @@
         line-height: 30px;
         padding-left: 10px;
       }
+
+      .button-wrapper{
+        display: inline-block;
+        border: none;
+      }
+
+      .button {
+        background: #fff;
+        border: none;
+        padding: 2px;
+        cursor: pointer;
+        display: block;
+        position: relative;
+        overflow: hidden;
+        transition: all .35s ease-in-out .35s;
+          margin: 0 auto;
+          width: 120px;
+          text-align: center; 
+      }
+
+      .button:hover{
+        background: #36B4C7;
+        color: #fff;
+        transition: all .35s ease-in-out .35s;
+      }
+      .button:after {
+        bottom: -100%;
+        right: -100%;
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background: #36B4C7;
+        transition: all .35s ease-in-out .5s;
+      }
+      .button:hover:after {
+        right: 0;
+        bottom: 0;
+        transition: all ease-in-out .35s;
+      }
+      .button:before {
+        top: -100%;
+        left: -100%;
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background: #36B4C7;
+        transition: all .35s ease-in-out .5s;
+      }
+      .button:hover:before {
+        left: 0;
+        top: 0;
+        transition: all ease-in-out .35s;
+      }
     </style>
     <script>
       // initMap은 처음 map을 켰을 때 화면을 생성하는 함수.
@@ -65,9 +120,17 @@
   </head>
   <body>
     <div id="floating-panel">
-      <input id="submit" type="button" value="find location" />
+      <div class="light-button button-wrapper">
+        <input class="button" id="submit" type="button" value="Find Location"/>
+      </div>
+      
+    </div>
+    <div class="container mb-3" id="map"></div>
+
+    <!-- <div id="floating-panel">
+      <input id="submit" type="button" value="Find Location" />
     </div>
-    <div id="map"></div>
+    <div id="map" class="container mb-3"></div> -->
     <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
     <script
--- a/Project/views/partials/head.ejs
View file @76f4ecd
+++ b/Project/views/partials/head.ejs
View file @76f4ecd
@@ -10,6 +10,9 @@
 <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital@1&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Archivo&family=Gothic+A1:wght@500;600&display=swap" rel="stylesheet">
+
 <!-- my css -->
 <link rel="stylesheet" href="/css/master.css">
--- a/Project/views/partials/nav.ejs
View file @76f4ecd
+++ b/Project/views/partials/nav.ejs
View file @76f4ecd
 <!-- <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3"> -->
 <nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-3">
     <div class="container">
-      <div class="navbar-brand">Mapmory</div>
+      <div class="navbar-brand" style="font-weight: bold;">Mapmory</div>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav">
           <li class="nav-item"><a href="/" class="nav-link">Home</a></li>
-          <li class="nav-item"><a href="/about" class="nav-link">About</a></li>
+          <!-- <li class="nav-item"><a href="/about" class="nav-link">About</a></li> -->
           <li class="nav-item"><a href="/posts" class="nav-link">Memory</a></li>
         </ul>
--- a/Project/views/partials/showgmap.ejs
View file @76f4ecd
+++ b/Project/views/partials/showgmap.ejs
View file @76f4ecd
@@ -10,9 +10,11 @@
     <title>Geocoding Service</title>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
+    <link rel="stylesheet" href="/css/mouse.scss">
+
     <style type="text/css">
       #map {
-        height: 100%;
+        height: 50%;
       }
       html,
@@ -35,6 +37,61 @@
         line-height: 30px;
         padding-left: 10px;
       }
+
+      .button-wrapper{
+        display: inline-block;
+        border: none;
+      }
+
+      .button {
+        background: #fff;
+        border: none;
+        padding: 2px;
+        cursor: pointer;
+        display: block;
+        position: relative;
+        overflow: hidden;
+        transition: all .35s ease-in-out .35s;
+          margin: 0 auto;
+          width: 120px;
+          text-align: center; 
+      }
+
+      .button:hover{
+        background: #36B4C7;
+        color: #fff;
+        transition: all .35s ease-in-out .35s;
+      }
+      .button:after {
+        bottom: -100%;
+        right: -100%;
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background: #36B4C7;
+        transition: all .35s ease-in-out .5s;
+      }
+      .button:hover:after {
+        right: 0;
+        bottom: 0;
+        transition: all ease-in-out .35s;
+      }
+      .button:before {
+        top: -100%;
+        left: -100%;
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background: #36B4C7;
+        transition: all .35s ease-in-out .5s;
+      }
+      .button:hover:before {
+        left: 0;
+        top: 0;
+        transition: all ease-in-out .35s;
+      }
     </style>
     <script>
       // initMap은 처음 map을 켰을 때 화면을 생성하는 함수.
@@ -74,7 +131,10 @@
     <div id="floating-panel">
-      <input id="submit" type="button" value="find location" />
+      <div class="light-button button-wrapper">
+        <input class="button" id="submit" type="button" value="Find Location"/>
+      </div>
+      
     </div>
     <div class="container mb-3" id="map"></div>
@@ -84,5 +144,6 @@
       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDK6K4iDdo9cKQdrNoOJaaYg29nEG0BIjw&callback=initMap&libraries=&v=weekly"
       async
     ></script>
+
   </body>
 </html>
\ No newline at end of file
--- a/Project/views/posts/edit.ejs
View file @76f4ecd
+++ b/Project/views/posts/edit.ejs
View file @76f4ecd
@@ -5,6 +5,7 @@
   </head>
   <body>
     <%- include('../partials/nav') %>
+    <%- include('../partials/gmap') %> 
     <div class="container mb-3">
@@ -36,7 +37,7 @@
         </div>
         <div class="form-group">
-          <label for="body">Body</label>
+          <label for="body">Content</label>
             <textarea id="body" name="body" rows="5" class="form-control <%= (errors.body)?'is-invalid':''%>"><%= post.body %></textarea>
             <% if(errors.body){ %>
               <span class="invalid-feedback"><%= errors.body.message %></span>
@@ -49,14 +50,14 @@
           </div>
         <% } %>
-        <div>
+        <div style="float:right">
-          <a class="btn btn-primary" href="/posts/<%= post._id %>">Back</a>
+          <a class="btn btn-outline-secondary" href="/posts/<%= post._id %>">Back</a>
-          <button type="submit" class="btn btn-primary">Submit</button>
+          <button type="submit" class="btn btn-outline-primary">Submit</button>
         </div>
       </form>
     </div>
-    <%- include('../partials/gmap') %> 
+    
   </body>
 </html>
\ No newline at end of file
--- a/Project/views/posts/index.ejs
View file @76f4ecd
+++ b/Project/views/posts/index.ejs
View file @76f4ecd
@@ -2,18 +2,25 @@
 <html>
   <head>
     <%- include('../partials/head') %>
+   
   </head>
   <body>
     <%- include('../partials/nav') %>
     <div class="container mb-3">
+      <div>
+        <h2 class="mb-3" style="font-weight: bold; font-style:italic; float:left;">Memory</h2>
-      <h2 class="mb-3">Board</h2>
+        <div style="float:right">
-
+          <% if(isAuthenticated){ %>
-      <table class="board-table table table-sm border-bottom">
+            <a class="btn btn-outline-primary" href="/posts/new">Write Memory</a>
+          <% } %>
+        </div>
-        <thead class="thead-light">
+        <!-- <table class="board-table table table-sm border-bottom"> -->
-          <tr>
+        <table class="table table-hover table-light">
+          <thead>
+            <tr class="table-dark">
               <th scope="col">Title</th>
               <th scope="col" class="author">Author</th>
               <th scope="col" class="date">Date</th>
@@ -29,7 +36,7 @@
             <% posts.forEach(function(post) { %>
               <tr>
                 <td>
-                <a href="/posts/<%= post._id %>"><div class="ellipsis"><%= post.title %></div></a>
+                  <a href="/posts/<%= post._id %>" style="color:black; font-weight: bold;"><div class="ellipsis"><%= post.title %></div></a>
                 </td>
                 <td class="author">
                   <div class="ellipsis"><%= post.author ? post.author.username : "" %></div>
@@ -43,12 +50,12 @@
         </table>
-      <div>
-        <% if(isAuthenticated){ %>
-          <a class="btn btn-primary" href="/posts/new">New</a>
-        <% } %>
       </div>
+     
+
+
+
     </div>
   </body>
 </html>
\ No newline at end of file
--- a/Project/views/posts/new.ejs
View file @76f4ecd
+++ b/Project/views/posts/new.ejs
View file @76f4ecd
@@ -5,6 +5,7 @@
   </head>
   <body>
     <%- include('../partials/nav') %>
+    <%- include('../partials/gmap') %>  
     <div class="container mb-3">
@@ -19,7 +20,7 @@
       <form action="/posts" method="post">
         <div class="form-group">
-          <label for="title">Title</label>
+          <label for="title" style="font-weight:bold">Title</label>
           <input type="text" id="title" name="title" value="<%= post.title %>" class="form-control <%= (errors.title)?'is-invalid':'' %>">
           <% if(errors.title){ %>
             <span class="invalid-feedback"><%= errors.title.message %></span>
@@ -27,7 +28,7 @@
         </div>
         <div class="form-group">
-          <label for="address">address</label>
+          <label for="address" style="font-weight:bold">Address</label>
           <input type="text" id="address" name="address" value="<%= post.address %>" class="form-control <%= (errors.address)?'is-invalid':'' %>">
           <% if(errors.address){ %>
             <span class="invalid-feedback"><%= errors.address.message %></span>
@@ -35,6 +36,7 @@
         </div>
         <div class="form-group">
+          <label for="body" style="font-weight:bold">Content</label>
           <textarea id="body" name="body" rows="5" class="form-control <%= (errors.body)?'is-invalid':''%>"><%= post.body %></textarea>
             <% if(errors.body){ %>
               <span class="invalid-feedback"><%= errors.body.message %></span>
@@ -47,13 +49,13 @@
           </div>
         <% } %>
-        <div>
+        <div style="float:right">
-          <a class="btn btn-primary" href="/posts">Back</a>
+          <a class="btn btn-outline-secondary" href="/posts">Back</a>
-          <button type="submit" class="btn btn-primary">Submit</button>
+          <button type="submit" class="btn btn-outline-primary">Submit</button>
         </div>
       </form>
     </div>
-    <%- include('../partials/gmap') %>  
+  
   </body>
 </html>
\ No newline at end of file
--- a/Project/views/posts/show.ejs
View file @76f4ecd
+++ b/Project/views/posts/show.ejs
View file @76f4ecd
@@ -13,16 +13,16 @@
         <ol class="breadcrumb p-1 pl-2 pr-2">
           <li class="breadcrumb-item"><a href="/">Home</a></li>
           <li class="breadcrumb-item"><a href="/posts">Board</a></li>
-          <li class="breadcrumb-item active" aria-current="page"><%= post.address %></li>
+          <li class="breadcrumb-item active" aria-current="page"><%= post.title %></li>
         </ol>
       </nav>
       <div class="card">
-        <h5 class="card-header p-2"><%= post.title %></h5>
+        <h5 class="card-header p-2" style="font-weight: bold; font-family: 'Archivo', sans-serif;"><%= post.title %></h5>
         <div class="row"> <!-- 1 -->
           <div class="col-md-7 col-lg-8 col-xl-9 order-sm-2 order-md-1"> <!-- 1 -->
-            <div class="post-body p-2"><%= post.body %></div>
+            <div class="post-body p-2" style="font-family: 'Archivo', sans-serif;"><%= post.body %></div>
           </div>
           <div class="col-md-5 col-lg-4 col-xl-3 order-sm-1 order-md-2"> <!-- 1 -->
@@ -40,12 +40,12 @@
         </div>
       </div>
-      <div class="mt-3">
+      <div class="mt-3" style="float:right">
-        <a class="btn btn-primary" href="/posts">Back</a>
+        <a class="btn btn-outline-secondary" href="/posts">Back</a>
         <% if(isAuthenticated && post.author && currentUser.id == post.author.id){ %> <!-- 1 -->
-          <a class="btn btn-primary" href="/posts/<%= post._id %>/edit">Edit</a>
+          <a class="btn btn-outline-primary" href="/posts/<%= post._id %>/edit">Edit</a>
           <form action="/posts/<%= post._id %>?_method=delete" method="post" class="d-inline">
-          <a class="btn btn-primary" href="javascript:void(0)" onclick="confirm('Do you want to delete this?')?this.parentElement.submit():null;">Delete</a>
+          <a class="btn btn-outline-primary" href="javascript:void(0)" onclick="confirm('Do you want to delete this?')?this.parentElement.submit():null;">Delete</a>
         </form>
         <% } %>
       </div>
--- a/Project/views/users/edit.ejs
View file @76f4ecd
+++ b/Project/views/users/edit.ejs
View file @76f4ecd
@@ -2,18 +2,40 @@
 <html>
   <head>
     <%- include('../partials/head') %>
+    <style>
+      #edit {
+        font-family: 'Archivo', sans-serif;
+        /* font-family: 'PT Serif', serif; */
+        font-size:3rem;
+        font-weight: bold;
+        margin-bottom: 20px;
+      }
+
+      div#edit_wrapper{
+        border: 20px transparent white;
+        padding: 5px 20px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 450px; height: 250px;
+        margin-left: -220px;
+        margin-top: -170px;
+
+        display: flex; flex-direction:column; justify-content:center; align-items: center;
+      }
+    </style>
   </head>
   <body>
     <%- include('../partials/nav') %>
     <div class="container mb-3">
-
+      <div id="edit_wrapper">
-      <h3 class="mb-3">Edit User</h3>
+        <h3 class="mb-3" id="edit">Edit User</h3>
         <form action="/users/<%= username %>?_method=put" method="post"> <!-- 1 -->
           <div class="form-group row">
-          <label for="currentPassword" class="col-sm-3 col-form-label">Current Password*</label>
+            <label for="currentPassword" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Current Password*</label>
             <div class="col-sm-9 col-sm-offset-3">
               <input type="password" id="currentPassword" name="currentPassword" value="" class="form-control <%= (errors.currentPassword)?'is-invalid':'' %>"> <!-- 2 -->
               <% if(errors.currentPassword){ %> <!-- 3 -->
@@ -25,7 +47,7 @@
           <hr></hr>
           <div class="form-group row">
-          <label for="username" class="col-sm-3 col-form-label">Username*</label>
+            <label for="username" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Username*</label>
             <div class="col-sm-9">
               <input type="text" id="username" name="username" value="<%= user.username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>"> <!-- 2 -->
               <% if(errors.username){ %> <!-- 3 -->
@@ -35,7 +57,7 @@
           </div>
           <div class="form-group row">
-          <label for="name" class="col-sm-3 col-form-label">Name*</label>
+            <label for="name" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Name*</label>
             <div class="col-sm-9">
               <input type="text" id="name" name="name" value="<%= user.name %>" class="form-control <%= (errors.name)?'is-invalid':'' %>"> <!-- 2 -->
               <% if(errors.name){ %> <!-- 3 -->
@@ -45,7 +67,7 @@
           </div>
           <div class="form-group row">
-          <label for="email" class="col-sm-3 col-form-label">Email</label>
+            <label for="email" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Email</label>
             <div class="col-sm-9">
               <input type="text" id="email" name="email" value="<%= user.email %>" class="form-control <%= (errors.email)?'is-invalid':'' %>"> <!-- 2 -->
               <% if(errors.email){ %> <!-- 3 -->
@@ -55,7 +77,7 @@
           </div>
           <div class="form-group row">
-          <label for="newPassword" class="col-sm-3 col-form-label">New Password</label>
+            <label for="newPassword" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">New Password</label>
             <div class="col-sm-9 col-sm-offset-3">
               <input type="password" id="newPassword" name="newPassword" value="" class="form-control <%= (errors.newPassword)?'is-invalid':'' %>"> <!-- 2 -->
               <% if(errors.newPassword){ %> <!-- 3 -->
@@ -65,7 +87,7 @@
           </div>
           <div class="form-group row">
-          <label for="passwordConfirmation" class="col-sm-3 col-form-label">Password Confirmation</label>
+            <label for="passwordConfirmation" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Password Confirmation</label>
             <div class="col-sm-9 col-sm-offset-3">
               <input type="password" id="passwordConfirmation" name="passwordConfirmation" value="" class="form-control <%= (errors.passwordConfirmation)?'is-invalid':'' %>"> <!-- 2 -->
               <% if(errors.passwordConfirmation){ %> <!-- 3 -->
@@ -75,12 +97,12 @@
           </div>
           <p>
-          <small>*Required</small>
+            <small style="font-family: 'Archivo', sans-serif; color:red">*Required</small>
           </p>
-        <div class="buttons">
+          <div class="buttons" style="float:right; font-weight: bold; font-family: 'Archivo', sans-serif;">
-          <a class="btn btn-primary" href="/users/<%= user.username %>">Back</a>
+            <a class="btn btn-outline-secondary" href="/users/<%= user.username %>">Back</a>
-          <button type="submit" class="btn btn-primary">Submit</button>
+            <button type="submit" class="btn btn-outline-primary">Submit</button>
           </div>
           <% if(errors.unhandled){ %> <!-- 4 -->
@@ -91,6 +113,9 @@
         </form>
+      </div>
+
+      
     </div>
   </body>
--- a/Project/views/users/new.ejs
View file @76f4ecd
+++ b/Project/views/users/new.ejs
View file @76f4ecd
@@ -2,18 +2,40 @@
 <html>
   <head>
     <%- include('../partials/head') %>
+    <style>
+      #new {
+        font-family: 'Archivo', sans-serif;
+        /* font-family: 'PT Serif', serif; */
+        font-size:3rem;
+        font-weight: bold;
+        margin-bottom: 20px;
+      }
+
+      div#signup_wrapper{
+        border: 20px transparent white;
+        padding: 5px 20px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 450px; height: 250px;
+        margin-left: -220px;
+        margin-top: -170px;
+
+        display: flex; flex-direction:column; justify-content:center; align-items: center;
+      }
+    </style>
   </head>
   <body>
     <%- include('../partials/nav') %>
     <div class="container mb-3">
-
+      <div id="signup_wrapper">
-      <h3 class="contentBoxTop mb-3">New User</h3>
+        <h3 class="contentBoxTop mb-3" id="new">New User</h3>
         <form action="/users" method="post">
           <div class="form-group row">
-          <label for="username" class="col-sm-3 col-form-label">Username*</label>
+            <label for="username" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Username*</label>
             <div class="col-sm-9">
               <input type="text" id="username" name="username" value="<%= user.username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>"> <!-- 1, 2 -->
               <% if(errors.username){ %> <!-- 3 -->
@@ -22,7 +44,7 @@
             </div>
           </div>
           <div class="form-group row">
-          <label for="name" class="col-sm-3 col-form-label">Name*</label>
+            <label for="name" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Name*</label>
             <div class="col-sm-9">
               <input type="text" id="name" name="name" value="<%= user.name %>" class="form-control <%= (errors.name)?'is-invalid':'' %>"> <!-- 1, 2 -->
               <% if(errors.name){ %> <!-- 3 -->
@@ -31,7 +53,7 @@
             </div>
           </div>
           <div class="form-group row">
-          <label for="email" class="col-sm-3 col-form-label">Email</label>
+            <label for="email" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Email</label>
             <div class="col-sm-9">
               <input type="text" id="email" name="email" value="<%= user.email %>" class="form-control <%= (errors.email)?'is-invalid':'' %>"> <!-- 1, 2 -->
               <% if(errors.email){ %>
@@ -40,7 +62,7 @@
             </div>
           </div>
           <div class="form-group row">
-          <label for="password" class="col-sm-3 col-form-label">Password*</label>
+            <label for="password" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Password*</label>
             <div class="col-sm-9">
               <input type="password" id="password" name="password" value="" class="form-control <%= (errors.password)?'is-invalid':'' %>"> <!-- 1, 2 -->
               <% if(errors.password){ %> <!-- 3 -->
@@ -49,7 +71,7 @@
             </div>
           </div>
           <div class="form-group row">
-          <label for="passwordConfirmation" class="col-sm-3 col-form-label">Password Confirmation*</label>
+            <label for="passwordConfirmation" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Password Confirmation*</label>
             <div class="col-sm-9 col-sm-offset-3">
               <input type="password" id="passwordConfirmation" name="passwordConfirmation" value="" class="form-control <%= (errors.passwordConfirmation)?'is-invalid':'' %>"> <!-- 1, 2 -->
               <% if(errors.passwordConfirmation){ %> <!-- 3 -->
@@ -58,7 +80,7 @@
             </div>
           </div>
           <p>
-          <small>*Required</small>
+            <small style="font-family: 'Archivo', sans-serif; color:red;">*Required</small>
           </p>
           <% if(errors.unhandled){ %> <!-- 4 -->
@@ -67,10 +89,13 @@
             </div>
           <% } %>
-        <div class="form-group">
+          <div class="form-group" style="float:right">
-          <button type="submit" class="btn btn-primary">Submit</button>
+            <button type="submit" class="btn btn-outline-primary">Submit</button>
           </div>
         </form>
+      </div>
+
+      
     </div>
   </body>
--- a/Project/views/users/show.ejs
View file @76f4ecd
+++ b/Project/views/users/show.ejs
View file @76f4ecd
@@ -2,24 +2,46 @@
 <html>
   <head>
     <%- include('../partials/head') %>
+    <style>
+      #show {
+        font-family: 'Archivo', sans-serif;
+        /* font-family: 'PT Serif', serif; */
+        font-size:3rem;
+        font-weight: bold;
+        margin-bottom: 20px;
+      }
+
+      div#show_wrapper{
+        border: 20px transparent white;
+        padding: 5px 20px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 450px; height: 250px;
+        margin-left: -220px;
+        margin-top: -170px;
+
+        display: flex; flex-direction:column; justify-content:center; align-items: center;
+      }
+    </style>
   </head>
   <body>
     <%- include('../partials/nav') %>
     <div class="container mb-3">
-
+      <div id="show_wrapper">
-      <h3 class="contentBoxTop"><%= user.username %></h3>
+        <h3 class="contentBoxTop" id="show"><%= user.username %></h3>
         <form class="user-form" action="/users" method="post">
           <fieldset disabled>
             <div class="form-group row">
-            <label for="name" class="col-sm-3 col-form-label">Name</label>
+              <label for="name" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Name</label>
               <div class="col-sm-9">
                 <input class="form-control" type="text" id="name" name="name" value="<%= user.name %>">
               </div>
             </div>
             <div class="form-group row">
-            <label for="email" class="col-sm-3 col-form-label">Email</label>
+              <label for="email" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Email</label>
               <div class="col-sm-9">
                 <input class="form-control" type="text" id="email" name="email" value="<%= user.email %>">
               </div>
@@ -28,14 +50,17 @@
         </form>
         <div>
-        <a class="btn btn-primary" href="/users">Back</a>
+          <a class="btn btn-outline-secondary" href="/">Back</a>
           <% if(isAuthenticated && currentUser.id == user.id){ %>
-        <a class="btn btn-primary" href="/users/<%= user.username %>/edit">Edit</a>
+          <a class="btn btn-outline-primary" href="/users/<%= user.username %>/edit">Edit</a>
           <% } %>
           <form action="/users/<%= user.username %>?_method=delete" method="post" class="d-inline">
-          <a class="btn btn-primary" href="javascript:void(0)" onclick="confirm('Do you want to delete this?')?this.parentElement.submit():null;">Delete</a>
+            <a class="btn btn-outline-primary" href="javascript:void(0)" onclick="confirm('Do you want to delete this?')?this.parentElement.submit():null;">Delete</a>
           </form>
         </div>
+      </div>
+
+      
     </div>
   </body>