Kullanıcı:
Filtreler

Yapay Zeka ile Global Deprem Sistemi

O
O

ozgurarslan

Kayıtlı Üye
Katılım
8 Temmuz 2018
Mesajlar
83
Tepkime puanı
14
Puan
8
Konum
ankara
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Küresel Canlı Deprem İzleme Sistemi</title>

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

<style>
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
display: flex;
height: 100vh;
background-color: #1e1e1e; /* Koyu Mod */
color: #ecf0f1;
overflow: hidden;
}

/* Sol Taraf: Harita Alanı */
#map-container {
flex: 3;
position: relative;
}

#map {
height: 100%;
width: 100%;
z-index: 1;
}

/* Sağ Taraf: Deprem Listesi Paneli */
#sidebar {
flex: 1;
background-color: #2c3e50;
display: flex;
flex-direction: column;
border-left: 2px solid #34495e;
min-width: 300px;
max-width: 400px;
}

/* Panel Başlığı */
.header {
padding: 20px;
background-color: #34495e;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.header h2 {
margin: 0;
font-size: 1.2rem;
color: #ecf0f1;
}

.header p {
margin: 5px 0 0;
font-size: 0.8rem;
color: #bdc3c7;
}

/* Liste Alanı */
#quake-list {
flex: 1;
overflow-y: auto;
padding: 10px;
}

/* Liste Elemanları */
.quake-item {
background-color: #34495e;
margin-bottom: 10px;
padding: 15px;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
border-left: 5px solid #95a5a6;
display: flex;
justify-content: space-between;
align-items: center;
}

.quake-item:hover {
background-color: #465c71;
}

.quake-info h4 {
margin: 0 0 5px;
font-size: 0.95rem;
}

.quake-info p {
margin: 0;
font-size: 0.8rem;
color: #bdc3c7;
}

.quake-mag {
font-size: 1.2rem;
font-weight: bold;
padding: 5px 10px;
border-radius: 5px;
color: #fff;
min-width: 40px;
text-align: center;
}

