вооо крутооо 4

src/app/app-routing.module.ts

@@ -3,11 +3,13 @@ import { RouterModule, Routes } from '@angular/router';
 import {MainPageComponent} from "./pages/main-page/main-page.component";
 import {ServersPageComponent} from "./pages/servers-page/servers-page.component";
 import {ProfilePageComponent} from "./pages/profile-page/profile-page.component";
+import {RulesPageComponent} from "./pages/rules-page/rules-page.component";
 
 const routes: Routes = [
   { path: "", component: MainPageComponent},
   { path: "servers", component: ServersPageComponent },
-  { path: "profile/:steam64", component: ProfilePageComponent }
+  { path: "profile/:steam64", component: ProfilePageComponent },
+  { path: "rules", component: RulesPageComponent }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -21,6 +21,7 @@ import {MatMenuModule} from "@angular/material/menu";
 import {HttpClientModule} from "@angular/common/http";
 import {PlayerServiceService} from "./services/player-service.service";
 import {MatSnackBarModule} from "@angular/material/snack-bar";
+import { RulesPageComponent } from './pages/rules-page/rules-page.component';
 
 @NgModule({
   declarations: [
@@ -28,7 +29,8 @@ import {MatSnackBarModule} from "@angular/material/snack-bar";
     MainPageComponent,
     ServersPageComponent,
     ProfilePageComponent,
-    NeedAuthToContinue
+    NeedAuthToContinue,
+    RulesPageComponent
   ],
   imports: [
     BrowserModule,

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

@@ -47,10 +47,7 @@
     </div>
     <div style="padding-bottom: 1%">
       <mat-chip-list aria-label="Fish selection">
-        <mat-chip class="chips">One fish</mat-chip>
-        <mat-chip class="chips">Two fish</mat-chip>
-        <mat-chip class="chips" color="primary" selected>Primary fish</mat-chip>
-        <mat-chip class="chips" color="accent" selected>Accent fish</mat-chip>
+        <mat-chip class="chips" *ngFor="let h of getSearchHistory()">{{h}}</mat-chip>
       </mat-chip-list>
     </div>
   </div>
@@ -58,27 +55,31 @@
 
 <!--тут продолжение главной страницы-->
 <div class="content-in-center">
-  <h2>Интереснные приколы</h2>
-  <div class="card-annonces-container">
-    <mat-card
-      *ngFor="let a of getAnnonces('news')"
-      class="card-annonce"
-      [ngStyle]="generateStyle4Card(a)"
-    >
-      <mat-card-title class="card-text-color">{{a.header}}</mat-card-title>
-      <mat-card-subtitle class="card-text-color">{{a.short}}</mat-card-subtitle>
-    </mat-card>
+  <div class="content-in-border">
+    <h2 style="margin: 0 0; margin-bottom: 15px; color: black">Интереснные приколы</h2>
+    <div class="container responsive-grid">
+      <mat-card
+        *ngFor="let a of getAnnonces('news')"
+        class="card-annonce"
+        [ngStyle]="generateStyle4Card(a)"
+      >
+        <mat-card-title class="card-text-color">{{a.header}}</mat-card-title>
+        <mat-card-subtitle class="card-text-color">{{a.short}}</mat-card-subtitle>
+      </mat-card>
+    </div>
   </div>
 
-  <h2>Почему стоит начать играть?</h2>
-  <div class="card-annonces-container">
-    <mat-card
-      *ngFor="let a of getAnnonces('reason4play')"
-      class="card-annonce"
-      [ngStyle]="generateStyle4Card(a)"
-    >
-      <mat-card-title class="card-text-color">{{a.header}}</mat-card-title>
-      <mat-card-subtitle class="card-text-color">{{a.short}}</mat-card-subtitle>
-    </mat-card>
+  <div class="content-in-border">
+    <h2 style="margin: 0 0; margin-bottom: 15px; color: black">Почему стоит начать играть?</h2>
+    <div class="container responsive-grid">
+      <mat-card
+        *ngFor="let a of getAnnonces('reason4play')"
+        class="card-annonce"
+        [ngStyle]="generateStyle4Card(a)"
+      >
+        <mat-card-title class="card-text-color">{{a.header}}</mat-card-title>
+        <mat-card-subtitle class="card-text-color">{{a.short}}</mat-card-subtitle>
+      </mat-card>
+    </div>
   </div>
 </div>

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

@@ -1,9 +1,15 @@
-.card-annonce {
-  width: 28%;
+
+//.card-annonces-container {
+//  display: flex; flex-wrap: wrap; justify-content: space-between
+//}
+.container {
+  padding: 24px;
 }
 
-.card-annonces-container {
-  display: flex; flex-wrap: wrap; justify-content: space-between
+.responsive-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 24px;
 }
 
 .card-text-color {

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

@@ -10,17 +10,16 @@ import {Router} from "@angular/router";
 })
 export class MainPageComponent implements OnInit {
   go2urls: {ico: string, name: string, url: string}[] = [
-    {ico: 'download', name: 'Серверы', url: 'servers'},
-    {ico: 'download', name: 'Правила', url: '/'},
-    {ico: 'download', name: 'Банлист', url: '/'},
-    {ico: 'download', name: 'VIP', url: '/'},
-    {ico: 'download', name: 'Статистика', url: '/'},
-    {ico: 'download', name: 'Сообщения', url: '/'},
-    {ico: 'download', name: 'Киллфид', url: '/'},
-    {ico: 'download', name: 'О нас', url: '/'}
+    {ico: 'business', name: 'Серверы', url: 'servers'},
+    {ico: 'border_color', name: 'Правила', url: 'rules'},
+    {ico: 'remove_circle', name: 'Банлист', url: 'banlist'},
+    {ico: 'stars', name: 'VIP', url: 'vip'},
+    {ico: 'rowing', name: 'Статистика', url: 'statistic'},
+    {ico: 'message', name: 'Сообщения', url: 'messages'},
+    {ico: 'list_alt', name: 'Киллфид', url: 'killfeed'},
+    {ico: 'live_help', name: 'О нас', url: 'abot'}
   ]
 
-
   constructor(private annoncesService: AnnonceService,
               private router: Router) { }
 
@@ -42,4 +41,18 @@ export class MainPageComponent implements OnInit {
     this.router.navigate([url])
   }
 
+  getSearchHistory(limit: number = 5) {
+    const SEARCH_HISTORY = "SEARCH_HISTORY";
+    if (localStorage.getItem(SEARCH_HISTORY) == null)
+      localStorage.setItem(SEARCH_HISTORY, JSON.stringify(["отдыхаем", "#1488", "<@88005553535>", "STEAM:0:0:1337228"]))
+
+    let sh: string = "[]";
+    if (localStorage.getItem(SEARCH_HISTORY) != null)
+      { // @ts-ignore
+        sh = localStorage.getItem(SEARCH_HISTORY);
+      }
+    const res: string[] = JSON.parse(sh)
+    return res.slice(res.length - limit < 0?0:res.length - limit, res.length);
+  }
+
 }

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

@@ -0,0 +1,18 @@
+<div class="content-in-center-header" style="flex-direction: column;">
+  <h1>Правила</h1>
+  <h3>п.с на самом деле их нет, но тебя могут просто так забанить</h3>
+</div>
+
+<div class="content-in-center">
+  <div class="content-in-border">
+    <div class="container responsive-grid">
+      <mat-card *ngFor="let rule of rules" class="example-card">
+        <mat-card-title>{{rule.name}}</mat-card-title>
+        <mat-card-subtitle>{{rule.ban}}</mat-card-subtitle>
+        <mat-card-content>
+          <p>{{rule.about}}</p>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>

src/app/pages/rules-page/rules-page.component.scss

@@ -0,0 +1,9 @@
+.container {
+  padding: 24px;
+}
+
+.responsive-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 24px;
+}

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

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-rules-page',
+  templateUrl: './rules-page.component.html',
+  styleUrls: ['./rules-page.component.scss']
+})
+export class RulesPageComponent implements OnInit {
+
+  rules: {name: string, ban: string, about: string, url: string}[] = [
+    {name: "Читы", ban: "Бан навсегда сука", about: "Сюда входят все типы читов, но бан можно получить если ты явно мешаешь игре других", url: ""},
+    {name: "Реклама серверов", ban: "бан навсегда сука", about: "Мы не одобряем рекламу других серверов в мертовой игре кроме МГЕ", url: ""},
+    {name: "Багоюз", ban: "бан навсегда", about: "Баги карт и плагинов, лучше сообщи нам о них прежде чем на тебя настучат", url: ""},
+    {name: "Абуз !mir", ban: "На наше усмотрение", about: "Блокировка дверей, открытие спавна и т.д", url: ""},
+    {name: "Абуз випки", ban: "На наше усмотрение", about: "Ты получил випку что мешать другим? Нет так не пойдет тебя покарают", url: ""},
+    {name: "Делай короче чё хочешь", ban: "Его может и не быть", about: ":troll_face:", url: ""},
+  ];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -4,32 +4,34 @@
 </div>
 
 <div class="content-in-center">
-  <mat-accordion>
-    <mat-expansion-panel hideToggle *ngFor="let server of servers | keyvalue">
-      <mat-expansion-panel-header>
-        <mat-panel-title>
-          {{server.value.name}}
-        </mat-panel-title>
-        <mat-panel-description>
-          {{server.value.player_count}}/{{server.value.max_players}}
-        </mat-panel-description>
-      </mat-expansion-panel-header>
-      <div>
-        <p>{{server.value.description}}</p>
-        <mat-expansion-panel hideToggle *ngFor="let player of server.value.players">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              {{player.name}}
-            </mat-panel-title>
-            <mat-panel-description>
-              {{player.score}} / {{player.deads}} / {{player.duration_seconds}}
-            </mat-panel-description>
-          </mat-expansion-panel-header>
-          <p>Ид игрока: {{player.id}}</p>
-          <p>Пинг: {{player.ping}}</p>
-          <p>Потери пакетов: {{player.loss}}</p>
-        </mat-expansion-panel>
-      </div>
-    </mat-expansion-panel>
-  </mat-accordion>
+  <div class="content-in-border">
+    <mat-accordion>
+      <mat-expansion-panel hideToggle *ngFor="let server of servers | keyvalue">
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            {{server.value.name}}
+          </mat-panel-title>
+          <mat-panel-description>
+            {{server.value.player_count}}/{{server.value.max_players}}
+          </mat-panel-description>
+        </mat-expansion-panel-header>
+        <div>
+          <p>{{server.value.description}}</p>
+          <mat-expansion-panel hideToggle *ngFor="let player of server.value.players">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                {{player.name}}
+              </mat-panel-title>
+              <mat-panel-description>
+                {{player.score}} / {{player.deads}} / {{player.duration_seconds}}
+              </mat-panel-description>
+            </mat-expansion-panel-header>
+            <p>Ид игрока: {{player.id}}</p>
+            <p>Пинг: {{player.ping}}</p>
+            <p>Потери пакетов: {{player.loss}}</p>
+          </mat-expansion-panel>
+        </div>
+      </mat-expansion-panel>
+    </mat-accordion>
+  </div>
 </div>

src/styles.scss

@@ -56,6 +56,7 @@ body { margin: 0; font-family: Lato, Roboto, "Helvetica Neue", sans-serif; }
 
 h1,h2,h3,h4,h5,h6 {
   font-family: LatoBlack, Roboto, "Helvetica Neue", sans-serif;
+  color: #fbf1d7;
 }
 
 span {
@@ -93,3 +94,10 @@ span {
 .content-in-center-header {
   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);
 }
+
+.content-in-border {
+  border-radius: 15px;
+  background-color: #f5f5f5;
+  padding: 15px;
+  margin-top: 15px
+}