modified the main front page with css

simran1199 · Jun 21, 2020 · c01c1ef · c01c1ef
1 parent e9eec66
commit c01c1ef
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 38 deletions.
diff --git a/frontend-js/modules/search.js b/frontend-js/modules/search.js
@@ -48,7 +48,7 @@ export default class Search {
   }
 
   sendRequest() {
-    axios.post('/search', {_csrf: this.csrf,searchTerm: this.inputField.value}).then(response => {
+    axios.post('/search', {_csrf: this._csrf,searchTerm: this.inputField.value}).then(response => {
       console.log(response.data)
       this.renderResultsHTML(response.data)
     }).catch(() => {

diff --git a/...3e5f91fc9d618cc7093df5ccc6169c34240b5ece703ef568a53838292cbbbcf6f8bd88da10b1e46e7a0eb6ad6 b/...3e5f91fc9d618cc7093df5ccc6169c34240b5ece703ef568a53838292cbbbcf6f8bd88da10b1e46e7a0eb6ad6
diff --git a/...ebpack-plugin/index-v5/2b/56/ce419404f3d26e9167f6416d6c440cde793158865d0969ba319bd0d4db4c b/...ebpack-plugin/index-v5/2b/56/ce419404f3d26e9167f6416d6c440cde793158865d0969ba319bd0d4db4c
diff --git a/public/main-bundled.js b/public/main-bundled.js
diff --git a/public/main.css b/public/main.css
@@ -3,6 +3,10 @@ body, .tooltip
   font-family: 'Open Sans', sans-serif;
 }
 
+body{
+  background-color:#dee2e6;
+}
+
 .header-bar {
   background-color: #292929;
 }
@@ -366,4 +370,86 @@ textarea.tall-textarea {
   border: none;
   outline: none;
   font-size: .75rem;
-}
+}
+
+
+
+
+#landing-header {
+  z-index: 1;
+  position: relative;
+  text-align: center;
+  padding-top: 40vh;
+}
+
+#landing-header h1 {
+  color: #fff;
+}
+
+.slideshow { 
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  list-style: none;
+  margin-top: 0;
+	padding: 0;}
+
+.slideshow li { 
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-size: cover;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  opacity: 0;
+  z-index: 0;
+  animation: imageAnimation 50s linear infinite; 
+}
+
+.slideshow li:nth-child(1) { 
+  background-image: url(http://i.imgur.com/K3mPv14.jpg) 
+}
+.slideshow li:nth-child(2) { 
+  background-image: url(http://i.imgur.com/SBEmFpv.jpg);
+  animation-delay: 10s; 
+}
+.slideshow li:nth-child(3) { 
+  background-image: url(http://i.imgur.com/emvhOnb.jpg);
+  animation-delay: 20s; 
+}
+.slideshow li:nth-child(4) { 
+  background-image: url(http://i.imgur.com/2LSMCmJ.jpg);
+  animation-delay: 30s; 
+}
+.slideshow li:nth-child(5) { 
+  background-image: url(http://i.imgur.com/TVGe0Ef.jpg);
+  animation-delay: 40s; 
+}
+
+@keyframes imageAnimation { 
+  0% { 
+    opacity: 0; 
+    animation-timing-function: ease-in;
+  }
+  10% {
+    opacity: 1;
+    animation-timing-function: ease-out;
+  }
+  20% {
+    opacity: 1
+  }
+  30% {
+    opacity: 0
+  }
+}
+
+/* Older browser support - .no-cssanimations class added by modernizr */
+.no-cssanimations .slideshow li {
+	opacity: 1;
+}
+
diff --git a/views/404.ejs b/views/404.ejs
@@ -4,7 +4,7 @@
 
 <div class="container py-md-5 container--narrow">
     <div class="text-center">
-      <h2>Whoops, we cannot find that page.</h2>
+      <h2>Whoops, we cannot find that page but all those who get 404 are not Lost!!</h2>
       <p class="lead text-muted">You can always visit the <a href="/">homepage</a> to get a fresh start.</p>
     </div> 
   </div>

diff --git a/views/home-guest.ejs b/views/home-guest.ejs
@@ -1,13 +1,46 @@
-<%- include("includes/header")%>
-
-<div class="container py-md-5">
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title><%=typeof(title)== "undefined" ? 'NomadicLusts' : `${title} | NomadicLusts` %></title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+  <script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" integrity="sha384-GqVMZRt5Gn7tB9D9q7ONtcp4gtHIUEW/yG7h98J7IpE3kpi+srfFyyB/04OV6pG0" crossorigin="anonymous"></script>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i" rel="stylesheet">
+  <link rel="stylesheet" href="/main.css">
+</head>
+<body style="background-color:#000;">
 
+<div class="container py-md-5" id="landing-header">
+  <header class="header-bar mb-3";>
+    <div class="container d-flex flex-column flex-md-row align-items-center p-3">
+      <h4 class="my-0 mr-md-auto font-weight-normal"><a href="/" class="text-white">NomadicLusts</a></h4>
+      <form action="/login" method="POST" class="mb-0 pt-2 pt-md-0">
+        <div class="row align-items-center">
+          <div class="col-md mr-0 pr-md-0 mb-3 mb-md-0">
+            <input name="username" class="form-control form-control-sm input-dark" type="text" placeholder="Username" autocomplete="off">
+          </div>
+          <div class="col-md mr-0 pr-md-0 mb-3 mb-md-0">
+            <input name="password" class="form-control form-control-sm input-dark" type="password" placeholder="Password">
+          </div>
+          <div class="col-md-auto">
+            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
+            <button class="btn btn-primary btn-sm">Sign In</button>
+          </div>
+        </div>
+      </form>      
+  <!-- header ends here -->  
+    </div>
+  </header>
   <%- include("includes/flash")%>
 
   <div class="row align-items-center">
     <div class="col-lg-7 py-3 py-md-5">
-      <h1 class="display-3">Remember Writing?</h1>      
-      <p class="lead text-muted">Are you sick of short tweets and impersonal &ldquo;shared&rdquo; posts that are reminiscent of the late 90&rsquo;s email forwards? We believe getting back to actually writing is the key to enjoying the internet again.</p>
+      <h1 class="display-3"><strong>Go See Write!!</strong></h1>      
+      <p class="lead text-muted "><strong>&ldquo;The World is a Book and those who do not travel read only pages.&rdquo;</strong></p>
+      <P class="lead text-muted">Do you love to Travel, mishap and adventure in this beautiful and bizarre world? Then let&rsquo;s explore these mesmerizingly beautiful 
+      destinations from all over the world!</p>
     </div>
     <div class="col-lg-5 pl-lg-5 pb-3 py-lg-5">
       <form action="/register" method="POST" id="registration-form">
@@ -18,7 +51,7 @@
 
           <div class="form-group">
             <label for="username-register" class="text-muted mb-1"><small>Username</small></label>
-            <input name="username" id="username-register" class="form-control" type="text" placeholder="Pick a username" autocomplete="off">
+            <input name="username" id="username-register" class="form-control " type="text" placeholder="Pick a username" autocomplete="off">
           </div>
 
           <div class="form-group">
@@ -30,14 +63,20 @@
             <label for="password-register" class="text-muted mb-1"><small>Password</small></label>
             <input name="password" id="password-register" class="form-control" type="password" placeholder="Create a password">
           </div>
-
-          <button type="submit" class="py-3 mt-4 btn btn-lg btn-success btn-block">Sign up for OurApp</button>
+          <input type="hidden" name="_csrf" value="<%= csrfToken %>">
+          <button type="submit" class="py-3 mt-4 btn btn-lg btn-success btn-block">Sign up for NomadicLusts</button>
 
         </form>
       </div>
     </div>
   </div>
-
+  <ul class="slideshow">
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+    </ul>
 <!-- footer begins -->
 
 <%- include("includes/footer")%>
diff --git a/views/includes/footer.ejs b/views/includes/footer.ejs
@@ -1,5 +1,5 @@
 <footer class="border-top text-center small text-muted py-3">
-  <p class="m-0">Copyright &copy; 2019 <a href="/" class="text-muted">OurApp</a>. All rights reserved.</p>
+  <p class="m-0">Copyright &copy; 2020 <a href="/" class="text-muted">NomadicLusts</a>. All rights reserved.</p>
 </footer>
 
 <%if (user){%>

diff --git a/views/includes/header.ejs b/views/includes/header.ejs
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title><%=typeof(title)== "undefined" ? 'OurApp' : `${title} | OurApp` %></title>
+  <title><%=typeof(title)== "undefined" ? 'NomadicLusts' : `${title} | NomadicLusts` %></title>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
   <script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" integrity="sha384-GqVMZRt5Gn7tB9D9q7ONtcp4gtHIUEW/yG7h98J7IpE3kpi+srfFyyB/04OV6pG0" crossorigin="anonymous"></script>
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i" rel="stylesheet">
@@ -13,7 +13,7 @@
 <body>
   <header class="header-bar mb-3";>
     <div class="container d-flex flex-column flex-md-row align-items-center p-3">
-      <h4 class="my-0 mr-md-auto font-weight-normal"><a href="/" class="text-white">OurApp</a></h4>
+      <h4 class="my-0 mr-md-auto font-weight-normal"><a href="/" class="text-white">NomadicLusts</a></h4>
 
     <% if(user){%>
         
@@ -25,27 +25,9 @@
         <form action="/logout" method="POST" class="d-inline">
           <input type="hidden" name="_csrf" value="<%= csrfToken %>">
           <button class="btn btn-sm btn-secondary">Sign Out</button>
-        </form>
-      </div>    
-
+        </form>  
 
    <% }else{ %>
-        <!doctype html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>OurApp</title>
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-  <script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" integrity="sha384-GqVMZRt5Gn7tB9D9q7ONtcp4gtHIUEW/yG7h98J7IpE3kpi+srfFyyB/04OV6pG0" crossorigin="anonymous"></script>
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i" rel="stylesheet">
-  <link rel="stylesheet" href="/main.css">
-</head>
-<body>
-  <header class="header-bar mb-3";>
-    <div class="container d-flex flex-column flex-md-row align-items-center p-3">
-      
       <form action="/login" method="POST" class="mb-0 pt-2 pt-md-0">
         <div class="row align-items-center">
           <div class="col-md mr-0 pr-md-0 mb-3 mb-md-0">
@@ -60,9 +42,7 @@
           </div>
         </div>
       </form>      
-    </div>
-  </header>
-<!-- header ends here -->
+  <!-- header ends here -->
    <% }%>