CPIS/CPIS.html at master · Programsquad101/CPIS · 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
<html>

<head>
    <title>Login Page</title>
    <style type="text/css">
        body {
            background-image: url("https://images.pexels.com/photos/875858/pexels-photo-875858.png?cs=srgb&dl=animal-avian-bird-875858.jpg&fm=jpg");
            background-size: cover;
            background-repeat: repeat;
            background-position: 50% 100%;
            color: #ffffff;
            font-family: Arial;
            text-shadow: 1px 1px 1px #000;

            text-align: center;
            font-size: 1.6em;
        }

        #header {
            background-image: url("https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
            font-size: 1.5em;
            text-align: center;
            width: 600px;
            margin: 10px auto 0px auto;
            padding: 25px;
            border: 1px #EBECEC solid;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.10),
                0px 10px 20px rgba(0, 0, 0, 0.05),
                0px 20px 20px rgba(0, 0, 0, 0.05),
                0px 30px 20px rgba(0, 0, 0, 0.05);

        }

        #pagewrap {
            background-image: url("https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
            background-size: cover;
            text-align: center;
            padding: 200px 22px 00px 22px;
            height: 500px;
            width: 600px;
            margin: 30px auto 0px auto;
            border: 2px solid;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.10),
                0px 10px 20px rgba(0, 0, 0, 0.05),
                0px 20px 20px rgba(0, 0, 0, 0.05),
                0px 30px 20px rgba(0, 0, 0, 0.05);
        }


        input[type=text],
        input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }


        button {
            font-size: .9em;
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 25px 0;
            border: none;
            cursor: pointer;
            width: 100%;
        }


        button:hover {
            box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        }
    </style>
</head>

<body>
    <div id="header">Welcome to CPIS System </div>
    <div id="pagewrap">

        <form name="loginForm" method="post" action="login.php">


            <div class="container">
                <label for="uname"><b>Username</b></label>
                <input type="text" placeholder="Enter Username" name="userid" required>

                <label for="psw"><b>Password</b></label>
                <input type="password" placeholder="Enter Password" name="pwd" required>

                <button type="submit" onclick="return check(this.form)" value="Login">Login In</button>
            </div>


        </form>
        <script language="javascript">
            function check(form) {

                if (form.userid.value == "CPIS" && form.pwd.value == "CPIS") {
                    return true;
                }
                else {
                    alert("Error Password or Username")
                    return false;
                }
            }
        </script>
    </div>
</body>

</html>