SIMULADOR WIFI BUSCADOR GIRALISMO

samuel gaitan
29 ene
4 Min. de lectura

<!DOCTYPE html>

<head>

<title>Simulador de Red WiFi con Buscador</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: system-ui, -apple-system, sans-serif;

}

body {

min-height: 100vh;

background: linear-gradient(to bottom right, #0f172a, #1e293b);

color: #e2e8f0;

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 2rem;

}

header {

text-align: center;

margin-bottom: 3rem;

}

.logo {

font-size: 3rem;

margin-bottom: 1rem;

animation: pulse 2s infinite;

}

@keyframes pulse {

0% { opacity: 0.6; }

50% { opacity: 1; }

100% { opacity: 0.6; }

}

h1 {

font-size: 2.5rem;

margin-bottom: 0.5rem;

color: #f8fafc;

}

.subtitle {

color: #94a3b8;

font-size: 1.125rem;

}

.network-status {

background: rgba(255, 255, 255, 0.05);

backdrop-filter: blur(10px);

border-radius: 1rem;

padding: 2rem;

margin-bottom: 2rem;

border: 1px solid rgba(255, 255, 255, 0.1);

}

.status-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 1.5rem;

}

.network-name {

font-size: 1.5rem;

font-weight: bold;

}

.signal-strength {

display: flex;

gap: 3px;

}

.bar {

width: 4px;

height: 16px;

background: #4ade80;

border-radius: 2px;

transition: height 0.3s ease;

}

.bar:nth-child(2) { height: 12px; }

.bar:nth-child(3) { height: 8px; }

.bar:nth-child(4) { height: 4px; opacity: 0.5; }

.network-info {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 2rem;

margin-bottom: 2rem;

}

.info-card {

background: rgba(255, 255, 255, 0.03);

padding: 1.5rem;

border-radius: 0.75rem;

border: 1px solid rgba(255, 255, 255, 0.05);

}

.info-card h3 {

font-size: 0.875rem;

color: #94a3b8;

margin-bottom: 0.5rem;

}

.info-card p {

font-size: 1.25rem;

color: #f8fafc;

}

.devices-list {

background: rgba(255, 255, 255, 0.03);

border-radius: 1rem;

padding: 1.5rem;

margin-top: 2rem;

}

.device {

display: flex;

justify-content: space-between;

align-items: center;

padding: 1rem;

border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}

.device:last-child {

border-bottom: none;

}

.device-info {

display: flex;

align-items: center;

gap: 1rem;

}

.device-icon {

font-size: 1.5rem;

}

.device-details h4 {

color: #f8fafc;

margin-bottom: 0.25rem;

}

.device-details p {

color: #94a3b8;

font-size: 0.875rem;

}

.device-status {

padding: 0.25rem 0.75rem;

border-radius: 9999px;

font-size: 0.875rem;

background: rgba(74, 222, 128, 0.1);

color: #4ade80;

}

.controls {

display: flex;

gap: 1rem;

margin-top: 2rem;

}

button {

padding: 0.75rem 1.5rem;

border: none;

border-radius: 0.5rem;

font-size: 1rem;

cursor: pointer;

transition: all 0.3s ease;

background: #2563eb;

color: white;

}

button:hover {

background: #1d4ed8;

}

.danger {

background: #dc2626;

}

.danger:hover {

background: #b91c1c;

}

.search-section {

background: rgba(255, 255, 255, 0.05);

backdrop-filter: blur(10px);

border-radius: 1rem;

padding: 2rem;

margin-bottom: 2rem;

border: 1px solid rgba(255, 255, 255, 0.1);

}

.search-container {

display: flex;

flex-direction: column;

gap: 1rem;

max-width: 600px;

margin: 0 auto;

}

.search-header {

text-align: center;

margin-bottom: 1.5rem;

}

.search-header h2 {

font-size: 1.8rem;

color: #f8fafc;

margin-bottom: 0.5rem;

}

.search-header p {

color: #94a3b8;

}

.search-box {

display: flex;

gap: 0.5rem;

}

.search-input {

flex: 1;

padding: 0.75rem 1rem;

border: 1px solid rgba(255, 255, 255, 0.1);

border-radius: 0.5rem;

background: rgba(255, 255, 255, 0.05);

color: white;

font-size: 1rem;

}

.search-input:focus {

outline: none;

border-color: #2563eb;

}

.search-buttons {

display: flex;

gap: 0.5rem;

justify-content: center;

}

.search-btn {

padding: 0.75rem 1.5rem;

border: none;

border-radius: 0.5rem;

font-size: 1rem;

cursor: pointer;

transition: all 0.3s ease;

display: flex;

align-items: center;

gap: 0.5rem;

}

.google-btn {

background: #4285f4;

color: white;

}

.google-btn:hover {

background: #3574e2;

}

.bing-btn {

background: #008373;

color: white;

}

.bing-btn:hover {

background: #006d5f;

}

