<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<title>HTML 实时预览器</title>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f4f4f9;
}
.input-section,
.preview-section {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition: width 0.3s ease-in-out;
}
textarea {
font-family: 'Courier New', Courier, monospace;
box-sizing: border-box;
width: 100%;
height: calc(100% - 3.5rem);
}
/* 媒体查询：小屏幕设备 */
[url=home.php?mod=space&uid=945662]@media[/url] (max-width: 768px) {
.container {
flex-direction: column;
gap: 2rem;
}
.input-section,
.preview-section {
width: 100%;
}
textarea {
height: 300px;
}
}
/* 全屏样式 */
.preview-section.fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: white;
}
.preview-section.fullscreen iframe {
height: calc(100% - 3rem);
}
.input-section.collapsed {
width: 0;
padding: 0;
overflow: hidden;
}
.toggle-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #fff;
border: none;
cursor: pointer;
z-index: 10;
padding: 0.5rem;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: left 0.3s ease-in-out;
}
.input-section.collapsed .toggle-button {
left: 0.5rem;
}
.input-section:not(.collapsed) .toggle-button {
left: 1rem;
}
.expand-button {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: #fff;
border: none;
cursor: pointer;
z-index: 10;
padding: 0.5rem;
border-radius: 0 50% 50% 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: none;
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10000;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #fff;
padding: 1rem;
border-radius: 12px;
width: 40%;
max-height: 80%;
overflow-y: auto;
}
.history-item {
cursor: pointer;
padding: 0.5rem;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.history-item:hover {
background-color: #f3f4f6;
}
.close-modal {
position: absolute;
top: 1rem;
right: 1rem;
cursor: pointer;
}
.clear-history {
margin-left: auto;
padding: 0.5rem 1rem;
background-color: #e53e3e;
color: white;
border: none;
border-radius: 0.25rem;
cursor: pointer;
}
.clear-history:hover {
background-color: #c53030;
}
.history-header {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.threshold-setting {
margin-left: 1rem;
display: flex;
align-items: center;
}
.threshold-setting input {
padding: 0.25rem 0.5rem;
border: 1px solid #e5e7eb;
border-radius: 0.25rem;
margin-right: 0.5rem;
width: 4rem;
}
.threshold-setting button {
padding: 0.25rem 0.5rem;
background-color: #2563eb;
color: white;
border: none;
border-radius: 0.25rem;
cursor: pointer;
}
.threshold-setting button:hover {
background-color: #1d4ed8;
}
.threshold-label {
margin-right: 0.5rem;
}
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-8 flex h-screen gap-8 relative">
<div class="input-section w-1/3 p-6 relative">
<button class="toggle-button" id="toggleInputSection">
<i class="fa-solid fa-chevron-left"></i>
</button>
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-gray-800">输入 HTML 代码</h2>
<button id="downloadButton" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
下载 HTML
</button>
<button id="toggleHistoryButton" class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600">
历史记录
</button>
</div>
<textarea id="htmlInput" class="w-full p-4 border border-gray-300 rounded-md resize-none"
placeholder="在此输入 HTML 代码"></textarea>
</div>
<div class="preview-section w-2/3 p-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-gray-800">预览</h2>
<button id="fullscreenButton" class="text-gray-600 hover:text-gray-900">
<i class="fa-solid fa-expand"></i>
</button>
</div>
<iframe id="preview" class="w-full h-full border border-gray-300 rounded-md" style="width:100%;height:calc(100% - 3rem);"></iframe>
</div>
<button class="expand-button" id="expandInputSection">
<i class="fa-solid fa-chevron-right"></i>
</button>
</div>
<div class="modal" id="historyModal">
<div class="modal-content">
<span class="close-modal" id="closeModal">×</span>
<div class="history-header">
<h2 class="text-2xl font-bold text-gray-800">历史记录</h2>
<button class="clear-history" id="clearHistory">清空记录</button>
<div class="threshold-setting">
<span class="threshold-label">字数保存阈值</span>
<input type="number" id="thresholdInput" placeholder="阈值" value="3">
<button id="setThresholdButton">设置</button>
</div>
</div>
<div class="history-list" id="historyList"></div>
</div>
</div>
<script>
const htmlInput = document.getElementById('htmlInput');
const preview = document.getElementById('preview');
const fullscreenButton = document.getElementById('fullscreenButton');
const previewSection = document.querySelector('.preview-section');
const inputSection = document.querySelector('.input-section');
const downloadButton = document.getElementById('downloadButton');
const toggleInputSection = document.getElementById('toggleInputSection');
const expandInputSection = document.getElementById('expandInputSection');
const toggleHistoryButton = document.getElementById('toggleHistoryButton');
const historyModal = document.getElementById('historyModal');
const closeModal = document.getElementById('closeModal');
const historyList = document.getElementById('historyList');
const clearHistory = document.getElementById('clearHistory');
const thresholdInput = document.getElementById('thresholdInput');
const setThresholdButton = document.getElementById('setThresholdButton');
let history = JSON.parse(localStorage.getItem('htmlHistory')) || [];
let CHANGE_THRESHOLD = 3;
function saveToHistory() {
const code = htmlInput.value;
if (history.length === 0) {
const timestamp = new Date().toLocaleString();
history.push({ code, timestamp });
localStorage.setItem('htmlHistory', JSON.stringify(history));
renderHistory();
return;
}
const lastCode = history[history.length - 1].code;
const diffCount = Math.abs(code.length - lastCode.length);
if (diffCount >= CHANGE_THRESHOLD) {
const timestamp = new Date().toLocaleString();
history.push({ code, timestamp });
localStorage.setItem('htmlHistory', JSON.stringify(history));
renderHistory();
}
}
function renderHistory() {
historyList.innerHTML = '';
history.forEach((entry, index) => {
const item = document.createElement('div');
item.classList.add('history-item');
const historyText = document.createElement('span');
historyText.textContent = `历史记录 ${index + 1}`;
const timestampText = document.createElement('span');
timestampText.textContent = entry.timestamp;
item.appendChild(historyText);
item.appendChild(timestampText);
item.addEventListener('click', () => {
htmlInput.value = entry.code;
const previewWindow = preview.contentWindow.document;
previewWindow.open();
previewWindow.write(entry.code);
previewWindow.close();
historyModal.style.display = 'none';
});
historyList.appendChild(item);
});
}
htmlInput.addEventListener('input', () => {
const htmlCode = htmlInput.value;
const previewWindow = preview.contentWindow.document;
previewWindow.open();
previewWindow.write(htmlCode);
previewWindow.close();
saveToHistory();
});
function toggleFullscreen() {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
previewSection.requestFullscreen().catch((err) => {
console.error(`无法进入全屏模式: ${err.message}`);
});
}
}
fullscreenButton.addEventListener('click', toggleFullscreen);
document.addEventListener('keydown', function (event) {
if (event.key === 'Escape') {
if (document.fullscreenElement) {
document.exitFullscreen();
}
if (inputSection.classList.contains('collapsed')) {
inputSection.classList.remove('collapsed');
const icon = toggleInputSection.querySelector('i');
icon.classList.remove('fa-chevron-right');
icon.classList.add('fa-chevron-left');
previewSection.style.width = 'calc(100% - 33.333333%)';
expandInputSection.style.display = 'none';
}
}
});
downloadButton.addEventListener('click', () => {
const htmlCode = htmlInput.value;
const blob = new Blob([htmlCode], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'downloaded_html.html';
a.click();
URL.revokeObjectURL(url);
});
toggleInputSection.addEventListener('click', () => {
inputSection.classList.toggle('collapsed');
const icon = toggleInputSection.querySelector('i');
icon.classList.toggle('fa-chevron-left');
icon.classList.toggle('fa-chevron-right');
if (inputSection.classList.contains('collapsed')) {
previewSection.style.width = '100%';
expandInputSection.style.display = 'block';
} else {
previewSection.style.width = 'calc(100% - 33.333333%)';
expandInputSection.style.display = 'none';
}
});
expandInputSection.addEventListener('click', () => {
inputSection.classList.remove('collapsed');
const icon = toggleInputSection.querySelector('i');
icon.classList.remove('fa-chevron-right');
icon.classList.add('fa-chevron-left');
previewSection.style.width = 'calc(100% - 33.333333%)';
expandInputSection.style.display = 'none';
});
toggleHistoryButton.addEventListener('click', () => {
historyModal.style.display = 'flex';
});
closeModal.addEventListener('click', () => {
historyModal.style.display = 'none';
});
window.addEventListener('click', (event) => {
if (event.target === historyModal) {
historyModal.style.display = 'none';
}
});
clearHistory.addEventListener('click', () => {
history = [];
localStorage.removeItem('htmlHistory');
historyList.innerHTML = '';
});
setThresholdButton.addEventListener('click', () => {
const newThreshold = parseInt(thresholdInput.value);
if (!isNaN(newThreshold) && newThreshold > 0) {
CHANGE_THRESHOLD = newThreshold;
} else {
alert('请输入一个有效的正整数作为阈值。');
}
});
renderHistory();
</script>
</body>
</html>
[复制链接]
发表于 2025-5-6 20:17
|
发表于 2025-5-7 03:46
隐藏功能在哪呢
