Skip to content

Commit 537e2e5

Browse files
CodingTarikCodingTarik
committed
update page
1 parent 159b8ec commit 537e2e5

File tree

1 file changed

+71
-51
lines changed

1 file changed

+71
-51
lines changed

‎_posts/fun/2025-05-03-whatismyip.md

Lines changed: 71 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -11,55 +11,75 @@ categories:
1111
math: false
1212
---
1313

14-
<!DOCTYPE html>
15-
<html lang="en">
16-
<head>
17-
<meta charset="UTF-8">
18-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
19-
<title>{{ page.title }}</title>
20-
<script>
21-
async function fetchIP() {
22-
try {
23-
let ipv4 = await fetch("https://api64.ipify.org?format=json").then(res => res.json());
24-
let ipv6 = await fetch("https://api6.ipify.org?format=json").then(res => res.json());
25-
document.getElementById("ipv4").textContent = ipv4.ip;
26-
document.getElementById("ipv6").textContent = ipv6.ip;
27-
} catch (error) {
28-
console.error("Error fetching IP:", error);
29-
document.getElementById("ipv4").textContent = "Error fetching IPv4";
30-
document.getElementById("ipv6").textContent = "Error fetching IPv6";
31-
}
32-
}
33-
</script>
34-
<style>
35-
body {
36-
font-family: Arial, sans-serif;
37-
text-align: center;
38-
background: linear-gradient(135deg, #667eea, #764ba2);
39-
color: white;
40-
padding: 20px;
41-
}
42-
.container {
43-
margin-top: 50px;
44-
background: rgba(255, 255, 255, 0.2);
45-
padding: 20px;
46-
border-radius: 10px;
47-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
48-
display: inline-block;
49-
}
50-
h1 {
51-
font-size: 2em;
52-
}
53-
p {
54-
font-size: 1.5em;
55-
}
56-
</style>
57-
</head>
58-
<body onload="fetchIP()">
59-
<div class="container">
60-
<h1>Your IP Addresses</h1>
61-
<p><strong>IPv4:</strong> <span id="ipv4">Loading...</span></p>
62-
<p><strong>IPv6:</strong> <span id="ipv6">Loading...</span></p>
14+
<div class="ip-container">
15+
<h1>Your IP Addresses</h1>
16+
<div class="ip-box">
17+
<p><strong>IPv4:</strong> <span id="ipv4" class="fade-in">Loading...</span></p>
6318
</div>
64-
</body>
65-
</html>
19+
<div class="ip-box">
20+
<p><strong>IPv6:</strong> <span id="ipv6" class="fade-in">Loading...</span></p>
21+
</div>
22+
</div>
23+
24+
<script>
25+
async function fetchIP() {
26+
try {
27+
let ipv4 = await fetch("https://api64.ipify.org?format=json").then(res => res.json());
28+
let ipv6 = await fetch("https://api6.ipify.org?format=json").then(res => res.json());
29+
30+
let ipv4Elem = document.getElementById("ipv4");
31+
let ipv6Elem = document.getElementById("ipv6");
32+
33+
ipv4Elem.textContent = ipv4.ip;
34+
ipv6Elem.textContent = ipv6.ip;
35+
36+
ipv4Elem.classList.add("show");
37+
ipv6Elem.classList.add("show");
38+
} catch (error) {
39+
document.getElementById("ipv4").textContent = "Error fetching IPv4";
40+
document.getElementById("ipv6").textContent = "Error fetching IPv6";
41+
}
42+
}
43+
fetchIP();
44+
</script>
45+
46+
<style>
47+
.ip-container {
48+
text-align: center;
49+
background: linear-gradient(135deg, #667eea, #764ba2);
50+
padding: 30px;
51+
border-radius: 15px;
52+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
53+
display: inline-block;
54+
width: 100%;
55+
max-width: 600px;
56+
margin: auto;
57+
color: white;
58+
font-family: 'Arial', sans-serif;
59+
}
60+
61+
.ip-box {
62+
background: rgba(255, 255, 255, 0.2);
63+
padding: 15px;
64+
margin: 10px 0;
65+
border-radius: 10px;
66+
font-size: 1.4em;
67+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
68+
transition: transform 0.3s ease-in-out;
69+
}
70+
71+
.ip-box:hover {
72+
transform: scale(1.05);
73+
}
74+
75+
.fade-in {
76+
opacity: 0;
77+
transform: translateY(10px);
78+
transition: opacity 1s ease-out, transform 1s ease-out;
79+
}
80+
81+
.show {
82+
opacity: 1;
83+
transform: translateY(0);
84+
}
85+
</style>

0 commit comments

Comments
 (0)