Full reformat

src/app/app.component.html

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

src/app/app.component.less

@@ -1,9 +1,7 @@
 .main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  display: block;
   width: 100%;
-  min-height: 100vh;
-  background-color: #303952;
+  height: calc(100% - 2rem);
+  background: 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 { InfoComponent } from "./modules/info/info.component";
+import { DockComponent } from "./modules/dock/dock.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();
+  }
+}