New version: v0.2.3

Reviewed-on: #4

.eslintrc.json

@@ -0,0 +1,60 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:@angular-eslint/template/accessibility"
+      ],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ],
+  "plugins": ["@nx"]
+}

.gitignore

@@ -40,3 +40,11 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+
+.nx/cache
+.nx/workspace-data
+
+# env
+*.env*
+!*.env.example

.nvmrc

@@ -0,0 +1 @@
+v20.11.1

.prettierignore

@@ -0,0 +1,5 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage
+/.nx/cache
+/.nx/workspace-data

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "arrowParens": "always",
+  "printWidth": 100,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "bracketSpacing": true
+}

.vscode/extensions.json

@@ -1,4 +1,8 @@
 {
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
-  "recommendations": ["angular.ng-template"]
+  "recommendations": [
+    "angular.ng-template",
+    "nrwl.angular-console",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
 }

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true,
+    // "**/node_modules": true,
+    "**/.angular": true
+  },
+  "editor.formatOnSave": true
+}

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)

angular.json

@@ -1,104 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "cli": {
-    "packageManager": "pnpm"
-  },
-  "newProjectRoot": "projects",
-  "projects": {
-    "NwaifuWeb": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "less"
-        }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:application",
-          "options": {
-            "outputPath": "dist/nwaifu-web",
-            "index": "src/index.html",
-            "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
-            "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "less",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.less"
-            ],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "NwaifuWeb:build:production"
-            },
-            "development": {
-              "buildTarget": "NwaifuWeb:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "buildTarget": "NwaifuWeb:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
-            "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "less",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.less"
-            ],
-            "scripts": []
-          }
-        }
-      }
-    }
-  }
-}

apps/NwaifuWeb/.eslintrc.json

@@ -0,0 +1,41 @@
+{
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:@angular-eslint/template/accessibility"
+      ],
+      "rules": {}
+    }
+  ],
+  "extends": "../../.eslintrc.json"
+}

apps/NwaifuWeb/project.json

@@ -0,0 +1,86 @@
+{
+  "name": "NwaifuWeb",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "generators": {
+    "@schematics/angular:component": {
+      "style": "less"
+    }
+  },
+  "sourceRoot": "apps/NwaifuWeb/src",
+  "prefix": "app",
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:application",
+      "options": {
+        "outputPath": "dist/apps/NwaifuWeb",
+        "index": "apps/NwaifuWeb/src/index.html",
+        "browser": "apps/NwaifuWeb/src/main.ts",
+        "polyfills": ["zone.js"],
+        "tsConfig": "apps/NwaifuWeb/tsconfig.app.json",
+        "inlineStyleLanguage": "less",
+        "assets": ["apps/NwaifuWeb/src/favicon.ico", "apps/NwaifuWeb/src/assets"],
+        "styles": ["apps/NwaifuWeb/src/styles.less"],
+        "scripts": []
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "2kb",
+              "maximumError": "4kb"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "NwaifuWeb:build:production"
+        },
+        "development": {
+          "buildTarget": "NwaifuWeb:build:development"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "buildTarget": "NwaifuWeb:build"
+      }
+    },
+    "test": {
+      "executor": "@angular-devkit/build-angular:karma",
+      "options": {
+        "polyfills": ["zone.js", "zone.js/testing"],
+        "tsConfig": "apps/NwaifuWeb/tsconfig.spec.json",
+        "inlineStyleLanguage": "less",
+        "assets": ["apps/NwaifuWeb/src/favicon.ico", "apps/NwaifuWeb/src/assets"],
+        "styles": ["apps/NwaifuWeb/src/styles.less"],
+        "scripts": []
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "lintFilePatterns": ["apps/NwaifuWeb/**/*.ts", "apps/NwaifuWeb/**/*.html"]
+      }
+    }
+  }
+}

apps/NwaifuWeb/src/app/app.component.html

@@ -0,0 +1,6 @@
+<header>
+  <app-panel></app-panel>
+</header>
+<main>
+  <router-outlet></router-outlet>
+</main>

apps/NwaifuWeb/src/app/app.component.less

@@ -0,0 +1,8 @@
+main {
+  overflow-y: auto;
+  width: 100%;
+  height: calc(100% - 2rem);
+  background-image: url("../assets/img/wallpaper.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}

apps/NwaifuWeb/src/app/app.component.spec.ts

@@ -1,14 +1,14 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
+import { TestBed } from "@angular/core/testing";
+import { AppComponent } from "./app.component";
 
-describe('AppComponent', () => {
+describe("AppComponent", () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [AppComponent],
     }).compileComponents();
   });
 
-  it('should create the app', () => {
+  it("should create the app", () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
@@ -17,13 +17,13 @@ describe('AppComponent', () => {
   it(`should have the 'NwaifuWeb' title`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('NwaifuWeb');
+    expect(app.title).toEqual("NwaifuWeb");
   });
 
-  it('should render title', () => {
+  it("should render title", () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, NwaifuWeb');
+    expect(compiled.querySelector("h1")?.textContent).toContain("Hello, NwaifuWeb");
   });
 });

apps/NwaifuWeb/src/app/app.component.ts

@@ -0,0 +1,14 @@
+import { Component } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { PanelComponent } from "./modules/panel/panel.component";
+
+@Component({
+  selector: "app-root",
+  standalone: true,
+  imports: [PanelComponent, RouterModule],
+  templateUrl: "./app.component.html",
+  styleUrl: "./app.component.less",
+})
+export class AppComponent {
+  title = "Nwaifu";
+}

apps/NwaifuWeb/src/app/app.config.ts

@@ -0,0 +1,25 @@
+import { APP_INITIALIZER, ApplicationConfig } from "@angular/core";
+
+import { provideHttpClient } from "@angular/common/http";
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+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),
+    provideHttpClient(),
+    TranslateService,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: setupTranslateServiceFactory,
+      deps: [TranslateService],
+      multi: true,
+    },
+  ],
+};

apps/NwaifuWeb/src/app/app.routes.ts

@@ -0,0 +1,19 @@
+import { Routes } from "@angular/router";
+import { MainPageComponent } from './pages/main/main.component';
+import { NitroplusComponent } from './pages/nitroplus-translator/nitroplus-translator.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: '',
+        component: MainPageComponent
+      },
+      {
+        path: 'translator',
+        component: NitroplusComponent
+      }
+    ]
+  },
+];

apps/NwaifuWeb/src/app/interfaces/link.ts

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

apps/NwaifuWeb/src/app/modules/desktop-icon/desktop-icon.component.html

@@ -0,0 +1,4 @@
+<div class="desktop-icon">
+  <img [src]="image" [alt]="alt" [title]="name" />
+  <span>{{ name }}</span>
+</div>

apps/NwaifuWeb/src/app/modules/desktop-icon/desktop-icon.component.less

@@ -0,0 +1,17 @@
+.desktop-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 5rem;
+  height: 6rem;
+  color: white;
+  font-size: 0.7rem;
+  user-select: none;
+  padding: 1rem;
+  border-radius: 10px;
+  transition: 0.2s ease-in-out;
+  &:hover {
+    background-color: rgba(25, 17, 19, 0.7);
+  }
+}

apps/NwaifuWeb/src/app/modules/desktop-icon/desktop-icon.component.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'desktop-icon',
+  templateUrl: './desktop-icon.component.html',
+  styleUrls: ['./desktop-icon.component.less'],
+  standalone: true,
+  imports: [CommonModule, RouterModule]
+})
+export class DesktopIconComponent {
+  @Input() image: string = '';
+  @Input() alt: string = '';
+  @Input() name: string = '';
+  @Input({required: false}) click: ()=>void = ()=>{};
+}

apps/NwaifuWeb/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>

apps/NwaifuWeb/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;
+    }
+  }
+}

apps/NwaifuWeb/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",
+    },
+  ];
+}

apps/NwaifuWeb/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>

apps/NwaifuWeb/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;
+    }
+  }
+}

apps/NwaifuWeb/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 = "";
+}

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

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

apps/NwaifuWeb/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",
+    });
+  }
+}

apps/NwaifuWeb/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>

apps/NwaifuWeb/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;
+    }
+  }
+}

apps/NwaifuWeb/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;
+  }
+}

apps/NwaifuWeb/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>

apps/NwaifuWeb/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;
+}

apps/NwaifuWeb/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) {}
+}

apps/NwaifuWeb/src/app/pages/main/main.component.html

@@ -0,0 +1,5 @@
+<div class="icons">
+  <a routerLink='/translator'><desktop-icon alt='translator' name='Translator' image='../../../assets/svg/logo-gitea.svg'></desktop-icon></a>
+</div>
+<app-modal></app-modal>
+<app-dock></app-dock>

