Обновить README.md

Reviewed-on: #4

README.md

@@ -2,26 +2,6 @@
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.2.2.
 
-## Development server
+## Visitor counter 
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+![NwaifuWeb](https://count.getloli.com/get/@NwaifuWeb?theme=gelbooru)

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build --base-href https://nwaifu.su/ --configuration production",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "lint": "ng lint"
@@ -24,6 +24,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@ngneat/dialog": "5.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

pnpm-lock.yaml

@@ -44,6 +44,9 @@ dependencies:
   '@fortawesome/free-solid-svg-icons':
     specifier: ^6.4.2
     version: 6.5.1
+  '@ngneat/dialog':
+    specifier: 5.0.0
+    version: 5.0.0(@angular/core@17.2.3)
   rxjs:
     specifier: ~7.8.0
     version: 7.8.1
@@ -2433,6 +2436,15 @@ packages:
       call-bind: 1.0.7
     dev: true
 
+  /@ngneat/dialog@5.0.0(@angular/core@17.2.3):
+    resolution: {integrity: sha512-+qLGaLcNXQ5PVtlv4htqHsJ4JV9TZ+wy89rtYMsno/jZuB63usMITPEB7TgtEPgpbyDDcYVagA6eQqYMEgZPOA==}
+    peerDependencies:
+      '@angular/core': '>=17.0.0'
+    dependencies:
+      '@angular/core': 17.2.3(rxjs@7.8.1)(zone.js@0.14.4)
+      tslib: 2.3.1
+    dev: false
+
   /@ngtools/webpack@17.2.2(@angular/compiler-cli@17.2.3)(typescript@5.3.3)(webpack@5.90.1):
     resolution: {integrity: sha512-HgvClGO6WVq4VA5d0ZvlDG5hrj8lQzRH99Gt87URm7G8E5XkatysdOsMqUQsJz+OwFWhP4PvTRWVblpBDiDl/A==}
     engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
@@ -5893,8 +5905,6 @@ packages:
     peerDependenciesMeta:
       webpack:
         optional: true
-      webpack-sources:
-        optional: true
     dependencies:
       webpack: 5.90.1(esbuild@0.20.0)
       webpack-sources: 3.2.3
@@ -8054,6 +8064,10 @@ packages:
       strip-bom: 3.0.0
     dev: true
 
+  /tslib@2.3.1:
+    resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
+    dev: false
+
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
 

src/app/app.component.html

@@ -1,6 +1,7 @@
+<header>
+  <app-panel></app-panel>
+</header>
 <main class="main">
-  <section class="content">
-    <app-heading></app-heading>
-    <app-info></app-info>
-  </section>
+  <app-modal></app-modal>
+  <app-dock></app-dock>
 </main>

src/app/app.component.less

@@ -1,9 +1,8 @@
 .main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  display: block;
   width: 100%;
-  min-height: 100vh;
-  background-color: #303952;
+  height: calc(100% - 2rem);
+  background-image: url("../assets/img/wallpaper.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 }

src/app/app.component.ts

@@ -1,15 +1,15 @@
 import { Component } from "@angular/core";
-import { RouterOutlet } from "@angular/router";
-import { HeadingComponent } from "./modules/heading/heading.component";
-import { InfoComponent } from "./modules/info/info.component";
+import { DockComponent } from "./modules/dock/dock.component";
+import { ModalComponent } from "./modules/modal/modal.component";
+import { PanelComponent } from "./modules/panel/panel.component";
 
 @Component({
   selector: "app-root",
   standalone: true,
-  imports: [RouterOutlet, InfoComponent, HeadingComponent],
+  imports: [PanelComponent, DockComponent, ModalComponent],
   templateUrl: "./app.component.html",
   styleUrl: "./app.component.less",
 })
 export class AppComponent {
-  title = "NwaifuWeb";
+  title = "Nwaifu";
 }

src/app/app.config.ts

@@ -1,8 +1,22 @@
-import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { APP_INITIALIZER, ApplicationConfig } from "@angular/core";
 
-import { routes } from './app.routes';
+import { provideHttpClient } from "@angular/common/http";
+import { TranslateService } from "./services/translate.service";
+
+export function setupTranslateServiceFactory(service: TranslateService) {
+  const lang = localStorage.getItem("lang") ?? "en";
+  return () => service.use(lang);
+}
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+  providers: [
+    provideHttpClient(),
+    TranslateService,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: setupTranslateServiceFactory,
+      deps: [TranslateService],
+      multi: true,
+    },
+  ],
 };

