racha.non
9 years ago
9 changed files with 208 additions and 624 deletions
@ -1,99 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html> |
|
||||||
<head> |
|
||||||
<style> |
|
||||||
/* The Modal (background) */ |
|
||||||
.modal { |
|
||||||
display: none; /* Hidden by default */ |
|
||||||
position: fixed; /* Stay in place */ |
|
||||||
z-index: 1; /* Sit on top */ |
|
||||||
padding-top: 100px; /* Location of the box */ |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
width: 100%; /* Full width */ |
|
||||||
height: 100%; /* Full height */ |
|
||||||
overflow: auto; /* Enable scroll if needed */ |
|
||||||
background-color: rgb(0,0,0); /* Fallback color */ |
|
||||||
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ |
|
||||||
} |
|
||||||
|
|
||||||
/* Modal Content */ |
|
||||||
.modal-content { |
|
||||||
background-color: #fefefe; |
|
||||||
margin: auto; |
|
||||||
padding: 20px; |
|
||||||
border: 1px solid #888; |
|
||||||
width: 80%; |
|
||||||
} |
|
||||||
|
|
||||||
/* The Close Button */ |
|
||||||
.close { |
|
||||||
color: #aaaaaa; |
|
||||||
float: right; |
|
||||||
font-size: 28px; |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
|
|
||||||
.close:hover, |
|
||||||
.close:focus { |
|
||||||
color: #000; |
|
||||||
text-decoration: none; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
</style> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
|
|
||||||
<h2>Modal Example</h2> |
|
||||||
|
|
||||||
<!-- Trigger/Open The Modal --> |
|
||||||
<button id="1">Open Modal</button> |
|
||||||
<button id="2">Open Modal</button> |
|
||||||
<button id="3">Open Modal</button> |
|
||||||
<button id="4">Open Modal</button> |
|
||||||
<!-- The Modal --> |
|
||||||
<div id="myModal" class="modal"> |
|
||||||
|
|
||||||
<!-- Modal content --> |
|
||||||
<div class="modal-content"> |
|
||||||
<span class="close">×</span> |
|
||||||
<p>Some text in the Modal..</p> |
|
||||||
</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script> |
|
||||||
// Get the modal |
|
||||||
var modal = document.getElementById('myModal'); |
|
||||||
|
|
||||||
// Get the button that opens the modal |
|
||||||
var btn = document.getElementById("2"); |
|
||||||
|
|
||||||
// Get the <span> element that closes the modal |
|
||||||
var span = document.getElementsByClassName("close")[0]; |
|
||||||
|
|
||||||
// When the user clicks the button, open the modal |
|
||||||
btn.onclick = function() { |
|
||||||
modal.style.display = "block"; |
|
||||||
} |
|
||||||
|
|
||||||
// When the user clicks on <span> (x), close the modal |
|
||||||
span.onclick = function() { |
|
||||||
modal.style.display = "none"; |
|
||||||
} |
|
||||||
|
|
||||||
// When the user clicks anywhere outside of the modal, close it |
|
||||||
window.onclick = function(event) { |
|
||||||
console.log(event) |
|
||||||
if (event.target == modal) { |
|
||||||
console.log(modal) |
|
||||||
console.log(modal.style.display) |
|
||||||
modal.style.display = "none"; |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -0,0 +1,47 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
||||||
|
<title>Login Form</title> |
||||||
|
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> |
||||||
|
<link type="text/css" rel="stylesheet" href="css/stdb.css" media="screen,projection"/> |
||||||
|
<link rel="shortcut icon" type="image/png" href="https://avatars1.githubusercontent.com/u/17867603?v=3&s=200"/> |
||||||
|
<script src="js/jquery-3.0.0.min.js"></script> |
||||||
|
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> |
||||||
|
<style> |
||||||
|
|
||||||
|
html { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
min-height: 100%; |
||||||
|
} |
||||||
|
a:active { |
||||||
|
-webkit-text-fill-color: #000000; |
||||||
|
-webkit-text-stroke-width: 2px; |
||||||
|
-webkit-text-stroke-color: #000000; |
||||||
|
} |
||||||
|
</style> |
||||||
|
</head> |
||||||
|
|
||||||
|
|
||||||
|
<body class="flexCenter" style="background-color:#0ca3d2;"> |
||||||
|
|
||||||
|
|
||||||
|
<div > |
||||||
|
<div> |
||||||
|
<a href="login.html" style="font-size:100px;color:#F0F0F0;" >LOGIN</a> |
||||||
|
<h style="font-size:200px;color:#F0F0F0;" >|</h> |
||||||
|
<a href="stat.html" style="font-size:100px;color:#F0F0F0;" >STAT</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body> |
||||||
|
<script language="javascript"> |
||||||
|
|
||||||
|
</script> |
||||||
|
</html> |
||||||
@ -1,152 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<meta charset="utf-8"> |
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|
||||||
<title>Login Form</title> |
|
||||||
<link rel="stylesheet" href="css/style.css"> |
|
||||||
<link rel="shortcut icon" type="image/png" href="https://avatars1.githubusercontent.com/u/17867603?v=3&s=200"/> |
|
||||||
<script src="js/jquery-3.0.0.min.js"></script> |
|
||||||
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> |
|
||||||
<style> |
|
||||||
.flexCenter { |
|
||||||
display:flex; |
|
||||||
height: 550px; |
|
||||||
justify-content: center; |
|
||||||
align-items:center; |
|
||||||
} |
|
||||||
</style> |
|
||||||
</head> |
|
||||||
|
|
||||||
|
|
||||||
<body> |
|
||||||
<section class="container"> |
|
||||||
<div class="login"> |
|
||||||
<h1>Login to STDB</h1> |
|
||||||
<form method="post" > |
|
||||||
<p><input type="text" name="login" value="" placeholder="token"></p> |
|
||||||
<p class="submit"><input type="button" value="decode" onClick="pasuser()"></p> |
|
||||||
</form> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
</body> |
|
||||||
<script language="javascript"> |
|
||||||
|
|
||||||
|
|
||||||
function pasuser(form) { |
|
||||||
var string = 'eyJ1c2VybmFtZSI6InJhY2hhbm9uIiwib3JpZ19pYXQiOjE0NjYxNTM5NDcsInVzZXJfaWQiOjEsImVtYWlsIjoiIiwiZXhwIjoxNDY2NTg1OTQ3fQ' |
|
||||||
|
|
||||||
var jwpStdb={ |
|
||||||
_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", |
|
||||||
encode:function(e){var t=""; |
|
||||||
var n,r,i,s,o,u,a; |
|
||||||
var f=0;e=jwpStdb._utf8_encode(e); |
|
||||||
while(f<e.length){ |
|
||||||
n=e.charCodeAt(f++); |
|
||||||
r=e.charCodeAt(f++); |
|
||||||
i=e.charCodeAt(f++);s=n>>2; |
|
||||||
o=(n&3)<<4|r>>4; |
|
||||||
u=(r&15)<<2|i>>6; |
|
||||||
a=i&63; |
|
||||||
if(isNaN(r)){ |
|
||||||
u=a=64 |
|
||||||
} |
|
||||||
else if(isNaN(i)){ |
|
||||||
a=64 |
|
||||||
} |
|
||||||
t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a) |
|
||||||
} |
|
||||||
return t |
|
||||||
}, |
|
||||||
decode:function(e){ |
|
||||||
var t=""; |
|
||||||
var n,r,i; |
|
||||||
var s,o,u,a; |
|
||||||
var f=0;e=e.replace(/[^A-Za-z0-9+/=]/g,""); |
|
||||||
while(f<e.length){ |
|
||||||
s=this._keyStr.indexOf(e.charAt(f++)); |
|
||||||
o=this._keyStr.indexOf(e.charAt(f++)); |
|
||||||
u=this._keyStr.indexOf(e.charAt(f++)); |
|
||||||
a=this._keyStr.indexOf(e.charAt(f++)); |
|
||||||
n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a; |
|
||||||
t=t+String.fromCharCode(n); |
|
||||||
if(u!=64){ |
|
||||||
t=t+String.fromCharCode(r) |
|
||||||
} |
|
||||||
if(a!=64){ |
|
||||||
t=t+String.fromCharCode(i) |
|
||||||
} |
|
||||||
} |
|
||||||
t=jwpStdb._utf8_decode(t); |
|
||||||
return t |
|
||||||
}, |
|
||||||
_utf8_encode:function(e){ |
|
||||||
e=e.replace(/rn/g,"n"); |
|
||||||
var t=""; |
|
||||||
for(var n=0;n<e.length;n++){ |
|
||||||
var r=e.charCodeAt(n); |
|
||||||
if(r<128){ |
|
||||||
t+=String.fromCharCode(r) |
|
||||||
} |
|
||||||
else if(r>127&&r<2048){ |
|
||||||
t+=String.fromCharCode(r>>6|192); |
|
||||||
t+=String.fromCharCode(r&63|128) |
|
||||||
} |
|
||||||
else{ |
|
||||||
t+=String.fromCharCode(r>>12|224); |
|
||||||
t+=String.fromCharCode(r>>6&63|128); |
|
||||||
t+=String.fromCharCode(r&63|128) |
|
||||||
} |
|
||||||
} |
|
||||||
return t |
|
||||||
}, |
|
||||||
_utf8_decode:function(e){ |
|
||||||
var t=""; |
|
||||||
var n=0; |
|
||||||
var r=c1=c2=0; |
|
||||||
while(n<e.length){ |
|
||||||
r=e.charCodeAt(n); |
|
||||||
if(r<128){ |
|
||||||
t+=String.fromCharCode(r); |
|
||||||
n++ |
|
||||||
} |
|
||||||
else if(r>191&&r<224){ |
|
||||||
c2=e.charCodeAt(n+1); |
|
||||||
t+=String.fromCharCode((r&31)<<6|c2&63); |
|
||||||
n+=2 |
|
||||||
} |
|
||||||
else{ |
|
||||||
c2=e.charCodeAt(n+1); |
|
||||||
c3=e.charCodeAt(n+2); |
|
||||||
t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63); |
|
||||||
n+=3 |
|
||||||
} |
|
||||||
} |
|
||||||
return t |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Define the string |
|
||||||
|
|
||||||
// Encode the String |
|
||||||
// var encodedString = jwpStdb.encode(string); |
|
||||||
console.log(string); // Outputs: "SGVsbG8gV29ybGQh" |
|
||||||
console.log('====================='); |
|
||||||
// Decode the String |
|
||||||
var decodedString = jwpStdb.decode(string); |
|
||||||
console.log(decodedString); |
|
||||||
var res = decodedString.replace(' ', ''); |
|
||||||
console.log(res); |
|
||||||
console.log(decodedString.length); |
|
||||||
console.log(res.length); |
|
||||||
console.log(typeof decodedString); |
|
||||||
JSON.parse(res, function(k, v) { |
|
||||||
if (k==='user_id'){ |
|
||||||
console.log(v) // return the unchanged property value. |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
</script> |
|
||||||
</html> |
|
||||||
Loading…
Reference in new issue