apps/NwaifuWeb/src/app/pages/main/main.component.less

@@ -0,0 +1,9 @@
+.icons {
+  margin: 2rem 3rem;
+  position: absolute;
+}
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

apps/NwaifuWeb/src/app/pages/main/main.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { DesktopIconComponent } from '../../modules/desktop-icon/desktop-icon.component';
+import { DockComponent } from '../../modules/dock/dock.component';
+import { ModalComponent } from '../../modules/modal/modal.component';
+
+@Component({
+  selector: 'app-main-page',
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.less'],
+  imports: [DockComponent, ModalComponent, CommonModule, DesktopIconComponent, RouterLink],
+  standalone: true
+})
+export class MainPageComponent {}

apps/NwaifuWeb/src/app/pages/nitroplus-translator/components/text_list/text_list.component.html

@@ -0,0 +1,9 @@
+@if (elements_data.length) {
+  <h1>{{ "ROW_COUNT_LABEL" | translate }}: {{ elements_data.length }}</h1>
+  <h2>{{ "FILE_NAME_LABEL" | translate }}: {{ fileName }}</h2>
+}
+<div id="elements">
+  @for (item of elements_data; track $index) {
+    <app-translate-block #translateBlock [index]="$index" [item]="item"></app-translate-block>
+  }
+</div>

apps/NwaifuWeb/src/app/pages/nitroplus-translator/components/text_list/text_list.component.scss

@@ -0,0 +1,19 @@
+#elements {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  align-items: center;
+  margin-inline: 2rem;
+}
+
+h1, h2 {
+  color: #efdee0;
+  text-align: center;
+  margin: 1rem 2rem;
+}
+app-translate-block {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

apps/NwaifuWeb/src/app/pages/nitroplus-translator/components/text_list/text_list.component.ts

@@ -0,0 +1,36 @@
+import { CommonModule } from "@angular/common";
+import { AfterViewInit, Component, Input, QueryList, ViewChildren } from "@angular/core";
+import { TranslationPipe } from "../../../../pipes/translation.pipe";
+import { NpsFile, TranslateData } from "../../dto/translate_data.dto";
+import { TranslateBlockComponent } from "../translate_block/translate_block.component";
+
+@Component({
+  selector: "app-text-list",
+  templateUrl: "./text_list.component.html",
+  styleUrls: ["./text_list.component.scss"],
+  standalone: true,
+  imports: [CommonModule, TranslateBlockComponent, TranslationPipe],
+})
+export class TextListComponent implements AfterViewInit {
+  @ViewChildren("translateBlock") translate_blocks: QueryList<TranslateBlockComponent> | null =
+    null;
+  fileName = "";
+  elements_data: TranslateData[] = [];
+  @Input() set elements(el: TranslateData[]) {
+    this.elements_data = el;
+    localStorage.setItem("translations", JSON.stringify(this.elements_data));
+    this.ngAfterViewInit();
+  }
+
+  get elements() {
+    return this.elements_data;
+  }
+
+  ngAfterViewInit(): void {
+    const data = localStorage.getItem("original_file");
+    if (data) {
+      const file: NpsFile = JSON.parse(data);
+      this.fileName = file.file_name;
+    }
+  }
+}

apps/NwaifuWeb/src/app/pages/nitroplus-translator/components/translate_block/translate_block.component.html

@@ -0,0 +1,25 @@
+<div class="element">
+  <h2>{{ index + 1 }}</h2>
+  <div class="fields">
+    <h2>{{ item.name }}</h2>
+    <nwui-textarea [contenteditable]="false">{{ item.english_text }}</nwui-textarea>
+    <nwui-textarea
+      #translatedText
+      [contenteditable]="isEditing"
+      (leave)="saveTranslate($event)"
+      [disabled]="!isEditing"
+      >{{ item.translated_text }}</nwui-textarea
+    >
+  </div>
+  <div class="btns">
+    <nwui-button (click)="sendToGoogleTranslate()" [disabled]="translateLoading">{{
+      "TRANSLATE_BTN" | translate
+    }}</nwui-button>
+    <nwui-button (click)="isEditing = !isEditing" [disabled]="isEditing">{{
+      "EDIT_BTN" | translate
+    }}</nwui-button>
+    <nwui-button (click)="clear()" [disabled]="!item.translated_text.length">{{
+      "CLEAR_ROW_BTN" | translate
+    }}</nwui-button>
+  </div>
+</div>

apps/NwaifuWeb/src/app/pages/nitroplus-translator/components/translate_block/translate_block.component.scss

@@ -0,0 +1,39 @@
+.element {
+  display: flex;
+  background-color: #413738;
+  padding: 3rem 5rem;
+  border-radius: 30px;
+  flex-direction: row;
+  width: 100%;
+  max-width: 1200px;
+  align-items: center;
+  gap: 2rem;
+  justify-content: space-between;
+  h2 {
+    color: #efdee0;
+  }
+  .fields {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    max-width: 1200px;
+  }
+}
+
+@media (max-width: 768px) {
+  .element {
+    flex-direction: column;
+  }
+}
+
+.btns {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  padding-inline: 1rem;
+  nwui-button {
+    width: 100%;
+  }
+}

apps/NwaifuWeb/src/app/pages/nitroplus-translator/components/translate_block/translate_block.component.ts

@@ -0,0 +1,85 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input, OnInit, ViewChild } from "@angular/core";
+import { NWUIButtonComponent, NWUITextAreaComponent } from "@nwaifu-ui";
+import { TranslationPipe } from "../../../../pipes/translation.pipe";
+import { LocalStorageKeys } from "../../consts";
+import { TranslateData } from "../../dto/translate_data.dto";
+import { ETranslateService } from "../../services/translate.enums";
+import { TranslateService } from "../../services/translate.service";
+
+@Component({
+  selector: "app-translate-block",
+  templateUrl: "./translate_block.component.html",
+  styleUrls: ["./translate_block.component.scss"],
+  standalone: true,
+  imports: [CommonModule, NWUIButtonComponent, NWUITextAreaComponent, TranslationPipe],
+  providers: [TranslateService],
+})
+export class TranslateBlockComponent implements OnInit {
+  @ViewChild("translatedText") translatedText: NWUITextAreaComponent | null = null;
+  @Input({ required: true }) item: TranslateData = {
+    english_text: "",
+    translated_text: "",
+    name: "",
+  };
+  @Input({ required: true }) index = 0;
+  translateLoading = false;
+  isEditing = false;
+
+  saveChanges() {
+    const data: TranslateData[] = JSON.parse(
+      localStorage.getItem(LocalStorageKeys.TRANSLATIONS) ?? "[]",
+    );
+    if (!data.length) {
+      alert("No data");
+      return;
+    }
+    data[this.index] = this.item;
+    localStorage.setItem("translations", JSON.stringify(data));
+  }
+
+  ngOnInit(): void {
+    this.isEditing = this.item.translated_text === "";
+  }
+
+  constructor(private translateService: TranslateService) {}
+
+  private sendToTranslate(service: ETranslateService = ETranslateService.GOOGLE) {
+    this.translateLoading = true;
+    this.translateService.translate(this.item.english_text, service).subscribe((text) => {
+      if (this.translatedText)
+        if (this.translatedText.ref) this.translatedText.ref.nativeElement.textContent = text;
+      this.item.translated_text = text;
+      this.isEditing = false;
+      this.translateLoading = false;
+      this.saveChanges();
+    });
+  }
+
+  sendToGoogleTranslate() {
+    this.sendToTranslate(ETranslateService.GOOGLE);
+  }
+
+  sendToDeeplTranslate() {
+    this.sendToTranslate(ETranslateService.DEEPL);
+  }
+
+  sendToPromptTranslate() {
+    this.sendToTranslate(ETranslateService.PROMPT);
+  }
+
+  saveTranslate(text: string) {
+    this.isEditing = false;
+    if (this.translatedText)
+      if (this.translatedText.ref) this.translatedText.ref.nativeElement.textContent = "";
+    this.item.translated_text = text;
+    this.saveChanges();
+  }
+  clear() {
+    this.item.translated_text = "";
+    this.isEditing = true;
+    if (this.translatedText)
+      if (this.translatedText.ref) this.translatedText.ref.nativeElement.textContent = "";
+    this.saveChanges();
+  }
+}

apps/NwaifuWeb/src/app/pages/nitroplus-translator/consts.ts

@@ -0,0 +1,4 @@
+export enum LocalStorageKeys {
+  TRANSLATIONS = 'translations',
+  ORIGINAL_FILE = 'original_file',
+}