src/app/interfaces/icon.ts

@@ -1,7 +0,0 @@
-import { IconDefinition } from "@fortawesome/free-brands-svg-icons";
-
-export interface Icon {
-  icon: IconDefinition;
-  text: string;
-  url: string;
-}

src/app/interfaces/link.ts

@@ -0,0 +1,6 @@
+export interface Link {
+  id: number;
+  text: string;
+  url: string;
+  svg: string;
+}

src/app/modules/dock/dock.component.html

@@ -0,0 +1,5 @@
+<section class="dock">
+  @for(link of links; track link.id) {
+  <app-link [url]="link.url" [svg]="link.svg" [text]="link.text"></app-link>
+  }
+</section>

src/app/modules/dock/dock.component.less

@@ -0,0 +1,27 @@
+.dock {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  width: 330px;
+  height: 100px;
+  background-color: rgba(171, 178, 181, 30%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1rem;
+  margin-block-end: 1rem;
+  border-radius: 35px;
+  app-link {
+    width: 100%;
+    height: 100%;
+    padding: 0 0.5rem;
+    &:first-child {
+      padding-inline-start: 0;
+    }
+    &:last-child {
+      padding-inline-end: 0;
+    }
+  }
+}

src/app/modules/dock/dock.component.ts

@@ -0,0 +1,34 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { Link } from "../../interfaces/link";
+import { LinkComponent } from "../link/link.component";
+
+@Component({
+  standalone: true,
+  selector: "app-dock",
+  imports: [CommonModule, LinkComponent],
+  templateUrl: "./dock.component.html",
+  styleUrls: ["./dock.component.less"],
+})
+export class DockComponent {
+  readonly links: Link[] = [
+    {
+      id: 0,
+      svg: "../../../assets/svg/logo-telegram.svg",
+      url: "https://t.me/neur0w0men",
+      text: "TELEGRAM_LABEL",
+    },
+    {
+      id: 1,
+      svg: "../../../assets/svg/logo-github.svg",
+      url: "https://github.com/MrSedan",
+      text: "GITHUB_LABEL",
+    },
+    {
+      id: 2,
+      svg: "../../../assets/svg/logo-gitea.svg",
+      url: "https://git.nwaifu.su",
+      text: "GITEA_LABEL",
+    },
+  ];
+}

src/app/modules/heading/heading.component.html

@@ -1 +0,0 @@
-<h1 class="text-[var(--white)] text-6xl text-center mb-[50px]">Neuro LLC</h1>

src/app/modules/heading/heading.component.ts

@@ -1,11 +0,0 @@
-import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
-
-@Component({
-  selector: "app-heading",
-  templateUrl: "./heading.component.html",
-  styleUrls: ["./heading.component.less"],
-  imports: [CommonModule],
-  standalone: true,
-})
-export class HeadingComponent {}

src/app/modules/info/info.component.html

@@ -1,14 +0,0 @@
-<section class="info">
-  @for (icon of icons; track icon.url) {
-  <div
-    class="icon"
-    (click)="goToUrl(icon.url)"
-    (keydown)="goToUrl(icon.url)"
-    tabindex="0"
-    title="{{ icon.url }}"
-  >
-    <fa-icon [icon]="icon.icon" class="socnet-icon"></fa-icon>
-    <p class="font-bold text-[var(--white)]">{{ icon.text }}</p>
-  </div>
-  }
-</section>

src/app/modules/info/info.component.less

@@ -1,43 +0,0 @@
-.info {
-  width: 350px;
-  height: auto;
-  background-color: #786fa6;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 35px 10px;
-  border-radius: 5px;
-  transition: all .3s ease-in-out;
-  &:hover {
-    border-radius: 15px;
-    transform: scale(1.1);
-  }
-}
-
-.icon {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  margin: 1rem 0;
-  p {
-    margin-inline-start: 10px;
-  }
-  border: 2px solid var(--white);
-  padding-inline-start: 10px;
-  transition: all .3s ease-in-out;
-  border-radius: 2px;
-  cursor: pointer;
-  &:hover {
-    overflow: hidden;
-    border: 2px solid transparent;
-    box-shadow: 0 0 0 5px var(--white);
-    border-radius: 5px;
-  }
-}
-
-.socnet-icon {
-  font-size: 35px;
-}

src/app/modules/info/info.component.ts

@@ -1,25 +0,0 @@
-import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
-import { RouterLink } from "@angular/router";
-import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
-import { faGit, faGithub, faTelegram } from "@fortawesome/free-brands-svg-icons";
-import { Icon } from "../../interfaces/icon";
-
-@Component({
-  standalone: true,
-  selector: "app-info",
-  templateUrl: "./info.component.html",
-  styleUrls: ["./info.component.less"],
-  imports: [CommonModule, FontAwesomeModule, RouterLink],
-})
-export class InfoComponent {
-  readonly icons: Icon[] = [
-    { icon: faTelegram, text: "Telegram channel", url: "https://t.me/neur0w0men" },
-    { icon: faGit, text: "Nwaifu Gitea", url: "https://git.nwaifu.su" },
-    { icon: faGithub, text: "Admin/Developer's Github", url: "https://github.com/MrSedan" },
-  ];
-
-  goToUrl(url: string) {
-    window.location.href = url;
-  }
-}

src/app/modules/link/link.component.html

@@ -0,0 +1,4 @@
+<a [href]="url">
+  <img [src]="svg" [alt]="url" [title]="text | translate" />
+  <span>{{ text | translate }}</span>
+</a>

src/app/modules/link/link.component.less

@@ -0,0 +1,36 @@
+img {
+  width: 100%;
+  height: 70px;
+  margin: auto 0;
+}
+a {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0;
+  transition: 0.5s ease-in-out;
+  span {
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0);
+    overflow: hidden;
+    color: var(--white);
+    text-align: center;
+    font-size: 0.8rem;
+    height: 0;
+    font-weight: 600;
+    transition: all 0.6s ease-in-out;
+  }
+  &:hover {
+    transform: translateY(-1rem);
+    span {
+      opacity: 1;
+      height: auto;
+      transform: scale(1);
+      visibility: visible;
+      overflow: visible;
+    }
+  }
+}

