status homepage

config.sample.json

@@ -7,6 +7,7 @@
     "bug_report_endpoint_url": "https://riot.im/bugreports/submit",
     "enableLabs": true,
     "default_federate": true,
+    "welcomePageUrl": "home.html",
     "default_theme": "light",
     "roomDirectory": {
         "servers": [

res/home-status.html

@@ -0,0 +1,184 @@
+<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
+ */
+
+.mx_HomePage_container {
+    text-align: center;
+    display: block ! important;
+    width: 690px;
+    margin: 20px;
+}
+
+.mx_HomePage_header {
+    margin-top: 37px;
+    margin-left: 10px;
+    width: 670px;
+    box-sizing: border-box;
+    font-size: 18px;
+    background-color: #fff;
+    box-shadow: 0px 2px 10px 0px rgba(48,55,81,0.05);
+    border-radius: 5px;
+    padding: 20px 80px 20px 80px;
+    align-items: center;
+}
+
+.mx_HomePage_header h1 {
+    font-size: 29px;
+    margin-bottom: 10px;
+}
+
+.mx_HomePage_intro h2 {
+    margin-top: 32px;
+    font-size: 25px;
+    color: #49555F;
+}
+
+.mx_HomePage_intro {
+    margin: auto;
+    width: 600px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+    font-size: 18px;
+}
+
+.mx_HomePage_coc {
+    font-size: 16px;
+}
+
+.mx_HomePage_coc a {
+    color: #4360DF;
+}
+
+.mx_HomePage_room, .mx_HomePage_telegram {
+    float: left;
+    background-color: #fff;
+    box-shadow: 0px 2px 10px 0px rgba(48,55,81,0.05);
+    border-radius: 5px;
+    margin: 10px;
+    width: 210px;
+    height: 250px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.mx_HomePage_telegram {
+    background-color: transparent;
+    border: 1px solid rgba(113, 129, 142, 0.2);
+    box-shadow: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    font-size: 16px;
+    line-height: 25px;
+    box-sizing: border-box;
+}
+
+.mx_HomePage_telegram a {
+    text-transform: uppercase;
+    color: #4360DF;
+    font-size: 13px;
+    font-family: PostGrotesk-Medium;        
+}
+
+.mx_HomePage_room .mx_HomePage_icon {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    width: 50px;
+    height: 50px;
+}
+
+.mx_HomePage_room .mx_HomePage_name {
+    display: block;
+    font-family: PostGrotesk-Medium;
+    font-weight: 600;
+    font-size: 15px;
+    color: #49555F;
+    line-height: 25px;
+    margin: 0px 12px 0px 12px;
+}
+
+.mx_HomePage_room .mx_HomePage_desc {
+    flex: 1;
+    display: block;
+    margin: 0px 12px 0px 12px;
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.mx_HomePage_button {
+    align-self: normal;
+    margin: 12px;
+    border-radius: 8px;
+    border: 1px solid rgba(199, 206, 209, 0.12);
+    background-color: #6CC1F6;
+    font-size: 13px;
+    font-family: PostGrotesk-Medium;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: #fff ! important;
+    cursor: pointer;
+    outline: none;
+    padding: 14px;
+    box-sizing: border-box;
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+}
+
+</style>
+
+<div class="mx_HomePage_container">
+    <div class="mx_HomePage_header">
+        <div>
+            <h1>Welcome to Status Community Chat, powered by Riot.</h1>
+            <p>For contributors, developers and Ethereum-enthusiasts who care about the movement for decentralization.</p>
+        </div>
+    </div>
+
+    <div class="mx_HomePage_intro">
+        <h2>Our rooms</h2>
+        <p>Please abide by the channels discussion categories and remain on topic to the specific category details listed.</p>
+        <p class="mx_HomePage_coc">Before posting please refer to our <a href="#">Code of Conduct</a></p>
+    </div>
+
+
+    <div class="mx_HomePage_room">
+        <img class="mx_HomePage_icon" src="themes/status/img/a.png">
+        <span class="mx_HomePage_name">#announcements</span>
+        <span class="mx_HomePage_desc">Company wide announcements.</span>
+        <a class="mx_HomePage_button" href="#/room/#announcements:status.im">Join</a>
+    </div>
+    <div class="mx_HomePage_room">
+        <img class="mx_HomePage_icon" src="themes/status/img/i.png">
+        <span class="mx_HomePage_name">#introductions</span>
+        <span class="mx_HomePage_desc">Newcomer introductions.</span>
+        <a class="mx_HomePage_button" href="#/room/#introductions:status.im">Join</a>
+    </div>
+    <div class="mx_HomePage_room">
+        <img class="mx_HomePage_icon" src="themes/status/img/g.png">
+        <span class="mx_HomePage_name">#general</span>
+        <span class="mx_HomePage_desc">General discussions of Status.</span>
+        <a class="mx_HomePage_button" href="#/room/#general:status.im">Join</a>
+    </div>
+    <div class="mx_HomePage_room">
+        <img class="mx_HomePage_icon" src="themes/status/img/d.png">
+        <span class="mx_HomePage_name">#dev-status</span>
+        <span class="mx_HomePage_desc">Contributing to our codebase? Building a DApp or a chatbot? We're here to help.</span>
+        <a class="mx_HomePage_button" href="#/room/#dev-status:status.im">Join</a>
+    </div>
+    <div class="mx_HomePage_room">
+        <img class="mx_HomePage_icon" src="themes/status/img/n.png">
+        <span class="mx_HomePage_name">#news-articles</span>
+        <span class="mx_HomePage_desc">Share news, articles related to Ethereum or projects you're excited about</span>
+        <a class="mx_HomePage_button" href="#/room/#news-articles:status.im">Join</a>
+    </div>
+    <div class="mx_HomePage_telegram">
+        <p>
+            Interested in market and cryptocurrency type discussions?
+        </p>
+        <a href="#">Join Telegram</a>
+    </div>
+</div>

scripts/copy-res.js

@@ -42,6 +42,7 @@ const INCLUDE_LANGS = [
 const COPY_LIST = [
     ["res/manifest.json", "webapp"],
     ["res/home.html", "webapp"],
+    ["res/home-status.html", "webapp"],
     ["res/home/**", "webapp/home"],
     ["res/{media,vector-icons}/**", "webapp"],
     ["res/flags/*", "webapp/flags/"],