/* Deprem Şiddeti Renk Kodları */
.mag-low { border-left-color: #2ecc71; } /* Yeşil */
.badge-low { background-color: #2ecc71; }

.mag-med { border-left-color: #f1c40f; } /* Sarı */
.badge-med { background-color: #f39c12; color: #fff; }

.mag-high { border-left-color: #e74c3c; } /* Kırmızı */
.badge-high { background-color: #e74c3c; }

.mag-crit { border-left-color: #8e44ad; } /* Mor */
.badge-crit { background-color: #8e44ad; }

/* Scrollbar Tasarımı */
#quake-list::-webkit-scrollbar {
width: 8px;
}
#quake-list::-webkit-scrollbar-thumb {
background-color: #7f8c8d;
border-radius: 4px;
}

/* Mobil Uyumluluk */
@Media (max-width: 768px) {
body { flex-direction: column; }
#map-container { flex: 2; }
#sidebar { flex: 1; width: 100%; min-width: 100%; max-width: 100%; border-left: none; border-top: 2px solid #34495e; }
}

/* Loading */
#loading {
text-align: center;
padding: 20px;
color: #bdc3c7;
}

.legend {
position: absolute;
bottom: 30px;
left: 30px;
background: rgba(44, 62, 80, 0.9);
padding: 10px;
border-radius: 5px;
z-index: 1000;
font-size: 12px;
pointer-events: none;
}
.legend-item { margin-bottom: 5px; display: flex; align-items: center; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; }
</style>
</head>
<body>

<div id="map-container">
<div id="map"></div>
<div class="legend">
<div class="legend-item"><span class="dot" style="background:#2ecc71"></span> < 4.0 (Hafif)</div>
<div class="legend-item"><span class="dot" style="background:#f39c12"></span> 4.0 - 5.5 (Orta)</div>
<div class="legend-item"><span class="dot" style="background:#e74c3c"></span> 5.5 - 7.0 (Şiddetli)</div>
<div class="legend-item"><span class="dot" style="background:#8e44ad"></span> > 7.0 (Kritik)</div>
</div>
</div>

<div id="sidebar">
<div class="header">
<h2>🌍 Küresel Deprem Monitörü</h2>
<p>Son 24 Saat | Veri Kaynağı: USGS</p>
<p id="last-updated">Güncelleniyor...</p>
</div>
<div id="quake-list">
<div id="loading">Veriler Yükleniyor...</div>
</div>
</div>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<script>
// 1. Haritayı Başlat (Merkez: Dünya Geneli)
const map = L.map('map').setView([39.0, 35.0], 3); // Türkiye odaklı başlar ama zoom uzak

// OpenStreetMap Katmanı (Koyu tonlu harita kullanımı)
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);

// Deprem Verilerini Saklayacağımız Dizi
let earthquakes = [];
let markers = L.layerGroup().addTo(map);

// 2. Renk Belirleme Fonksiyonu
function getColor(mag) {
if (mag >= 7.0) return '#8e44ad'; // Kritik (Mor)
if (mag >= 5.5) return '#e74c3c'; // Yüksek (Kırmızı)
if (mag >= 4.0) return '#f39c12'; // Orta (Turuncu)
return '#2ecc71'; // Düşük (Yeşil)
}

function getClassName(mag) {
if (mag >= 7.0) return ['mag-crit', 'badge-crit'];
if (mag >= 5.5) return ['mag-high', 'badge-high'];
if (mag >= 4.0) return ['mag-med', 'badge-med'];
return ['mag-low', 'badge-low'];
}

// 3. Tarih Formatlama
function formatTime(timestamp) {
const date = new Date(timestamp);
return date.toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' });
}

// 4. Verileri Çekme Fonksiyonu (USGS API)
async function fetchEarthquakes() {
const listContainer = document.getElementById('quake-list');
const updateLabel = document.getElementById('last-updated');

try {
// USGS'den Son 24 Saatteki tüm 2.5+ depremleri çek
const response = await fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson');
const data = await response.json();

// Önce temizle
markers.clearLayers();
listContainer.innerHTML = '';

earthquakes = data.features;

// Depremleri listeye ve haritaya ekle
earthquakes.forEach(quake => {
const coords = quake.geometry.coordinates; // [boylam, enlem, derinlik]
const props = quake.properties;
const mag = props.mag.toFixed(1);
const place = props.place;
const time = formatTime(props.time);
const color = getColor(mag);
const classes = getClassName(mag);

// A. Haritaya Yuvarlak Marker Ekle
const circle = L.circleMarker([coords[1], coords[0]], {
radius: mag * 2, // Büyüklüğe göre çap
fillColor: color,
color: "#fff",
weight: 1,
opacity: 1,
fillOpacity: 0.7
});

// Popup (Tıklayınca açılan bilgi)
circle.bindPopup(`
<strong>${place}</strong><br>
Büyüklük: ${mag}<br>
Saat: ${time}<br>
Derinlik: ${coords[2]} km
`);

markers.addLayer(circle);

// B. Sağ Panele Liste Ekle
const item = document.createElement('div');
item.className = `quake-item ${classes[0]}`;
item.innerHTML = `
<div class="quake-info">
<h4>${place}</h4>
<p>Saat: ${time} | Derinlik: ${coords[2]} km</p>
</div>
<div class="quake-mag ${classes[1]}">${mag}</div>
`;

// Listeye tıklayınca haritada oraya git
item.addEventListener('click', () => {
map.flyTo([coords[1], coords[0]], 8, {
animate: true,
duration: 1.5
});
circle.openPopup();
});

listContainer.appendChild(item);
});

// Son güncelleme saati
const now = new Date();
updateLabel.innerText = 'Son Güncelleme: ' + now.toLocaleTimeString('tr-TR');

} catch (error) {
listContainer.innerHTML = '<p style="text-align:center; color:red;">Veri alınırken hata oluştu!<br>İnternet bağlantınızı kontrol edin.</p>';
console.error("Hata:", error);
}
}

// Başlangıçta çalıştır
fetchEarthquakes();

// Her 60 saniyede bir verileri yenile
setInterval(fetchEarthquakes, 60000);

</script>
</body>
</html>

Üsteki global deprem sistemi kodları

alttaki ayzerbaycan bölgesi için deprem sistemi kodları

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Azerbaycan Canlı Deprem İzleme</title>

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

<style>
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
display: flex;
height: 100vh;
background-color: #1e1e1e;
color: #ecf0f1;
overflow: hidden;
}

#map-container {
flex: 3;
position: relative;
}

#map {
height: 100%;
width: 100%;
z-index: 1;
}

#sidebar {
flex: 1;
background-color: #2c3e50;
display: flex;
flex-direction: column;
border-left: 2px solid #34495e;
min-width: 320px;
max-width: 400px;
}

