Made 404 page, minecraft server page, and whitelist page.
This commit is contained in:
parent
39f2d87b3f
commit
038968ea28
17 changed files with 518 additions and 198 deletions
26
404.html
Normal file
26
404.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>404: Not Found | Halfheart.net</title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="header.js" defer></script>
|
||||
<site-header></site-header>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Error 404: Page not found</h1>
|
||||
<p>More like left ventricle not found, amirite?<br><br>For more information visit: <a
|
||||
href="https://en.wikipedia.org/wiki/Hypoplastic_left_heart_syndrome">https://en.wikipedia.org/wiki/Hypoplastic_left_heart_syndrome</a>
|
||||
</p>
|
||||
</body>
|
||||
<site-footer></site-footer>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>About Me</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="header.js" defer></script>
|
||||
<site-header></site-header>
|
||||
</head>
|
||||
<body>
|
||||
<div class="row" style="background-color: #454a77; border-radius: 128px; padding-top: 10px; padding-bottom: 10px;">
|
||||
<div class="column" style="flex: auto;">
|
||||
<img src="media/bonard.jpg" alt="Bonard" style="max-width: 256px; max-height: 256px; margin-left: 0%; border: 2px solid #ff2a2a66; border-radius: 50%;" width="100%" height="100%">
|
||||
</div>
|
||||
<div class="column">
|
||||
<h1 style="text-align: left; margin-right: 15%;">About Me</h1>
|
||||
<p style="margin-right: 10%;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis excepturi voluptatem quia? Ipsum sequi incidunt laudantium fuga, impedit exercitationem nobis consequuntur. Aut architecto ipsum explicabo voluptate est quas omnis maiores?</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
21
header.js
21
header.js
|
|
@ -10,8 +10,27 @@ class SiteHeader extends HTMLElement {
|
|||
}
|
||||
customElements.define('site-header', SiteHeader);
|
||||
|
||||
class SiteFooter extends HTMLElement {
|
||||
connectedCallback() {
|
||||
fetch("site-footer.html")
|
||||
.then(response => response.text())
|
||||
.then(html => {
|
||||
this.innerHTML = html;
|
||||
})
|
||||
}
|
||||
}
|
||||
customElements.define('site-footer', SiteFooter)
|
||||
|
||||
function detectPage() {
|
||||
var pageId = document.title.toLowerCase().replace(/ /g, "-");
|
||||
var path = window.location.pathname;
|
||||
var page = path.split("/").pop();
|
||||
|
||||
if (page === "" || page === "index.html") {
|
||||
var pageId = "home";
|
||||
} else {
|
||||
var pageId = page.replace(".html", "");
|
||||
}
|
||||
|
||||
var element = document.getElementById(pageId);
|
||||
if (element) {
|
||||
element.className = "active";
|
||||
|
|
|
|||
89
index.html
89
index.html
|
|
@ -1,47 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Home</title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="header.js" defer></script>
|
||||
<style>
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
}
|
||||
.column {
|
||||
flex: 50%;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
<site-header></site-header>
|
||||
</head>
|
||||
<body>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h1>Welcome to Halfheart.net!</h1>
|
||||
<p style="text-align: center;">Welcome to Halfheart.net! This website is home to the Halfheart minecraft servers, my personal projects, and really anything else I want. Have fun.</p>
|
||||
<br>
|
||||
<p style="text-align: center;">This page is actively being worked on! Most things are probobly broken or incomplete. Don't tell me that they are, I know.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<iframe width="560" height="315" style="margin-left: auto; margin-right: auto;" src="https://www.youtube.com/embed/BuKft9LpL_0?si=ZBioDC66lEvgbuIg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Home | Halfheart.net</title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="header.js" defer></script>
|
||||
<site-header></site-header>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="row"
|
||||
style="background-color: #4b4b5a; border-radius: 64px; padding: 20px; max-width: 1000px; margin: 0 auto;">
|
||||
<div class="column" style="flex: 0 0 auto; display: flex; align-items: center; justify-content: center;">
|
||||
<img src="media/bonard.jpg" alt="Bonard" style="max-width: 256px; max-height: 256px; border-radius: 50%;"
|
||||
width="100%" height="100%">
|
||||
</div>
|
||||
<br>
|
||||
<div class="column">
|
||||
<h1>Welcome to Halfheart.net!</h1>
|
||||
<p>Welcome to Halfheart.net! I am Raktbastr; I make a lot of random coding projects and do a lot of assorted
|
||||
things. This website serves as the home for them, as well as my minecraft servers which are mostly open
|
||||
to the
|
||||
public. For access go to the <a href="minecraft-servers.html">minecraft server page</a>. Have fun!</p>
|
||||
<h2>Contact</h2>
|
||||
<p>Feel free to contact me!<br><br>Discord: raktbastr101<br>Email: raktbastr@halfheart.net</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="height: 315px; justify-content: center;">
|
||||
<div class="column" style="width: 100%; max-width: 560px; height: 100%;">
|
||||
<iframe style="width: 100%; aspect-ratio: 16 / 9; border: 5px solid red;"
|
||||
src="https://www.youtube.com/embed/BuKft9LpL_0?si=ZBioDC66lEvgbuIg" title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<site-footer></site-footer>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Minecraft Servers</title>
|
||||
<script src="header.js" defer></script>
|
||||
<site-header></site-header>
|
||||
<style>
|
||||
body {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
background: url(media/mc\ header.png) no-repeat top center;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
Mineraft
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 MiB |
BIN
media/creative.png
Normal file
BIN
media/creative.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
BIN
media/hub.png
Normal file
BIN
media/hub.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 4.3 MiB After Width: | Height: | Size: 4.3 MiB |
70
minecraft-servers.html
Normal file
70
minecraft-servers.html
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Minecraft Servers | Halfheart.net</title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="header.js" defer></script>
|
||||
<site-header></site-header>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Minecraft Servers</h1>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<p>I run a few minecraft servers, mostly for me and my friends, but the public is allowed to join. Rules for
|
||||
each server are below along with join methods for java & bedrock. Each server has the ViaVersion plugin
|
||||
meaning that most recent versions, whether they be ahead or behind the server version, should be able to
|
||||
join.<br><br><b>You must be whitelisted in order to play! Click <a href="whitelist.html">here</a> to get
|
||||
whitelisted</b></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h2>Survival (26.1.2)</h2>
|
||||
<img src="media/survival.png" alt="New Waukesha nighttime view">
|
||||
<p>A vanilla survival server with a world over a year old!</p>
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="column">
|
||||
<h3>Java Edition</h3>
|
||||
<p>IP: survival.halfheart.net</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h3>Bedrock Edition</h3>
|
||||
<p>IP: halfheart.net<br>Port: 19132</p>
|
||||
<p>You will join the hub world instead of survival. Go through the survival portal or type
|
||||
<code>/server survival</code> in chat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2>Creative (26.1.2)</h2>
|
||||
<img src="media/creative.png" alt="Castle, by 1111dbc">
|
||||
<p>A mostly vanilla creative server server with worldedit enabled. World is somewhat new and empty.</p>
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="column">
|
||||
<h3>Java Edition</h3>
|
||||
<p>IP: creative.halfheart.net</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h3>Bedrock Edition</h3>
|
||||
<p>IP: halfheart.net<br>Port: 19132</p>
|
||||
<p>You will join the hub world instead of creative. Go through the creative portal or type
|
||||
<code>/server creative</code> in chat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<site-footer></site-footer>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,14 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Projects</title>
|
||||
<script src="header.js" defer></script>
|
||||
<site-header></site-header>
|
||||
</head>
|
||||
<body>
|
||||
Projects
|
||||
</body>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Projects | Halfheart.net</title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="header.js" defer></script>
|
||||
<site-header></site-header>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Projects</h1>
|
||||
<p></p>
|
||||
</body>
|
||||
<site-footer></site-footer>
|
||||
|
||||
</html>
|
||||
27
site-footer.html
Normal file
27
site-footer.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.footer h4 {
|
||||
font-family: "Audiowide", serif;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
color: red;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div class="footer">
|
||||
<br>
|
||||
<h4>This site is unfinished and many things are probobly broken. I already know, but please tell me to fix it.</h4>
|
||||
</div>
|
||||
|
|
@ -1,19 +1,21 @@
|
|||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<style>
|
||||
@import url(https://fonts.googleapis.com/css?family=Audiowide);
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary-glow: #ff2a2a;
|
||||
--active-bg: #aa0404;
|
||||
--header-height: 60px;
|
||||
--primary-glow: #ff2a2a;
|
||||
--active-bg: #aa0404;
|
||||
--header-height: 60px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
|
|
@ -132,6 +134,19 @@
|
|||
height: var(--header-height);
|
||||
}
|
||||
|
||||
.logo-capsule {
|
||||
width: auto;
|
||||
max-width: calc(100% - 80px);
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.logo-capsule img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: var(--header-height);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
@ -168,26 +183,26 @@
|
|||
}
|
||||
|
||||
.topnav.responsive a:not(.icon):nth-child(1) {
|
||||
margin-top: calc(var(--header-height) + 15px);
|
||||
margin-top: calc(var(--header-height) + 15px);
|
||||
}
|
||||
|
||||
.topnav.responsive a:not(.icon)::after {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topnav a.icon {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: var(--header-height);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
color: #f2f2f2;
|
||||
padding: 0;
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: var(--header-height);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
color: #f2f2f2;
|
||||
padding: 0;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.topnav.responsive a.icon {
|
||||
|
|
@ -198,22 +213,17 @@
|
|||
</style>
|
||||
<br>
|
||||
<div class="header-container" id="headerContainer">
|
||||
|
||||
<div class="logo-capsule">
|
||||
<a href="index.html" id="logo">
|
||||
<img src="logo.png" alt="Half Heart Logo">
|
||||
<img src="logo.png" alt="Half Heart Logo" style="border: 0px solid rgba(255, 255, 255, 0);">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="topnav" id="myTopnav">
|
||||
<a href="index.html" id="home" class="inactive">Home</a>
|
||||
<a href="about-me.html" id="about-me" class="inactive">About Me</a>
|
||||
<a href="projects.html" id="projects" class="inactive">Projects</a>
|
||||
<a href="mc-servers.html" id="minecraft-servers" class="inactive">Minecraft Server</a>
|
||||
<a href="minecraft-servers.html" id="minecraft-servers" class="inactive">Minecraft Server</a>
|
||||
<a href="javascript:void(0);" class="icon" onclick="toggleMobileMenu()">
|
||||
<i class="fa fa-bars"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<br>
|
||||
166
style.css
166
style.css
|
|
@ -1,34 +1,158 @@
|
|||
@import url(https://fonts.googleapis.com/css?family=Audiowide);
|
||||
|
||||
h1 {
|
||||
font-family: "Audiowide", serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: red;
|
||||
text-align: center;
|
||||
font-family: "Audiowide", serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: red;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Audiowide", serif;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
color: red;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: "Audiowide", serif;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
color: red;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: normal;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: normal;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
margin: 0;
|
||||
background-color: #1e1d20;
|
||||
}
|
||||
|
||||
site-footer {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 50%;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 5px solid red;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.form-container form {
|
||||
background-color: #4b4b5a;
|
||||
padding: 30px;
|
||||
border-radius: 24px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
}
|
||||
body {
|
||||
height: 100vh;
|
||||
background-color: #1e1d20;
|
||||
|
||||
.form-container label {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
.row {
|
||||
|
||||
.form-container input[type="text"] {
|
||||
background-color: #1e1d20;
|
||||
border: 2px solid #ff2a2a66;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
outline: none;
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.form-container input[type="text"]:focus {
|
||||
border-color: #ff2a2a;
|
||||
box-shadow: 0 0 8px rgba(255, 42, 42, 0.6);
|
||||
}
|
||||
|
||||
.form-container .radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.form-container .radio-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
.column {
|
||||
flex: 50%;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
.form-container input[type="submit"] {
|
||||
background-color: rgb(167, 0, 0);
|
||||
color: white;
|
||||
font-family: "Audiowide", serif;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.1s ease;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
|
||||
.form-container input[type="submit"]:hover {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 100%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
22
template.html
Normal file
22
template.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Template Page | Halfheart.net</title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="header.js" defer></script>
|
||||
<site-header></site-header>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
<site-footer></site-footer>
|
||||
|
||||
</html>
|
||||
57
whitelist.html
Normal file
57
whitelist.html
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Whitelist User | Halfheart.net</title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="header.js" defer></script>
|
||||
<site-header></site-header>
|
||||
</head>
|
||||
<script>
|
||||
function whitelistUser() {
|
||||
var username = document.getElementById(username);
|
||||
var edition;
|
||||
if (document.getElementById(java).checked) {
|
||||
edition = java;
|
||||
} else {
|
||||
edition = bedrock;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<h1>Whitelist User</h1>
|
||||
<p>Enter your username and Minecraft version below to be added to the server whitelist</p>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<div class="form-container">
|
||||
<form onsubmit="whitelistUser(event)">
|
||||
<label for="username">Username or Gamertag</label>
|
||||
<input type="text" name="username" id="username" placeholder="Enter username..." required>
|
||||
|
||||
<div class="radio-group">
|
||||
<label>
|
||||
<input type="radio" id="java" name="job" value="java">
|
||||
Java Edition
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" id="bedrock" name="job" value="bedrock">
|
||||
Bedrock Edition
|
||||
</label>
|
||||
</div>
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<site-footer></site-footer>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue