slackin-php/index.html

229 lines
4.8 KiB
HTML
Raw Permalink Normal View History

2016-07-30 13:43:18 +02:00
<!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>