<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Enisim Telsiz</title>
<script src="https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js"></script>
<style>
body { background: #000; color: #fff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.k { background: #1a1a1a; border: 3px solid #00ffcc; border-radius: 30px; width: 100%; max-width: 380px; padding: 30px; box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
h1 { color: #00ffcc; margin-top: 0; font-size: 2em; text-transform: uppercase; letter-spacing: 2px; }
#my-id { color: #fd0; font-size: 2.8em; font-weight: bold; margin: 15px 0; text-shadow: 0 0 10px rgba(253, 221, 0, 0.5); }
input { padding: 15px; width: 80%; border-radius: 12px; border: 2px solid #00ffcc; background: #000; color: #00ffcc; text-align: center; font-size: 1.4em; margin-bottom: 15px; outline: none; }
.btn { background: #00ffcc; color: #000; border: none; font-weight: bold; font-size: 1.2em; padding: 15px; width: 90%; border-radius: 12px; cursor: pointer; transition: 0.3s; }
.btn:active { transform: scale(0.95); }
.ptt { width: 180px; height: 180px; border-radius: 50%; background: #333; border: 10px solid #444; margin: 30px auto; display: flex; align-items: center; justify-content: center; font-size: 1.4em; font-weight: bold; renk: #666; kullanıcı seçimi: yok; -webkit-kullanıcı seçimi: yok; dokunma eylemi: yok; imleç: işaretçi; geçiş: 0.2s; }
.ptt.aktif { arka plan: #ff0055; kenar rengi: #ff4d88; renk: #fff; kutu gölgesi: 0 0 50px #ff0055; dönüşüm: ölçek(1.05); }
#durum { üst kenar boşluğu: 20px; renk: #aaa; yazı tipi boyutu: 1.1em; yazı tipi stili: italik; }
</style>
</head>
<body>
<div class="k">
<h1>ENİSİM TELSİZ</h1>
<div style="color:#888; font-size:0.9em">KANAL KODUN:</div>
<div id="my-id">...</div>

<div style="margin:20px 0; border-top: 1px solid #333; padding-top:20px">
<input type="number" id="hedef" placeholder="Kanal No Yaz">
<button class="btn" onclick="baglan()">KANALA BAĞLAN</button>
</div>

<div id="durum">Mikrofon izni bekleniyor...</div>

<div class="ptt" id="ptt">BAS KONUŞ</div>
<div style="margin-top:15px; font-size:0.8em; color:#555;">© enisim.tr - Bas-Konuş Sistemi</div>
</div>

peer.on('open', function(id) {
document.getElementById('my-id').innerText = id;
});

navigator.mediaDevices.getUserMedia({audio: true}).then(function(stream) {
localStream = stream;
localStream.getAudioTracks()[0].enabled = false;
durum.innerText = "Sistem çevrimiçi.";
durum.style.color = "#00ffcc";
}).catch(function(err) {
durum.innerText = "HATA: Mikrofon İzni gerekli!";
durum.style.color = "#ff0055";
});

peer.on('call', function(call) {
call.answer(localStream);
call.on('stream', function(remoteStream) {
var audio = new Audio();
audio.srcObject = remoteStream;
audio.play();
});
durum.innerText = "Bağlantı Kuruldu!";
});

function baglan() {
var hdf = document.getElementById('hedef').value;
if(!hdf) return;
durum.innerText = "Bağlanıyor...";
var çağrı =peer.call(hdf, localStream);
call.on('stream', function(remoteStream) {
durum.innerText = "Görüşme Başladı!";
var audio = new Audio();
audio.srcObject = RemoteStream;
audio.play();
});
}

fonksiyon konus(e) {
e.preventDefault();
eğer (localStream) localStream.getAudioTracks()[0].enabled = true;
ptt.className = "ptt aktif";
ptt.innerText = "SES GİDİYOR";
}

function sus(e) {
e.preventDefault();
if(localStream) localStream.getAudioTracks()[0].enabled = false;
ptt.className = "ptt";
ptt.innerText = "BAS KONUŞ";
}

ptt.addEventListener('mousedown', konus);
ptt.addEventListener('mouseup', sus);
ptt.addEventListener('touchstart', konus);
ptt.addEventListener('touchend', sus);
</script>
</body>
</html>