diff --git a/package.json b/package.json index fc61371..0dc91bf 100644 --- a/package.json +++ b/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" diff --git a/src/app/app.component.html b/src/app/app.component.html index 3d0e8ec..72a5291 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,6 @@ +
+ +
-
- - -
+
diff --git a/src/app/app.component.less b/src/app/app.component.less index c206a07..ff8bb98 100644 --- a/src/app/app.component.less +++ b/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; } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 676a0e5..0b7248f 100644 --- a/src/app/app.component.ts +++ b/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"; } diff --git a/src/app/interfaces/icon.ts b/src/app/interfaces/icon.ts deleted file mode 100644 index 80214d5..0000000 --- a/src/app/interfaces/icon.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { IconDefinition } from "@fortawesome/free-brands-svg-icons"; - -export interface Icon { - icon: IconDefinition; - text: string; - url: string; -} diff --git a/src/app/interfaces/link.ts b/src/app/interfaces/link.ts new file mode 100644 index 0000000..ac45cfa --- /dev/null +++ b/src/app/interfaces/link.ts @@ -0,0 +1,6 @@ +export interface Link { + id: number; + text: string; + url: string; + svg: string; +} diff --git a/src/app/modules/dock/dock.component.html b/src/app/modules/dock/dock.component.html new file mode 100644 index 0000000..d8c03ba --- /dev/null +++ b/src/app/modules/dock/dock.component.html @@ -0,0 +1,5 @@ +
+ @for(link of links; track link.id) { + + } +
diff --git a/src/app/modules/dock/dock.component.less b/src/app/modules/dock/dock.component.less new file mode 100644 index 0000000..c47cd4e --- /dev/null +++ b/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; + } + } +} diff --git a/src/app/modules/dock/dock.component.ts b/src/app/modules/dock/dock.component.ts new file mode 100644 index 0000000..24a7212 --- /dev/null +++ b/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", + }, + ]; +} diff --git a/src/app/modules/heading/heading.component.html b/src/app/modules/heading/heading.component.html deleted file mode 100644 index 29b52e5..0000000 --- a/src/app/modules/heading/heading.component.html +++ /dev/null @@ -1 +0,0 @@ -

Neuro LLC

diff --git a/src/app/modules/heading/heading.component.less b/src/app/modules/heading/heading.component.less deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/modules/heading/heading.component.ts b/src/app/modules/heading/heading.component.ts deleted file mode 100644 index 3ae231b..0000000 --- a/src/app/modules/heading/heading.component.ts +++ /dev/null @@ -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 {} diff --git a/src/app/modules/info/info.component.html b/src/app/modules/info/info.component.html deleted file mode 100644 index 127e94d..0000000 --- a/src/app/modules/info/info.component.html +++ /dev/null @@ -1,14 +0,0 @@ -
- @for (icon of icons; track icon.url) { -
- -

{{ icon.text }}

-
- } -
diff --git a/src/app/modules/info/info.component.less b/src/app/modules/info/info.component.less deleted file mode 100644 index 27d4c05..0000000 --- a/src/app/modules/info/info.component.less +++ /dev/null @@ -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; -} diff --git a/src/app/modules/info/info.component.ts b/src/app/modules/info/info.component.ts deleted file mode 100644 index b7c1498..0000000 --- a/src/app/modules/info/info.component.ts +++ /dev/null @@ -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; - } -} diff --git a/src/app/modules/link/link.component.html b/src/app/modules/link/link.component.html new file mode 100644 index 0000000..522d164 --- /dev/null +++ b/src/app/modules/link/link.component.html @@ -0,0 +1,4 @@ + + + {{ text }} + diff --git a/src/app/modules/link/link.component.less b/src/app/modules/link/link.component.less new file mode 100644 index 0000000..7d53f3f --- /dev/null +++ b/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; + } + } +} diff --git a/src/app/modules/link/link.component.ts b/src/app/modules/link/link.component.ts new file mode 100644 index 0000000..31036bc --- /dev/null +++ b/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 = ""; +} diff --git a/src/app/modules/panel/panel.component.html b/src/app/modules/panel/panel.component.html new file mode 100644 index 0000000..0da7a76 --- /dev/null +++ b/src/app/modules/panel/panel.component.html @@ -0,0 +1,17 @@ +
+
+
+
+
+
+ {{ time }} +
+
+ en + + + + + +
+
diff --git a/src/app/modules/panel/panel.component.less b/src/app/modules/panel/panel.component.less new file mode 100644 index 0000000..9238921 --- /dev/null +++ b/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; + } +} diff --git a/src/app/modules/panel/panel.component.ts b/src/app/modules/panel/panel.component.ts new file mode 100644 index 0000000..50737c4 --- /dev/null +++ b/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"); + } +} diff --git a/src/app/services/panel.service.ts b/src/app/services/panel.service.ts new file mode 100644 index 0000000..7b35fff --- /dev/null +++ b/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(); + } +} diff --git a/src/assets/img/wallpaper.png b/src/assets/img/wallpaper.png new file mode 100644 index 0000000..9597759 Binary files /dev/null and b/src/assets/img/wallpaper.png differ diff --git a/src/assets/svg/logo-gitea.svg b/src/assets/svg/logo-gitea.svg new file mode 100644 index 0000000..f8bd0bd --- /dev/null +++ b/src/assets/svg/logo-gitea.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + diff --git a/src/assets/svg/logo-github.svg b/src/assets/svg/logo-github.svg new file mode 100644 index 0000000..2dfec51 --- /dev/null +++ b/src/assets/svg/logo-github.svg @@ -0,0 +1,19 @@ + + + + + github [#142] + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/logo-telegram.svg b/src/assets/svg/logo-telegram.svg new file mode 100644 index 0000000..3df76f8 --- /dev/null +++ b/src/assets/svg/logo-telegram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.html b/src/index.html index 7da6bd7..0a020d7 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ NwaifuWeb - + diff --git a/src/styles.less b/src/styles.less index 25abc51..20a20f3 100644 --- a/src/styles.less +++ b/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; +}