HTML Gelişmiş Kod Kutusu

HTML kullanıcıları için geliştirmiş olduğumuz ve web sitenize şık bir görünüm kazandıracak olan bir kod kutusu.

 

Kod: sabriaydintr.blogspot.com

<!--Kod Kutusu Başlangıç-->
	<div style="margin-bottom: 20px; position: relative;">
    <b style="display: block; margin-bottom: 5px;">Kod:</b>
    <span style="color: #aaaaaa; font-size: 12px; position: absolute; right: 80px; top: 5px;">
        sabriaydintr.blogspot.com
    </span>
    <button onclick="copyCode()" style="background-color: #4caf50; border-radius: 4px; border: medium; color: white; cursor: pointer; padding: 5px; position: absolute; right: 0px; top: 0px;">
        Kopyala
    </button>
    <button id="toggleButton" onclick="toggleCode()" style="background-color: #2196f3; border-radius: 4px; border: medium; bottom: 0px; color: white; cursor: pointer; display: none; padding: 5px; position: absolute; right: 0px;">
        Devamını Görüntüle...
    </button>
    <pre id="codeBlock" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(221, 221, 221); font-family: &quot;Courier New&quot;, monospace; max-height: 100px; overflow-x: auto; overflow-y: hidden; overflow: auto hidden; padding: 10px;">KODUNUZU BURAYA YAPIŞTIRIN</pre>
</div>
<script>
var isCollapsed = true;

function copyCode() {
    var code = document.getElementById("codeBlock").innerText;
    navigator.clipboard.writeText(code).then(function() {
        alert("Kod kopyalandı!");
    }, function() {
        alert("Kopyalama başarısız oldu.");
    });
}

function toggleCode() {
    var codeBlock = document.getElementById("codeBlock");
    var toggleButton = document.getElementById("toggleButton");

    if (isCollapsed) {
        codeBlock.style.maxHeight = "none";
        codeBlock.style.overflowY = "auto";
        toggleButton.innerText = "Kısalt";
    } else {
        codeBlock.style.maxHeight = "100px";
        codeBlock.style.overflowY = "hidden";
        toggleButton.innerText = "Devamını Görüntüle...";
    }
    isCollapsed = !isCollapsed;
}

function checkCodeLength() {
    var codeBlock = document.getElementById("codeBlock");
    var toggleButton = document.getElementById("toggleButton");
    
    if (codeBlock.scrollHeight > codeBlock.clientHeight) {
        toggleButton.style.display = "inline-block";
    } else {
        toggleButton.style.display = "none";
    }
}

window.onload = checkCodeLength;
window.onresize = checkCodeLength;
</script>
<!--Kod Kutusu Bitiş-->