Kod kutusu oluşturma

<div class="guvenli-kod-kutu">
  <div class="kod-ust">
    <span>HTML Kod</span>
    <button onclick="kopyalaKod(this)">Kopyala</button>
  </div>

  <textarea readonly>
<div class="ornek">
  Merhaba Dünya
</div>
  </textarea>
</div>

<style>
.guvenli-kod-kutu {
  background: #1e1e1e;
  border-radius: 10px;
  margin: 20px 0;
  overflow: hidden;
  font-family: Consolas, monospace;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.kod-ust {
  background: #2d2d2d;
  color: #fff;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.kod-ust button {
  background: #e74c3c;
  border: none;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.guvenli-kod-kutu textarea {
  width: 100%;
  height: 180px;
  border: none;
  resize: vertical;
  padding: 15px;
  background: #1e1e1e;
  color: #f8f8f2;
  font-size: 14px;
  line-height: 1.6;
  outline: none;
}
</style>

<script>
function kopyalaKod(btn) {
  var textarea = btn.parentElement.nextElementSibling;
  textarea.select();
  document.execCommand("copy");
  btn.innerText = "Kopyalandı ✓";
  setTimeout(function(){
    btn.innerText = "Kopyala";
  },2000);
}
</script>

Kod Deneme Kutusu

cxxx

* Sayfa Yazarı: Murat Marti 
* Diğer Kaynaklar: GEMİNİ - CHATGPT - Copilot
* Fotoğraflar: Pixabay Ücretsiz Fotoraflardan Alınmıştır...