OTP page and Sign In page Updated.

Added some styling to OTP page and sign in page and also added one functionality to OTP page: user can see his or her number in OTP page and also able to try another number if wants.
Vishalrj750 · Mar 7, 2022 · 4fc9561 · 4fc9561
1 parent bfe5d1d
commit 4fc9561
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 11 deletions.
diff --git a/otp.html b/otp.html
@@ -5,6 +5,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
+        body {
+            background-color: rgba(32,33,36,.6509803921568628);
+        }
 
           #container{
             box-sizing: border-box;
@@ -15,45 +18,71 @@
             border: 1px solid #cecece;
             border-radius: 20px;
             margin-top: 10%;
+            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+            background-color: white;
 
         }
-             #sign{
+        #container .signIn a{
             line-height: 24px;
             color: #494949;
             font-size: 14px;
             font-weight: 500;
             padding-top: 60px;
-            margin-bottom:40px ;
+            margin-bottom: 20%;
+            text-decoration: none;
+        }
+
+        .signIn {
+            margin-top: 5%;
+            margin-bottom: 5%;
         }
 
-        #container h3 {
-
+        #container h3, p, #container>a {
+            font-family: sans-serif;
         }
 
         .submit {
             width: 200px;
             height: 50px;
             border-radius: 25px;
-            margin-bottom: 20px;
+            margin-bottom: 50px;
             font-size: 20px;
-            border: 1px solid black;
+            border: 1px solid #cecece;
+            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+        }
+
+        .submit:hover {
+            font-size: 25px;
+            background-color: black;
+            color: white;
+            cursor: pointer;
         }
 
         input {
-            width: 200px;
+            width: 300px;
             height: 50px;
             border-radius: 20px;
+            text-align: center;
+            border: 1px solid #cecece;
+            font-size: 15px;
         }
     </style>
     <title>Document</title>
 </head>
 <body>
     <div id="container">
-        <div id="sign">Sign in / Sign up</div>
+        <div class="signIn">
+            <a href="sign.html">Sign in / Sign up</a>
+        </div>
+        <!-- <div id="sign">Sign in / Sign up</div> -->
         <div><img src="./vik_images/KFC_logo.svg" alt=""></div>
         <h3>WE JUST TEXTED YOU</h3>
-        <P>Please enter the verification code we just send to your number</P>
-        <p>Different Number?</p>
+        <!-- <div id="yourNumber"></div> -->
+        <P id="yourNumber"></P>
+        <a href="sign.html">Different Number?</a>
+        <br>
+        <br>
+        <!-- <p>Different Number?</p> -->
         <input type="text" placeholder="Enter Your Code Here">
         <p>Your code will expire in </p>
         <a href="#">Resend the code</a>
@@ -63,6 +92,18 @@ <h3>WE JUST TEXTED YOU</h3>
     </div>
 </body>
       <script>
+          //Setting the login mobile number when the page reload.
+          window.onload = setNumb();
+
+          //Function for setting login mobile number
+          function setNumb(){
+            let val = localStorage.getItem("Number");
+            console.log(val)
+            let setNum = document.getElementById("yourNumber");
+            setNum.innerText = `Please enter the verification code we just send to ${val}`
+          }
+
+          //Funtion to redirect to name page.
           function goToName(){
               window.location = "name.html"
           }

diff --git a/sign.html b/sign.html
@@ -116,7 +116,7 @@
         <h3>LET'S SIGN IN OR CREATE ACCOUNT WITH YOUR PHONE</h3>
         <h3> NUMBER!</h3>
        </div>
-        <input type="number" id="input" placeholder="Phone Number*">
+        <input type="number" id="inputNumber" placeholder="Phone Number*">
         <p>By "logging in to KFC",you agree to our <button id="privacy" onclick="privacy()">Privacy Policy</button> and <button id="condition" onclick="conditions()">Terms & Conditions.</button></p>
         <button onclick="goToName()" id="code"> Send Me a Code</button>
         <div id="or">
@@ -128,7 +128,12 @@ <h3> NUMBER!</h3>
     </div>
 </body>
 <script>
+
+
     function goToName(){
+        let cat = document.getElementById("inputNumber").value;
+        localStorage.setItem("Number", `${cat}`)
+        console.log(cat)
         window.location = "otp.html"
     }
     function privacy(){