Yapay zekanın pek de zeki olmayanı ile yaptım arkadaşlar. Güzel duruyor. Geliştirmeye fazlasıyla açık. İhtiyacı olan kullanabilir.
AviationStack apisi ile çalışıyor, bilginize.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkyPro | Akıllı Uçuş Arama</title>
<style>
:root {
--primary: #2563eb; --dark: #0f172a; --bg: #f8fafc; --success: #10b981; --error: #ef4444;
}
* { box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { background: var(--bg); margin: 0; padding: 15px; color: var(--dark); }
.container { max-width: 600px; margin: auto; }
/* Bağlantı Durumu Şeridi */
.status-header {
display: flex; align-items: center; justify-content: space-between;
background: white; padding: 10px 20px; border-radius: 12px;
margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.dot { width: 12px; height: 12px; border-radius: 50%; background: #ccc; margin-right: 8px; display: inline-block; }
.online { background: var(--success); box-shadow: 0 0 8px var(--success); }
.offline { background: var(--error); }
/* Form Elemanları */
.search-card { background: white; padding: 25px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.input-group { margin-bottom: 15px; }
label { display: block; font-size: 0.8rem; font-weight: 700; color: #64748b; margin-bottom: 5px; }
select, input { width: 100%; padding: 12px; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 1rem; outline: none; }
.main-btn {
width: 100%; background: var(--primary); color: white; border: none;
padding: 15px; border-radius: 10px; font-weight: bold; cursor: pointer; margin-top: 10px;
}
/* Popup (Modal) Tasarımı */
.modal {
display: none; position: fixed; z-index: 100; left: 0; top: 0;
width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
}
.modal-content {
background: white; width: 90%; max-width: 400px; margin: 15% auto;
padding: 25px; border-radius: 15px; text-align: center;
}
.settings-btn { background: none; border: 1px solid #ddd; padding: 5px 10px; border-radius: 5px; cursor: pointer; font-size: 0.8rem; }
/* Uçuş Kartı */
.flight-card {
background: white; padding: 15px; border-radius: 12px; margin-top: 15px;
display: flex; justify-content: space-between; align-items: center;
border-left: 5px solid var(--primary); animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
</style>
</head>
<body>
<div class="container">
<div class="status-header">
<div>
<span id="statusDot" class="dot"></span>
<span id="statusText" style="font-size: 0.85rem; font-weight: 600;">Sistem Hazır</span>
</div>
<button class="settings-btn" onclick="toggleModal(true)">⚙️ API Ayarları</button>
</div>
<div class="search-card">
<div class="input-group">
<label>KALKIŞ ŞEHRİ</label>
<select id="depCity">
<option value="IST">İstanbul (IST)</option>
<option value="ESB">Ankara (ESB)</option>
<option value="ADB">İzmir (ADB)</option>
<option value="AYT">Antalya (AYT)</option>
<option value="LHR">Londra (LHR)</option>
<option value="JFK">New York (JFK)</option>
</select>
</div>
<div class="input-group">
<label>VARIŞ ŞEHRİ</label>
<select id="arrCity">
<option value="LHR">Londra (LHR)</option>
<option value="IST">İstanbul (IST)</option>
<option value="CDG">Paris (CDG)</option>
<option value="BER">Berlin (BER)</option>
<option value="DXB">Dubai (DXB)</option>
</select>
</div>
<div class="input-group">
<label>UÇUŞ TARİHİ</label>
<input type="date" id="flyDate">
</div>
<button class="main-btn" onclick="performSearch()">UÇUŞLARI LİSTELE</button>
</div>
<div id="results"></div>
</div>
<div id="apiModal" class="modal">
<div class="modal-content">
<h3 style="margin-top:0">API Yapılandırması</h3>
<p style="font-size: 0.8rem; color: #666;">Aviationstack Access Key'inizi giriniz:</p>
<input type="password" id="apiInput" placeholder="Key buraya yapıştırılacak..." style="margin-bottom: 15px;">
<button class="main-btn" onclick="saveKey()">Kaydet ve Kapat</button>
</div>
</div>
<script>
// Sayfa açıldığında anahtarı kontrol et
window.onload = () => {
const key = localStorage.getItem('flight_api_key');
if (!key) {
toggleModal(true);
} else {
document.getElementById('apiInput').value = key;
updateStatus('online', 'API Bağlantısı Aktif');
}
};
function toggleModal(show) {
document.getElementById('apiModal').style.display = show ? 'block' : 'none';
}
function saveKey() {
const key = document.getElementById('apiInput').value;
if(key) {
localStorage.setItem('flight_api_key', key);
updateStatus('online', 'Bağlantı Kaydedildi');
toggleModal(false);
}
}
function updateStatus(type, text) {
const dot = document.getElementById('statusDot');
const txt = document.getElementById('statusText');
dot.className = 'dot ' + type;
txt.innerText = text;
}
async function performSearch() {
const key = localStorage.getItem('flight_api_key');
const dep = document.getElementById('depCity').value;
const arr = document.getElementById('arrCity').value;
const date = document.getElementById('flyDate').value;
if(!key) { toggleModal(true); return; }
if(!date) { alert("Lütfen tarih seçin"); return; }
updateStatus('', 'Sorgulanıyor...');
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = "";
try {
const response = await fetch(`http://api.aviationstack.com/v1/flights?access_key=${key}&dep_iata=${dep}&arr_iata=${arr}`);
const data = await response.json();
if (data.data) {
updateStatus('online', 'Bağlantı Başarılı');
displayFlights(data.data, date);
} else {
updateStatus('offline', 'API Hatası/Limit Dolu');
}
} catch (e) {
updateStatus('offline', 'Bağlantı Koptu');
}
}
function displayFlights(flights, date) {
const div = document.getElementById('results');
if(flights.length === 0) { div.innerHTML = "<p>Uçuş bulunamadı.</p>"; return; }
flights.forEach(f => {
div.innerHTML += `
<div class="flight-card">
<div>
<div style="font-weight:bold">${f.airline.name}</div>
<div style="font-size:0.7rem; color:gray">${f.flight.iata}</div>
</div>
<div style="text-align:center">
<div style="color:var(--primary); font-weight:bold; font-size:1.1rem">
${f.departure.estimated ? f.departure.estimated.split('T')[1].substring(0,5) : '10:30'}
</div>
<div style="font-size:0.6rem">KALKIŞ</div>
</div>
<div style="text-align:right">
<div style="font-size:0.8rem">${date}</div>
<div style="font-size:0.7rem; color:var(--success)">AKTİF</div>
</div>
</div>
`;
});
}
</script>
</body>
</html>