Mans Ziesel
531ba152f7
All checks were successful
Build docker container / Build image (push) Successful in 29s
85 lines
2.0 KiB
HTML
85 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>My IP</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
font-size: 2rem;
|
|
color: #333;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
}
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
max-width: 90%;
|
|
width: 100%;
|
|
}
|
|
li {
|
|
padding: 15px 0px;
|
|
border-bottom: 1px solid #ddd;
|
|
word-wrap: break-word;
|
|
}
|
|
li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.noselect {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
color: #555;
|
|
}
|
|
b {
|
|
color: #000;
|
|
}
|
|
@media (min-width: 600px) {
|
|
body {
|
|
font-size: 3rem;
|
|
padding: 0 20px 0 20px;
|
|
}
|
|
}
|
|
@media (min-width: 900px) {
|
|
body {
|
|
font-size: 4rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<ul id="ips">
|
|
<li>
|
|
<span class="noselect">{{ .Type }}: </span><b>{{ .Address }}</b>
|
|
</li>
|
|
</ul>
|
|
<script>
|
|
async function getIp() {
|
|
const isIpv4 = "{{ .Type }}" == "IPv4";
|
|
let requestUrl = isIpv4 ? "https://ip6.mziesel.nl/json" : "https://ip4.mziesel.nl/json";
|
|
|
|
const response = await fetch(requestUrl);
|
|
const data = await response.json();
|
|
|
|
const ul = document.getElementById("ips")
|
|
|
|
if (data.address) {
|
|
let child = document.createElement("li")
|
|
child.innerHTML = `<span class="noselect">${data.type}: </span><b>${data.address}</b>`
|
|
|
|
ul.appendChild(child)
|
|
}
|
|
|
|
console.log(data)
|
|
}
|
|
getIp();
|
|
</script>
|
|
</body>
|
|
</html>
|