<div class="a" id="background"><br>
<div class="img" id="img"></div>
<input type="text" class="b" placeholder="User Name" id="name"></input><br>
<input type="password" class="c" placeholder="Password" id="pass"></input><br>
<button class="go" onclick="go()" id="go"></button><br>
<button class="shut" onclick="shut()" id="shut">Shutdown</button><br>
</div>
<div class="ques" id="ques">Are you Sure? You want to Shutdown?<br>
<button class="yes" onclick=yes()>Yes</button><button class="no" onclick=no()>No</button>
</div>
/*Downloaded from https://www.codeseek.co/shahinsha/log-in-andamp-shutdown-VWVwwg */
.a{
background-image:url("https://img.wonderhowto.com/img/20/99/63460107922140/0/log-windows-7-with-username-password.w1456.jpg");
background-size:800px 1000px;
height:800px;
background-repeat:no-repeat;
}
.b,.c{
margin-left:235px;
margin-top:35px;
height:38px;
width:325px;
font-size:20px;
}
.c{
margin-left:235px;
margin-top:18px;
}
.img{
background-image:url("https://www.haynhat.com/wp-content/uploads/2010/11/thumbnail_____www.HAYNHAT.com___-9.jpg");
background-size:190px 260px;
height:300px;
background-repeat:no-repeat;
margin-left:302px;
margin-top:212px;
border-radius: 15px;
}
.go{
background-image:url("https://cdn2.iconfinder.com/data/icons/iconslandplayer/PNG/256x256/CircleBlue/Play1Pressed.png");
background-size:70px 70px;
height:70px;
width:70px;
background-repeat:no-repeat;
border-radius:40px;
margin-left:570px;
margin-top:-60px;
border:none;
outline:none;
}
.shut{
float:left;
margin-top:207px;
margin-left:210px;
border:none;
height:40px;
font-weight:bold;
background-color:skyblue;
font-size:20px;
}
.shut:hover{
background-color:red;
color:white;
float:left;
}
.ques{
height:150px;
width:400px;
font-size:30px;
margin-top:-500px;
margin-left:330px;
background-color:skyblue;
}
.yes,.no{
height:50px;
width:100px;
font-size:20px;
margin-left:50px;
border:none;
outline:none;
}
/*Downloaded from https://www.codeseek.co/shahinsha/log-in-andamp-shutdown-VWVwwg */
document.getElementById("shut").style.visibility="hidden";
document.getElementById("ques").style.visibility="hidden";
function go()
{
var a=document.getElementById("name").value;
var b=document.getElementById("pass").value;
if (a.length<1)
{
var q=true;
alert("Enter User Name")
}
if (b.length<6)
{
var p=true;
alert("Password Length minimum 7 Char")
}
if (p!=true&&q!=true)
{
document.getElementById("background").setAttribute("style","background-image:url('http://toastytech.com/guis/win7default.jpg');height:1000px;background-size:800px 1000px;background-repeat:no-repeat")
document.getElementById("img").style.visibility="hidden";
document.getElementById("name").style.visibility="hidden";
document.getElementById("pass").style.visibility="hidden";
document.getElementById("go").style.visibility="hidden";
document.getElementById("shut").style.visibility="visible";
}
}
function shut()
{
document.getElementById("ques").style.visibility="visible"
}
function yes()
{
document.getElementById("background").setAttribute("style","background-image:url('https://img.wonderhowto.com/img/20/99/63460107922140/0/log-windows-7-with-username-password.w1456.jpg');height:800px;background-size:800px 1000px;background-repeat:no-repeat")
document.getElementById("img").style.visibility="visible";
document.getElementById("name").style.visibility="visible";
document.getElementById("pass").style.visibility="visible";
document.getElementById("go").style.visibility="visible";
document.getElementById("shut").style.visibility="hidden";
document.getElementById("ques").style.visibility="hidden"
}
function no()
{
document.getElementById("ques").style.visibility="hidden";
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
