<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
font-size: 12pt;
line-height: 16pt;
color: white;
}
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 0px 10px 10px 10px;
}
<title>Copy to Clipboard</title>
<style>
.copy-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-start; /* Vertically align buttons and text */
justify-content: flex-start; /* Left-align content */
}
.copy-cell {
display: flex;
flex-direction: column; /* Stack elements vertically */
align-items: flex-start;
text-align: left;
}
.copy-button {
padding: 5px 10px;
background-color: #0074d9;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
.copy-button:hover {
background-color: #0056b3;
}
.copy-button:active {
background-color: #004585;
transform: scale(0.95);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
</style>
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="copy-container">
<div class="copy-cell">
<p id="copyText1">cindy.unwin@cqtoday.com.au</p>
<button class="copy-button" onclick="copyToClipboard('copyText1')">To:</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="copy-container">
<div class="copy-cell">
<p id="copyText2">garry.howe@starnewsgroup.com.au,<br>
flatplan.team@starnewsgroup.com.au,<br>
andrew.cantwell@starnewsgroup.com.au,<br>
peter.lynch@cqtoday.com.au,<br>
sherrie.ashton@cqtoday.com.au,<br>
cheryl.altouvas@todaygladstone.com.au</p>
<button class="copy-button" onclick="copyToClipboard('copyText2')">CC:</button>
</td>
</tr>
<tr>
<td>
<div class="copy-container">
<div class="copy-cell">
<p id="copyText3">CQ TODAY_Wednesday - mmmmm dd, yyyy - Draft Flatplan</p>
<button class="copy-button" onclick="copyToClipboard('copyText3')">Subject</button>
</td>
</tr>
<tr>
<td>
<div class="copy-container">
<div class="copy-cell">
<p id="copyText4">Hi guys,<br>
Kindly see the attached draft layout.<br>
<b>Total:</b> XX pages<br>
Notes:<br>
• XX<br>
Queries:<br>
• XX<br>
Prepaid/To Sell:<br>
• XX<br>
Thank you😺,
</p>
<button class="copy-button" onclick="copyToClipboard('copyText4')">Body</button>
</td>
</tr>
</table>
<script>
function copyToClipboard(id) {
var copyText = document.getElementById(id);
var textToCopy = copyText.innerText;
const textArea = document.createElement("textarea");
textArea.value = textToCopy;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
showAlert("Copied", 2000); // 2000 milliseconds (2 seconds)
}
function showAlert(message, duration) {
var alertDiv = document.createElement("div");
alertDiv.innerHTML = message;
alertDiv.style.position = "fixed";
alertDiv.style.top = "10px";
alertDiv.style.left = "50%";
alertDiv.style.transform = "translateX(-50%)";
alertDiv.style.backgroundColor = "yellow";
alertDiv.style.color = "black";
alertDiv.style.fontWeight = "bold";
alertDiv.style.padding = "10px";
alertDiv.style.border = "1px solid black";
alertDiv.style.borderRadius = "5px";
alertDiv.style.zIndex = "9999";
document.body.appendChild(alertDiv);
setTimeout(function() {
document.body.removeChild(alertDiv);
}, duration);
}
</script>
</body>
</html>