src/app/modules/link/link.component.ts

@@ -0,0 +1,16 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input } from "@angular/core";
+import { TranslationPipe } from "../../pipes/translation.pipe";
+
+@Component({
+  standalone: true,
+  selector: "app-link",
+  imports: [CommonModule, TranslationPipe],
+  templateUrl: "./link.component.html",
+  styleUrls: ["./link.component.less"],
+})
+export class LinkComponent {
+  @Input() url: string = "#";
+  @Input() svg: string = "";
+  @Input() text: string = "";
+}

src/app/modules/modal/modal.component.html

@@ -0,0 +1 @@
+<div class="modal-window" #modal></div>

src/app/modules/modal/modal.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from "@angular/common";
+import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
+import { DialogRef, DialogService } from "@ngneat/dialog";
+import { WindowComponent } from "../window/window.component";
+
+@Component({
+  selector: "app-modal",
+  templateUrl: "./modal.component.html",
+  styleUrls: ["./modal.component.less"],
+  imports: [CommonModule],
+  standalone: true,
+})
+export class ModalComponent implements AfterViewInit {
+  dialogRef: DialogRef | undefined = undefined;
+  @ViewChild("modal") modal: ElementRef | undefined = undefined;
+  constructor(private dialogService: DialogService, private ref: ElementRef) {}
+  ngAfterViewInit(): void {
+    this.dialogRef = this.dialogService.open(WindowComponent, {
+      resizable: true,
+      draggable: true,
+      backdrop: false,
+      closeButton: false,
+      container: this.modal ?? this.ref,
+      enableClose: false,
+      dragConstraint: "constrain",
+      id: "info-modal",
+      minWidth: "300px",
+      minHeight: "10rem",
+    });
+  }
+}

src/app/modules/panel/panel.component.html

