абама

src/app/app.component.html

@@ -1,8 +1,8 @@
-<mat-toolbar>
+<div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5% 0;">
-  <div (click)="go2url(['/'], true)" style="padding-left: calc((100% - 66%)/2); cursor: pointer">
+  <div (click)="go2url(['/'], true)" class="f13_l">
     <span class="f13_color_primary lato" >факты</span><span class="f13_color_extra lato">13</span>
   </div>
-  <span class="spacer"></span>
+  <div class="f13_r">
     <button class="f13_color_primary"
             [matMenuTriggerFor]="discordMenu"
             mat-button
@@ -16,8 +16,8 @@
       {{link.name}}
     </button>
 
-  <button *ngIf="auth_service.steamdata?.nickname == null" mat-button mat-raised-button class="f13_color_primary" style="margin-right: calc((100% - 66%)/2)" (click)="login()">Войти</button>
+    <button *ngIf="auth_service.steamdata?.nickname == null" mat-button mat-raised-button class="f13_color_primary" (click)="login()">Войти</button>
-  <button *ngIf="auth_service.steamdata?.nickname != null" mat-button mat-raised-button class="f13_color_primary" style="margin-right: calc((100% - 66%)/2)" [matMenuTriggerFor]="menu">
+    <button *ngIf="auth_service.steamdata?.nickname != null" mat-button mat-raised-button class="f13_color_primary" [matMenuTriggerFor]="menu">
       {{auth_service.steamdata?.nickname}}
     </button>
     <mat-menu #discordMenu>
@@ -28,5 +28,6 @@
       <button *ngIf="auth_service.steamIds != null && auth_service.steamIds.steam64 != null" mat-menu-item (click)="go2url(['profile', auth_service.steamIds.steam64])">Мой профиль</button>
       <button mat-menu-item (click)="logout()">Выйти</button>
     </mat-menu>
-</mat-toolbar>
+  </div>
+</div>
 <router-outlet></router-outlet>

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

@@ -13,7 +13,13 @@ import {ActionService} from "../../services/action.service";
 @Component({
   selector: 'app-annonces-list-carules',
   template: `
+    <div style="display: flex; justify-content: space-between">
       <h2 style="margin: 0 0; margin-bottom: 15px; color: black">{{getHeader()}}</h2>
+      <div>
+        <mat-icon (click)="p.previousPage()" style="cursor: pointer">arrow_back</mat-icon>
+        <mat-icon (click)="p.nextPage()" style="cursor: pointer">arrow_forward</mat-icon>
+      </div>
+    </div>
     <div class="container responsive-grid">
       <mat-card
         *ngFor="let a of annonces"
@@ -25,9 +31,9 @@ import {ActionService} from "../../services/action.service";
         <mat-card-subtitle class="card-text-color">{{a.shortText!=null?a.shortText:'от ' + (a.timestamp|date:'HH:mm dd.MM.YYYY')}}</mat-card-subtitle>
       </mat-card>
     </div>
-    <mat-paginator style="display: none"
+    <mat-paginator style="display: none" #p
-      [pageSizeOptions]="[4]"
+      [pageSizeOptions]="[3]"
-      [pageSize]="4"
+      [pageSize]="3"
       (page)="updateData()"
     ></mat-paginator>
   `, styleUrls: ['main-page.component.scss']

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

@@ -1,7 +1,3 @@
-.container {
-  padding: 24px;
-}
-
 p {
   margin: 0 0;
 }

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

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

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

@@ -1,7 +1,3 @@
-.container {
-  padding: 24px;
-}
-
 ::ng-deep .leaflet-marker-icon {
   width: 24px !important;
   height: 24px !important;

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

@@ -25,13 +25,13 @@
             </mat-panel-title>
           </mat-expansion-panel-header>
           <mat-accordion>
-            <mat-expansion-panel hideToggle>
+            <mat-expansion-panel hideToggle *ngFor="let reason of vipsReasons">
               <mat-expansion-panel-header>
                 <mat-panel-title>
-                  Здоровье маме
+                  {{reason.name}}
                 </mat-panel-title>
               </mat-expansion-panel-header>
-              <p>Используй команду</p>
+              <p>{{reason.about}}</p>
             </mat-expansion-panel>
           </mat-accordion>
         </mat-expansion-panel>

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

@@ -13,6 +13,26 @@ import {VipPromocodeDialog} from "./VipPromocodeDialog";
 })
 export class VipPageComponent implements OnInit {
   vips:VipBuy[] = [];
+  vipsReasons:{name: string, about:string}[] = [
+    {name: 'Одна випка на все сервера', about: 'Не важно где ты чаще всего играешь, випка будет работать на всех серверах фактов'},
+    {name: 'Резервный слот', about: 'Видишь 32/32 на сервере? Не беда. Кикнет лоха, и ты зайдешь, а если прийдет другой вип игрок, то ты не будешь лохом.'},
+    {name: 'АФК', about: 'У нас есть плагин который кикает за бездействие на сервере, тебя с випкой не кинет стой как даун круглые сутки'},
+    {name: 'Префикс в чате', about: 'Смешной префикс в чате который выделяет тебя из горы сообщений уровня: я путис'},
+    {name: 'Хук', about: 'Хук позволяет летать по карте органиченное время, чтобы использовать забинди кнопку: bind R +hook'},
+    {name: 'Веревка', about: 'Еще одно ебанутое изобретение как и хук, только позволяет находиться на одном месте, бинд: bind R +rope'},
+    {name: 'Реклама', about: 'У нас по идеи есть реклама которая проигрывается игрокам по кд, так вот если у тебя випка то лишние сранье в уши не будет тебе мешать'},
+    {name: 'Бумбокс', about: 'Ты инженер? Ставишь раздатчик? Так вот у тебя будет ООО ОХУЕТЬ МУЗЫКАЛЬНЫЙ РАЗДАТЧИК (ну и кал, я те скажу)'},
+    {name: 'Меняй себя', about: 'Есть у нас такая команда как !class, так вот у нее есть иногда ограничения, с випкой у тебя их не будет дурачек'},
+    {name: 'Фильтр ников', about: 'О у тебя в нике реклама трейдов, так иди нахуй, хотя ты можешь купить випку и тебя не будет переименовывать'},
+    {name: 'КД у РТД', about: 'КД у РТД будет всегда для тебя равен 2-м минутам'},
+    {name: 'Аньюжки', about: 'Ты можешь се выбрать аньюжл эффект через команду !unusual или хуй знает, кароч через меню тоже можешь'},
+    {name: 'Изменение своего голоса', about: 'Твой путис говорит путис, измени его голос через !voicefx или через пункт в меню'},
+    {name: 'Изменение скорости стрельбы', about: 'Мге братья тебя ебут? Не беда используй !rof или через пункт в меню'},
+    {name: 'Бесконечные патроны', about: 'Мало патронов? Используй команду !aia или через пункт в меню'},
+    {name: 'Скорость передвижения', about: 'Ты путис и медленно ходишь, так ускорься через !speedme и когда надоест !speedmereset или через пункт в меню'},
+    {name: 'Следы ботинок', about: 'У тебя недостаточные бархатные тяги, исправь это через !footsteps или через пункт в меню'},
+    {name: 'Здоровье', about: 'Постоянно убивают? Так увеличь себе здоровье через !sethealth 99999 или через пункт в меню'},
+  ];
 
   constructor(private vipService: VipService,
               private dialog: MatDialog) { }

src/app/services/auth.service.ts

@@ -26,6 +26,8 @@ export class AuthService {
         this.permition = res.permition;
         sessionStorage.setItem(AuthService.KEY, JSON.stringify(res.steamids))
       }, (err) => {
+        if (err.status == 401)
+          sessionStorage.removeItem(AuthService.KEY);
         console.log(err);
       })
   }

