<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="<?php echo $lang;?>">
<head>
<meta charset="utf-8">
<title>Login</title>
</head>
<body>
<script>
tst();
</script>
<div class="container">
<form action="./php/functions/LoginUser.php">
<script>
resp="alxsy";
if(resp=="alxs"){
SiginBase();
//SiginWithForgetPass();
}
else{
SiginWithIntegrationSocial("youtube","twitter","telegram");
}
</script>
</form>
</div>
</body>
</html>
button{
margin: 5px;
}
body{
padding: 0;
margin: 0;
}
.middle{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}
.btn{
display: inline-block;
width: 90px;
height: 90px;
background: #f1f1f1;
margin: 10px;
border-radius: 30%;
box-shadow: 0 5px 15px -5px #00000070;
color: #3498db;
overflow: hidden;
position: relative;
}
.btn i{
line-height: 90px;
font-size: 26px;
transition: 0.2s linear;
}
.btn:hover i{
transform: scale(1.3);
color: #f1f1f1;
}
.btn::before{
content: "";
position: absolute;
width: 120%;
height: 120%;
background: #3498db;
transform: rotate(45deg);
left: -110%;
top: 90%;
}
.btn:hover::before{
animation: aaa 0.7s 1;
top: -10%;
left: -10%;
}
@keyframes aaa {
0%{
left: -110%;
top: 90%;
}50%{
left: 10%;
top: -30%;
}100%{
top: -10%;
left: -10%;
}
}
let campo=["email","password"];
function CreatinInputSigin(){
//document.write("<style>.btn {width: 100%;padding: 12px;border: none;border-radius: 4px;margin: 5px 0;opacity: 0.85;display: inline-block;font-size: 17px;line-height: 20px;text-decoration: none;background:green;}</style>");
document.write(" <div class='form-group'>");
for(i=0;i<campo.length;i++){
document.write("<label><b>"+campo[i]+"</b></label><br>");
document.write(" <input type='"+campo[i]+"' class='form-control' id='"+campo[i]+"' placeholder='"+campo[i]+"' name='"+campo[i]+"'>");
}
document.write(" </div>");
//document.write(" <button type='submit'class='btn btn-default'>Entrar</button>");
}
function SiginWithForgetPass(){
document.write("<style>body {font-family: Arial, Helvetica, sans-serif;}</style>");
document.write("<style>form {border: 3px solid #f1f1f1;}</style>");
document.write("<style>.cancelbtn {width: auto;padding: 10px 18px;background-color: #f44336;}</style>");
document.write("<style>input[type=text], input[type=password],input[type=email] {width: 97%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;box-sizing: border-box;}</style>");
document.write("<style>button {background-color: #4CAF50;color: white;padding: 14px 20px;margin: 8px 0;border: none;cursor: pointer;width: 97%;}</style>");
document.write("<style>button:hover {opacity: 0.8;}</style>");
document.write("<style>.container {padding: 16px;}</style>");
document.write("<style>img.avatar {width: 40%;border-radius: 50%;}</style>");
document.write("<style>.imgcontainer {text-align: center;margin: 24px 0 12px 0;}</style>");
document.write("<style>span.psw {float: right;padding-top: 16px;}</style>");
document.write("<style@media screen and (max-width: 300px) {span.psw {display: block;float: none;}.cancelbtn {width: 9%;}}></style>");
document.write(" <div class='imgcontainer'>");
document.write(" <img src='img_avatar2.png' alt='Avatar' class='avatar'>");
document.write(" </div>");
document.write(" <div class='container'>");
CreatinInputSigin();
document.write(" <button type='submit'>Login</button>");
document.write(" <label>");
document.write(" <input type='checkbox' checked='checked' name='remember'> Remember me");
document.write(" </label>");
document.write(" </div>");
}
function SiginBase(){
document.write("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css'>");
document.write("<div class='containe'>");
CreatinInputSigin();
document.write(" </div>");
document.write(" <div class='checkbox'>");
document.write(" <label><input type='checkbox' name='remember'> Remember me</label>");
document.write(" </div>");
document.write(" <button type='submit'class='btn btn-default'>Entrar</button>");
document.write("</div>");
}
function SiginWithIntegrationSocial(...args){
document.write("<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>");
arg=args.sort();
document.write("<style>*{box-sizing: border-box;}</style>");
document.write("<style>.bottom-container {text-align: center;background-color: #666;border-radius: 0px 0px 4px 4px;}</style>");
document.write("<style>.col {float: left;width: 50%;margin: auto;padding: 0 50px;margin-top: 6px;}</style>");
document.write("<style>.container {position: relative;border-radius: 5px;background-color:#f2f2f2;padding: 20px 0 30px 0;} </style>");
document.write("<style>.fb {background-color: #3B5998;color: white;}</style>");
document.write("<style>.google {background-color: #dd4b39;color: white;}</style>");
document.write("<style>.hide-md-lg {display: none;}</style>");
document.write("<style>.twitter {background-color: #55ACEE;color: white;}</style>");
document.write("<style>.vl {position: absolute;left: 50%;transform: translate(-50%);border: 2px solid #ddd;height: 175px;};</style>");
document.write("<style>.vl-innertext {position: absolute;top: 50%;transform: translate(-50%, -50%);background-color: #f1f1f1;border: 1px solid #ccc;border-radius: 50%;padding: 8px 10px;}</style>");
document.write("<style>body {font-family: Arial, Helvetica, sans-serif;}</style>");
document.write("<style>input,.btn {width: 100%;padding: 12px;border: none;border-radius: 4px;margin: 5px 0;opacity: 0.85;display: inline-block;font-size: 17px;line-height: 20px;text-decoration: none;}</style>");
document.write("<style>input:hover,.btn:hover {opacity: 1;}</style>");
document.write("<style>input[type=submit] {background-color: #4CAF50;color: white;cursor: pointer;}</style>");
document.write("<style>input[type=submit]:hover {background-color: #45a049;}</style>");
document.write("<div class='container'>");
document.write("<div class='row'>");
document.write("<div class='vl'>");
document.write("<span class='vl-innertext'>or</span>");
document.write("</div>");
document.write("<div class='col'>");
for(i=0;i<arg.length;++i){
document.write("<a href='#' class='fb btn'>");
document.write("<i class='fa fa-"+arg[i]+" fa-fw'></i> Entre com "+arg[i]);
document.write("</a>");
}
document.write("</div>");
document.write("<div class='col'>");
document.write("<div class='hide-md-lg'>");
document.write("<p>Ou log com seu email:</p>");
document.write("</div>");
CreatinInputSigin();
document.write("<input type='submit' value='Login'>");
document.write("</div>");
document.write("</div>");
}
//document.write("<scr"+"ipt src='../settings.js'> </scri"+"pt>");
/*
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
input[type=text], input[type=password],input[type=email] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
/*@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
*/
/*
*{box-sizing: border-box;}
.bottom-container {text-align: center;background-color: #666;border-radius: 0px 0px 4px 4px;}
.col {float: left;width: 50%;margin: auto;padding: 0 50px;margin-top: 6px;}
.container {position: relative;border-radius: 5px;background-color:#f2f2f2;padding: 20px 0 30px 0;}
.fb {background-color: #3B5998;color: white;}
.google {background-color: #dd4b39;color: white;}
.hide-md-lg {display: none;}
.row:after {content: "";display: table;clear: both;}
.twitter {background-color: #55ACEE;color: white;}
.vl {position: absolute;left: 50%;transform: translate(-50%);border: 2px solid #ddd;height: 175px;};
.vl-innertext {position: absolute;top: 50%;transform: translate(-50%, -50%);background-color: #f1f1f1;border: 1px solid #ccc;border-radius: 50%;padding: 8px 10px;}
body {font-family: Arial, Helvetica, sans-serif;}
input,.btn {width: 100%;padding: 12px;border: none;border-radius: 4px;margin: 5px 0;opacity: 0.85;display: inline-block;font-size: 17px;line-height: 20px;text-decoration: none;}
input:hover,.btn:hover {opacity: 1;}
input[type=submit] {background-color: #4CAF50;color: white;cursor: pointer;}
input[type=submit]:hover {background-color: #45a049;}
*/
/*
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.container {
position: relative;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px 0 30px 0;
}
input,
.btn {
width: 100%;
padding: 12px;
border: none;
border-radius: 4px;
margin: 5px 0;
opacity: 0.85;
display: inline-block;
font-size: 17px;
line-height: 20px;
text-decoration: none;
}
input:hover,
.btn:hover {
opacity: 1;
}
.fb {
background-color: #3B5998;
color: white;
}
.twitter {
background-color: #55ACEE;
color: white;
}
.google {
background-color: #dd4b39;
color: white;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.col {
float: left;
width: 50%;
margin: auto;
padding: 0 50px;
margin-top: 6px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.vl {
position: absolute;
left: 50%;
transform: translate(-50%);
border: 2px solid #ddd;
height: 175px;
}
.vl-innertext {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 50%;
padding: 8px 10px;
}
.hide-md-lg {
display: none;
}
.bottom-container {
text-align: center;
background-color: #666;
border-radius: 0px 0px 4px 4px;
}
*/
