Created
August 27, 2019 12:29
-
-
Save Fray117/40e60be9f5fd28745bdf5931906d9db6 to your computer and use it in GitHub Desktop.
Simple Login Template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
<meta name="twitter:card" value="RESTRICTED AREA ON GLOBEDNET"> | |
<meta property="og:title" content="RESTIRCTED AREA ON GLOBEDNET"> | |
<meta property="og:type" content="website"> | |
<title>Authorization Gate</title> | |
<style media="screen" type="text/css"> | |
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */ | |
html { | |
-ms-text-size-adjust: 100%; | |
-webkit-text-size-adjust: 100%; | |
} | |
body { | |
margin: 0; | |
} | |
a { | |
background-color: transparent; | |
-webkit-text-decoration-skip: objects; | |
} | |
a: active, a: hover { | |
outline-width: 0; | |
} | |
abbr[title] { | |
border-bottom: none; | |
text-decoration: underline; | |
-webkit-text-decoration: underline dotted; | |
text-decoration: underline dotted; | |
} | |
dfn { | |
font-style: italic; | |
} | |
mark { | |
background: #ff0; | |
color: #000; | |
} | |
small { | |
font-size: 80%; | |
} | |
sub, sup { | |
font-size: 75%; | |
line-height: 0; | |
position: relative; | |
vertical-align: baseline; | |
} | |
sub { | |
bottom: -0.25em; | |
} | |
sup { | |
top: -0.5em; | |
} | |
figure { | |
margin: 1em 40px; | |
} | |
img { | |
border-style: none; | |
} | |
svg: not(: root) { | |
overflow: hidden; | |
} | |
code, kbd, pre, samp { | |
font-family: monospace, monospace; | |
font-size: 1em; | |
} | |
hr { | |
box-sizing: content-box; | |
height: 0; | |
overflow: visible; | |
} | |
button, input, select, textarea { | |
font: inherit; | |
margin: 0; | |
} | |
optgroup { | |
font-weight: bold; | |
} | |
fieldset { | |
border: 1px solid #c0c0c0; | |
margin: 0 2px; | |
padding: .35em .625em .75em; | |
} | |
legend { | |
color: inherit; | |
display: table; | |
max-width: 100%; | |
padding: 0; | |
white-space: normal; | |
} | |
textarea { | |
overflow: auto; | |
} | |
[type=checkbox], [type=radio] { | |
padding: 0; | |
} | |
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { | |
height: auto; | |
} | |
[type=search] { | |
-webkit-appearance: textfield; | |
outline-offset: -2px; | |
} | |
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { | |
-webkit-appearance: none; | |
} | |
::-webkit-input-placeholder { | |
color: inherit; | |
opacity: 0.54; | |
} | |
::-webkit-file-upload-button { | |
-webkit-appearance: button; | |
font: inherit; | |
} | |
/* End extract */ | |
html { | |
margin: 20px auto; | |
background: #000000; | |
color: #00FF00; | |
text-align: center; | |
font-family: "Courier New"; | |
white-space: nowrap; | |
font-size: 15px; | |
line-height: 1.5; | |
overflow-x: hidden; | |
} | |
h1, h2, h3, h4, h5, h6 { | |
font-weight: 200; | |
margin: 10px 0; | |
} | |
hr { | |
border: 0; | |
border-top: 1px solid #eee; | |
margin: 20px 0; | |
} | |
.image { | |
max-width: 100%; | |
height: auto; | |
} | |
img { | |
vertical-align: middle; | |
} | |
a { | |
color: inherit; | |
} | |
.legal { | |
position: absolute; | |
left: 0; | |
bottom: 0; | |
} | |
.jumbo { | |
font-size: 64px!important; | |
} | |
.left-align { | |
text-align: left!important; | |
} | |
.right-align { | |
text-align: right!important; | |
} | |
.center { | |
text-align: center!important; | |
} | |
form { | |
font-family: "Courier New"; | |
white-space: nowrap; | |
} | |
input[type=password]{ | |
font-size: 20px; | |
width: 400px; | |
height: 40px; | |
color: red; | |
background: transparent; | |
border: 1px solid #00FF00; | |
text-align: center; | |
} | |
input[type=password]:hover { | |
background-color: #1A1A1A | |
} | |
input[type=text] { | |
font-size: 20px; | |
width: 400px; | |
height: 40px; | |
color: #00FF00; | |
background: transparent; | |
border: 1px solid #00FF00; | |
text-align: center; | |
} | |
input[type=text]:hover { | |
background-color: #1A1A1A; | |
} | |
input[type=submit] { | |
width: 400px; | |
height: 40px; | |
color: #00FF00; | |
background: #000000; | |
border: 1px solid #00FF00; | |
text-align: center; | |
} | |
input[type=submit]:hover { | |
background-color: #00FF00; | |
color: #000000; | |
} | |
.no-js #plod0, #plod1 { | |
display: none; | |
} | |
#plod0, #plod1{ | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
z-index: 1; | |
width: 150px; | |
height: 150px; | |
margin: -75px 0 0 -75px; | |
border: 16px solid #F3F3F3; | |
border-radius: 50%; | |
border-top: 16px solid #00FF00; | |
border-top: 16px solid transparent; | |
width: 120px; | |
height: 120px; | |
} | |
#plod0 { | |
-webkit-animation: spin 1s linear infinite; | |
animation: spin 1s linear infinite; | |
} | |
#plod1 { | |
-webkit-animation: spin 2s linear infinite; | |
animation: spin 2s linear infinite; | |
} | |
@-webkit-keyframes spin{ | |
0% { | |
-webkit-transform: rotate(0deg); | |
} | |
100% { | |
-webkit-transform: rotate(360deg); | |
} | |
} | |
@keyframes spin{ | |
0% { | |
transform: rotate(0deg); | |
} | |
100% { | |
transform: rotate(360deg); | |
} | |
} | |
.dimmer { | |
-webkit-animation-name: dim; | |
-webkit-animation-duration:1s; | |
animation-name: dim; | |
animation-duration:1s | |
} | |
@-webkit-keyframes dim{ | |
from { | |
opacity:0 | |
} | |
to { | |
opacity:1 | |
} | |
} | |
@keyframes dim{ | |
from { | |
opacity:0 | |
} | |
to { | |
opacity:1 | |
} | |
} | |
#login { | |
display:none; | |
text-align:center; | |
} | |
#widgets { | |
display:none; | |
} | |
</style> | |
</head> | |
<body onload="plod()" style="margin:0;"> | |
<div id="plod0"></div> | |
<div id="plod1"></div> | |
<div style="display: none;" id="login" class="dimmer"> | |
<pre> | |
<h1 class="center jumbo">GlobedNet</h1> | |
<form class="center" method="post"> | |
<input type="text" name="username" placeholder="Username" required><br> | |
<input type="password" name="password" placeholder="Password" required><br><br> | |
<input type="submit" name="login" value="LOGIN"> | |
</form> | |
</pre> | |
</div> | |
<div id="widgets" class="legal dimmer">Copyright (c) 2019 Libels Computer Club</div> | |
<script type="text/javascript"> | |
var bootTime; | |
function plod() { | |
bootTime = setTimeout(showPage, 1500); | |
} | |
function showPage() { | |
document.getElementById("plod0").style.display = "none"; | |
document.getElementById("plod1").style.display = "none"; | |
document.getElementById("login").style.display = "block"; | |
document.getElementById("widgets").style.display = "block"; | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment