búsqueda de ip

Abrir en el editor Publica tu código

Recomendado

25 May 2025

Una página de inicio de lavanda

6 November 2024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ip search</title>
    <link rel="stylesheet" href="searchip.new.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
</head>
<body>
    <header>
        <div class="container">
            <h1>ip search</h1>
            <nav>
                <ul>
                    <li><a href="#home">homepage</a></li>
                    <li><a href="#faq">faq</a></li>
                </ul>
            </nav>
        </div>
    </header>

<main id="home">
        <section class="container start-screen" id="start-screen">
            <div class="intro-box">
                <h2>IP Location Finder</h2>
                <p>Discover detailed information about an ip address, enter the ip below to get started</p>
                <div class="search-bar">
                    <input type="text" id="ip-address" placeholder="enter ip..." />
                    <button onclick="fetchIPInfo()"><i class="fa-solid fa-magnifying-glass"></i></button>
                </div>
                <p id="error-message" class="error-message"></p>
            </div>
        </section>

<section class="container ip-details-screen" id="ip-details-screen" style="display: none;">
            <h2>IP address lookup:</h2>
            <div class="ip-info-container">
                <div class="info-box">
                    <p><strong>IP Address:</strong> <span id="ip-value"></span></p>
                    <p><strong>Decimal:</strong> <span id="ip-decimal"></span></p>
                    <p><strong>Hostname:</strong> <span id="ip-hostname"></span></p>
                    <p><strong>ASN:</strong> <span id="ip-asn"></span></p>
                    <p><strong>ISP:</strong> <span id="ip-isp"></span></p>
                    <p><strong>Services:</strong> <span id="ip-services"></span></p>
                    <p><strong>Country:</strong> <span id="ip-country"></span></p>
                    <p><strong>State/Region:</strong> <span id="ip-region"></span></p>
                    <p><strong>City:</strong> <span id="ip-city"></span></p>
                    <p><strong>Latitude:</strong> <span id="ip-latitude"></span></p>
                    <p><strong>Longitude:</strong> <span id="ip-longitude"></span></p>
                </div>
                <div class="map-box">
                    <div id="map"></div>
                </div>
            </div>
            <button class="back-button" onclick="goBack()">homepage</button>
        </section>

<section id="faq" class="container faq-section">
            <h2>Frequently Asked Questions</h2>
            <div class="faq-item">
                <h3>What is IP Lookup?</h3>
                <p>Looking up an IP address can provide a lot of information about the device and network associated with that IP address. Here’s what you can find out by looking up someone’s IP.</p>
            </div>
            <div class="faq-item">
                <h3>IP geolocation</h3>
                <p>Looking up an IP address shows you the geolocation of that IP address, including the country, state, city, and zip code.</p>
            </div>
            <div class="faq-item">
                <h3>IP owner’s name</h3>
                <p>An IP address does not reveal the user’s name or identity. However, it can be used to find out their name (e.g., in legal investigations).</p>
            </div>
        </section>
    </main>

<footer>
        <div class="container">
            <p>© website build by alqsdeuss</p>
        </div>
    </footer>

CSS

:root {
    --gradient-color-1: #0c0d0d;
    --gradient-color-2: #1e1e1e;
    --gradient-color-3: #656a95;
    --gradient-color-4: #0c0d0d;
    --primary-color: #2c3e50;
    --secondary-color: #27ae60;
    --text-color: #ffffff;
    --border-radius: 15px;
    --box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    --input-focus-color: #1e8c3f;
    --button-hover-color: #1e8c3f;
}

body, html {
    height: 100%;
    margin: 0;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(120deg, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3), var(--gradient-color-4));
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
    color: var(--text-color);
}

