clipboard

<!-- JavaScript Code Placeholder -->
<script>
document.addEventListener("DOMContentLoaded", function() {
		document.querySelectorAll(".copy-btn").forEach((button) => {
			button.addEventListener("click", function() {
				// Select the code content inside the sibling element
				const codeContent = this.parentElement.querySelector("code").innerText;

				// Copy text to clipboard
				navigator.clipboard.writeText(codeContent).then(() => {
					// Check if a notification already exists
					let notification = this.parentElement.querySelector(".copy-notification");
					
					// If it doesn't exist, create a new one
					if (!notification) {
						notification = document.createElement("span");
						notification.className = "copy-notification";
						notification.innerText = "COPIED";
						this.parentElement.appendChild(notification);
					}

					// Show the notification
					notification.style.display = "block";
					
					// Hide the notification after 2 seconds
					setTimeout(() => {
						notification.style.display = "none";
					}, 2000);
				}).catch(err => {
					console.error("Error copying code: ", err);
				});
			});
		});
	});

</script>
    

COPIED

/* Style for the code box */
.code-box {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    background-color: #f9f9f9;
    position: relative;
    margin: 20px 0;
    max-width: 100%;
    overflow-x: auto;
}

/* Style for the Copy Code button */
.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    font-size: 14px;
    color: #fff;
    background-color: #000000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.copy-btn:hover {
    background-color: #808080;
}

/* Style for code block text */
pre {
    margin-top: 20px;
    white-space: pre-wrap; /* Wrap code for responsive view */
}

code {
    font-family: 'Courier New', Courier, monospace;
    color: #333;
}

/* Style for the "COPIED" notification */
.copy-notification {
    position: absolute;
    top: 10px;
    right: 120px; /* Adjusts position near the Copy button */
    background-color: #000000;
    color: #ffffff;
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 3px;
    display: none; /* Hidden by default */
}
    

COPIED