<div id="hashWidget">

  <h3>🔐 MD5 Şifre Oluşturucu</h3>

  <input id="textInput" placeholder="Metin gir..." />

  <select id="type">
    <option value="md5">MD5</option>
    <option value="sha256">SHA-256</option>
  </select>

  <button onclick="generateHash()">Hash Oluştur</button>

  <textarea id="result" readonly placeholder="Sonuç burada..."></textarea>

</div>

<style>
#hashWidget{
  max-width:300px;
  background:#020617;
  padding:15px;
  border-radius:12px;
  font-family:monospace;
  color:#00ffcc;
  border:2px solid #00ffcc;
  box-shadow:0 0 20px #00ffcc;
  animation:glowBorder 2s infinite;
}

@keyframes glowBorder {
  0% {border-color:#00ffcc;}
  50% {border-color:#ff00ff;}
  100% {border-color:#00ffcc;}
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<script>
async function sha256(str){
  const buf=new TextEncoder().encode(str);
  const hash=await crypto.subtle.digest("SHA-256",buf);
  return Array.from(new Uint8Array(hash))
    .map(b=>b.toString(16).padStart(2,"0")).join("");
}

function md5(str){
  return CryptoJS.MD5(str).toString();
}

async function generateHash(){
  const text=document.getElementById("textInput").value;
  const type=document.getElementById("type").value;
  let result = type==="sha256" ? await sha256(text) : md5(text);
  document.getElementById("result").value=result;
}
</script>