welcome.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Ansible Matrix</title>
<style type="text/css">

/* Copied from chat.mozilla.org */

/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
 * voodoo where we have to set display: none by default
 */

h1::after {
    content: "!";
}

.mx_Parent {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    padding: 25px 35px;
    color: #2e2f32;
}

.mx_Logo {
    height: 54px;
    margin-top: 2px;
}

.mx_ButtonGroup {
    margin-top: 10px;
}

.mx_ButtonRow {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 12px 0 0;
}

.mx_ButtonRow > * {
    margin: 0 10px;
}

.mx_ButtonRow > *:first-child {
    margin-left: 0;
}

.mx_ButtonRow > *:last-child {
    margin-right: 0;
}

.mx_ButtonParent {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 10px 20px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 4px;
    width: 150px;
    background-repeat: no-repeat;
    background-position: 10px center;
    text-decoration: none;
    color: #2e2f32 !important;
}

.mx_ButtonLabel {
    margin-left: 20px;
}

.mx_Header_title {
    font-size: 24px;
    font-weight: 600;
    margin: 20px 0 0;
}

.mx_Header_subtitle {
    font-size: 14px;
    font-weight: normal;
    margin: 8px 0 0;
}

.mx_ButtonSignIn {
    background-color: #368BD6;
    color: white !important;
}

.mx_ButtonCreateAccount {
    background-color: #0DBD8B;
    color: white !important;
}

.mx_SecondaryButton {
    background-color: #FFFFFF;
    color: #2E2F32;
}

.mx_Button_iconSignIn {
    background-image: url('welcome/images/icon-sign-in.svg');
}
.mx_Button_iconCreateAccount {
    background-image: url('welcome/images/icon-create-account.svg');
}
.mx_Button_iconHelp {
    background-image: url('welcome/images/icon-help.svg');
}
.mx_Button_iconRoomDirectory {
    background-image: url('welcome/images/icon-room-directory.svg');
}

/*
.mx_WelcomePage_loggedIn is applied by EmbeddedPage from the Welcome component
If it is set on the page, we should show the buttons. Otherwise, we have to assume
we don't have an account and should hide them. No account == no guest account either.
 */
.mx_WelcomePage:not(.mx_WelcomePage_loggedIn) .mx_WelcomePage_guestFunctions {
    display: none;
}

.mx_ButtonRow.mx_WelcomePage_guestFunctions {
    margin-top: 20px;
}
.mx_ButtonRow.mx_WelcomePage_guestFunctions > div {
    margin: 0 auto;
}

@media only screen and (max-width: 480px) {
    .mx_ButtonRow {
        flex-direction: column;
    }

    .mx_ButtonRow > * {
        margin: 0 0 10px 0;
    }
}

/* Start: Custom EMS styles */
.mx_Parent {
    max-width: 450px;
}
.mx_ModularContainer {
    max-width: 800px;
    display: block;
}
.mx_ModularList {
    text-align: left;
}
.mx_ModularServerTable {
    margin-top: 20px;
    text-align: left;
    font-size: 14px;
}
/* End: Custom EMS styles */


</style>
</head>

<body>
    <div class="mx_Parent">
        <a href="https://ansible.com/community" target="_blank" rel="noopener">
            <img src="https://www.ansible.com/hubfs/2016_Images/Assets/Ansible-Mark-Large-RGB-Pool.png?hsLang=en-us" alt="Ansible Logo" class="mx_Logo">
        </a>
        
        <h1 class="mx_Header_title">Welcome to the Ansible Community</h1>
        <p class="mx_Header_subtitle mx_ModularContainer">Sign in directly if you have an account here.</p>
        <p class="mx_Header_subtitle mx_ModularContainer"><strong>Open registrations are not yet available</strong>, but if you have a registration token
            from the community team you can use it here. All Ansible community rooms are available to other Matrix instances through federation. Please
            register with <a href="https://app.element.io/#/register">matrix.org</a> or another homeserver if you don't have a token.</p>
        <p class="mx_Header_subtitle mx_ModularContainer">All participants are expected to respect and uphold Ansible's code of conduct. For
            more details, please read <a href="https://docs.ansible.com/ansible/latest/community/code_of_conduct.html">Ansible's
            Code of Conduct</a>.</p>

        <div class="mx_ButtonGroup">
            <div class="mx_ButtonRow">
                <a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">
                    <div class="mx_ButtonLabel">Sign in to Ansible.im</div>
                </a>
                <a href="#/register" class="mx_ButtonParent mx_ButtonCreateAccount mx_Button_iconCreateAccount">
                    <div class="mx_ButtonLabel">Create account via token</div>
                </a>
            </div>
            <div class="mx_ButtonRow mx_WelcomePage_guestFunctions">
                <div>
                    <a href="#/directory" class="mx_ButtonParent mx_SecondaryButton mx_Button_iconRoomDirectory">
                        <div class="mx_ButtonLabel">Explore the Ansible rooms</div>
                    </a>
                </div>
            </div>
        </div>
        
        </br>
    
        <details>
            <summary>Server Details</summary>
            <table class="mx_ModularServerTable">
                <tbody><tr> 
                    <th>Homeserver:</th>
                    <td>https://chat.ansible.im</td>
                </tr>
                <tr>
                    <th>Identity server:</th>
                    <td>https://vector.im</td>
                </tr></tbody>
            </table>
        </details>
       
    </div>
</body>
</html>