Merge pull request #56 from gauravtomar7/working

improved ui
Kritika30032002 · Oct 14, 2023 · 89167ba · 89167ba
2 parents e41acaf + 35f7f3c
commit 89167ba
Show file tree

Hide file tree

Showing 7 changed files with 274 additions and 31 deletions.
diff --git a/app.js b/app.js
@@ -31,8 +31,7 @@ app.use(session({
 
 app.use(passport.initialize());
 app.use(passport.session());
-
-mongoose.connect("mongodb://localhost:27017/userDB");
+mongoose.connect("mongodb://127.0.0.1:27017/userDB");
 
 const userSchema = new mongoose.Schema({
   email:String,

diff --git a/public/css/styles.css b/public/css/styles.css
@@ -9,6 +9,8 @@ html {
   text-align: center;
 }
 
+
+
 .form-inline a {
   transition: 0.3s;
 }
@@ -38,15 +40,16 @@ html {
 .container-about {
   display: flex;
   flex-direction: row;
-  margin-bottom: 197px;
-  margin-top: 197px;
+  margin-bottom: 100px;
+  margin-top: -33px;
   /* flex-direction: row; */
   justify-content: center;
   align-items: center;
 }
 .container-image {
-  min-width: 300px;
-  max-width: 600px;
+  min-width: 450px;
+  max-width: 500px;
+  margin-right: 1%;
 }
 
 #myBtn {

diff --git a/views/about.ejs b/views/about.ejs
@@ -1,5 +1,147 @@
-<%- include('partials/header') %>
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <title>Secrets</title>
+    <link rel="icon" type="image/x-icon" href="image/key.ico" />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
+      integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
+      integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="css/bootstrap-social.css" />
+    <link rel="stylesheet" href="css/styles.css" />
+  </head>
+
+  <body style="background-image: url('https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg'); background-size: 100%;">
+    <nav class="navbar navbar-dark bg-dark justify-content-between" id="navbar">
+      <a
+        href="/"
+        class="navbar-brand"
+        style="color: white; cursor: pointer; margin-left: 1em"
+      >
+        <i class="fas fa-key fa-1.5x logo" style="color: white"></i>
+        Secrets</a
+      >
+      <form class="form-inline">
+        <a
+          href="/"
+          class="btn my-2 my-sm-0 home"
+          type="submit"
+          style="
+            color: black;
+            border: none;
+            background-color: white;
+            margin-right: 1em;
+          "
+        >
+          Home
+        </a>
+        <a
+          href="/about"
+          class="btn my-2 my-sm-0 about"
+          type="submit"
+          style="
+            color: black;
+            border: none;
+            background-color: white;
+            margin-right: 1em;
+          "
+        >
+          About
+        </a>
+        <a
+          href="/register"
+          class="btn my-1 my-sm-0 register"
+          type="submit"
+          style="
+            color: black;
+            border: none;
+            background-color: white;
+            margin-right: 1em;
+          "
+        >
+          Register
+        </a>
+        <a
+          href="/login"
+          class="btn my-2 my-sm-0 login"
+          type="submit"
+          style="
+            color: black;
+            border: none;
+            background-color: white;
+            margin-right: 1em;
+          "
+        >
+          Login
+        </a>
+      </form>
+    </nav>
+  </body>
+</html>
+
+
+
+<h1 style="text-align:center;padding: -1%; margin: 3%;margin-left: -23%; padding: 3% 30% -90% 3%; font-size: 90px; letter-spacing: 0.01em; font: 129.395px itc-bodoni-175,serif; font-style:italic; color:black";background-size:107.395px>About Secrets</h1>
+
+
+
+
+<!-- <p style="font-size: 1.5rem; padding: 95px; margin-top: -60px;" class="paragraph">
+  Secrets is the place where everyone can add their secrets.<br/> It is created
+  with an idea of having a fun space where people <br/>could share their secrets,
+  without revealing their true identity.<br/> It makes more intresting to know that other dont want to share it <br/>but still are sharing. Thus, share your secrets and we will
+  store them for you, <br/>without revealing your identity, making things
+  interesting.
+</p> -->
+
+<!-- <div class="container-image"> -->
+  <!-- <img src="image/secrets.jpg" alt="" style="width: 18%; padding: 2% ;margin-left:900px; margin-bottom: -200px; " /> -->
+<!-- </div> -->
+
+
 <div class="container-about">
+  <div class="container-text" style="padding: -3% 6% 6% 20%">
+
+    <p style="font-size: 1.5rem;margin-left: 11%;" class="paragraph">
+      Secrets is the place where everyone can add their secrets.It is created
+      with an idea of having a fun space where people could share their secrets,
+      without revealing their true identity. It makes more intresting to know that other dont want to share it but still are sharing. Thus, share your secrets and we will
+      store them for you, without revealing your identity, making things
+      interesting.
+    </p>
+  </div>
+  <div class="container-image">
+    <img src="image/secrets.webp" alt="" style="width: 100%; padding: 2%" />
+  </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<!-- <div  class="container-about">
   <div class="container-text" style="padding: 0 3% 0 3%">
     <h1>About</h1>
     <p style="font-size: 1.5rem" class="paragraph">
@@ -13,7 +155,7 @@
   <div class="container-image">
     <img src="image/secrets.webp" alt="" style="width: 100%; padding: 2%" />
   </div>
-</div>
+</div> -->
 <a href="#navbar" id="myBtn" title="Go to top">
   <img
     src="https://img.icons8.com/ios-filled/50/000000/long-arrow-up.png"

diff --git a/views/home.ejs b/views/home.ejs
@@ -1,6 +1,9 @@
 <%- include('partials/header') %>
 
-  <div class="jumbotron centered">
+  <div style="background: #74ebd5;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to right, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+" class="jumbotron centered">
     <div class="container">
       <i class="fas fa-key fa-6x"></i>
       <h1 class="display-3">Secrets</h1>
@@ -14,7 +17,7 @@
   </div>
   <a href="#navbar" id="myBtn" title="Go to top">
     <img src="https://img.icons8.com/ios-filled/50/000000/long-arrow-up.png"
-      style="width: 70%; height: 70%; color: white; position: relative; left: 7px" />
+      style="width: 60%; height: 70%; color: white; position: relative; left: 7px" />
   </a>
 
   <%- include('partials/footer') %>
diff --git a/views/login.ejs b/views/login.ejs
@@ -1,4 +1,96 @@
-<%- include('partials/header') %>
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <title>Secrets</title>
+    <link rel="icon" type="image/x-icon" href="image/key.ico" />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
+      integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
+      integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="css/bootstrap-social.css" />
+    <link rel="stylesheet" href="css/styles.css" />
+  </head>
+
+  <body style="background: #ADA996;  /* fallback for old browsers */
+  background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);  /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  ">
+    <nav class="navbar navbar-dark bg-dark justify-content-between" id="navbar">
+      <a
+        href="/"
+        class="navbar-brand"
+        style="color: white; cursor: pointer; margin-left: 1em"
+      >
+        <i class="fas fa-key fa-1.5x logo" style="color: white"></i>
+        Secrets</a
+      >
+      <form class="form-inline">
+        <a
+          href="/"
+          class="btn my-2 my-sm-0 home"
+          type="submit"
+          style="
+            color: black;
+            border: none;
+            background-color: white;
+            margin-right: 1em;
+          "
+        >
+          Home
+        </a>
+        <a
+          href="/about"
+          class="btn my-2 my-sm-0 about"
+          type="submit"
+          style="
+            color: black;
+            border: none;
+            background-color: white;
+            margin-right: 1em;
+          "
+        >
+          About
+        </a>
+        <a
+          href="/register"
+          class="btn my-1 my-sm-0 register"
+          type="submit"
+          style="
+            color: black;
+            border: none;
+            background-color: white;
+            margin-right: 1em;
+          "
+        >
+          Register
+        </a>
+        <a
+          href="/login"
+          class="btn my-2 my-sm-0 login"
+          type="submit"
+          style="
+            color: black;
+            border: none;
+            background-color: white;
+            margin-right: 1em;
+          "
+        >
+          Login
+        </a>
+      </form>
+    </nav>
+  </body>
+</html>
+
 
   <div class="container mt-5" style="margin-bottom: 197px">
     <h1>Login</h1>

diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
@@ -1,24 +1,25 @@
 <div class="bg-dark text-center" style="padding: 1em 0 1em 0;">
 
-    <h5 class="card-title" style="color: white;">Share your secrets, anonymously!</h5>
-    <h6 class="card-title" style="color: white;">&copy; Copyright 2022</h6>
-    <p class="card-text" style="color: white;">Made by <a href="https://github.com/Kritika30032002"
-            style="text-decoration: none;color: white;"> Kritika Gupta </a></p>
-    <!-- <p class="card-text" style="color: white;">&copy; Copyright 2022 </p> -->
-    <!-- <div style="padding-bottom: 5em;">     -->
-    <a href="https://www.linkedin.com/in/kritika-gupta-343458212" class="btn my-2 my-sm-0 social" type="submit" style="
-        border: none;
-        margin-right: 1em;
-      ">
-        <img src="https://img.icons8.com/fluency/48/000000/linkedin.png" height="50px" width="50px" />
-    </a>
-    <a href="https://github.com/Kritika30032002" class="btn my-2 my-sm-0 social" type="submit" style="
-        border: none;
-        margin-right: 1em;
-      "> <img src="https://img.icons8.com/fluency/48/000000/github.png" height="50px" width="50px" />
-    </a>
+  <h5 class="card-title"  style="color: white;">Share your secrets, anonymously!</h5>
+  <h6 class="card-title" style="color: white; ">&copy; Copyright 2022</h6>
+  <p class="card-text" style="color: white;">Made by <a href="https://github.com/Kritika30032002"
+          style="text-decoration: none;color: white;"> Kritika Gupta </a></p>
+  <!-- <p class="card-text" style="color: white;">&copy; Copyright 2022 </p> -->
+  <!-- <div style="padding-bottom: 5em;">     -->
+  <a href="https://www.linkedin.com/in/kritika-gupta-343458212" class="btn my-2 my-sm-0 social" type="submit" style="
+      border: none;
+      margin-right: 1em;
+    
+    ">
+      <img src="https://img.icons8.com/fluency/48/000000/linkedin.png" height="50px" width="50px" />
+  </a>
+  <a href="https://github.com/Kritika30032002" class="btn my-2 my-sm-0 social" type="submit" style="
+      border: none;
+      margin-right: 1em;
+    "> <img src="https://img.icons8.com/fluency/48/000000/github.png" height="50px" width="50px" />
+  </a>
 
-    <!-- </div> -->
+  <!-- </div> -->
 
 </div>
 

diff --git a/views/register.ejs b/views/register.ejs
@@ -35,7 +35,10 @@
 
     </head>
 
-    <body>
+    <body style="background: #D3CCE3;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #E9E4F0, #D3CCE3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    ">
         <nav
             class="navbar navbar-dark bg-dark justify-content-between"
             id="navbar"
@@ -107,7 +110,7 @@
             </form>
         </nav>
 
-        <div
+        <div 
             class="container mt-5"
             style="margin-bottom: 197px"
         >