.gitignore

@@ -1,2 +1,3 @@
-wiki
-wiki_old
+dynmap/
+MundusCrassus.zip
+.well-known/

.htaccess

@@ -0,0 +1,29 @@
+RewriteEngine On
+
+<IfModule mod_rewrite.c>
+
+    # 1. Redirect HTTP to HTTPS
+    RewriteCond %{HTTPS} off
+    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
+
+    # 2. Trim URL to the first element
+    RewriteCond %{REQUEST_URI} ^/([^/]+)(/.*|\.php.*)$
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteRule .* /%1 [R=301,L]
+
+    # 3. Handle directories (add trailing slash)
+    RewriteCond %{REQUEST_FILENAME} -d
+    RewriteRule ^([^/]+)$ /$1/ [R=301,L]
+
+    # 4. Handle PHP files (remove .php and serve if file exists)
+    RewriteCond %{REQUEST_FILENAME}.php -f
+    RewriteRule ^([^/]+)$ /$1.php [NC,L]
+
+    # 5. Deny access to
+    RewriteRule ^\.git/ - [R=403,L]
+
+</IfModule>
+
+# Custom error pages
+ErrorDocument 404 /error.php

base.php

@@ -0,0 +1,40 @@
+<?php
+
+$navData = [
+	"home" => 		["name" => "Home", 			"show" => true, "dropdown" => ""],
+	"news" => 		["name" => "Gameplay", 		"show" => true, "dropdown" => "gameplayData"],
+	"survival" => 	["name" => "Survival", 		"show" => false, "dropdown" => ""],
+	"games" => 		["name" => "Minigames", 	"show" => false, "dropdown" => ""],
+	"creative" => 	["name" => "Creative", 		"show" => false, "dropdown" => ""],
+	"ranks" => 		["name" => "Ranks", 		"show" => true, "dropdown" => ""],
+	"team" => 		["name" => "Team", 			"show" => true, "dropdown" => ""],
+	"snuvi" => 		["name" => "SnuviScript", 	"show" => true, "dropdown" => "snuviData"],
+	"jokes" => 		["name" => "Jokes", 		"show" => true, "dropdown" => ""],
+	"dynmap" => 	["name" => "Dynmap", 		"show" => true, "dropdown" => ""],
+];
+
+$gameplayData = [
+	"survival" => 		["name" => "Survival", 		"icon" => ""],
+	"games" => 			["name" => "Minigames", 	"icon" => ""],
+	"creative" => 		["name" => "Creative", 		"icon" => ""],
+];
+
+$snuviData = [
+	"snuvi_core" => 		["name" => "Core", 			"icon" => ""],
+	"snuvi_minecraft" => 	["name" => "Minecraft", 	"icon" => ""],
+];
+
+$includePath = "error.php";
+
+if(isset($_GET["site"])) {
+    $name = $_GET["site"];
+    if(array_key_exists($name, $navData)) {
+        $includePath = "$name.php";
+        $navData[$name]["class"] = "active";
+    }
+} else {
+    $includePath = "home.php";
+    $navData["home"]["class"] = "active";
+}
+
+include "views/base.view.php";

contact.php

@@ -1,24 +1,31 @@
-<div class="container mt-4">
-    <h4>
-        Legal owner of Mundus Crassus
-    </h4>
-    <p>
-        Name: Kajetan Johannes Hammerle<br>
-        Address: Vienna, Austria<br>
-        Email: <img src="images/mail.png" height="22"><br>
-    </p>
-    <p>
-		You can get the full address on request per mail.
-    </p>
-	<h4>
-        Donate
-    </h4>
-    <p>
-		Please tell us your ingame username, so we can give you the <b>Sponsor</b> rank.<br>
-		<form action="https://www.paypal.com/donate" method="post" target="_top">
-			<input type="hidden" name="hosted_button_id" value="AEY42KXVE6VV2" />
-			<input type="image" src="https://www.paypalobjects.com/en_US/AT/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
-			<img alt="" border="0" src="https://www.paypal.com/en_AT/i/scr/pixel.gif" width="1" height="1" />
-		</form>
-    </p>
-</div>
+<template id="main">
+	<div class="textwall-container">
+		<div class="page-header">
+			<h2 class="page-header-content">Contact</h2>
+		</div>
+		<h4>
+			Legal owner of Mundus Crassus
+		</h4>
+		<p>
+			Name: Marvin<br>
+			Address: Graz, Austria<br>
+			Email: <img src="images/mail.png" height="22" style="vertical-align:middle"><br>
+		</p>
+		<p>
+			You can get the full address on request per mail.
+		</p>
+		<h4>
+			Donate
+		</h4>
+		<p>
+			Please tell us your ingame username, so we can give you the <b>Sponsor</b> rank.<br>
+			<form action="https://www.paypal.com/donate" method="post" target="_top">
+				<input type="hidden" name="hosted_button_id" value="AEY42KXVE6VV2" />
+				<input type="image" src="https://www.paypalobjects.com/en_US/AT/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
+				<img alt="" border="0" src="https://www.paypal.com/en_AT/i/scr/pixel.gif" width="1" height="1" />
+			</form>
+		</p>
+	</div>
+</template>
+
+<?php include "base.php"; ?>

creative.php

@@ -1,15 +1,17 @@
-<div class="container mt-4">
-    <hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Creative World</h2>
-            <p class="lead">
-                Our creative world is the perfect platform to use gamemode creative and to share your buildings with other players. You can also create plots for a lower price.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/creative_gamemode.jpg" alt="Creative Gamemode">
-        </div>
-    </div>
-	
-</div>
+<template id="main">
+	<div class="textwall-container">
+		<div class="page-header">
+			<h2 class="page-header-content">Creative</h2>
+		</div>
+		
+		<div class="feature_containers">
+			<div class="feature_container">
+				<h2 class="feature_heading">Creative World</h2>
+				<img class="feature_image" src="images/creative_gamemode.jpg" alt="Creative Gamemode">
+				<p class="feature_text">Our creative world is the perfect platform to use gamemode creative and to share your buildings with other players. You can also create plots for a lower price.<br></p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<?php include "base.php"; ?>

css/snuviscript.css

@@ -0,0 +1,159 @@
+body {
+	background-color: #303030;
+}
+
+.textwall-container {
+	text-align: justify;
+	font-family: sans-serif;
+	margin-left: 20%;
+	margin-right: 20%;
+	flex: 1;
+}
+
+@media only screen and (max-width: 1000px) {
+	.textwall-container {
+		margin-left: 2%;
+		margin-right: 2%;
+	}
+}
+
+#snuviscript table
+{
+    margin-top: 10px;
+    margin-bottom: 10px;
+    width: 100%;
+    table-layout: fixed;
+    overflow-wrap: break-word;
+}
+
+.bold
+{
+    font-weight: bold !important;
+    text-align: right;
+}
+
+.command
+{
+    font-weight: bold !important;
+    width: 30%;
+    text-align: left;
+    color: #D0D0D0;
+}
+
+.desc
+{
+    font-weight: bold !important;
+    text-align: left;
+    color: #D0D0D0;
+}
+
+#snuviscript table, #snuviscript th, #snuviscript td
+{
+    border-width: 2px;
+    border-color: #202020;
+    border-style: solid;	
+    border-collapse: collapse;
+    font-weight: normal;
+	font-family: "Montserrat", sans-serif;
+}
+
+#snuviscript td
+{
+    background-color: #707070;
+    padding: 5px;
+}
+
+#snuviscript th
+{
+    background-color: #505050;
+    padding: 5px;
+}
+
+.menu
+{
+    background-color: #602020;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    
+    padding: 5px;
+    
+    border-width: 2px;
+    border-color: #202020;
+    border-style: solid;
+	
+	font-family: "Montserrat", sans-serif;
+}
+
+#snuviscript table a
+{
+    text-decoration: none;
+    color: #801010;
+}
+
+#snuviscript table a:hover
+{
+    color: #700000;
+}
+
+.menu a
+{
+    color: #FFFFFF;
+    text-decoration: none;
+    display: inline-block;
+}
+
+.whitePipe
+{
+    padding-right: 8px;
+    margin-right: 8px;
+
+    border-right-width: 1px;
+    border-right-color: #FFFFFF;
+    border-right-style: solid;
+}
+
+.menu a:hover
+{
+    color: #CCCCCC;
+}
+
+.snuviTitle
+{
+    background-color: #602020;
+
+    padding-top: 8px;
+    padding-bottom: 8px;
+    
+    text-align: center;
+    
+    color: #FFFFFF;
+    
+    border-width: 2px;
+    border-color: #202020;
+    border-style: solid;
+    
+    font-weight: bold;
+	font-family: "Montserrat", sans-serif;
+}
+
+#snuviscript section
+{
+    margin-bottom: 50px;   
+    margin-left: auto;
+    margin-right: auto;
+    overflow: hidden;
+}
+
+@media(max-width: 788px) 
+{
+    .command
+    {
+        width: 40%;
+        font-size: 14px;
+    }
+    
+    #snuviscript td, #snuviscript th, .menu a
+    {
+        font-size: 12px;
+    }
+}

css/style.css

@@ -1,93 +1,458 @@
-body {
-    padding-top: 3rem;
-    color: #5a5a5a;
-}
-
-.carousel-item {
-    max-height: 30rem;
-}
-
-.vertical-center {
-    margin-top: auto;
-    margin-bottom: auto;
-}
-
-.spacer {
-    margin-top: 20px;
-}
-
-.box-padding {
-    padding-bottom: 10px;
-}
-
-.box {
-    /*border-width: 1px;
-    border-style: solid;*/
-    border-radius: 6px;
-
-    padding-top: 10px;
-    padding-bottom: 10px;
-    padding-left: 3px;
-    padding-right: 3px;
-
-    height: 100%;
-}
-
-.rank-1 {
-    background-color: #00AAAA;
-    color: black;
-}
-
-.rank-2 {
-    background-color: #FFFF55;
-    color: black;
-}
-
-.rank-3 {
-    background-color: #FFAA00;
-    color: black;
-}
-
-.rank-4 {
-    background-color: #00AA00;
-    color: black;
-}
-
-.rank-owner {
-    background-color: #AA0000;
-    color: white;
-}
-
-.rank-admin {
-    background-color: #FF5555;
-    color: black;
-}
-
-.rank-builder-dev {
-    background-color: #AA00AA;
-    color: white;
-}
-
-.rank-mod {
-    background-color: #5555FF;
-    color: white;
-}
-
-.rank-supporter {
-    background-color: #55FFFF;
-    color: black;
-}
-
-.rank-vip {
-    background-color: #FF55FF;
-    color: black;
-}
-
-.rank-name {
-    font-weight: bold;
-    font-size: 1em;
-}
-
-.rank-description {
-    font-size: 0.75em;
-}
+.home_background_container {
+	width: 100%;
+	text-align: center;
+	overflow: hidden;
+}
+
+.home_background_image {
+	width: 100%;
+	object-fit: cover;
+}
+
+.logo {
+	max-width:40vw;
+}
+
+@media only screen and (min-width: 851px){
+	.home_background_header {
+		left: 50%;
+	}
+}
+
+@media only screen and (max-width: 850px){
+	.home_background_image {
+		height: 500px;
+		width: auto;
+	}
+	
+	.home_background_header {
+		left: 70%;
+	}
+}
+
+
+.home_background_header {
+	position: absolute;
+	top: 40%;
+	transform: translate(-50%, -50%);
+	color: darkred;
+	font-weight: 500;
+	font-size: 4.5em;
+	font-weight: bold;
+	font-family: "Montserrat", sans-serif;
+	
+	padding: 20px;
+}
+
+.page-header {
+	background: darkred;
+	color: #eeeeee;
+	width: 100%;
+	left: 0;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	font-family: sans-serif;
+}
+
+.page-header-content {
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+.textwall-container {
+	text-align: justify;
+	font-family: sans-serif;
+	margin-left: 25%;
+	margin-right: 25%;
+	flex: 1;
+}
+
+.feature_containers {
+	display: flex;
+	flex-flow: row wrap;
+}
+
+.feature_container {
+	width: 49%;
+	padding: 0.5%;
+}
+
+.feature_heading {
+	
+}
+
+.feature_text {
+	
+}
+
+.feature_image {
+	width: 100%;
+}
+
+.nav-list-item {
+	display: flex;
+	align-items: center;
+}
+
+.nav-list-item a {
+	color: #000;
+	text-decoration: none;
+	padding: 0 10px;
+	height: 100%;
+	display: flex;
+	align-items: center;
+}
+
+.dropdown-helper {
+	display: none;
+}
+
+.dropdown-menu {
+	display: none;
+	position: absolute;
+	z-index: 10;
+	padding: 0;
+	top: 100%;
+	min-width: 10rem;
+	border: 1px solid lightgrey;
+}
+
+.dropdown-menu .nav-list-item {
+	display: block;
+	height: auto;
+	background: #fff;
+}
+
+.dropdown-menu .nav-list-item a {
+	padding: 10px;
+}
+
+.navbar {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: fixed; 
+	background: #fff;
+	width: 100%;
+	height: 5rem;
+	z-index: 10;
+	top: 0;
+	left: 0;
+}
+
+.navbar-title {
+	color: darkred;
+	font-size: 20px;
+	font-weight: bold;
+	font-family: "Montserrat", sans-serif;
+	padding-left: 10px;
+}
+
+.navbar-logo {
+	height: 34px;
+}
+
+.navbar-nav {
+	display: flex;
+	justify-content: space-between;
+}
+
+.nav-item {
+	font-family: "Montserrat", sans-serif;
+	font-weight: 500;
+	font-size: 16px;
+	text-decoration: none;
+	padding-left: 20px;
+	padding-top: 2rem;
+	padding-bottom: 1.9rem;
+}
+
+.menu-icon {
+	vertical-align: middle;
+	width: 25px;
+	height: 25px;
+	z-index: 11;
+	float: right;
+	line-height: 5rem;
+	cursor: pointer;
+	display: none;
+}
+
+#check {
+	display:none;
+}
+
+.collapsible:hover, .collapsible:focus {
+	background: #c00417;
+}
+
+.nav-link:hover {
+	color: #c00417;
+}
+
+.dropdown-item:hover {
+	color: #c00417;
+}
+
+.footer-bar {
+	font-size: 16px;
+	font-family: "Montserrat", sans-serif;
+	color: black;
+	align-items: right;
+	padding: 5px;
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: space-between;
+}
+
+.footer-bar a {
+	color: darkred;
+	text-decoration: none;
+}
+
+body {
+   margin: 0px;
+   padding-top: 5rem;
+   display: flex;
+   flex-direction: column;
+   justify-content: space-between;
+   height: calc(100% - 5rem);
+}
+
+body::-webkit-scrollbar {
+	width: 0.8rem;
+	height: 0.4rem;
+}
+
+body::-webkit-scrollbar-track {
+	background: #1e1e24;
+}
+
+body::-webkit-scrollbar-thumb {
+	background: #c00417;
+}
+
+
+/* 100% Image Width on Smaller Screens */
+@media only screen and (max-width: 700px){
+  .feature_container {
+	width: 100%;
+  }
+}
+
+/* Style the button that is used to open and close the collapsible content */
+.collapsible {
+	background-color: #eee;
+	cursor: pointer;
+	padding: 5px;
+	border: none;
+	vertical-align: center;
+	outline: none;
+}
+
+@media only screen and (max-width: 1000px) {
+	.textwall-container {
+		margin-left: 2%;
+		margin-right: 2%;
+	}
+}
+
+@media only screen and (min-width: 851px) {
+	.dropdown:hover .dropdown-menu {
+		display: block;
+		border-top: 3px solid #c00417;
+	}
+}
+
+@media only screen and (max-width: 850px) {
+	.navbar {
+		justify-content: space-around;
+	}
+	
+	.menu-icon {
+		display: block;
+	}
+	
+	.navbar-nav {
+		position: fixed;
+		width: 100%;
+		background: white;
+		top: 4rem;
+		left: 0;
+		text-align: center;
+		display: none;
+		border: 1px solid lightgrey;
+		padding-inline-start: 0px;
+	}
+	
+	.nav-item {
+		padding-top: 1rem;
+		padding-bottom: 1rem;
+		padding-left: 0px;
+		border-bottom: 1px solid lightgrey;
+		display: flex;
+		flex-direction: column;
+	}
+	
+	#check:checked ~ .navbar-nav {
+		display: block;
+	}
+	
+	.dropdown-helper {
+		display: block;
+		position: absolute;
+		right: 0;
+		font-family: "Montserrat", sans-serif;
+		font-weight: bold;
+		border-left: 1px solid lightgrey;
+		width: 45px;
+	}
+	
+	.nav-link-container {
+		display: flex;
+	}
+	
+	.dropdown {
+		padding-top: 0rem;
+		padding-bottom: 0rem;
+	}
+	
+	.dropdown:active .dropdown-menu,
+	.dropdown:focus .dropdown-menu {
+		display: block;
+		width: 100%;
+		border-top: 1px solid #c00417;
+		border-bottom: 1px solid #c00417;
+		position: static;
+	}
+	
+	.dropdown-menu .nav-list-item {
+		background: #F6F5F5;
+	}
+}
+
+.rank-spacer {
+    margin-top: 20px;
+}
+
+.box-padding {
+	padding-top: 10px;
+	padding-bottom: 10px;
+}
+
+.box {
+    border-radius: 6px;
+
+    padding-top: 10px;
+    padding-left: 3px;
+    padding-right: 3px;
+	
+	margin-left: 5px;
+	margin-right: 5px;
+	
+    height: 100%;
+	line-height: 1.5rem;
+}
+
+.rank-1 {
+    background-color: #00AAAA;
+    color: black;
+}
+
+.rank-2 {
+    background-color: #FFFF55;
+    color: black;
+}
+
+.rank-3 {
+    background-color: #FFAA00;
+    color: black;
+}
+
+.rank-4 {
+    background-color: #00AA00;
+    color: black;
+}
+
+.rank-owner {
+    background-color: #AA0000;
+    color: white;
+}
+
+.rank-admin {
+    background-color: #FF5555;
+    color: black;
+}
+
+.rank-builder-dev {
+    background-color: #AA00AA;
+    color: white;
+}
+
+.rank-mod {
+    background-color: #5555FF;
+    color: white;
+}
+
+.rank-supporter {
+    background-color: #55FFFF;
+    color: black;
+}
+
+.rank-vip {
+    background-color: #FF55FF;
+    color: black;
+}
+
+.rank-name {
+    font-weight: bold;
+    font-size: 1em;
+}
+
+.rank-description {
+    font-size: 0.75em;
+}
+
+.text-center {
+	text-align: center;
+}
+
+.justify-content-center {
+	justify-content: center;
+}
+
+.row {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.col-md {
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+}
+  
+.col-12 {
+    width: 100%;
+}
+
+@media (max-width: 768px) {
+  .team-container {
+    flex: 0 0 100%; /* Column occupies 100% of the parent container's width */
+    max-width: 100%; /* Column does not exceed 100% of the parent container's width */
+  }
+}
+
+@media (min-width: 768px) {
+  .team-container {
+    flex: 0 0 50%; /* Column occupies 50% of the parent container's width */
+    max-width: 50%; /* Column does not exceed 50% of the parent container's width */
+  }
+}
+
+@media (min-width: 992px) {
+  .team-container {
+    flex: 0 0 33.333333%; /* Column occupies 1/3 (4 out of 12) of the parent container's width */
+    max-width: 33.333333%; /* Column does not exceed 1/3 of the parent container's width */
+  }
+}

disclaimer.php

@@ -1,55 +0,0 @@
-<div class="container mt-4">
-    <h4>
-        Disclaimer
-    </h4>
-	<h6>
-        Links
-    </h6>
-    <p>
-        We can not take responsibility for the content of other websites to which it refers to by link (<a href="https://www.jusline.at/gesetz/ecg/paragraf/17">§ 17 ECG</a>).
-    </p>
-	<h4>
-        Privacy Policy
-    </h4>
-	<p>
-        For calming: We do not eat your data. No data will be transferred to third parties.
-    </p>
-	<h6>
-        Website
-    </h6>
-    <p>
-        On using our website - or generally "the internet" - you must be aware of data which we receive and save due to technical reasons in logs.
-		This includes:
-		<ul>
-			<li>your IP address</li>
-			<li>version and type of your browser and operating system</li>
-			<li>visited sites</li>
-			<li>date and time of the retrieval</li>
-		</ul>
-    </p>
-    <p>
-		We do not use this data for further processing. These logs are deleted after 4 weeks.
-    </p>
-	<h6>
-        Minecraft
-    </h6>
-    <p>
-		If you play on our Minecraft server we store
-		<ul>
-			<li>your IP address</li>
-			<li>your name and uuid of your Minecraft account</li>
-			<li>date and time of the retrieval</li>
-			<li>every content you create on the server (e.g. your plots)</li>
-		</ul>
-    </p>
-    <p>
-		Your IP address will be deleted after 4 weeks. Other data is stored permanently for statistical purposes and to ensure the best experience for other players.
-		Private messages between users sent via /mail are deleted two weeks after they have been read.
-	</p>
-	<h6>
-        Your rights
-    </h6>
-	<p>
-		If you no longer wish us to process and store your personal data, you may exercise your right to deletion of your personal data. To ensure the best experience for other players some data will only be anonymised.
-	</p>
-</div>

error.php

@@ -1,3 +1,7 @@
-<div class="container mt-4">
-    This site does not exist.
-</div>
+<template id="main">
+	<div class="textwall-container">
+		<p>This site does not exist.</p>
+	</div>
+</template>
+
+<?php include "base.php"; ?>

games.php

@@ -1,322 +1,164 @@
-<div class="container mt-4">
-    <section id="games-multiplayer">
-        <h1 class="featurette-heading">Multiplayer</h1>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">Among Us</h2>
-                <p class="lead">
-                    Classic Among Us. But we did it in Minecraft!<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_amongus.jpg" alt="Games Among Us">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">BedWars</h2>
-                <p class="lead">
-                    Each team needs to defend their bed and to destroy the enemies beds.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_bedwars.jpg" alt="Games BedWars">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">RageMode</h2>
-                <p class="lead">
-                    Kill other players by shooting at them. Each kill is a point. Throw an axe to reduce points of other players.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_ragemode.jpg" alt="Games RageMode">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">ShoppingChaos</h2>
-                <p class="lead">
-                    How fast are you at crafting? Train your skills and compete with other players by giving the customers what they want in time. If you don't know a crafting recipe, don't panic. There's a helpful human right beside you.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_shoppingchaos.jpg" alt="ShoppingChaos">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">Hide and Seek</h2>
-                <p class="lead">
-                    Are you the runner or the hunter? Either way: Run fast! Get points to win the game by breaking the diamond block in the middle or hiding as long as possible.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_hideandseek.jpg" alt="Games Hide and Seek">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">KnockFight</h2>
-                <p class="lead">
-                    Knock other players off the platform by using your knockback-stick. Use skills by pressing function-keys to get advantages or to make it more complicated for other players to knock you off. But remember: You only have a limited amount of lifes.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_knockfight.jpg" alt="Games KnockFight">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">Spleef</h2>
-                <p class="lead">
-                    Click the blocks below other players to remove them. If they fall, you win!<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_spleef.jpg" alt="Games Spleef">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">3D-TicTacToe</h2>
-                <p class="lead">
-                    It's like Tictactoe, but 3D! Use your type of block to get 3 in a row.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_3dtictactoe.jpg" alt="Games 3D-TicTacToe">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">Chinese Checkers (Halma)</h2>
-                <p class="lead">
-                    This game can be played by 2-6 players. It's your goal to get all your tokens to the opposite site of your color. In your turn you can only move one token. The token can move one step in all directions. You can jump over multiple tokens to get to the other site faster. Be strategic and smart!<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_halma.jpg" alt="Games Chinese Checkers">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">FastBridge</h2>
-                <p class="lead">
-                    Every few seconds new blocks spawn. Use these blocks to fastbridge faster than the others. Don't fall down or you will be slowed down for a few seconds. Remember, time is running!<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_fastbridge.jpg" alt="Games FastBridge">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">Rebuild</h2>
-                <p class="lead">
-                    Try to rebuild the given pattern as fast as possible.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_rebuild.jpg" alt="Games Rebuild">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">Snowfight</h2>
-                <p class="lead">
-                    It's a snowball fight! Throw snowballs at your enemies to eliminate their team. But be careful, you only have a limited amount of lifes.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_snowgame.jpg" alt="Games Snowfight">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">MengerRun</h2>
-                <p class="lead">
-                    You can be runner or catcher. Each player has the same amount of game time. If you're the catcher try to catch other players while your available game time shrinks. If you run out of time, you lose. Use function-keys to jump higher and further. If you're the runner, try to escape!!! But don't fall down or you'll automatically be the catcher again.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_mengerrun.jpg" alt="Games MengerRun">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-    </section>
-    
-    <section id="games-singleplayer">
-        <h1 class="featurette-heading">Singleplayer</h1>
-		<hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">3D-Snake</h2>
-                <p class="lead">
-                    Move the snake around and eat some red apples. Don’t touch the walls.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_snake.jpg" alt="Games Snake">
-            </div>
-        </div>
-		<hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">Portal</h2>
-                <p class="lead">
-                    Jump and run extended with portals and movement boost areas.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_portal.jpg" alt="Games Snake">
-            </div>
-        </div>
-		<hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">Gravity</h2>
-                <p class="lead">
-                    Change the gravity as you want while heading for the target!<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_gravity.jpg" alt="Games Snake">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">Buttons</h2>
-                <p class="lead">
-                    Click the correct button in time. Available time per click is shrinking constantly.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_buttons.jpg" alt="Games Buttons">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">Letters</h2>
-                <p class="lead">
-                    Find the letters in alphabetical order on the map. Try to be strategic and fast. If you have a good memory this should be no problem after a few tries.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_letters.jpg" alt="Games Letters">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">Inverting</h2>
-                <p class="lead">
-                    Toggle a pattern of blocks by clicking. Make the whole game field single colored.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_inverting.jpg" alt="Games Inverting">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">Jump'n'Run</h2>
-                <p class="lead">
-                    Get through some obstacles to reach the goal. Try to reach checkpoints so you don't loose your progress.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_jumpnrun.jpg" alt="Games Jump'n'Run">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">4D-Jump'n'Run</h2>
-                <p class="lead">
-                    Experience a Jump'n'Run, but in 4D! Use function keys to jump trough 3D space, while controlling the 4th dimension and turn strategically to switch the 3 main space axis to your will.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_4djumpnrun.jpg" alt="Games 4D-Jump'n'Run">
-            </div>
-        </div>
-        <!--<hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">4D-Labyrinth</h2>
-                <p class="lead">
-                    Jump trough space layers or switch space axis in our 4D-Labyrinth.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_4dlabyrinth.jpg" alt="Games 4D-Labyrinth">
-            </div>
-        </div>-->
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">Parcour</h2>
-                <p class="lead">
-                    Jump through Parcours. Every millisecond counts.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_parcour.jpg" alt="Games Parcour">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">ItemHunt</h2>
-                <p class="lead">
-                    Collect the displayed items to get the highest score possible in the given time.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_itemhunt.jpg" alt="Games ItemHunt">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">Sammelfieber</h2>
-                <p class="lead">
-                    Collect as many different items as possible.<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_sammelfieber.jpg" alt="Games Sammelfieber">
-            </div>
-        </div>
-        <hr class="featurette-divider"/>
-        <div class="row featurette">
-            <div class="col-lg-7 vertical-center">
-                <h2 class="featurette-heading">Leapfrog</h2>
-                <p class="lead">
-                    The goal is to remove as many tokens as possible. Jump over other tokens to remove them from the board. If the last token is standing in the middle, you get an extra point!<br>
-                </p>
-            </div>
-            <div class="col-lg-5">
-                <img class="img-fluid rounded" src="images/games/games_leapfrog.jpg" alt="Games Leapfrog">
-            </div>
-        </div>
-    </section>
-</div>
+<template id="main">
+	<div class="textwall-container">
+		<div class="page-header">
+			<h2 class="page-header-content">Multiplayer</h2>
+		</div>
+		
+		<div class="feature_containers">
+			<div class="feature_container">
+				<h2 class="feature_heading">Among Us</h2>
+                <img class="feature_image" src="images/games/games_amongus.jpg" alt="Games Among Us">
+                <p>Classic Among Us. But we did it in Minecraft!<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">BedWars</h2>
+                <img class="feature_image" src="images/games/games_bedwars.jpg" alt="Games BedWars">
+                <p>Each team needs to defend their bed and to destroy the enemies beds.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">RageMode</h2>
+                <img class="feature_image" src="images/games/games_ragemode.jpg" alt="Games RageMode">
+                <p>Kill other players by shooting at them. Each kill is a point. Throw an axe to reduce points of other players.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">ShoppingChaos</h2>
+                <img class="feature_image" src="images/games/games_shoppingchaos.jpg" alt="ShoppingChaos">
+                <p>How fast are you at crafting? Train your skills and compete with other players by giving the customers what they want in time. If you don't know a crafting recipe, don't panic. There's a helpful human right beside you.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Hide and Seek</h2>
+                <img class="feature_image" src="images/games/games_hideandseek.jpg" alt="Games Hide and Seek">
+                <p>Are you the runner or the hunter? Either way: Run fast! Get points to win the game by breaking the diamond block in the middle or hiding as long as possible.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">KnockFight</h2>
+                <img class="feature_image" src="images/games/games_knockfight.jpg" alt="Games KnockFight">
+                <p>Knock other players off the platform by using your knockback-stick. Use skills by pressing function-keys to get advantages or to make it more complicated for other players to knock you off. But remember: You only have a limited amount of lifes.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Spleef</h2>
+                <img class="feature_image" src="images/games/games_spleef.jpg" alt="Games Spleef">
+                <p>Click the blocks below other players to remove them. If they fall, you win!<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">3D-TicTacToe</h2>
+                <img class="feature_image" src="images/games/games_3dtictactoe.jpg" alt="Games 3D-TicTacToe">
+                <p>It's like Tictactoe, but 3D! Use your type of block to get 3 in a row.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Chinese Checkers (Halma)</h2>
+                <img class="feature_image" src="images/games/games_halma.jpg" alt="Games Chinese Checkers">
+                <p>This game can be played by 2-6 players. It's your goal to get all your tokens to the opposite site of your color. In your turn you can only move one token. The token can move one step in all directions. You can jump over multiple tokens to get to the other site faster. Be strategic and smart!<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">FastBridge</h2>
+                <img class="feature_image" src="images/games/games_fastbridge.jpg" alt="Games FastBridge">
+                <p>Every few seconds new blocks spawn. Use these blocks to fastbridge faster than the others. Don't fall down or you will be slowed down for a few seconds. Remember, time is running!<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Rebuild</h2>
+                <img class="feature_image" src="images/games/games_rebuild.jpg" alt="Games Rebuild">
+                <p>Try to rebuild the given pattern as fast as possible.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Snowfight</h2>
+                <img class="feature_image" src="images/games/games_snowgame.jpg" alt="Games Snowfight">
+                <p>It's a snowball fight! Throw snowballs at your enemies to eliminate their team. But be careful, you only have a limited amount of lifes.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">MengerRun</h2>
+                <img class="feature_image" src="images/games/games_mengerrun.jpg" alt="Games MengerRun">
+                <p>You can be runner or catcher. Each player has the same amount of game time. If you're the catcher try to catch other players while your available game time shrinks. If you run out of time, you lose. Use function-keys to jump higher and further. If you're the runner, try to escape!!! But don't fall down or you'll automatically be the catcher again.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">CaptureTheFlag</h2>
+                <img class="feature_image" src="images/games/games_capturetheflag.jpg" alt="Games CaptureTheFlag">
+                <p>Eliminate an opponent team by bringing their flag into your base while your flag is also in your base.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Cores</h2>
+                <img class="feature_image" src="images/games/games_cores.jpg" alt="Games Cores">
+                <p>Destroy other cores and protect your own!<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Don’t get angry</h2>
+                <img class="feature_image" src="images/games/games_donotgetangry.jpg" alt="Games Don’t get angry">
+                <p>Play against others or AI.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Checkers</h2>
+                <img class="feature_image" src="images/games/games_checkers.jpg" alt="Games Checkers">
+                <p>Eliminate all opponent game pieces.<br></p>
+			</div>
+		</div>
+		
+		<div class="page-header">
+			<h2 class="page-header-content">Singleplayer</h2>
+		</div>
+		
+		<div class="feature_containers">
+			<div class="feature_container">
+				<h2 class="feature_heading">3D-Snake</h2>
+                <img class="feature_image" src="images/games/games_snake.jpg" alt="Games Snake">
+                <p>Move the snake around and eat some red apples. Don’t touch the walls.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Portal</h2>
+                <img class="feature_image" src="images/games/games_portal.jpg" alt="Games Snake">
+                <p>Jump and run extended with portals and movement boost areas.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Gravity</h2>
+                <img class="feature_image" src="images/games/games_gravity.jpg" alt="Games Snake">
+                <p>Change the gravity as you want while heading for the target!<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Buttons</h2>
+                <img class="feature_image" src="images/games/games_buttons.jpg" alt="Games Buttons">
+                <p>Click the correct button in time. Available time per click is shrinking constantly.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Letters</h2>
+                <img class="feature_image" src="images/games/games_letters.jpg" alt="Games Letters">
+                <p>Find the letters in alphabetical order on the map. Try to be strategic and fast. If you have a good memory this should be no problem after a few tries.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Inverting</h2>
+                <img class="feature_image" src="images/games/games_inverting.jpg" alt="Games Inverting">
+                <p>Toggle a pattern of blocks by clicking. Make the whole game field single colored.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Jump'n'Run</h2>
+                <img class="feature_image" src="images/games/games_jumpnrun.jpg" alt="Games Jump'n'Run">
+                <p>Get through some obstacles to reach the goal. Try to reach checkpoints so you don't loose your progress.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">4D-Jump'n'Run</h2>
+                <img class="feature_image" src="images/games/games_4djumpnrun.jpg" alt="Games 4D-Jump'n'Run">
+                <p>Experience a Jump'n'Run, but in 4D! Use function keys to jump trough 3D space, while controlling the 4th dimension and turn strategically to switch the 3 main space axis to your will.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Parcour</h2>
+                <img class="feature_image" src="images/games/games_parcour.jpg" alt="Games Parcour">
+                <p>Jump through Parcours. Every millisecond counts.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">ItemHunt</h2>
+                <img class="feature_image" src="images/games/games_itemhunt.jpg" alt="Games ItemHunt">
+                <p>Collect the displayed items to get the highest score possible in the given time.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Sammelfieber</h2>
+                <img class="feature_image" src="images/games/games_sammelfieber.jpg" alt="Games Sammelfieber">
+                <p>Collect as many different items as possible.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Leapfrog</h2>
+                <img class="feature_image" src="images/games/games_leapfrog.jpg" alt="Games Leapfrog">
+                <p>The goal is to remove as many tokens as possible. Jump over other tokens to remove them from the board. If the last token is standing in the middle, you get an extra point!<br></p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<?php include "base.php"; ?>

gpvp.php

@@ -1,3 +0,0 @@
-<div class="container mt-4">
-    Gr8 content. Much wow.
-</div>

home.php

@@ -1,16 +1,12 @@
-<?php
-
-$carouselData = [
-    ["path" => "survival_tavern.jpg", "alt" => "Survival", "title" => "Survival", "class" => "active", "text" =>
-        "Play classic Minecraft survival extended by our own plugin."],
-    ["path" => "bedwars.jpg", "alt" => "Minigames", "title" => "Minigames", "class" => "", "text" =>
-        "Mundus Crassus features own creations like Among Us and Chinese Checkers but also well-known minigames like BedWars and RageMode."],
-	//["path" => "story_overview.jpg", "alt" => "Story", "title" => "Story", "class" => "", "text" =>
-    //    "Get in contact with humans. Help them with their tasks and get various skills."],
-	["path" => "creative_banner.jpg", "alt" => "Creative", "title" => "Creative", "class" => "", "text" =>
-        "Build in gamemode creative whatever you want. Protect your structures and impress your friends."],
-    //["path" => "gpvp.jpg", "alt" => "Guild PVP", "title" => "Guild PVP", "class" => "", "text" =>
-    //    "Create a guild, build a base and fight together with your friends."]
-];
-
-include "home.view.php";
+<template id="main">
+	<div style="text-align: center;">
+		<div class="home_background_container">
+			<img class="home_background_image" src="images/home_background.jpg">
+			<div class="home_background_header">
+				<img class="logo" src="images/logo2.png">
+			</div>
+		</div>
+	</div>
+</template>
+
+<?php include "base.php"; ?>

home.view.php

@@ -1,101 +0,0 @@
-<div id="gamemodeCarousel" class="carousel slide mb-3" data-ride="carousel">
-    <ol class="carousel-indicators">
-        <?php for($i = 0; $i < count($carouselData); $i++) : ?>
-            <li data-target="#gamemodeCarousel" data-slide-to="<?= $i ?>" class="<?= $i == 0 ? "active" : "" ?>"></li>
-        <?php endfor; ?>
-    </ol>
-    <div class="carousel-inner">
-        <?php foreach($carouselData as $data) : ?>
-            <div class="carousel-item <?= $data["class"] ?>">
-                <img class="d-block w-100" src="images/<?= $data["path"] ?>" alt="<?= $data["alt"] ?>">
-                <div class="carousel-caption d-md-block text-left">
-                    <h1><?= $data["title"] ?></h1>
-                    <p class="lead"><?= $data["text"] ?></p>
-                </div>
-            </div>
-        <?php endforeach; ?>
-    </div>
-    <a class="carousel-control-prev" href="#gamemodeCarousel" role="button" data-slide="prev">
-        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-        <span class="sr-only">Previous</span>
-    </a>
-    <a class="carousel-control-next" href="#gamemodeCarousel" role="button" data-slide="next">
-        <span class="carousel-control-next-icon" aria-hidden="true"></span>
-        <span class="sr-only">Next</span>
-    </a>
-</div>
-
-<div class="container">
-    <hr class="featurette-divider"/>
-    <div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Survival</h2>
-            <p class="lead">
-                Mundus Crassus offers a unique survival feeling by our own plugin. The plugin implements many new features, items and even our own script language.
-                All additions were made with care to fit into Vanilla Minecraft. The system also provides protections to
-                secure your land from others.<br>
-                <br>
-            </p>
-            <a class="btn btn-secondary" href="?site=survival">Learn more</a>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival.jpg" alt="Survival Spawn">
-        </div>
-    </div>
-    <hr class="featurette-divider"/>
-    <div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Minigames</h2>
-            <p class="lead">
-                Need a break from survival? For in between we offer our players a range of different single- and multiplayer games.
-            </p>
-            <a class="btn btn-secondary" href="?site=games">Learn more</a>
-        </div>
-        <div class="col-lg-5 order-lg-1">
-            <img class="img-fluid rounded" src="images/dame.jpg" alt="Games Spawn">
-        </div>
-    </div>
-    <!--<hr class="featurette-divider"/>
-    <div class="row featurette">
-        <div class="col-lg-7 order-lg-2 vertical-center">
-            <h2 class="featurette-heading">Story</h2>
-            <p class="lead">
-                Speak with humans and they will tell you their story and needs. Complete quests and they will offer you various skills.<br>
-                <br>
-            </p>
-            <a class="btn btn-secondary" href="?site=story">Learn more</a>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/story.jpg" alt="Story Oma">
-        </div>
-    </div>-->
-    <hr class="featurette-divider"/>
-    <div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Creative</h2>
-            <p class="lead">
-                Let your creativity flow. In gamemode creative you can build whatever you want. Protect your structures and impress your friends.
-            </p>
-            <a class="btn btn-secondary" href="?site=creative">Learn more</a>
-        </div>
-        <div class="col-lg-5 order-lg-1">
-            <img class="img-fluid rounded" src="images/creative.jpg" alt="Creative">
-        </div>
-    </div>
-    
-    <!--<hr class="featurette-divider"/>
-    <div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Guild PVP</h2>
-            <p class="lead">
-                Guild PVP is all about choosing a class and level to unlock new skills.
-                You can found guilds to play together with your friends and start sieging the guilds of others.
-                Are you ready for the battlefields of Mundus Crassus?
-            </p>
-            <a class="btn btn-secondary" href="?site=gpvp">Learn more</a>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/gpvp_dungeon.jpg" alt="Guild PVP Dungeon">
-        </div>
-    </div>-->
-</div>

index.php

@@ -1,31 +1,5 @@
-<?php
-
-$navData = [
-    "home" => ["name" => "Home", "class" => "", "show" => false],
-    "survival" => ["name" => "Survival", "class" => "", "show" => true],
-    "games" => ["name" => "Minigames", "class" => "", "show" => true],
-    //"story" => ["name" => "Story", "class" => "", "show" => true],
-    "creative" => ["name" => "Creative", "class" => "", "show" => true],
-    //"gpvp" => ["name" => "Guild PVP", "class" => "", "show" => true],
-    "rules" => ["name" => "Fake Rules", "class" => "", "show" => true],
-    "ranks" => ["name" => "Ranks", "class" => "", "show" => true],
-    "team" => ["name" => "Team", "class" => "", "show" => true],
-    "contact" => ["name" => "Donate", "class" => "", "show" => true],
-    "disclaimer" => ["name" => "Wusi", "class" => "", "show" => false],
-    "thanks" => ["name" => "Wusi", "class" => "", "show" => false],
-];
-
-$includePath = "error.php";
-
-if(isset($_GET["site"])) {
-    $name = $_GET["site"];
-    if(array_key_exists($name, $navData)) {
-        $includePath = "$name.php";
-        $navData[$name]["class"] = "active";
-    }
-} else {
-    $includePath = "home.php";
-    $navData["home"]["class"] = "active";
-}
-
-include "index.view.php";
+<?php
+
+include "home.php";
+
+?>

index.view.php

@@ -1,47 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
-        <title>Mundus Crassus</title>
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-        <link href="css/style.css" rel="stylesheet">
-    </head>
-    <body>
-        <header>
-            <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
-                <a class="navbar-brand" href="?site=home">Mundus Crassus</a>
-                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-                <div class="collapse navbar-collapse" id="navbarCollapse">
-                    <ul class="navbar-nav mr-auto">
-                        <?php foreach($navData as $name => $data) : ?>
-                            <?php if($data["show"]) : ?>
-                                <li class='nav-item <?= $data["class"] ?>'>
-                                    <a class='nav-link' href='?site=<?= $name ?>'><?= $data["name"] ?></a>
-                                </li>
-                            <?php endif; ?>
-                        <?php endforeach; ?>
-                    </ul>
-                </div>
-            </nav>
-        </header>
-        <main role="main">
-            <?php include $includePath; ?>
-        </main>
-        <footer class="container">
-            <hr class="featurette-divider"/>
-            <p class="float-right"><a href="#">Back to top</a></p>
-            <p>
-                Made by Kajetan & Marvin &middot; 
-                <a href="?site=contact">Contact / Donate</a> &middot; 
-                <a href="?site=disclaimer">Disclaimer / Privacy Policy</a>
-            </p>
-        </footer>
-        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
-        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
-        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
-    </body>
-</html>

jokes.php

@@ -0,0 +1,80 @@
+<template id="main">
+	<div class="textwall-container">
+		<div class="page-header">
+			<h2 class="page-header-content">Jokes</h2>
+		</div>
+		<br>
+		In the last years we experienced a lot of unneccessary rules on different minecraft servers. So we have no rules. Instead have fun with our listing of the observed behavior of different roles.<br><br>
+		<h4>Owner</h4>
+		<ol>
+			<li>Fuck rules, you are owner.</li>
+			<li>People do not really like you. They just want permissions from you.</li>
+			<li>Let bugs sink through to everybody before fixing them.</li>
+		</ol>
+		<h4>Admins</h4>
+		<ol>
+			<li>Feel bad because you have less permissions than developers.</li>
+			<li>Temporary ban users if you are in a bad mood.</li>
+			<li>Abuse the summon command at least once.</li>
+			<li>Never pay the server bill on time. This would make the owners life easier.</li>
+			<li>Beg for permissions, it works.</li>
+			<li>Occasionally write wrong commands like <span class="text-monospace font-italic">7ban *insert annoying player*.</span></li>
+			<li>You can not pretend to be a girl because people know you.</li>
+			<li>Answer no before you hear the question.</li>
+		</ol>
+		<h4>Snuvi Developers</h4>
+		<ol>
+			<li>You can do whatever you want.</li>
+			<li>Temporary ban admins with the help of SnuviScript because you can.</li>
+			<li>You can control permissions. Do not ask for them.</li>
+			<li>Request already built in features at least once.</li>
+			<li>Complain about bugs you made.</li>
+			<li>Blame your bugs on the owner.</li>
+			<li>If you cannot blame your bugs on the owner try other developers.</li>
+			<li>People will never notice your efforts.</li>
+			<li>Pretend something is impossible if you do not want to program it.</li>
+			<li>Program things like you want them. You do not care about others.</li>
+			<li>You have no idea what the user wants.</li>
+		</ol>
+		<h4>Builders</h4>
+		<ol>
+			<li>Nobody is allowed to touch your buildings. You are the best.</li>
+			<li>If you haven't got any motivation to build play another game.</li>
+			<li>If a Snuvi developer needs buildings for quests pretend to be AFK.</li>
+			<li>People will notice your efforts but claim they could do it better.</li>
+			<li>Use spruce or dark oak wood.</li>
+		</ol>
+		<h4>VIPs</h4>
+		<ol>
+			<li>You seem to be a very special snowflake. Maybe you are just a girl and the team likes you.</li>
+			<li>Users hate ya cause they aint ya.</li>
+			<li>Show off with your real life connections to the staff.</li>
+		</ol>
+		<h4>Users</h4>
+		<ol>
+			<li>Never mess with Snuvi developers. They are OP.</li>
+			<li>First rule about permissions don't talk about permissions.</li>
+			<li>Wear a girl skin to get presents.</li>
+			<li>Wear a girl skin to get attention from desperate boys.</li>
+			<li>Be a girl or pretend to. People will be nicer to you.</li>
+			<li>Ask before you think.</li>
+			<li>Ask for an admin on first join. In general ask for an admin.</li>
+			<li>Never appreciate what a developer has done.</li>
+			<li>Never say things like great server to anybody else than the admins. Only admins work on the server.</li>
+			<li>Blame your wrong usage of things on the developers.</li>
+			<li>Never see the problem in yourself. Feel free to say things like stupid server.</li>
+			<li>Try breaking blocks on your first join to show dominance.</li>
+			<li>Wear a stupid skin on your first join to make a good first impression.</li>
+			<li>Give yourself a name containing HD, LP or something else. This way everybody knows you are a great YouTuber.</li>
+			<li>Ask things at least twice. Pretend on having not seen the first answer.</li>
+			<li>Tell everybody your microphone is broken to get rid of others who want to voice chat with you.</li>
+			<li>Try <span class="text-monospace font-italic">/op</span> on yourself at least once.</li>
+			<li>Ask when the next update is released right after an update.</li>
+			<li>If you don´t unterstand something spam the chat. Expect immediate answers.</li>
+		<li>"It doesn't work" is your only phrase when you tell developers about a bug you've found.</li>
+		<li>If you died and lost your stuff ask an admin for help.</li>
+		</ol>
+	</div>
+</template>
+
+<?php include "base.php"; ?>

js/main.js

@@ -0,0 +1 @@
+document.body.appendChild(document.getElementById('main').content);

js/snuviscript.js

@@ -0,0 +1,16 @@
+var sections = document.getElementsByTagName("section");
+var menuHTML = "<div class='menu'>";
+for(var i = 0; i < sections.length - 1; i++)
+{
+    menuHTML += "<a href='#" + sections[i].id + "'><span class='whitePipe'>" + sections[i].id + "</span></a>";
+}
+for(var i = sections.length - 1; i < sections.length; i++)
+{
+    menuHTML += "<a href='#" + sections[i].id + "'><span>" + sections[i].id + "</span></a>";
+}
+menuHTML += "</div>";
+
+for(var i = 0; i < sections.length; i++)
+{
+    sections[i].innerHTML = "<div class='snuviTitle'>" + sections[i].id + "</div>" + menuHTML + sections[i].innerHTML;
+}

policy.php

@@ -0,0 +1,46 @@
+<template id="main">
+	<div class="textwall-container">
+		<div class="page-header">
+			<h2 class="page-header-content">Privacy Policy</h2>
+		</div>
+		<p>
+			For calming: We do not eat your data. No data will be transferred to third parties.
+		</p>
+		<h4>
+			Website
+		</h4>
+		<p>
+			On using our website - or generally "the internet" - you must be aware of data which we receive and save due to technical reasons in logs.
+			This includes:
+			<ul>
+				<li>your IP address</li>
+				<li>version and type of your browser and operating system</li>
+				<li>visited sites</li>
+				<li>date and time of the retrieval</li>
+			</ul>
+		</p>
+		<p>
+			We do not use this data for further processing.
+		</p>
+		<h4>
+			Minecraft
+		</h4>
+		<p>
+			If you play on our Minecraft server we store
+			<ul>
+				<li>your IP address</li>
+				<li>your name and uuid of your Minecraft account</li>
+				<li>date and time of the retrieval</li>
+				<li>every content you create on the server (e.g. your plots)</li>
+			</ul>
+		</p>
+		<h4>
+			Your rights
+		</h4>
+		<p>
+			If you no longer wish us to process and store your personal data, you may exercise your right to deletion of your personal data. To ensure the best experience for other players some data will only be anonymised.
+		</p>
+	</div>
+</template>
+
+<?php include "base.php"; ?>

ranks.php

@@ -1,175 +1,175 @@
-<div class="container mt-4">
-    <div class="row text-center">
-        <div class="col-12 box-padding">
-            <div class="box rank-1">
-                <span class="rank-name">User</span><br>
-                <span class="rank-description">Default rank</span>
-            </div>
-        </div>
-    </div>
-    <div class="row text-center">
-        <!--<div class="col-md box-padding">
-            <div class="box rank-2">
-                <span class="rank-name">Adventurer</span><br>
-                <span class="rank-description">Complete 1 adventure</span>
-            </div>
-        </div>-->
-        <div class="col-md box-padding">
-            <div class="box rank-2">
-                <span class="rank-name">Settler</span><br>
-                <span class="rank-description">Create a private plot</span>
-            </div>
-        </div>
-        <!--<div class="col-md box-padding">
-            <div class="box rank-2">
-                <span class="rank-name">Commander</span><br>
-                <span class="rank-description">Clan with 5 members</span>
-            </div>
-        </div>-->
-        <div class="col-md box-padding">
-            <div class="box rank-2">
-                <span class="rank-name">Volunteer</span><br>
-                <span class="rank-description">Do 15 quests</span>
-            </div>
-        </div>
-        <div class="col-md box-padding">
-            <div class="box rank-2">
-                <span class="rank-name">Newcomer</span><br>
-                <span class="rank-description">Play 20 hours</span>
-            </div>
-        </div>
-        <div class="col-md box-padding">
-            <div class="box rank-2">
-                <span class="rank-name">Challenger</span><br>
-                <span class="rank-description">Complete challenge "All Damage Types"</span>
-            </div>
-        </div>
-    </div>
-    <div class="row text-center">
-        <!--<div class="col-md box-padding">
-            <div class="box rank-3">
-                <span class="rank-name">Explorer</span><br>
-                <span class="rank-description">Complete 5 adventures</span>
-            </div>
-        </div>-->
-        <div class="col-md box-padding">
-            <div class="box rank-3">
-                <span class="rank-name">Colonizer</span><br>
-                <span class="rank-description">Create a plot with 900m2</span>
-            </div>
-        </div>
-        <!--<div class="col-md box-padding">
-            <div class="box rank-3">
-                <span class="rank-name">Chief</span><br>
-                <span class="rank-description">Clan with 10 members</span>
-            </div>
-        </div>-->
-        <div class="col-md box-padding">
-            <div class="box rank-3">
-                <span class="rank-name">Friend</span><br>
-                <span class="rank-description">Do 50 quests</span>
-            </div>
-        </div>
-        <div class="col-md box-padding">
-            <div class="box rank-3">
-                <span class="rank-name">Frequenter</span><br>
-                <span class="rank-description">Play 100 hours</span>
-            </div>
-        </div>
-        <div class="col-md box-padding">
-            <div class="box rank-3">
-                <span class="rank-name">Mobhunter</span><br>
-                <span class="rank-description">Complete challenge "All Entites"</span>
-            </div>
-        </div>
-    </div>
-    <div class="row text-center">
-        <!--<div class="col-md box-padding">
-            <div class="box rank-4">
-                <span class="rank-name">Pioneer</span><br>
-                <span class="rank-description">Complete 10 adventures</span>
-            </div>
-        </div>-->
-        <div class="col-md box-padding">
-            <div class="box rank-4">
-                <span class="rank-name">Major</span><br>
-                <span class="rank-description">Raise a plot to a city</span>
-            </div>
-        </div>
-        <!--<div class="col-md box-padding">
-            <div class="box rank-4">
-                <span class="rank-name">Lord</span><br>
-                <span class="rank-description">Clan with 15 members</span>
-            </div>
-        </div>-->
-        <div class="col-md box-padding">
-            <div class="box rank-4">
-                <span class="rank-name">Altruist</span><br>
-                <span class="rank-description">Do 500 quests</span>
-            </div>
-        </div>
-        <div class="col-md box-padding">
-            <div class="box rank-4">
-                <span class="rank-name">Legend</span><br>
-                <span class="rank-description">Play 700 hours</span>
-            </div>
-        </div>
-        <div class="col-md box-padding">
-            <div class="box rank-4">
-                <span class="rank-name">Collector</span><br>
-                <span class="rank-description">Complete challenge "All Items"</span>
-            </div>
-        </div>
-    </div>
+<template id="main">
+	<div class="textwall-container">
+		<div class="page-header">
+			<h2 class="page-header-content">Ranks</h2>
+		</div>
+		
+		<div class="row text-center">
+			<div class="col-12 box-padding">
+				<div class="box rank-1">
+					<span class="rank-name">User</span><br>
+					<span class="rank-description">Default rank</span>
+				</div>
+			</div>
+		</div>
+		<div class="row text-center">
+			<!--<div class="col-md box-padding">
+				<div class="box rank-2">
+					<span class="rank-name">Adventurer</span><br>
+					<span class="rank-description">Complete 1 adventure</span>
+				</div>
+			</div>-->
+			<div class="col-md box-padding">
+				<div class="box rank-2">
+					<span class="rank-name">Settler</span><br>
+					<span class="rank-description">Create a private plot</span>
+				</div>
+			</div>
+			<!--<div class="col-md box-padding">
+				<div class="box rank-2">
+					<span class="rank-name">Commander</span><br>
+					<span class="rank-description">Clan with 5 members</span>
+				</div>
+			</div>-->
+			<div class="col-md box-padding">
+				<div class="box rank-2">
+					<span class="rank-name">Volunteer</span><br>
+					<span class="rank-description">Do 15 quests</span>
+				</div>
+			</div>
+			<div class="col-md box-padding">
+				<div class="box rank-2">
+					<span class="rank-name">Newcomer</span><br>
+					<span class="rank-description">Play 20 hours</span>
+				</div>
+			</div>
+			<div class="col-md box-padding">
+				<div class="box rank-2">
+					<span class="rank-name">Challenger</span><br>
+					<span class="rank-description">Complete challenge "All Damage Types"</span>
+				</div>
+			</div>
+		</div>
+		<div class="row text-center">
+			<!--<div class="col-md box-padding">
+				<div class="box rank-3">
+					<span class="rank-name">Explorer</span><br>
+					<span class="rank-description">Complete 5 adventures</span>
+				</div>
+			</div>-->
+			<div class="col-md box-padding">
+				<div class="box rank-3">
+					<span class="rank-name">Colonizer</span><br>
+					<span class="rank-description">Create a plot with 900m2</span>
+				</div>
+			</div>
+			<!--<div class="col-md box-padding">
+				<div class="box rank-3">
+					<span class="rank-name">Chief</span><br>
+					<span class="rank-description">Clan with 10 members</span>
+				</div>
+			</div>-->
+			<div class="col-md box-padding">
+				<div class="box rank-3">
+					<span class="rank-name">Friend</span><br>
+					<span class="rank-description">Do 50 quests</span>
+				</div>
+			</div>
+			<div class="col-md box-padding">
+				<div class="box rank-3">
+					<span class="rank-name">Frequenter</span><br>
+					<span class="rank-description">Play 100 hours</span>
+				</div>
+			</div>
+			<div class="col-md box-padding">
+				<div class="box rank-3">
+					<span class="rank-name">Mobhunter</span><br>
+					<span class="rank-description">Complete challenge "All Entites"</span>
+				</div>
+			</div>
+		</div>
+		<div class="row text-center">
+			<!--<div class="col-md box-padding">
+				<div class="box rank-4">
+					<span class="rank-name">Pioneer</span><br>
+					<span class="rank-description">Complete 10 adventures</span>
+				</div>
+			</div>-->
+			<div class="col-md box-padding">
+				<div class="box rank-4">
+					<span class="rank-name">Major</span><br>
+					<span class="rank-description">Raise a plot to a city</span>
+				</div>
+			</div>
+			<!--<div class="col-md box-padding">
+				<div class="box rank-4">
+					<span class="rank-name">Lord</span><br>
+					<span class="rank-description">Clan with 15 members</span>
+				</div>
+			</div>-->
+			<div class="col-md box-padding">
+				<div class="box rank-4">
+					<span class="rank-name">Altruist</span><br>
+					<span class="rank-description">Do 500 quests</span>
+				</div>
+			</div>
+			<div class="col-md box-padding">
+				<div class="box rank-4">
+					<span class="rank-name">Legend</span><br>
+					<span class="rank-description">Play 700 hours</span>
+				</div>
+			</div>
+			<div class="col-md box-padding">
+				<div class="box rank-4">
+					<span class="rank-name">Collector</span><br>
+					<span class="rank-description">Complete challenge "All Items"</span>
+				</div>
+			</div>
+		</div>
 
-    <div class="row text-center justify-content-center spacer">
-        <div class="col-md box-padding">
-            <div class="box rank-vip">
-                <span class="rank-name">Influencer / Sponsor / VIP</span><br>
-                <span class="rank-description">Be famous, smile and wave ;-)</span>
-            </div>
-        </div>
-    </div>
-    <div class="row text-center justify-content-center spacer">
-        <div class="col-md box-padding">
-            <div class="box rank-builder-dev">
-                <span class="rank-name">Builder / Developer</span><br>
-                <span class="rank-description">Pretend to be busy</span>
-            </div>
-        </div>
-        <div class="col-md">
-            <div class="row">
-                <div class="col-12 box-padding">
-                    <div class="box rank-supporter">
-                        <span class="rank-name">Supporter</span><br>
-                        <span class="rank-description">You may apply for that</span>
-                    </div>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-12 box-padding">
-                    <div class="box rank-mod">
-                        <span class="rank-name">Moderator</span><br>
-                        <span class="rank-description">Never ever apply for that</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="row text-center justify-content-center">
-        <div class="col-md box-padding">
-            <div class="box rank-admin">
-                <span class="rank-name">Admin</span><br>
-                <span class="rank-description">Are more important than they look</span>
-            </div>
-        </div>
-    </div>
-	<div class="row text-center justify-content-center">
-        <div class="col-md box-padding">
-            <div class="box rank-owner">
-                <span class="rank-name">Owner</span><br>
-                <span class="rank-description">Shiny as always</span>
-            </div>
-        </div>
-    </div>
-</div>
+		<div class="row text-center justify-content-center rank-spacer">
+			<div class="col-md box-padding">
+				<div class="box rank-vip">
+					<span class="rank-name">Influencer / Sponsor / VIP</span><br>
+					<span class="rank-description">Be famous, smile and wave ;-)</span>
+				</div>
+			</div>
+		</div>
+		<div class="row text-center justify-content-center rank-spacer">
+			<div class="col-md box-padding">
+				<div class="box rank-builder-dev">
+					<span class="rank-name">Builder / Developer</span><br>
+					<span class="rank-description">Pretend to be busy</span>
+				</div>
+			</div>
+			<div class="col-md">
+				<div class="row">
+					<div class="col-12 box-padding">
+						<div class="box rank-supporter">
+							<span class="rank-name">Supporter</span><br>
+							<span class="rank-description">You may apply for that</span>
+						</div>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-12 box-padding">
+						<div class="box rank-mod">
+							<span class="rank-name">Moderator</span><br>
+							<span class="rank-description">Never ever apply for that</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="row text-center justify-content-center">
+			<div class="col-md box-padding">
+				<div class="box rank-admin">
+					<span class="rank-name">Admin</span><br>
+					<span class="rank-description">Without a team they do everything</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<?php include "base.php"; ?>

rules.php

@@ -1,72 +0,0 @@
-<div class="container mt-4">
-	In the last years we experienced a lot of unneccessary rules on different minecraft servers. So we have no rules. Instead have fun with our listing of the observed behavior of different roles.<br><br>
-    <h3>Rules for the Owner</h3>
-    <ol>
-        <li>Fuck rules, you are owner.</li>
-        <li>People do not really like you. They just want permissions from you.</li>
-        <li>Let bugs sink through to everybody before fixing them.</li>
-    </ol>
-    <h3>Rules for Admins</h3>
-    <ol>
-        <li>Feel bad because you have less permissions than developers.</li>
-        <li>Temporary ban users if you are in a bad mood.</li>
-        <li>Abuse the summon command at least once.</li>
-        <li>Never pay the server bill on time. This would make the owners life easier.</li>
-        <li>Beg for permissions, it works.</li>
-        <li>Occasionally write wrong commands like <span class="text-monospace font-italic">7ban *insert annoying player*.</span></li>
-        <li>You can not pretend to be a girl because people know you.</li>
-        <li>Answer no before you hear the question.</li>
-    </ol>
-    <h3>Rules for Snuvi Developers</h3>
-    <ol>
-        <li>You can do whatever you want.</li>
-        <li>Temporary ban admins with the help of SnuviScript because you can.</li>
-        <li>You can control permissions. Do not ask for them.</li>
-        <li>Request already built in features at least once.</li>
-        <li>Complain about bugs you made.</li>
-        <li>Blame your bugs on the owner.</li>
-        <li>If you cannot blame your bugs on the owner try other developers.</li>
-        <li>People will never notice your efforts.</li>
-        <li>Pretend something is impossible if you do not want to program it.</li>
-        <li>Program things like you want them. You do not care about others.</li>
-        <li>You have no idea what the user wants.</li>
-    </ol>
-    <h3>Rules for Builders</h3>
-    <ol>
-        <li>Nobody is allowed to touch your buildings. You are the best.</li>
-        <li>If you haven't got any motivation to build play another game.</li>
-        <li>If a Snuvi developer needs buildings for quests pretend to be AFK.</li>
-        <li>People will notice your efforts but claim they could do it better.</li>
-        <li>Use spruce or dark oak wood.</li>
-    </ol>
-    <h3>Rules for VIPs</h3>
-    <ol>
-        <li>You seem to be a very special snowflake. Maybe you are just a girl and the team likes you.</li>
-        <li>Users hate ya cause they aint ya.</li>
-        <li>Show off with your real life connections to the staff.</li>
-    </ol>
-    <h3>Rules for Users</h3>
-    <ol>
-        <li>Never mess with Snuvi developers. They are OP.</li>
-        <li>First rule about permissions don't talk about permissions.</li>
-        <li>Wear a girl skin to get presents.</li>
-        <li>Wear a girl skin to get attention from desperate boys.</li>
-        <li>Be a girl or pretend to. People will be nicer to you.</li>
-        <li>Ask before you think.</li>
-        <li>Ask for an admin on first join. In general ask for an admin.</li>
-        <li>Never appreciate what a developer has done.</li>
-        <li>Never say things like great server to anybody else than the admins. Only admins work on the server.</li>
-        <li>Blame your wrong usage of things on the developers.</li>
-        <li>Never see the problem in yourself. Feel free to say things like stupid server.</li>
-        <li>Try breaking blocks on your first join to show dominance.</li>
-        <li>Wear a stupid skin on your first join to make a good first impression.</li>
-        <li>Give yourself a name containing HD, LP or something else. This way everybody knows you are a great YouTuber.</li>
-        <li>Ask things at least twice. Pretend on having not seen the first answer.</li>
-        <li>Tell everybody your microphone is broken to get rid of others who want to voice chat with you.</li>
-        <li>Try <span class="text-monospace font-italic">/op</span> on yourself at least once.</li>
-        <li>Ask when the next update is released right after an update.</li>
-        <li>If you don´t unterstand something spam the chat. Expect immediate answers.</li>
-	<li>"It doesn't work" is your only phrase when you tell developers about a bug you've found.</li>
-	<li>If you died and lost your stuff ask an admin for help.</li>
-    </ol>
-</div>

