Initial design commit

This commit is contained in:
MrSandMan 2022-08-26 14:34:21 +03:00
parent f35becf47b
commit db5a9e9562
7 changed files with 258 additions and 55 deletions

10
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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>

View File

@ -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;
}

View File

@ -1,9 +1,67 @@
<div class="container">
<h1 class="title">
{{ 'PAGES.HOME.TITLE' | translate }}
</h1>
<div class="games-icons-panel">asdasdasdasdasdasd</div>
<a routerLink="/detail">{{ 'PAGES.HOME.GO_TO_DETAIL' | translate }}</a>
<div id="LeftBar">
<div class="ProfileBar">
<div class="img rounded" id="ProfilePicture">
<img src="./assets/avatar.jpeg" height="45px" width="45px">
</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>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 227 KiB

View File

@ -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%);
}