ip2Location.html

<!DOCTYPE html>
<html>
<head>
    <title>IP To Location Track</title>
    <link rel="icon" type="image/x-icon" href="https://img.icons8.com/?size=100&id=yjFRJ0j0Gql5&format=png&color=000000">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background: black;
            font-family: "Courier New", monospace;
            color: #00ff00;
            text-align: center;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
        }
        .container {
            flex: 1;
        }
        .input {
            max-width: 70%;
            height: 45px;
            background: black;
            color: #00ff00;
            border: 2px solid #00ff00;
            font-size: 16px;
            border-radius: 5px;
            padding-left: 15px;
            transition: all 0.3s ease;
        }
        .button {
            margin: 20px;
            padding: 10px 20px;
            font-size: 16px;
            color: black;
            background: #00ff00;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }
        .button:hover {
            background: #008f11;
        }
        #result {
            margin-top: 20px;
            padding: 15px;
            background: rgba(0, 255, 0, 0.1);
            border: 1px solid #00ff00;
            border-radius: 5px;
            font-size: 14px;
        }
        .footer {
            padding: 20px;
            text-align: center;
            color: #00ff00;
            border-top: 1px solid #00ff00;
            background-color: black;
            font-size: 14px;
        }
        .github-link {
            color: #00ff00;
            text-decoration: none;
            font-weight: bold;
        }
        .github-link:hover {
            color: #008f11;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>IP To Location Track 🕵️‍♂️</h1>
        <form id="ipForm">
            <input class="input" placeholder="Enter an IP Address" type="text" id="ipInput" required>
            <button class="button" type="submit">Trace IP</button>
        </form>
        <div id="result"></div>
    </div>
    
    <script>
        document.getElementById("ipForm").addEventListener("submit", async function(event) {
            event.preventDefault();
            let ip = document.getElementById("ipInput").value;
            let resultDiv = document.getElementById("result");
            resultDiv.innerHTML = "<p>Tracing... Please wait...</p>";
            
            try {
                let response = await fetch(`http://ip-api.com/json/${ip}?fields=status,message,country,regionName,city,zip,lat,lon,isp,query`);
                let data = await response.json();
                
                if (data.status === "fail") {
                    resultDiv.innerHTML = `<p style='color: red;'>Error: ${data.message}</p>`;
                } else {
                    resultDiv.innerHTML = `
                        <p><strong>IP:</strong> ${data.query}</p>
                        <p><strong>Country:</strong> ${data.country}</p>
                        <p><strong>Region:</strong> ${data.regionName}</p>
                        <p><strong>City:</strong> ${data.city}</p>
                        <p><strong>ZIP Code:</strong> ${data.zip}</p>
                        <p><strong>Latitude:</strong> ${data.lat}</p>
                        <p><strong>Longitude:</strong> ${data.lon}</p>
                        <p><strong>ISP:</strong> ${data.isp}</p>
                    `;
                }
            } catch (error) {
                resultDiv.innerHTML = `<p style='color: red;'>Failed to fetch data. Please try again.</p>`;
            }
        });
    </script>
    
    <footer class="footer">
        <p>Developed by <a href="https://github.com/ExploitInject" class="github-link" target="_blank">ExploitInject</a></p>
    </footer>
</body>
</html>