Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Not fully styled/finished version of header and home page + all images

Browse Source
This commit is contained in:
auto
2025-04-02 22:52:15 +02:00
parent 6ff99ffb5f
commit 0063e1012b
126 changed files with 65042 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/app.component.html
+4 -6
View File
@@ -1,6 +1,4 @@
<main>
<h1>Hello world</h1>
</main>
<router-outlet />
<router-outlet></router-outlet>
<div *ngIf="isHomePage()">
<app-home></app-home>
</div>
frontend/src/app/app.component.ts
+35 -6
View File
@@ -1,12 +1,41 @@
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {Component, OnInit} from '@angular/core';
import {Meta, Title} from '@angular/platform-browser';
import {ALTITUDE_VERSION} from './constant';
import {Router} from '@angular/router';
@Component({
standalone: false,
selector: 'app-root',
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
styleUrl: './app.component.scss',
})
export class AppComponent {
title = 'frontend';
export class AppComponent implements OnInit{
title = 'Survival Minecraft Server on ' + ALTITUDE_VERSION + '! | Altitude Community';
title_og = 'Community-centered ' + ALTITUDE_VERSION + ' Survival Minecraft Server';
description = 'Start your adventure today! We are a ' +
ALTITUDE_VERSION + ' survival community with McMMO, MyPet, Dynmap, &amp; player shop based economy. ' +
'Monthly server events. Best community in ' + ALTITUDE_VERSION + '!';
description_og = 'Start your adventure today! We host ' +
ALTITUDE_VERSION + ' survival with features suggested by our community: McMMO, MyPet, Dynmap, &amp; economy. ' +
'Monthly server events...';
keywords = 'minecraft,survival,server,servers,community,small,vanilla,semivanilla,dynmap,mcmmo,griefing,' +
ALTITUDE_VERSION + ',altitude,alttd,play,join,find,friends,friendly,simple,private,whitelist,whitelisted,creative,' +
'worldedit'
constructor(private titleService: Title, private metaService: Meta, private router: Router) {
}
ngOnInit(): void {
this.titleService.setTitle(this.title)
this.metaService.updateTag({ name: 'description', content: this.description});
this.metaService.updateTag({ name: 'twitter:description', content: this.description_og})
this.metaService.updateTag({ name: 'og:title', content: this.title_og})
this.metaService.updateTag({ name: 'og:description', content: this.description_og})
this.metaService.updateTag({ name: 'keywords', content: this.keywords})
}
public isHomePage(): boolean {
return this.router.url === '/';
}
}
frontend/src/app/app.module.ts
+27
View File
@@ -0,0 +1,27 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {RouterModule, Routes} from '@angular/router';
import { HeaderComponent } from './header/header.component';
import { HomeComponent } from './home/home.component';
import {NgOptimizedImage} from '@angular/common';
const routes: Routes = [
{ path: '', component: HomeComponent }
];
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
HomeComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes),
NgOptimizedImage,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
frontend/src/app/constant.ts
+1
View File
@@ -0,0 +1 @@
export const ALTITUDE_VERSION = "1.21"
frontend/src/app/header/header.component.html
+134
View File
@@ -0,0 +1,134 @@
<ng-container>
<nav id="nav">
<div class="container">
<div id="mobile_nav">
<div id="menu_toggle">
<!--A fake / hidden checkbox is used as click receiver, so you can use the :checked selector on it.-->
<input type="checkbox"/>
<!--Some spans to act as a hamburger. They are acting like a real hamburger, not that McDonald's stuff.-->
<span class="hamburger"></span>
<span class="hamburger"></span>
<span class="hamburger"></span>
<!--Too bad the menu has to be inside of the button but hey, it's pure CSS magic.-->
<ul id="mobile_nav_list">
<li><a href="/">Home</a></li>
<li>
<a href="#">Features</a>
<ul class="mobile_dd">
<li><a [routerLink]="['/map']">Map</a></li>
<li><a [routerLink]="['/economy']">Economy</a></li>
<!-- <li><a [routerLink]="['/events']">Events</a></li> -->
<li><a [routerLink]="['/claiming']">Land Claiming</a></li>
<li><a [routerLink]="['/mypet']">MyPet</a></li>
<li><a [routerLink]="['/warps']">Warps</a></li>
<li><a [routerLink]="['/skyblock']">Skyblock</a></li>
<li><a [routerLink]="['/customfeatures']">Custom Features</a></li>
<li><a
href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestions
Board</a></li>
</ul>
</li>
<li>
<a href="#">Reference</a>
<ul class="mobile_dd">
<li><a [routerLink]="['/guide']">Guide Book</a></li>
<!-- <li><a [routerLink]="['/faq']">FAQ</a></li> -->
<li><a [routerLink]="['/ranks']">Ranks</a></li>
<li><a [routerLink]="['/rules']">Rules</a></li>
<li><a [routerLink]="['/commandlist']">Command List</a></li>
<li><a [routerLink]="['/mapart']">Mapart</a></li>
<li><a [routerLink]="['/lag']">Reducing Lag</a></li>
<li><a [routerLink]="['/staffpowers']">Staff Powers</a></li>
<li><a [routerLink]="['/nicknames']">Nicknames</a></li>
<li><a [routerLink]="['/bans']">Bans</a></li>
</ul>
</li>
<li><a href="https://discordapp.com/invite/TGqpzCJ">Discord</a></li>
<li><a [routerLink]="['/vote']">Vote</a></li>
<li><a href="https://store.alttd.com">Store</a></li>
<li>
<a href="#">Altitude</a>
<ul class="mobile_dd">
<li><a [routerLink]="['/about']">About Us</a></li>
<li><a [routerLink]="['/socials']">Socials</a></li>
<li><a [routerLink]="['/team']">Team</a></li>
<li><a [routerLink]="['/birthdays']">Famous Birthdays</a></li>
<li><a [routerLink]="['/community']">Community</a></li>
<li><a href="https://alttd.typeform.com/to/dnKlkX">Contact Us</a></li>
<li><a href="https://alttd.com/appeal">Ban Appeal</a></li>
<li><a href="https://alttd.com/blog/">Blog</a></li>
</ul>
</li>
</ul>
</div>
</div>
<a href="/"><img ngSrc="/public/img/logos/logo.png" alt="Altitude Server Logo" height="319" width="550"></a>
<ul id="nav_list">
<li class="nav_li"><a [id]="[current_page === 'index' ? 'current-page' : null]" class="nav_link" href="/">Home</a>
</li>
<li class="nav_li">
<span [id]="getCurrentPageId(['map', 'customfeatures', 'economy', 'events', 'mypet', 'warps',
'skyblock', 'claiming'])" class="nav_link fake_link">Features</span>
<ul class="dropdown">
<li class="nav_li"><a class="nav_link2" [routerLink]="['/map']">Map</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/economy']">Economy</a></li>
<!-- <li class="navli"><a class="nav_link2" [routerLink]="['/events']">Events</a></li> -->
<li class="nav_li"><a class="nav_link2" [routerLink]="['/claiming']">Land Claiming</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/mypet']">MyPet</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/warps']">Warps</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/skyblock']">Skyblock</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/customfeatures']">Custom Features</a></li>
<li class="nav_li"><a class="nav_link2"
href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestions
Board</a></li>
</ul>
</li>
<li class="nav_li">
<span
[id]="getCurrentPageId(['guide', 'faq', 'ranks', 'rules', 'commandlist', 'art', 'lag', 'staffpowers',
'nicknames', 'bans'])" class="nav_link fake_link">Reference</span>
<ul class="dropdown">
<li class="nav_li"><a class="nav_link2" [routerLink]="['/guide']">Guide Book</a></li>
<!-- <li class="navli"><a class="nav_link2" [routerLink]="['/faq']">FAQ</a></li> -->
<li class="nav_li"><a class="nav_link2" [routerLink]="['/ranks']">Ranks</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/rules']">Rules</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/commandlist']">Command List</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/mapart']">Mapart</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/lag']">Reducing Lag</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/staffpowers']">Staff Powers</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/nicknames']">Nicknames</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/bans']">Bans</a></li>
</ul>
</li>
<li class="nav_li"><a class="nav_link" target="_blank" rel="noopener"
href="https://discordapp.com/invite/TGqpzCJ">Discord</a></li>
<li class="nav_li"><a [id]="getCurrentPageId(['vote'])" class="nav_link" [routerLink]="['/vote']">Vote</a></li>
<li class="nav_li">
<a class="nav_link" target="_blank" rel="noopener" href="https://store.alttd.com">Store</a>
</li>
<li class="nav_li">
<a [id]="getCurrentPageId(['about', 'team', 'community', 'birthdays'])" class="nav_link fake_link">Altitude</a>
<ul class="dropdown">
<li class="nav_li"><a class="nav_link2" [routerLink]="['/about']">About Us</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/socials']">Socials</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/team']">Team</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/birthdays']">Famous Birthdays</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/community']">Community</a></li>
<li class="nav_li"><a class="nav_link2" target="_blank" rel="noopener"
href="https://alttd.typeform.com/to/dnKlkX">Contact Us</a></li>
<li class="nav_li"><a class="nav_link2" target="_blank" rel="noopener" href="https://alttd.com/appeal">Ban
Appeal</a></li>
<li class="nav_li"><a class="nav_link2" target="_blank" href="https://alttd.com/blog/">Blog</a></li>
</ul>
</li>
</ul>
<div class="switch-div" style="z-index: 1;">
<label class="switch">
<input type="checkbox" onchange="toggleTheme()" id="slider">
<span class="slider round"></span>
</label>
</div>
</div>
</nav>
</ng-container>
frontend/src/app/header/header.component.scss
+419
View File
@@ -0,0 +1,419 @@
header {
text-align: center;
width: 100%;
height: 100vh;
overflow: hidden;
}
header .container {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
#nav {
position: fixed;
width: 100%;
height: 110px;
z-index: 3;
transition: height 0.3s, 0.5s background ease;
}
#nav.active {
height: 80px;
background-color: var(--color-primary);
box-shadow: 0px 2px 3px -1px rgba(30,30,30,0.1);
}
.nav_link.active {
color: var(--navlink-color);
}
.nav_link.active:hover {
color: var(--navlink-color);
}
nav img {
width: 90px;
height: 52.2px;
}
.nav_li {
display: inline;
font-family: 'minecraft-title',sans-serif;
color: #333333;
position: relative;
}
.nav_link {
text-decoration: none;
padding: 15px;
color: #FFF;
font-size: 0.9em;
transition: 0.5s ease;
}
.nav_link:hover {
text-decoration: none;
color: #DBDBDB;
}
.nav_link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -14px;
left: 0;
background-color: var(--link-color);
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.nav_link:hover:before {
visibility: visible;
transform: scaleX(1);
}
.nav_link2 {
color: var(--navlink-color);
padding: 16px 16px;
text-decoration: none;
display: block;
transition: background-color 0.3s, 0.5s ease;
}
.nav_link2:hover {
background-color: var(--dropdown-color);
color: var(--navlink-color);
}
.nav_li:hover .dropdown {
visibility: visible;
opacity: 1;
transition: visibility 0.3s, opacity 0.3s;
transition-delay: 0s;
}
#menu_toggle {
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
}
#menu_toggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menu_toggle span:first-child {
transform-origin: 0% 0%;
}
#menu_toggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menu_toggle input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: var(--hamburger);
}
#menu_toggle input:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menu_toggle input:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
#menu_toggle input:checked ~ ul {
transform: none;
}
.hamburger {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
}
#mobile_nav_list {
position: fixed;
top: -70px;
left: 45px;
width: 200px;
height: 100%;
margin: -100px 0 0 -50px;
padding: 125px 50px 50px;
background: var(--color-primary);
list-style-type: none;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#mobile_nav_list li {
padding: 10px 0;
font-size: 1.2em;
font-family: 'opensans-bold',sans-serif;
text-align: left;
}
#mobile_nav_list li a {
color: var(--navlink-color);
}
#mobile_nav_list li a:hover, #mobile_nav_list li span:hover {
color: var(--navlink-color);
border-bottom: 2px solid var(--navlink-color);
}
#mobile_nav_list .mobile_dd {
display: none;
margin: 8px 0 -5px 20px;
}
#mobile_nav_list .mobile_dd2 {
display: none;
margin: 8px 0 -5px 20px;
}
#mobile_nav_list .mobile_dd li {
font-size: 1em;
list-style: none;
}
#mobile_nav_list li:hover .mobile_dd {
display: block;
}
#mobile_nav_list .mobile_dd li:hover .mobile_dd2 {
display: block;
}
.nav_li {
display: inline;
font-family: 'minecraft-title',sans-serif;
color: #333333;
position: relative;
}
#current_page {
text-decoration: none;
color: var(--white);
background: var(--link-color);
border-radius: 5px;
}
.fake_link {
cursor: pointer;
}
.dropdown {
position: absolute;
left: 0;
top: 28px;
background-color: var(--color-primary);
visibility: hidden;
opacity: 0;
border-radius: 5px;
transition: visibility 0.3s, opacity 0.3s;
transition-delay: 0.1s;
font-size: 0.9em;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
text-align: left;
width: 200px;
}
#sub_drop {
display: none;
}
/* darkmode switch start */
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 25px;
}
.switch-div{
position: absolute;
right: 40px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 37px;
width: 37px;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
-webkit-transition: 0.4s;
transition: 0.4s;
box-shadow: 0 0 15px #2020203d;
background: var(--switch) url('https://i.ibb.co/7JfqXxB/sunny.png');
background-repeat: no-repeat;
background-position: center;
}
input:checked + .slider {
background-color: var(--link-color);
}
input:focus + .slider {
box-shadow: 0 0 1px var(--link-color);
}
input:checked + .slider:before {
-webkit-transform: translateX(24px);
-ms-transform: translateX(24px);
transform: translateX(24px);
background: var(--switch) url('https://i.ibb.co/FxzBYR9/night.png');
background-repeat: no-repeat;
background-position: center;
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* darkmode switch end */
@-moz-document url-prefix() {
.dropdown2{
top: 12px;
}
}
@supports (-ms-ime-align:auto) {
.dropdown2{
top: 0px;
}
}
@media (max-width: 1150px) {
.dropdown {
top: -10px;
font-size: 0.9em;
}
#nav {
height: 150px;
position: relative;
}
#nav.active {
height: 150px;
}
#nav_list {
font-size: 0.8em;
}
#nav img, #nav ul {
margin-top: 30px;
}
header .container {
justify-content: center;
display: block;
width: 100%;
}
.switch-div {
top: 65px;
}
}
@media (max-width: 690px) {
#nav_list {
display: none;
}
#nav {
height: 90px;
position: fixed;
}
#nav.active {
height: 90px;
}
#nav img {
margin-top: 18px;
}
#mobile_nav {
display: block;
position: fixed;
left: 0;
top: -15px;
}
#current_page {
background: none;
border-bottom: 3px solid var(--pureblack);
}
.switch-div {
top: 33px;
}
}
@media (min-width: 690px) {
#mobile_nav {
display: none;
}
}
frontend/src/app/header/header.component.spec.ts
+23
View File
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HeaderComponent } from './header.component';
describe('HeaderComponent', () => {
let component: HeaderComponent;
let fixture: ComponentFixture<HeaderComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HeaderComponent]
})
.compileComponents();
fixture = TestBed.createComponent(HeaderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
frontend/src/app/header/header.component.ts
+38
View File
@@ -0,0 +1,38 @@
import {Component, Input, OnInit} from '@angular/core';
@Component({
standalone: false,
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
@Input() title: string = '';
@Input() current_page: string = ''
public ngOnInit(): void {
this.toggleTheme()//TODO fix theme
}
public getCurrentPageId(options: string[]) {
if (options.includes(this.current_page)) {
return 'current_page'
}
return null;
}
public setTheme(themeName: string) {
localStorage.setItem('theme', themeName);
document.body.className = themeName;
}
// function to toggle between light and dark theme
public toggleTheme() {
if (localStorage.getItem('theme') === 'theme-light') {
this.setTheme('theme-dark');
} else {
this.setTheme('theme-light');
}
}
}
frontend/src/app/home/home.component.html
+137
View File
@@ -0,0 +1,137 @@
<ng-container>
<header id="top">
<app-header [title]="'Altitude'"></app-header>
<div class="title">
<h1 style="display: none;">Altitude Minecraft Server</h1>
<img id="headerimg" ngSrc="/public/img/logos/logo.png" alt="The Altitude Minecraft Server" height="319"
width="550">
<h2 style="font-size: 2.5em;" id="homeh2">Altitude now on {{ALTITUDE_VERSION}}!</h2>
</div>
<a id="scrollbutton" href="#scrollingpoint">
<span></span>
<p style="display: none;">Scroll Down</p>
</a>
</header>
<main>
<section id="scrollingpoint" style="background: #202020; text-align: center; padding: 80px 0px;">
<!-- 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>
<!-- TODO make copy be angular not js-->
<button type="button" style="margin-top: 50px;" class="button-outer" onclick="copyToClipboard()">
<span class="button-inner" id="copybutton">Copy IP</span>
</button>
</section>
<section class="darkmodeSection">
<div class="container">
<div class="paragraph">
<h2>Adventure Begins</h2>
<p>You awake in a strange town, where are you? There are residents running about trading with each other and stories of distant realms with more towns. It's time to write your story. Welcome to Altitude, the laid-back community-oriented server that hosts your home for Minecraft.</p>
</div>
<img ngSrc="/public/img/items/bookquill.png" style="width: 150px; align-self: center; margin: 0 auto;" alt="Alternative Altitude Server Logo"
height="150" width="150">
</div>
</section>
<!--
<section id="section1">
<div class="container" id="video">
<h2 style="display: none;">YouTube Trailer</h2>
<div style="border-radius:5px;overflow:hidden;position:relative;width:100%">
<img style="width: 100%" src="https://img.youtube.com/vi/Nzbj9Dbv5Wk/maxresdefault.jpg" alt="Altitude YouTube Trailer">
<div id="youtube">
<div class="play" onclick="playVideo()"></div>
</div>
</div>
</div>
</section>
-->
<section class="darkmodeSection">
<div class="container">
<iframe id="discordwidget" src="https://discordapp.com/widget?id=141644560005595136&theme=dark"></iframe>
<div class="paragraph" id="discordp">
<h2>Meet the Community</h2>
<p>Altitude is home to players young and old from all around the globe, and here, everyone is family. Altitude is your place to get together with friends and relax - and maybe enjoy some survival too. Altitude is intended for older players, but all are welcome!</p>
<p>Don't have Discord? Keep up with news and announcements at the <a href="alttd.com/blog">blog</a>.</p>
<div style="display: flex; justify-content: center;">
<a target="_blank" rel="noopener" href="https://discordapp.com/invite/TGqpzCJ">
<div style="margin-top: 30px;" class="button-outer">
<span class="button-inner">Join Our Discord</span>
</div>
</a>
</div>
</div>
</div>
</section>
<section id="section2">
<div class="customcontainer">
<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 community, for the community. We've added features requested by our members and several custom plugins to create our "perfect" survival experience.</p>
<div id="customcontainer2">
<div class="customcontainer3">
<h2>McMMO & MyPet</h2>
<p>Two of the most requested plugins on Altitude, level up yourself and your pet with these MMO-based plugins!</p>
<a [routerLink]="['/mypet']">
<div class="button-outer">
<span class="button-inner">MyPet Info</span>
</div>
</a>
</div>
<div class="customcontainer3">
<h2>Dynamic map</h2>
<p>See the world and the players around it in real-time! The map shows the entire survival world with claims and warps.</p>
<a [routerLink]="['/map']">
<div class="button-outer">
<span class="button-inner">Visit Map</span>
</div>
</a>
</div>
<div class="customcontainer3">
<h2>Player Shops</h2>
<p>Our economy is built on player shops, encouraging player interaction and putting the control in your hands.</p>
<a [routerLink]="['/economy']">
<div class="button-outer">
<span class="button-inner">Shop Guide</span>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- TODO make section below use angular not js-->
<section class="removemobile darkmodeSection">
<div class="customcontainer">
<div id="slider-wrapper">
<div class="slider-content">
<div class="indexslider">
<div id="go-left" onclick="changeSlide(-1)" class="circleBehind go-left"></div><!-- show prev image -->
<div id="go-right" onclick="changeSlide(1)" class="circleBehind go-right"></div><!-- show next image -->
<!-- display/slides here from js-->
</div>
<!-- dots/indicators controls here from js-->
</div>
</div>
</div>
</section>
<section style="background: #202020;">
<div class="customcontainer">
<h2 id="quote" style="color: white; font-family: 'minecraft-text',sans-serif; line-height: 1.3em;">"Great community, great people, great server all round . . . If it can bring back my love for minecraft, it could work wonders for you."</h2>
<p style="color: white; margin-top:30px;">- /u/seanhanley1993</p>
</div>
</section>
<section class="darkmodeSection">
<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>
<!-- TODO make this use angular not js-->
<button type="button" class="button-outer" onclick="copyToClipboard()">
<span class="button-inner" id="copybutton2">Copy IP</span>
</button>
</div>
</section>
<a href="#top" id="scrollupbutton">
<span></span>
<p style="display: none;">Scroll Down</p>
</a>
</main>
</ng-container>
frontend/src/app/home/home.component.scss
View File
frontend/src/app/home/home.component.spec.ts
+23
View File
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HomeComponent } from './home.component';
describe('HomeComponent', () => {
let component: HomeComponent;
let fixture: ComponentFixture<HomeComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HomeComponent]
})
.compileComponents();
fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
frontend/src/app/home/home.component.ts
+19
View File
@@ -0,0 +1,19 @@
import {Component, OnInit} from '@angular/core';
import {Title} from '@angular/platform-browser';
import {ALTITUDE_VERSION} from '../constant';
@Component({
standalone: false,
selector: 'app-home',
templateUrl: './home.component.html',
styleUrl: './home.component.scss'
})
export class HomeComponent implements OnInit {
constructor(private titleService: Title) {}
ngOnInit(): void {
this.titleService.setTitle('Survival Minecraft Server on ' + ALTITUDE_VERSION + ' | Altitude Community');
}
protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION;
}
frontend/src/index.html
+25 -2
View File
@@ -1,11 +1,34 @@
<!doctype html>
<html lang="en">
<head>
<title>Altitude Community</title>
<meta charset="utf-8">
<title>Frontend</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Altitude Community">
<meta name="theme-color" content="#1f9bde">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Community-centered Survival Minecraft Server" />
<!-- Twitter Summary card images must be at least 120x120px -->
<meta name="twitter:image" content="https://www.alttd.com/assets/img/random/seo.jpg" />
<!-- Open Graph data -->
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.alttd.com/" />
<meta property="og:image" content="https://www.alttd.com/assets/img/random/seo.jpg" />
<meta property="og:site_name" content="Altitude Community" />
<link rel="icon" type="image/x-icon" href="public/favicon.ico">
<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;
}
</style>
</head>
<body>
<app-root></app-root>
frontend/src/main.ts
+4 -4
View File
@@ -1,6 +1,6 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
bootstrapApplication(AppComponent, appConfig)
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
frontend/src/styles.scss
+311
View File
@@ -1 +1,312 @@
/* You can add global styles to this file, and also import other style files */
.theme-light {
--color-primary: #FBFBFE;
--color-secondary: #FBFBFE;
--color-tertiary: #e3f1f8;
--color-quaternary: #EFEFEF;
--color-quinary: #FBFBFE;
--color-accent: #FD6F53;
--font-color: #000000;
--font-color-hover: #454545;
--navlink-color: #4b4b4b;
--link-color: #1f9bde;
--hamburger: #232323;
--dropdown-color: #DFDFDF;
--footer-color: #202020;
}
.theme-dark {
--color-primary: #242526;
--color-secondary: #292828;
--color-tertiary: #202020;
--color-quaternary: #202020;
--color-quinary: #292828;
--color-accent: #12CDEA;
--font-color: #FFFFFF;
--font-color-hover: #9C9C9C;
--navlink-color: #FFFFFF;
--link-color: #20729e;
--hamburger: #CDCDCD;
--dropdown-color: #303233;
--footer-color: #242526;
}
@font-face {
font-family: 'opensans';
src: url('/public/fonts/opensans.ttf') format('truetype'),
url('/public/fonts/opensans.eot') format('embedded-opentype'),
url('/public/fonts/opensans.svg') format('svg'),
url('/public/fonts/opensans.woff') format('woff');
}
@font-face {
font-family: 'opensans-bold';
src: url('/public/fonts/opensans-bold.ttf') format('truetype'),
url('/public/fonts/opensans-bold.eot') format('embedded-opentype'),
url('/public/fonts/opensans-bold.svg') format('svg'),
url('/public/fonts/opensans-bold.woff') format('woff');
}
@font-face {
font-family: 'minecraft-title';
src: url('/public/fonts/minecraft-title.ttf') format('truetype'),
url('/public/fonts/minecraft-title.eot') format('embedded-opentype'),
url('/public/fonts/minecraft-title.svg') format('svg'),
url('/public/fonts/minecraft-title.woff') format('woff');
}
@font-face {
font-family: 'minecraft-text';
src: url('/public/fonts/minecraft-text.ttf') format('truetype'),
url('/public/fonts/minecraft-text.eot') format('embedded-opentype'),
url('/public/fonts/minecraft-text.svg') format('svg'),
url('/public/fonts/minecraft-text.woff') format('woff');
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/*
flex CSS
by Astallyne at https://github.com/astallyne
*/
.flex {
display: flex;
}
.row {
flex-direction: row;
}
.row-rev {
flex-direction: row-reverse;
}
.wrap {
flex-flow: row wrap;
}
.wrap-rev {
flex-flow: row wrap-reverse;
}
.column {
flex-direction: column;
}
.column-rev {
flex-direction: column-reverse;
}
.between {
justify-content: space-between;
}
.around {
justify-content: space-around;
}
.start {
justify-content: flex-start;
}
.end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
/* flex end */
/* main css */
a {
color: var(--link);
text-decoration: none;
}
a:hover {
color: var(--linkhover);
text-decoration: none;
}
h1 {
font-family: 'minecraft-title', sans-serif;
text-shadow: 0 3px var(--pureblack), 3px 0 var(--pureblack);
letter-spacing: 3px;
color: var(--white);
font-size: 4em;
margin-bottom: 30px;
font-weight: normal;
}
h2 {
font-family: 'opensans-bold', sans-serif;
font-size: 1.6em;
color: var(--font-color);
transition: 0.5s ease;
}
h3 {
font-family: 'opensans-bold', sans-serif;
font-size: 1.4em;
color: var(--font-color);
transition: 0.5s ease;
}
h4 {
font-family: 'opensans-bold', sans-serif;
font-size: 1em;
color: var(--font-color);
transition: 0.5s ease;
font-weight: 700;
}
p {
font-family: 'opensans', sans-serif;
font-size: 1em;
color: var(--font-color);
transition: 0.5s ease;
}
ol {
padding-left: 100px;
font-family: opensans, sans-serif;
color: var(--font-color);
transition: 0.5s ease;
}
ol li {
padding-bottom: 10px;
}
.paragraph {
width: 50%;
line-height: 1.5em;
}
.paragraph h2, .paragraph h3, .paragraph p, .columnparagraph h2, .columnparagraph p {
padding-bottom: 15px;
}
tr {
color: var(--font-color);
transition: 0.5s ease;
}
.container {
width: 80%;
max-width: 1020px;
margin: auto;
display: flex;
align-items: center;
}
.title {
height: calc(100% - 110px);
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
justify-content: center;
width: 80%;
max-width: 1020px;
margin: 110px auto 0;
}
.title h2 {
color: var(--white);
line-height: 1.5em;
font-size: 1.3em;
text-shadow: 0 2px var(--pureblack), 2px 0 var(--pureblack);
font-family: 'minecraft-text', sans-serif;
}
.button-outer {
display: inline-block;
font-family: 'minecraft-text', sans-serif;
font-size: 0.8em;
padding: 15px 35px;
background: var(--link-color);
color: #ffffff;
letter-spacing: 1px;
border: none;
border-radius: 5px;
height: auto;
transition: all 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53), 0.5s background ease;
cursor: pointer;
text-shadow: 1px 1px 0px black;
}
.button-inner > span {
display: inline-block;
background: none;
min-width: 10px;
min-height: 10px;
height: auto;
padding: 0;
margin: 0;
line-height: 1;
font-size: inherit;
color: inherit;
}
.button-inner:before {
content: '';
}
.button-inner:before {
display: none;
}
.button-outer:hover {
color: var(--pureblack);
text-shadow: 1px 1px 0 white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
transform: scale(1.1);
}
.button-outer:focus, .button-outer:active {
color: var(--white);
background: #8b8a8f;
}
@media (max-width: 1150px) {
.container {
width: 90%;
}
h1 {
font-size: 3em;
}
.title {
height: calc(100% - 150px);
margin-top: 0;
}
}
/* main css end */