MattJeanes/JoinServer.html

## JoinServer.html

<!DOCTYPE html>
<html>
    <head>
        <title>Join server</title>
        <style>
            body {
                font-family: sans-serif;
                text-align: center;
            }
            .center-screen {
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                min-height: calc(100vh - 1rem);
            }
            a {
                color: #000000;
                font-size: 2em;
            }
            @media (prefers-color-scheme: dark) {
                body {
                    background-color: #333333;
                }
                a {
                    color: #ffffff;
                }
            }
        </style>
    </head>
    <body>
        <div class="center-screen" id="link"></div>
        <script>
            async function generateLink() {
                // Get the IP address of the current website with Cloudflares 1.1.1.1 DNS-over-HTTP
                const ipAddress = await fetch(`https://cloudflare-dns.com/dns-query?name=${window.location.hostname}&type=A`, {
                    headers: {
                        accept: "application/dns-json"
                    }
                })
                    .then(response => response.json())
                    .then(data => data.Answer[data.Answer.length-1].data);

                // Server password
                const password = "xxxxxx";

                // Form the Steam connect link with the IP address
                const steamLink = `steam://connect/${ipAddress}/${password}`;

                // Create a clickable link element with the Steam connect link
                const linkElement = document.createElement("a");
                linkElement.href = steamLink;
                linkElement.textContent = "Join server";

                // Add the link element to the page
                const linkContainer = document.getElementById("link");
                linkContainer.innerHTML = "";
                linkContainer.appendChild(linkElement);
            }

            generateLink();
        </script>
    </body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<title>Join server</title>
	<style>
	body {
	font-family: sans-serif;
	text-align: center;
	}
	.center-screen {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: calc(100vh - 1rem);
	}
	a {
	color: #000000;
	font-size: 2em;
	}
	@media (prefers-color-scheme: dark) {
	body {
	background-color: #333333;
	}
	a {
	color: #ffffff;
	}
	}
	</style>
	</head>
	<body>
	<div class="center-screen" id="link"></div>
	<script>
	async function generateLink() {
	// Get the IP address of the current website with Cloudflares 1.1.1.1 DNS-over-HTTP
	const ipAddress = await fetch(`https://cloudflare-dns.com/dns-query?name=${window.location.hostname}&type=A`, {
	headers: {
	accept: "application/dns-json"
	}
	})
	.then(response => response.json())
	.then(data => data.Answer[data.Answer.length-1].data);

	// Server password
	const password = "xxxxxx";

	// Form the Steam connect link with the IP address
	const steamLink = `steam://connect/${ipAddress}/${password}`;

	// Create a clickable link element with the Steam connect link
	const linkElement = document.createElement("a");
	linkElement.href = steamLink;
	linkElement.textContent = "Join server";

	// Add the link element to the page
	const linkContainer = document.getElementById("link");
	linkContainer.innerHTML = "";
	linkContainer.appendChild(linkElement);
	}

	generateLink();
	</script>
	</body>
	</html>