Commit 504ee70e authored by Srinivas's avatar Srinivas
Browse files

Update index.php

parent 503f01d8
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
* {
box-sizing: border-box;
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 33.3%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
a {
text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
color: #FFFFFF;
font-size: 13px;
text-decoration: none
body {
background-color: #F3EBF6;
font-family: 'Ubuntu', sans-serif;
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
.main {
background-color: #FFFFFF;
width: 300px;
height: 220px;
margin: 3em auto;
border-radius: 1.5em;
box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);
.submit {
font-family: Arial;
color: white;
.submit {
cursor: pointer;
border-radius: 5em;
color: #fff;
background: linear-gradient(to right, #9C27B0, #E040FB);
background: #930000;
border: 0;
padding-left: 25px;
padding-right: 30px;
padding-left: 35px;
padding-right: 40px;
padding-bottom: 10px;
padding-top: 10px;
font-family: 'Ubuntu', sans-serif;
margin-left: 29%;
margin-right: 29%;
font-size: 13px;
margin-left: 34%;
margin-right: 34%;
font-size: 15px;
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04);
.sign {
padding-top: 40px;
color: #8C55AA;
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
font-size: 23px;
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
.left {
left: 0;
background-color: #111;
.right {
right: 0;
background-color: #ffffff;
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
.centered img {
width: 150px;
border-radius: 50%;
.custom-select {
position: relative;
font-family: Arial;
.custom-select select {
display: none; /*hide original SELECT element:*/
.select-selected {
background-color: DodgerBlue;
/*style the arrow inside the select element:*/
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
/*point the arrow upwards when the select box is open (active):*/ {
border-color: transparent transparent #fff transparent;
top: 7px;
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
user-select: none;
/*style items (options):*/
.select-items {
position: absolute;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
/*hide the items when the select box is closed:*/
.select-hide {
display: none;
.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
<center><br><br><h1>HOSTEL OUTPASS</h1></center>
<div class="column" ><br><br><br><br><br><br>
<div class="main">
<center><p class="sign" align="center">Student Login</p><br><br><br>
<p class="submit">
<?php echo '<a href="stulogg.php">Student</a>' ?></p></div></center></p>
<div class="column"><br><br><br><br><br><br>
<div class="main">
<center> <p class="sign" align="center">Warden</p><br><br><br>
<p class="submit">
<?php echo '<a href="2.php">Warden</a>' ?></p></div></center></p>
<div class="split left">
<img src="17.jpg" style="width:100%; height:97%;">
<div class="column"><br><br><br><br><br><br>
<div class="main">
<center> <p class="sign" align="center">Security</p><br><br><br>
<p class="submit">
<?php echo '<a href="sec.php">Security</a>' ?></p></div></center></p>
<div class="split right">
<h1 style="color:black;">HOSTEL OUTPASS</h1>
<form action="" method="post">
<label for="cars" style="color:black;"><strong>Choose a role:</strong></label><br><br>
<select id="cars" name="cars" style="padding-top:0px;color: #930000;font-family: 'Ubuntu', sans-serif;font-weight: bold;font-size: 23px;">
<option value="student">Student</option>
<option value="warden">Warden</option>
<option value="security">Security</option>
<option value="management">Management</option>
</select><br><br><br><input class="submit" type="submit" value="Submit">
echo "<script>location.href='stulogg.php'</script>";
echo "<script>location.href='2.php'</script>";
} if($_POST['cars']==security){
echo "<script>location.href='sec.php'</script>";
} if($_POST['cars']==management){
echo "<script>location.href='3.php'</script>";
var x, i, j, l, ll, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
l = x.length;
for (i = 0; i < l; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
ll = selElmnt.length;
/*for each element, create a new DIV that will act as the selected item:*/
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
/*for each element, create a new DIV that will contain the option list:*/
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < ll; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
/*when an item is clicked, update the original select box,
and the selected item:*/
var y, i, k, s, h, sl, yl;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
sl = s.length;
h = this.parentNode.previousSibling;
for (i = 0; i < sl; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
yl = y.length;
for (k = 0; k < yl; k++) {
this.setAttribute("class", "same-as-selected");
a.addEventListener("click", function(e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
function closeAllSelect(elmnt) {
/*a function that will close all select boxes in the document,
except the current select box:*/
var x, y, i, xl, yl, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
xl = x.length;
yl = y.length;
for (i = 0; i < yl; i++) {
if (elmnt == y[i]) {
} else {
for (i = 0; i < xl; i++) {
if (arrNo.indexOf(i)) {
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment