89 lines
2.5 KiB
PHP
89 lines
2.5 KiB
PHP
<?php
|
|
require_once('.htac_header.php');
|
|
?>
|
|
|
|
<div class="page-container">
|
|
<div class="container-dxc">
|
|
<h1 style="text-align: center; font-size: 25px;">HTML Remover</h1>
|
|
<label for="htmlInput">Input Text with HTML:</label>
|
|
<textarea class="cleanhtml-textarea" id="htmlInput" placeholder="Paste your text with html here..."></textarea>
|
|
<button class="button-style" onclick="cleanHTML()" style="width: 100%;">Remove</button>
|
|
|
|
<label for="cleanedHTML">Cleaned Text:</label>
|
|
<textarea class="cleanhtml-textarea" id="cleanedHTML" readonly placeholder="Cleaned Text will appear here..."></textarea>
|
|
<P style="display: none; text-align: center;" id="copied-notice"></P>
|
|
<button class="button-style" onclick="copyToClipboard()" style="width: 100%;">Copy</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function cleanHTML() {
|
|
const inputHTML = document.getElementById("htmlInput").value;
|
|
|
|
// Create a temporary element to hold the input HTML
|
|
const tempDiv = document.createElement("div");
|
|
tempDiv.innerHTML = inputHTML;
|
|
|
|
// Remove all HTML tags
|
|
const plainText = tempDiv.textContent || tempDiv.innerText || "";
|
|
|
|
document.getElementById("cleanedHTML").value = plainText;
|
|
}
|
|
|
|
function copyToClipboard() {
|
|
const cleanedHTML = document.getElementById("cleanedHTML").value;
|
|
navigator.clipboard.writeText(cleanedHTML)
|
|
.then(() => {
|
|
document.getElementById('copied-notice').style.display = 'block';
|
|
document.getElementById('copied-notice').innerHTML = 'Slug copied to clipboard!';
|
|
})
|
|
.catch(err => {
|
|
console.error('Failed to copy: ', err);
|
|
});
|
|
}
|
|
</script>
|
|
<style>
|
|
.page-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
/* background-color: #f4f4f4; */
|
|
}
|
|
|
|
.container-dxc {
|
|
max-width: 600px;
|
|
width: 100%;
|
|
background-color: #3d3d3d;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
|
|
.cleanhtml-textarea {
|
|
width: 100%;
|
|
height: 200px;
|
|
margin-bottom: 15px;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
resize: vertical;
|
|
background-color: #3d3d3d;
|
|
}
|
|
|
|
.button-style{
|
|
padding: 10px 20px;
|
|
background-color: #7d7d7d;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
.button-style:hover {
|
|
background-color: #9d9d9d;
|
|
}
|
|
</style>
|