вооо крутооо 2

src/app/app.component.html

@@ -1,5 +1,5 @@
 <mat-toolbar>
-  <span class="f13_color_primary">факты</span><span class="f13_color_extra">13</span>
+  <span class="f13_color_primary" style="padding-left: calc((100% - 66%)/2)">факты</span><span class="f13_color_extra">13</span>
   <span class="spacer"></span>
   <button class="f13_color_primary"
     style="margin-right: 5px"
@@ -8,7 +8,7 @@
     (click)="baseUtils.openUrlInNewWindow(link.link)">
     {{link.name}}
   </button>
-  <button mat-button mat-raised-button class="f13_color_primary">
+  <button mat-button mat-raised-button class="f13_color_primary" style="margin-right: calc((100% - 66%)/2)">
     Войти
   </button>
 </mat-toolbar>

src/app/app.module.ts

@@ -11,6 +11,8 @@ import {MatGridListModule} from "@angular/material/grid-list";
 import { MainPageComponent } from './pages/main-page/main-page.component';
 import {MatCardModule} from "@angular/material/card";
 import {AnnonceService} from "./services/AnnonceService";
+import {MatInputModule} from "@angular/material/input";
+import {MatChipsModule} from "@angular/material/chips";
 
 @NgModule({
   declarations: [
@@ -25,7 +27,9 @@ import {AnnonceService} from "./services/AnnonceService";
     MatIconModule,
     MatButtonModule,
     MatGridListModule,
-    MatCardModule
+    MatCardModule,
+    MatInputModule,
+    MatChipsModule
   ],
   providers: [
     AnnonceService

src/app/pages/main-page/main-page.component.html

@@ -1,33 +1,59 @@
 <!--тут меню кнопочки всякая хуйня-->
-<div style="display: flex">
-  <div style="width: 15%"><img style="height: 25%" src="assets/images/Engineertaunt1.png"></div>
+<div
+  style="display: flex; width: 66%; padding-left: calc((100% - 66%)/2); padding-right: calc((100% - 66%)/2); margin: 0 auto; background: linear-gradient(to top, #f2a998, #e65e11);">
+  <div style="width: 15%"><img style="height: 250px; padding-top: 20px" src="assets/images/Engineertaunt1.png"></div>
   <div style="width: 85%">
-    <div style="display: flex; justify-content: space-between">
-      <div *ngFor="let b of go2urls" style="text-align: center; border: 1px solid black; border-radius: 5px">
+    <!--кнопочки страниц-->
+    <mat-toolbar style="background: unset !important; margin-bottom: 2%">
+      <span class="spacer"></span>
+      <button *ngFor="let b of go2urls" mat-icon-button style="color: #fbf1d7; margin: 0 1%;">
         <mat-icon>{{b.ico}}</mat-icon>
         <br>
-        <p style="margin: 0 0">{{b.name}}</p>
-      </div>
+        <p style="margin: 0 0; line-height: 10px">{{b.name}}</p>
+      </button>
+      <span class="spacer"></span>
+    </mat-toolbar>
+    <div >
+      <mat-grid-list cols="3" rowHeight="75px" style="color: #fbf1d7; padding-bottom: 1%">
+        <mat-grid-tile rowspan="1" colspan="1" style="border-radius: 15px; border: 0 solid black; background: rgba(255,255,255,0.25)">
+          <h2>
+            <mat-icon>person</mat-icon>
+            <p style="display: inline">Сейчас играют</p>
+          </h2>
+          <span class="spacer"></span>
+          <h2>102</h2>
+        </mat-grid-tile>
+        <mat-grid-tile rowspan="1" colspan="1" style="border-radius: 15px; border: 0 solid black; background: rgba(255,255,255,0.25)">
+          <h2>
+            <mat-icon>person</mat-icon>
+            <p style="display: inline">Пик игроков за день</p>
+          </h2>
+          <span class="spacer"></span>
+          <h2>252</h2>
+        </mat-grid-tile>
+        <mat-grid-tile rowspan="1" colspan="1" style="border-radius: 15px; border: 0 solid black; background: rgba(255,255,255,0.25)">
+          <h2>
+            <mat-icon>person</mat-icon>
+            <p style="display: inline">Серверов работает</p>
+          </h2>
+          <span class="spacer"></span>
+          <h2>13|13</h2>
+        </mat-grid-tile>
+      </mat-grid-list>
     </div>
-    <div style="display: flex">
-      <div style="width: 33%; background: rgba(255,255,255,0.5);border: 1px solid rgba(0,0,0,0); border-radius: 5px">
-        <mat-icon>person</mat-icon>
-        <p style="display: inline">Сейчас играют</p>
-        <h3 style="display: inline">555</h3>
-      </div>
-      <div style="width: 33%; background: rgba(255,255,255,0.5);border: 1px solid rgba(0,0,0,0); border-radius: 5px">
-        <mat-icon>person</mat-icon>
-        <p style="display: inline">Сейчас играют</p>
-        <h3 style="display: inline">555</h3>
-      </div><div style="width: 33%; background: rgba(255,255,255,0.5);border: 1px solid rgba(0,0,0,0); border-radius: 5px">
-      <mat-icon>person</mat-icon>
-      <p style="display: inline">Сейчас играют</p>
-      <h3 style="display: inline">555</h3>
-    </div>
-    </div>
-    <div>i love search</div>
     <div>
-      <div style="width: 5%">1523</div>
+      <mat-form-field style="width: 100%" appearance="fill">
+        <mat-label>Введите ник...</mat-label>
+        <input matInput placeholder="отдыхаем" value="">
+      </mat-form-field>
+    </div>
+    <div style="padding-bottom: 1%">
+      <mat-chip-list aria-label="Fish selection">
+        <mat-chip>One fish</mat-chip>
+        <mat-chip>Two fish</mat-chip>
+        <mat-chip color="primary" selected>Primary fish</mat-chip>
+        <mat-chip color="accent" selected>Accent fish</mat-chip>
+      </mat-chip-list>
     </div>
   </div>
 </div>

src/app/pages/main-page/main-page.component.ts

@@ -31,7 +31,7 @@ export class MainPageComponent implements OnInit {
 
   generateStyle4Card(a: Annonce) {
     return {
-      'background': 'linear-gradient(to right, transparent, mistyrose), url(\''+a.image+'\')',
+      'background': 'linear-gradient(to right, black, transparent), url(\''+a.image+'\')',
       'background-size': 'cover'
     }
   }