From 60f8aabccdd3bbcc85167cb30ba489af6928275c Mon Sep 17 00:00:00 2001
From: yugInd8 <soni.yug2001.007@gmail.com>
Date: Sun, 31 Jan 2021 23:01:05 +0530
Subject: [PATCH] Changed the color theme and the UI to make it more relevant
 to music.

---
 public/css/login.css | 102 ++++++++++++++++++++++++-------------------
 views/landing.ejs    |  39 +++++++++--------
 views/login.ejs      |  47 ++++++++++----------
 views/signup.ejs     |  54 ++++++++++++-----------
 4 files changed, 131 insertions(+), 111 deletions(-)

diff --git a/public/css/login.css b/public/css/login.css
index 146f69e..50ea314 100644
--- a/public/css/login.css
+++ b/public/css/login.css
@@ -1,65 +1,75 @@
 @import url(https://fonts.googleapis.com/css?family=Roboto:300);
-
 .login-page {
-  width: 360px;
-  padding: 8% 0 0;
-  margin: auto;
+    width: 360px;
+    padding: 8% 0 0;
+    margin: auto;
 }
+
 .form {
-  position: relative;
-  z-index: 1;
-  background: #FFFFFF;
-  max-width: 360px;
-  margin: 0 auto 100px;
-  padding: 45px;
-  text-align: center;
-  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+    position: relative;
+    z-index: 1;
+    background: #FFFFFF;
+    max-width: 360px;
+    margin: 0 auto 100px;
+    padding: 45px;
+    text-align: center;
+    box-shadow: 0 0 20px 0 rgb(107, 70, 70), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
 }
+
 .form input {
-  font-family: "Roboto", sans-serif;
-  outline: 0;
-  background: #f2f2f2;
-  width: 100%;
-  border: 0;
-  margin: 0 0 15px;
-  padding: 15px;
-  box-sizing: border-box;
-  font-size: 14px;
+    font-family: "Roboto", sans-serif;
+    outline: 0;
+    background: #f2f2f2;
+    width: 100%;
+    border: 0;
+    margin: 0 0 15px;
+    padding: 15px;
+    box-sizing: border-box;
+    font-size: 14px;
 }
+
 .form button {
-  font-family: "Roboto", sans-serif;
-  text-transform: uppercase;
-  outline: 0;
-  background: #4CAF50;
-  width: 100%;
-  border: 0;
-  padding: 15px;
-  color: #FFFFFF;
-  font-size: 14px;
-  -webkit-transition: all 0.3 ease;
-  transition: all 0.3 ease;
-  cursor: pointer;
+    font-family: "Roboto", sans-serif;
+    text-transform: uppercase;
+    outline: 0;
+    background: rgb(137, 178, 206);
+    width: 100%;
+    border: 0;
+    padding: 15px;
+    color: #7866ca;
+    font-size: 14px;
+    -webkit-transition: all 0.3 ease;
+    transition: all 0.3 ease;
+    cursor: pointer;
 }
-.form button:hover,.form button:active,.form button:focus {
-  background: #43A047;
+
+.form button:hover,
+.form button:active,
+.form button:focus {
+    background: #43A047;
 }
+
 .form .message {
-  margin: 15px 0 0;
-  color: #b3b3b3;
-  font-size: 12px;
+    margin: 15px 0 0;
+    color: #b3b3b3;
+    font-size: 12px;
 }
+
 .form .message a {
-  color: #4CAF50;
-  text-decoration: none;
+    color: #984caf;
+    text-decoration: none;
 }
+
 .form .register-form {
-  display: none;
+    display: none;
 }
 
 body {
-    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRU_yM8cHdjq-v1nsbXDKdshnQ8hpVMadNAB5oU2J_cIJnCbT96');
-  }
+    background-image: url('https://i.pinimg.com/originals/83/8b/4c/838b4c9d5162d1d4d5a8f11be85dbae3.gif');
+    background-repeat: no-repeat;
+    background-size: 1620px 1080px;
+}
 
-  .card-body{
-    background-color:#d4edda;
-  }
\ No newline at end of file
+.card-body {
+    background-color: #d4edda;
+}
\ No newline at end of file
diff --git a/views/landing.ejs b/views/landing.ejs
index 5de9923..ec08d96 100644
--- a/views/landing.ejs
+++ b/views/landing.ejs
@@ -1,19 +1,22 @@
 <% include partials/header %>
-<link href="css/login.css" rel="stylesheet" type="text/css">
-<div class="container">
-	<div class="alert alert-success">
-		<h1 id="n">Search for your song here</h1>
-	  </div>
-	<div class="row">
-		<!-- <div class="col-md-3"></div> -->
-		<div class="form">  
-			<form action="/list" method="POST">
-				<input type="text" placeholder="Song" name="Search">
-				<input class="btn btn-outline-success my-2 my-sm-0" role="button" type="submit">
-			</form>
-		</div>
-	</div>
-	
-</div>
- 
-<% include partials/footer %>
\ No newline at end of file
+    <link href="css/login.css" rel="stylesheet" type="text/css">
+    <div class="container">
+        <div class="alert alert-success">
+            <h1 id="n">
+                <center> Search for your song here</center>
+            </h1>
+        </div>
+        <br><br><br><br><br><br><br><br><br>
+        <div class="row">
+            <!-- <div class="col-md-3"></div> -->
+            <div class="form">
+                <form action="/list" method="POST">
+                    <input type="text" placeholder="Song" name="Search">
+                    <input class="btn btn-outline-success my-2 my-sm-0" style="color: rgb(39, 38, 37); background-color: rgb(137, 178, 206);" role="button" type="submit">
+                </form>
+            </div>
+        </div>
+
+    </div>
+
+    <% include partials/footer %>
\ No newline at end of file
diff --git a/views/login.ejs b/views/login.ejs
index e1bcff1..e7035cd 100644
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -1,26 +1,29 @@
-<% include ./partials/header %> 
-<link href="css/login.css" rel="stylesheet" type="text/css">
+<% include ./partials/header %>
+    <link href="css/login.css" rel="stylesheet" type="text/css">
 
-<div class="container">
-  <div class="alert alert-success">
-    <h1 id="n">Login!</h1>
-  </div>
+    <div class="container">
+        <div class="alert alert-success">
+            <center>
+                <h1 id="n">Login!</h1>
+            </center>
+        </div>
 
-<div class="login-page">
-    <div class="form">
-      <form action="/login" method="POST">
-        <input type="text" name="username" placeholder="username">
-        <input type="password" name="password" placeholder="password">
-        <input class="btn btn-outline-success my-2 my-sm-0" role="button" type="submit" value="Login!">
-      </form>
-      <p>
-      </p>
-      <p>
-        Dont have an Account?
-        <a class="btn btn-outline-success my-2 my-sm-0" role="button" href="/register">SIGNUP</a>
-    </p>
+        <div class="login-page">
+            <br><br><br><br>
+            <div class="form">
+                <form action="/login" method="POST">
+                    <input type="text" name="username" placeholder="username">
+                    <input type="password" name="password" placeholder="password">
+                    <input class="btn btn-outline-success my-2 my-sm-0" style="color: rgb(39, 38, 37); background-color: rgb(137, 178, 206);" role="button" type="submit" value="Login!">
+                </form>
+                <p>
+                </p>
+                <p>
+                    Dont have an Account?
+                    <a class="btn btn-outline-success my-2 my-sm-0" role="button" href="/register">Sign Up</a>
+                </p>
+            </div>
+        </div>
     </div>
-  </div>
-</div>
 
-<% include ./partials/footer %> 
+    <% include ./partials/footer %>
\ No newline at end of file
diff --git a/views/signup.ejs b/views/signup.ejs
index 88a8a4e..a079ec8 100644
--- a/views/signup.ejs
+++ b/views/signup.ejs
@@ -1,27 +1,31 @@
-<% include ./partials/header %> 
-<link href="css/login.css" rel="stylesheet" type="text/css">
+<% include ./partials/header %>
+    <link href="css/login.css" rel="stylesheet" type="text/css">
 
-<div class="container">
-  <div class="alert alert-success">
-    <h1 id="n">Sign Up</h1>
-  </div>
-<div class="login-page">
-    <div class="form">
-        <form action="/register" method="post">
-            <input type="text" name="username" placeholder="username">
-            <input type="password" name="password" placeholder="password">
-            <input type="password" name="confirmPassword" placeholder="Confirm password">
-            <button class="btn btn-outline-success my-2 my-sm-0">Sign Up</button>
-        </form>
-      <p>
-          
-      </p>
-      <p>
-        Already have an Account?
-        <a class="btn btn-outline-success my-2 my-sm-0" role="button" href="/login">Log In</a>
-    
-    </p>
+    <div class="container">
+        <div class="alert alert-success">
+            <center>
+                <h1 id="n">Sign Up</h1>
+            </center>
+
+        </div>
+        <div class="login-page">
+            <br><br>
+            <div class="form">
+                <form action="/register" method="post">
+                    <input type="text" name="username" placeholder="username">
+                    <input type="password" name="password" placeholder="password">
+                    <input type="password" name="confirmPassword" placeholder="Confirm password">
+                    <input class="btn btn-outline-success my-2 my-sm-0" style="color: rgb(39, 38, 37); background-color: rgb(137, 178, 206);" value="Sign Up">
+                </form>
+                <p>
+
+                </p>
+                <p>
+                    Already have an Account?
+                    <a class="btn btn-outline-success my-2 my-sm-0" role="button" href="/login">Log In</a>
+
+                </p>
+            </div>
+        </div>
     </div>
-  </div>
-</div>
-<% include ./partials/footer %> 
+    <% include ./partials/footer %>
\ No newline at end of file