Log in & ShutDown

In this example below you will see how to do a Log in & ShutDown with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by shahinsha, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright shahinsha ©
  • HTML
  • CSS
  • JavaScript
    <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";
}

Comments