ProfileCard/index.html at main · sakthivigneshc/ProfileCard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!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 rel="icon" type="image/x-icon" href="images/favicon1.png">

    <style>


body{
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),url("images/bg_img.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-sizing: border-box;


}

h1{
    text-align: center;
    color:white;
    font-size: 60px;

   }


.content{
    text-align: center;
    border: 5px solid navajowhite;
    width:40%;
    margin-left: auto;
    margin-right: auto;
    height: 296px;
}

input[type="text"], input[type="password"] {
  width: 50%;
  padding: 10px;
  font-size: 18px;
}


input[type="text"]{
    margin-top: 18px;
}


.container{
    margin-top: 100px;

}

#loginbtn{
    padding-left : 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    font-size: 18px;
    background-color: black;
    font-weight: 600;
    cursor: pointer;

}

#uname,#pwd{
    color: white;
    font-size: 18px;
    background-color: black;
}

</style>


<script>
    function validip(){

        event.preventDefault(); // Prevent the default form submission behavior

  const vname ="username";
  const vpword ="pass123";
  const userip =document.getElementById("name1").value;
  const pwdip =document.getElementById("pwd1").value;
  if(userip==vname && pwdip == vpword ){

//    window.open("index.html");
window.location.href = "profile.html"; // Use window.location.href to navigate to the new page


  }
  else{
    alert("Invalid username or password");
  }
}
</script>
    <title>LoginPage</title>
</head>
<body>

    <div class="container">
    <h1>Login</h1>
<div class="content">
    <form>

        <input for="username" type="text" placeholder="Enter your username"  id="name1" autocomplete="off"
        required> <br> <br> <span id="uname">Username is username</span> <br> <br><br>


        <input for="pasword" type="password" placeholder="Enter your password"  id="pwd1" autocomplete="off" required> <br> <br> <span id="pwd">Password is pass123</span>  <br> <br>


        <input type="submit" value="login" id="loginbtn" onclick="validip()" >

    </form>
</div>
</div>
</body>
</html>