@@ -0,0 +1,29 @@
+<div class="panel">
+  <div class="desktops">
+    <div class="ellipse"></div>
+    <div class="circle"></div>
+  </div>
+  <div class="time">
+    <span>{{ time }}</span>
+  </div>
+  <div class="right-menu">
+    <span
+      class="lang cursor-pointer"
+      (click)="toggleModal()"
+      (keydown)="toggleModal()"
+      tabindex="0"
+      #lang_btn
+      >{{ getLang() }}</span
+    >
+    <a href="https://git.nwaifu.su/neuro_llc/NwaifuWeb" [title]="source_code_btn_title | translate">
+      <fa-icon [icon]="faGithub" class="sourcecode-icon"></fa-icon>
+    </a>
+    <fa-icon [icon]="faVolume"></fa-icon>
+    <fa-icon [icon]="faPower"></fa-icon>
+  </div>
+</div>
+<div class="lang-choose" #lang_modal>
+  <p (click)="useLang('en')" (keypress)="useLang('en')" tabindex="0"><b>en</b> - English</p>
+  <p (click)="useLang('ru')" (keypress)="useLang('ru')" tabindex="0"><b>ru</b> - Русский</p>
+  <p (click)="useLang('ja')" (keypress)="useLang('ja')" tabindex="0"><b>ja</b> - 日本語</p>
+</div>

src/app/modules/panel/panel.component.less

@@ -0,0 +1,107 @@
+.panel {
+  z-index: 99999;
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 2rem;
+  background-color: #000;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0 1rem;
+}
+
+.desktops {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.5rem;
+  width: auto;
+  height: 100%;
+  .ellipse {
+    width: 60px;
+    height: 0.8rem;
+    border-radius: 50px;
+    background-color: var(--white);
+  }
+  .circle {
+    width: 0.8rem;
+    height: 0.8rem;
+    border-radius: 50px;
+    background-color: #b1b2b5;
+  }
+}
+.time {
+  margin: auto 0;
+  width: auto;
+  span {
+    font-weight: 600;
+    color: var(--white);
+    line-height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    font-size: 1rem;
+  }
+}
+
+.right-menu {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 0.7rem;
+  color: var(--white);
+  margin: auto 0;
+  align-items: center;
+  span {
+    font-weight: 600;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  fa-icon {
+    font-size: 1.2rem;
+    cursor: pointer;
+  }
+}
+.lang-choose {
+  position: absolute;
+  display: none;
+  &.active {
+    display: flex;
+  }
+  top: 0;
+  flex-direction: column;
+  justify-content: space-around;
+  gap: 0;
+  background-color: var(--black);
+  margin-block-start: 3rem;
+  z-index: 9999;
+  margin-inline-end: 1rem;
+  color: var(--white);
+  padding: 1rem 0;
+  border-radius: 15px;
+  &::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    vertical-align: middle;
+    top: -0.5rem;
+    width: 0;
+    height: 0;
+    border: 10px solid var(--black);
+  }
+  p {
+    line-height: 2rem;
+    width: 100%;
+    padding: 0.5rem 1rem;
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: pointer;
+    &:hover {
+      background-color: #000;
+    }
+  }
+}

src/app/modules/panel/panel.component.ts

@@ -0,0 +1,88 @@
+import { CommonModule } from "@angular/common";
+import { Component, ElementRef, HostListener, ViewChild } from "@angular/core";
+import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { faGithub } from "@fortawesome/free-brands-svg-icons";
+import { faPowerOff, faVolumeHigh } from "@fortawesome/free-solid-svg-icons";
+import { TranslationPipe } from '../../pipes/translation.pipe';
+import { PanelSevice } from "../../services/panel.service";
+import { TranslateService } from "../../services/translate.service";
+
+@Component({
+  standalone: true,
+  selector: "app-panel",
+  imports: [CommonModule, FontAwesomeModule, TranslationPipe],
+  templateUrl: "./panel.component.html",
+  styleUrls: ["./panel.component.less"],
+})
+export class PanelComponent {
+  source_code_btn_title = "SOURCE_CODE_TITLE"
+
+  public time = "";
+  faGithub = faGithub;
+  faVolume = faVolumeHigh;
+  faPower = faPowerOff;
+  showLangModalBool = false;
+  @ViewChild("lang_modal") langModal: ElementRef<HTMLDivElement> | null = null;
+  @ViewChild("lang_btn") langBtn: ElementRef<HTMLSpanElement> | null = null;
+
+  constructor(private panelService: PanelSevice, private translateService: TranslateService) {
+    this.time = this.getTime();
+    setInterval(() => {
+      this.time = this.getTime();
+    }, 1000);
+  }
+
+  private getTime() {
+    const time = this.panelService.getTime();
+    return time.toLocaleDateString(this.translateService.translate("TIME_SCHEMA"), {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+    });
+  }
+
+  goToSource() {
+    window.open("https://git.nwaifu.su/neuro_llc/NwaifuWeb", "_blank");
+  }
+
+  @HostListener("window:resize")
+  private moveLangModal() {
+    if (!this.langModal || !this.langBtn) {
+      return;
+    }
+
+    const x = this.langBtn.nativeElement.getBoundingClientRect().x;
+    this.langModal.nativeElement.style.left = `calc(${x}px - 3.5rem)`;
+  }
+
+  @HostListener("window:click", ["$event"])
+  private closeLangModal(event: MouseEvent) {
+    if (
+      this.langModal &&
+      this.langBtn &&
+      !this.langModal.nativeElement.contains(event.target as Node) &&
+      !this.langBtn.nativeElement.contains(event.target as Node)
+    ) {
+      this.langModal.nativeElement.classList.remove("active");
+    }
+  }
+
+  toggleModal() {
+    if (this.langModal) {
+      this.langModal.nativeElement.classList.toggle("active");
+      if (this.langModal.nativeElement.classList.contains("active")) {
+        this.moveLangModal();
+      }
+    }
+  }
+
+  useLang(lang: string) {
+    this.langModal && this.langModal.nativeElement.classList.remove("active");
+    this.translateService.use(lang);
+  }
+
+  getLang() {
+    return this.translateService.lang;
+  }
+}

