Deneyim: IP Erişim ve Alarm Paneli

IP Erişim ve Alarm Paneli adını taşıyan, yerel ağdaki veya erişilebilir durumdaki IP adreslerini periyodik olarak tarayan, durumlarını görsel kartlar ve iframe önizlemeleriyle gösteren, erişim sağlandığında ise sesli alarm ve yanıp sönen görsel uyarılar üreten tek dosyalı bir web uygulamasıdır.

IP Adresi Takibi: Alt alta yazılan IP adreslerini satır satır okur ve her biri için dinamik, 5x5 cm kartlarda özel izleme kartları oluşturur.

Periyodik Tarama (Monitoring): "Takibi ve Alarmı Başlat" butonuna basıldığında süreç hemen başlar ve her 20 saniyede bir otomatik olarak yenilenir. Tarama döngüsü sayacı arayüzde anlık olarak takip edilir.

Erişilebilen IP adreslerinin web arayüzleri ilgili kartın içerisindeki iframe alanına yüklenir. Erişilemeyen IP'ler içinse "Erişim Yok" uyarısı gösterilir.

Güvenli Yönetim: İstendiğinde "Durdur" butonuyla aktif zamanlayıcılar ve animasyonlar iptal edilebilir, "Temizle" butonuyla liste sıfırlanabilir. Sayfa kapatılırken veya yenilenirken arka plandaki işlemler otomatik olarak sonlandırılır.

192.168.0.95 ve 192.168.1.179 default olarak kodun içinde yer alır. Kod içinde daimi olarak kullanılan ip adresleri ile değiştirebilir veya silebilir, Ekran üzerinde IP adresleri ekleyebilirsiniz.

Bu koddan amaç, adresi belli olan IP adreslerinin aktif olduğunda haberdar olmaktır. Sistem duraklatıncaya kadar taramaya devam eder. İhtiyaçtan kaynaklı tasarlanmıştır. (IP adresleri belli olan kameralar aktif olunca haberdar olmak için)

Erişilebilen IP kartları yeşil renkte yanıp sönmeye başlar. Bip bip olarak, Ses çıkarır

Durdur butonuna basınca tarama işi durur. Mevcut kaç tekrar olduysa, bilgisi de formda yer almaktadır.

HTML Kod:

<!DOCTYPE html>

<head>

<title>IP Erişim ve Alarm Paneli</title>

<style>

:root {

--m: #0b4f8a;

--bg: #ffffff;

--shadow: 0 3px 10px rgba(0,0,0,.12);

--radius: 8px;

}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Segoe UI", Arial, sans-serif; }

body { background: var(--bg); padding: 12px; }

/* Başlık Alanı */

.header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: #fff; border: 2px solid #000; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 15px; gap: 15px; }

.left { display: flex; align-items: center; gap: 12px; }

.logo img { height: 46px; }