apps/NwaifuWeb/src/app/pages/nitroplus-translator/dto/translate_data.dto.ts

@@ -0,0 +1,10 @@
+export interface TranslateData {
+  english_text: string;
+  translated_text: string;
+  name: string;
+}
+export interface NpsFile {
+  file_name: string;
+  original_text: string;
+  translated_text?: string;
+}

apps/NwaifuWeb/src/app/pages/nitroplus-translator/lib/file_tools.ts

@@ -0,0 +1,6 @@
+import { LocalStorageKeys } from '../consts';
+import { NpsFile } from '../dto/translate_data.dto';
+
+export function saveOriginalFile(file: NpsFile) {
+  localStorage.setItem(LocalStorageKeys.ORIGINAL_FILE, JSON.stringify(file));
+}

apps/NwaifuWeb/src/app/pages/nitroplus-translator/lib/parser.ts

@@ -0,0 +1,35 @@
+import { TranslateData } from "../dto/translate_data.dto";
+
+export function parse(text: string): TranslateData[] {
+  // Find all TEXT attr data
+  const result: TranslateData[] = [];
+  const re = /^(?!\/\/)<[^>]*TEXT="(?<textAttr>[^>"]+)"[^>]*>/gim;
+  for (const match of text.matchAll(re)) {
+    console.log(match);
+    if (match.groups?.["textAttr"])
+      result.push({
+        english_text: match.groups?.["textAttr"],
+        translated_text: "",
+        name: "Choice (without name)",
+      });
+  }
+
+  const name_re = /<voice name="(?<name>[^"]+)"[^>]*>(?<text>[\s\S]*?)(?=<voice|$)/gi;
+
+  for (const match of text.matchAll(name_re)) {
+    if (match.groups?.["name"] && match.groups?.["text"]) {
+      const name_text = match.groups?.["text"];
+      const name = match.groups?.["name"];
+      const re = /<[^>]*>|\/\/.*|\s*\n\s*/gm;
+      name_text
+        .split(re)
+        .filter((line) => line.length > 0)
+        .map((line) => line.trim())
+        .forEach((line) => {
+          result.push({ english_text: line, translated_text: "", name: name });
+        });
+    }
+  }
+  console.log(result);
+  return result;
+}

apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.html

@@ -0,0 +1,33 @@
+<div class="btns">
+  <div id="op_btns">
+    <nwui-button (click)="fileInput.click()">
+      <span><i class="lni lni-upload"></i> {{ "UPLOAD_BTN" | translate }}</span>
+      <input
+        type="file"
+        (change)="submitFile($event)"
+        accept=".nps"
+        #fileInput
+        style="display: none"
+      />
+    </nwui-button>
+    <nwui-button (click)="onSaveClicked()">
+      <span><i class="lni lni-save"></i> {{ "SAVE_BTN" | translate }}</span>
+    </nwui-button>
+    @if (this.elements.length) {
+      <nwui-button (click)="clearAllTranslations()" [disabled]="!has_translations">
+        <span><i class="lni lni-trash-can"></i> {{ "CLEAR_TRANSLATIONS_BTN" | translate }}</span>
+      </nwui-button>
+      <nwui-button (click)="getAllTranslations()">
+        <span><i class="lni lni-google"></i> {{ "TRANSLATE_ALL_BTN" | translate }}</span>
+      </nwui-button>
+      <nwui-button (click)="onClearClicked()">
+        <span><i class="lni lni-trash-can"></i> {{ "CLEAR_BTN" | translate }}</span>
+      </nwui-button>
+    }
+  </div>
+  <button id="close_win" (click)="onCloseClicked()"><i class="lni lni-close"></i></button>
+</div>
+<app-text-list [elements]="elements"></app-text-list>
+<nwui-button class="to-top-btn" (click)="scrollToTop()"
+  ><i class="lni lni-arrow-up"></i
+></nwui-button>

apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.less

@@ -0,0 +1,58 @@
+.btns {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  overflow-x: auto;
+  scrollbar-color: #413738;
+  nwui-button {
+    margin: 2rem;
+  }
+  #op_btns {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  #close_win {
+    color: var(--white);
+    font-weight: 600;
+    margin-inline: 2rem;
+    background-color: #413738;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0.5rem;
+    border-radius: 50px;
+    transition: 0.2s linear;
+    i {
+      transition: 0.3s linear;
+    }
+    &:hover {
+      background-color: #5b3f45;
+      transform: scale(1.1);
+      i {
+        transform: scale(1.1);
+      }
+    }
+  }
+}
+:host {
+  background-color: #191113;
+  display: block;
+  min-height: calc(100vh - 2rem);
+  scrollbar-color: #413738;
+}
+.to-top-btn {
+  position: fixed;
+  width: 2rem;
+  left: 2rem;
+  bottom: -5rem;
+  transition: bottom 0.3s ease-in-out;
+
+  &.active {
+    bottom: 1rem;
+  }
+}

apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.ts

@@ -0,0 +1,144 @@
+import { CommonModule } from "@angular/common";
+import { AfterViewInit, Component, OnInit, ViewChild } from "@angular/core";
+import { Router } from "@angular/router";
+import { NWUIButtonComponent } from "@nwaifu-ui";
+import { fromEvent, map } from "rxjs";
+import { TranslationPipe } from "../../pipes/translation.pipe";
+import { TextListComponent } from "./components/text_list/text_list.component";
+import { LocalStorageKeys } from "./consts";
+import { NpsFile, TranslateData } from "./dto/translate_data.dto";
+import { saveOriginalFile } from "./lib/file_tools";
+import { parse } from "./lib/parser";
+@Component({
+  standalone: true,
+  imports: [TextListComponent, CommonModule, NWUIButtonComponent, TranslationPipe],
+  selector: "app-nitroplus",
+  templateUrl: "./nitroplus-translator.component.html",
+  styleUrl: "./nitroplus-translator.component.less",
+})
+export class NitroplusComponent implements OnInit, AfterViewInit {
+  title = "NitroPlusTranslator";
+  elements: TranslateData[] = [];
+  @ViewChild("fileInput") fileInput: HTMLInputElement | null = null;
+  @ViewChild(TextListComponent) text_list: TextListComponent | null = null;
+
+  constructor(private readonly router: Router) {}
+
+  ngOnInit(): void {
+    const data = localStorage.getItem(LocalStorageKeys.TRANSLATIONS);
+    if (data) {
+      try {
+        this.elements = JSON.parse(data);
+      } catch (e) {
+        console.error(e);
+        alert("Error while loading");
+        localStorage.removeItem(LocalStorageKeys.TRANSLATIONS);
+        this.elements = [];
+      }
+    }
+  }
+
+  ngAfterViewInit(): void {
+    const container = document.querySelector("main");
+    if (container) {
+      fromEvent(container, "scroll")
+        .pipe(map(() => container.scrollTop > 100))
+        .subscribe((val) => {
+          if (val) document.querySelector(".to-top-btn")?.classList.add("active");
+          else document.querySelector(".to-top-btn")?.classList.remove("active");
+        });
+    }
+  }
+
+  scrollToTop() {
+    const container = document.querySelector("main");
+    if (container) {
+      container.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  }
+
+  submitFile($event: Event) {
+    const target = $event.target as HTMLInputElement;
+    if (target.files) {
+      const file = target.files[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = () => {
+          if (reader.result) {
+            this.onFileLoaded(reader.result.toString());
+            const original_file: NpsFile = {
+              file_name: file.name,
+              original_text: reader.result.toString(),
+            };
+            saveOriginalFile(original_file);
+            target.value = "";
+          }
+        };
+        reader.readAsText(file);
+      }
+    }
+  }
+
+  onFileLoaded(text: string) {
+    const parsed = parse(text);
+    this.elements = parsed;
+  }
+
+  onClearClicked() {
+    this.elements = [];
+    localStorage.removeItem(LocalStorageKeys.TRANSLATIONS);
+  }
+
+  onSaveClicked() {
+    const original_file: NpsFile = JSON.parse(
+      localStorage.getItem(LocalStorageKeys.ORIGINAL_FILE) ??
+        '{"file_name":"", "original_text":""}',
+    );
+    if (original_file.file_name && original_file.original_text) {
+      const data: TranslateData[] = JSON.parse(
+        localStorage.getItem(LocalStorageKeys.TRANSLATIONS) ?? "[]",
+      );
+      if (!data.length) {
+        alert("No data");
+        return;
+      }
+      original_file.translated_text = original_file.original_text;
+      data.forEach((el) => {
+        original_file.translated_text = original_file.translated_text?.replace(
+          el.english_text,
+          el.translated_text,
+        );
+      });
+
+      const element = document.createElement("a");
+      const file = new Blob([original_file.translated_text], { type: "text/plain" });
+      element.href = URL.createObjectURL(file);
+      element.download = original_file.file_name;
+      element.click();
+    }
+  }
+
+  //TODO: Dialog windows for clear op
+  clearAllTranslations() {
+    if (this.text_list)
+      if (this.text_list.translate_blocks) {
+        this.text_list.translate_blocks
+          .filter((item) => item.item.translated_text)
+          .forEach((item) => item.clear());
+      }
+  }
+
+  getAllTranslations() {
+    if (this.text_list)
+      if (this.text_list.translate_blocks)
+        this.text_list.translate_blocks.forEach((item) => item.sendToGoogleTranslate());
+  }
+
+  get has_translations(): boolean {
+    return this.elements.some((i) => i.translated_text);
+  }
+
+  onCloseClicked() {
+    this.router.navigate(["/"]);
+  }
+}

apps/NwaifuWeb/src/app/pages/nitroplus-translator/services/translate.dto.ts

@@ -0,0 +1 @@
+export type GoogleTranslateResponse = Array<Array<string>>;

apps/NwaifuWeb/src/app/pages/nitroplus-translator/services/translate.enums.ts

@@ -0,0 +1,5 @@
+export enum ETranslateService {
+  GOOGLE = 'google',
+  DEEPL = 'deepl',
+  PROMPT = 'prompt',
+}

apps/NwaifuWeb/src/app/pages/nitroplus-translator/services/translate.service.ts

@@ -0,0 +1,34 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, map } from 'rxjs';
+import { GoogleTranslateResponse } from './translate.dto';
+import { ETranslateService } from './translate.enums';
+
+@Injectable({ providedIn: 'root' })
+export class TranslateService {
+  constructor(private http: HttpClient) {}
+
+  private googleTranslate(text: string): Observable<string> {
+    return this.http
+      .get<GoogleTranslateResponse>(
+        'https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=ru&dt=t&q=' + encodeURIComponent(text),
+      )
+      .pipe(
+        map((response) => {
+          let result = '';
+          response[0].forEach((el) => {
+            result += el[0] + ' ';
+          });
+          return result;
+        }),
+      );
+  }
+  translate(text: string, service: ETranslateService = ETranslateService.GOOGLE): Observable<string> {
+    switch (service) {
+      case ETranslateService.GOOGLE:
+        return this.googleTranslate(text);
+      default:
+        return this.googleTranslate(text);
+    }
+  }
+}

