Title
Description
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instant Pretty Code Blocks</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f5f5f5;
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
textarea {
width: 100%;
padding: 10px;
font-family: monospace;
background: #f4f4f4;
border: 1px solid #ccc;
border-radius: 5px;
resize: vertical;
}
.code-textarea {
height: 150px;
}
.title-input {
height: 40px;
margin-bottom: 15px;
font-family: Arial, sans-serif;
}
.description-textarea {
height: 80px;
font-family: Arial, sans-serif;
}
button {
margin-top: 10px;
margin-right: 10px;
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
.button-clear {
background: #dc3545;
}
.button-clear:hover {
background: #c82333;
}
.output {
margin-top: 20px;
padding: 20px;
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
position: relative;
}
.copy-html-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
background: #28a745;
color: white;
border: none;
cursor: pointer;
border-radius: 3px;
}
.copy-html-btn:hover {
background: #218838;
}
.generated-html {
margin-top: 40px;
max-height: 300px;
overflow-y: auto;
font-family: monospace;
white-space: pre-wrap;
}
.input-section {
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
}
.customization-options {
display: flex;
margin-bottom: 15px;
gap: 20px;
flex-wrap: wrap;
}
.option-group {
margin-bottom: 10px;
}
.color-btn {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 5px;
cursor: pointer;
display: inline-block;
border: 2px solid #ccc;
}
.color-btn.active {
border: 2px solid #333;
}
.blue-btn {
background-color: #007bff;
}
.red-btn {
background-color: #dc3545;
}
.black-btn {
background-color: #333;
}
.option-btn {
padding: 5px 10px;
margin-right: 5px;
background: #f0f0f0;
border: 1px solid #ccc;
cursor: pointer;
border-radius: 3px;
}
.option-btn.active {
background: #ddd;
font-weight: bold;
}
.preview {
margin-top: 15px;
padding: 10px;
border: 1px dashed #ccc;
border-radius: 5px;
}
.align-icon {
font-size: 16px;
pointer-events: none;
}
.description-preview {
color: #333;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Instant Pretty Code Blocks</h1>
<div class="input-section">
<label for="titleText">Title (with custom styling):</label>
<textarea id="titleText" class="title-input" placeholder="Enter a title..."></textarea>
<div class="customization-options">
<div class="option-group">
<label>Title Color:</label><br>
<span class="color-btn black-btn active" data-color="#333" onclick="setColor(this)"></span>
<span class="color-btn blue-btn" data-color="#007bff" onclick="setColor(this)"></span>
<span class="color-btn red-btn" data-color="#dc3545" onclick="setColor(this)"></span>
</div>
<div class="option-group">
<label>Title Font Size:</label><br>
<button class="option-btn" data-size="small" onclick="setSize(this)">Small</button>
<button class="option-btn active" data-size="medium" onclick="setSize(this)">Medium</button>
<button class="option-btn" data-size="large" onclick="setSize(this)">Large</button>
</div>
<div class="option-group">
<label>Title Alignment:</label><br>
<button class="option-btn active" data-align="left" onclick="setAlign(this)"><span class="align-icon">⇤</span> Left</button>
<button class="option-btn" data-align="center" onclick="setAlign(this)"><span class="align-icon">⇆</span> Center</button>
<button class="option-btn" data-align="right" onclick="setAlign(this)"><span class="align-icon">⇥</span> Right</button>
</div>
</div>
<label for="descriptionText">Description (always black):</label>
<textarea id="descriptionText" class="description-textarea" placeholder="Enter description text..."></textarea>
<div class="preview">
<p>Preview:</p>
<div id="titlePreview" style="color: #333; font-size: 16px; text-align: left;">Your title will appear here</div>
<div id="descriptionPreview" class="description-preview">Your description will appear here</div>
</div>
</div>
<label for="inputText">Enter or Paste Your Code:</label>
<textarea id="inputText" class="code-textarea" placeholder="Paste your code here..."></textarea>
<div>
<button onclick="generateHtml()">Generate Code Block</button>
<button class="button-clear" onclick="clearAll()">Clear All</button>
</div>
<div class="output" id="outputHtml">
<div class="generated-html" id="generatedHtml"></div>
<button class="copy-html-btn" onclick="copyGeneratedHtml()">Copy Generated HTML</button>
</div>
</div>
<script>
// Default values
let selectedColor = "#333";
let selectedSize = "medium";
let selectedAlign = "left";
const sizeMap = {
"small": "14px",
"medium": "16px",
"large": "20px"
};
// Initialize preview
updatePreview();
// Listen for changes in the title and description
document.getElementById('titleText').addEventListener('input', updatePreview);
document.getElementById('descriptionText').addEventListener('input', updatePreview);
function setColor(element) {
document.querySelectorAll('.color-btn').forEach(btn => {
btn.classList.remove('active');
});
element.classList.add('active');
selectedColor = element.dataset.color;
updatePreview();
}
function setSize(element) {
document.querySelectorAll('[data-size]').forEach(btn => {
btn.classList.remove('active');
});
element.classList.add('active');
selectedSize = element.dataset.size;
updatePreview();
}
function setAlign(element) {
document.querySelectorAll('[data-align]').forEach(btn => {
btn.classList.remove('active');
});
element.classList.add('active');
selectedAlign = element.dataset.align;
updatePreview();
}
function updatePreview() {
const titleText = document.getElementById('titleText').value.trim() || "Your title will appear here";
const descriptionText = document.getElementById('descriptionText').value.trim() || "Your description will appear here";
const titlePreviewElement = document.getElementById('titlePreview');
const descriptionPreviewElement = document.getElementById('descriptionPreview');
titlePreviewElement.textContent = titleText;
titlePreviewElement.style.color = selectedColor;
titlePreviewElement.style.fontSize = sizeMap[selectedSize];
titlePreviewElement.style.textAlign = selectedAlign;
descriptionPreviewElement.textContent = descriptionText;
}
// Corrected escapeHtml function with proper entity codes
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
function generateHtml() {
const inputText = document.getElementById('inputText').value.trim();
if (!inputText) {
alert('Please enter some code!');
return;
}
const titleText = document.getElementById('titleText').value.trim();
const descriptionText = document.getElementById('descriptionText').value.trim();
const titleHtml = titleText ?
`<h2 class="custom-title" style="color: ${selectedColor}; font-size: ${sizeMap[selectedSize]}; text-align: ${selectedAlign}; margin-bottom: 10px;">${escapeHtml(titleText)}</h2>` : '';
const descriptionHtml = descriptionText ?
`<p class="custom-description" style="color: #333; margin-bottom: 20px;">${escapeHtml(descriptionText)}</p>` : '';
// Escape the input code to display as text
const escapedCode = escapeHtml(inputText);
// Generate the clean HTML code block
const htmlCode = `
<div class="container">
${titleHtml}
${descriptionHtml}
<div class="code-block">
<pre><code>${escapedCode}</code></pre>
<button class="copy-btn" onclick="copyCode()">Copy Code</button>
</div>
</div>
<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.custom-title {
line-height: 1.3;
margin-top: 0;
}
.custom-description {
line-height: 1.5;
}
.code-block {
background-color: #f4f4f4;
border: 2px solid #ccc;
border-radius: 5px;
padding: 15px;
margin-top: 20px;
position: relative;
}
.code-block pre {
margin: 0;
overflow-x: auto;
}
.code-block code {
font-family: monospace;
display: block;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
border-radius: 5px;
white-space: pre-wrap;
}
.copy-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
background: #28a745;
color: white;
border: none;
cursor: pointer;
border-radius: 3px;
}
.copy-btn:hover {
background: #218838;
}
</style>
<script>
function copyCode() {
const codeElement = document.querySelector('.code-block code');
const textarea = document.createElement('textarea');
textarea.value = codeElement.textContent;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
alert('Code copied to clipboard!');
}
<\/script>
`;
// Display the generated HTML code as escaped text
document.getElementById('generatedHtml').textContent = htmlCode;
}
function clearAll() {
document.getElementById('inputText').value = '';
document.getElementById('titleText').value = '';
document.getElementById('descriptionText').value = '';
document.getElementById('generatedHtml').textContent = '';
updatePreview();
}
function copyGeneratedHtml() {
const htmlCode = document.getElementById('generatedHtml').textContent;
if (!htmlCode) {
alert('No HTML code to copy!');
return;
}
const tempTextArea = document.createElement('textarea');
tempTextArea.value = htmlCode;
document.body.appendChild(tempTextArea);
tempTextArea.select();
try {
if (navigator.clipboard) {
navigator.clipboard.writeText(htmlCode).then(() => {
alert('Generated HTML copied to clipboard!');
}).catch(err => {
console.error('Failed to copy text:', err);
});
} else {
if (document.execCommand('copy')) {
alert('Generated HTML copied to clipboard!');
} else {
console.error('Failed to copy text');
}
}
} catch (err) {
console.error('Failed to copy text:', err);
} finally {
document.body.removeChild(tempTextArea);
}
}
</script>
</body>
</html>
No comments:
Post a Comment