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",
|
||||
"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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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">
|
||||
<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 |
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 */
|
||||
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%);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user