src/app/modules/window/window.component.html

@@ -0,0 +1,10 @@
+<div class="panel">
+  <span>{{ modal_title | translate }}</span>
+  <div class="btns">
+    <fa-icon [icon]="faMenu"></fa-icon>
+    <fa-icon [icon]="faClose"></fa-icon>
+  </div>
+</div>
+<div class="content">
+  <h1>{{ modal_text | translate }}</h1>
+</div>

src/app/modules/window/window.component.less

@@ -0,0 +1,24 @@
+.panel {
+  width: 100%;
+  display: flex;
+  height: 3rem;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 1rem;
+  background-color: var(--black);
+  color: var(--white);
+  span {
+    font-size: 600;
+  }
+  .btns {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 1rem;
+  }
+}
+.content {
+  margin: 1rem;
+}

src/app/modules/window/window.component.ts

@@ -0,0 +1,22 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { faBars, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { DialogRef } from "@ngneat/dialog";
+import { TranslationPipe } from "../../pipes/translation.pipe";
+
+@Component({
+  selector: "app-window",
+  standalone: true,
+  imports: [CommonModule, FontAwesomeModule, TranslationPipe],
+  templateUrl: "./window.component.html",
+  styleUrls: ["./window.component.less"],
+  // changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WindowComponent {
+  modal_text = "MODAL_TEXT";
+  modal_title = "MODAL_TITLE";
+  faClose = faXmark;
+  faMenu = faBars;
+  constructor(public ref: DialogRef) {}
+}

src/app/pipes/translation.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { TranslateService } from "../services/translate.service";
+
+@Pipe({
+  name: "translate",
+  standalone: true,
+  pure: false,
+})
+export class TranslationPipe implements PipeTransform {
+  constructor(private translateService: TranslateService) {}
+  transform(key: string) {
+    return this.translateService.data[key] ?? key;
+  }
+}

src/app/services/panel.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from "@angular/core";
+
+@Injectable({
+  providedIn: "root",
+})
+export class PanelSevice {
+  getTime() {
+    return new Date();
+  }
+}

src/app/services/translate.service.ts

@@ -0,0 +1,31 @@
+import { HttpClient } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+
+@Injectable({ providedIn: "root" })
+export class TranslateService {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data: Record<string, any> = {};
+  lang: string | null = null;
+  constructor(private http: HttpClient) {}
+  use(lang: string): Promise<object> {
+    this.lang = lang ?? "en";
+    localStorage.setItem("lang", this.lang);
+    return new Promise<object>((resolve) => {
+      const langPath = `assets/i18n/${this.lang}.json`;
+      this.http.get(langPath).subscribe({
+        next: (response) => {
+          this.data = response ?? {};
+          resolve(this.data);
+        },
+        error: () => {
+          this.data = {};
+          resolve(this.data);
+        },
+      });
+    });
+  }
+
+  translate(key: string) {
+    return this.data[key] ?? key;
+  }
+}

src/assets/i18n/en.json

@@ -0,0 +1,9 @@
+{
+  "MODAL_TITLE": "Info",
+  "TIME_SCHEMA": "en-US",
+  "MODAL_TEXT": "Hello, World!",
+  "TELEGRAM_LABEL": "Telegram channel",
+  "GITHUB_LABEL": "Admin's Github",
+  "GITEA_LABEL": "Neuro LLC Gitea",
+  "SOURCE_CODE_TITLE": "Source code"
+}

src/assets/i18n/ja.json

@@ -0,0 +1,9 @@
+{
+  "MODAL_TITLE": "情報",
+  "TIME_SCHEMA": "ja-JP",
+  "MODAL_TEXT": "こんにちは、世界!",
+  "TELEGRAM_LABEL": "Telegramチャンネル",
+  "GITHUB_LABEL": "管理者Github",
+  "GITEA_LABEL": "Neuro LLC Gitea",
+  "SOURCE_CODE_TITLE": "ソースコード"
+}

src/assets/i18n/ru.json

@@ -0,0 +1,9 @@
+{
+  "MODAL_TITLE": "Информация",
+  "TIME_SCHEMA": "ru-RU",
+  "MODAL_TEXT": "Здравствуйте, мир!",
+  "TELEGRAM_LABEL": "Телеграм канал",
+  "GITHUB_LABEL": "Github админа",
+  "GITEA_LABEL": "Neuro LLC Gitea",
+  "SOURCE_CODE_TITLE": "Исходный код"
+}

src/assets/svg/logo-gitea.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#609926;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g id="Guides">
+</g>
+<g id="Icon">
+	<circle class="st0" cx="512" cy="512" r="512"/>
+	<g>
+		<path class="st1" d="M762.2,350.3c-100.9,5.3-160.7,8-212,8.5v114.1l-16-7.9l-0.1-106.1c-58.9,0-110.7-3.1-209.1-8.6
+			c-12.3-0.1-29.5-2.4-47.9-2.5c-47.1-0.1-110.2,33.5-106.7,118C175.8,597.6,296,609.9,344,610.9c5.3,24.7,61.8,110.1,103.6,114.6
+			H631C740.9,717.3,823.3,351.7,762.2,350.3z M216.2,467.6c-4.7-36.6,11.8-74.8,73.2-73.2C296.1,462,307,501.5,329,561.9
+			C272.8,554.5,225,536.2,216.2,467.6z M631.8,551.1l-51.3,105.6c-6.5,13.4-22.7,19-36.2,12.5l-105.6-51.3
+			c-13.4-6.5-19-22.7-12.5-36.2l51.3-105.6c6.5-13.4,22.7-19,36.2-12.5l105.6,51.3C632.7,521.5,638.3,537.7,631.8,551.1z"/>
+		<path class="st1" d="M555,609.9c0.1-0.2,0.2-0.3,0.2-0.5c17.2-35.2,24.3-49.8,19.8-62.4c-3.9-11.1-15.5-16.6-36.7-26.6
+			c-0.8-0.4-1.7-0.8-2.5-1.2c0.2-2.3-0.1-4.7-1-7c-0.8-2.3-2.1-4.3-3.7-6l13.6-27.8l-11.9-5.8L519.1,501c-2,0-4.1,0.3-6.2,1
+			c-8.9,3.2-13.5,13-10.3,21.9c0.7,1.9,1.7,3.5,2.8,5l-23.6,48.4c-1.9,0-3.8,0.3-5.7,1c-8.9,3.2-13.5,13-10.3,21.9
+			c3.2,8.9,13,13.5,21.9,10.3c8.9-3.2,13.5-13,10.3-21.9c-0.9-2.5-2.3-4.6-4-6.3l23-47.2c2.5,0.2,5,0,7.5-0.9
+			c2.1-0.8,3.9-1.9,5.5-3.3c0.9,0.4,1.9,0.9,2.7,1.3c17.4,8.2,27.9,13.2,30,19.1c2.6,7.5-5.1,23.4-19.3,52.3
+			c-0.1,0.2-0.2,0.5-0.4,0.7c-2.2-0.1-4.4,0.2-6.5,1c-8.9,3.2-13.5,13-10.3,21.9c3.2,8.9,13,13.5,21.9,10.3
+			c8.9-3.2,13.5-13,10.3-21.9C557.8,613.6,556.5,611.6,555,609.9z"/>
+	</g>
+</g>
+</svg>

src/assets/svg/logo-github.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>github [#142]</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="#000000">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" id="github-[#142]">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svg/logo-telegram.svg

@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="70" xmlns="http://www.w3.org/2000/svg" height="70" id="screenshot-ad7c5ac4-c816-80ae-8004-02dbaf2b6165" viewBox="0 0 70 70" style="-webkit-print-color-adjust: exact;" fill="none" version="1.1"><g id="shape-ad7c5ac4-c816-80ae-8004-02dbaf2b6165" width="512" version="1.1" height="512" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-ad7c5ac4-c816-80ae-8004-02dbaf2ec056"><defs id="defs2987" rx="0" ry="0" style="fill: rgb(0, 0, 0);"/></g><g id="shape-ad7c5ac4-c816-80ae-8004-02dbaf2fbd4c" rx="0" ry="0" style="fill: rgb(0, 0, 0);"/><g id="shape-ad7c5ac4-c816-80ae-8004-02dbaf302fad" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-ad7c5ac4-c816-80ae-8004-02dbaf32aa29"><g class="fills" id="fills-ad7c5ac4-c816-80ae-8004-02dbaf32aa29"><path rx="0" ry="0" d="M67.177,35.000C67.177,52.818,52.771,67.262,35.000,67.262C17.229,67.262,2.823,52.818,2.823,35.000C2.823,17.182,17.229,2.738,35.000,2.738C52.771,2.738,67.177,17.182,67.177,35.000ZZ" style="display: inline; fill: rgb(37, 155, 215); fill-opacity: 1;"/></g></g><g id="shape-ad7c5ac4-c816-80ae-8004-02dbaf3467db"><g class="fills" id="fills-ad7c5ac4-c816-80ae-8004-02dbaf3467db"><path rx="0" ry="0" d="M16.299,36.189C16.299,36.189,15.466,35.439,15.608,35.004C15.786,34.457,17.188,34.312,17.188,34.312L48.310,22.061C48.310,22.061,49.426,21.710,49.890,21.962C50.421,22.251,50.779,23.543,50.779,23.543L44.555,50.712C44.555,50.712,44.224,51.207,43.962,51.305C43.529,51.467,42.579,51.206,42.579,51.206L34.379,44.883L29.242,50.021L27.858,48.934L24.796,39.252Z" style="display: inline; fill: rgb(255, 255, 255);"/></g></g></g><g id="shape-ad7c5ac4-c816-80ae-8004-02dbaf352fb3" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-ad7c5ac4-c816-80ae-8004-02dbaf361901"><g class="fills" id="fills-ad7c5ac4-c816-80ae-8004-02dbaf361901"><path rx="0" ry="0" d="M24.944,39.252L43.913,26.952L44.605,27.149L44.358,27.693L29.340,41.277L28.649,49.477L27.809,48.885Z" style="display: inline; fill: rgb(177, 200, 211); fill-opacity: 1;"/></g></g><g id="shape-ad7c5ac4-c816-80ae-8004-02dbaf372ee4"><g class="fills" id="fills-ad7c5ac4-c816-80ae-8004-02dbaf372ee4"><path rx="0" ry="0" d="M29.489,41.327C29.489,41.524,34.280,45.031,34.280,45.031L29.390,49.971L28.649,49.280Z" style="display: inline; fill: rgb(136, 189, 216); fill-opacity: 1;"/></g></g></g></g></svg>

src/index.html

@@ -1,13 +1,13 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>NwaifuWeb</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>NwaifuWeb</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>

src/styles.less

@@ -22,6 +22,38 @@
   box-sizing: border-box;
   font-family: Montserrat, sans-serif;
   font-optical-sizing: auto;
-  font-weight: 800;
+  font-weight: 400;
   font-style: normal;
 }
+html {
+  position: relative;
+}
+body {
+  width: 100%;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+ngneat-dialog {
+  .ngneat-dialog-backdrop {
+    pointer-events: none;
+    .ngneat-dialog-content {
+      pointer-events: all;
+      border-radius: 10px;
+      span {
+        font-weight: 600;
+        user-select: none;
+      }
+      .btns {
+        fa-icon {
+          z-index: 999;
+          cursor: not-allowed;
+        }
+      }
+      .ngneat-drag-marker {
+        height: 3rem;
+      }
+    }
+  }
+}