pywe_form.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.pywe.org/static/css/animate.css">

<style>
body {font-family: Arial, Helvetica, sans-serif;
background-image: url(2.png);
background-repeat: no-repeat;
background-position-y: bottom center;
background-position-x: right;
}
* {box-sizing: border-box;}
::placeholder {
  color: #a915c6;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #a915c6;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: #a915c6;
}
.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 15px;
  /* outline:#a915c6; */
}

.icon {
  padding: 10px;
  background: #a915c6;
  color: white;
  min-width: 50px;
  text-align: center;
}

.input-field {
  width: 100%;
  padding: 10px;
  outline: none;
}

.input-field:focus {
  border: 2px solid #a915c6;
}

/* Set a style for the submit button */
.btn {
  background-color: #a915c6;
  color: white;
  padding: 15px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
  outline:none;
  border-radius:5px;
}

.btn:hover {
  opacity: 1;
}

.mybtn {
  background-color: #a915c6;
  color: white;
  padding: 15px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.9;
  outline:none;
  border-radius:5px;
}

/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

.mybtn,.active{
  width: 20%;
}

}

/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

.mybtn,.active{
 width:20%;
}

}

/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

.mybtn,.active{
  width: 20%;
}

}

/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

.mybtn,.active{
  width: 20%;
}

}

/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

.mybtn,.active{
  width: 40%;
}

}

/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

.mybtn,.active{
  width: 40%;
}

}

.mybtn:hover {
  opacity: 1;
}
#buttons{
text-align:center;
}
.active{
background-color:gray;
color: white;
padding: 15px 20px;
border: none;
cursor: pointer;
opacity: 0.9;
outline:none;
border-radius:5px;
}
form{
  background-color: white;
  position:relative;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  top:30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 15px 15px 0px 0;
}

#myattach{
  background-color: #fff;
  position:relative;
  border: 1px solid #ddd;
  height:100%;
  padding:30px;
  top:50px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /* border-radius: 15px 15px 0px 0; */
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

  #myattach{
  top:13px;
  height:80px;
  padding: 8px;

}
form{
opacity:0.95;

}
#uattach{
  top:0px;
}
}

/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
#myattach{
  top:13px;
  height:80px;
  padding: 8px;
}
form{
opacity:0.95;

}
#uattach{
  top:0px;
}

}

#attach{
  position:relative;
  border: 1px solid #ddd;
  border-radius: 4px;
  top:20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 15px 15px 0px 0;
}
#uattach{
  position:relative;
  border: 1px solid #ddd;
  /* border-radius: 4px; */
  top:35px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 15px 15px 0px 0;
}
h2{
  color:#fdc707;
  float:left;
}
img{
  float:right; 
  height:50px;
  width:50px;
  border-radius: 50%;
  border:solid 2px #fdc707;
}
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #a915c6;
   color: white;
   text-align: center;
   height:35px;
}
.footer p{
  font-size:12px;
}
.footer a{
  color:#fdc707;
}
/* add appropriate colors to fb, twitter and google buttons */
.fb {
  background-color: #3B5998;
  color: white;
  border-radius:5px;
  max-width:50px;
}

.twitter {
  background-color: #55ACEE;
  color: white;
  border-radius:5px;
}

.google {
  background-color: #dd4b39;
  color: white;
  border-radius:5px;
}
.github {
  background-color: #131010;
  color: white;
  border-radius:5px;
}
/* Float four columns side by side */
.column {
  float: left;
  width: 50%;
  padding: 0 10px;
  text-align: center;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -10px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 50%;
    display: block;
    margin-bottom: 40px;
  }
}
a{
  text-decoration-line: none;
}

</style>
</head>
<body>
<div id="buttons">
<button class="mybtn active animated pulse" id="registerbtn">Register</button>
<button class="mybtn" id="loginbtn">Login</button>
</div>
<form action="https://www.pywe.org/accounts/signup/" method="POST" style="max-width:500px;margin:auto" id="signupForm">
  <h2 class="animated jello">Register Here</h2>
  <img src="https://www.pywe.org/static/images/logo.png" />
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Username" name="username">
  </div>

  <div class="input-container">
    <i class="fa fa-envelope icon"></i>
    <input class="input-field" type="text" placeholder="Email" name="email">
  </div>
  
  <div class="input-container">
    <i class="fa fa-key icon"></i>
    <input class="input-field" type="password" placeholder="Password" name="password">
  </div>
  <div class="input-container">
    <i class="fa fa-key icon"></i>
    <input class="input-field" type="password" placeholder="Confirm Password" name="password1">
  </div>

  <button type="submit" class="btn">Register</button>
  <div id="attach" style="max-width:100%;margin:auto"></div>
</form>


<form action="https://www.pywe.org/accounts/login/" method="POST" style="max-width:500px;margin:auto;display:none;" id="loginForm">
  <h2 class="animated jello">Login</h2>
  <img src="https://www.pywe.org/static/images/logo.png" />
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Username" name="username">
  </div>

  
  <div class="input-container">
    <i class="fa fa-key icon"></i>
    <input class="input-field" type="password" placeholder="Password" name="password">
  </div>

  <button type="submit" class="btn">Login</button>
  <h3 style="text-align: center;color:#a915c6;">Login with</h3>
  <div id="myattach"  style="max-width:500px;margin:auto;">
    <div class="row">
      <div class="column">
        <a href="#" class="google btn"><i class="fa fa-google fa-fw">
          </i>Google
        </a>
      </div>
      <div class="column">
        <a href="#" class="github btn">
          <i class="fa fa-github fa-fw"></i>Github
         </a>
      </div>
    </div>
    <div id="uattach" style="max-width:100%;margin:auto"></div>
  </div>
</form>

<div class="footer">
  <p>© 2019 Copyright <a href="https://www.pywe.org">PywE</a> -- All rights reserved</p>
</div>
<!-- You can put this script in a file and call it here -->
<!-- When putting in a file do not include the <script></script> tags -->
<script>
  document.querySelector('#loginbtn').onclick = function(e) {
  document.querySelector('#loginbtn').className = "active animated pulse";
  document.querySelector('#registerbtn').className = "mybtn";
  signupform = document.querySelector('#signupForm');
  loginform = document.querySelector('#loginForm');
  signupform.className = "animated bounceOutRight";
  loginform.className = "animated bounceInLeft";
  setTimeout(() => {
    loginform.style.display = "block";
    signupform.style.display = "none";
  }, 500);
  }
  
  document.querySelector('#registerbtn').onclick = function(e) {
  document.querySelector('#registerbtn').className = "active animated pulse";
  document.querySelector('#loginbtn').className = "mybtn";
  signupform = document.querySelector('#signupForm');
  loginform = document.querySelector('#loginForm');
  loginform.className = "animated bounceOutRight"
  signupform.className = "animated bounceInLeft"
  setTimeout(() => {
    signupform.style.display = "block";
     loginform.style.display = "none";
  }, 500);
  }
  </script>
</body>
</html>