64 lines
2.2 KiB
PHP
64 lines
2.2 KiB
PHP
<div>
|
|
<div x-data="{
|
|
clientIp: @entangle('ipId').live,
|
|
publicIp: '',
|
|
loading: true,
|
|
error: null
|
|
}" x-init="
|
|
// Obtener IP pública del cliente
|
|
fetch('https://api.ipify.org/?format=json')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
publicIp = data.ip;
|
|
loading = false;
|
|
})
|
|
.catch(err => {
|
|
error = 'Error al obtener IP pública';
|
|
loading = false;
|
|
console.error('Error:', err);
|
|
});
|
|
">
|
|
<div class="space-y-4 p-4 border rounded-lg">
|
|
<h3 class="text-lg font-semibold">Información de IP</h3>
|
|
|
|
<!-- IP detectada por el servidor -->
|
|
<div>
|
|
<p class="text-sm text-gray-600">IP detectada por el servidor:</p>
|
|
<p class="font-mono text-blue-600"><span x-text="clientIp || 'No disponible'"></span></p>
|
|
</div>
|
|
|
|
<!-- IP pública real -->
|
|
<div>
|
|
<p class="text-sm text-gray-600">Tu IP pública real:</p>
|
|
<div x-show="loading" class="text-gray-500">
|
|
<span>Cargando...</span>
|
|
</div>
|
|
<div x-show="!loading && !error">
|
|
<p class="font-mono text-green-600"><span x-text="publicIp"></span></p>
|
|
</div>
|
|
<div x-show="error" class="text-red-600">
|
|
<span x-text="error"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Botón para refrescar -->
|
|
<button @click="
|
|
loading = true;
|
|
error = null;
|
|
fetch('https://api.ipify.org/?format=json')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
publicIp = data.ip;
|
|
loading = false;
|
|
})
|
|
.catch(err => {
|
|
error = 'Error al obtener IP pública';
|
|
loading = false;
|
|
});
|
|
" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
|
|
Actualizar IP
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|