apps/NwaifuWeb/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;
+  }
+}

apps/NwaifuWeb/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();
+  }
+}

apps/NwaifuWeb/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;
+  }
+}

apps/NwaifuWeb/src/assets/i18n/en.json

@@ -0,0 +1,19 @@
+{
+  "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",
+  "UPLOAD_BTN": "Upload",
+  "SAVE_BTN": "Save",
+  "CLEAR_TRANSLATIONS_BTN": "Clear translations",
+  "CLEAR_BTN": "Clear",
+  "ROW_COUNT_LABEL": "Row count",
+  "FILE_NAME_LABEL": "File name",
+  "TRANSLATE_BTN": "Translate",
+  "EDIT_BTN": "Edit",
+  "CLEAR_ROW_BTN": "Clear",
+  "TRANSLATE_ALL_BTN": "Translate all"
+}

apps/NwaifuWeb/src/assets/i18n/ja.json

@@ -0,0 +1,19 @@
+{
+  "MODAL_TITLE": "情報",
+  "TIME_SCHEMA": "ja-JP",
+  "MODAL_TEXT": "こんにちは、世界!",
+  "TELEGRAM_LABEL": "Telegramチャンネル",
+  "GITHUB_LABEL": "管理者Github",
+  "GITEA_LABEL": "Neuro LLC Gitea",
+  "SOURCE_CODE_TITLE": "ソースコード",
+  "UPLOAD_BTN": "アップロード",
+  "SAVE_BTN": "保存",
+  "CLEAR_TRANSLATIONS_BTN": "翻訳をクリア",
+  "CLEAR_BTN": "クリア",
+  "ROW_COUNT_LABEL": "行数",
+  "FILE_NAME_LABEL": "ファイル名",
+  "TRANSLATE_BTN": "翻訳",
+  "EDIT_BTN": "編集",
+  "CLEAR_ROW_BTN": "クリア",
+  "TRANSLATE_ALL_BTN": "すべて翻訳"
+}

apps/NwaifuWeb/src/assets/i18n/ru.json

@@ -0,0 +1,19 @@
+{
+  "MODAL_TITLE": "Информация",
+  "TIME_SCHEMA": "ru-RU",
+  "MODAL_TEXT": "Здравствуйте, мир!",
+  "TELEGRAM_LABEL": "Телеграм канал",
+  "GITHUB_LABEL": "Github админа",
+  "GITEA_LABEL": "Neuro LLC Gitea",
+  "SOURCE_CODE_TITLE": "Исходный код",
+  "UPLOAD_BTN": "Загрузить",
+  "SAVE_BTN": "Сохранить",
+  "CLEAR_TRANSLATIONS_BTN": "Очистить переводы",
+  "CLEAR_BTN": "Очистить",
+  "ROW_COUNT_LABEL": "Количество строк",
+  "FILE_NAME_LABEL": "Имя файла",
+  "TRANSLATE_BTN": "Перевести",
+  "EDIT_BTN": "Редактировать",
+  "CLEAR_ROW_BTN": "Очистить",
+  "TRANSLATE_ALL_BTN": "Перевести все"
+}

apps/NwaifuWeb/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>

apps/NwaifuWeb/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>

apps/NwaifuWeb/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>

apps/NwaifuWeb/src/index.html

@@ -0,0 +1,14 @@
+<!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" />
+    <link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

apps/NwaifuWeb/src/main.ts

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from "@angular/platform-browser";
+import { appConfig } from "./app/app.config";
+import { AppComponent } from "./app/app.component";
+
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

apps/NwaifuWeb/src/styles.less

@@ -0,0 +1,54 @@
+/* You can add global styles to this file, and also import other style files */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+:root {
+  --white: #dadada;
+  --black: #303030;
+  --red: #ff0000;
+  --green: #00ff00;
+  --blue: #0000ff;
+  --yellow: #ffff00;
+}
+
+@font-face {
+  font-family: "Montserrat";
+  src: url("./assets/fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Montserrat, sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}
+html, body {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+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;
+      }
+    }
+  }
+}

apps/NwaifuWeb/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}

apps/NwaifuWeb/tsconfig.editor.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts"],
+  "compilerOptions": {},
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}

apps/NwaifuWeb/tsconfig.json

@@ -1,33 +1,33 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "compileOnSave": false,
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "./dist/out-tsc",
+    "target": "ES2022",
+    "useDefineForClassFields": false,
+    "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "declaration": false,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "ES2022",
-    "module": "ES2022",
-    "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ]
+    "noFallthroughCasesInSwitch": true
   },
+  "files": [],
+  "include": [],
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  }
+  },
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.editor.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
 }

apps/NwaifuWeb/tsconfig.spec.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["jasmine"]
+  },
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}

karma.conf.js

@@ -0,0 +1,43 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+const { join } = require("path");
+const { constants } = require("karma");
+
+module.exports = () => {
+  return {
+    basePath: "",
+    frameworks: ["jasmine", "@angular-devkit/build-angular"],
+    plugins: [
+      require("karma-jasmine"),
+      require("karma-chrome-launcher"),
+      require("karma-jasmine-html-reporter"),
+      require("karma-coverage"),
+      require("@angular-devkit/build-angular/plugins/karma"),
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true, // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: join(__dirname, "./coverage"),
+      subdir: ".",
+      reporters: [{ type: "html" }, { type: "text-summary" }],
+    },
+    reporters: ["progress", "kjhtml"],
+    port: 9876,
+    colors: true,
+    logLevel: constants.LOG_INFO,
+    autoWatch: true,
+    browsers: ["Chrome"],
+    singleRun: true,
+  };
+};

migrations.json

