139 lines
5.4 KiB
HTML
139 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org" lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Staff Application</title>
|
|
<style>
|
|
@font-face {
|
|
font-family: 'minecraft-title';
|
|
src: url('https://beta.alttd.com/public/fonts/minecraft-title.ttf') format('truetype'),
|
|
url('https://beta.alttd.com/public/fonts/minecraft-title.eot') format('embedded-opentype'),
|
|
url('https://beta.alttd.com/public/fonts/minecraft-title.svg') format('svg'),
|
|
url('https://beta.alttd.com/public/fonts/minecraft-title.woff') format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'minecraft-text';
|
|
src: url('https://beta.alttd.com/public/fonts/minecraft-text.ttf') format('truetype'),
|
|
url('https://beta.alttd.com/public/fonts/minecraft-text.eot') format('embedded-opentype'),
|
|
url('https://beta.alttd.com/public/fonts/minecraft-text.svg') format('svg'),
|
|
url('https://beta.alttd.com/public/fonts/minecraft-text.woff') format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'opensans';
|
|
src: url('https://beta.alttd.com/public/fonts/opensans.ttf') format('truetype'),
|
|
url('https://beta.alttd.com/public/fonts/opensans.eot') format('embedded-opentype'),
|
|
url('https://beta.alttd.com/public/fonts/opensans.svg') format('svg'),
|
|
url('https://beta.alttd.com/public/fonts/opensans.woff') format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'opensans-bold';
|
|
src: url('https://beta.alttd.com/public/fonts/opensans-bold.ttf') format('truetype'),
|
|
url('https://beta.alttd.com/public/fonts/opensans-bold.eot') format('embedded-opentype'),
|
|
url('https://beta.alttd.com/public/fonts/opensans-bold.svg') format('svg'),
|
|
url('https://beta.alttd.com/public/fonts/opensans-bold.woff') format('woff');
|
|
}
|
|
|
|
body {
|
|
font-family: 'minecraft-title', sans-serif;
|
|
}
|
|
|
|
.columnSection {
|
|
width: 80%;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
}
|
|
|
|
.columnContainer {
|
|
flex: 1 1 200px;
|
|
min-width: 200px;
|
|
box-sizing: border-box;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
margin: auto;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
li {
|
|
padding-bottom: 7px;
|
|
}
|
|
|
|
li, p {
|
|
font-family: 'opensans', sans-serif;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
@media (max-width: 1150px) {
|
|
.columnContainer, .columnSection {
|
|
width: 90%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 690px) {
|
|
.columnContainer {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<img id="header-img" src="https://beta.alttd.com/public/img/logos/logo.png" alt="The Altitude Minecraft Server" height="159" width="275">
|
|
<h1 style="text-align: center;" th:text="'Staff application by ' + ${application.discordUsername}">Staff application</h1>
|
|
|
|
<section class="columnSection">
|
|
<div class="columnContainer">
|
|
<div>
|
|
<h2>Applicant</h2>
|
|
<ul>
|
|
<li><strong>Username:</strong> <span th:text="${username}">uuid</span></li>
|
|
<li><strong>Email:</strong> <span th:text="${application.email}">email</span></li>
|
|
<li><strong>Discord:</strong> <span th:text="${application.discordUsername}">discord</span></li>
|
|
<li><strong>Age:</strong> <span th:text="${application.age}">age</span></li>
|
|
<li><strong>Pronouns:</strong> <span th:text="${application.pronouns}">pronouns</span></li>
|
|
<li><strong>Join date:</strong> <span th:text="${application.joinDate}">date</span></li>
|
|
<li><strong>Submitted at:</strong> <span th:text="${createdAt}">date</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="columnContainer">
|
|
<div>
|
|
<h2>Availability</h2>
|
|
<ul>
|
|
<li><strong>Days:</strong> <span th:text="${application.availableDays}">days</span></li>
|
|
<li><strong>Times:</strong> <span th:text="${application.availableTimes}">times</span></li>
|
|
<li><strong>Weekly playtime:</strong> <span th:text="${application.weeklyPlaytime}">0</span> hours</li>
|
|
</ul>
|
|
|
|
<h2>Experience</h2>
|
|
<p><strong>Previous:</strong><br><span th:text="${application.previousExperience}">previous experience</span></p>
|
|
<p><strong>Plugins:</strong><br><span th:text="${application.pluginExperience}">plugin experience</span></p>
|
|
<p><strong>Expectations:</strong><br><span th:text="${application.moderatorExpectations}">moderator expectations</span></p>
|
|
|
|
<div th:if="${application.additionalInfo} != null and ${application.additionalInfo} != ''">
|
|
<h2>Additional info</h2>
|
|
<p th:text="${application.additionalInfo}">additional info</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|