showtext.php

@@ -1,26 +0,0 @@
-<html>
-    <head>
-        <meta http-equiv="content-type" content="text/html; utf-8">
-        <link rel="stylesheet" type="text/css" href="style.css" />
-        <title>Mundus Crassus</title>
-        
-        <?php
-            header('Content-Type: text/html; charset=utf-8');
-        ?>
-    </head>
-            
-    <body>
-        <form action="showtext.php" method="get">
-            <?php
-                $text = $_GET["text"];
-                $text = str_replace("Ɛ", "{", $text);
-                $text = str_replace("Ƒ", "}", $text);
-                $text = str_replace("ƒ", "[", $text);
-                $text = str_replace("Ɠ", "]", $text);
-		$text = str_replace("Ɣ", "(", $text);
-		$text = str_replace("ƕ", ")", $text);
-		$text = str_replace("Ɩ", "'", $text);
-		echo $text;
-            ?>          
-    </body>
-</html>

snuvi_core.php

@@ -0,0 +1,11 @@
+<template id="main">
+	<div class="textwall-container" id="snuviscript">
+	<?php 
+		include "/home/minecraft/paper/scripts/docu_core.php";
+	?>
+	</div>
+	<script src="js/snuviscript.js"></script>
+	<link href="css/snuviscript.css" rel="stylesheet">
+</template>
+
+<?php include "base.php"; ?>