.connection-status {

text-align: center;

padding: 0.5rem;

border-radius: 0.5rem;

margin-top: 1rem;

background: rgba(74, 222, 128, 0.1);

color: #4ade80;

}

@media (max-width: 640px) {

.container {

padding: 1rem;

}

.network-info {

grid-template-columns: 1fr;

}

.controls {

flex-direction: column;

}

button {

width: 100%;

}

</style>

</head>

<body>

<h1>Simulador WiFi</h1>

<p class="subtitle">Monitor de red y dispositivos conectados</p>

</header>

<h2>Buscador Web</h2>

<p>Busca en Google o Bing usando tu conexión WiFi</p>

</div>

</div>

🔍 Buscar en Google

</button>

🔎 Buscar en Bing

</button>

</div>

Conectado a Internet

</div>

</div>

<h3>VELOCIDAD DE DESCARGA</h3>

</div>

<h3>VELOCIDAD DE SUBIDA</h3>

</div>

<h3>LATENCIA</h3>

</div>

<h3>DISPOSITIVOS CONECTADOS</h3>

</div>

<h4>MacBook Pro</h4>

</div>

<span class="device-status">Conectado</span>

</div>

<h4>iPhone 13</h4>

</div>

<span class="device-status">Conectado</span>

</div>

<h4>PC Gaming</h4>

</div>

<span class="device-status">Conectado</span>

</div>

<h4>Smart TV</h4>

</div>

<span class="device-status">Conectado</span>

</div>

<button onclick="simulateSpeedTest()">Prueba de Velocidad</button>

<button onclick="toggleNetwork()">Reiniciar Red</button>

<button class="danger" onclick="blockDevice()">Bloquear Dispositivo</button>

</div>

function getRandomSpeed(min, max) {

return Math.floor(Math.random() * (max - min + 1) + min);

}

function simulateSpeedTest() {

const downloadSpeed = document.getElementById('download-speed');

const uploadSpeed = document.getElementById('upload-speed');

const latency = document.getElementById('latency');

// Simulate speed test with random values

downloadSpeed.textContent = getRandomSpeed(50, 200) + ' Mbps';

uploadSpeed.textContent = getRandomSpeed(20, 100) + ' Mbps';

latency.textContent = getRandomSpeed(2, 20) + ' ms';

}

function toggleNetwork() {

const devices = document.querySelectorAll('.device-status');

devices.forEach(device => {

device.style.background = 'rgba(239, 68, 68, 0.1)';

device.style.color = '#ef4444';

device.textContent = 'Desconectado';

setTimeout(() => {

device.style.background = 'rgba(74, 222, 128, 0.1)';

device.style.color = '#4ade80';

device.textContent = 'Conectado';

}, 3000);

});

}

function blockDevice() {

const devices = document.querySelectorAll('.device');

if (devices.length > 0) {

const randomDevice = devices[Math.floor(Math.random() * devices.length)];

const status = randomDevice.querySelector('.device-status');

status.style.background = 'rgba(239, 68, 68, 0.1)';

status.style.color = '#ef4444';

status.textContent = 'Bloqueado';

}

function search(engine) {

const searchTerm = document.getElementById('search-input').value.trim();

if (!searchTerm) {

alert('Por favor ingresa un término de búsqueda');

return;

}

const status = document.getElementById('connection-status');

const devices = document.querySelectorAll('.device-status');

let isConnected = false;

devices.forEach(device => {

if (device.textContent === 'Conectado') {

isConnected = true;

}

});

if (!isConnected) {

status.style.background = 'rgba(239, 68, 68, 0.1)';

status.style.color = '#ef4444';

status.textContent = 'Sin conexión a Internet. Por favor verifica tu red WiFi.';

return;

}

const baseUrl = engine === 'google'

? 'https://www.google.com/search?q='

: 'https://www.bing.com/search?q=';

window.open(baseUrl + encodeURIComponent(searchTerm), '_blank');

}

document.getElementById('search-input').addEventListener('keypress', function(e) {

if (e.key === 'Enter') {

search('google'); // Default to Google search on Enter

}

});

// Simulate random speed changes

setInterval(() => {

const downloadSpeed = document.getElementById('download-speed');

const uploadSpeed = document.getElementById('upload-speed');

const latency = document.getElementById('latency');

// Small random fluctuations

downloadSpeed.textContent = (parseInt(downloadSpeed.textContent) + getRandomSpeed(-5, 5)) + ' Mbps';

uploadSpeed.textContent = (parseInt(uploadSpeed.textContent) + getRandomSpeed(-2, 2)) + ' Mbps';

latency.textContent = (parseInt(latency.textContent) + getRandomSpeed(-1, 1)) + ' ms';

}, 5000);

</script>

</body>

</html>

REVISTA DE INFORMATICA GIRALISMO

Explora la Tecnología

https://wa.me/57

SIMULADOR WIFI BUSCADOR GIRALISMO

Entradas recientes

Comentarios

REVISTA DE INFORMATICA GIRALISMO