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.
This commit is contained in:
Peter
parent
b4d78690d9
commit
b1f2a89a2e
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
138
frontend/src/app/vote/vote.component.html
Normal file
138
frontend/src/app/vote/vote.component.html
Normal file
|
|
@ -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>
|
||||
38
frontend/src/app/vote/vote.component.scss
Normal file
38
frontend/src/app/vote/vote.component.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
23
frontend/src/app/vote/vote.component.spec.ts
Normal file
23
frontend/src/app/vote/vote.component.spec.ts
Normal file
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
19
frontend/src/app/vote/vote.component.ts
Normal file
19
frontend/src/app/vote/vote.component.ts
Normal file
|
|
@ -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!';
|
||||
}
|
||||
}
|
||||
|
|
@ -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-repeat: no-repeat;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) url("public/img/backgrounds/trees.jpg") no-repeat center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user