snuvi_minecraft.php

@@ -0,0 +1,11 @@
+<template id="main">
+	<div class="textwall-container" id="snuviscript">
+	<?php 
+		include "/home/minecraft/paper/scripts/docu_minecraft.php";
+	?>
+	</div>
+	<script src="js/snuviscript.js"></script>
+	<link href="css/snuviscript.css" rel="stylesheet">
+</template>
+
+<?php include "base.php"; ?>

story.php

@@ -1,38 +0,0 @@
-<div class="container mt-4">
-    <hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Quests</h2>
-            <p class="lead">
-                A variety of longer and shorter quests are waiting for you to be played.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/story_quests.jpg" alt="Story Quests">
-        </div>
-    </div>
-	<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Admont</h2>
-            <p class="lead">
-                Help the humans of Admont with their tasks and they will offer you varios skills.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/story.jpg" alt="Story Admont">
-        </div>
-    </div>
-	<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Shipwreck</h2>
-            <p class="lead">
-                Face difficult tasks to survive on a lonely island after a shipwreck.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/story_shipwreck.jpg" alt="Story Shipwreck">
-        </div>
-    </div>
-</div>

survival.php

@@ -1,221 +1,90 @@
-<div class="container mt-4">
-	<h1 class="featurette-heading">Basic</h1>
-	<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Homes</h2>
-            <p class="lead">
-                Create your own home points for faster teleports.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_homes_warps.jpg" alt="Survival Homes">
-        </div>
-    </div>
-	<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Quests</h2>
-            <p class="lead">
-                Help humans with their tasks and they will offer you varios skills.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_quests.jpg" alt="Survival Quests">
-        </div>
-    </div>
-	<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Ingame Money</h2>
-            <p class="lead">
-                Earn snuvis with trading, quests and minigames. Buy items, skills and plots with them.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_money.jpg" alt="Survival Currency">
-        </div>
-    </div>
-	<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Market</h2>
-            <p class="lead">
-                Trade with humans in a dynamic market where supply and demand adjust.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_markets.jpg" alt="Survival Market">
-        </div>
-    </div>
-	<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Plots</h2>
-            <p class="lead">
-                Create plots to protect your buildings from other players and creepers. Add your friends to the plot so they can build with you.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_plots.jpg" alt="Survival Plots">
-        </div>
-    </div>
-	<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Mobarena</h2>
-            <p class="lead">
-                Fight against strong mobs in an arena to get snuvis and gemstones.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_mobarena.jpg" alt="Survival Mobarena">
-        </div>
-    </div>
-	<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Skills</h2>
-            <p class="lead">
-                Use a variety of skills that will help you advance in the game.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_skills.jpg" alt="Survival Skills">
-        </div>
-    </div>
-	<hr class="featurette-divider"/>
-	<h1 class="featurette-heading">Extended</h1>
-	<hr class="featurette-divider"/>
-	<!--<hr class="featurette-divider"/>
-    <div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Adventures</h2>
-            <p class="lead">
-                Go on adventures to get rewards. Start without any items and fight your way back to spawn.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_adventure.jpg" alt="Survival Adventures">
-        </div>
-    </div>-->
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Teleporter</h2>
-            <p class="lead">
-                Build teleporters to create a teleport network and connect your city. This way you will get more players into your city.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_teleporter.jpg" alt="Survival Teleporter">
-        </div>
-    </div>
-	<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Casino</h2>
-            <p class="lead">
-                If you're feeling extra lucky today, gamble with the snuvis you earned to get richer (or poorer).<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_casino.jpg" alt="Survival Casino">
-        </div>
-    </div>
-	<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">ChestShops</h2>
-            <p class="lead">
-                Sell and buy items at ChestShops. You can even create your own ChestShops with /shop.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_chestshops.jpg" alt="Survival ChestShops">
-        </div>
-    </div>
-	<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Cities</h2>
-            <p class="lead">
-                Raise your plot to a city and sell subplots to other players to be the biggest city on server.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_cities.jpg" alt="Survival Cities">
-        </div>
-    </div>
-	<!--<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Advanced Enchantments</h2>
-            <p class="lead">
-                Experience a better feeling of enchantments on lectern.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_lectern.jpg" alt="Survival Lectern">
-        </div>
-    </div>-->
-	<!--<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Loom Cloths</h2>
-            <p class="lead">
-                Convert your wool to cloth to get cloth armor.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_loom.jpg" alt="Survival Loom">
-        </div>
-    </div>-->
-	<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Mail System</h2>
-            <p class="lead">
-                Send your friends a message (/mail) or items (/mailbox) while they are offline.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_mail_items.jpg" alt="Survival Mail">
-        </div>
-    </div>
-	<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Custom Items</h2>
-            <p class="lead">
-                Many items from our plugin will improve your gameplay.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_customitems.jpg" alt="Survival Moditems">
-        </div>
-    </div>
-	<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Gemstones</h2>
-            <p class="lead">
-                Upgrade your strength and armor by using gemstones at the jewlery smith.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_gemstones.jpg" alt="Survival Gemstones">
-        </div>
-    </div>
-	<hr class="featurette-divider"/>
-	<div class="row featurette">
-        <div class="col-lg-7 vertical-center">
-            <h2 class="featurette-heading">Selfmade</h2>
-            <p class="lead">
-                All features are selfcoded and selfbuilt. Thanks to our team we are doing a great work.<br>
-            </p>
-        </div>
-        <div class="col-lg-5">
-            <img class="img-fluid rounded" src="images/survival/survival_selfmade.jpg" alt="Survival Selfmade">
-        </div>
-    </div>
-</div>
+<template id="main">
+	<div class="textwall-container">
+		<div class="page-header">
+			<h2 class="page-header-content">Survival</h2>
+		</div>
+		
+		<div class="feature_containers">
+		
+			<div class="feature_container">
+				<h2 class="feature_heading">Homes</h2>
+				<img class="feature_image" src="images/survival/survival_homes_warps.jpg" alt="Survival Homes">
+				<p>Create your own home point.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Quests</h2>
+				<img class="feature_image" src="images/survival/survival_quests.jpg" alt="Survival Quests">
+				<p>Help humans with their tasks and they will offer you various skills.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Ingame Money</h2>
+				<img class="feature_image" src="images/survival/survival_money.jpg" alt="Survival Currency">
+				<p>Earn snuvis with trading, quests and minigames. Buy items, skills and plots with them.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Market</h2>
+				<img class="feature_image" src="images/survival/survival_markets.jpg" alt="Survival Market">
+				<p>Trade with humans in a dynamic market where supply and demand adjust.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Plots</h2>
+				<img class="feature_image" src="images/survival/survival_plots.jpg" alt="Survival Plots">
+				<p>Create plots to protect your buildings from other players and creepers. Add your friends to the plot so they can build with you.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Mobarena</h2>
+				<img class="feature_image" src="images/survival/survival_mobarena.jpg" alt="Survival Mobarena">
+				<p>Fight against strong mobs in an arena to get snuvis and gemstones.<br></p>
+			</div>
+			
+			<div class="feature_container">
+				<h2 class="feature_heading">Skills</h2>
+				<img class="feature_image" src="images/survival/survival_skills.jpg" alt="Survival Skills">
+				<p>Use a variety of skills that will help you advance in the game.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Teleporter</h2>
+				<img class="feature_image" src="images/survival/survival_teleporter.jpg" alt="Survival Teleporter">
+				<p>Build teleporters to and connect them to create a network.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Casino</h2>
+				<img class="feature_image" src="images/survival/survival_casino.jpg" alt="Survival Casino">
+				<p>If you're feeling extra lucky today, gamble with the snuvis you earned to get poorer.<br></p>
+			</div>
+			
+			<div class="feature_container">
+				<h2 class="feature_heading">ChestShops</h2>
+				<img class="feature_image" src="images/survival/survival_chestshops.jpg" alt="Survival ChestShops">
+				<p>Sell and buy items at ChestShops. You can even create your own ChestShops with /shop.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Cities</h2>
+				<img class="feature_image" src="images/survival/survival_cities.jpg" alt="Survival Cities">
+				<p>Raise your plot to a city and sell subplots to other players to be the biggest city on server.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Mail System</h2>
+				<img class="feature_image" src="images/survival/survival_mail_items.jpg" alt="Survival Mail">
+				<p>Send your friends a message (/mail) or items (/mailbox) while they are offline.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Custom Items</h2>
+				<img class="feature_image" src="images/survival/survival_customitems.jpg" alt="Survival Moditems">
+				<p>Many items from our plugin will improve your gameplay.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Gemstones</h2>
+				<img class="feature_image" src="images/survival/survival_gemstones.jpg" alt="Survival Gemstones">
+				<p>Upgrade your strength and armor by using gemstones at the jewlery smith. Get gemstones in the mobarena and by doing challenges.<br></p>
+			</div>
+			<div class="feature_container">
+				<h2 class="feature_heading">Selfmade</h2>
+				<img class="feature_image" src="images/survival/survival_selfmade.jpg" alt="Survival Selfmade">
+				<p>A lot features are selfcoded and selfbuilt. Thanks to our team we are doing a great work.<br></p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<?php include "base.php"; ?>

