1
+ < html >
2
+ < head >
3
+ < link href ='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300 ' rel ='stylesheet ' type ='text/css '>
4
+ < style type ="text/css ">
5
+ body {
6
+ background-image : url ("https://image.shutterstock.com/image-photo/credit-card-close-shot-selective-260nw-567634105.jpg" );
7
+ background-size : cover;
8
+
9
+ }
10
+ .form-style-8 {
11
+ font-family : 'Open Sans Condensed' , arial, sans;
12
+ width : 500px ;
13
+ padding : 30px ;
14
+ background : # FFFFFF ;
15
+ margin : 50px auto;
16
+ box-shadow : 0px 0px 15px rgba (0 , 0 , 0 , 0.22 );
17
+
18
+
19
+ }
20
+ .form-style-8 h2 {
21
+ background : # 4D4D4D ;
22
+ text-transform : uppercase;
23
+ font-family : 'Open Sans Condensed' , sans-serif;
24
+ color : # 797979 ;
25
+ font-size : 28px ;
26
+ font-weight : 100 ;
27
+ padding : 20px ;
28
+ margin : -30px -30px 30px -30px ;
29
+ }
30
+ .form-style-8 input [type = "text" ],
31
+ .form-style-8 input [type = "date" ],
32
+
33
+
34
+ .form-style-8 input [type = "number" ],
35
+
36
+
37
+ .form-style-8 input [type = "password" ],
38
+ .form-style-8 input [type = "tel" ],
39
+ .form-style-8 textarea ,
40
+ .form-style-8 select
41
+ {
42
+ box-sizing : border-box;
43
+ outline : none;
44
+ display : block;
45
+ width : 100% ;
46
+ padding : 7px ;
47
+ border : none;
48
+ border-bottom : 1px solid # ddd ;
49
+ background : transparent;
50
+ margin-bottom : 10px ;
51
+ font : 16px Arial, Helvetica, sans-serif;
52
+ height : 45px ;
53
+ }
54
+
55
+ .form-style-8 input [type = "submit" ],
56
+ .form-style-8 input [type = "submit" ]{
57
+ -moz-box-shadow : inset 0px 1px 0px 0px # 45D6D6 ;
58
+ -webkit-box-shadow : inset 0px 1px 0px 0px # 45D6D6 ;
59
+ box-shadow : inset 0px 1px 0px 0px # 45D6D6 ;
60
+ background-color : # 2CBBBB ;
61
+ border : 1px solid # 27A0A0 ;
62
+ display : inline-block;
63
+ cursor : pointer;
64
+ color : # FFFFFF ;
65
+ font-family : 'Open Sans Condensed' , sans-serif;
66
+ font-size : 14px ;
67
+ padding : 8px 18px ;
68
+ text-decoration : none;
69
+ text-transform : uppercase;
70
+ }
71
+ .form-style-8 input [type = "button" ]: hover ,
72
+ .form-style-8 input [type = "submit" ]: hover {
73
+ background : linear-gradient (to bottom, # 34CACA 5% , # 30C9C9 100% );
74
+ background-color : # 34CACA ;
75
+ }
76
+ .center {
77
+ display : block;
78
+ margin-left : auto;
79
+ margin-right : auto;
80
+ width : 50% ;
81
+ }
82
+ </ style >
83
+ </ head >
84
+ < body >
85
+ < div class ="form-style-8 ">
86
+ < h2 > Fill the given information</ h2 >
87
+ < img src ="credit.jpg " class ="center ">
88
+ < form onsubmit ="generateOTP() "; >
89
+ < table >
90
+ < tr > Card Number:< input type ="tel " pattern ="[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4} " name ="field1 " required placeholder ="xxxx xxxx xxxx xxxx " label ="name "> </ tr >
91
+ < tr > < td > Card holder name:< input type ="text " name ="field2 " required placeholder ="enter name " /> </ td >
92
+ < td > Expiry date:< input type ="date " required placeholder ="enter expiry date " > </ td >
93
+ </ tr >
94
+ < tr >
95
+ < td > Enter CVV:< input type ="password " name ="password " required placeholder ="*** "> </ td >
96
+ </ tr >
97
+ </ table >
98
+
99
+ < br >
100
+ < input type ="submit " value ="Generate OTP "/>
101
+ < input type ="submit " value ="Cancel " /> < br > < br >
102
+ < input type ="submit " value ="Go back to home page " />
103
+
104
+ </ form >
105
+ </ div >
106
+ < script >
107
+ function generateOTP ( ) {
108
+
109
+ // Declare a digits variable
110
+ // which stores all digits
111
+ var digits = '0123456789' ;
112
+ let OTP = '' ;
113
+ for ( let i = 0 ; i < 4 ; i ++ ) {
114
+ OTP += digits [ Math . floor ( Math . random ( ) * 10 ) ] ;
115
+ }
116
+ alert ( "your otp of 4 digit is-" + OTP ) ;
117
+ var y = prompt ( "Please enter otp" ) ;
118
+ if ( y == OTP )
119
+ { alert ( "you have entered correct otp" ) ;
120
+ alert ( "Congratulations!! your transaction is succesfull." ) ; }
121
+ else { alert ( "you have entered incorrect otp.Try again!!" ) } ;
122
+
123
+ }
124
+ </ script >
125
+ </ body >
126
+ </ html >
0 commit comments