<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proxy IP Checker</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.8/countUp.min.js"></script>
<style>
   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

   :root {
--primary: #00ff88;
--secondary: #00ffff;
--accent: #ff00ff;
--dark: #080c14;
--darker: #040608;
--light: #e0ffff;
--card-bg: rgba(8, 12, 20, 0.99);
--glow: 0 0 20px rgba(0, 255, 136, 0.9);
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
background: url('https://telegra.ph/file/0b9a4c97f231c8bc33aa9.jpg') no-repeat center center fixed;
background-size: cover;
color: #f5f5f5;
display: flex;
align-items: center;
flex-direction: column;
min-height: 100vh;
overflow: scroll;
}

.glassmorphism {
background: rgba(17, 25, 40, 0.75);
backdrop-filter: blur(12px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
}
.animated-gradient {
background: linear-gradient(-45deg, #8b5cf6, #6366f1, #4338ca, #3b0764);
background-size: 400% 400%;
}
.shine {
position: relative;
overflow: hidden;
}
.shine::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(30deg);
transition: 0.6s;
opacity: 0;
}
.shine:hover::after {
opacity: 1;
transition: 0s;
}
.loading-dots span {
background-color: currentColor;
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 3px;
}
.credits {
text-align: center;
font-size: 14px;
color: #fff;
margin-top: 20px;
}

.credits a {
color: #00a8ff;
text-decoration: none;
}

.credits a:hover {
text-decoration: underline;
}

.header h1 {
font-size: 25px;
color: #00a8ff;
margin: 0;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 4px;
animation: slideInDown 1s ease-out;
}

h1 {
font-family: 'Rajdhani', sans-serif;
padding-top: 10px; /* To avoid content being hidden under the header */
margin-top: 10px;
color: black;
text-align: center;
font-size: 9vw;
font-weight: bold;
text-shadow:
0 0 5px rgba(0, 123, 255, 0.8),
0 0 10px rgba(0, 123, 255, 0.8),
0 0 20px rgba(0, 123, 255, 0.8),
0 0 30px rgba(0, 123, 255, 0.8),
0 0 40px rgba(0, 123, 255, 0.8);

background: linear-gradient(45deg, var(--primary), var(--secondary), var(--dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 30px #000;
position: relative;
animation: titlePulse 3s ease-in-out infinite;
}

/* Custom styles for SweetAlert2 */
.swal2-popup-custom {
background: rgba(135, 206, 250, 0.7); /* Light blue sky color with transparency */
border-radius: 15px; /* Rounded corners */
backdrop-filter: blur(10px); /* Glass effect */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
padding: 20px;
width: 300px; /* Small width */
}

.swal2-popup-show-custom {
animation: popup-show 0.3s ease-out;
}

.swal2-popup-hide-custom {
animation: popup-hide 0.3s ease-in;
}

@keyframes popup-show {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}

@keyframes popup-hide {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.8);
}
}

.toggle-container {
position: absolute;
top: 15px;
right: 15px;
width: 60px; /* Ukuran lebih kecil */
height: 30px; /* Ukuran lebih kecil */
background: #cbd5e1; /* Warna lebih terang */
border-radius: 25px;
box-shadow: inset -3px -3px 6px #f8fafc, inset 3px 3px 6px #94a3b8;
cursor: pointer;
transition: all 0.3s ease;
z-index: 100;
display: flex;
align-items: center;
padding: 5px;
}

.toggle-circle {
width: 22px; /* Ukuran lebih kecil */
height: 22px; /* Ukuran lebih kecil */
background: #ffffff;
border-radius: 50%;
box-shadow: 3px 3px 6px #94a3b8, -3px -3px 6px #f8fafc;
transition: all 0.3s ease;
}

.toggle-container.active {
background: #4CAF50;
box-shadow: inset -3px -3px 6px #5ed560, inset 3px 3px 6px #3a9d40;
}

.toggle-container.active .toggle-circle {
transform: translateX(30px); /* Menyesuaikan dengan ukuran lebih kecil */
background: #ffffff;
box-shadow: inset 3px 3px 6px #b0b0b0, inset -3px -3px 6px #ffffff;
}

/* Efek blur ke seluruh halaman kecuali tombol */
.blurred {
filter: blur(8px);
}
.animated-gradient {
background: linear-gradient(-45deg, #8b5cf6, #6366f1, #4338ca, #3b0764);
background-size: 400% 400%;
}

.divider {
border: none;
height: 3px;
background: linear-gradient(to right, transparent, #fff, transparent);
margin: 5px 0;
}

h2 {
color: black;
text-align: center;
font-size: 4vw;
font-weight: bold;
text-shadow:
0 0 5px rgba(0, 123, 255, 0.8),
0 0 10px rgba(0, 123, 255, 0.8),
0 0 20px rgba(0, 123, 255, 0.8),
0 0 30px rgba(0, 123, 255, 0.8),
0 0 40px rgba(0, 123, 255, 0.8);
}
header, footer {
box-sizing: border-box; /* Pastikan padding dihitung dalam lebar elemen */
background-color: ;
color: white;
text-align: center;
border: 0px solid rgba(143, 0, 0, 0.89); /* Border dengan warna abu-abu */
border-radius: 10px;
padding: 0 20px;
position: fixed;
width: 100%;
left: 0;
right: 2px;
pointer-events: none;
z-index: 10;
}

header {
top: 0;
}

footer {
bottom: 0;
}

.quantum-title {
font-family: 'Rajdhani', sans-serif;
padding-top: 10px; /* To avoid content being hidden under the header */
margin-top: 10px;
color: black;
text-align: center;
font-size: 10vw;
font-weight: bold;
text-shadow:
0 0 5px rgba(0, 123, 255, 0.8),
0 0 10px rgba(0, 123, 255, 0.8),
0 0 20px rgba(0, 123, 255, 0.8),
0 0 30px rgba(0, 123, 255, 0.8),
0 0 40px rgba(0, 123, 255, 0.8);

background: linear-gradient(45deg, var(--accent), var(--secondary), var(--dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 30px #000;
position: relative;
animation: titlePulse 3s ease-in-out infinite;
}

@keyframes titlePulse {
0%, 100% { transform: scale(1); filter: brightness(1); }
50% { transform: scale(1.02); filter: brightness(1.2); }
}

.quantum-title1 {
color: black;
text-align: center;
font-size: 5vw;
font-weight: bold;
text-shadow:
0 0 5px rgba(0, 123, 255, 0.8),
0 0 10px rgba(0, 123, 255, 0.8),
0 0 20px rgba(0, 123, 255, 0.8),
0 0 30px rgba(0, 123, 255, 0.8),
0 0 40px rgba(0, 123, 255, 0.8);
}

.quantum-title {
font-size: 2rem;
margin-bottom: 1rem;
}

.navbarconten {
width: 100%;
overflow-x: auto; /* Mengaktifkan scroll horizontal */
margin-bottom: 0px;
border: 1px solid #000; /* Border dengan warna abu-abu */
border-radius: 10px; /* Membuat sudut melengkung */
padding: 0px; /* Memberi jarak antara border dan konten */
background-color: rgba(0, 0, 0, 0.82); /* Warna latar belakang */
box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), /* Glow putih */
0 0 30px rgba(0, 150, 255, 0.5); /* Glow biru */

}
.navbar {
position: fixed;
top: 60%;
left: -80px; /* Awalnya disembunyikan */
transform: translateY(-50%);
width: 80px;
background: ;
color: white;
padding: 10px 0;
transition: left 0.3s ease-in-out;
z-index: 1000;
border-radius: 0 10px 10px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}

/* Saat navbar terbuka */
.navbar.show {
left: 0;
}

.navbar a img {
width: 40px;
}

.navbar a {
display: block;
color: white;
text-decoration: none;
padding: 10px 20px;
}
.navbar a:hover {
background: ;
}

/* Tombol Toggle */
.toggle-btn {
position: absolute;
top: 60%;
right: -30px; /* Posisi tombol di tengah kanan navbar */
transform: translateY(-50%);
background: ;
border: none;
cursor: pointer;
z-index: 1001;
padding: 10px;
border-radius: 0 10px 10px 0;
transition: right 0.3s ease-in-out;
}

.toggle-btn img {
width: 20px; /* Ukuran gambar lebih kecil */
height: 150px; /* Ukuran gambar lebih kecil */
}

/* Saat navbar terbuka, tombol ikut bergeser */
.navbar.show .toggle-btn {
right: -29px;
}

</style>

</head>
<body class="min-h-screen text-gray-100 py-8 px-4 sm:px-6">
   <br>
       <br>
       <header>
<h1 class="quantum-title">GEO PROJECT</h1>
</header>
   <div class="max-w-4xl mx-auto">
<div class="glassmorphism p-6 mb-8">
<div class="flex items-center mb-4">
<i class="fas fa-terminal text-purple-400 mr-2"></i>
<h2 class="text-sm font-semibold text-white">Enter Proxy Details</h2>
</div>

<div class="relative">
<textarea id="ipinput" rows="3"
class="w-full px-4 py-3 bg-gray-900/50 text-gray-100 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all resize-none shadow-inner"
placeholder="Format: IP or IP:PORT separate with enter"></textarea>
<div class="absolute right-3 bottom-3 flex gap-1 text-xs text-gray-400">
<span id="proxy-count">0</span>/<span>20</span>
</div>
</div>

<div class="mt-4 flex flex-col sm:flex-row justify-between items-center gap-3">
<div class="flex gap-2">
<button id="example-btn" class="text-sm px-2 py-1 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded transition-colors flex items-center">
<i class="far fa-lightbulb mr-1"></i> Examples
</button>
<button id="clear-btn" class="text-sm px-2 py-1 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded transition-colors flex items-center">
<i class="fas fa-eraser mr-1"></i> Clear
</button>
</div>

<button id="check-button" onclick="checkIPs()"
class="shine w-full sm:w-auto flex items-center justify-center gap-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-medium py-2 px-6 rounded-lg transition-all hover:shadow-lg hover:from-purple-500 hover:to-indigo-500 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-50">
<i class="fas fa-search-location"></i>
<span>Check Proxies</span>
</button>
</div>
</div>
<div class="navbar" id="navbar">
<div class="toggle-btn" id="menu-btn" onclick="toggleNavbar()">
<img src="https://geoproject.biz.id/social/buka.png" alt="Toggle Menu">
</div>
<div class="navbarconten text-center">
<span>
<a href="https://wa.me/6282339191527" target="_blank" rel="noopener noreferrer">
<img src="https://geoproject.biz.id/social/mobile.png" alt="menu" width="40" class="mt-1">
</a>
</span>
<span>
<a href="https://joss.gpj.us.kg/vpn" target="_self" rel="noopener noreferrer">
<img src="https://geoproject.biz.id/social/linksub.png" alt="menu" width="40" class="mt-1">
</a>
</span>

<span>
<a href="https://joss.gpj.us.kg/web" target="_self" rel="noopener noreferrer">
<img src="https://geoproject.biz.id/social/vpn.png" alt="menu" width="40" class="mt-1">
</a>
</span>
<span>
<a href="https://t.me/sampiiiiu" target="_blank" rel="noopener noreferrer">
<img src="https://geoproject.biz.id/social/tele.png" alt="menu" width="40" class="mt-1">
</a>
</span>
<span>
<a href="https://t.me/VLTRSSbot" target="_blank" rel="noopener noreferrer">
<img src="https://geoproject.biz.id/social/bot.png" alt="menu" width="40" class="mt-1">
</a>
</span>
<span>
<a href="/" target="_self" rel="noopener noreferrer">
<img src="https://geoproject.biz.id/social/home.png" alt="menu" width="40" class="mt-1">
</a>
</span>
</div>
</div>

<div id="loading-indicator" class="hidden glassmorphism p-3 mb-2 text-center">
<div class="flex justify-center items-center mb-1">
<span class="inline-block w-2 h-2 bg-purple-500 rounded-full mr-0.5"></span>
<span class="inline-block w-2 h-2 bg-indigo-500 rounded-full mr-0.5"></span>
<span class="inline-block w-2 h-2 bg-blue-500 rounded-full"></span>
</div>
<p class="text-gray-300 text-sm">Checking proxy IP...</p>
<div class="w-full bg-gray-700 h-0.5 rounded-full mt-1 overflow-hidden">
<div id="progress-bar" class="h-full bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full" style="width: 0%"></div>
</div>
</div>

<footer class="footer bg-transparent backdrop-blur-lg bg-blue-500/30">
<div class="container mx-auto px-8 flex flex-col justify-center items-center">
<h2 class="quantum-title1 text-center">
<p>© PROXY IP CHECKER</p>
</h2>

</div>
</footer>

<div class="toggle-container" onclick="toggleSwitch()">
<div class="toggle-circle"></div>
</div>
<script>
function toggleNavbar() {
const navbar = document.getElementById("navbar");
const menuBtn = document.getElementById("menu-btn").querySelector('img');

if (navbar.classList.contains("show")) {
navbar.classList.remove("show");
menuBtn.src = "https://geoproject.biz.id/social/buka.png";
} else {
navbar.classList.add("show");
menuBtn.src = "https://geoproject.biz.id/social/tutup.png";
}
}
</script>
<script>
const ipinput = document.getElementById("ipinput");
const proxyCount = document.getElementById("proxy-count");
const exampleBtn = document.getElementById("example-btn");
const clearBtn = document.getElementById("clear-btn");
const maxCount = 50;

function updateProxyCount() {
const ipList = ipinput.value.split("\n").filter(ip => ip.trim() !== "");
proxyCount.textContent = ipList.length > maxCount ? maxCount : ipList.length;
}

ipinput.addEventListener("input", updateProxyCount);

exampleBtn.addEventListener("click", () => {
ipinput.value = `38.76.145.162\n38.76.145.162:443\n38.76.145.162,443\n38.76.145.162-443\n38.76.145.162=443\n38.76.145.162,443,US,NetLab`;
updateProxyCount();
});

clearBtn.addEventListener("click", () => {
ipinput.value = "";
updateProxyCount();
});
</script>
<script>
// Event untuk tombol Clear
document.getElementById("clear-btn").addEventListener("click", function() {
document.getElementById("ipinput").value = "";
});

const checkIPs = async () => {
const ipinput = document.getElementById('ipinput').value;
const ipAddresses = ipinput.split(/[\n,]+/).map(ip => ip.trim()).filter(ip => ip);

if (ipAddresses.length === 0) {
Swal.fire({
title: 'No IP addresses entered',
text: 'Please enter at least one IP address.',
icon: 'warning',
confirmButtonText: 'OK',
customClass: {
popup: 'swal2-popup-custom'
},
showClass: {
popup: 'swal2-popup-show-custom'
},
hideClass: {
popup: 'swal2-popup-hide-custom'
},
backdrop: true,
allowOutsideClick: false
});
}

document.getElementById('loading-indicator').classList.remove('hidden');
document.getElementById('results-container').classList.add('hidden');
document.getElementById('progress-bar').style.width = '0%';

let checked = 0;

for (const ip of ipAddresses) {
try {
let ipPart, portPart;
let apiUrl;

if (ip.includes(',')) {

[ipPart, portPart] = ip.split(',');
} else if (ip.includes('=')) {

[ipPart, portPart] = ip.split('=');
} else {
ipPart = ip;
portPart = null;
}

apiUrl = portPart ?
`https://check.gpj.us.kg/check?ip=${ipPart}:${portPart}` :
`https://check.gpj.us.kg/check?ip=${ipPart}`;

const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(apiUrl)}`;

const response = await fetch(proxyUrl);
const data = await response.json();
const ipInfo = JSON.parse(data.contents);

const infoRow = `
<div class="container mx-auto px-4">
<div class="w-full max-w-7xl bg-gray-900 text-white rounded-lg shadow-lg p-3 border-l-4 border-green-500">
<div class="flex items-center justify-between">
<div class="flex items-center">

<div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3">
<span class="text-xl">${ipInfo.flag}</span>
</div>
<span class="text-lg font-bold text-[17px] text-blue-200">${ipInfo.ip}</span>
</div>
<span class="bg-green-700 text-[10px] font-semibold text-white px-3 py-1 rounded">
${ipInfo.status === "ACTIVE" ? "✅ ACTIVE" : ipInfo.status === "DEAD" ? "❌ DEAD" : ipInfo.status || 'N/A'}
</span>
</div>

<div class="mt-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">

<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3">
<i class="fas fa-plug text-indigo-400"></i>
</div>
<div>
<div class="text-xs text-gray-400">Port</div>
<div class="text-[10px] font-medium">${ipInfo.port || 'N/A'}</div>
</div>
</div>

<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3">
<i class="fas fa-network-wired text-blue-400"></i>
</div>
<div>
<div class="text-xs text-gray-400">ASN</div>
<div class="text-[10px] font-medium">${ipInfo.asn || 'N/A'}</div>
</div>
</div>

<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3">
<i class="fas fa-building text-indigo-400"></i>
</div>
<div>
<div class="text-xs text-gray-400">Organization</div>
<div class="text-[10px] font-medium">${ipInfo.isp || 'N/A'}</div>
</div>
</div>

<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3">
<i class="fas fa-database text-blue-400"></i>
</div>
<div>
<div class="text-xs text-gray-400">Colocation</div>
<div class="text-[10px] font-medium">${ipInfo.colo || 'N/A'}</div>
</div>
</div>

<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3">
<i class="fas fa-map-marker-alt text-red-400"></i>
</div>
<div>
<div class="text-xs text-gray-400">Country</div>
<div class="text-[10px] font-medium">${ipInfo.country || 'N/A'}</div>
</div>
</div>

<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3">
<i class="fas fa-globe-asia text-green-400"></i>
</div>
<div>
<div class="text-xs text-gray-400">Region</div>
<div class="text-[10px] font-medium">${ipInfo.region || 'N/A'}</div>
</div>
</div>

<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3">
<i class="fas fa-map-pin text-yellow-400"></i>
</div>
<div>
<div class="text-xs text-gray-400">Coordinates</div>
<div class="text-[10px] font-medium">
${ipInfo.latitude}, ${ipInfo.longitude}
<a href="https://www.google.com/maps?q=${ipInfo.latitude},${ipInfo.longitude}"
target="_blank"
class="text-blue-400 hover:text-blue-300 ml-2">
<i class="fas fa-external-link-alt"></i> View Google Maps
</a>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
<div class="divider"></div>
`;

document.getElementById('ipData').innerHTML += infoRow;
} catch (error) {
console.error('Error fetching IP data:', error);
}

checked++;
let progress = (checked / ipAddresses.length) * 100;
document.getElementById('progress-bar').style.width = progress + "%";
}

document.getElementById('loading-indicator').classList.add('hidden');
document.getElementById('results-container').classList.remove('hidden');
};

</body>

</html>