Added FooterComponent and updated various UI elements

Introduced a new FooterComponent and integrated it into the application. Adjusted home page layout and refined styles for better consistency, including minor restructuring of CSS rules and HTML elements.

frontend/src/app/app.module.ts

@@ -10,6 +10,7 @@ import {CookieService} from 'ngx-cookie-service';
 import {MapComponent} from './map/map.component';
 import {RulesComponent} from './rules/rules.component';
 import {CopyIpComponent} from './copy-ip/copy-ip.component';
+import {FooterComponent} from './footer/footer.component';
 
 const routes: Routes = [
   {path: '', component: HomeComponent},
@@ -21,6 +22,7 @@ const routes: Routes = [
   declarations: [
     AppComponent,
     HeaderComponent,
+    FooterComponent,
     HomeComponent,
     ThemeComponent,
     MapComponent,

frontend/src/app/copy-ip/copy-ip.component.html

@@ -1,3 +1,3 @@
-<button type="button" style="margin-top: 50px;" class="button-outer" (click)="copyIpToClipboard()">
+<button type="button" class="button-outer" (click)="copyIpToClipboard()">
   <span class="button-inner">{{ displayText }}</span>
 </button>

frontend/src/app/footer/footer.component.html

@@ -0,0 +1 @@
+<p>footer works!</p>

frontend/src/app/footer/footer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FooterComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/footer/footer.component.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  standalone: false,
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.scss'
+})
+export class FooterComponent {
+
+}

frontend/src/app/home/home.component.html

@@ -17,7 +17,9 @@
       <!--      TODO load player count from old api or backend?-->
       <h2 style="color: white;"><span class="player-count">Loading...</span></h2>
       <h2 style="color: white;">Server IP: play.alttd.com</h2>
+      <div style="padding-top: 35px;">
         <app-copy-ip></app-copy-ip>
+      </div>
     </section>
     <section class="darkmodeSection">
       <div class="container">
@@ -66,8 +68,8 @@
     </section>
     <section id="section2">
       <div class="customContainer">
-        <h2 style="color: white; padding-bottom: 35px; font-size:2.8em">Survival Shaped by You</h2>
+        <h2 style="color: white; padding-bottom: 35px; font-size: 2.8em;">Survival Shaped by You</h2>
-        <p style="color: white; padding-bottom: 35px; margin: auto; font-size: 1.1em;">Altitude is built by the
+        <p style="color: white; padding-bottom: 35px; font-size: 1.1em; margin: auto;">Altitude is built by the
           community, for the community. We've added features requested by our members and several custom plugins to
           create our "perfect" survival experience.</p>
         <div class="survivalShapedContainerPlugins">
@@ -106,6 +108,9 @@
     </section>
     <section class="removemobile darkmodeSection">
       <div class="customContainer">
+        <h2 style="padding-bottom: 35px; font-size: 2.8em;">Community Builds</h2>
+        <p style="padding-bottom: 35px; font-size: 1.1em; margin: auto;">Have a look at some of the incredible builds
+          made by the community. something more? idk placeholder placeholder</p>
         <div class="sliderWrapper">
           <div class="sliderContent">
             <div class="indexSlider">
@@ -136,7 +141,7 @@
       <div class="customContainer">
         <img ngSrc="/public/img/logos/log.png" alt="Alternative Altitude Server Logo" height="129"
              width="120">
-        <h2 style="margin: 20px 0; font-size: 1.8em;">play.alttd.com</h2>
+        <h2 style="margin: 20px 0; font-size: 1.8em; padding-bottom: 0 !important;">play.alttd.com</h2>
         <app-copy-ip></app-copy-ip>
       </div>
     </section>
@@ -145,4 +150,5 @@
       <p style="display: none;">Scroll Down</p>
     </a>
   </main>
+  <app-footer></app-footer>
 </ng-container>

frontend/src/app/home/home.component.ts

@@ -20,6 +20,8 @@ export class HomeComponent implements OnInit {
     "/public/img/backgrounds/caruselimage3.png"
   ];
 
+  private slideIndex = 0;
+
   ngOnInit(): void {
     this.titleService.setTitle('Survival Minecraft Server on ' + ALTITUDE_VERSION + ' | Altitude Community');
     this.randomizeSlides()
@@ -36,8 +38,6 @@ export class HomeComponent implements OnInit {
     this.slides = array;
   }
 
-  private slideIndex = 0;
-
   get slide(): string {
     return this.slides[this.slideIndex];
   }

frontend/src/styles.scss

@@ -299,29 +299,7 @@ tr {
   background: #8b8a8f;
 }
 
-// Everything for darkmode
+// Darkmode sections
-
-.darkmodeSection {
-  background-color: var(--color-secondary);
-  transition: 0.5s background ease;
-}
-
-@media (max-width: 1150px) {
-  .container {
-    width: 90%;
-  }
-
-  h1 {
-    font-size: 3em;
-  }
-
-  .title {
-    height: calc(100% - 150px);
-    margin-top: 0;
-  }
-
-}
-
 .darkmodeSection {
   background-color: var(--color-secondary);
   transition: 0.5s background ease;
@@ -337,7 +315,7 @@ tr {
   transition: 0.5s background ease;
 }
 
-
+// Scroll-up button
 .scroll-up-button.active:hover {
   opacity: 1.0;
 }
@@ -387,4 +365,19 @@ tr {
   box-sizing: border-box;
 }
 
-/* main css end */
+// Different resolution changes
+@media (max-width: 1150px) {
+  .container {
+    width: 90%;
+  }
+
+  h1 {
+    font-size: 3em;
+  }
+
+  .title {
+    height: calc(100% - 150px);
+    margin-top: 0;
+  }
+
+}