team.php

@@ -1,12 +1,10 @@
 <?php
 
 $teamData = [
-    ["name" => "Marvin", "ingame" => "marvinius", "text" => "Owner, Developer"],
-    ["name" => "Kajetan", "ingame" => "kajetanjohannes", "text" => "Admin, Developer"],
-    ["name" => "Lucas", "ingame" => "MentorMentos", "text" => "Moderator, Influencer"],
-    ["name" => "Jan", "ingame" => "SirTerence7", "text" => "Moderator, Builder, Developer"],
-	["name" => "Mareen", "ingame" => "Mareeeen", "text" => "Moderator, Builder"],
-	["name" => "Piet", "ingame" => "fireeagle013", "text" => "Builder, Developer"]
+    ["name" => "Marvin", 	"ingame" => "marvinius", 		"text" => "Owner, Developer"],
+    ["name" => "Jan", 		"ingame" => "SirTerence7", 		"text" => "Administrator, Developer, Builder"],
+	["name" => "Mareen", 	"ingame" => "Mareeeen", 		"text" => "Administrator, Builder"],
+	["name" => "Lucas", 	"ingame" => "MentorMentos", 	"text" => "Moderator"]
 ];
 
-include "team.view.php";
+include "views/team.view.php";

team.view.php

@@ -1,14 +0,0 @@
-<div class="container mt-3">
-    <h1 class="text-center">Our team</h1>
-    <hr class="featurette-divide mt-n1"/>
-    <div class="row">
-        <?php foreach($teamData as $data) : ?>
-            <div class="col-md-6 col-lg-4 text-center">
-                <img src="images/team/<?= $data["ingame"] ?>.png" width="200" height="270" alt="<?= $data["name"] ?>">
-                <h3><?= $data["name"] ?></h3>
-                <h6 class="text-muted"><?= $data["ingame"] ?></h6>
-                <p><?= $data["text"] ?></p>
-            </div>
-        <?php endforeach; ?>
-    </div>
-</div>

