element-web/res/welcome.html

189 lines
4.7 KiB
HTML
Raw Normal View History

<style type="text/css">
/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
* voodoo where we have to set display: none by default
*/
2019-02-01 19:07:51 +01:00
h1::after {
content: "!";
}
2019-02-01 20:08:18 +01:00
.mx_HomePage_body {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
2019-02-01 19:07:51 +01:00
.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;
2019-02-01 20:08:18 +01:00
margin-bottom: 50px;
2019-02-01 19:07:51 +01:00
}
.mx_Well {
display: block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-radius: 10px;
background-color: #F2F5F8;
}
.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;
2019-02-01 19:58:30 +01:00
border-radius: 4px;
width: 150px;
background-repeat: no-repeat;
background-position: 10px center;
text-decoration: none;
color: #2e2f32 !important;
2019-02-01 19:07:51 +01:00
}
.mx_ButtonRow {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
2019-02-01 19:58:30 +01:00
width: 480px;
2019-02-01 19:07:51 +01:00
-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;
2019-02-01 19:58:30 +01:00
justify-content: space-between;
padding: 0 40px;
box-sizing: border-box;
margin: 28px 0;
2019-02-01 19:07:51 +01:00
}
.mx_buttonheadline {
margin-bottom: 14px;
}
.mx_buttonlabel {
margin-left: 20px;
}
.mx_buttonwrappertext {
2019-02-01 19:58:30 +01:00
font-size: 13px;
2019-02-01 19:07:51 +01:00
margin-bottom: 10px;
}
.mx_Header2 {
font-size: 32px;
2019-02-01 19:58:30 +01:00
font-weight: 600;
2019-02-01 19:07:51 +01:00
margin-top: 40px;
}
.mx_Header22 {
font-size: 14px;
font-weight: 200;
margin-bottom: 40px;
}
.mx_ButtonSignIn {
2019-02-01 19:58:30 +01:00
background-color: #368BD6;
color: white !important;
2019-02-01 19:07:51 +01:00
}
.mx_ButtonCreateAccount {
2019-02-01 19:58:30 +01:00
background-color: #03B381;
color: white !important;
}
2019-02-01 19:07:51 +01:00
.mx_secondarybutton {
2019-02-01 19:58:30 +01:00
background-color: #FFFFFF;
2019-02-01 19:07:51 +01:00
color: #2E2F32;
}
2019-02-01 19:58:30 +01:00
.mx_Button_iconSignIn {
background-image: url('welcome/images/icon-sign-in.svg');
2019-02-01 19:58:30 +01:00
}
.mx_Button_iconCreateAccount {
background-image: url('welcome/images/icon-create-account.svg');
2019-02-01 19:58:30 +01:00
}
.mx_Button_iconHelp {
background-image: url('welcome/images/icon-help.svg');
2019-02-01 19:58:30 +01:00
}
.mx_Button_iconRoomDirectory {
background-image: url('welcome/images/icon-room-directory.svg');
2019-02-01 19:58:30 +01:00
}
</style>
2019-02-01 19:07:51 +01:00
<div class="mx_Parent">
<a href="https://riot.im" target="_blank" rel="noopener">
<img src="welcome/images/logo.svg" alt="" class="mx_logo"/>
2019-02-01 19:07:51 +01:00
</a>
<h1 class="mx_Header2">_t("Welcome to Riot.im")</h1>
<h4 class="mx_Header22">_t("Decentralised, encrypted chat &amp; collaboration powered by [matrix]")</h4>
<div class="mx_Well">
<div class="mx_ButtonRow">
2019-02-01 19:58:30 +01:00
<a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">
<div class="mx_buttonlabel">_t("Sign In")</div>
</a>
<a href="#/register" class="mx_ButtonParent mx_ButtonCreateAccount mx_Button_iconCreateAccount">
<div class="mx_buttonlabel">_t("Create Account")</div>
</a>
</div>
2019-02-01 19:07:51 +01:00
<div class="mx_ButtonRow">
<div class="mx_buttonwrapper">
2019-02-01 19:58:30 +01:00
<div class="mx_buttonwrappertext">_t("Need help?")</div>
<a href="#/user/@riot-bot:matrix.org?action=chat" class="mx_ButtonParent mx_secondarybutton mx_Button_iconHelp">
<div class="mx_buttonlabel">_t("Chat with Riot Bot")</div>
</a>
2019-02-01 19:07:51 +01:00
</div>
<div class="mx_buttonwrapper">
2019-02-01 19:58:30 +01:00
<div class="mx_buttonwrappertext">_t("Explore rooms")</div>
<a href="#/directory" class="mx_ButtonParent mx_secondarybutton mx_Button_iconRoomDirectory">
<div class="mx_buttonlabel">_t("Room Directory")</div>
</a>
2019-02-01 19:07:51 +01:00
</div>
</div>
</div>
</div>