uwu added

src/app/modules/home/components/home/home.component.html

@@ -1,20 +1,20 @@
 <div class="container">
-  <div class="row pt-5">
-    <div class="col-sm-6 d-flex align-items-center">
-      <div class="d-inline-block my-5">
-        <div class="display-1">Tech.Interview</div>
-        <div class="lead">Зарплаты в IT</div>
-        <div class="lead">Заметки к техническим интервью</div>
+
+  <div *ngIf="showUwu; else noUwu" class="pt-5">
+    <div class="d-flex flex-column justify-content-center align-items-center">
+      <div class="mb-3 uwu-image">
+        <img
+          src="{{getUwuLink()}}"
+          alt="UwU"
+          class="img-fluid"
+        />
       </div>
-    </div>
-    <div class="col-sm-6">
-      <img
-        src="https://techinterview.fra1.cdn.digitaloceanspaces.com/images/main_transparent_1000.png"
-        alt="Interviewer"
-        class="img-fluid"
-      />
+      <div
+        class="display-1 uwu-title">Зарплаты в IT</div>
     </div>
   </div>
+
+
 </div>
 
 <div class="mt-5">
@@ -123,3 +123,23 @@
     </div>
   </div>
 </div>
+
+<ng-template #noUwu>
+  <div class="row pt-5">
+
+    <div class="col-sm-6 d-flex align-items-center">
+      <div class="d-inline-block my-5">
+        <div class="display-1">Tech.Interview</div>
+        <div class="lead">Зарплаты в IT</div>
+        <div class="lead">Заметки к техническим интервью</div>
+      </div>
+    </div>
+    <div class="col-sm-6">
+      <img
+        src="https://techinterview.fra1.cdn.digitaloceanspaces.com/images/main_transparent_1000.png"
+        alt="Interviewer"
+        class="img-fluid"
+      />
+    </div>
+  </div>
+</ng-template>

src/app/modules/home/components/home/home.component.scss

@@ -31,3 +31,13 @@
 .bg-white {
   background-color: #fff;
 }
+
+.uwu-image {
+  max-width: 50%;
+  height: auto;
+}
+
+.uwu-title {
+  color: #130e38;
+  font-weight: bolder;
+}

src/app/modules/home/components/home/home.component.ts

@@ -1,13 +1,47 @@
-import { Component } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
 import { TitleService } from "@services/title.service";
+import { ActivatedRouteExtended } from "@shared/routes/activated-route-extended";
+import { untilDestroyed } from "@shared/subscriptions/until-destroyed";
 
 @Component({
   selector: "app-home",
   templateUrl: "./home.component.html",
   styleUrls: ["./home.component.scss"],
 })
-export class HomeComponent {
-  constructor(titleService: TitleService) {
+export class HomeComponent implements OnInit, OnDestroy {
+
+  private readonly activatedRoute: ActivatedRouteExtended;
+
+  readonly uwuLinkLight = "https://techinterview.fra1.cdn.digitaloceanspaces.com/images/uwu_light_1000.png";
+  readonly uwuLinkDark = "https://techinterview.fra1.cdn.digitaloceanspaces.com/images/uwu_dark_1000.png";
+
+  showUwu = false;
+
+  constructor(
+    titleService: TitleService,
+    activatedRoute: ActivatedRoute
+  ) {
     titleService.resetTitle();
+    this.activatedRoute = new ActivatedRouteExtended(activatedRoute);
+  }
+
+  getUwuLink(): string {
+    const date = new Date(Date.now());
+    return date.getSeconds() % 2 === 0
+      ? this.uwuLinkLight
+      : this.uwuLinkDark;
+  }
+
+  ngOnInit(): void {
+    this.activatedRoute.getQueryParam("uwu")
+      .pipe(untilDestroyed(this))
+      .subscribe((uwu) => {
+        this.showUwu = uwu === "true";
+      });
+  }
+
+  ngOnDestroy(): void {
+    // Do nothing
   }
 }

src/app/shared/routes/activated-route-extended.ts

@@ -29,6 +29,14 @@ export class ActivatedRouteExtended {
     );
   }
 
+  getQueryParam(paramName: string): Observable<string> {
+    return this.activatedRoute.queryParams.pipe(
+      map((params) => {
+        return params[paramName] ?? null;
+      })
+    );
+  }
+
   getParam(paramName: string): Observable<string | null> {
     return this.activatedRoute.paramMap.pipe(
       map((params) => {

src/index.html

@@ -88,6 +88,12 @@
                   ><span class="ms-2">Пользовательское соглашение</span>
                 </a>
               </li>
+              <li>
+                <a class="footer-link" href="/?uwu=true">
+                  <i class="bi bi-chevron-right"></i
+                  ><span class="ms-2">UwU?</span>
+                </a>
+              </li>
             </ul>
           </div>
         </div>