@keyframes gradientAnimation {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

header {
    background: rgba(0, 0, 0, 0.8);
    color: var(--text-color);
    padding: 20px 0;
    box-shadow: var(--box-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background 0.3s ease;
}

header.scrolled {
    background: rgba(0, 0, 0, 0.9);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

header h1 {
    margin: 0;
    font-size: 2.6rem;
    transition: color 0.3s ease;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

nav a:hover {
    color: var(--secondary-color);
    transform: scale(1.1);
}

main {
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.intro-box, .ip-info-container, .faq-section {
    background: var(--primary-color);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.intro-box:hover, .ip-info-container:hover, .faq-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

.intro-box h2, .ip-info-container h2, .faq-section h2 {
    margin-bottom: 20px;
    font-size: 2.2rem;
    color: var(--text-color);
    text-align: center;
}

.search-bar {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

input[type="text"] {
    padding: 12px;
    border: 2px solid var(--secondary-color);
    border-radius: var(--border-radius);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

input[type="text"]:focus {
    border-color: var(--input-focus-color);
    background-color: #2c3e50;
    outline: none;
}

button {
    padding: 12px 20px;
    background-color: var(--secondary-color);
    border: none;
    color: #fff;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

button:hover {
    background-color: var(--button-hover-color);
    transform: scale(1.05);
}

.error-message {
    color: #e74c3c;
    text-align: center;
    margin-top: 10px;
}

.ip-info-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-box, .map-box {
    background: #2c3e50;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.map-box #map {
    height: 300px;
    border-radius: var(--border-radius);
    transition: transform 0.3s ease;
}

.map-box #map:hover {
    transform: scale(1.02);
}

.faq-section {
    background: #2c3e50;
}

.faq-item {
    margin-bottom: 15px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.faq-item:hover {
    background-color: #34495e;
    transform: translateX(5px);
}

.faq-item h3 {
    margin-bottom: 5px;
    font-size: 1.2rem;
    color: var(--text-color);
}

footer {
    background: rgba(0, 0, 0, 0.8);
    color: var(--text-color);
    text-align: center;
    padding: 15px 0;
    box-shadow: var(--box-shadow);
    transition: background-color 0.3s ease;
}

@media (max-width: 768px) {
    header {
        padding: 15px;
    }

.search-bar {
        flex-direction: column;
    }

input[type="text"], button {
        width: 100%;
    }

.map-box #map {
        height: 250px;
    }
}

JS

function fetchIPInfo() {
    const ip = document.getElementById('ip-address').value;
    const errorMessage = document.getElementById('error-message');
    const startScreen = document.getElementById('start-screen');
    const ipDetailsScreen = document.getElementById('ip-details-screen');
    const ipValue = document.getElementById('ip-value');

const ipv4Regex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

if (!ip.match(ipv4Regex)) {
        errorMessage.textContent = "pls enter a valid p";
        return;
    }

errorMessage.textContent = "";

const apiUrl = `https://ipapi.co/${ip}/json/`;

fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                errorMessage.textContent = `${data.reason}`;
            } else {
                startScreen.style.display = 'none';
                ipDetailsScreen.style.display = 'block';
                ipValue.textContent = data.ip;
                document.getElementById('ip-decimal').textContent = data.ip_decimal || 'N/A';
                document.getElementById('ip-hostname').textContent = data.hostname || 'N/A';
                document.getElementById('ip-asn').textContent = data.asn || 'N/A';
                document.getElementById('ip-isp').textContent = data.org || 'N/A';
                document.getElementById('ip-services').textContent = data.services || 'N/A';
                document.getElementById('ip-country').textContent = data.country_name || 'N/A';
                document.getElementById('ip-region').textContent = data.region || 'N/A';
                document.getElementById('ip-city').textContent = data.city || 'N/A';
                document.getElementById('ip-latitude').textContent = data.latitude || 'N/A';
                document.getElementById('ip-longitude').textContent = data.longitude || 'N/A';

function goBack() {
    const startScreen = document.getElementById('start-screen');
    const ipDetailsScreen = document.getElementById('ip-details-screen');

if (startScreen && ipDetailsScreen) {
        startScreen.style.display = 'block';
        ipDetailsScreen.style.display = 'none';
    }
}

búsqueda de ip

Recomendado

Un código de qatar2023

Una página de inicio de lavanda

redes sociales

HTML

CSS

JS

Recomendado

Un código de qatar2023

Una página de inicio de lavanda

redes sociales

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS