<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Sesli Form Doldurma</title>
<style>
  label { display:block; margin-top:10px; }
  button { margin-top:20px; }
</style>
</head>
<body>

<h2>Yakıt Fişi Formu (Sesli Giriş)</h2>

<form id="yakıtFormu">
  <label>Tarih: <input type="text" id="tarih"></label>
  <label>Litre: <input type="text" id="litre"></label>
  <label>Tutar: <input type="text" id="tutar"></label>
  <button type="button" id="baslat">🎙️ Sesle Doldur</button>
</form>

<script>
const tarihInput = document.getElementById('tarih');
const litreInput = document.getElementById('litre');
const tutarInput = document.getElementById('tutar');
const baslatBtn = document.getElementById('baslat');

if (!('webkitSpeechRecognition' in window)) {
  alert("Tarayıcınız ses tanımayı desteklemiyor.");
} else {
  const recognition = new webkitSpeechRecognition();
  recognition.lang = "tr-TR";
  recognition.continuous = false;
  recognition.interimResults = false;

  recognition.onresult = (event) => {
    const text = event.results[0][0].transcript.toLowerCase();
    console.log("Algılanan:", text);

    // 🔍 Basit kelime eşleştirme
    const tarihMatch = text.match(/\d{1,2} [a-zçğıöşü]+ \d{4}/i);
    const litreMatch = text.match(/(\d+(\,\d+)?)\s*(litre|lt)/i);
    const tutarMatch = text.match(/(\d+(\,\d+)?)\s*(tl|lira)/i);

    if (tarihMatch) tarihInput.value = tarihMatch[0];
    if (litreMatch) litreInput.value = litreMatch[1];
    if (tutarMatch) tutarInput.value = tutarMatch[1];
  };

  recognition.onerror = (e) => {
    console.error("Hata:", e);
  };

  baslatBtn.onclick = () => {
    recognition.start();
    baslatBtn.textContent = "Dinleniyor... 🎧";
    recognition.onend = () => {
      baslatBtn.textContent = "🎙️ Sesle Doldur";
    };
  };
}
</script>

</body>
</html>