thanks.php

@@ -1,9 +1,16 @@
-<div class="container mt-4">
-    <h4>
-        Donation completed!
-    </h4>
-    <p>
-		Thank you for your donation.<br>
-		Go and tell the team, so they can give you the <b>Sponsor</b> rank.
-    </p>
-</div>
+<template id="main">
+	<div class="textwall-container">
+		<div class="page-header">
+			<h2 class="page-header-content">Thanks</h2>
+		</div>
+		<h4>
+			Donation completed!
+		</h4>
+		<p>
+			Thank you for your donation.<br>
+			Go and tell the team, so they can give you the <b>Sponsor</b> rank.
+		</p>
+	</div>
+</template>
+
+<?php include "base.php"; ?>

views/base.view.php

@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+        <title>Mundus Crassus</title>
+        <link href="css/style.css" rel="stylesheet">
+    </head>
+    <noscript>
+      <p>This website requires JavaScript. Activate JavaScript in your browser.</p>
+    </noscript>
+    
+    <body tabIndex=0>
+        <header>
+            <nav class="navbar navbar-expand-md">
+				<div style="display:flex; align-items: center;">
+					<a style="text-decoration:none;" href="/">
+						<div>
+							<img class="navbar-logo" src="images/mundus_logo.png" alt="logo">
+						</div>
+					</a>
+					<a style="text-decoration:none;" href="/">
+						<span class="navbar-title">Mundus Crassus</span>
+					</a>
+				</div>
+                <input type="checkbox" id="check">
+                <img class="menu-icon" src="images/menu_icon.png" alt="menu_icon" onclick="document.getElementById('check').checked = !document.getElementById('check').checked;">
+                <ul class="navbar-nav">
+                    <?php foreach($navData as $name => $data) : ?>
+                        <?php if($data["show"]) : ?>
+                            <?php if($data["dropdown"] != "") : ?>
+                                <li class="nav-item dropdown nav-list-item" tabindex="0">
+                                    <div class="nav-link-container">
+                                        <div>
+                                            <p class="nav-link"><?= $data["name"] ?></p>
+                                        </div>
+                                        <div class="dropdown-helper">
+                                            <p>+</p>
+                                        </div>
+                                    </div>
+                                    <ul class="dropdown-menu">
+                                    <?php foreach(${$data["dropdown"]} as $subname => $subdata) : ?>
+                                        <li class="nav-list-item"><a class="dropdown-item" href='<?= $subname ?>'><img src="<?= $subdata["icon"] ?>">&nbsp;<?= $subdata["name"] ?></a></li>
+                                    <?php endforeach; ?>
+                                    </ul>
+                                </li>
+                            <?php else: ?>
+                                <li class="nav-item nav-list-item">
+                                    <a class="nav-link" href='<?= $name ?>'><?= $data["name"] ?></a>
+                                </li>
+                            <?php endif; ?>
+                        <?php endif; ?>
+                    <?php endforeach; ?>
+                </ul>
+            </nav>
+        </header>
+        
+        <main role="main">
+            <script src="js/main.js"></script>
+        </main>
+        
+        <footer>
+            <div class="footer-bar">
+                <p>
+                    Made by Marvin &middot; 
+                    <a href="contact">Contact</a> &middot; 
+                    <a href="policy">Privacy Policy</a>
+                </p>
+            </div>
+        </footer>
+        
+    </body>
+</html>

views/team.view.php

@@ -0,0 +1,20 @@
+<template id="main">
+	<div class="textwall-container">
+		<div class="page-header">
+			<h2 class="page-header-content">Our team</h2>
+		</div>
+		
+		<div class="row">
+			<?php foreach($teamData as $data) : ?>
+				<div class="team-container text-center">
+					<img src="images/team/<?= $data["ingame"] ?>.png" width="200" height="270" alt="<?= $data["name"] ?>">
+					<h3><?= $data["name"] ?></h3>
+					<h6><?= $data["ingame"] ?></h6>
+					<p><?= $data["text"] ?></p>
+				</div>
+			<?php endforeach; ?>
+		</div>
+	</div>
+</template>
+
+<?php include "base.php"; ?>