Advanced Code Blocks with Full Features
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen Demo</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background: #f0f8ff;
transition: all 0.3s ease;
}
.dark-mode {
background: #1a1a2e;
color: #f0f0f0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.dark-mode .container {
background: #2d2d2d;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
h1 {
color: #4285f4;
}
button {
background: #4285f4;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
button:hover {
opacity: 0.9;
}
.theme-toggle {
position: fixed;
top: 10px;
right: 10px;
background: rgba(0,0,0,0.1);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>Fullscreen Output Demo</h1>
<p>This HTML runs in a fullscreen popup when you click Run.</p>
<button onclick="alert('Hello from fullscreen!')">Click Me</button>
<p>Try resizing the window to see responsive behavior.</p>
<div class="theme-toggle" onclick="document.body.classList.toggle('dark-mode')">
☀️
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen Demo</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background: #f0f8ff;
transition: all 0.3s ease;
}
.dark-mode {
background: #1a1a2e;
color: #f0f0f0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.dark-mode .container {
background: #2d2d2d;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
h1 {
color: #4285f4;
}
button {
background: #4285f4;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
button:hover {
opacity: 0.9;
}
.theme-toggle {
position: fixed;
top: 10px;
right: 10px;
background: rgba(0,0,0,0.1);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>Fullscreen Output Demo</h1>
<p>This HTML runs in a fullscreen popup when you click Run.</p>
<button onclick="alert('Hello from fullscreen!')">Click Me</button>
<p>Try resizing the window to see responsive behavior.</p>
<div class="theme-toggle" onclick="document.body.classList.toggle('dark-mode')">
☀️
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Custom Filename Example</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background: #f0f8ff;
}
h1 {
color: #4285f4;
}
button {
background: #4285f4;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Custom Filename Demo</h1>
<p>This will download as "custom-page.html"</p>
<button onclick="alert('Hello from custom page!')">Click Me</button>
</body>
</html>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
h1 {
color: #333;
}
<input type="file" id="imageInput">
<script>
document.getElementById("imageInput").addEventListener("change", function () {
const file = this.files[0];
if (!file) {
alert("Please choose an image to upload.");
return;
}
const reader = new FileReader();
reader.onload = function () {
const base64Image = reader.result.split(",")[1];
const apiKey = "YOUR_API_KEY_HERE";
fetch("https://api.imgbb.com/1/upload?key=" + apiKey, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: new URLSearchParams({ image: base64Image })
})
.then(response => response.json())
.then(result => {
if (result.success) {
const imageUrl = result.data.url;
navigator.clipboard.writeText(imageUrl)
.then(() => {
alert("Image uploaded successfully! URL copied to clipboard.\\n" + imageUrl);
})
.catch(() => {
alert("Image uploaded, but failed to copy URL to clipboard.\\n" + imageUrl);
});
console.log("Image URL:", imageUrl);
} else {
alert("Upload failed. Reason: " + result.error.message);
}
})
.catch(error => {
console.error("Error uploading:", error);
alert("Error uploading image.");
});
};
reader.readAsDataURL(file);
});
</script>
Share this post