src/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>F13AngWeb</title>
+  <title>Факты 13</title>
   <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">

src/styles.scss

@@ -102,6 +102,23 @@ span {
   background: linear-gradient(to top, #f2a998, #e65e11);
 }
 
+.f13_l {
+  padding-left: calc((100% - 66%)/2);
+  cursor: pointer
+}
+
+.f13_r {
+  padding-right: calc((100% - 66%)/2);
+}
+
+.container {
+  padding: 24px;
+}
+
+.mat-expansion-panel-body {
+  padding: 0 24px 16px !important;
+}
+
 @media only screen and (max-width: 600px) {
   $screen-width: 95%;
 
@@ -114,6 +131,22 @@ span {
     padding-left: calc((100% - $screen-width)/2);
     padding-right: calc((100% - $screen-width)/2);
   }
+
+  .f13_l {
+    padding-left: calc((100% - $screen-width)/2);
+  }
+
+  .f13_r {
+    padding-right: calc((100% - $screen-width)/2);
+  }
+
+  .container {
+    padding: 1px;
+  }
+
+  .mat-expansion-panel-body {
+    padding: 0 1px 1px !important;
+  }
 }
 
 @media only screen and (min-width: 600px) {
@@ -128,6 +161,22 @@ span {
     padding-left: calc((100% - $screen-width)/2);
     padding-right: calc((100% - $screen-width)/2);
   }
+
+  .f13_l {
+    padding-left: calc((100% - $screen-width)/2);
+  }
+
+  .f13_r {
+    padding-right: calc((100% - $screen-width)/2);
+  }
+
+  .container {
+    padding: 4px;
+  }
+
+  .mat-expansion-panel-body {
+    padding: 0 4px 2px !important;
+  }
 }
 
 @media only screen and (min-width: 768px) {
@@ -142,6 +191,22 @@ span {
     padding-left: calc((100% - $screen-width)/2);
     padding-right: calc((100% - $screen-width)/2);
   }
+
+  .f13_l {
+    padding-left: calc((100% - $screen-width)/2);
+  }
+
+  .f13_r {
+    padding-right: calc((100% - $screen-width)/2);
+  }
+
+  .container {
+    padding: 8px;
+  }
+
+  .mat-expansion-panel-body {
+    padding: 0 8px 4px !important;
+  }
 }
 
 @media only screen and (min-width: 992px) {
@@ -156,6 +221,22 @@ span {
     padding-left: calc((100% - $screen-width)/2);
     padding-right: calc((100% - $screen-width)/2);
   }
+
+  .f13_l {
+    padding-left: calc((100% - $screen-width)/2);
+  }
+
+  .f13_r {
+    padding-right: calc((100% - $screen-width)/2);
+  }
+
+  .container {
+    padding: 16px;
+  }
+
+  .mat-expansion-panel-body {
+    padding: 0 16px 12px !important;
+  }
 }
 
 @media only screen and (min-width: 1200px) {
@@ -170,6 +251,22 @@ span {
     padding-left: calc((100% - $screen-width)/2);
     padding-right: calc((100% - $screen-width)/2);
   }
+
+  .f13_l {
+    padding-left: calc((100% - $screen-width)/2);
+  }
+
+  .f13_r {
+    padding-right: calc((100% - $screen-width)/2);
+  }
+
+  .container {
+    padding: 24px;
+  }
+
+  .mat-expansion-panel-body {
+    padding: 0 24px 16px !important;
+  }
 }
 
 //размеры говна конец