Skip to content

Commit

Permalink
Merge pull request #157 from venketeswar664/main
Browse files Browse the repository at this point in the history 
Resolved Issue #115
  • Loading branch information
@IshitaSatpathy
IshitaSatpathy authored Oct 13, 2022
2 parents 518e8c9 + 288a5a7 commit a276299
Show file tree
Hide file tree
Showing 7 changed files with 340 additions and 0 deletions.
Binary file added venketeswar rana/Issue No. 115/img.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 52 additions & 0 deletions venketeswar rana/Issue No. 115/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form action="" method="get">
<h1 class="main_heading">Payment Form</h1>
<hr>
<h2>User Information</h2>
<p>Name: * <input type="text" name="name" required placeholder="name"></p>
<p>
<fieldset>
<legend>Gender</legend>
male <input type="radio" name="gender" id="male">
female <input type="radio" name="gender" id="female">
</fieldset>
</p>
<p>
Address:
<textarea placeholder="enter your address" name="address" id="address" cols="100" rows="9"></textarea>
</p>
<p>Email: *<input type="email" name="email" id="email" required></p>
<p>Pincode: *<input type="number" name="pincode" id="pincode" required></p>
<h2>Payment Information</h2>
<p> Card Type:
<select name="card_type" id="card_type">
<option value="">---select a Card Type</option>
<option value="visa"> visa</option>
<option value="rupay">Rupay</option>
<option value="mastercard">Mastercard</option>
</select>
</p>
<p>
card number*<input type="number" name="card_number" id="card_number" required>
</p>
<p>
Expiration Date: <input type="date" name="exp_date" id="exp_date" required>
</p>
<p>
CVV <input type="password" name="cvv" id="cvv" required>
</p>
</form>
<a class="sumbit" href="new.html"><p><input type="submit"></p></a>
</div>
</body>
</html>
49 changes: 49 additions & 0 deletions venketeswar rana/Issue No. 115/k.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="container">
<h1>Payment Form</h1>
<hr>
<h2>Contact Information</h2>
<p>Name: <input type="text" name="name" required></p>
<fieldset>
<legend>Gender</legend>
<p>
Male <input type="radio" name="gender" id="gender">
Female<input type="radio" name="gender" id="gender">
</p>
</fieldset>
<p>Address: <textarea name="address" id="address" cols="100" rows="8"></textarea></p>
<p>Email: <input type="email"></p>
<p>Phone No.: <input type="number"></p>
<h2>Payment Information</h2>
<p>
Card type:
<select name="cardtype" id="101" required>
<option value="">----Select a card type----</option>
<option value="Visa">Visa</option>
<option value="Rupay">Rupay</option>
<option value="Mastercard">Mastercard</option>
</select>
</p>
<p>
Card Number: <input type="number" name="card_number" id="card_number" required>
</p>
<p>
Expiration date: <input type="date" name="date" id="date" required>
</p>
<p>
CVV: <input type="password" name="cvv" id="cvv" required>
</p>

</form>
<a class="sumbit" href="index.html"><p><input type="submit"></p></a>
</body>
</html>
47 changes: 47 additions & 0 deletions venketeswar rana/Issue No. 115/new.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style1.css">
<title>OTP Verification Form</title>
</head>
<body>
<div class="d-flex justify-content-center align-items-center container">
<div class="card py-5 px-3">
<h5 class="m-0">Mobile Phone Verification</h5>
<span class="Mobile-text"
>Enter the code we just send on your moblie phone
<b class="text-color">91+8758xxxxxx</b>
</span>
<div class="d-flex flex-row mt-5">
<input type="text" class="form-control" autofocus="" maxlength="1">
<input type="text" class="form-control" maxlength="1">
<input type="text" class="form-control" maxlength="1">
<input type="text" class="form-control" maxlength="1">
</div>

<div class="text-color mt-5">
<span class="d-block mobile-text" id="countdown"></span>
<span class="d-block mobile-text" id="resend"></span>
</div>
<button type="submit" class="btn" onclick="openPopup()">submit</button>
<div class="popup" id="popup">
<img src="img.png">
<h2>Thank You!</h2>
<p>Your Payment is successfull. Thanks!</p>
<button type="button" onclick="closePopup()">OK</button>
</div>

</div>
</div>
<script src="script.js"></script>
</body>
</html>
42 changes: 42 additions & 0 deletions venketeswar rana/Issue No. 115/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
let timerOn = true;
function timer(remaining){

var m = Math.floor(remaining / 20);
var s = remaining % 20;
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;

document.getElementById('countdown').innerHTML =
`Time left : ${m} : ${s}`;
remaining -= 1;
if(remaining >= 0 && timerOn){
setTimeout(function(){
timer(remaining);
}, 1000);

document.getElementById("resend").innerHTML = ``;
return;

}

if(!timerOn){
return;
}

document.getElementById("resend").innerHTML = `Don't receive the code? <span class= "font-weight-bold text-color cursor"
onclick="timer(20)">resend</span>
`

}

timer(20);

let popup = document.getElementById("popup");

function openPopup(){
popup.classList.add("open-popup");
}

function closePopup(){
popup.classList.remove("open-popup");
}
55 changes: 55 additions & 0 deletions venketeswar rana/Issue No. 115/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
*{
box-sizing: border-box;
}

body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 15px 30px;
font-size: 18px;
padding: 8px;
}

.container{
background-color: #f2f2f2;
padding: 5px 20px 15px 20px;
border: 1px solid lightgray;
border-radius: 5px;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 5px;
}

fieldset{
background-color: #fff;
border: 1px solid #ccc;
}

.main_heading{
text-align: center;
}

input[type="submit"]{
background-color: rgba(100, 86, 226, 0.271);
color: white;
padding: 12px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
width: 100%;

}
input[type="submit"]:hover{
background-color: #c91b66;

}
95 changes: 95 additions & 0 deletions venketeswar rana/Issue No. 115/style1.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@

body{
background: rgb(60, 112, 171);
}
.text-color{
color: #f53b57;
}
.card{
width: 350px;
padding: 10px;
border-radius: 20px;
background: #fff;
border: none;
position: relative;
}
.container{
height: 100vh;
}
.mobile-text{
color: #989696b8;
font-size: 12px;

}
form-control:focus{
color: #495057;
background-color:rgb(97, 157, 230);
border-color: #ff8880;
outline: 0;
box-shadow: none;

}
.cursor{
cursor: pointer;

}
.btn{
padding: 10px 60px;
background: #fff;
border: 0;
outline: none;
cursor: pointer;
font-size: 22px;
font-weight: 500;
border-radius: 30px;
}
.btn:hover{
background-color: aquamarine;
}
.popup{
width: 400px;
background-color: #fff;
border-radius: 6px;
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%,-50%) scale(0.1);
text-align: center;
padding: 0 30px 30px;
color: #333;
visibility: hidden;
transition: transform 0.4s, top 0.4s;
}

.open-popup{
visibility: visible;
top: 50%;
transform: translate(-50%,-50%) scale(1);
}

.popup img{
width: 100px;
margin-top: 50px;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.popup h2{
font-size: 38px;
font-weight: 500;
margin: 30px 0 10px;
}

.popup button{
width: 100%;
margin-top: 50px;
padding: 10px 0;
background: #6fd649;
color: #fff;
border: 0;
outline: none;
font-size: 18px;
border-radius: 4px;
cursor: pointer;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}

0 comments on commit a276299

Please sign in to comment.