@@ -0,0 +1,64 @@
+{
+  "migrations": [
+    {
+      "cli": "nx",
+      "version": "19.2.0-beta.2",
+      "description": "Updates the default workspace data directory to .nx/workspace-data",
+      "implementation": "./src/migrations/update-19-2-0/move-workspace-data-directory",
+      "package": "nx",
+      "name": "19-2-0-move-graph-cache-directory"
+    },
+    {
+      "cli": "nx",
+      "version": "19.2.2-beta.0",
+      "description": "Updates the nx wrapper.",
+      "implementation": "./src/migrations/update-17-3-0/update-nxw",
+      "package": "nx",
+      "name": "19-2-2-update-nx-wrapper"
+    },
+    {
+      "version": "19.2.4-beta.0",
+      "description": "Set project name in nx.json explicitly",
+      "implementation": "./src/migrations/update-19-2-4/set-project-name",
+      "x-repair-skip": true,
+      "package": "nx",
+      "name": "19-2-4-set-project-name"
+    },
+    {
+      "cli": "nx",
+      "version": "19.1.0-beta.2",
+      "requires": {
+        "@angular/core": ">=18.0.0"
+      },
+      "description": "Update the @angular/cli package version to ~18.0.0.",
+      "factory": "./src/migrations/update-19-1-0/update-angular-cli",
+      "package": "@nx/angular",
+      "name": "update-angular-cli-version-18-0-0"
+    },
+    {
+      "cli": "nx",
+      "version": "19.2.1-beta.0",
+      "requires": {
+        "@angular-eslint/eslint-plugin": ">=18.0.0"
+      },
+      "description": "Installs the '@typescript-eslint/utils' package when having installed '@angular-eslint/eslint-plugin' or '@angular-eslint/eslint-plugin-template' with version >=18.0.0.",
+      "factory": "./src/migrations/update-19-2-1/add-typescript-eslint-utils",
+      "package": "@nx/angular",
+      "name": "add-typescript-eslint-utils"
+    },
+    {
+      "version": "18.0.0",
+      "description": "Updates two-way bindings that have an invalid expression to use the longform expression instead.",
+      "factory": "./migrations/invalid-two-way-bindings/bundle",
+      "package": "@angular/core",
+      "name": "invalid-two-way-bindings"
+    },
+    {
+      "version": "18.0.0",
+      "description": "Replace deprecated HTTP related modules with provider functions",
+      "factory": "./migrations/http-providers/bundle",
+      "package": "@angular/core",
+      "name": "migration-http-providers"
+    }
+  ]
+}

nwaifu-ui/.eslintrc.json

@@ -0,0 +1,46 @@
+{
+  "extends": [
+    "../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "nwui",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "nwui",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@nx/angular-template"
+      ],
+      "rules": {}
+    }
+  ]
+}

nwaifu-ui/README.md

