Merge pull request #310 from WatWowMap/landing-page-adjustments

versx · web-flow · commit 021c800f62a3 · 2021-01-03T19:22:37.000-08:00
Homepage Adjustments
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/configs/config.example.json b/src/configs/config.example.json
@@ -3,10 +3,16 @@
     "port": 8080,
     "title": "MapJS",
     "headerTitle": "MapJS - NodeJS Map Replacement",
-    "homePage": true,
     "locale": "en",
     "style": "dark",
     "sessionSecret": "98ki^e72~!@#(85o3kXLI*#c9wu5l!Z",
+    "homepage": {
+        "enabled": false,
+        "title": "Welcome to MapJS",
+        "descriptionLine1": "The best place to find Pokemon, Raids, Quests, and more!",
+        "descriptionLine2": "Please login or join our Discord for more info...",
+        "discordInvite": "https://discord.gg/yourInvite"
+    },
     "map": {
         "startLat": 0,
         "startLon": 0,
@@ -46,7 +52,6 @@
     },
     "discord": {
         "enabled": false,
-        "invite": "https://discord.gg/invite_link",
         "logChannelId": "",
         "status": "Map Status: Online",
         "botToken": "",
diff --git a/src/configs/default.json b/src/configs/default.json
@@ -22,6 +22,13 @@
         "url": "",
         "maxScouts": 15
     },
+    "homepage": {
+        "enabled": false,
+        "title": "Welcome to MapJS",
+        "descriptionLine1": "The best place to find Pokemon, Raids, Quests, and more!",
+        "descriptionLine2": "Please login or join our Discord for more info...",
+        "discordInvite": "https://discord.gg/yourInvite"
+    },
     "map": {
         "startLat": 0,
         "startLon": 0,
diff --git a/src/routes/ui.js b/src/routes/ui.js
@@ -17,7 +17,7 @@ if (config.discord.enabled) {
     });
 
     router.get('/logout', (req, res) => {
-        if (config.homePage) {
+        if (config.homepage.enabled) {
             res.redirect('/home');
         } else {
             res.redirect('/login');
@@ -32,10 +32,13 @@ router.get(['/', '/index'], async (req, res) => {
     res.render('index', data);
 });
 
-if (config.homePage) {
+if (config.homepage.enabled) {
     router.get('/home', (req, res) => {
         const data = {};
-        data.discord_invite = config.discord.invite;
+        data.discord_invite = config.homepage.discordInvite;
+        data.map_title = config.homepage.title;
+        data.description_1 = config.homepage.descriptionLine1;
+        data.description_2 = config.homepage.descriptionLine2;
         res.render('home', data);
     });
 }
diff --git a/src/views/blocked.mustache b/src/views/blocked.mustache
@@ -27,18 +27,22 @@
             #transbox {
                 background-color:rgba(255,255,255,0.8);
                 padding:20px;
+                border-radius: 20px;
             }
 
             .title {
                 text-align:center;
                 font-size: 2em;
                 color: #3C5FA3;
+                font-weight: bold;
+                font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             }
 
             .container {
                 width: 90%;
                 margin: 0 auto;
                 padding: 30px;
+                border-radius: 10px;
             }
 
             .clearfix:after {
@@ -56,6 +60,8 @@
                 margin-left: 10px;
                 margin-bottom: 10px;
                 white-space: pre-wrap;
+                font-weight: bold;
+                font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             }
 
             .make-center {
@@ -66,6 +72,7 @@
             .square_btn{
                 display: inline-block;
                 padding: 7px 20px;
+                border: solid 3px black;
                 border-radius: 25px;
                 text-decoration: none;
                 color: #FFF;
@@ -78,17 +85,22 @@
                 background-image: -webkit-linear-gradient(45deg, #7289da 0%, #3659d8 100%);
                 background-image: linear-gradient(45deg, #7289da 0%, #3659d8 100%);
             }
+
+            a {
+                font-weight: bold;
+                font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            }
         </style>
     </head>
     <body>
         <div class="container clearfix background">
             <div id="transbox">
               <title>Access denied</title>
-              <div class="title">Access denied!</div>
+              <div class="title">Access denied!</div><br>
                 <div class="description">{{username}} has been blocked for being a member of {{guild_name}}.
 Please join our discord for more info.</div>
                 <div class="make-center">
-                    <a href="/login" class="square_btn">Login</a><a href="{{discord_invite}}" class="square_btn">Join Our Discord</a>
+                    <a href="/login" class="square_btn">Login</a>&nbsp;&nbsp;<a href="{{discord_invite}}" class="square_btn">Join Our Discord</a>
                 </div>
             </div>
         </div>
diff --git a/src/views/home.mustache b/src/views/home.mustache
@@ -27,18 +27,22 @@
             #transbox {
                 background-color:rgba(255,255,255,0.8);
                 padding:20px;
+                border-radius: 20px;
             }
 
             .title {
                 text-align:center;
                 font-size: 2em;
                 color: #3C5FA3;
+                font-weight: bold;
+                font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             }
 
             .container {
                 width: 90%;
                 margin: 0 auto;
                 padding: 30px;
+                border-radius: 10px;
             }
 
             .clearfix:after {
@@ -56,6 +60,8 @@
                 margin-left: 10px;
                 margin-bottom: 10px;
                 white-space: pre-wrap;
+                font-weight: bold;
+                font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             }
 
             .make-center {
@@ -66,6 +72,7 @@
             .square_btn{
                 display: inline-block;
                 padding: 7px 20px;
+                border: solid 3px black;
                 border-radius: 25px;
                 text-decoration: none;
                 color: #FFF;
@@ -78,17 +85,21 @@
                 background-image: -webkit-linear-gradient(45deg, #7289da 0%, #3659d8 100%);
                 background-image: linear-gradient(45deg, #7289da 0%, #3659d8 100%);
             }
+
+            a {
+                font-weight: bold;
+                font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            }
         </style>
     </head>
     <body>
         <div class="container clearfix background">
             <div id="transbox">
               <title>Welcome</title>
-              <div class="title">Welcome</div>
-                <div class="description">The best place to find pokemon.</div>
-                <div class="description">Please login or join discord for more info...</div>
+              <div class="title">{{map_title}}</div><br>
+                <div class="description">{{description_1}}<br><br>{{description_2}}</div>
                 <div class="make-center">
-                    <a href="/login" class="square_btn">Login</a><a href="{{discord_invite}}" class="square_btn">Join Our Discord</a>
+                    <a href="/login" class="square_btn">Login</a>&nbsp;&nbsp;<a href="{{discord_invite}}" class="square_btn">Join Our Discord</a>
                 </div>
             </div>
         </div>
