Full reformat

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build --base-href https://nwaifu.su/ --configuration production",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "lint": "ng lint"

src/app/app.component.html

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

src/app/app.component.less

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

src/app/app.component.ts

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

src/app/interfaces/icon.ts

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

src/app/interfaces/link.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,36 @@
+img {
+  width: 100%;
+  height: 70px;
+  margin: auto 0;
+}
+a {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0;
+  transition: 0.3s 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: opacity 0.3s ease-in-out;
+  }
+  &:hover {
+    transform: translateY(-1rem);
+    span {
+      opacity: 1;
+      height: auto;
+      transform: scale(1);
+      visibility: visible;
+      overflow: visible;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,17 @@
+<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">en</span>
+    <a href="https://git.nwaifu.su/neuro_llc/NwaifuWeb">
+      <fa-icon [icon]="faGithub" class="sourcecode-icon" title="Source code"></fa-icon>
+    </a>
+    <fa-icon [icon]="faVolume"></fa-icon>
+    <fa-icon [icon]="faPower"></fa-icon>
+  </div>
+</div>

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

@@ -0,0 +1,64 @@
+.panel {
+  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;
+  }
+  fa-icon {
+    font-size: 1.2rem;
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,40 @@
+import { CommonModule } from "@angular/common";
+import { Component } 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 { PanelSevice } from "../../services/panel.service";
+
+@Component({
+  standalone: true,
+  selector: "app-panel",
+  imports: [CommonModule, FontAwesomeModule],
+  templateUrl: "./panel.component.html",
+  styleUrls: ["./panel.component.less"],
+})
+export class PanelComponent {
+  public time = "";
+  faGithub = faGithub;
+  faVolume = faVolumeHigh;
+  faPower = faPowerOff;
+  constructor(private panelService: PanelSevice) {
+    this.time = this.getTime();
+    setInterval(() => {
+      this.time = this.getTime();
+    }, 1000);
+  }
+
+  private getTime() {
+    const time = this.panelService.getTime();
+    return time.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+    });
+  }
+
+  goToSource() {
+    window.open("https://git.nwaifu.su/neuro_llc/NwaifuWeb", "_blank");
+  }
+}

src/app/services/panel.service.ts

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

src/assets/svg/logo-gitea.svg

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

src/assets/svg/logo-github.svg

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

src/assets/svg/logo-telegram.svg

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

src/index.html

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

src/styles.less

@@ -22,6 +22,16 @@
   box-sizing: border-box;
   font-family: Montserrat, sans-serif;
   font-optical-sizing: auto;
-  font-weight: 800;
+  font-weight: 400;
   font-style: normal;
 }
+html {
+  position: relative;
+}
+body {
+  width: 100%;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+}