.header {
padding: 20px;
background: linear-gradient(135deg, #003366, #2c3e50); /* Azerbaycan bayrak tonları çağrışımı */
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
border-bottom: 3px solid #e74c3c;
}

.header h2 { margin: 0; font-size: 1.3rem; color: #fff; }
.header p { margin: 5px 0 0; font-size: 0.8rem; color: #bdc3c7; }

#quake-list {
flex: 1;
overflow-y: auto;
padding: 10px;
}

.quake-item {
background-color: #34495e;
margin-bottom: 10px;
padding: 15px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
border-left: 5px solid #95a5a6;
display: flex;
justify-content: space-between;
align-items: center;
}

.quake-item:hover {
background-color: #465c71;
transform: translateX(5px);
}

.quake-info h4 { margin: 0 0 5px; font-size: 0.95rem; }
.quake-info p { margin: 0; font-size: 0.8rem; color: #bdc3c7; }

.quake-mag {
font-size: 1.2rem;
font-weight: bold;
padding: 8px 12px;
border-radius: 5px;
color: #fff;
min-width: 45px;
text-align: center;
}

/* Renk Kodları */
.mag-low { border-left-color: #2ecc71; }
.badge-low { background-color: #2ecc71; }

.mag-med { border-left-color: #f1c40f; }
.badge-med { background-color: #f39c12; color: #fff; }

.mag-high { border-left-color: #e74c3c; }
.badge-high { background-color: #e74c3c; }

/* Mobil Uyumluluk */
@Media (max-width: 768px) {
body { flex-direction: column; }
#map-container { flex: 2; }
#sidebar { flex: 1; width: 100%; border-left: none; }
}

#loading { text-align: center; padding: 20px; color: #bdc3c7; }

.empty-state {
text-align: center;
padding: 30px;
color: #95a5a6;
font-style: italic;
}

.legend {
position: absolute;
bottom: 30px; left: 30px;
background: rgba(44, 62, 80, 0.9);
padding: 10px;
border-radius: 5px;
z-index: 1000;
font-size: 12px;
pointer-events: none;
}
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; }
</style>
</head>
<body>

<div id="map-container">
<div id="map"></div>
<div class="legend">
<div class="legend-item"><span class="dot" style="background:#2ecc71"></span> < 4.0 (Hafif)</div>
<div class="legend-item"><span class="dot" style="background:#f39c12"></span> 4.0 - 5.5 (Orta)</div>
<div class="legend-item"><span class="dot" style="background:#e74c3c"></span> > 5.5 (Şiddetli)</div>
</div>
</div>

<div id="sidebar">
<div class="header">
<h2>🇦🇿 Azerbaycan Deprem Monitörü</h2>
<p>Bölgesel Veri (Azerbaycan ve Sınırlar)</p>
<p id="last-updated">Yükleniyor...</p>
</div>
<div id="quake-list">
<div id="loading">Veriler Bölgesel Olarak Taranıyor...</div>
</div>
</div>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<script>
// 1. Harita Başlangıcı: Odak Azerbaycan (Bakü civarı merkezli)
const map = L.map('map').setView([40.4, 48.0], 7); // Zoom seviyesi 7 ile ülke görünümü

L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; OpenStreetMap &copy; CARTO',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);

let markers = L.layerGroup().addTo(map);

// 2. Azerbaycan Sınır Koordinatları (Filtre için)
// Kapsama alanı: Nahçıvan, Hazar Denizi kıyıları ve yakın sınırları içerir.
const AZERBAIJAN_BOUNDS = {
minLat: 38.0, // Güney (İran sınırı)
maxLat: 42.0, // Kuzey (Rusya sınırı)
minLon: 44.0, // Batı (Türkiye/Ermenistan sınırı)
maxLon: 52.0 // Doğu (Hazar Denizi içleri)
};

function getColor(mag) {
if (mag >= 5.5) return '#e74c3c';
if (mag >= 4.0) return '#f39c12';
return '#2ecc71';
}

function getClassName(mag) {
if (mag >= 5.5) return ['mag-high', 'badge-high'];
if (mag >= 4.0) return ['mag-med', 'badge-med'];
return ['mag-low', 'badge-low'];
}

function formatTime(timestamp) {
return new Date(timestamp).toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' });
}

async function fetchAzerbaijanEarthquakes() {
const listContainer = document.getElementById('quake-list');
const updateLabel = document.getElementById('last-updated');

try {
// USGS'den tüm günlük veriyi çekiyoruz (daha küçük depremleri kaçırmamak için)
const response = await fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
const data = await response.json();

markers.clearLayers();
listContainer.innerHTML = '';

// 3. Veriyi Sadece Azerbaycan Koordinatlarına Göre Filtrele
const regionalQuakes = data.features.filter(quake => {
const [lon, lat] = quake.geometry.coordinates;
return lat >= AZERBAIJAN_BOUNDS.minLat &&
lat <= AZERBAIJAN_BOUNDS.maxLat &&
lon >= AZERBAIJAN_BOUNDS.minLon &&
lon <= AZERBAIJAN_BOUNDS.maxLon;
});

if (regionalQuakes.length === 0) {
listContainer.innerHTML = `
<div class="empty-state">
<h3>Sakin Görünüyor</h3>
<p>Son 24 saat içinde Azerbaycan ve yakın çevresinde USGS tarafından raporlanan deprem bulunamadı.</p>
</div>
`;
} else {
regionalQuakes.forEach(quake => {
const coords = quake.geometry.coordinates;
const props = quake.properties;
const mag = props.mag.toFixed(1);
const place = props.place; // Konum adı genellikle İngilizce gelir
const time = formatTime(props.time);
const color = getColor(mag);
const classes = getClassName(mag);

// Harita İşaretçisi
const circle = L.circleMarker([coords[1], coords[0]], {
radius: Math.max(mag * 3, 5), // Görünür olması için minimum boyut
fillColor: color,
color: "#fff",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});

circle.bindPopup(`<strong>${place}</strong><br>Büyüklük: ${mag}<br>Derinlik: ${coords[2]} km`);
markers.addLayer(circle);

// Liste Öğesi
const item = document.createElement('div');
item.className = `quake-item ${classes[0]}`;
item.innerHTML = `
<div class="quake-info">
<h4>${place}</h4>
<p>Saat: ${time} | Derinlik: ${coords[2]} km</p>
</div>
<div class="quake-mag ${classes[1]}">${mag}</div>
`;

item.addEventListener('click', () => {
map.flyTo([coords[1], coords[0]], 10);
circle.openPopup();
});

listContainer.appendChild(item);
});
}

const now = new Date();
updateLabel.innerText = 'Son Kontrol: ' + now.toLocaleTimeString('tr-TR');

} catch (error) {
listContainer.innerHTML = '<p style="text-align:center; color:#e74c3c;">Veri sunucusuna ulaşılamadı.</p>';
console.error(error);
}
}

fetchAzerbaijanEarthquakes();
setInterval(fetchAzerbaijanEarthquakes, 60000); // 1 dakikada bir yenile
</script>
</body>
</html>

433032894.png



2636450370.png



Selamlar global deprem sistemi çalışıyor azerbaycan sistemi çalışmıyor sanırım yinede ekledim @YouByVRO iyi forumlar
 
Cevap yazmak için giriş yap yada kayıt ol.
Kişiselleştirme

Tema editörü

Ayarlar Renkler

  • Mobil kullanıcılar bu fonksiyonları kullanamaz.

    Alternatif header

    Farklı bir görünüm için alternatif header yapısını kolayca seçebilirsiniz.

    Görünüm Modu Seçimi

    Tam ekran ve dar ekran modları arasında geçiş yapın.

    Izgara Görünümü

    Izgara modu ile içerikleri kolayca inceleyin ve düzenli bir görünüm elde edin.

    Resimli Izgara Modu

    Arka plan görselleriyle içeriğinizi düzenli ve görsel olarak zengin bir şekilde görüntüleyin.

    Yan Paneli Kapat

    Yan paneli gizleyerek daha geniş bir çalışma alanı oluşturun.

    Sabit Yan Panel

    Yan paneli sabitleyerek sürekli erişim sağlayın ve içeriğinizi kolayca yönetin.

    Box görünüm

    Temanızın yanlarına box tarzı bir çerçeve ekleyebilir veya mevcut çerçeveyi kaldırabilirsiniz. 1300px üstü çözünürler için geçerlidir.

    Köşe Yuvarlama Kontrolü

    Köşe yuvarlama efektini açıp kapatarak görünümü dilediğiniz gibi özelleştirin.

  • Renginizi seçin

    Tarzınızı yansıtan rengi belirleyin ve estetik uyumu sağlayın.
Geri