diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index a6a17fb1..fea87f4f 100644
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@@ -1,8 +1,20 @@
+/*******************************************************************************
+ * *
+ * Fonts *
+ * *
+ ******************************************************************************/
+
@font-face {
font-family: 'Avenir Book';
src: url('../fonts/Avenir.ttc');
}
+/*******************************************************************************
+ * *
+ * Element Styles *
+ * *
+ ******************************************************************************/
+
/* Reset body, html, and div presets. */
body, html, div {
margin: 0px;
@@ -23,7 +35,7 @@ p {
/*******************************************************************************
* *
- * frame.ejs *
+ * Frame Styles (frame.ejs) *
* *
******************************************************************************/
@@ -82,7 +94,7 @@ p {
/*******************************************************************************
* *
- * login.ejs *
+ * Login View (login.ejs) *
* *
******************************************************************************/
@@ -161,53 +173,52 @@ p {
letter-spacing: 0.3em;
}*/
+
/*******************************************************************************
* *
- * index.ejs *
+ * Landing View (Structural Styles) *
* *
******************************************************************************/
+/* Main content container. */
#main {
height: calc(100% - 22px);
}
+/* Upper content container. */
#main > #upper {
height: 77%;
display: flex;
}
-
-#main > #lower {
- height: 23%;
- display: flex;
- background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
-}
-
#main > #upper > #left {
display: inline-flex;
width: 15%;
height: 100%;
justify-content: flex-end;
}
-
#main > #upper > #content {
display: inline-flex;
width: 59%;
height: 100%;
}
-
#main > #upper > #right {
display: inline-flex;
width: 26%;
height: 100%;
}
+/* Lower content container. */
+#main > #lower {
+ height: 23%;
+ display: flex;
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+}
#main > #lower > #left {
height: 100%;
width: 33%;
display: inline-flex;
justify-content: center;
}
-
#main > #lower > #left #content {
position: relative;
top: 25px;
@@ -215,32 +226,33 @@ p {
line-height: 24px;
left: 50px;
}
-
#main > #lower > #center {
height: 100%;
width: 34%;
display: inline-flex;
justify-content: center;
}
-
#main > #lower > #center #content {
position: relative;
top: 10px;
}
-
#main > #lower > #right {
height: 100%;
width: 33%;
display: inline-flex;
}
-#main > #lower > #right #launch_content {
- position: relative;
- top: 25px;
- display: inline-flex;
- line-height: 24px;
-}
+/*******************************************************************************
+ * *
+ * Landing View (Top Styles) *
+ * *
+ ******************************************************************************/
+/* * *
+* Landing View (Top Styles) | Left Content
+* * */
+
+/* Logo image. */
#image_seal {
height: 70px;
width: auto;
@@ -248,24 +260,43 @@ p {
margin-top: 50px;
border: 2px solid white;
border-radius: 50%;
+ box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
}
-#user_content > #top {
+/* * *
+* Landing View (Bottom Styles) | Right Content
+* * */
+
+/* Wrapper container for top, right content. */
+#rightContainer {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ top: 50px;
+ align-items: flex-end;
+ height: calc(100% - 50px);
+}
+
+/* Right hand user content container. */
+#user_content {
display: flex;
align-items: center;
justify-content: center;
- position: relative;
- top: 50px;
+ box-sizing: border-box;
+ height: 75px;
}
+/* User profile avater. */
#user_avatar {
border-radius: 50%;
border: 2px solid #cad7e1;
background: rgba(1, 2, 1, 0.5);
height: 70px;
width: auto;
+ box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
}
+/* User profile name text. */
#user_text {
font-family: 'Avenir Book';
font-size: 12px;
@@ -278,75 +309,38 @@ p {
right: 25px;
text-align: right;
}
-/*
-#main_progress[value] {
- height: 32px;
- width: 245px;
- -webkit-appearance: none;
-}
-#main_progress[value]:before {
- position: absolute;
- content: attr(data-label);
- color: white;
- font-family: 'Avenir Book';
- font-size: 15px;
- line-height: 32px;
- margin-left: 8px;
-}
-
-#main_progress[value]::-webkit-progress-bar {
- border-radius: 20px 0px 0px 20px;
- background-color: black;
-}
-
-#main_progress[value]::-webkit-progress-value {
- background-color: black;
- background-image: -webkit-linear-gradient(-45deg,
- transparent 33%, rgba(0, 0, 0, .1) 33%,
- rgba(0,0, 0, .1) 66%, transparent 66%),
--webkit-linear-gradient(top,
- rgba(255, 255, 255, .25),
- rgba(0, 0, 0, .25)),
--webkit-linear-gradient(left, #09c, #f44);
- border-radius: 20px 0px 0px 20px;
- background-size: 35px 20px, 100% 100%, 100% 100%;
-}
-
-#launch_area_container {
+/* Social media icon content container. */
+#media_container {
+ position: relative;
display: flex;
- position: absolute;
- left: 40px;
- top: 32px;
+ flex-direction: column;
+ right: 25px;
+ align-items: flex-end;
+ margin-top: 40px;
+ height: 100%;
}
-.home_btn {
- background-color: black;
- color: white;
- font-family: 'Avenir Book';
- border: none;
- border-radius: 20px;
- font-size: 11px;
- height: 20px;
- padding: 0px 17px 0px 12px;
- line-height: 20px;
+/* Social Media Icon division containers. */
+#internalMedia, #externalMedia {
+ display: flex;
+ flex-direction: column;
}
-.home_btn:focus {
- outline: 0px;
+/* Social media icon shared styles. */
+.mediaSVG {
+ fill: #ffffff;
+ margin-top: 15px;
+ height: 12px;
}
-#mojang_btn {
- position: absolute;
- left: 150px;
-}
-
-#mojang_btn:before {
- color: #93b253;
- content: '\2022 ';
- line-height: 20px;
-} */
+/*******************************************************************************
+ * *
+ * Landing View (Bottom Styles) *
+ * *
+ ******************************************************************************/
+/* Style for a general label on the bottom of the landing view. */
.bot_label {
color: white;
font-family: 'Avenir Book';
@@ -356,6 +350,20 @@ p {
text-shadow: 0px 0px 0px #bebcbb;
}
+/* Divider used on the bottom of the landing view. */
+.bot_divider {
+ height: 25px;
+ width: 2px;
+ background: rgba(107, 105, 105, 0.7);
+ margin-left: 20px;
+ margin-right: 20px;
+}
+
+/* * *
+* Landing View (Bottom Styles) | Left Content
+* * */
+
+/* Span which displays the player count of the selected server. */
#player_count {
color: #949494;
font-family: 'Avenir Book';
@@ -365,20 +373,18 @@ p {
margin-left: 10px;
}
-.bot_divider {
- height: 25px;
- width: 2px;
- background: rgba(107, 105, 105, 0.7);
- margin-left: 20px;
- margin-right: 20px;
-}
-
+/* Icon which displays the status of the mojang services. */
#mojang_status_icon {
font-size: 30px;
color: #848484;
margin-left: 15px;
}
+/* * *
+* Landing View (Bottom Styles) | Center Content
+* * */
+
+/* Button which opens the menu view. */
#menu_button {
font-family: 'Avenir Book';
background: none;
@@ -386,11 +392,13 @@ p {
cursor: pointer;
}
+/* Arrow image which floats above the menu button. */
#menu_img {
height: 11px;
margin-left: -2px;
}
+/* Span which contains the menu button text. */
#menu_text {
color: white;
font-weight: 900;
@@ -401,6 +409,19 @@ p {
display: flex;
}
+/* * *
+* Landing View (Bottom Styles) | Right Content
+* * */
+
+/* Main launch content container. */
+#main > #lower > #right #launch_content {
+ position: relative;
+ top: 25px;
+ display: inline-flex;
+ line-height: 24px;
+}
+
+/* The launch button. */
#launch_button {
font-family: 'Avenir Book';
background: none;
@@ -414,44 +435,19 @@ p {
padding: 0px;
}
+/* Launch details main container, hidden until launch processing begins. */
#launch_details {
position: relative;
top: 25px;
- /*display: flex;*/
display: none;
}
-
+
+/* Left side of launch details container, displays percentage and a divider. */
#launch_details_left {
display: flex;
}
-#launch_details_right {
- display: flex;
- flex-direction: column;
- justify-content: center;
-}
-
-#launch_progress[value] {
- height: 3px;
- width: 265px;
- -webkit-appearance: none;
-}
-
-#launch_progress[value]::-webkit-progress-bar {
- background-color: transparent;
-}
-
-#launch_progress[value]::-webkit-progress-value {
- background-color: #fff;
-}
-
-#launch_details_text {
- font-size: 11px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
-}
-
+/* Span which displays percentage complete. */
#launch_progress_label {
color: white;
font-family: 'Avenir Book';
@@ -462,4 +458,32 @@ p {
min-width: 53.21px;
max-width: 53.21px;
text-align: right;
+}
+
+/* Right side of launch details container, displays progress bar and details. */
+#launch_details_right {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+/* Progress bar styles. */
+#launch_progress[value] {
+ height: 3px;
+ width: 265px;
+ -webkit-appearance: none;
+}
+#launch_progress[value]::-webkit-progress-bar {
+ background-color: transparent;
+}
+#launch_progress[value]::-webkit-progress-value {
+ background-color: #fff;
+}
+
+/* Span which displays information about the status of the launch process. */
+#launch_details_text {
+ font-size: 11px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
}
\ No newline at end of file
diff --git a/app/index.ejs b/app/index.ejs
index 8fb17992..22078121 100644
--- a/app/index.ejs
+++ b/app/index.ejs
@@ -22,12 +22,48 @@
<div id="content">
</div>
<div id="right">
- <div id="user_content">
- <div id="top">
+ <div id="rightContainer">
+ <div id="user_content">
<span id="user_text">Username</span>
<img id="user_avatar" src="https://cdn.discordapp.com/avatars/169197209630277642/6650b5a50e1cb3d00a79b9b88b9a0cd4.png"/>
</div>
- <div id="bottom">
+ <div id="media_container">
+ <div id="internalMedia">
+ <svg id="newsSVG" class="mediaSVG" x="0px" y="0px" viewBox="0 0 297 297" height="20px" width="25px">
+ <g>
+ <path d="M286.933,262.429c5.56,0,10.067-4.508,10.067-10.068V44.64c0-5.56-4.508-10.068-10.067-10.068H44.677c-5.56,0-10.067,4.508-10.067,10.068v24.553H10.067C4.508,69.192,0,73.7,0,79.261v173.1c0,5.561,4.508,10.068,10.067,10.068 H286.933z M20.136,89.328h14.474v152.965H20.136V89.328z M276.864,242.293H54.745V54.707h222.119V242.293z"/>
+ <path d="M165.804,193.189h86.52c5.56,0,10.067-4.508,10.067-10.067V96.572c0-5.56-4.508-10.068-10.067-10.068h-86.52c-5.56,0-10.067,4.509-10.067,10.068v86.549C155.736,188.681,160.244,193.189,165.804,193.189z M175.872,106.64h66.383v66.413h-66.383V106.64z"/>
+ <path d="M79.284,227.808h173.039c5.56,0,10.067-4.508,10.067-10.068c0-5.56-4.508-10.067-10.067-10.067H79.284c-5.561,0-10.068,4.508-10.068,10.067C69.216,223.3,73.724,227.808,79.284,227.808z"/>
+ <path d="M79.284,106.64h51.913c5.56,0,10.067-4.508,10.067-10.067c0-5.56-4.508-10.068-10.067-10.068H79.284c-5.561,0-10.068,4.509-10.068,10.068C69.216,102.132,73.724,106.64,79.284,106.64z"/>
+ <path d="M79.284,141.26h51.913c5.56,0,10.067-4.508,10.067-10.067c0-5.561-4.508-10.068-10.067-10.068H79.284c-5.561,0-10.068,4.508-10.068,10.068C69.216,136.752,73.724,141.26,79.284,141.26z"/>
+ <path d="M79.284,175.876h51.913c5.56,0,10.067-4.508,10.067-10.068c0-5.56-4.508-10.067-10.067-10.067H79.284c-5.561,0-10.068,4.508-10.068,10.067C69.216,171.368,73.724,175.876,79.284,175.876z"/>
+ </g>
+ </svg>
+ </div>
+ <div id="externalMedia">
+ <svg id="linkSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">
+ <g>
+ <path d="M75.37,65.51a3.85,3.85,0,0,0-1.73.42,8.22,8.22,0,0,1,.94,3.76A8.36,8.36,0,0,1,66.23,78H46.37a8.35,8.35,0,1,1,0-16.7h9.18a21.51,21.51,0,0,1,6.65-8.72H46.37a17.07,17.07,0,1,0,0,34.15H66.23A17,17,0,0,0,82.77,65.51Z"/>
+ <path d="M66,73.88a3.85,3.85,0,0,0,1.73-.42,8.22,8.22,0,0,1-.94-3.76,8.36,8.36,0,0,1,8.35-8.35H95A8.35,8.35,0,1,1,95,78H85.8a21.51,21.51,0,0,1-6.65,8.72H95a17.07,17.07,0,0,0,0-34.15H75.13A17,17,0,0,0,58.59,73.88Z"/>
+ </g>
+ </svg>
+ <svg id="twitterSVG" class="mediaSVG" width="25px" height="20px" viewBox="0 0 5000 4060" preserveAspectRatio="xMidYMid meet">
+ <g>
+ <path d="M1210 4048 c-350 -30 -780 -175 -1124 -378 -56 -33 -86 -57 -86 -68 0 -16 7 -17 83 -9 114 12 349 1 493 -22 295 -49 620 -180 843 -341 l54 -38 -49 -7 c-367 -49 -660 -256 -821 -582 -30 -61 -53 -120 -51 -130 3 -16 12 -17 73 -13 97 7 199 5 270 -4 l60 -9 -65 -22 c-341 -117 -609 -419 -681 -769 -18 -88 -26 -226 -13 -239 4 -3 32 7 63 22 68 35 198 77 266 86 28 4 58 9 68 12 10 2 -22 -34 -72 -82 -240 -232 -353 -532 -321 -852 15 -149 79 -347 133 -418 16 -20 17 -19 49 20 377 455 913 795 1491 945 160 41 346 74 485 86 l82 7 -7 -59 c-5 -33 -7 -117 -6 -189 2 -163 31 -286 103 -430 141 -285 422 -504 708 -550 112 -19 333 -19 442 0 180 30 335 108 477 239 l58 54 95 -24 c143 -36 286 -89 427 -160 70 -35 131 -60 135 -56 19 19 -74 209 -151 312 -50 66 -161 178 -216 217 l-30 22 73 -14 c111 -21 257 -63 353 -101 99 -39 99 -39 99 -19 0 57 -237 326 -412 468 l-88 71 6 51 c4 28 1 130 -5 226 -30 440 -131 806 -333 1202 -380 745 -1036 1277 -1823 1477 -243 62 -430 81 -786 78 -134 0 -291 -5 -349 -10z"/>
+ </g> </svg>
+ <svg id="instagramSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">
+ <path d="M91.31,38.27H50a10.81,10.81,0,0,0-10.8,10.8V90.33A10.81,10.81,0,0,0,50,101.13H91.31a10.81,10.81,0,0,0,10.8-10.8V49.06A10.81,10.81,0,0,0,91.31,38.27Zm3.27,10.8v7.36H83.83V45.8h7.48A3.27,3.27,0,0,1,94.58,49.06Zm-23.9,10A10.64,10.64,0,1,1,60,69.7,10.66,10.66,0,0,1,70.68,59.05ZM91.31,93.6H50a3.27,3.27,0,0,1-3.27-3.27V63.6h6.86a18,18,0,0,0-1.13,6.1,18.17,18.17,0,1,0,36.35,0,18,18,0,0,0-1.13-6.1h6.86V90.33A3.27,3.27,0,0,1,91.31,93.6Z"/>
+ </svg>
+ <svg id="youtubeSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px"> <g>
+ <path d="M84.8,69.52,65.88,79.76V59.27Zm23.65.59c0-5.14-.79-17.63-3.94-20.57S99,45.86,73.37,45.86s-28,.73-31.14,3.68S38.29,65,38.29,70.11s.79,17.63,3.94,20.57,5.52,3.68,31.14,3.68,28-.74,31.14-3.68,3.94-15.42,3.94-20.57"/>
+ </g>
+ </svg>
+ <svg id="discordSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">
+ <g>
+ <path d="M81.23,78.48a6.14,6.14,0,1,1,6.14-6.14,6.14,6.14,0,0,1-6.14,6.14M60,78.48a6.14,6.14,0,1,1,6.14-6.14A6.14,6.14,0,0,1,60,78.48M104.41,73c-.92-7.7-8.24-22.9-8.24-22.9A43,43,0,0,0,88,45.59a17.88,17.88,0,0,0-8.38-1.27l-.13,1.06a23.52,23.52,0,0,1,5.8,1.95,87.59,87.59,0,0,1,8.17,4.87s-10.32-5.63-22.27-5.63a51.32,51.32,0,0,0-23.2,5.63,87.84,87.84,0,0,1,8.17-4.87,23.57,23.57,0,0,1,5.8-1.95l-.13-1.06a17.88,17.88,0,0,0-8.38,1.27,42.84,42.84,0,0,0-8.21,4.56S37.87,65.35,37,73s-.37,11.54-.37,11.54,4.22,5.68,9.9,7.14,7.7,1.47,7.7,1.47l3.75-4.68a21.22,21.22,0,0,1-4.65-2A24.47,24.47,0,0,1,47.93,82S61.16,88.4,70.68,88.4c10,0,22.75-6.44,22.75-6.44a24.56,24.56,0,0,1-5.35,4.56,21.22,21.22,0,0,1-4.65,2l3.75,4.68s2,0,7.7-1.47,9.89-7.14,9.89-7.14.55-3.85-.37-11.54"/>
+ </g>
+ </svg>
+ </div>
</div>
</div>
</div>