plugins/org.eclipse.papyrus.gamification/html/login3.html - papyrus/org.eclipse.papyrus-papygame - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">

     <style>
         html{
             height: 100%;
         }
         button,
         input{
             font-family: 'Share Tech Mono', monospace !important;
             border-radius: 5px;
             font-size: 1em;
         }
 #accountLabel,
 #errorMessage{
     text-align: left;
     width: 80%;
     font-size: 0.7em;
     font-family: 'Share Tech Mono', monospace !important;
 }
 #accountLabel{
 	display: none;
 }
 #errorMessage{
 	color: #ff2020;
 	display: inline-block;
 }
 #sponsor,
 #confirmPassword{
 	display: none;
 }
         body {
 margin: 0;
 }

         #myForm {
             width: 100%;
 text-align: center;
             font-family: 'Cabin Sketch', cursive !important;
         }

         h2 {
             font-size: 3em;
             padding: 0;
             margin: 15px;
             color: orange;
             text-align: center;
         }

        input[type=text], input[type=password] {
 	width: 80%;
     padding: 0 0 5px 0;
     margin: 12px 0;
     display: inline-block;
     border-bottom: 1px solid #ccc;
     border-left: none;
     border-right: none;
     border-top: none;
     border-radius: 0px;
     box-sizing: border-box;
         }

     input[type=text]:focus,
 input[type=text]:hover, input[type=password]:focus,
 input[type=password]:hover {
 	outline: none;
     border-bottom: 1px solid #000;
         }

         button {
             background-color: #0D73A5;
             color: white;
             padding: 14px 20px;
             margin: 8px 0;
             border: none;
             cursor: pointer;
             width: 80%;
         }

         button:hover {
             opacity: 0.8;
         }
 button:disabled{
 	opacity: 0.8;
 }

         .cancelbtn {
             width: auto;
             padding: 10px 18px;
             background-color: #f44336;
         }

         .imgcontainer {
             text-align: center;
             margin: 24px 0 12px 0;
         }

         img.avatar {
             width: 80%;
         }

         .container {
             padding: 5px;
         }

         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%;
             }
         }
         #loader{
             position: absolute;
             width: 330px;
             left: calc(50% - 115px);
             top: calc(50% - 98px);
             height: 196px;
             opacity: 0;
             transition: 1s;
     overflow: hidden;
         }

         #loader>img{
             width: 330px;
         }
         #loader>svg{
 width: 80px;
     position: absolute;
     left: 54px;
     top: 22px;
     opacity: 1;
     transition: 1s;
             background: #E9EFED;
         }
     </style>
 </head>
 <body >

 <div id="loader">
     <img src="https://papygame.com/papyrus-plugin/img/papygame-blue.png"/>
     <svg version="1.1" id="loaderSvg" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
          viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
  <path fill="#333232" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
   c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
       <animateTransform
               attributeName="transform"
               attributeType="XML"
               type="rotate"
               dur="2s"
               from="0 50 50"
               to="360 50 50"
               repeatCount="indefinite" />
   </path>
         <path fill="#0D73A5" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
   c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z">
       <animateTransform
               attributeName="transform"
               attributeType="XML"
               type="rotate"
               dur="1s"
               from="0 50 50"
               to="-360 50 50"
               repeatCount="indefinite" />
   </path>
         <path fill="#809E09" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
   L82,35.7z">
       <animateTransform
               attributeName="transform"
               attributeType="XML"
               type="rotate"
               dur="2s"
               from="0 50 50"
               to="360 50 50"
               repeatCount="indefinite" />
   </path>
 </svg>
 <div id="myForm">
     <div class="container">
         <!--<label for="uname"><b>Username</b></label>!-->
         <input type="text" placeholder="Enter Username" name="uname" id="uname" required>
         <input type="password" placeholder="Enter Password" name="psw" id="psw" required>
 		<label id="accountLabel" for="confirmPassword">Oops, we couldn't find your username :( <br> Are you new ? Please confirm your password to create your account.</label>
         <input type="password" placeholder="Confirm Password" name="confirmPassword" id="confirmPassword" required>
         <input type="text" placeholder="Sponsor (optional)" name="sponsor" id="sponsor">

         <button type="submit" id="submitButton" disabled>Login</button>
 		<div id="errorMessage"></div>
 		<div id="explanationMessage"></div>

         <!--<label>
             <input type="checkbox" checked="checked" name="remember"> Remember me
         </label>-->
     </div>


 </div>
 </div>
 </body>

 <script>
 function logBrowser(){
 	var nVer = navigator.appVersion;
 var nAgt = navigator.userAgent;
 var browserName  = navigator.appName;
 var fullVersion  = ''+parseFloat(navigator.appVersion);
 var majorVersion = parseInt(navigator.appVersion,10);
 var nameOffset,verOffset,ix;

 // In Opera, the true version is after "Opera" or after "Version"
 if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
  browserName = "Opera";
  fullVersion = nAgt.substring(verOffset+6);
  if ((verOffset=nAgt.indexOf("Version"))!=-1)
    fullVersion = nAgt.substring(verOffset+8);
 }
 // In MSIE, the true version is after "MSIE" in userAgent
 else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
  browserName = "Microsoft Internet Explorer";
  fullVersion = nAgt.substring(verOffset+5);
 }
 // In Chrome, the true version is after "Chrome"
 else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
  browserName = "Chrome";
  fullVersion = nAgt.substring(verOffset+7);
 }
 // In Safari, the true version is after "Safari" or after "Version"
 else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
  browserName = "Safari";
  fullVersion = nAgt.substring(verOffset+7);
  if ((verOffset=nAgt.indexOf("Version"))!=-1)
    fullVersion = nAgt.substring(verOffset+8);
 }
 // In Firefox, the true version is after "Firefox"
 else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
  browserName = "Firefox";
  fullVersion = nAgt.substring(verOffset+8);
 }
 // In most other browsers, "name/version" is at the end of userAgent
 else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) <
           (verOffset=nAgt.lastIndexOf('/')) )
 {
  browserName = nAgt.substring(nameOffset,verOffset);
  fullVersion = nAgt.substring(verOffset+1);
  if (browserName.toLowerCase()==browserName.toUpperCase()) {
   browserName = navigator.appName;
  }
 }
 // trim the fullVersion string at semicolon/space if present
 if ((ix=fullVersion.indexOf(";"))!=-1)
    fullVersion=fullVersion.substring(0,ix);
 if ((ix=fullVersion.indexOf(" "))!=-1)
    fullVersion=fullVersion.substring(0,ix);

 majorVersion = parseInt(''+fullVersion,10);
 if (isNaN(majorVersion)) {
  fullVersion  = ''+parseFloat(navigator.appVersion);
  majorVersion = parseInt(navigator.appVersion,10);
 }

 logBrowserJava(''
  +'Browser name  = '+browserName+'<br>'
  +'Full version  = '+fullVersion+'<br>'
  +'Major version = '+majorVersion+'<br>'
  +'navigator.appName = '+navigator.appName+'<br>'
  +'navigator.userAgent = '+navigator.userAgent+'<br>'
 );
 }

 </script>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">

	<style>
	html{
	height: 100%;
	}
	button,
	input{
	font-family: 'Share Tech Mono', monospace !important;
	border-radius: 5px;
	font-size: 1em;
	}
	#accountLabel,
	#errorMessage{
	text-align: left;
	width: 80%;
	font-size: 0.7em;
	font-family: 'Share Tech Mono', monospace !important;
	}
	#accountLabel{
	display: none;
	}
	#errorMessage{
	color: #ff2020;
	display: inline-block;
	}
	#sponsor,
	#confirmPassword{
	display: none;
	}
	body {
	margin: 0;
	}

	#myForm {
	width: 100%;
	text-align: center;
	font-family: 'Cabin Sketch', cursive !important;
	}

	h2 {
	font-size: 3em;
	padding: 0;
	margin: 15px;
	color: orange;
	text-align: center;
	}

	input[type=text], input[type=password] {
	width: 80%;
	padding: 0 0 5px 0;
	margin: 12px 0;
	display: inline-block;
	border-bottom: 1px solid #ccc;
	border-left: none;
	border-right: none;
	border-top: none;
	border-radius: 0px;
	box-sizing: border-box;
	}

	input[type=text]:focus,
	input[type=text]:hover, input[type=password]:focus,
	input[type=password]:hover {
	outline: none;
	border-bottom: 1px solid #000;
	}

	button {
	background-color: #0D73A5;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	cursor: pointer;
	width: 80%;
	}

	button:hover {
	opacity: 0.8;
	}
	button:disabled{
	opacity: 0.8;
	}

	.cancelbtn {
	width: auto;
	padding: 10px 18px;
	background-color: #f44336;
	}

	.imgcontainer {
	text-align: center;
	margin: 24px 0 12px 0;
	}

	img.avatar {
	width: 80%;
	}

	.container {
	padding: 5px;
	}

	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%;
	}
	}
	#loader{
	position: absolute;
	width: 330px;
	left: calc(50% - 115px);
	top: calc(50% - 98px);
	height: 196px;
	opacity: 0;
	transition: 1s;
	overflow: hidden;
	}

	#loader>img{
	width: 330px;
	}
	#loader>svg{
	width: 80px;
	position: absolute;
	left: 54px;
	top: 22px;
	opacity: 1;
	transition: 1s;
	background: #E9EFED;
	}
	</style>
	</head>
	<body >

	<div id="loader">
	<img src="https://papygame.com/papyrus-plugin/img/papygame-blue.png"/>
	<svg version="1.1" id="loaderSvg" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
	viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
	<path fill="#333232" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
	c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
	<animateTransform
	attributeName="transform"
	attributeType="XML"
	type="rotate"
	dur="2s"
	from="0 50 50"
	to="360 50 50"
	repeatCount="indefinite" />
	</path>
	<path fill="#0D73A5" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
	c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z">
	<animateTransform
	attributeName="transform"
	attributeType="XML"
	type="rotate"
	dur="1s"
	from="0 50 50"
	to="-360 50 50"
	repeatCount="indefinite" />
	</path>
	<path fill="#809E09" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
	L82,35.7z">
	<animateTransform
	attributeName="transform"
	attributeType="XML"
	type="rotate"
	dur="2s"
	from="0 50 50"
	to="360 50 50"
	repeatCount="indefinite" />
	</path>
	</svg>
	<div id="myForm">
	<div class="container">
	<!--<label for="uname"><b>Username</b></label>!-->
	<input type="text" placeholder="Enter Username" name="uname" id="uname" required>
	<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
	<label id="accountLabel" for="confirmPassword">Oops, we couldn't find your username :( <br> Are you new ? Please confirm your password to create your account.</label>
	<input type="password" placeholder="Confirm Password" name="confirmPassword" id="confirmPassword" required>
	<input type="text" placeholder="Sponsor (optional)" name="sponsor" id="sponsor">

	<button type="submit" id="submitButton" disabled>Login</button>
	<div id="errorMessage"></div>
	<div id="explanationMessage"></div>

	<!--<label>
	<input type="checkbox" checked="checked" name="remember"> Remember me
	</label>-->
	</div>


	</div>
	</div>
	</body>

	<script>
	function logBrowser(){
	var nVer = navigator.appVersion;
	var nAgt = navigator.userAgent;
	var browserName = navigator.appName;
	var fullVersion = ''+parseFloat(navigator.appVersion);
	var majorVersion = parseInt(navigator.appVersion,10);
	var nameOffset,verOffset,ix;

	// In Opera, the true version is after "Opera" or after "Version"
	if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
	browserName = "Opera";
	fullVersion = nAgt.substring(verOffset+6);
	if ((verOffset=nAgt.indexOf("Version"))!=-1)
	fullVersion = nAgt.substring(verOffset+8);
	}
	// In MSIE, the true version is after "MSIE" in userAgent
	else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
	browserName = "Microsoft Internet Explorer";
	fullVersion = nAgt.substring(verOffset+5);
	}
	// In Chrome, the true version is after "Chrome"
	else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
	browserName = "Chrome";
	fullVersion = nAgt.substring(verOffset+7);
	}
	// In Safari, the true version is after "Safari" or after "Version"
	else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
	browserName = "Safari";
	fullVersion = nAgt.substring(verOffset+7);
	if ((verOffset=nAgt.indexOf("Version"))!=-1)
	fullVersion = nAgt.substring(verOffset+8);
	}
	// In Firefox, the true version is after "Firefox"
	else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
	browserName = "Firefox";
	fullVersion = nAgt.substring(verOffset+8);
	}
	// In most other browsers, "name/version" is at the end of userAgent
	else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) <
	(verOffset=nAgt.lastIndexOf('/')) )
	{
	browserName = nAgt.substring(nameOffset,verOffset);
	fullVersion = nAgt.substring(verOffset+1);
	if (browserName.toLowerCase()==browserName.toUpperCase()) {
	browserName = navigator.appName;
	}
	}
	// trim the fullVersion string at semicolon/space if present
	if ((ix=fullVersion.indexOf(";"))!=-1)
	fullVersion=fullVersion.substring(0,ix);
	if ((ix=fullVersion.indexOf(" "))!=-1)
	fullVersion=fullVersion.substring(0,ix);

	majorVersion = parseInt(''+fullVersion,10);
	if (isNaN(majorVersion)) {
	fullVersion = ''+parseFloat(navigator.appVersion);
	majorVersion = parseInt(navigator.appVersion,10);
	}

	logBrowserJava(''
	+'Browser name = '+browserName+'<br>'
	+'Full version = '+fullVersion+'<br>'
	+'Major version = '+majorVersion+'<br>'
	+'navigator.appName = '+navigator.appName+'<br>'
	+'navigator.userAgent = '+navigator.userAgent+'<br>'
	);
	}

	</script>
	</html>