@@ -0,0 +1,7 @@
+# nwaifu-ui
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test nwaifu-ui` to execute the unit tests.

nwaifu-ui/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "nwaifu-ui",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "nwaifu-ui/src",
+  "prefix": "nwui",
+  "projectType": "library",
+  "tags": [],
+  "targets": {}
+}

nwaifu-ui/src/index.ts

@@ -0,0 +1 @@
+export * from './lib';

nwaifu-ui/src/lib/components/button/button.component.html

@@ -0,0 +1 @@
+<button [disabled]="disabled" [type]="type"><ng-content></ng-content></button>

nwaifu-ui/src/lib/components/button/button.component.scss

@@ -0,0 +1,28 @@
+button {
+  outline: none;
+  border: none;
+  cursor: pointer;
+  background-color: #5b3f45;
+  word-break: keep-all;
+  padding: 1em 1.5em;
+  color: #f5f6fa;
+  border-radius: 15px;
+  transition: ease-in-out 0.2s;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  &:hover,
+  &:active {
+    transform: scale(1.2);
+  }
+  &:disabled {
+    opacity: 0.5;
+    &:hover,
+    &:active {
+      cursor: not-allowed;
+      transform: scale(1);
+    }
+  }
+}

nwaifu-ui/src/lib/components/button/button.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'nwui-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss'],
+  standalone: true,
+  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NWUIButtonComponent {
+  @Input() disabled = false;
+  @Input() type = 'button';
+}

nwaifu-ui/src/lib/components/button/index.ts

@@ -0,0 +1 @@
+export * from './button.component';

nwaifu-ui/src/lib/components/index.ts

@@ -0,0 +1,2 @@
+export * from './button';
+export * from './textarea';

nwaifu-ui/src/lib/components/textarea/index.ts

@@ -0,0 +1 @@
+export * from './textarea.component';

nwaifu-ui/src/lib/components/textarea/textarea.component.html

@@ -0,0 +1,5 @@
+<div [attr.contenteditable]="contenteditable" [className]="className" #ref (blur)="leaveFn()">
+  @if(!value) {
+  <ng-content></ng-content>
+  }
+</div>

nwaifu-ui/src/lib/components/textarea/textarea.component.scss

@@ -0,0 +1,20 @@
+.nwui-textarea {
+  border-radius: 8px;
+  height: auto;
+  color: #efdee0;
+  outline: none;
+  padding-inline: 2rem 1rem;
+  background-color: transparent;
+  border: 2px solid #e4bdc3;
+  font-size: 1rem;
+  font-weight: inherit;
+  min-height: 3rem;
+  line-height: 3rem;
+  &:focus {
+    border: 2px solid #efdee0;
+  }
+  &.disabled {
+    opacity: 0.5;
+  }
+  word-wrap: break-word;
+}

nwaifu-ui/src/lib/components/textarea/textarea.component.ts

@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'nwui-textarea',
+  imports: [CommonModule],
+  standalone: true,
+  styleUrls: ['./textarea.component.scss'],
+  templateUrl: './textarea.component.html',
+  // changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NWUITextAreaComponent implements AfterViewInit {
+  @Input() disabled = false;
+  @Input() value = '';
+  @Input() contenteditable = true;
+  @Output() leave = new EventEmitter<string>();
+  @ViewChild('ref') ref: ElementRef<HTMLDivElement> | null = null;
+
+  get className(): string {
+    return `nwui-textarea ${this.disabled && !this.contenteditable ? 'disabled' : ''}`;
+  }
+
+  leaveFn() {
+    if (this.ref) {
+      const target = this.ref.nativeElement;
+      const text = target.textContent || '';
+      if (this.leave) this.leave.emit(text);
+      target.textContent = text;
+    }
+  }
+
+  ngAfterViewInit(): void {
+    if (this.ref && this.value) this.ref.nativeElement.textContent = this.value;
+  }
+}

nwaifu-ui/src/lib/index.ts

@@ -0,0 +1 @@
+export * from './components';

nwaifu-ui/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

nwaifu-ui/tsconfig.lib.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts"]
+}

nx-cloud.env.example

@@ -0,0 +1 @@
+NX_CLOUD_ACCESS_TOKEN=TOKEN

nx.json

@@ -0,0 +1,40 @@
+{
+  "defaultBase": "main",
+  "namedInputs": {
+    "sharedGlobals": [],
+    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "production": [
+      "default",
+      "!{projectRoot}/tsconfig.spec.json",
+      "!{projectRoot}/**/*.spec.[jt]s",
+      "!{projectRoot}/karma.conf.js",
+      "!{projectRoot}/.eslintrc.json",
+      "!{projectRoot}/eslint.config.js"
+    ]
+  },
+  "targetDefaults": {
+    "build": {
+      "dependsOn": ["^build"],
+      "inputs": ["production", "^production"],
+      "cache": true
+    },
+    "test": {
+      "inputs": ["default", "^production", "{workspaceRoot}/karma.conf.js"],
+      "cache": true
+    },
+    "lint": {
+      "inputs": ["default", "{workspaceRoot}/.eslintrc.json", "{workspaceRoot}/eslint.config.js"],
+      "cache": true
+    },
+    "@nx/eslint:lint": {
+      "cache": true,
+      "inputs": [
+        "default",
+        "{workspaceRoot}/.eslintrc.json",
+        "{workspaceRoot}/.eslintignore",
+        "{workspaceRoot}/eslint.config.js"
+      ]
+    }
+  },
+  "nxCloudAccessToken": "${NX_CLOUD_ACCESS_TOKEN}"
+}

package.json

@@ -1,38 +1,69 @@
 {
   "name": "nwaifu-web",
-  "version": "0.0.0",
+  "version": "0.2.3",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "start": "nx serve NwaifuWeb",
+    "build": "nx build NwaifuWeb --base-href https://nwaifu.su/ --configuration production",
+    "watch": "nx build NwaifuWeb --watch --configuration development",
+    "test": "nx test",
+    "lint": "nx lint"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.2.0",
-    "@angular/common": "^17.2.0",
-    "@angular/compiler": "^17.2.0",
-    "@angular/core": "^17.2.0",
-    "@angular/forms": "^17.2.0",
-    "@angular/platform-browser": "^17.2.0",
-    "@angular/platform-browser-dynamic": "^17.2.0",
-    "@angular/router": "^17.2.0",
+    "@angular/animations": "18.0.3",
+    "@angular/common": "18.0.3",
+    "@angular/compiler": "18.0.3",
+    "@angular/core": "18.0.3",
+    "@angular/forms": "18.0.3",
+    "@angular/platform-browser": "18.0.3",
+    "@angular/platform-browser-dynamic": "18.0.3",
+    "@angular/router": "18.0.3",
+    "@fortawesome/angular-fontawesome": "0.14.1",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@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",
+    "@nx/eslint-plugin": "^19.3.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.2.2",
-    "@angular/cli": "^17.2.2",
-    "@angular/compiler-cli": "^17.2.0",
+    "@angular-devkit/build-angular": "18.0.5",
+    "@angular-devkit/core": "18.0.5",
+    "@angular-devkit/schematics": "18.0.5",
+    "@angular-eslint/eslint-plugin": "18.0.1",
+    "@angular-eslint/eslint-plugin-template": "18.0.1",
+    "@angular-eslint/template-parser": "18.0.1",
+    "@angular/cli": "~18.0.0",
+    "@angular/compiler-cli": "18.0.3",
+    "@nx/angular": "19.3.0",
+    "@nx/eslint": "19.3.0",
+    "@nx/js": "19.3.0",
+    "@nx/workspace": "19.3.0",
+    "@schematics/angular": "18.0.5",
+    "@swc-node/register": "1.9.2",
+    "@swc/core": "1.5.7",
+    "@swc/helpers": "0.5.11",
+    "@types/bun": "latest",
     "@types/jasmine": "~5.1.0",
+    "@typescript-eslint/eslint-plugin": "6.19.0",
+    "@typescript-eslint/parser": "6.19.0",
+    "@typescript-eslint/utils": "^8.0.0-alpha.28",
+    "autoprefixer": "^10.4.18",
+    "eslint": "~8.57.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.3.2"
+    "nx": "19.3.0",
+    "postcss": "^8.4.38",
+    "prettier": "^3.3.2",
+    "tailwindcss": "^3.4.1",
+    "typescript": "~5.4.5"
   }
 }

src/app/app.component.html

@@ -1,336 +0,0 @@
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * Delete the template below * * * * * * * * * -->
-<!-- * * * * * * * to get started with your project! * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
-<style>
-  :host {
-    --bright-blue: oklch(51.01% 0.274 263.83);
-    --electric-violet: oklch(53.18% 0.28 296.97);
-    --french-violet: oklch(47.66% 0.246 305.88);
-    --vivid-pink: oklch(69.02% 0.277 332.77);
-    --hot-red: oklch(61.42% 0.238 15.34);
-    --orange-red: oklch(63.32% 0.24 31.68);
-
-    --gray-900: oklch(19.37% 0.006 300.98);
-    --gray-700: oklch(36.98% 0.014 302.71);
-    --gray-400: oklch(70.9% 0.015 304.04);
-
-    --red-to-pink-to-purple-vertical-gradient: linear-gradient(
-      180deg,
-      var(--orange-red) 0%,
-      var(--vivid-pink) 50%,
-      var(--electric-violet) 100%
-    );
-
-    --red-to-pink-to-purple-horizontal-gradient: linear-gradient(
-      90deg,
-      var(--orange-red) 0%,
-      var(--vivid-pink) 50%,
-      var(--electric-violet) 100%
-    );
-
-    --pill-accent: var(--bright-blue);
-
-    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-      "Segoe UI Symbol";
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  h1 {
-    font-size: 3.125rem;
-    color: var(--gray-900);
-    font-weight: 500;
-    line-height: 100%;
-    letter-spacing: -0.125rem;
-    margin: 0;
-    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-      "Segoe UI Symbol";
-  }
-
-  p {
-    margin: 0;
-    color: var(--gray-700);
-  }
-
-  main {
-    width: 100%;
-    min-height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 1rem;
-    box-sizing: inherit;
-    position: relative;
-  }
-
-  .angular-logo {
-    max-width: 9.2rem;
-  }
-
-  .content {
-    display: flex;
-    justify-content: space-around;
-    width: 100%;
-    max-width: 700px;
-    margin-bottom: 3rem;
-  }
-
-  .content h1 {
-    margin-top: 1.75rem;
-  }
-
-  .content p {
-    margin-top: 1.5rem;
-  }
-
-  .divider {
-    width: 1px;
-    background: var(--red-to-pink-to-purple-vertical-gradient);
-    margin-inline: 0.5rem;
-  }
-
-  .pill-group {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    flex-wrap: wrap;
-    gap: 1.25rem;
-  }
-
-  .pill {
-    display: flex;
-    align-items: center;
-    --pill-accent: var(--bright-blue);
-    background: color-mix(in srgb, var(--pill-accent) 5%, transparent);
-    color: var(--pill-accent);
-    padding-inline: 0.75rem;
-    padding-block: 0.375rem;
-    border-radius: 2.75rem;
-    border: 0;
-    transition: background 0.3s ease;
-    font-family: var(--inter-font);
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 1.4rem;
-    letter-spacing: -0.00875rem;
-    text-decoration: none;
-  }
-
-  .pill:hover {
-    background: color-mix(in srgb, var(--pill-accent) 15%, transparent);
-  }
-
-  .pill-group .pill:nth-child(6n + 1) {
-    --pill-accent: var(--bright-blue);
-  }
-  .pill-group .pill:nth-child(6n + 2) {
-    --pill-accent: var(--french-violet);
-  }
-  .pill-group .pill:nth-child(6n + 3),
-  .pill-group .pill:nth-child(6n + 4),
-  .pill-group .pill:nth-child(6n + 5) {
-    --pill-accent: var(--hot-red);
-  }
-
-  .pill-group svg {
-    margin-inline-start: 0.25rem;
-  }
-
-  .social-links {
-    display: flex;
-    align-items: center;
-    gap: 0.73rem;
-    margin-top: 1.5rem;
-  }
-
-  .social-links path {
-    transition: fill 0.3s ease;
-    fill: var(--gray-400);
-  }
-
-  .social-links a:hover svg path {
-    fill: var(--gray-900);
-  }
-
-  @media screen and (max-width: 650px) {
-    .content {
-      flex-direction: column;
-      width: max-content;
-    }
-
-    .divider {
-      height: 1px;
-      width: 100%;
-      background: var(--red-to-pink-to-purple-horizontal-gradient);
-      margin-block: 1.5rem;
-    }
-  }
-</style>
-
-<main class="main">
-  <div class="content">
-    <div class="left-side">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 982 239"
-        fill="none"
-        class="angular-logo"
-      >
-        <g clip-path="url(#a)">
-          <path
-            fill="url(#b)"
-            d="M388.676 191.625h30.849L363.31 31.828h-35.758l-56.215 159.797h30.848l13.174-39.356h60.061l13.256 39.356Zm-65.461-62.675 21.602-64.311h1.227l21.602 64.311h-44.431Zm126.831-7.527v70.202h-28.23V71.839h27.002v20.374h1.392c2.782-6.71 7.2-12.028 13.255-15.956 6.056-3.927 13.584-5.89 22.503-5.89 8.264 0 15.465 1.8 21.684 5.318 6.137 3.518 10.964 8.673 14.319 15.382 3.437 6.71 5.074 14.81 4.992 24.383v76.175h-28.23v-71.92c0-8.019-2.046-14.237-6.219-18.819-4.173-4.5-9.819-6.791-17.102-6.791-4.91 0-9.328 1.063-13.174 3.272-3.846 2.128-6.792 5.237-9.001 9.328-2.046 4.009-3.191 8.918-3.191 14.728ZM589.233 239c-10.147 0-18.82-1.391-26.103-4.091-7.282-2.7-13.092-6.382-17.511-10.964-4.418-4.582-7.528-9.655-9.164-15.219l25.448-6.136c1.145 2.372 2.782 4.663 4.991 6.954 2.209 2.291 5.155 4.255 8.837 5.81 3.683 1.554 8.428 2.291 14.074 2.291 8.019 0 14.647-1.964 19.884-5.81 5.237-3.845 7.856-10.227 7.856-19.064v-22.665h-1.391c-1.473 2.946-3.601 5.892-6.383 9.001-2.782 3.109-6.464 5.645-10.965 7.691-4.582 2.046-10.228 3.109-17.101 3.109-9.165 0-17.511-2.209-25.039-6.545-7.446-4.337-13.42-10.883-17.757-19.474-4.418-8.673-6.628-19.473-6.628-32.565 0-13.091 2.21-24.301 6.628-33.383 4.419-9.082 10.311-15.955 17.839-20.7 7.528-4.746 15.874-7.037 25.039-7.037 7.037 0 12.846 1.145 17.347 3.518 4.582 2.373 8.182 5.236 10.883 8.51 2.7 3.272 4.746 6.382 6.137 9.327h1.554v-19.8h27.821v121.749c0 10.228-2.454 18.737-7.364 25.447-4.91 6.709-11.538 11.7-20.048 15.055-8.509 3.355-18.165 4.991-28.884 4.991Zm.245-71.266c5.974 0 11.047-1.473 15.302-4.337 4.173-2.945 7.446-7.118 9.573-12.519 2.21-5.482 3.274-12.027 3.274-19.637 0-7.609-1.064-14.155-3.274-19.8-2.127-5.646-5.318-10.064-9.491-13.255-4.174-3.11-9.329-4.746-15.384-4.746s-11.537 1.636-15.792 4.91c-4.173 3.272-7.365 7.772-9.492 13.418-2.128 5.727-3.191 12.191-3.191 19.392 0 7.2 1.063 13.745 3.273 19.228 2.127 5.482 5.318 9.736 9.573 12.764 4.174 3.027 9.41 4.582 15.629 4.582Zm141.56-26.51V71.839h28.23v119.786h-27.412v-21.273h-1.227c-2.7 6.709-7.119 12.191-13.338 16.446-6.137 4.255-13.747 6.382-22.748 6.382-7.855 0-14.81-1.718-20.783-5.237-5.974-3.518-10.72-8.591-14.075-15.382-3.355-6.709-5.073-14.891-5.073-24.464V71.839h28.312v71.921c0 7.609 2.046 13.664 6.219 18.083 4.173 4.5 9.655 6.709 16.365 6.709 4.173 0 8.183-.982 12.111-3.028 3.927-2.045 7.118-5.072 9.655-9.082 2.537-4.091 3.764-9.164 3.764-15.218Zm65.707-109.395v159.796h-28.23V31.828h28.23Zm44.841 162.169c-7.61 0-14.402-1.391-20.457-4.091-6.055-2.7-10.883-6.791-14.32-12.109-3.518-5.319-5.237-11.946-5.237-19.801 0-6.791 1.228-12.355 3.765-16.773 2.536-4.419 5.891-7.937 10.228-10.637 4.337-2.618 9.164-4.664 14.647-6.055 5.4-1.391 11.046-2.373 16.856-3.027 7.037-.737 12.683-1.391 17.102-1.964 4.337-.573 7.528-1.555 9.574-2.782 1.963-1.309 3.027-3.273 3.027-5.973v-.491c0-5.891-1.718-10.391-5.237-13.664-3.518-3.191-8.51-4.828-15.056-4.828-6.955 0-12.356 1.473-16.447 4.5-4.009 3.028-6.71 6.546-8.183 10.719l-26.348-3.764c2.046-7.282 5.483-13.336 10.31-18.328 4.746-4.909 10.638-8.59 17.511-11.045 6.955-2.455 14.565-3.682 22.912-3.682 5.809 0 11.537.654 17.265 2.045s10.965 3.6 15.711 6.71c4.746 3.109 8.51 7.282 11.455 12.6 2.864 5.318 4.337 11.946 4.337 19.883v80.184h-27.166v-16.446h-.9c-1.719 3.355-4.092 6.464-7.201 9.328-3.109 2.864-6.955 5.237-11.619 6.955-4.828 1.718-10.229 2.536-16.529 2.536Zm7.364-20.701c5.646 0 10.556-1.145 14.729-3.354 4.173-2.291 7.364-5.237 9.655-9.001 2.292-3.763 3.355-7.854 3.355-12.273v-14.155c-.9.737-2.373 1.391-4.5 2.046-2.128.654-4.419 1.145-7.037 1.636-2.619.491-5.155.9-7.692 1.227-2.537.328-4.746.655-6.628.901-4.173.572-8.019 1.472-11.292 2.781-3.355 1.31-5.973 3.11-7.855 5.401-1.964 2.291-2.864 5.318-2.864 8.918 0 5.237 1.882 9.164 5.728 11.782 3.682 2.782 8.51 4.091 14.401 4.091Zm64.643 18.328V71.839h27.412v19.965h1.227c2.21-6.955 5.974-12.274 11.292-16.038 5.319-3.763 11.456-5.645 18.329-5.645 1.555 0 3.355.082 5.237.163 1.964.164 3.601.328 4.91.573v25.938c-1.227-.41-3.109-.819-5.646-1.146a58.814 58.814 0 0 0-7.446-.49c-5.155 0-9.738 1.145-13.829 3.354-4.091 2.209-7.282 5.236-9.655 9.164-2.373 3.927-3.519 8.427-3.519 13.5v70.448h-28.312ZM222.077 39.192l-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
-          />
-          <path
-            fill="url(#c)"
-            d="M388.676 191.625h30.849L363.31 31.828h-35.758l-56.215 159.797h30.848l13.174-39.356h60.061l13.256 39.356Zm-65.461-62.675 21.602-64.311h1.227l21.602 64.311h-44.431Zm126.831-7.527v70.202h-28.23V71.839h27.002v20.374h1.392c2.782-6.71 7.2-12.028 13.255-15.956 6.056-3.927 13.584-5.89 22.503-5.89 8.264 0 15.465 1.8 21.684 5.318 6.137 3.518 10.964 8.673 14.319 15.382 3.437 6.71 5.074 14.81 4.992 24.383v76.175h-28.23v-71.92c0-8.019-2.046-14.237-6.219-18.819-4.173-4.5-9.819-6.791-17.102-6.791-4.91 0-9.328 1.063-13.174 3.272-3.846 2.128-6.792 5.237-9.001 9.328-2.046 4.009-3.191 8.918-3.191 14.728ZM589.233 239c-10.147 0-18.82-1.391-26.103-4.091-7.282-2.7-13.092-6.382-17.511-10.964-4.418-4.582-7.528-9.655-9.164-15.219l25.448-6.136c1.145 2.372 2.782 4.663 4.991 6.954 2.209 2.291 5.155 4.255 8.837 5.81 3.683 1.554 8.428 2.291 14.074 2.291 8.019 0 14.647-1.964 19.884-5.81 5.237-3.845 7.856-10.227 7.856-19.064v-22.665h-1.391c-1.473 2.946-3.601 5.892-6.383 9.001-2.782 3.109-6.464 5.645-10.965 7.691-4.582 2.046-10.228 3.109-17.101 3.109-9.165 0-17.511-2.209-25.039-6.545-7.446-4.337-13.42-10.883-17.757-19.474-4.418-8.673-6.628-19.473-6.628-32.565 0-13.091 2.21-24.301 6.628-33.383 4.419-9.082 10.311-15.955 17.839-20.7 7.528-4.746 15.874-7.037 25.039-7.037 7.037 0 12.846 1.145 17.347 3.518 4.582 2.373 8.182 5.236 10.883 8.51 2.7 3.272 4.746 6.382 6.137 9.327h1.554v-19.8h27.821v121.749c0 10.228-2.454 18.737-7.364 25.447-4.91 6.709-11.538 11.7-20.048 15.055-8.509 3.355-18.165 4.991-28.884 4.991Zm.245-71.266c5.974 0 11.047-1.473 15.302-4.337 4.173-2.945 7.446-7.118 9.573-12.519 2.21-5.482 3.274-12.027 3.274-19.637 0-7.609-1.064-14.155-3.274-19.8-2.127-5.646-5.318-10.064-9.491-13.255-4.174-3.11-9.329-4.746-15.384-4.746s-11.537 1.636-15.792 4.91c-4.173 3.272-7.365 7.772-9.492 13.418-2.128 5.727-3.191 12.191-3.191 19.392 0 7.2 1.063 13.745 3.273 19.228 2.127 5.482 5.318 9.736 9.573 12.764 4.174 3.027 9.41 4.582 15.629 4.582Zm141.56-26.51V71.839h28.23v119.786h-27.412v-21.273h-1.227c-2.7 6.709-7.119 12.191-13.338 16.446-6.137 4.255-13.747 6.382-22.748 6.382-7.855 0-14.81-1.718-20.783-5.237-5.974-3.518-10.72-8.591-14.075-15.382-3.355-6.709-5.073-14.891-5.073-24.464V71.839h28.312v71.921c0 7.609 2.046 13.664 6.219 18.083 4.173 4.5 9.655 6.709 16.365 6.709 4.173 0 8.183-.982 12.111-3.028 3.927-2.045 7.118-5.072 9.655-9.082 2.537-4.091 3.764-9.164 3.764-15.218Zm65.707-109.395v159.796h-28.23V31.828h28.23Zm44.841 162.169c-7.61 0-14.402-1.391-20.457-4.091-6.055-2.7-10.883-6.791-14.32-12.109-3.518-5.319-5.237-11.946-5.237-19.801 0-6.791 1.228-12.355 3.765-16.773 2.536-4.419 5.891-7.937 10.228-10.637 4.337-2.618 9.164-4.664 14.647-6.055 5.4-1.391 11.046-2.373 16.856-3.027 7.037-.737 12.683-1.391 17.102-1.964 4.337-.573 7.528-1.555 9.574-2.782 1.963-1.309 3.027-3.273 3.027-5.973v-.491c0-5.891-1.718-10.391-5.237-13.664-3.518-3.191-8.51-4.828-15.056-4.828-6.955 0-12.356 1.473-16.447 4.5-4.009 3.028-6.71 6.546-8.183 10.719l-26.348-3.764c2.046-7.282 5.483-13.336 10.31-18.328 4.746-4.909 10.638-8.59 17.511-11.045 6.955-2.455 14.565-3.682 22.912-3.682 5.809 0 11.537.654 17.265 2.045s10.965 3.6 15.711 6.71c4.746 3.109 8.51 7.282 11.455 12.6 2.864 5.318 4.337 11.946 4.337 19.883v80.184h-27.166v-16.446h-.9c-1.719 3.355-4.092 6.464-7.201 9.328-3.109 2.864-6.955 5.237-11.619 6.955-4.828 1.718-10.229 2.536-16.529 2.536Zm7.364-20.701c5.646 0 10.556-1.145 14.729-3.354 4.173-2.291 7.364-5.237 9.655-9.001 2.292-3.763 3.355-7.854 3.355-12.273v-14.155c-.9.737-2.373 1.391-4.5 2.046-2.128.654-4.419 1.145-7.037 1.636-2.619.491-5.155.9-7.692 1.227-2.537.328-4.746.655-6.628.901-4.173.572-8.019 1.472-11.292 2.781-3.355 1.31-5.973 3.11-7.855 5.401-1.964 2.291-2.864 5.318-2.864 8.918 0 5.237 1.882 9.164 5.728 11.782 3.682 2.782 8.51 4.091 14.401 4.091Zm64.643 18.328V71.839h27.412v19.965h1.227c2.21-6.955 5.974-12.274 11.292-16.038 5.319-3.763 11.456-5.645 18.329-5.645 1.555 0 3.355.082 5.237.163 1.964.164 3.601.328 4.91.573v25.938c-1.227-.41-3.109-.819-5.646-1.146a58.814 58.814 0 0 0-7.446-.49c-5.155 0-9.738 1.145-13.829 3.354-4.091 2.209-7.282 5.236-9.655 9.164-2.373 3.927-3.519 8.427-3.519 13.5v70.448h-28.312ZM222.077 39.192l-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
-          />
-        </g>
-        <defs>
-          <radialGradient
-            id="c"
-            cx="0"
-            cy="0"
-            r="1"
-            gradientTransform="rotate(118.122 171.182 60.81) scale(205.794)"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stop-color="#FF41F8" />
-            <stop offset=".707" stop-color="#FF41F8" stop-opacity=".5" />
-            <stop offset="1" stop-color="#FF41F8" stop-opacity="0" />
-          </radialGradient>
-          <linearGradient
-            id="b"
-            x1="0"
-            x2="982"
-            y1="192"
-            y2="192"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stop-color="#F0060B" />
-            <stop offset="0" stop-color="#F0070C" />
-            <stop offset=".526" stop-color="#CC26D5" />
-            <stop offset="1" stop-color="#7702FF" />
-          </linearGradient>
-          <clipPath id="a"><path fill="#fff" d="M0 0h982v239H0z" /></clipPath>
-        </defs>
-      </svg>
-      <h1>Hello, {{ title }}</h1>
-      <p>Congratulations! Your app is running. 🎉</p>
-    </div>
-    <div class="divider" role="separator" aria-label="Divider"></div>
-    <div class="right-side">
-      <div class="pill-group">
-        @for (item of [
-          { title: 'Explore the Docs', link: 'https://angular.dev' },
-          { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' },
-          { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' },
-          { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' },
-          { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' },
-        ]; track item.title) {
-          <a
-            class="pill"
-            [href]="item.link"
-            target="_blank"
-            rel="noopener"
-          >
-            <span>{{ item.title }}</span>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="14"
-              viewBox="0 -960 960 960"
-              width="14"
-              fill="currentColor"
-            >
-              <path
-                d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"
-              />
-            </svg>
-          </a>
-        }
-      </div>
-      <div class="social-links">
-        <a
-          href="https://github.com/angular/angular"
-          aria-label="Github"
-          target="_blank"
-          rel="noopener"
-        >
-          <svg
-            width="25"
-            height="24"
-            viewBox="0 0 25 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            alt="Github"
-          >
-            <path
-              d="M12.3047 0C5.50634 0 0 5.50942 0 12.3047C0 17.7423 3.52529 22.3535 8.41332 23.9787C9.02856 24.0946 9.25414 23.7142 9.25414 23.3871C9.25414 23.0949 9.24389 22.3207 9.23876 21.2953C5.81601 22.0377 5.09414 19.6444 5.09414 19.6444C4.53427 18.2243 3.72524 17.8449 3.72524 17.8449C2.61064 17.082 3.81137 17.0973 3.81137 17.0973C5.04697 17.1835 5.69604 18.3647 5.69604 18.3647C6.79321 20.2463 8.57636 19.7029 9.27978 19.3881C9.39052 18.5924 9.70736 18.0499 10.0591 17.7423C7.32641 17.4347 4.45429 16.3765 4.45429 11.6618C4.45429 10.3185 4.9311 9.22133 5.72065 8.36C5.58222 8.04931 5.16694 6.79833 5.82831 5.10337C5.82831 5.10337 6.85883 4.77319 9.2121 6.36459C10.1965 6.09082 11.2424 5.95546 12.2883 5.94931C13.3342 5.95546 14.3801 6.09082 15.3644 6.36459C17.7023 4.77319 18.7328 5.10337 18.7328 5.10337C19.3942 6.79833 18.9789 8.04931 18.8559 8.36C19.6403 9.22133 20.1171 10.3185 20.1171 11.6618C20.1171 16.3888 17.2409 17.4296 14.5031 17.7321C14.9338 18.1012 15.3337 18.8559 15.3337 20.0084C15.3337 21.6552 15.3183 22.978 15.3183 23.3779C15.3183 23.7009 15.5336 24.0854 16.1642 23.9623C21.0871 22.3484 24.6094 17.7341 24.6094 12.3047C24.6094 5.50942 19.0999 0 12.3047 0Z"
-            />
-          </svg>
-        </a>
-        <a
-          href="https://twitter.com/angular"
-          aria-label="Twitter"
-          target="_blank"
-          rel="noopener"
-        >
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            alt="Twitter"
-          >
-            <path
-              d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
-            />
-          </svg>
-        </a>
-        <a
-          href="https://www.youtube.com/channel/UCbn1OgGei-DV7aSRo_HaAiw"
-          aria-label="Youtube"
-          target="_blank"
-          rel="noopener"
-        >
-          <svg
-            width="29"
-            height="20"
-            viewBox="0 0 29 20"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            alt="Youtube"
-          >
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M27.4896 1.52422C27.9301 1.96749 28.2463 2.51866 28.4068 3.12258C29.0004 5.35161 29.0004 10 29.0004 10C29.0004 10 29.0004 14.6484 28.4068 16.8774C28.2463 17.4813 27.9301 18.0325 27.4896 18.4758C27.0492 18.9191 26.5 19.2389 25.8972 19.4032C23.6778 20 14.8068 20 14.8068 20C14.8068 20 5.93586 20 3.71651 19.4032C3.11363 19.2389 2.56449 18.9191 2.12405 18.4758C1.68361 18.0325 1.36732 17.4813 1.20683 16.8774C0.613281 14.6484 0.613281 10 0.613281 10C0.613281 10 0.613281 5.35161 1.20683 3.12258C1.36732 2.51866 1.68361 1.96749 2.12405 1.52422C2.56449 1.08095 3.11363 0.76113 3.71651 0.596774C5.93586 0 14.8068 0 14.8068 0C14.8068 0 23.6778 0 25.8972 0.596774C26.5 0.76113 27.0492 1.08095 27.4896 1.52422ZM19.3229 10L11.9036 5.77905V14.221L19.3229 10Z"
-            />
-          </svg>
-        </a>
-      </div>
-    </div>
-  </div>
-</main>
-
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * End of Placeholder  * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
-
-<router-outlet />

src/app/app.component.ts

@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [RouterOutlet],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.less'
-})
-export class AppComponent {
-  title = 'NwaifuWeb';
-}