Added voting page & header styling fix

Implemented VoteComponent to allow users to vote for the server on multiple platforms. Updated routes, styles, and headers for consistency.

frontend/src/app/about/about.component.html

@@ -1,5 +1,6 @@
 <ng-container>
-  <app-header [current_page]="'rules'" height="460px" background_image="/public/img/backgrounds/trees.jpg">
+  <app-header [current_page]="'about'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">
     <div class="title" header-content>
       <h1>About Us</h1>
       <h2>We are a simple server born out of nostalgia, and working to maintain a semi-vanilla feel today's Minecraft

frontend/src/app/app.module.ts

@@ -16,11 +16,13 @@ import {PrivacyComponent} from './privacy/privacy.component';
 import {TeamComponent} from './team/team.component';
 import {AboutComponent} from './about/about.component';
 import {SocialsComponent} from './socials/socials.component';
+import {VoteComponent} from './vote/vote.component';
 
 const routes: Routes = [
   {path: '', component: HomeComponent},
   {path: 'map', component: MapComponent},
   {path: 'rules', component: RulesComponent},
+  {path: 'vote', component: VoteComponent},
   {path: 'about', component: AboutComponent},
   {path: 'socials', component: SocialsComponent},
   {path: 'team', component: TeamComponent},
@@ -37,6 +39,7 @@ const routes: Routes = [
     HomeComponent,
     MapComponent,
     RulesComponent,
+    VoteComponent,
     AboutComponent,
     SocialsComponent,
     TeamComponent,

frontend/src/app/header/header.component.scss

@@ -1,10 +1,10 @@
 header {
-  background: url("/public/img/backgrounds/120spawn-min.png") no-repeat fixed center 0;
   background-size: cover;
   text-align: center;
   width: 100%;
-  height: 100vh;
   overflow: hidden;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 header .container {

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

@@ -1,5 +1,5 @@
 <ng-container>
-  <app-header [current_page]="'home'"
+  <app-header [current_page]="'home'" height="100vh"
               [background_image]="'/public/img/backgrounds/120spawn-min.png'">
     <div class="title" header-content>
       <h1 style="display: none;">Altitude</h1>

frontend/src/app/privacy/privacy.component.html

@@ -1,5 +1,6 @@
 <ng-container>
-  <app-header [current_page]="'privacy'" height="250px" background_image="/public/img/backgrounds/trees.jpg">
+  <app-header [current_page]="'privacy'" height="300px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">>
     <div class="title" header-content>
       <h1 class="titleColor">Privacy Policy</h1>
     </div>

frontend/src/app/socials/socials.component.html

@@ -1,5 +1,6 @@
 <ng-container>
-  <app-header [current_page]="'privacy'" height="250px" background_image="/public/img/backgrounds/trees.jpg">
+  <app-header [current_page]="'socials'" height="300px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">>
     <div class="title" header-content>
       <h1 class="titleColor">Altitude Socials</h1>
     </div>
@@ -12,21 +13,22 @@
                                                         title="discord.gg/alttd" alt="Altitude Discord" height="150"
                                                         width="150" style="width: 150px;"></a>
         <a href="https://www.tiktok.com/@alttdmc"><img class="socialIcon" ngSrc="/public/img/logos/tiktoksocial.png"
-                                                       title="alttdmc" alt="Altitude Discord" height="150" width="150"
+                                                       title="alttdmc" alt="Altitude TikTok" height="150" width="150"
                                                        style="width: 150px;"></a>
       </div>
       <div class="socialContainer">
         <a href="https://www.instagram.com/alttdmc/"><img class="socialIcon"
                                                           ngSrc="/public/img/logos/instagramsocial.png"
-                                                          title="alttdmc" alt="Altitude Discord" height="150"
+                                                          title="alttdmc" alt="Altitude Instagram" height="150"
                                                           width="150" style="width: 150px;"></a>
         <a href="https://twitter.com/alttdmc"><img class="socialIcon" ngSrc="/public/img/logos/twittersocial.png"
-                                                   title="alttdmc" alt="Altitude Discord" height="150" width="150"
+                                                   title="alttdmc" alt="Altitude Twitter. Yes, Twitter. Not X."
+                                                   height="150" width="150"
                                                    style="width: 150px;"></a>
       </div>
       <div class="socialContainer" style="padding-bottom: 50px;">
         <a href="https://www.youtube.com/c/alttd"><img class="socialIcon" ngSrc="/public/img/logos/youtubesocial.png"
-                                                       title="Altitude Community" alt="Altitude Discord" height="150"
+                                                       title="Altitude Community" alt="Altitude YouTube" height="150"
                                                        width="150" style="width: 150px;"></a>
       </div>
     </section>

frontend/src/app/team/team.component.html

@@ -1,5 +1,6 @@
 <ng-container>
-  <app-header [current_page]="'rules'" height="460px" background_image="/public/img/backgrounds/staff.png">
+  <app-header [current_page]="'team'" height="450px" background_image="/public/img/backgrounds/staff.png"
+              [overlay_gradient]="0.5">>
     <div class="title" header-content>
       <h1>Staffing Team</h1>
       <h2>The team that makes Altitude happen. Your owners, admins, moderators, and trainees are all working together to

frontend/src/app/terms/terms.component.html

@@ -1,5 +1,6 @@
 <ng-container>
-  <app-header [current_page]="'terms'" height="250px" background_image="/public/img/backgrounds/trees.jpg">
+  <app-header [current_page]="'terms'" height="300px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">>
     <div class="title" header-content>
       <h1 class="titleColor">Terms of Use</h1>
     </div>

frontend/src/app/vote/vote.component.html

@@ -0,0 +1,138 @@
+<ng-container>
+  <app-header [current_page]="'vote'" height="460px" background_image="/public/img/backgrounds/town2.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Vote Daily!</h1>
+      <h2>Support the server and help us conquer the world by voting on the websites below every day. Thank you for
+        supporting the Altitude server!</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2 style="text-align: center">Daily Vote Crate</h2>
+            <p>Vote on at least 5 sites to get a crate key every day! Crates contain a vast treasure of collectibles and
+              valuables. You can open vote crates at spawn on the survival server that you received the key on.</p>
+            <p><span style="font-family: 'opensans-bold', sans-serif;">Please note:</span> Days reset at midnight UTC
+              and votes do not process until you log in!</p>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2 style="text-align: center;">Weekly Vote Crate</h2>
+            <p>Vote at least 36 times in a week (thats 6 times a day for 6 days!) to get a Weekly Crate Key! Weekly
+              Crates have higher value rewards, exclusive collectibles, and items with normally impossible
+              enchantments.</p>
+            <p><span style="font-family: 'opensans-bold', sans-serif;">Please note:</span> Weeks reset on Saturday at
+              midnight UTC and votes do not process until you log in!</p>
+          </div>
+        </div>
+        <div class="voteDisclaimer">
+          <h3 style="text-align: center;">Disclaimers & Info</h3>
+          <p style="text-align: center;">You can only store 7 daily crate keys, 1 weekly crate key and 2 quest crate
+            keys.</p><br>
+          <p style="text-align: center;">Voting within 30 minutes of midnight UTC can cause your votes to glitch. Keys
+            lost due to voting too close to midnight UTC will not be reimbursed.
+            <!--<p style="text-align: center;">Crate drop rates can be found <a href="/crate.php">here</a>.</p>-->
+        </div>
+      </section>
+    </section>
+    <section class="voteSection">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <div class="vote">
+          <h2>MinecraftServers</h2>
+          <div>
+            <a onclick="clickVote('vote1');" oncontextmenu="clickVote('vote1');" target="_blank" rel="noopener"
+               href="https://minecraftservers.org/vote/284208">
+              <div class="button-outer">
+                <span id="vote1" class="button-inner">Vote!</span>
+              </div>
+            </a>
+          </div>
+        </div>
+        <div class="vote">
+          <h2>TopMinecraftServers</h2>
+          <div>
+            <a (click)="clickVote('vote2')" oncontextmenu="clickVote('vote2'); return false;" target="_blank"
+               rel="noopener"
+               href="https://topminecraftservers.org/vote/4906">
+              <div class="button-outer">
+                <span id="vote2" class="button-inner">Vote!</span>
+              </div>
+            </a>
+          </div>
+        </div>
+        <div class="vote">
+          <h2>MCSL</h2>
+          <div>
+            <a (click)="clickVote('vote3')" oncontextmenu="clickVote('vote3'); return false;" target="_blank"
+               rel="noopener"
+               href="https://minecraft-server-list.com/server/298238/vote/">
+              <div class="button-outer">
+                <span id="vote3" class="button-inner">Vote!</span>
+              </div>
+            </a>
+          </div>
+        </div>
+        <div class="vote">
+          <h2>Minecraft-Server</h2>
+          <div>
+            <a (click)="clickVote('vote4')" oncontextmenu="clickVote('vote4'); return false;" target="_blank"
+               rel="noopener"
+               href="https://minecraft-server.net/vote/Altitude/">
+              <div class="button-outer">
+                <span id="vote4" class="button-inner">Vote!</span>
+              </div>
+            </a>
+          </div>
+        </div>
+        <div class="vote">
+          <h2>PlanetMinecraft</h2>
+          <div>
+            <a (click)="clickVote('vote5')" oncontextmenu="clickVote('vote5'); return false;" target="_blank"
+               rel="noopener"
+               href="https://www.planetminecraft.com/server/alttd/vote/">
+              <div class="button-outer">
+                <span id="vote5" class="button-inner">Vote!</span>
+              </div>
+            </a>
+          </div>
+        </div>
+        <div class="vote">
+          <h2>Minecraft-MP</h2>
+          <div>
+            <a (click)="clickVote('vote6')" oncontextmenu="clickVote('vote6'); return false;" target="_blank"
+               rel="noopener"
+               href="https://minecraft-mp.com/server/98955/vote/">
+              <div class="button-outer">
+                <span id="vote6" class="button-inner">Vote!</span>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container" style="justify-content: center; text-align: center;">
+        <div class="paragraph">
+          <h2 style="font-size:3em; padding-bottom: 30px;">Reddit</h2>
+          <p>We are also listed on <a href="https://www.reddit.com/r/mcservers/">/r/mcservers</a>! We create a new
+            listing every 7 days, and comment on several of the [Wanted] ads. You can find and upvote our listing as
+            well as comment if you have a Reddit account.</p>
+          <a target="_blank" rel="noopener" href="https://www.reddit.com/r/mcservers/">
+            <div style="margin-top: 30px;" class="button-outer">
+              <span class="button-inner">Visit /r/mcservers</span>
+            </div>
+          </a>
+        </div>
+      </div>
+    </section>
+    <a (click)="this.scrollService.scrollToTop()" class="scroll-up-button, active">
+      <span></span>
+      <p style="display: none;">Scroll Down</p>
+    </a>
+  </main>
+</ng-container>

frontend/src/app/vote/vote.component.scss

@@ -0,0 +1,38 @@
+.voteDisclaimer {
+  width: 60%;
+  padding-bottom: 60px;
+  margin: 0 auto;
+}
+
+.voteSection {
+  background-color: var(--link-color);
+  transition: 0.5s ease;
+}
+
+.vote {
+  width: 33%;
+  min-width: 220px;
+  padding-bottom: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  margin: 0 5px;
+}
+
+.vote div {
+  display: flex;
+  justify-content: center;
+}
+
+.vote h2 {
+  text-align: center;
+  color: white;
+  padding-bottom: 15px;
+}
+
+.vote .button-outer {
+  background-color: white;
+  color: black;
+  text-shadow: none;
+}

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

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

frontend/src/app/vote/vote.component.ts

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {ScrollService} from '../scroll/scroll.service';
+
+@Component({
+  selector: 'app-vote',
+  standalone: false,
+  templateUrl: './vote.component.html',
+  styleUrl: './vote.component.scss'
+})
+export class VoteComponent {
+  constructor(public scrollService: ScrollService) {
+  }
+
+  voteMessage: string = '';
+
+  clickVote(id: string) {
+    this.voteMessage = 'Clicked!';
+  }
+}

frontend/src/index.html

@@ -23,10 +23,8 @@
   <style>
     header {
       height: 460px;
-      background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("public/img/backgrounds/trees.jpg");
       background-size: cover;
-      background-position: center;
+      background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) url("public/img/backgrounds/trees.jpg") no-repeat center;
-      background-repeat: no-repeat;
     }
   </style>
 </head>