<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation</title>
<style>
html {
box-sizing: border-box;
background: #000;
color: white;
}
.git{
/* for link */
display: block;
width: 90%;
color: white;
margin: auto;
border-radius: 40px;
padding-top: 15px;
text-decoration: none;
height: 40px;
text-align: center;
margin-top: 30px;
border: 1px solid white;
}
.accordion-button {
width: 95vw;
margin-bottom: 20px;
margin-top: 20px;
border-radius: 50px;
background-color: dodgerblue;
color: white;
border: none;
height: 50px; /* Set a fixed height for the button */
}
.accordion-button:hover {
background-color: saddlebrown;
}
.container {
max-width: 100vw;
overflow: hidden;
transition: max-height 0.6s ease-out; /* Use max-height for smooth transition */
}
.container.closed {
max-height: 0;
}
</style>
</head>
<body>
<!-- start -->
<div class="accordion">
<button class="accordion-button" onclick="toggleContainer(this)">Toggle Container 1</button>
<div class="container closed">
<p>This is some content inside the first container.</p>
<pre>
</pre>
</div>
</div>
<!-- end -->
<!-- start -->
<div class="accordion">
<button class="accordion-button" onclick="toggleContainer(this)">Link</button>
<div class="container closed">
<a href="" class="git">link 1</a>
<a href="" class="git">link 2</a>
</div>
</div>
<!-- end -->
<!--
**********************
iske phle sb Krna hai
**********************
-->
<div style="height: 50vh;"></div>
<script>
function toggleContainer(button) {
const container = button.nextElementSibling;
const isOpen = !container.classList.contains('closed');
if (isOpen) {
// Container is open, so just close it without scrolling
container.style.maxHeight = '0';
container.classList.add('closed');
} else {
// Calculate the container's current scroll height before opening
const currentScrollHeight = container.scrollHeight;
// Open the container
container.style.maxHeight = currentScrollHeight + 'px';
container.classList.remove('closed');
}
}
</script>
<script>
function toggleContainer(button) {
const container = button.nextElementSibling;
const isOpen = !container.classList.contains('closed');
if (isOpen) {
// Container is open, so just close it without scrolling
container.style.maxHeight = '0';
container.classList.add('closed');
// Set button color to default when closing
button.style.backgroundColor = 'dodgerblue';
} else {
// Calculate the container's current scroll height before opening
const currentScrollHeight = container.scrollHeight;
// Open the container
container.style.maxHeight = currentScrollHeight + 'px';
container.classList.remove('closed');
// Change button color when opening
button.style.backgroundColor = 'grey';
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/languages/javascript.min.js"></script>
<script>
hljs.highlightAll();
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/base16/humanoid-dark.min.css" integrity="sha512-VpzmzXvIXjYfKE4xjvTjF41gt15bbXf3u0CDWXDm105TA7yphqLSVqAc+gnpJswiS068uRYqiXCC4MvCycjQhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.response {
border: 1px solid white;
width: 90vw;
margin: auto;
position: relative;
display: flex;
flex-wrap: nowrap; /* Prevent wrapping of boxes when scrolling horizontally */
margin-bottom: 20px;
background: black;
overflow-x: auto; /* Enable horizontal scrolling */
border-radius: 10px;
max-height: 40vh;
color: white;
padding-left: 14px;
}
.git{
/* for link */
display: block;
width: 90%;
color: white;
margin: auto;
border-radius: 40px;
padding-top: 15px;
text-decoration: none;
height: 40px;
text-align: center;
margin-top: 30px;
border: 1px solid white;
}
/* Styles for the copy button */
.copy-button {
position: sticky;
top: 10px;
right: 10px;
height: 25px;
padding: 4px 8px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
</style>
<style>
html {
box-sizing: border-box;
background: #000;
color: white;
}
.accordion-button {
margin: 20px;
width: 85vw;
border-radius: 50px;
background-color: dodgerblue;
color: white;
border: none;
height: 50px; /* Set a fixed height for the button */
}
.accordion-button:hover {
background-color: saddlebrown;
}
.container {
max-width: 100vw;
overflow: hidden;
transition: max-height 0.6s ease-out; /* Use max-height for smooth transition */
}
.container.closed {
max-height: 0;
}
</style>
</head>
<body>
<!-- start -->
<div class="accordion">
<button class="accordion-button" onclick="toggleContainer(this)">Box</button>
<div class="container closed">
<div class="response">
<pre><code style="background: black;" class="language-html">
</code></pre>
<button class="copy-button">Copy. </button>
</div>
<br>
<br>
</div>
</div>
<!-- end -->
<!-- start -->
<div class="accordion">
<button class="accordion-button" onclick="toggleContainer(this)">Simple</button>
<div class="container closed">
<p>This is some content inside the first container.</p>
<pre>
.
.
.
</pre>
</div>
</div>
<!-- end -->
<!-- start -->
<div class="accordion">
<button class="accordion-button" onclick="toggleContainer(this)">Link</button>
<div class="container closed">
<a href="" class="git">link 1</a>
<a href="" class="git">link 2</a>
</div>
</div>
<!-- end -->
<!--
**********************
iske phle sb Krna hai
**********************
-->
<div style="height: 50vh;" ></div>
<script>
function toggleContainer(button) {
const container = button.nextElementSibling;
const isOpen = !container.classList.contains('closed');
if (isOpen) {
// Container is open, so just close it without scrolling
container.style.maxHeight = '0';
container.classList.add('closed');
} else {
// Calculate the container's current scroll height before opening
const currentScrollHeight = container.scrollHeight;
// Open the container
container.style.maxHeight = currentScrollHeight + 'px';
container.classList.remove('closed');
}
}
</script>
<script>
function copyResponseText() {
const responseTextElement = this.previousElementSibling;
const textToCopy = responseTextElement.innerText;
const tempTextArea = document.createElement('textarea');
tempTextArea.value = textToCopy;
document.body.appendChild(tempTextArea);
tempTextArea.select();
document.execCommand('copy');
document.body.removeChild(tempTextArea);
this.innerText = 'Copied!';
setTimeout(() => {
this.innerText = 'Copy';
}, 2000);
}
const copyButtons = document.querySelectorAll('.copy-button');
copyButtons.forEach((button) => {
button.addEventListener('click', copyResponseText);
});
</script>
<script>
function toggleContainer(button) {
const container = button.nextElementSibling;
const isOpen = !container.classList.contains('closed');
if (isOpen) {
// Container is open, so just close it without scrolling
container.style.maxHeight = '0';
container.classList.add('closed');
// Set button color to default when closing
button.style.backgroundColor = 'dodgerblue';
} else {
// Calculate the container's current scroll height before opening
const currentScrollHeight = container.scrollHeight;
// Open the container
container.style.maxHeight = currentScrollHeight + 'px';
container.classList.remove('closed');
// Change button color when opening
button.style.backgroundColor = 'grey';
}
}
</script>
</body>
</html>
<!-- start -->
<div class="accordion">
<button class="accordion-button" onclick="toggleContainer(this)"> Name </button>
<div class="container closed">
<p>This is some content inside container.</p>
</div>
</div>
<!-- end -->
<!-- Start -->
<div class="accordion">
<button class="accordion-button" onclick="toggleContainer(this)"> Name </button>
<div class="container closed">
<div class="response">
<pre><code style="background: black;" class="language-html">
</code></pre>
<button class="copy-button">Copy. </button>
</div>
<br>
</div>
</div>
<!-- End -->
<!-- start -->
<div class="accordion">
<button class="accordion-button" onclick="toggleContainer(this)"> Links </button>
<div class="container closed">
<a href="" class="git">link 1</a>
<a href="" class="git">link 2</a>
</div>
</div>
<!-- end -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Syntax Highlighting</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/base16/humanoid-dark.min.css" integrity="sha512-VpzmzXvIXjYfKE4xjvTjF41gt15bbXf3u0CDWXDm105TA7yphqLSVqAc+gnpJswiS068uRYqiXCC4MvCycjQhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<style>
.editor-container {
border: 1px solid #ccc;
padding: 10px;
width: 80vw;
min-height: 130px;
font-family: monospace;
white-space: pre-wrap;
overflow: auto;
background: black;
color: white;
margin: auto;
line-height: 1.5;
margin-bottom: 20px;
max-height: 40vw;
}
code {
white-space: pre;
overflow-wrap: normal;
word-break: normal;
}
</style>
</head>
<body>
<div class="editor-container fakeTextarea" contenteditable="true" spellcheck="false"></div>
<br>
<div class="editor-container fakeTextarea" contenteditable="true" spellcheck="false"></div>
<br>
<div class="editor-container fakeTextarea" contenteditable="true" spellcheck="false"></div>
<br>
<div class="editor-container fakeTextarea" contenteditable="true" spellcheck="false"></div>
<script>
hljs.initHighlightingOnLoad();
const fakeTextareas = document.querySelectorAll('.fakeTextarea');
// Add an input event listener with debounce to apply syntax highlighting
fakeTextareas.forEach(textarea => {
let debounceTimer;
textarea.addEventListener('input', () => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
highlightCode(textarea);
}, 100); // Delay for 500ms after the last input
});
});
// Function to apply syntax highlighting
function highlightCode(textarea) {
const codeContent = textarea.innerText;
textarea.innerHTML = `<code>${hljs.highlightAuto(codeContent).value}</code>`;
}
</script>
</body>
</html>