08-20-2024, 04:43 AM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cool IP Lookup Tool</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background-color: rgba(255, 255, 255, 0.1);
padding: 2rem;
border-radius: 15px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
input {
padding: 0.5rem;
font-size: 1rem;
width: 200px;
margin-right: 0.5rem;
}
button {
padding: 0.5rem 1rem;
font-size: 1rem;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 2rem;
font-size: 1.2rem;
text-align: left;
}
.info-item {
margin: 0.5rem 0;
padding: 0.5rem;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.05);
}
.info-item span {
font-weight: bold;
margin-right: 0.5rem;
}
@keyframes rainbow {
0% { color: red; }
14% { color: orange; }
28% { color: yellow; }
42% { color: green; }
57% { color: blue; }
71% { color: indigo; }
85% { color: violet; }
100% { color: red; }
}
.rainbow-text {
animation: rainbow 5s linear infinite;
}
</style>
</head>
<body>
<div class="container">
<h1>Cool IP Lookup Tool</h1>
<input type="text" id="ipInput" placeholder="Enter IP address">
<button onclick="lookupIP()">Lookup</button>
<div id="result"></div>
</div>
<script>
function lookupIP() {
const ip = document.getElementById('ipInput').value;
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = '<p class="rainbow-text">Loading...</p>';
fetch(`https://ipapi.co/${ip}/json/`)
.then(response => response.json())
.then(data => {
let result = '';
const fields = [
{ key: 'ip', label: 'IP Address' },
{ key: 'city', label: 'City' },
{ key: 'region', label: 'Region' },
{ key: 'country_name', label: 'Country' },
{ key: 'org', label: 'Organization' },
{ key: 'latitude', label: 'Latitude' },
{ key: 'longitude', label: 'Longitude' },
{ key: 'timezone', label: 'Timezone' }
];
fields.forEach(field => {
if (data[field.key]) {
result += `<div class="info-item rainbow-text"><span>${field.label}:</span>${data[field.key]}</div>`;
}
});
resultDiv.innerHTML = result;
})
.catch(error => {
resultDiv.innerHTML = '<p class="rainbow-text">Error: Unable to fetch IP information.</p>';
});
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cool IP Lookup Tool</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background-color: rgba(255, 255, 255, 0.1);
padding: 2rem;
border-radius: 15px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
input {
padding: 0.5rem;
font-size: 1rem;
width: 200px;
margin-right: 0.5rem;
}
button {
padding: 0.5rem 1rem;
font-size: 1rem;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 2rem;
font-size: 1.2rem;
text-align: left;
}
.info-item {
margin: 0.5rem 0;
padding: 0.5rem;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.05);
}
.info-item span {
font-weight: bold;
margin-right: 0.5rem;
}
@keyframes rainbow {
0% { color: red; }
14% { color: orange; }
28% { color: yellow; }
42% { color: green; }
57% { color: blue; }
71% { color: indigo; }
85% { color: violet; }
100% { color: red; }
}
.rainbow-text {
animation: rainbow 5s linear infinite;
}
</style>
</head>
<body>
<div class="container">
<h1>Cool IP Lookup Tool</h1>
<input type="text" id="ipInput" placeholder="Enter IP address">
<button onclick="lookupIP()">Lookup</button>
<div id="result"></div>
</div>
<script>
function lookupIP() {
const ip = document.getElementById('ipInput').value;
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = '<p class="rainbow-text">Loading...</p>';
fetch(`https://ipapi.co/${ip}/json/`)
.then(response => response.json())
.then(data => {
let result = '';
const fields = [
{ key: 'ip', label: 'IP Address' },
{ key: 'city', label: 'City' },
{ key: 'region', label: 'Region' },
{ key: 'country_name', label: 'Country' },
{ key: 'org', label: 'Organization' },
{ key: 'latitude', label: 'Latitude' },
{ key: 'longitude', label: 'Longitude' },
{ key: 'timezone', label: 'Timezone' }
];
fields.forEach(field => {
if (data[field.key]) {
result += `<div class="info-item rainbow-text"><span>${field.label}:</span>${data[field.key]}</div>`;
}
});
resultDiv.innerHTML = result;
})
.catch(error => {
resultDiv.innerHTML = '<p class="rainbow-text">Error: Unable to fetch IP information.</p>';
});
}
</script>
</body>
</html>
