<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{site_name}</title>
<link rel="stylesheet" href="/share/bootstrap4/css/bootstrap.min.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#fbd308">
<meta name="theme-color" content="#fbd308">
<style>
#background {
z-index: -1;
display: block;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(to left,#0cd0f3,#dfd18e);
background: linear-gradient(to left,#0cd0f3,#dfd18e);
opacity: 0.8;
}
.jumbotron {
opacity: 0.8;
}
</style>
</head>
<body>
<div id="background" class="fixed-top overflow-hidden"></div>
<div class="container">
<div class="jumbotron m-md-3">
<h1 class="display-4">{site_name}</h1>
<p class="lead">Welcome to our chat service</p>
<hr class="my-4">
<p>{site_name} is an XMPP chat service.</p>
{message&<div class="alert {message.class?alert-info}" role="alert">
{message.text}
</div>}
<form method="POST" action="" class="d-inline">
<button class="btn btn-primary btn-lg mb-2" type="submit">Create account</button>
</form>
{var.links&{var.links#
<a class="btn btn-{item.class?secondary} btn-lg mb-2" href="{item.href}" role="button">{item.text}</a>
}}
{var.webchat&<p class="pt-2">Already have an account here? <a href="{var.webchat}">Log in via the web chat</a></p>}
</div>
</div>
<script src="/share/jquery/jquery.min.js"></script>
<script src="/share/bootstrap4/js/bootstrap.min.js"></script>
</body>
</html>