zyqunix/pages
1
0
Fork 0
mirror of https://github.com/zyqunix/tools.git synced 2025-07-06 06:20:30 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

morse code and ip lookup

Browse source
This commit is contained in:
zyqunix 2025-04-05 19:49:49 +02:00
parent 82bbc6c0cd
commit 9ed3ee790e
No known key found for this signature in database
GPG key ID: 134A8DEEA83B80E6
8 changed files with 388 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

21
ip/index.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title>IP Lookup</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
</head>
<body>
<h1>IP Lookup</h1>
<div class="card shadow">
<input type="text" id="ipInput" placeholder="Enter IP address">
<button id="lookupElem">Lookup</button>
<div class="your tooltip" data-tooltip="Only provides IPv6.">Your IP: <span id="your-ip">69.420.69.69</span></div>
</div>
<div id="output"></div>
<script src="index.js"></script>
</body>
</html>

48
ip/index.js Normal file
View file

@ -0,0 +1,48 @@
const lookupElem = document.getElementById('lookupElem');
const yourIp = document.getElementById('your-ip');
function getFlagEmoji(countryCode) {
return countryCode
.toUpperCase()
.replace(/./g, char => String.fromCodePoint(127397 + char.charCodeAt()));
}
function fetchIp() {
const ip = document.getElementById("ipInput").value;
fetch(`https://ipapi.co/${ip}/json/`)
.then(response => response.json())
.then(data => {
const flag = getFlagEmoji(data.country_code || '');
const table = `
<table>
<tr><th>IP</th><td>${data.ip}</td></tr>
<tr><th>City</th><td>${data.city}</td></tr>
<tr><th>Postal Code</th><td>${data.postal}</td></tr>
<tr><th>Region</th><td>${data.region}</td></tr>
<tr><th>Country</th><td>${flag} ${data.country_name} (${data.country_code})</td></tr>
<tr><th>Timezone</th><td>${data.timezone}</td></tr>
<tr><th>Organization</th><td>${data.org}</td></tr>
<tr><th>Coordinates</th><td>${data.latitude}, ${data.longitude}</td></tr>
</table>
`;
document.getElementById("output").innerHTML = table;
})
.catch(err => {
document.getElementById("output").textContent = "Error: " + err;
});
}
function getYour() {
fetch(`https://ipapi.co/json/?ip=ipv4`)
.then(response => response.json())
.then(data => {
yourIp.innerHTML = data.ip;
})
.catch(err => {
yourIp.textContent = "Error: " + err;
});
}
window.addEventListener('load', getYour);
lookupElem.addEventListener('click', fetchIp);

104
ip/style.css Normal file
View file

@ -0,0 +1,104 @@
@import url(/global.css);
h1 {
font-size: 2rem;
margin-bottom: 30px;
}
input[type="text"] {
background: #1e1e1e;
border: 1px solid #444;
color: #f0f0f0;
padding: 12px 15px;
border-radius: 8px;
font-size: 1rem;
width: 70%;
margin-right: 10px;
transition: border-color 0.2s;
outline: none;
z-index: 2;
}
button {
background: #c099ff;
color: #1e1e1e;
border: none;
padding: 12px 20px;
font-size: 1rem;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
z-index: 2;
}
button:hover {
background: #a875ff;
}
#output {
margin-top: 25px;
border-radius: 10px;
width: 100%;
max-width: 640px;
}
table {
border-collapse: collapse;
width: 100%;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
th, td {
padding: 10px 14px;
border: 2px solid #2a2a2a;
background-color: #1f1f1f;
}
th:hover,
td:hover {
background-color: #232323;
}
th {
text-align: left;
}
.your {
margin-top: 15px;
}
#your-ip:not(:hover) {
filter: blur(10px);
}
.tooltip {
display: flex;
justify-content: center;
position: relative;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 125%;
background-color: #2a2a2a;
border: 2px solid rgba(150, 150, 150, 0.1);
color: #fff;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
cursor: default;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}