功能亮点：
实时预览：就像变魔术一样，你在左边的文本框里输入代码，右边的窗口就会立刻展示出网页的样子。是的，你没看错，就是那么快！
代码编辑器：我们为你准备了一个宽敞舒适的代码编辑区域，你可以在这里尽情挥洒你的创意，而且它还支持自动换行和代码高亮哦！
一键清空：灵感枯竭？代码写错了？没关系，轻轻一点“清空代码”按钮，一切从头开始，就像什么都没发生过一样。
代码格式化：代码写得乱七八糟？别担心，我们的“格式化代码”功能会帮你把代码整理得井井有条，让你的代码看起来更加专业。
全屏编辑：想要更专注地编写代码？点击“全屏编辑”，整个世界都为你的代码让路，让你沉浸在编程的世界里。
即时反馈：每当你操作成功或者遇到小问题，都会有一个可爱的“toast”弹窗来告诉你，就像有个小助手在旁边一样。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>HTML网页代码预览器-离线版</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
height: 100vh;
background-color: #f4f4f9;
}
header {
background-color: #6a1b9a;
color: white;
text-align: center;
padding: 1em 0;
position: fixed;
width: 100%;
z-index: 1000;
}
main {
display: flex;
width: 100%;
margin-top: 5em;
padding: 1em;
}
.code-editor {
width: 50%;
height: calc(100vh - 12em);
padding: 1em;
font-size: 16px;
resize: none;
overflow-y: auto;
tab-size: 4;
background-color: #fff;
border: 1px solid #ddd;
outline: none;
border-radius: 5px;
}
.preview-window {
width: 50%;
height: calc(100vh - 12em);
border: 1px solid #ddd;
background-color: #fff;
border-radius: 5px;
margin-left: 1em;
}
footer {
background-color: #6a1b9a;
color: white;
text-align: center;
padding: 0.5em 0;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
button {
margin: 0 0.5em;
padding: 0.5em 1em;
cursor: pointer;
background-color: #ffab91;
border: none;
border-radius: 5px;
color: white;
}
button:hover {
background-color: #ef5350;
}
.toast {
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: white;
padding: 0.5em 1em;
border-radius: 5px;
z-index: 1001;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.design-by {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 12px;
color: #999;
}
</style>
</head>
<body>
<header>
<h1>HTML网页代码预览器-离线版</h1>
</header>
<main>
<textarea id="codeEditor" placeholder="在此处编写您的HTML代码..."></textarea>
<iframe id="previewWindow"></iframe>
</main>
<footer>
<button aria-label="清空代码" onclick="clearCode()">清空代码</button>
<button aria-label="格式化代码" onclick="formatCode()">格式化代码</button>
<button aria-label="全屏编辑" onclick="toggleFullScreen()">全屏编辑</button>
</footer>
<div id="toast"></div>
<div>Design by Nong Wenlong</div>
<script>
(function() {
const codeEditor = document.getElementById('codeEditor');
const previewWindow = document.getElementById('previewWindow').contentDocument.body;
const toast = document.getElementById('toast');
function showToast(message) {
toast.textContent = message;
toast.style.opacity = 1;
setTimeout(() => {
toast.style.opacity = 0;
}, 3000);
}
function updatePreview() {
try {
previewWindow.innerHTML = codeEditor.value;
} catch (error) {
console.error("预览更新时出错:", error);
showToast("预览更新时出错，请检查代码！");
}
}
function clearCode() {
codeEditor.value = '';
updatePreview();
showToast("代码已清空！");
}
function formatCode() {
// 简单格式化：缩进和间距
const lines = codeEditor.value.split('\n').map(line => line.trim());
codeEditor.value = lines.join('\n');
updatePreview();
showToast("代码已格式化！");
}
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen().catch(err => {
console.error(`启用全屏模式时出错: ${err.message} (${err.name})`);
showToast("启用全屏模式时出错！");
});
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
codeEditor.addEventListener('input', () => {
updatePreview();
});
window.onload = () => {
updatePreview();
};
})();
</script>
</body>
</html>