<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>DEPREM SİSTEMİ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
:root {
--bg: #121212;
--panel: #1e1e1e;
--text: #e0e0e0;
--accent: #ff3b30;
--green: #30d158;
--border: #333;
}
body {
background-color: var(--bg);
color: var(--text);
font-family: 'Consolas', 'Monaco', monospace;
margin: 0; padding: 10px;
font-size: 13px;
}
header {
background: var(--panel);
padding: 15px; border-radius: 6px;
border-bottom: 2px solid var(--green);
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 15px;
}
h1 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.live-dot { width: 10px; height: 10px; background: var(--green); border-radius: 50%; box-shadow: 0 0 10px var(--green); }
.blink { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.status-box { text-align: right; font-size: 0.85rem; color: #888; }
.btn-sound {
background: #333; color: white; border: 1px solid #555; padding: 5px 10px; cursor: pointer; border-radius: 4px;
}
.table-wrap { overflow-x: auto; background: var(--panel); border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border); }
th { background: #252525; position: sticky; top: 0; color: #aaa; font-weight: 600; }
tr:hover { background-color: #2a2a2a; }
.mag-badge {
padding: 3px 8px; border-radius: 4px; font-weight: bold; display: inline-block; width: 40px; text-align: center;
}
.low { color: #30d158; background: rgba(48, 209, 88, 0.1); }
.med { color: #ffd60a; background: rgba(255, 214, 10, 0.1); }
.high { color: #ff453a; background: rgba(255, 69, 58, 0.2); animation: shake 0.5s; }
@keyframes shake {
0% { transform: translateX(0); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 100% { transform: translateX(0); }
}
.flash { animation: flashHighlight 1s ease-out; }
@keyframes flashHighlight { 0% { background-color: rgba(255, 255, 255, 0.2); } 100% { background-color: transparent; } }
.refresh-indicator {
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.7);
color: #30d158;
padding: 8px 15px;
border-radius: 20px;
font-size: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.refresh-icon {
width: 14px;
height: 14px;
border: 2px solid #30d158;
border-radius: 50%;
border-top-color: transparent;
animation: spin 3s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<header>
<h1><span class="live-dot blink"></span> DEPREM SİSTEMİ CANLI</h1>
<div class="status-box">
<div id="connection-status">Sunucuya Bağlanıyor...</div>
<div style="margin-top:5px"><button onclick="enableAudio()" id="snd-btn" class="btn-sound">🔇 Sesi Aç</button></div>
</div>
</header>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Tarih</th>
<th>Saat</th>
<th>Büyüklük</th>
<th>Derinlik</th>
<th>Yer</th>
<th>Koord (E/B)</th>
</tr>
</thead>
<tbody id="quake-body">
<tr><td colspan="6" style="text-align:center; padding:20px;">Veriler yükleniyor...</td></tr>
</tbody>
</table>
</div>
<div class="refresh-indicator">
<div class="refresh-icon"></div>
<span>3 saniyede bir yenileniyor</span>
</div>
<script>
// Önbellek sorununu aşmak için rastgele parametre ekleyeceğiz
const API_BASE = "https://api.orhanaydogdu.com.tr/deprem/kandilli/live";
// Yenileme aralığını milisaniye cinsinden belirleyelim
const REFRESH_INTERVAL = 3000; // 3 saniye
let lastQuakeID = "";
let audioCtx = null;
let soundOn = false;
let refreshTimer = null;
function enableAudio() {
soundOn = true;
const btn = document.getElementById('snd-btn');
btn.innerText = "🔊 Ses Aktif";
btn.style.borderColor = "#30d158";
btn.style.color = "#30d158";
if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
audioCtx.resume();
}
function playBeep(isHigh) {
if (!soundOn || !audioCtx) return;
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.frequency.value = isHigh ? 220 : 600;
osc.type = isHigh ? 'square' : 'sine';
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.start();
gain.gain.exponentialRampToValueAtTime(0.00001, audioCtx.currentTime + (isHigh ? 1 : 0.2));
osc.stop(audioCtx.currentTime + (isHigh ? 1 : 0.2));
}
async function fetchQuakes() {
try {
// URL sonuna rastgele sayı ekleyerek her seferinde taze veri çekiyoruz (?v=...)
const response = await fetch(API_BASE + "?v=" + Math.random());
const data = await response.json();
if (data.status && data.result && data.result.length > 0) {
updateTable(data.result);
updateStatus(true);
}
} catch (error) {
console.warn("Veri çekme hatası:", error);
updateStatus(false);
}
}
function updateStatus(isOnline) {
const statEl = document.getElementById('connection-status');
const now = new Date();
const timeStr = now.toLocaleTimeString();
if (isOnline) {
statEl.innerHTML = `<span style="color:#30d158">● Çevrimiçi</span> - ${timeStr}`;
} else {
statEl.innerHTML = `<span style="color:#ff3b30">● Bağlantı Hatası</span> - Tekrar deneniyor...`;
}
}
function updateTable(quakes) {
const tbody = document.getElementById('quake-body');
// Veri yoksa çık
if (!quakes || quakes.length === 0) return;
// ID kontrolü (Tarih verisi bozuksa ID olarak başlığı kullanalım)
const firstQ = quakes[0];
const currentID = (firstQ.date || firstQ.date_time || "nodate") + firstQ.mag + firstQ.title;
if (currentID === lastQuakeID) return;
if (lastQuakeID !== "") {
const mag = parseFloat(firstQ.mag);
playBeep(mag >= 4.0);
}
lastQuakeID = currentID;
tbody.innerHTML = "";
quakes.slice(0, 50).forEach((q, index) => {
try {
// --- KESİN ÇÖZÜM TARİH FORMATLAMA ---
// 1. Olası tüm tarih alanlarını kontrol et
let rawDate = q.date || q.date_time || q.created_at;
let datePart = "";
let timePart = "";
if (rawDate) {
// Veri string değilse stringe çevir
rawDate = String(rawDate);
// Eğer veri "2024.12.02 01:22:33" formatındaysa (en yaygın)
if (rawDate.length >= 10) {
// T harfini boşluğa çevir (ISO formatı koruması)
rawDate = rawDate.replace("T", " ");
// Direkt karakter sırasına göre kes (Split hatasını engeller)
datePart = rawDate.substring(0, 10); // İlk 10 karakter (Tarih)
if (rawDate.length > 11) {
timePart = rawDate.substring(11, 19); // 11. karakterden sonrası (Saat)
} else {
timePart = "-";
}
} else {
// Format çok garipse olduğu gibi bas
datePart = rawDate;
timePart = "?";
}
} else {
datePart = "Belirsiz";
timePart = "-";
}
// Koordinat
let lat = "0.00";
let lng = "0.00";
if (q.geojson && q.geojson.coordinates) {
lat = q.geojson.coordinates[1].toFixed(4);
lng = q.geojson.coordinates[0].toFixed(4);
}
const tr = document.createElement('tr');
if (index === 0) tr.classList.add('flash');
let magClass = "low";
const m = parseFloat(q.mag);
if (m >= 3.0) magClass = "med";
if (m >= 4.0) magClass = "high";
tr.innerHTML = `
<td style="color:#888">${datePart}</td>
<td style="font-weight:bold; color:#fff; font-size:1.1em">${timePart}</td>
<td><span class="mag-badge ${magClass}">${q.mag}</span></td>
<td>${q.depth} km</td>
<td style="color:#ccc">${q.title}</td>
<td style="font-family:monospace; color:#666">${lat} / ${lng}</td>
`;
tbody.appendChild(tr);
} catch (err) {
console.error("Satır hatası:", err);
}
});
}
// İlk veri çekme işlemini başlat
fetchQuakes();
// Belirtilen aralıklarla veri çekme işlemini tekrarla
refreshTimer = setInterval(fetchQuakes, REFRESH_INTERVAL);
</script>
</body>
</html>
selamlar kodları masasütüne .html olarak kaydedin ve yukardan sesi açın deprem bildirimi geldikçe ses verecek 3 saniyede 1 yenileme afadı solladık afad 23:54 verirken biz 23:59 veriyoruz çok gerimizde masaüstünüzde kullanın sistem yapay zeka ile yapıldı iyi forumlar