229 lines
4.8 KiB
HTML
229 lines
4.8 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="de">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
|
|||
|
|
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
|
|||
|
|
<title>Slack Invite</title>
|
|||
|
|
<style>
|
|||
|
|
.splash {
|
|||
|
|
width: 300px;
|
|||
|
|
margin: 200px auto;
|
|||
|
|
text-align: center;
|
|||
|
|
font-family: "Helvetica Neue", Helvetica, Arial
|
|||
|
|
}
|
|||
|
|
@media (max-width: 500px) {
|
|||
|
|
.splash {
|
|||
|
|
margin-top: 100px
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.head {
|
|||
|
|
margin-bottom: 40px
|
|||
|
|
}
|
|||
|
|
.logos {
|
|||
|
|
position: relative;
|
|||
|
|
margin-bottom: 40px
|
|||
|
|
}
|
|||
|
|
.logo {
|
|||
|
|
width: 48px;
|
|||
|
|
height: 48px;
|
|||
|
|
display: inline-block;
|
|||
|
|
background-size: cover
|
|||
|
|
}
|
|||
|
|
.logo.slack {
|
|||
|
|
background-image: url(https://a.slack-edge.com/66f9/img/icons/ios-64.png)
|
|||
|
|
}
|
|||
|
|
.logo.org::after {
|
|||
|
|
position: absolute;
|
|||
|
|
display: block;
|
|||
|
|
content: "+";
|
|||
|
|
top: 15px;
|
|||
|
|
left: 0;
|
|||
|
|
width: 300px;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #D6D6D6;
|
|||
|
|
font: 15px Helvetica Neue
|
|||
|
|
}
|
|||
|
|
.logo.org {
|
|||
|
|
background-image: url(https://s3-us-west-2.amazonaws.com/slack-files2/avatars/2016-05-31/46963461766_2f407e84c067da510e5c_88.png);
|
|||
|
|
margin-right: 70px
|
|||
|
|
}
|
|||
|
|
.coc {
|
|||
|
|
font-size: 12px;
|
|||
|
|
padding: 15px 0 5px;
|
|||
|
|
color: #666
|
|||
|
|
}
|
|||
|
|
.coc label {
|
|||
|
|
cursor: pointer
|
|||
|
|
}
|
|||
|
|
.coc input {
|
|||
|
|
appearance: none;
|
|||
|
|
-webkit-appearance: none;
|
|||
|
|
border: none;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
margin: 0 5px 0 0
|
|||
|
|
}
|
|||
|
|
.coc input::after {
|
|||
|
|
content: "";
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 15px;
|
|||
|
|
height: 15px;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
background: url(/assets/checkbox.svg);
|
|||
|
|
cursor: pointer
|
|||
|
|
}
|
|||
|
|
.coc input:checked::after {
|
|||
|
|
background-position: right
|
|||
|
|
}
|
|||
|
|
.coc a {
|
|||
|
|
color: #666
|
|||
|
|
}
|
|||
|
|
.coc a:hover {
|
|||
|
|
background-color: #666;
|
|||
|
|
text-decoration: none;
|
|||
|
|
color: #fff
|
|||
|
|
}
|
|||
|
|
p {
|
|||
|
|
font-size: 15px;
|
|||
|
|
margin: 5px 0
|
|||
|
|
}
|
|||
|
|
select {
|
|||
|
|
background: none
|
|||
|
|
}
|
|||
|
|
button,
|
|||
|
|
.form-item {
|
|||
|
|
font-size: 12px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
display: block;
|
|||
|
|
text-align: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 9px
|
|||
|
|
}
|
|||
|
|
button {
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
border-width: 0;
|
|||
|
|
background: #E01563;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
cursor: pointer;
|
|||
|
|
appearence: none;
|
|||
|
|
-webkit-appearence: none;
|
|||
|
|
outline: 0;
|
|||
|
|
transition: background-color 150ms ease-in, color 150ms ease-in
|
|||
|
|
}
|
|||
|
|
button.loading {
|
|||
|
|
pointer-events: none
|
|||
|
|
}
|
|||
|
|
button:disabled {
|
|||
|
|
color: #9B9B9B;
|
|||
|
|
background-color: #D6D6D6;
|
|||
|
|
cursor: default;
|
|||
|
|
pointer-events: none
|
|||
|
|
}
|
|||
|
|
button.error {
|
|||
|
|
background-color: #F4001E;
|
|||
|
|
text-transform: none
|
|||
|
|
}
|
|||
|
|
button.success:disabled {
|
|||
|
|
color: #fff;
|
|||
|
|
background-color: #68C200
|
|||
|
|
}
|
|||
|
|
button:not(.disabled):active {
|
|||
|
|
background-color: #7A002F
|
|||
|
|
}
|
|||
|
|
b {
|
|||
|
|
transition: transform 150ms ease-in
|
|||
|
|
}
|
|||
|
|
b.grow {
|
|||
|
|
transform: scale(1.3)
|
|||
|
|
}
|
|||
|
|
form {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
margin-bottom: 0
|
|||
|
|
}
|
|||
|
|
input {
|
|||
|
|
color: #9B9B9B;
|
|||
|
|
border: 1px solid #D6D6D6
|
|||
|
|
}
|
|||
|
|
input:focus {
|
|||
|
|
color: #666;
|
|||
|
|
border-color: #999;
|
|||
|
|
outline: 0
|
|||
|
|
}
|
|||
|
|
.active {
|
|||
|
|
color: #E01563
|
|||
|
|
}
|
|||
|
|
p.signin {
|
|||
|
|
padding: 10px 0 10px;
|
|||
|
|
font-size: 11px
|
|||
|
|
}
|
|||
|
|
p.signin a {
|
|||
|
|
color: #E01563;
|
|||
|
|
text-decoration: none
|
|||
|
|
}
|
|||
|
|
p.signin a:hover {
|
|||
|
|
background-color: #E01563;
|
|||
|
|
color: #fff
|
|||
|
|
}
|
|||
|
|
footer {
|
|||
|
|
color: #D6D6D6;
|
|||
|
|
font-size: 11px;
|
|||
|
|
margin: 200px auto 0;
|
|||
|
|
width: 300px;
|
|||
|
|
text-align: center
|
|||
|
|
}
|
|||
|
|
footer a {
|
|||
|
|
color: #9B9B9B;
|
|||
|
|
text-decoration: none;
|
|||
|
|
border-bottom: 1px solid #9B9B9B
|
|||
|
|
}
|
|||
|
|
footer a:hover {
|
|||
|
|
color: #fff;
|
|||
|
|
background-color: #9B9B9B
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="splash">
|
|||
|
|
<div class="logos">
|
|||
|
|
<div class="logo org"></div><div class="logo slack"></div>
|
|||
|
|
</div>
|
|||
|
|
<p>
|
|||
|
|
Join <b>TheTownServer</b> on Slack.
|
|||
|
|
</p>
|
|||
|
|
<form>
|
|||
|
|
<input type="text" id="email" placeholder="you@yourdomain.com" autofocus="true" class="form-item">
|
|||
|
|
<input type="password" id="passwd" placeholder="TheTown Password" placeholder="" class="form-item">
|
|||
|
|
<button id="sendInvite" class="">Get my Invite</button>
|
|||
|
|
</form>
|
|||
|
|
<p class="signin">
|
|||
|
|
or <a href="https://thetownserver.slack.com" target="_top">sign in</a>.
|
|||
|
|
</p>
|
|||
|
|
<footer>designe by <a href="http://rauchg.com/slackin" target="_blank">slackin</a></footer>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
<script>
|
|||
|
|
$( "#sendInvite" ).click(function(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
$.ajax({
|
|||
|
|
method: "POST",
|
|||
|
|
url: "invite.php",
|
|||
|
|
data: {email: $('#email').val(), passwd: $('#passwd').val()}
|
|||
|
|
})
|
|||
|
|
.done (function (data) {
|
|||
|
|
if(data.indexOf("SUCCESS:") == 0) {
|
|||
|
|
alert(data);
|
|||
|
|
} else {
|
|||
|
|
alert("Es ist ein Fehler aufgetreten: " + data);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.fail(function (jqXHR, exception) {
|
|||
|
|
console.log(exception);
|
|||
|
|
alert("Es ist ein Fehler aufgetreten: " + exception);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</html>
|