diff --git a/package-lock.json b/package-lock.json
index 719538f..1f75c2c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
- "name": "angular-electron",
- "version": "11.1.0",
+ "name": "skirda-launcher",
+ "version": "0.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
- "name": "angular-electron",
- "version": "11.1.0",
+ "name": "skirda-launcher",
+ "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",
diff --git a/package.json b/package.json
index 7f156b0..c72ea7a 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/game-side-button/game-side-button.component.html b/src/app/game-side-button/game-side-button.component.html
index ac1d30b..afc96f5 100644
--- a/src/app/game-side-button/game-side-button.component.html
+++ b/src/app/game-side-button/game-side-button.component.html
@@ -1 +1,18 @@
-AAAAAAAA
\ No newline at end of file
+
+
+
+
+
+
+
+ 2 people voted. Need 4 more to play.
+
+
+
\ No newline at end of file
diff --git a/src/app/game-side-button/game-side-button.component.scss b/src/app/game-side-button/game-side-button.component.scss
index e69de29..943fb86 100644
--- a/src/app/game-side-button/game-side-button.component.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index e57a09d..d45a9be 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,9 +1,67 @@
-
- {{ 'PAGES.HOME.TITLE' | translate }}
-
-
asdasdasdasdasdasd
-
{{ 'PAGES.HOME.GO_TO_DETAIL' | translate }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 2
+ sessions active
+
+
+
+
+ 1
+ session announced
+
+
+
+
+ 2
+ sessions to be voted
+
+
+
+
+
+
+
+
+
+
+
+ Survival
+
+
+ 1.12.2
+
+
+
+ Survival world with mods such as Industrial Craft, RailCraft, etc.
+
+
+
diff --git a/src/assets/background.jpg b/src/assets/background.jpg
deleted file mode 100644
index 6058e77..0000000
Binary files a/src/assets/background.jpg and /dev/null differ
diff --git a/src/styles.scss b/src/styles.scss
index 4c1c4b2..bc162b5 100644
--- a/src/styles.scss
+++ b/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;
-
- height: 100%;
- font-family: Arial, Helvetica, sans-serif;
+ margin: 0;
+ background: url("./assets/6.png") no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ font-family: "Poppins-Regular";
+ color: white;
+ height: 100%;
}
-/* CAN (MUST) BE REMOVED ! Sample Global style */
+/*********************************************/
+/************** Text Styling *****************/
+/*********************************************/
+
+@font-face {
+ font-family: "Poppins-Regular";
+ 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 {
- 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;
- padding: 50px 20px;
- }
-
- a {
- color: #fff !important;
- text-transform: uppercase;
- text-decoration: none;
- background: #ed3330;
- padding: 20px;
- border-radius: 5px;
- display: inline-block;
- border: none;
- transition: all 0.4s ease 0s;
-
- &: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;
- }
- }
+ display: flex;
+ height: 100%;
+}
+#LeftBar {
+ width: 30%;
+ display: inline-block;
+ -webkit-backdrop-filter: blur(8px);
+ backdrop-filter: blur(8px);
+ min-width: 350px;
+}
+#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%);
+}