Create ipinfo.html

qoomon · Dec 1, 2022 · bd5e8c8 · bd5e8c8
1 parent d1c2134
commit bd5e8c8
Showing 1 changed file with 55 additions and 0 deletions.
diff --git a/ipinfo.html b/ipinfo.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Example Domain</title>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Google+Sans:400,500,700|Google+Sans+Text:400&amp;lang=en">
+</head>
+<body style="margin: 0; overflow: hidden;">
+    <iframe id="map"
+        frameborder="0" scrolling="no"
+        style="width: 100vw; height: 100vh;"/>
+    </iframe>
+
+    <div id="info" style="
+        display: none;
+        position: absolute; left: 0; top: 110px; width: 279.5px;
+        background-color: white;
+        margin: 10px; padding: 9px 11px;
+        border-radius: 2px;
+        box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;
+        user-select: text;
+        font-family: Roboto, Arial;
+    ">
+        <div id="ip"  style="color: black;   font-size: 14px; font-weight: 500;"></div>
+        <div id="org" style="color: #5b5b5b; font-size: 12px; margin-top: 6px;"></div>
+    </div>
+
+    <script>
+        (async function () {
+
+            const ipInfo = await fetch('https://ipapi.co/json/').then(res => res.json());
+            console.info('ipInfo:', ipInfo)
+
+            const infoElement = document.getElementById('info');
+
+            const ipElement = document.getElementById('ip');
+            ipElement.innerText = ipInfo.ip
+
+            const orgElement = document.getElementById('org');
+            orgElement.innerText = ipInfo.org
+
+            const mapIframe = document.getElementById('map');
+            const mapQuery = `${ipInfo.latitude},${ipInfo.longitude}`;
+
+            mapIframe.onload = () => {
+              setTimeout(() => {
+                infoElement.style.display = '';
+              }, 500);
+            }
+            mapIframe.src = `https://maps.google.com/maps?q=${mapQuery}&z=10&output=embed`;
+        })();
+    </script>
+</body>
+</html>