From a2f1a079cf3a450f4ad25534dac8bd8d847450a8 Mon Sep 17 00:00:00 2001
From: Teriuihi <teriuihi@alttd.com>
Date: Sat, 5 Apr 2025 23:00:03 +0200
Subject: [PATCH] Enhance header and map components with new features

Refactor header background styling to use a method supporting optional gradient overlays. Update map component to include detailed server map links and adjust styling for better layout and clarity.
---
 frontend/src/app/header/header.component.html |  3 ++-
 frontend/src/app/header/header.component.ts   | 10 ++++++++++
 frontend/src/app/map/map.component.html       | 20 ++++++++++++++++---
 frontend/src/app/map/map.component.scss       |  3 +++
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/header/header.component.html b/frontend/src/app/header/header.component.html
index d28b424..d6a6e0c 100644
--- a/frontend/src/app/header/header.component.html
+++ b/frontend/src/app/header/header.component.html
@@ -1,5 +1,6 @@
 <ng-container>
-  <header id="top" [ngStyle]="{ 'background-image': 'url(' + background_image + ')', 'height': height }">
+  <header id="top"
+          [ngStyle]="{ 'background-image': getBackgroundImage(), 'height': height }">
     <nav id="nav" [ngClass]="active">
       <div class="container">
         <div id="mobile_nav">
diff --git a/frontend/src/app/header/header.component.ts b/frontend/src/app/header/header.component.ts
index 1009cdd..0ce75e1 100644
--- a/frontend/src/app/header/header.component.ts
+++ b/frontend/src/app/header/header.component.ts
@@ -10,6 +10,7 @@ export class HeaderComponent {
   @Input() current_page: string = '';
   @Input() background_image: string = '';
   @Input() height: string = '';
+  @Input() overlay_gradient: boolean = false;
 
   public active: string = '';
 
@@ -23,6 +24,15 @@ export class HeaderComponent {
     }
   }
 
+  public getBackgroundImage() {
+    if (this.overlay_gradient) {
+      return `linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(${this.background_image})`;
+    } else {
+      return `url(${this.background_image})`;
+    }
+  }
+
+
   public getCurrentPageId(options: string[]) {
     if (options.includes(this.current_page)) {
       return 'current_page'
diff --git a/frontend/src/app/map/map.component.html b/frontend/src/app/map/map.component.html
index e0b1a09..8e48f45 100644
--- a/frontend/src/app/map/map.component.html
+++ b/frontend/src/app/map/map.component.html
@@ -1,9 +1,23 @@
 <ng-container>
   <app-header [current_page]="'map'"
-              [background_image]="'public/img/backgrounds/map.jpg'">
+              [background_image]="'public/img/backgrounds/map.jpg'"
+              [overlay_gradient]="true">
     <div class="title" header-content>
-      <h1>Dynmap</h1>
-      <h2>some text</h2>
+      <h1>Dynamic Server Maps</h1>
+      <h2>Which server would you like to see?</h2>
+      <div>
+        <a href="https://gmap.alttd.com">
+          <div style="background-color: #f547b2;" class="button-outer map-button">
+            <span class="button-inner">Grove</span>
+          </div>
+        </a>
+        <a href="https://cmap.alttd.com">
+          <div style="background-color: #c46213;" class="button-outer map-button">
+            <span class="button-inner">Creative</span>
+          </div>
+        </a>
+      </div>
     </div>
   </app-header>
+  <app-footer></app-footer>
 </ng-container>
diff --git a/frontend/src/app/map/map.component.scss b/frontend/src/app/map/map.component.scss
index e69de29..656cfd8 100644
--- a/frontend/src/app/map/map.component.scss
+++ b/frontend/src/app/map/map.component.scss
@@ -0,0 +1,3 @@
+.map-button {
+  margin: 10px;
+}