<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<title>İnternet Bağlantısı Kontrolü (3s, Basit Toast, No Reload)</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#A21B15"/>
<!-- Bootstrap 3 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait">
<div class="container" style="font-family: 'Strait', sans-serif;">
<h3>İnternet Bağlantısı Kontrolü (Image ping, 3s)</h3>
<p>Bağlantı durumu değiştiğinde ortada toast mesajı gösterir.</p>
<div id="result">Durum bilinmiyor...</div>
<button id="manualCheck" class="btn btn-primary btn-check">Anında Kontrol Et</button>
</div>
<!-- Toast kutusu -->
<div id="toast" class="toast"></div>
</body>
</html>
body { padding: 24px; font-family: Arial, Helvetica, sans-serif; }
#result { margin-top: 20px; font-size: 18px; }
.btn-check { margin-top: 12px; }
/* Merkezde gösterilen toast kutusu */
.toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(51, 51, 51, 0.95);
color: #fff;
padding: 14px 20px;
border-radius: 8px;
font-size: 16px;
display: none;
z-index: 9999;
min-width: 250px;
text-align: center;
box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
/* İkon stilleri */
.toast .glyphicon {
margin-right: 8px;
vertical-align: middle;
}
const PING_URL_BASE = "https://www.google.com/favicon.ico";
const PING_TIMEOUT_MS = 4000;
const POLL_INTERVAL_MS = 3000;
const TOAST_DURATION = 2000; // 2 saniye
let lastStatus = null;
let pollHandle = null;
/* Toast gösterimi */
function showToast(message, bgColor) {
const toast = $("#toast");
toast.css("background", bgColor);
toast.html(message);
toast.stop(true, true).fadeIn(300);
clearTimeout(toast.data("timeout"));
toast.data("timeout", setTimeout(() => {
toast.fadeOut(500);
}, TOAST_DURATION));
}
/* Durum yazısı */
function setResultText(text, color) {
$("#result").html(text).css("color", color);
}
/* Bağlantıyı image ping yöntemiyle test et */
function checkConnection() {
return new Promise((resolve) => {
const url = PING_URL_BASE + "?_=" + (Math.random() * 1e9);
const img = new Image();
let finished = false;
const to = setTimeout(() => {
if (finished) return;
finished = true;
cleanup();
resolve(false);
}, PING_TIMEOUT_MS);
function cleanup() {
clearTimeout(to);
img.onload = img.onerror = null;
try { img.src = ""; } catch(e) {}
}
img.onload = function() {
if (finished) return;
finished = true;
cleanup();
resolve(true);
};
img.onerror = function() {
if (finished) return;
finished = true;
cleanup();
resolve(false);
};
img.src = url;
});
}
/* Bağlantı durumunu izle */
async function pollOnce() {
try {
const online = await checkConnection();
if (online) {
setResultText("<span class='glyphicon glyphicon-ok'></span> İnternet bağlantısı mevcut.", "green");
if (lastStatus === false || lastStatus === null) {
showToast('<span class="glyphicon glyphicon-ok"></span> İnternet bağlantısı aktif.', "#166534");
}
lastStatus = true;
} else {
setResultText("<span class='glyphicon glyphicon-remove'></span> İnternet bağlantısı yok!", "red");
if (lastStatus === true || lastStatus === null) {
showToast('<span class="glyphicon glyphicon-remove"></span> İnternet bağlantısı kayboldu.', "#b91c1c");
}
lastStatus = false;
}
} catch (err) {
setResultText("Hata: bağlantı kontrolü yapılamadı.", "gray");
lastStatus = false;
}
}
/* Başlat */
$(function() {
pollOnce();
pollHandle = setInterval(pollOnce, POLL_INTERVAL_MS);
$("#manualCheck").on("click", () => pollOnce());
window.addEventListener("offline", () => {
setResultText("<span class='glyphicon glyphicon-remove'></span> Tarayıcı offline sinyali: çevrimdışı.", "red");
});
window.addEventListener("online", () => {
pollOnce();
});
});
