ip-svc/templates/index.html

85 lines
2.0 KiB
HTML
Raw Normal View History

2024-06-02 20:09:02 +00:00
<!DOCTYPE html>
<html lang="en">
2024-06-03 12:28:04 +00:00
<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;
2024-06-03 12:31:30 +00:00
padding: 0 20px 0 20px;
2024-06-03 12:28:04 +00:00
}
}
@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>
2024-06-03 11:53:42 +00:00
<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();
2024-06-03 12:15:07 +00:00
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)
}
2024-06-03 11:53:42 +00:00
console.log(data)
}
getIp();
</script>
2024-06-03 12:28:04 +00:00
</body>
2024-06-02 20:09:02 +00:00
</html>