Rework folder structure in frontend
Pages are now grouped per group they appear in on in the header (where possible) Utilities used by multiple pages in the project are grouped in folders such as services/pipes/etc
This commit is contained in:
@@ -0,0 +1,228 @@
|
||||
<ng-container>
|
||||
<app-header [current_page]="'ranks'" height="460px" background_image="/public/img/backgrounds/118fjord.png"
|
||||
[overlay_gradient]="0.5">
|
||||
<div class="title" header-content>
|
||||
<h1>Server Ranks</h1>
|
||||
<h2>The standard ranks are unlocked by playing on the server. As you accumulate time you will automatically rank
|
||||
up. Do /rank to check your playtime.</h2>
|
||||
</div>
|
||||
</app-header>
|
||||
|
||||
<main>
|
||||
<section class="darkmodeSection">
|
||||
<div class="container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="tableTitle">Rank</th>
|
||||
<th scope="col" class="tableTitle">Requirements</th>
|
||||
<th scope="col" class="tableTitle">Perks</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank1">Drifter</span>]</td>
|
||||
<td data-label="Requirements">Join the server!</td>
|
||||
<td data-label="Perks" class="perks">
|
||||
All basic permissions<br>
|
||||
Up to 3 homes in survival<br>
|
||||
Up to 2 MyPet slots<br>
|
||||
Up to 5 claims in survival
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank1">Nomad</span>]</td>
|
||||
<td data-label="Requirements">Play for 2 hours</td>
|
||||
<td data-label="Perks" class="perks">
|
||||
Up to 4 homes in survival<br>
|
||||
Up to 3 MyPet slots<br>
|
||||
Up to 10 claims in survival
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank1">Peddler</span>]</td>
|
||||
<td data-label="Requirements">Play for 1 day</td>
|
||||
<td data-label="Perks" class="perks">
|
||||
Up to 5 homes in survival<br>
|
||||
Up to 4 MyPet slots<br>
|
||||
Up to 15 claims in survival
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank1">Settler</span>]</td>
|
||||
<td data-label="Requirements">Play for 3 days</td>
|
||||
<td data-label="Perks" class="perks">
|
||||
Up to 6 homes in survival<br>
|
||||
Up to 5 MyPet slots<br>
|
||||
Up to 20 claims in survival
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank1">Resident</span>]</td>
|
||||
<td data-label="Requirements">Play for 7 days</td>
|
||||
<td data-label="Perks" class="perks">
|
||||
Up to 7 homes in survival<br>
|
||||
Up to 6 MyPet slots<br>
|
||||
Up to 25 claims in survival
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank1">Esquire</span>]</td>
|
||||
<td data-label="Requirements">Play for 14 days</td>
|
||||
<td data-label="Perks" class="perks">
|
||||
Up to 8 homes in survival<br>
|
||||
Up to 7 MyPet slots<br>
|
||||
Up to 30 claims in survival
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank1">Knight</span>]</td>
|
||||
<td data-label="Requirements">Play for 30 days</td>
|
||||
<td data-label="Perks" class="perks">
|
||||
Up to 9 homes in survival<br>
|
||||
Up to 8 MyPet slots
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank1">Baron</span>]</td>
|
||||
<td data-label="Requirements">Play for 60 days</td>
|
||||
<td data-label="Perks" class="perks">
|
||||
Up to 10 homes in survival<br>
|
||||
Up to 9 MyPet slots
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank1">Viscount</span>]</td>
|
||||
<td data-label="Requirements">Play for 180 days</td>
|
||||
<td data-label="Perks" class="perks">
|
||||
Up to 11 homes in survival<br>
|
||||
Up to 9 MyPet slots
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<section id="subheaderDonor">
|
||||
<div class="title" style="margin-top: 0; height: 100%;">
|
||||
<h1>Premium Ranks</h1>
|
||||
<h2>Premium ranks are a symbol of those who have purchased a rank to support the server. Purchase a rank today
|
||||
at: <a href="https://store.alttd.com">donate.alttd.com</a>. Thank you!</h2>
|
||||
</div>
|
||||
</section>
|
||||
<section class="darkmodeSection">
|
||||
<div class="container">
|
||||
<table style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="tableTitle">Rank</th>
|
||||
<th scope="col" class="tableTitle">Requirements</th>
|
||||
<th scope="col" class="tableTitle">Perks</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank2">Count</span>]</td>
|
||||
<td data-label="Requirements">Purchase for $15 on <a href="https://store.alttd.com">Buycraft</a></td>
|
||||
<td data-label="Perks" class="perks">
|
||||
Donor Discord channel access<br>
|
||||
Up to 12 homes in survival<br>
|
||||
Up to 10 MyPet slots<br>
|
||||
More on the <a href="https://store.alttd.com/category/514458">store page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank2">Viceroy</span>]</td>
|
||||
<td data-label="Requirements">Purchase for $30 on <a href="https://store.alttd.com">Buycraft</a></td>
|
||||
<td data-label="Perks" class="perks">
|
||||
Priority queue for full servers<br>
|
||||
Up to 13 homes in survival<br>
|
||||
Up to 18 MyPet slots<br>
|
||||
More on the <a href="https://store.alttd.com/category/514458">store page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank2">Duke</span>]</td>
|
||||
<td data-label="Requirements">Purchase for $50 on <a href="https://store.alttd.com">Buycraft</a></td>
|
||||
<td data-label="Perks" class="perks">
|
||||
Nickname in chat<br>
|
||||
Up to 14 homes in survival<br>
|
||||
Up to 27 MyPet slots<br>
|
||||
More on the <a href="https://store.alttd.com/category/514458">store page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank2">Archduke</span>]</td>
|
||||
<td data-label="Requirements">Purchase for $100 on <a href="https://store.alttd.com">Buycraft</a></td>
|
||||
<td data-label="Perks" class="perks">
|
||||
Custom prefix in chat<br>
|
||||
Up to 16 homes in survival<br>
|
||||
Up to 36 MyPet slots<br>
|
||||
More on the <a href="https://store.alttd.com/category/514458">store page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank2">α</span>]</td>
|
||||
<td data-label="Requirements">Purchase for $25 on <a href="https://store.alttd.com">Buycraft</a></td>
|
||||
<td data-label="Perks" class="perks">
|
||||
Time-limited rank<br>
|
||||
Access to alpha testing<br>
|
||||
This custom prefix<br>
|
||||
More on the <a href="https://store.alttd.com/category/514458">store page</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank4">▲</span>]</td>
|
||||
<td data-label="Requirements">Boosting with <a href="https://discordapp.com/nitro">Discord Nitro</a></td>
|
||||
<td data-label="Perks" class="perks">
|
||||
Discord Nitro perks<br>
|
||||
This custom prefix
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<section id="subheaderCommunity">
|
||||
<div class="title" style="margin-top: 0; height: 100%;">
|
||||
<h1>Community Ranks</h1>
|
||||
<h2>Community ranks are for talented people who support Altitude in more than one way.</h2>
|
||||
</div>
|
||||
</section>
|
||||
<section class="darkmodeSection">
|
||||
<div class="container">
|
||||
<table style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="tableTitle">Rank</th>
|
||||
<th scope="col" class="tableTitle">Requirements</th>
|
||||
<th scope="col" class="tableTitle">Perks</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank5">Social Media</span>]</td>
|
||||
<td data-label="Requirements">See requirements on the <a href="/community.php">Community</a> page</td>
|
||||
<td data-label="Perks" class="perks">/record<br>/ptime<br>/pweather</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank5">Streamer</span>]</td>
|
||||
<td data-label="Requirements">See requirements on the <a href="/community.php">Community</a> page</td>
|
||||
<td data-label="Perks" class="perks">/record<br>/ptime<br>/pweather</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank5">YouTube</span>]</td>
|
||||
<td data-label="Requirements">See requirements on the <a href="/community.php">Community</a> page</td>
|
||||
<td data-label="Perks" class="perks">/record<br>/ptime<br>/pweather</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank5">Event Leader</span>]</td>
|
||||
<td data-label="Requirements">See requirements on the <a href="/community.php">Community</a> page</td>
|
||||
<td data-label="Perks" class="perks">Build perms on event server</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Rank" class="rankTitle">[<span class="rank5">Event Team</span>]</td>
|
||||
<td data-label="Requirements">See requirements on the <a href="/community.php">Community</a> page</td>
|
||||
<td data-label="Perks" class="perks">Build perms on event server</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</ng-container>
|
||||
@@ -0,0 +1,151 @@
|
||||
#subheaderDonor {
|
||||
height: 350px;
|
||||
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/newtown.jpg");
|
||||
background: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/newtown.jpg");
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/newtown.jpg");
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#subheaderCommunity {
|
||||
height: 350px;
|
||||
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/caruselimage4.png");
|
||||
background: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/caruselimage4.png");
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/caruselimage4.png");
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
font-family: 'opensans', sans-serif;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
table tr {
|
||||
padding: .35em;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
padding: .625em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table th {
|
||||
font-size: .85em;
|
||||
}
|
||||
|
||||
.perks {
|
||||
text-align: left;
|
||||
padding-left: 105px;
|
||||
}
|
||||
|
||||
.tableTitle {
|
||||
font-family: 'opensans-bold', sans-serif;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.rankTitle {
|
||||
font-family: 'opensans-bold', sans-serif;
|
||||
}
|
||||
|
||||
.rank1 {
|
||||
color: #265ac9;
|
||||
}
|
||||
|
||||
.rank2 {
|
||||
color: #980399;
|
||||
}
|
||||
|
||||
.rank3 {
|
||||
color: #0c3999;
|
||||
}
|
||||
|
||||
.rank4 {
|
||||
color: #c949c9;
|
||||
}
|
||||
|
||||
.rank5 {
|
||||
color: #ffaa00;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.perks {
|
||||
padding-left: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.perks {
|
||||
padding-left: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 690px) {
|
||||
main .container {
|
||||
width: 80% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
table {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
padding: .400em;
|
||||
}
|
||||
|
||||
table thead {
|
||||
border: none;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
table tr {
|
||||
display: block;
|
||||
margin-bottom: .625em;
|
||||
}
|
||||
|
||||
table td {
|
||||
display: block;
|
||||
font-size: .8em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table td::before {
|
||||
content: attr(data-label);
|
||||
float: left;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
table td:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.perks {
|
||||
text-align: right;
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { RanksComponent } from './ranks.component';
|
||||
|
||||
describe('RanksComponent', () => {
|
||||
let component: RanksComponent;
|
||||
let fixture: ComponentFixture<RanksComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [RanksComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(RanksComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {HeaderComponent} from "@header/header.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-ranks',
|
||||
imports: [
|
||||
HeaderComponent
|
||||
],
|
||||
templateUrl: './ranks.component.html',
|
||||
styleUrl: './ranks.component.scss'
|
||||
})
|
||||
export class RanksComponent {
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user