.title1 { font-size: 20px; font-weight: 700; color: #000; }

.title2 { font-size: 11px; color: #555; font-weight: 600; }

.center-title { flex-grow: 1; text-align: center; font-size: 18px; font-weight: 700; color: #000; }

.right { font-size: 13px; font-weight: 700; white-space: nowrap; text-align: right; color: #333; }

/* Panel ve İçerik Alanları */

.panel { background: #fff; border: 1px solid var(--m); border-radius: 10px; padding: 15px; box-shadow: var(--shadow); }

.msg { font-size: 13px; font-weight: 600; color: var(--m); margin-bottom: 8px; }

textarea { width: 100%; height: 75px; background: #fff; color: #000; border: 1px solid var(--m); padding: 10px; font-family: monospace; border-radius: 6px; font-size: 14px; margin-bottom: 12px; }

.button-group { display: flex; gap: 10px; margin-bottom: 15px; align-items: center; }

button { background: var(--m); color: #fff; border: none; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; transition: .2s; }

button:hover { opacity: .9; }

button.btn-danger { background: #dc2626; }

button.btn-stop { background: #d97706; }

#durumMesaji { font-size: 12px; font-weight: bold; color: #0369a1; margin-left: 10px; }

/* 5x5 cm (189x189 piksel) Dinamik Ekranlar Grid Yapısı */

.ekranlar-grid {

display: flex;

flex-wrap: wrap;

gap: 15px;

margin-top: 20px;

}

/* 5x5 cm Ekran Kartı Tasarımı */

.ip-karti {

width: 189px; /* 5 cm */

height: 189px; /* 5 cm */

border: 2px solid var(--m);

border-radius: 8px;

background: #f8fafc;

padding: 6px;

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: center;

text-align: center;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

transition: background-color 0.2s ease;

overflow: hidden;

}

.ip-karti .kart-ust { font-size: 10px; font-weight: bold; color: #333; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Web sayfasını gösterecek iframe alanı */

.ip-karti iframe {

width: 100%;

height: 110px;

border: 1px solid #cbd5e1;

background: #fff;

border-radius: 4px;

}

.ip-karti .kart-durum { font-size: 10px; font-weight: 600; color: #555; width: 100%; }

/* Erişim sağlanınca yanıp sönecek YEŞİL sınıf */

.yanip-son-yesil {

background-color: #22c55e !important;

border-color: #15803d !important;

color: white !important;

}

.yanip-son-yesil .kart-ust,

.yanip-son-yesil .kart-durum {

color: white !important;

}

.empty { padding: 25px; text-align: center; color: #666; font-size: 13px; width: 100%; }

/* Tarama Sayacı Kutusu */

.tarama-sayac-kutusu {

margin-top: 20px;

padding: 10px 15px;

background: #f1f5f9;

border: 1px solid var(--m);

border-radius: 6px;

font-size: 13px;

font-weight: bold;

color: #0b4f8a;

text-align: center;

display: none;

}

</style>

</head>

<body>

<div>

<div class="title1">IP Erişim ve Alarm Paneli</div>

<div class="title2">Kullanıcı Destek Koordinatörlüğü</div>

</div>

Ağ ve Sistem İzleme Modülü

</div>

<div class="right">TEKNİK İŞLETME DAİRESİ BAŞKANLIĞI</div>

</div>

<div class="msg">Her satıra bir IP adresi yazarak takibi başlatabilirsiniz:</div>

<textarea id="ipListesi">192.168.0.95

192.168.1.179</textarea>

<button onclick="takibiBaslat()">Takibi ve Alarmı Başlat</button>

<button class="btn-stop" onclick="takiBiDurdur()">Durdur</button>

<button class="btn-danger" onclick="ipListesiniTemizle()">Temizle</button>

<span id="durumMesaji">Durum: Bekliyor</span>

</div>

<div class="empty">Henüz tarama yapılmadı. Başlat butonuna basınız.</div>

</div>

Aktif Tarama Döngüsü: <span id="sayacDegeri">0</span>. Tarama Gerçekleştirildi

</div>

let audioCtx = null;

let taramaZamanlayici = null;

let aktifAnimasyonlar = [];

let taramaSayaci = 0;

function sesMotorunuHazirla() {

if (!audioCtx) {

audioCtx = new (window.AudioContext || window.webkitAudioContext)();

}

if (audioCtx.state === 'suspended') {

audioCtx.resume();

}

function bipCal() {

try {

sesMotorunuHazirla();

const osc = audioCtx.createOscillator();

const gain = audioCtx.createGain();

osc.type = 'sine';

osc.frequency.setValueAtTime(1000, audioCtx.currentTime);

gain.gain.setValueAtTime(0.5, audioCtx.currentTime);

osc.connect(gain);

gain.connect(audioCtx.destination);

osc.start();

osc.stop(audioCtx.currentTime + 0.25);

} catch(e) {

console.log("Ses çalınamadı: ", e);

}

function ipListesiniTemizle() {

takiBiDurdur();

document.getElementById('ipListesi').value = '';

document.getElementById('ekranlarKonteyner').innerHTML = '<div class="empty">IP listesi temizlendi.</div>';

document.getElementById('durumMesaji').innerText = "Durum: Temizlendi";

document.getElementById('taramaSayacKutusu').style.display = 'none';

taramaSayaci = 0;

}

function takiBiDurdur() {

if (taramaZamanlayici) {

clearInterval(taramaZamanlayici);

taramaZamanlayici = null;

}

aktifAnimasyonlar.forEach(intervalId => clearInterval(intervalId));

aktifAnimasyonlar = [];

document.getElementById('durumMesaji').innerText = "Durum: Durduruldu";

}

async function ipErisimKontrol(ip) {

try {

const controller = new AbortController();

const timeoutId = setTimeout(() => controller.abort(), 1500);

await fetch(`http://${ip}`, { mode: 'no-cors', signal: controller.signal });

clearTimeout(timeoutId);

return true;

} catch (error) {

return false;

}

async function ipTarasiniCalistir() {

const ipText = document.getElementById('ipListesi').value;

const ips = ipText.split('\n').map(ip => ip.trim()).filter(ip => ip);

const konteyner = document.getElementById('ekranlarKonteyner');

if (ips.length === 0) return;

// Tarama sayacını artır ve kutuda göster

taramaSayaci++;

document.getElementById('sayacDegeri').innerText = taramaSayaci;

document.getElementById('taramaSayacKutusu').style.display = 'block';

// İlk turda veya liste değişiminde kartları oluştur

if (konteyner.querySelector('.empty') || konteyner.children.length !== ips.length) {

konteyner.innerHTML = '';

ips.forEach((ip, index) => {

let safeId = ip.replace(/\./g, '_') + '_' + index;

konteyner.innerHTML += `

<div class="kart-ust">${index + 1} - ${ip}</div>

<div class="kart-durum" id="status_${safeId}">Bekliyor...</div>

</div>

});

}

document.getElementById('durumMesaji').innerText = "Durum: Taranıyor...";

// Her bir IP'yi test etme

for (let i = 0; i < ips.length; i++) {

let ip = ips[i];

let safeId = ip.replace(/\./g, '_') + '_' + i;

let kart = document.getElementById(`kart_${safeId}`);

let iframe = document.getElementById(`frame_${safeId}`);

let durumEtiket = document.getElementById(`status_${safeId}`);

if (!kart) continue;

durumEtiket.innerText = "Test ediliyor...";

let erisildiMi = await ipErisimKontrol(ip);

if (erisildiMi) {

durumEtiket.innerText = "Erişildi! Alarm çalıyor...";

if (!iframe.src.includes(ip) || iframe.src === "about:blank") {

iframe.src = `http://${ip}`;

}

let tekrar = 0;

let interval = setInterval(() => {

kart.classList.toggle('yanip-son-yesil');

bipCal();

tekrar++;

if (tekrar >= 10) {

clearInterval(interval);

kart.classList.remove('yanip-son-yesil');

durumEtiket.innerText = "Bağlantı Başarılı (Tamamlandı)";

}

}, 400);

aktifAnimasyonlar.push(interval);

} else {

durumEtiket.innerText = "Erişilemedi";

iframe.srcdoc = "<div style='font-family:sans-serif; font-size:10px; padding:10px; color:red; text-align:center;'>Erişim Yok</div>";

}

function takibiBaslat() {

sesMotorunuHazirla();

takiBiDurdur();

// Yeni oturumda sayacı sıfırdan başlat

taramaSayaci = 0;

// Hemen ilk taramayı tetikle

ipTarasiniCalistir();

// Her 20 saniyede bir sürekli taramayı döngüye al

taramaZamanlayici = setInterval(ipTarasiniCalistir, 20000);

}

window.addEventListener('beforeunload', () => {

takiBiDurdur();

});

</script>

</body>

</html>