139 lines
3.3 KiB
Plaintext
139 lines
3.3 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<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="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
<script src="https://accounts.google.com/gsi/client" async defer></script>
|
|
<!------ Include the above in your HEAD tag ---------->
|
|
<script>
|
|
function handleCredentialResponse(response) {
|
|
const responsePayload = JSON.parse(atob(response.credential.split('.')[1]));
|
|
// window.location.replace(`http://localhost:8080/api/getRow?email=${responsePayload.email}`);
|
|
window.location = `http://localhost:8080/api/getRow?email=${responsePayload.email}`;
|
|
}
|
|
|
|
window.onload = function () {
|
|
google.accounts.id.initialize({
|
|
client_id: "1000433489727-n24pbvsdo5799elkaar78u0pgrcjmjv2.apps.googleusercontent.com",
|
|
callback: handleCredentialResponse
|
|
});
|
|
google.accounts.id.renderButton(document.getElementById("buttonDiv"),
|
|
{ type: "outline", locale: "the new locale" , theme: "filled_blue",
|
|
size: "large", shape: "rectangular",
|
|
width: "400",
|
|
logo_alignment: "left"})
|
|
google.accounts.id.prompt(); // also display the One Tap dialog
|
|
}
|
|
</script>
|
|
</head>
|
|
<style>
|
|
/* Medium Devices, Desktops */
|
|
@media only screen and (min-width : 992px) {
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background-color: #eeeeee;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
width: 200px;
|
|
margin: 30px auto;
|
|
box-shadow: 0 5px 10px -7px #333333;
|
|
border-radius: 50%;
|
|
}
|
|
.form {
|
|
background-color: #ffffff;
|
|
width: 500px;
|
|
height: 600px;
|
|
margin: 50px auto 10px auto;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 10px -3px #333;
|
|
text-align: center;
|
|
}
|
|
h3{
|
|
margin-top: 70px;
|
|
}
|
|
#buttonDiv{
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
/* Smartphones (portrait and landscape) ----------- */
|
|
@media only screen and (max-width : 992px){
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background-color: #263238;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
width: 140px;
|
|
margin: 180px auto;
|
|
box-shadow: 0 5px 10px -7px #333333;
|
|
border-radius: 100px;
|
|
}
|
|
.form {
|
|
background-color: #455a64;
|
|
width: 100%;
|
|
height: 1100px;
|
|
margin: 0px auto 10px auto;
|
|
padding: 30px;
|
|
/* border-radius: 8px; */
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 10px -3px #333;
|
|
text-align: center;
|
|
}
|
|
h3{
|
|
top: 510px;
|
|
position: absolute;
|
|
font-size: 4em;
|
|
color:#fffff7;
|
|
padding: 25px;
|
|
}
|
|
#buttonDiv{
|
|
top: 150px;
|
|
margin-left: 49%;
|
|
transform: scale(2.5);
|
|
position: relative;
|
|
}
|
|
p{
|
|
margin-top: 130px;
|
|
text-align: center;
|
|
color: #fffff7;
|
|
font-size: 4em;
|
|
}
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="form">
|
|
<img src="http://www.androidpolice.com/wp-content/themes/ap2/ap_resize/ap_resize.php?src=http%3A%2F%2Fwww.androidpolice.com%2Fwp-content%2Fuploads%2F2015%2F10%2Fnexus2cee_Search-Thumb-150x150.png&w=150&h=150&zc=3">
|
|
<h3>Welcome back! Please sign in</h3>
|
|
<div id="buttonDiv"></div>
|
|
</div>
|
|
<p>......</p>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|