Initial design commit
This commit is contained in:
parent
f35becf47b
commit
db5a9e9562
10
package-lock.json
generated
10
package-lock.json
generated
@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "angular-electron",
|
"name": "skirda-launcher",
|
||||||
"version": "11.1.0",
|
"version": "0.0.0",
|
||||||
"lockfileVersion": 2,
|
"lockfileVersion": 2,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "angular-electron",
|
"name": "skirda-launcher",
|
||||||
"version": "11.1.0",
|
"version": "0.0.0",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/common": "14.0.6",
|
"@angular/common": "14.0.6",
|
||||||
@ -57,7 +57,7 @@
|
|||||||
"karma-jasmine-html-reporter": "2.0.0",
|
"karma-jasmine-html-reporter": "2.0.0",
|
||||||
"node-polyfill-webpack-plugin": "2.0.0",
|
"node-polyfill-webpack-plugin": "2.0.0",
|
||||||
"npm-run-all": "4.1.5",
|
"npm-run-all": "4.1.5",
|
||||||
"playwright": "1.23.4",
|
"playwright": "^1.23.4",
|
||||||
"ts-node": "10.9.1",
|
"ts-node": "10.9.1",
|
||||||
"typescript": "~4.7.4",
|
"typescript": "~4.7.4",
|
||||||
"wait-on": "6.0.1",
|
"wait-on": "6.0.1",
|
||||||
|
|||||||
@ -93,7 +93,7 @@
|
|||||||
"karma-jasmine-html-reporter": "2.0.0",
|
"karma-jasmine-html-reporter": "2.0.0",
|
||||||
"node-polyfill-webpack-plugin": "2.0.0",
|
"node-polyfill-webpack-plugin": "2.0.0",
|
||||||
"npm-run-all": "4.1.5",
|
"npm-run-all": "4.1.5",
|
||||||
"playwright": "1.23.4",
|
"playwright": "^1.23.4",
|
||||||
"ts-node": "10.9.1",
|
"ts-node": "10.9.1",
|
||||||
"typescript": "~4.7.4",
|
"typescript": "~4.7.4",
|
||||||
"wait-on": "6.0.1",
|
"wait-on": "6.0.1",
|
||||||
|
|||||||
@ -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>
|
||||||
@ -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;
|
||||||
|
}
|
||||||
@ -1,9 +1,67 @@
|
|||||||
<div class="container">
|
<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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 227 KiB |
187
src/styles.scss
187
src/styles.scss
@ -1,50 +1,151 @@
|
|||||||
/* You can add global styles to this file, and also import other style files */
|
/* You can add global styles to this file, and also import other style files */
|
||||||
html, body {
|
html, body {
|
||||||
margin: 0;
|
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";
|
||||||
|
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 {
|
.container {
|
||||||
height: 100%;
|
display: flex;
|
||||||
display: flex;
|
height: 100%;
|
||||||
flex-direction: column;
|
}
|
||||||
align-items: center;
|
#LeftBar {
|
||||||
justify-content: center;
|
width: 30%;
|
||||||
|
display: inline-block;
|
||||||
background: url(./assets/background.jpg) no-repeat center fixed;
|
-webkit-backdrop-filter: blur(8px);
|
||||||
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
|
backdrop-filter: blur(8px);
|
||||||
background-size: cover; /* version standardisée */
|
min-width: 350px;
|
||||||
|
}
|
||||||
.title {
|
#RightBar {
|
||||||
color: white;
|
width: 70%;
|
||||||
margin: 0;
|
display: inline-block;
|
||||||
padding: 50px 20px;
|
-webkit-backdrop-filter: blur(2px);
|
||||||
}
|
backdrop-filter: blur(2px);
|
||||||
|
padding-left: 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*********************************************/
|
||||||
|
/************** 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%);
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user