Not fully styled/finished version of header and home page + all images
This commit is contained in:
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user