Initial design commit

package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "angular-electron",
+  "name": "skirda-launcher",
-  "version": "11.1.0",
+  "version": "0.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "angular-electron",
+      "name": "skirda-launcher",
-      "version": "11.1.0",
+      "version": "0.0.0",
       "hasInstallScript": true,
       "dependencies": {
         "@angular/common": "14.0.6",
@@ -57,7 +57,7 @@
         "karma-jasmine-html-reporter": "2.0.0",
         "node-polyfill-webpack-plugin": "2.0.0",
         "npm-run-all": "4.1.5",
-        "playwright": "1.23.4",
+        "playwright": "^1.23.4",
         "ts-node": "10.9.1",
         "typescript": "~4.7.4",
         "wait-on": "6.0.1",

package.json

@@ -93,7 +93,7 @@
     "karma-jasmine-html-reporter": "2.0.0",
     "node-polyfill-webpack-plugin": "2.0.0",
     "npm-run-all": "4.1.5",
-    "playwright": "1.23.4",
+    "playwright": "^1.23.4",
     "ts-node": "10.9.1",
     "typescript": "~4.7.4",
     "wait-on": "6.0.1",

src/app/game-side-button/game-side-button.component.html

@@ -1 +1,18 @@
-AAAAAAAA
+<div class="GameBar">
+	<div class="img cornering">
+		<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTENKPSC6g94JwGU4-HeYtwTDS6MW2_RO6TL51IDw9H2Gy9HfOkt8xx3VYAqSqW944M03E&usqp=CAU" height="60px" width="60px">
+	</div>
+	<div class="two-lines-centered">
+		<div class="first-line">
+			<div class="text header">
+				<span>Warface</span>
+			</div>
+			<div class="label">
+				Pirate
+			</div>
+		</div> 
+		<div class="text light darken">
+			<span>2 people voted. Need 4 more to play.</span>
+		</div>
+	</div>
+</div>

src/app/game-side-button/game-side-button.component.scss

@@ -0,0 +1,27 @@
+/*********************************************/
+/************** Games Bar *******************/
+/*********************************************/
+
+#GamesBar {
+	margin-left: 15px;
+}
+.GameBar {
+	display: flex;
+	margin-top: 13px;
+	padding: 10px 0 2px 10px;
+	margin-right: 15px;
+}
+.GameBar:hover {
+	background-color: rgba(255, 255, 255, 0.2);
+	border-radius: 10px;
+	-webkit-backdrop-filter: drop-shadow(5px 5px 0px #ffffff);
+	backdrop-filter: drop-shadow(5px 5px 4px #ffffff);
+}
+.GameBar > .two-lines-centered {
+	margin-top: 5px;
+	margin-left: 15px;
+}
+.SessionCount {
+	font-size: 13px;
+	margin: 20px 0 20px 10px;
+}

src/app/home/home.component.html

@@ -1,9 +1,67 @@
 <div class="container">
-  <h1 class="title">
+	<div id="LeftBar">
-    {{ 'PAGES.HOME.TITLE' | translate }}
+		<div class="ProfileBar">
-  </h1>
+			<div class="img rounded" id="ProfilePicture">
-  <div class="games-icons-panel">asdasdasdasdasdasd</div>
+				<img src="./assets/avatar.jpeg" height="45px" width="45px">
-  <a routerLink="/detail">{{ 'PAGES.HOME.GO_TO_DETAIL' | translate }}</a>
+			</div>
+			<div class="two-lines-centered">
+				<div class="first-line">
+					<div class="text header big">
+						<span>MrSandyMoon</span>
+					</div>
+					<div class="label">
+						Booster
+					</div>
+				</div>
+				<div class="text light darken">
+					<span>Administrator</span>
+				</div>
+			</div>
+		</div>
+
+		<hr>
+
+		<div id="GamesBar">
+
+			<div class="SessionCount">
+				<span class="semi-bold">2 </span>
+				<span class="light">sessions active</span>
+			</div>
+
+
+			<div class="SessionCount">
+				<span class="semi-bold">1 </span>
+				<span class="light">session announced</span>
+			</div>
+
+
+			<div class="SessionCount">
+				<span class="semi-bold">2 </span>
+				<span class="light">sessions to be voted</span>
+			</div>
+
+		</div>
+
+	</div>
+	<div id="RightBar">
+
+		<div class="two-lines-centered">
+				<div class="first-line">
+					<div class="text header">
+						<span>Minecraft</span>
+					</div>
+					<div class="label">
+						Survival
+					</div>
+					<div class="label">
+						1.12.2
+					</div>
+				</div>
+				<div class="text light darken">
+					<span>Survival world with mods such as Industrial Craft, RailCraft, etc.</span>
+				</div>
+			</div>
+	</div>
 </div>
 
 

src/styles.scss

@@ -1,50 +1,151 @@
 /* You can add global styles to this file, and also import other style files */
 html, body {
 	margin: 0;
-  padding: 0;
+	background: url("./assets/6.png") no-repeat center center fixed;
-
+	-webkit-background-size: cover;
-  height: 100%;
+	-moz-background-size: cover;
-  font-family: Arial, Helvetica, sans-serif;
+	-o-background-size: cover;
-}
+	background-size: cover;
-
+	font-family: "Poppins-Regular";
-/* CAN (MUST) BE REMOVED ! Sample Global style */
-.container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  background: url(./assets/background.jpg) no-repeat center fixed;
-  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
-  background-size: cover; /* version standardisée */
-
-  .title {
 	color: white;
-    margin: 0;
+	height: 100%;
-    padding: 50px 20px;
 }
 
-  a {
+/*********************************************/
-    color: #fff !important;
+/************** Text Styling *****************/
-    text-transform: uppercase;
+/*********************************************/
-    text-decoration: none;
+
-    background: #ed3330;
+@font-face {
-    padding: 20px;
+	font-family: "Poppins-Regular";
-    border-radius: 5px;
+	src: url("./assets/Poppins/Poppins-Regular.ttf");
+}
+@font-face {
+	font-family: "Poppins-Light";
+	src: url("./assets/Poppins/Poppins-Light.ttf");
+}
+@font-face {
+	font-family: "Poppins-SemiBold";
+	src: url("./assets/Poppins/Poppins-SemiBold.ttf");
+}
+
+.SemiBold {
+	font-family: "Poppins-SemiBold"
+}
+.Light {
+	font-family: "Poppins-Light"
+}
+
+/*********************************************/
+/************** Main Frame *******************/
+/*********************************************/
+
+.container {
+	display: flex;
+	height: 100%;
+}
+#LeftBar {
+	width: 30%;
 	display: inline-block;
-    border: none;
+	-webkit-backdrop-filter: blur(8px);
-    transition: all 0.4s ease 0s;
+	backdrop-filter: blur(8px);
-
+	min-width: 350px;
-    &:hover {
-      background: #fff;
-      color: #ed3330 !important;
-      letter-spacing: 1px;
-      -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-      -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-      box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
-      transition: all 0.4s ease 0s;
-    }
 }
+#RightBar {
+	width: 70%;
+	display: inline-block;
+	-webkit-backdrop-filter: blur(2px);
+	backdrop-filter: blur(2px);
+	padding-left: 20px;
 }
 
+/*********************************************/
+/************** Default Set ******************/
+/*********************************************/
+
+
+.two-lines-centered {
+
+}
+.two-lines-centered > .first-line {
+	display: flex;
+}
+.two-lines-centered > .light {
+	font-size: 12px;
+}
+.light {
+	font-family: "Poppins-Light";
+}
+.label {
+	color: white;
+	background-color: rgba(0, 0, 0, 0.3);
+	border-radius: 6px;
+	height: min-content;
+	padding: 0 5px 0 5px;
+	font-size: 10px;
+	margin: 5px 0 0 5px;
+}
+.rounded > img{
+	border-radius: 50%;
+}
+.cornering > img {
+	border-radius: 10px;
+}
+
+hr {
+	border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/*********************************************/
+/************** Profile Bar ******************/
+/*********************************************/
+
+.ProfileBar {
+	display: flex;
+	padding: 5px 0 0 10px;
+	margin-bottom: -10px;
+	height: 60px;
+}
+.ProfileBar > .two-lines-centered {
+	margin-top: 4px;
+	margin-left: 15px;
+}
+#ProfilePicture {
+	padding-top: 3px;
+}
+
+.first-line > .header {
+	font-size: 19px;
+	margin-bottom: -5px;
+}
+
+/*********************************************/
+/************** Games Bar *******************/
+/*********************************************/
+
+#GamesBar {
+	margin-left: 15px;
+}
+.GameBar {
+	display: flex;
+	margin-top: 13px;
+	padding: 10px 0 2px 10px;
+	margin-right: 15px;
+}
+.GameBar:hover {
+	background-color: rgba(255, 255, 255, 0.2);
+	border-radius: 10px;
+	-webkit-backdrop-filter: drop-shadow(5px 5px 0px #ffffff);
+	backdrop-filter: drop-shadow(5px 5px 4px #ffffff);
+}
+.GameBar > .two-lines-centered {
+	margin-top: 5px;
+	margin-left: 15px;
+}
+.SessionCount {
+	font-size: 13px;
+	margin: 20px 0 20px 10px;
+}
+
+.big {
+	font-size: calc(+20%);
+}