Hugging Face's logo

Spaces:
Serttbbbnhb
/
https-huggingface-co-spaces-serttbbbnhb-https-enzostvs-deepsite-hf-space
Running

App Files Community
https-huggingface-co-spaces-serttbbbnhb-https-enzostvs-deepsite-hf-space / index.html
Serttbbbnhb's picture
Serttbbbnhb
Add 3 files
9cd9a35 verified
Raw History Blame Contribute Delete
24.7 kB
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deprem Güvenlik Uygulaması</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background-color: #f8fafc;
}
.shake-animation {
animation: shake 0.5s infinite;
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
.emergency-btn {
box-shadow: 0 0 15px rgba(220, 38, 38, 0.5);
}
.safety-card:hover {
transform: translateY(-5px);
transition: all 0.3s ease;
}
.earthquake-alert {
background: linear-gradient(135deg, #f59e0b, #ef4444);
}
.map-container {
height: 300px;
border-radius: 12px;
overflow: hidden;
}
</style>
</head>
<body class="min-h-screen">
<!-- Header -->
<header class="bg-white shadow-md">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-earthquake text-red-500 text-2xl"></i>
<h1 class="text-xl font-bold text-gray-800">Deprem Güvenlik Uygulaması</h1>
</div>
<div class="flex items-center space-x-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-bell mr-2"></i> Bildirimler
</button>
<div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
<i class="fas fa-user text-gray-600"></i>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<!-- Alert Section -->
<div class="earthquake-alert rounded-xl p-4 mb-8 text-white flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-exclamation-triangle text-2xl mr-3"></i>
<div>
<h3 class="font-bold text-lg">Deprem Uyarısı!</h3>
<p class="text-sm">Son 24 saat içinde 3.0 ve üzeri 5 deprem kaydedildi.</p>
</div>
</div>
<button class="bg-white text-red-500 px-4 py-2 rounded-lg font-medium">
Detayları Gör
</button>
</div>
<!-- Emergency Button -->
<div class="fixed bottom-8 right-8 z-50">
<button id="emergencyBtn" class="emergency-btn bg-red-600 hover:bg-red-700 text-white w-16 h-16 rounded-full flex items-center justify-center text-2xl shadow-lg">
<i class="fas fa-bell"></i>
</button>
</div>
<!-- Dashboard -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<!-- Recent Earthquakes -->
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold text-gray-800">Son Depremler</h2>
<span class="text-xs bg-red-100 text-red-600 px-2 py-1 rounded-full">Canlı</span>
</div>
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-red-100 p-2 rounded-lg mr-3">
<i class="fas fa-map-marker-alt text-red-500"></i>
</div>
<div>
<h3 class="font-medium">İzmir, Türkiye</h3>
<p class="text-sm text-gray-500">4.2 büyüklüğünde - 15 dakika önce</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-yellow-100 p-2 rounded-lg mr-3">
<i class="fas fa-map-marker-alt text-yellow-500"></i>
</div>
<div>
<h3 class="font-medium">İstanbul, Türkiye</h3>
<p class="text-sm text-gray-500">3.7 büyüklüğünde - 2 saat önce</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-orange-100 p-2 rounded-lg mr-3">
<i class="fas fa-map-marker-alt text-orange-500"></i>
</div>
<div>
<h3 class="font-medium">Ankara, Türkiye</h3>
<p class="text-sm text-gray-500">3.1 büyüklüğünde - 5 saat önce</p>
</div>
</div>
</div>
<button class="mt-4 w-full bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 rounded-lg text-sm font-medium">
Tümünü Gör
</button>
</div>
<!-- Safety Checklist -->
<div class="bg-white rounded-xl shadow-md p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">Güvenlik Kontrol Listesi</h2>
<div class="space-y-3">
<div class="flex items-center">
<input type="checkbox" id="check1" class="rounded text-blue-500 mr-3">
<label for="check1" class="text-sm">Deprem çantası hazır</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="check2" class="rounded text-blue-500 mr-3">
<label for="check2" class="text-sm">Güvenli alanlar belirlendi</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="check3" class="rounded text-blue-500 mr-3">
<label for="check3" class="text-sm">Aile ile iletişim planı</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="check4" class="rounded text-blue-500 mr-3">
<label for="check4" class="text-sm">Mobilyalar sabitlendi</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="check5" class="rounded text-blue-500 mr-3">
<label for="check5" class="text-sm">İlk yardım eğitimi alındı</label>
</div>
</div>
<button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg text-sm font-medium">
Kontrol Listesini Kaydet
</button>
</div>
<!-- Emergency Contacts -->
<div class="bg-white rounded-xl shadow-md p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">Acil Durum Numaraları</h2>
<div class="space-y-3">
<div class="flex items-center justify-between bg-red-50 p-3 rounded-lg">
<div class="flex items-center">
<div class="bg-red-100 p-2 rounded-lg mr-3">
<i class="fas fa-ambulance text-red-500"></i>
</div>
<div>
<h3 class="font-medium">Acil Yardım</h3>
<p class="text-xs text-gray-500">Ambulans, İtfaiye, Polis</p>
</div>
</div>
<a href="tel:112" class="bg-red-500 text-white px-3 py-1 rounded-lg text-sm">112</a>
</div>
<div class="flex items-center justify-between bg-blue-50 p-3 rounded-lg">
<div class="flex items-center">
<div class="bg-blue-100 p-2 rounded-lg mr-3">
<i class="fas fa-hospital text-blue-500"></i>
</div>
<div>
<h3 class="font-medium">AFAD</h3>
<p class="text-xs text-gray-500">Afet ve Acil Durum</p>
</div>
</div>
<a href="tel:122" class="bg-blue-500 text-white px-3 py-1 rounded-lg text-sm">122</a>
</div>
<div class="flex items-center justify-between bg-green-50 p-3 rounded-lg">
<div class="flex items-center">
<div class="bg-green-100 p-2 rounded-lg mr-3">
<i class="fas fa-phone-alt text-green-500"></i>
</div>
<div>
<h3 class="font-medium">Alo Deprem</h3>
<p class="text-xs text-gray-500">Deprem Bilgi Hattı</p>
</div>
</div>
<a href="tel:1866" class="bg-green-500 text-white px-3 py-1 rounded-lg text-sm">1866</a>
</div>
</div>
<button class="mt-4 w-full bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 rounded-lg text-sm font-medium">
Tüm Numaralar
</button>
</div>
</div>
<!-- Safety Guide -->
<div class="bg-white rounded-xl shadow-md p-6 mb-8">
<h2 class="text-lg font-semibold text-gray-800 mb-4">Deprem Anında Yapılması Gerekenler</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="safety-card bg-white border border-gray-200 rounded-lg p-4">
<div class="bg-blue-100 w-12 h-12 rounded-lg flex items-center justify-center mb-3">
<i class="fas fa-home text-blue-500 text-xl"></i>
</div>
<h3 class="font-medium mb-2">Evdeyseniz</h3>
<p class="text-sm text-gray-600">Sağlam bir masa veya mobilya yanına çök-kapan-tutun pozisyonu alın. Pencerelerden uzak durun.</p>
</div>
<div class="safety-card bg-white border border-gray-200 rounded-lg p-4">
<div class="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center mb-3">
<i class="fas fa-building text-green-500 text-xl"></i>
</div>
<h3 class="font-medium mb-2">Dışarıdaysanız</h3>
<p class="text-sm text-gray-600">Açık alana gidin. Binalardan, elektrik direklerinden ve ağaçlardan uzak durun.</p>
</div>
<div class="safety-card bg-white border border-gray-200 rounded-lg p-4">
<div class="bg-purple-100 w-12 h-12 rounded-lg flex items-center justify-center mb-3">
<i class="fas fa-car text-purple-500 text-xl"></i>
</div>
<h3 class="font-medium mb-2">Araçtaysanız</h3>
<p class="text-sm text-gray-600">Aracı güvenli bir yere çekin. Köprü, üst geçit ve tünel girişlerinden uzak durun.</p>
</div>
</div>
</div>
<!-- Earthquake Map -->
<div class="bg-white rounded-xl shadow-md p-6 mb-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold text-gray-800">Deprem Haritası</h2>
<div class="flex space-x-2">
<button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg text-sm">
<i class="fas fa-filter mr-1"></i> Filtrele
</button>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded-lg text-sm">
<i class="fas fa-sync-alt mr-1"></i> Yenile
</button>
</div>
</div>
<div class="map-container bg-gray-200 flex items-center justify-center">
<p class="text-gray-500">Harita yükleniyor...</p>
<!-- In a real app, you would integrate with Google Maps or similar API -->
</div>
</div>
<!-- Emergency Kit -->
<div class="bg-white rounded-xl shadow-md p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">Deprem Çantası İçeriği</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="flex flex-col items-center p-3 border border-gray-200 rounded-lg">
<div class="bg-yellow-100 w-10 h-10 rounded-lg flex items-center justify-center mb-2">
<i class="fas fa-bottle-water text-yellow-500"></i>
</div>
<p class="text-xs text-center">Su (3 günlük)</p>
</div>
<div class="flex flex-col items-center p-3 border border-gray-200 rounded-lg">
<div class="bg-red-100 w-10 h-10 rounded-lg flex items-center justify-center mb-2">
<i class="fas fa-burger text-red-500"></i>
</div>
<p class="text-xs text-center">Dayanıklı gıda</p>
</div>
<div class="flex flex-col items-center p-3 border border-gray-200 rounded-lg">
<div class="bg-blue-100 w-10 h-10 rounded-lg flex items-center justify-center mb-2">
<i class="fas fa-first-aid text-blue-500"></i>
</div>
<p class="text-xs text-center">İlk yardım çantası</p>
</div>
<div class="flex flex-col items-center p-3 border border-gray-200 rounded-lg">
<div class="bg-green-100 w-10 h-10 rounded-lg flex items-center justify-center mb-2">
<i class="fas fa-lightbulb text-green-500"></i>
</div>
<p class="text-xs text-center">El feneri</p>
</div>
<div class="flex flex-col items-center p-3 border border-gray-200 rounded-lg">
<div class="bg-purple-100 w-10 h-10 rounded-lg flex items-center justify-center mb-2">
<i class="fas fa-battery-full text-purple-500"></i>
</div>
<p class="text-xs text-center">Yedek pil</p>
</div>
<div class="flex flex-col items-center p-3 border border-gray-200 rounded-lg">
<div class="bg-pink-100 w-10 h-10 rounded-lg flex items-center justify-center mb-2">
<i class="fas fa-radio text-pink-500"></i>
</div>
<p class="text-xs text-center">Radyo</p>
</div>
<div class="flex flex-col items-center p-3 border border-gray-200 rounded-lg">
<div class="bg-indigo-100 w-10 h-10 rounded-lg flex items-center justify-center mb-2">
<i class="fas fa-file text-indigo-500"></i>
</div>
<p class="text-xs text-center">Önemli belgeler</p>
</div>
<div class="flex flex-col items-center p-3 border border-gray-200 rounded-lg">
<div class="bg-gray-100 w-10 h-10 rounded-lg flex items-center justify-center mb-2">
<i class="fas fa-plus text-gray-500"></i>
</div>
<p class="text-xs text-center">Daha fazla...</p>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="font-bold mb-4">Deprem Güvenlik Uygulaması</h3>
<p class="text-sm text-gray-300">Türkiye'de deprem güvenliği için hazırlanmış kapsamlı bir uygulama.</p>
</div>
<div>
<h3 class="font-bold mb-4">Hızlı Linkler</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="text-gray-300 hover:text-white">Son Depremler</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Güvenlik Rehberi</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Acil Durum Numaraları</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Deprem Çantası</a></li>
</ul>
</div>
<div>
<h3 class="font-bold mb-4">Yararlı Linkler</h3>
<ul class="space-y-2 text-sm">
<li><a href="https://www.afad.gov.tr" class="text-gray-300 hover:text-white">AFAD</a></li>
<li><a href="https://www.kandilli.gov.tr" class="text-gray-300 hover:text-white">Kandilli Rasathanesi</a></li>
<li><a href="https://www.ibb.gov.tr" class="text-gray-300 hover:text-white">İstanbul Büyükşehir</a></li>
<li><a href="https://www.tbmm.gov.tr" class="text-gray-300 hover:text-white">TBMM Deprem Raporu</a></li>
</ul>
</div>
<div>
<h3 class="font-bold mb-4">İletişim</h3>
<ul class="space-y-2 text-sm">
<li class="flex items-center"><i class="fas fa-envelope mr-2 text-gray-300"></i> info@depremguvenlik.com</li>
<li class="flex items-center"><i class="fas fa-phone mr-2 text-gray-300"></i> 0850 123 45 67</li>
<li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-gray-300"></i> İstanbul, Türkiye</li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-6 text-sm text-gray-400 text-center">
<p>© 2023 Deprem Güvenlik Uygulaması. Tüm hakları saklıdır.</p>
</div>
</div>
</footer>
<!-- Emergency Modal -->
<div id="emergencyModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-red-600">ACİL DURUM!</h3>
<button id="closeModal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-6">
<p class="text-gray-700 mb-4">Acil durum butonuna bastınız. Yardım mı gerekiyor?</p>
<div class="space-y-3">
<button class="w-full bg-red-500 hover:bg-red-600 text-white py-3 rounded-lg font-medium flex items-center justify-center">
<i class="fas fa-phone-alt mr-2"></i> 112'yi Ara
</button>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-medium flex items-center justify-center">
<i class="fas fa-user-friends mr-2"></i> Yakınlarıma Bildir
</button>
<button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-700 py-3 rounded-lg font-medium">
İptal
</button>
</div>
</div>
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-exclamation-circle text-yellow-500"></i>
</div>
<div class="ml-3">
<p class="text-sm text-yellow-700">
Deprem anında sakin olun, çök-kapan-tutun hareketini uygulayın ve sarsıntı bitene kadar güvenli pozisyonunuzu koruyun.
</p>
</div>
</div>
</div>
</div>
</div>
<script>
// Emergency Button Functionality
const emergencyBtn = document.getElementById('emergencyBtn');
const emergencyModal = document.getElementById('emergencyModal');
const closeModal = document.getElementById('closeModal');
emergencyBtn.addEventListener('click', () => {
emergencyModal.classList.remove('hidden');
// Add shake animation to button
emergencyBtn.classList.add('shake-animation');
});
closeModal.addEventListener('click', () => {
emergencyModal.classList.add('hidden');
emergencyBtn.classList.remove('shake-animation');
});
// Simulate earthquake alert (for demo purposes)
setTimeout(() => {
const alertSound = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3');
alertSound.play();
const alertDiv = document.createElement('div');
alertDiv.className = 'fixed bottom-4 left-4 right-4 bg-red-600 text-white p-4 rounded-lg shadow-lg z-50 flex items-center justify-between';
alertDiv.innerHTML = `
<div class="flex items-center">
<i class="fas fa-exclamation-triangle text-2xl mr-3"></i>
<div>
<h3 class="font-bold">DEPREM UYARISI!</h3>
<p class="text-sm">4.2 büyüklüğünde deprem - 10 km uzaklıkta</p>
</div>
</div>
<button id="closeAlert" class="bg-white text-red-600 px-3 py-1 rounded-lg text-sm font-medium">
Kapat
</button>
`;
document.body.appendChild(alertDiv);
document.getElementById('closeAlert').addEventListener('click', () => {
alertDiv.remove();
});
// Auto remove after 10 seconds
setTimeout(() => {
if(document.body.contains(alertDiv)) {
alertDiv.remove();
}
}, 10000);
}, 3000);
// Checklist functionality
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
if(this.checked) {
this.parentElement.classList.add('line-through');
this.parentElement.classList.add('text-gray-400');
} else {
this.parentElement.classList.remove('line-through');
this.parentElement.classList.remove('text-gray-400');
}
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Serttbbbnhb/https-huggingface-co-spaces-serttbbbnhb-https-enzostvs-deepsite-hf-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>