<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Editor</title>
<style>
body {
background-color: #101010; /* Dark background */
color: #FFFFFF; /* White text */
font-family: System, Helvetica Neue, sans-serif;
padding: 16px; /* Padding around the body */
margin: 0; /* Remove default margin */
box-sizing: border-box; /* Ensure padding is included in the width */
}
textarea {
width: calc(100% - 20px); /* Adjust width to fit within padding */
height: 200px; /* Keep original height */
font-size: 16px;
background-color: #1e1e1e; /* Darker textarea */
color: #FFFFFF; /* White text in textarea */
border: 1px solid #444; /* Slightly lighter border */
border-radius: 5px; /* Rounded corners */
padding: 8px; /* Padding inside the textarea */
resize: none; /* Prevent resizing */
/* No maximum length set, allowing for large amounts of text */
}
.char-clear-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4px;
margin-bottom: 16px;
}
.char-count {
font-size: 14px;
color: #AAAAAA; /* Light gray for character count */
}
.clear-button {
font-size: 14px;
color: #007AFF; /* Blue color for Clear text */
background-color: transparent;
border: none;
cursor: pointer;
padding: 0; /* Remove padding to ensure it stays inline */
width: auto; /* Prevent full-width button */
}
.clear-button:focus, .clear-button:active {
outline: none;
}
.clear-button:hover {
text-decoration: none; /* No underline on hover */
}
.footnote {
text-align: center;
margin-top: 8px;
margin-bottom: 16px;
font-size: 14px;
color: #AAAAAA;
}
button {
background-color: #007AFF; /* iOS blue */
color: #FFFFFF; /* White text on button */
border: none;
border-radius: 5px;
padding: 10px 16px;
margin-bottom: 4px;
font-size: 16px;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #005BB5; /* Darker blue on hover */
}
button:active {
background-color: #00488F; /* Even darker on active */
}
</style>
</head>
<body>
<textarea id="markdown" placeholder="Start typing...">
Clipboard
</textarea>
<div class="char-clear-container">
<span class="char-count" id="charCount">Character Count (spaces excluded):
Count
</span>
<button class="clear-button" onclick="clearText()">Clear text</button>
</div>
<button onclick="returnToClipboard()">Now Copy to Clipboard</button>
<div class="footnote">To Continue Press "Done"</div>
<script>
const textarea = document.getElementById('markdown');
const charCountDisplay = document.getElementById('charCount');
// Update character count on input
textarea.addEventListener('input', () => {
const markdownText = textarea.value.replace(/\s+/g, ''); // Remove all whitespace
charCountDisplay.textContent = `Character Count (spaces excluded): ${markdownText.length}`;
});
// Function to clear the textarea
function clearText() {
textarea.value = '';
charCountDisplay.textContent = 'Character Count (excluding spaces): 0';
}
// Function to copy the edited text to clipboard
function returnToClipboard() {
const editedMarkdown = textarea.value;
// Copy text to clipboard
navigator.clipboard.writeText(editedMarkdown).then(() => {
alert("Markdown copied to clipboard!");
}).catch(err => {
console.error('Could not copy text:', err);
});
}
</script>
</body>
</html>
Shortcut Input
