welcome.html (5432B)
1 <style type="text/css"> 2 /* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid 3 * voodoo where we have to set display: none by default 4 */ 5 6 .mx_Header_title::after { 7 content: "!"; 8 } 9 10 .mx_Parent { 11 display: -webkit-box; 12 display: -webkit-flex; 13 display: -ms-flexbox; 14 display: flex; 15 -webkit-box-orient: vertical; 16 -webkit-box-direction: normal; 17 -webkit-flex-direction: column; 18 -ms-flex-direction: column; 19 flex-direction: column; 20 -webkit-box-pack: center; 21 -webkit-justify-content: center; 22 -ms-flex-pack: center; 23 justify-content: center; 24 -webkit-box-align: center; 25 -webkit-align-items: center; 26 -ms-flex-align: center; 27 align-items: center; 28 text-align: center; 29 padding: 25px 35px; 30 } 31 32 .mx_Logo { 33 height: 54px; 34 margin-top: 2px; 35 } 36 37 .mx_ButtonGroup { 38 margin-top: 10px; 39 } 40 41 .mx_ButtonRow { 42 display: -webkit-box; 43 display: -webkit-flex; 44 display: -ms-flexbox; 45 display: flex; 46 -webkit-justify-content: space-around; 47 -ms-flex-pack: distribute; 48 -webkit-box-align: center; 49 -webkit-align-items: center; 50 -ms-flex-align: center; 51 align-items: center; 52 justify-content: space-between; 53 box-sizing: border-box; 54 margin: 12px 0 0; 55 } 56 57 .mx_ButtonRow > * { 58 margin: 0 10px; 59 } 60 61 .mx_ButtonRow > *:first-child { 62 margin-left: 0; 63 } 64 65 .mx_ButtonRow > *:last-child { 66 margin-right: 0; 67 } 68 69 .mx_ButtonParent { 70 display: -webkit-box; 71 display: -webkit-flex; 72 display: -ms-flexbox; 73 display: flex; 74 padding: 10px 20px; 75 -webkit-box-orient: horizontal; 76 -webkit-box-direction: normal; 77 -webkit-flex-direction: row; 78 -ms-flex-direction: row; 79 flex-direction: row; 80 -webkit-box-pack: center; 81 -webkit-justify-content: center; 82 -ms-flex-pack: center; 83 justify-content: center; 84 -webkit-box-align: center; 85 -webkit-align-items: center; 86 -ms-flex-align: center; 87 align-items: center; 88 border-radius: 4px; 89 width: 150px; 90 background-repeat: no-repeat; 91 background-position: 10px center; 92 text-decoration: none; 93 color: #2e2f32 !important; 94 } 95 96 .mx_ButtonLabel { 97 margin-left: 20px; 98 } 99 100 .mx_Header_title { 101 font-size: 24px; 102 font-weight: 600; 103 margin: 20px 0 0; 104 } 105 106 .mx_Header_subtitle { 107 font-size: 12px; 108 font-weight: normal; 109 margin: 8px 0 0; 110 } 111 112 .mx_ButtonSignIn { 113 background-color: #368bd6; 114 color: white !important; 115 } 116 117 .mx_ButtonCreateAccount { 118 background-color: #0dbd8b; 119 color: white !important; 120 } 121 122 .mx_SecondaryButton { 123 background-color: #ffffff; 124 color: #2e2f32; 125 } 126 127 .mx_Button_iconSignIn { 128 background-image: url("welcome/images/icon-sign-in.svg"); 129 } 130 .mx_Button_iconCreateAccount { 131 background-image: url("welcome/images/icon-create-account.svg"); 132 } 133 .mx_Button_iconHelp { 134 background-image: url("welcome/images/icon-help.svg"); 135 } 136 .mx_Button_iconRoomDirectory { 137 background-image: url("welcome/images/icon-room-directory.svg"); 138 } 139 140 /* 141 .mx_WelcomePage_loggedIn is applied by EmbeddedPage from the Welcome component 142 If it is set on the page, we should show the buttons. Otherwise, we have to assume 143 we don't have an account and should hide them. No account == no guest account either. 144 */ 145 .mx_WelcomePage:not(.mx_WelcomePage_loggedIn) .mx_WelcomePage_guestFunctions { 146 display: none; 147 } 148 149 .mx_ButtonRow.mx_WelcomePage_guestFunctions { 150 margin-top: 20px; 151 } 152 .mx_ButtonRow.mx_WelcomePage_guestFunctions > div { 153 margin: 0 auto; 154 } 155 156 @media only screen and (max-width: 480px) { 157 .mx_ButtonRow { 158 flex-direction: column; 159 } 160 161 .mx_ButtonRow > * { 162 margin: 0 0 10px 0; 163 } 164 } 165 </style> 166 167 <div class="mx_Parent"> 168 <a href="https://element.io" target="_blank" rel="noopener"> 169 <img src="$logoUrl" alt="$brand" class="mx_Logo" /> 170 </a> 171 <h1 class="mx_Header_title">_t("welcome_to_element")</h1> 172 <!-- XXX: Our translations system isn't smart enough to recognize variables in the HTML, so we manually do it --> 173 <h2 class="mx_Header_subtitle">_t("powered_by_matrix_with_logo")</h2> 174 <div class="mx_ButtonGroup"> 175 <div class="mx_ButtonRow"> 176 <a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn"> 177 <div class="mx_ButtonLabel">_t("action|sign_in")</div> 178 </a> 179 <a href="#/register" class="mx_ButtonParent mx_ButtonCreateAccount mx_Button_iconCreateAccount"> 180 <div class="mx_ButtonLabel">_t("action|create_account")</div> 181 </a> 182 </div> 183 <div class="mx_ButtonRow mx_WelcomePage_guestFunctions"> 184 <div> 185 <a href="#/directory" class="mx_ButtonParent mx_SecondaryButton mx_Button_iconRoomDirectory"> 186 <div class="mx_ButtonLabel">_t("action|explore_rooms")</div> 187 </a> 188 </div> 189 </div> 190 </div> 191 </div>