Michael Schimmel
198 lines
9.2 KiB
HTML
198 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/delphi.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
|
|
|
|
<style>
|
|
body {
|
|
font-family: "Segoe UI Variable Text", "Segoe UI", sans-serif;
|
|
font-size: 14px; line-height: 1.5; padding: 16px; margin: 0; background: #fff;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
#history { display: flex; flex-direction: column; gap: 12px; }
|
|
#active { margin-top: 12px; }
|
|
|
|
.block-header {
|
|
font-family: "Segoe UI Variable Display", sans-serif;
|
|
font-weight: 600; font-size: 11px; text-transform: uppercase;
|
|
color: #0078d4; border-bottom: 1px solid #f0f0f0; margin-bottom: 6px;
|
|
}
|
|
|
|
/* Raw Text Blocks */
|
|
.raw-wrapper {
|
|
background-color: #f3f2f1;
|
|
border: 1px solid #edebe9;
|
|
border-radius: 4px;
|
|
margin: 4px 0;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.raw-header {
|
|
padding: 6px 10px; font-size: 11px; font-weight: bold; color: #323130;
|
|
background: #faf9f8; display: flex; align-items: center;
|
|
border-bottom: 1px solid transparent; cursor: pointer; user-select: none;
|
|
}
|
|
.raw-header:hover { background: #f0f0f0; color: #0078d4; }
|
|
.icon-svg {
|
|
width: 14px; height: 14px; margin-right: 8px;
|
|
fill: none; stroke: currentColor; stroke-width: 2;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
transition: transform 0.2s;
|
|
}
|
|
.raw-content {
|
|
font-family: "Cascadia Code", "Consolas", monospace;
|
|
font-size: 12.5px; white-space: pre-wrap;
|
|
padding: 10px; margin: 0; overflow: hidden; color: #201f1e;
|
|
}
|
|
.collapsed .raw-content { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
|
|
.collapsed .icon-svg { transform: rotate(-90deg); }
|
|
.expanded .icon-svg { transform: rotate(0deg); }
|
|
.expanded .raw-header { border-bottom-color: #edebe9; }
|
|
|
|
/* Markdown Specifics */
|
|
blockquote { border-left: 4px solid #0078d4; padding-left: 12px; color: #605e5c; }
|
|
|
|
/* Code Blocks & Copy Button */
|
|
.code-wrapper { position: relative; margin: 1em 0; }
|
|
pre { background: #f6f8fa; padding: 12px; border: 1px solid #d0d7de; border-radius: 6px; overflow-x: auto; margin: 0; }
|
|
code { font-family: "Cascadia Code", Consolas, monospace; font-size: 90%; }
|
|
|
|
.copy-btn {
|
|
position: sticky; top: 10px; float: right; z-index: 10;
|
|
margin-top: 10px; margin-bottom: -42px; margin-right: 10px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
width: 32px; height: 32px;
|
|
background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(2px);
|
|
border: 1px solid #d0d7de; border-radius: 6px;
|
|
cursor: pointer; color: #57606a; transition: all 0.2s;
|
|
}
|
|
.copy-btn:hover { background-color: #ffffff; color: #0969da; border-color: #0969da; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
|
.copy-btn:active { background-color: #edeff2; transform: translateY(1px); }
|
|
.copy-btn svg { fill: currentColor; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="history"></div>
|
|
<div id="active"></div>
|
|
|
|
<script>
|
|
const historyDiv = document.getElementById("history");
|
|
const activeDiv = document.getElementById("active");
|
|
let currentMode = "markdown";
|
|
let currentTitle = "";
|
|
let currentBuffer = "";
|
|
|
|
// Icons
|
|
const chevronSvg = '<svg class="icon-svg" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>';
|
|
const iconCopy = '<svg viewBox="0 0 16 16" width="16" height="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg>';
|
|
const iconCheck = '<svg viewBox="0 0 16 16" width="16" height="16" style="color: #2da44e"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path></svg>';
|
|
|
|
function toggleBlock(header) {
|
|
const wrapper = header.closest('.raw-wrapper');
|
|
if (wrapper.classList.contains('collapsed')) {
|
|
wrapper.classList.replace('collapsed', 'expanded');
|
|
} else {
|
|
wrapper.classList.replace('expanded', 'collapsed');
|
|
}
|
|
}
|
|
|
|
function addCopyButtons(container) {
|
|
const pres = container.querySelectorAll("pre");
|
|
pres.forEach(function(preBlock) {
|
|
if (preBlock.parentNode.classList.contains("code-wrapper")) return;
|
|
|
|
const wrapper = document.createElement("div");
|
|
wrapper.className = "code-wrapper";
|
|
preBlock.parentNode.insertBefore(wrapper, preBlock);
|
|
wrapper.appendChild(preBlock);
|
|
|
|
const button = document.createElement("button");
|
|
button.className = "copy-btn";
|
|
button.innerHTML = iconCopy;
|
|
button.title = "Copy to Clipboard";
|
|
|
|
button.addEventListener("click", function() {
|
|
const code = preBlock.querySelector("code");
|
|
if (!code) return;
|
|
const text = code.innerText;
|
|
navigator.clipboard.writeText(text).then(function() {
|
|
button.innerHTML = iconCheck;
|
|
setTimeout(function() { button.innerHTML = iconCopy; }, 2000);
|
|
}, function(err) { console.error("Clipboard failed", err); });
|
|
});
|
|
|
|
wrapper.insertBefore(button, preBlock);
|
|
});
|
|
}
|
|
|
|
function renderTo(target, content, mode, title, isFinal) {
|
|
target.innerHTML = "";
|
|
if (mode === "markdown") {
|
|
if (title) {
|
|
const h = document.createElement("div");
|
|
h.className = "block-header";
|
|
h.innerText = title;
|
|
target.appendChild(h);
|
|
}
|
|
const c = document.createElement("div");
|
|
c.innerHTML = (typeof marked !== "undefined") ? marked.parse(content) : content;
|
|
target.appendChild(c);
|
|
|
|
// Highlight and add Copy Buttons
|
|
if (typeof hljs !== "undefined") {
|
|
c.querySelectorAll("pre code").forEach((block) => { hljs.highlightElement(block); });
|
|
}
|
|
addCopyButtons(c);
|
|
|
|
} else if (mode === "text") {
|
|
const wrapper = document.createElement("div");
|
|
wrapper.className = "raw-wrapper " + (isFinal ? "collapsed" : "expanded");
|
|
|
|
const header = document.createElement("div");
|
|
header.className = "raw-header";
|
|
header.onclick = function() { toggleBlock(this); };
|
|
header.innerHTML = chevronSvg + '<span>' + (title || "Raw Output") + '</span>';
|
|
|
|
const code = document.createElement("pre");
|
|
code.className = "raw-content";
|
|
code.innerText = content;
|
|
|
|
wrapper.appendChild(header);
|
|
wrapper.appendChild(code);
|
|
target.appendChild(wrapper);
|
|
} else {
|
|
target.innerHTML = content;
|
|
}
|
|
}
|
|
|
|
window.startBlock = function(payload) {
|
|
const parts = payload.split('|');
|
|
if (currentBuffer.length > 0) {
|
|
const oldBlock = document.createElement("div");
|
|
renderTo(oldBlock, currentBuffer, currentMode, currentTitle, true);
|
|
historyDiv.appendChild(oldBlock);
|
|
}
|
|
currentMode = parts[0];
|
|
currentTitle = parts[1] || "";
|
|
currentBuffer = "";
|
|
activeDiv.innerHTML = "";
|
|
};
|
|
|
|
window.appendData = function(chunk) {
|
|
currentBuffer += chunk;
|
|
renderTo(activeDiv, currentBuffer, currentMode, currentTitle, false);
|
|
window.scrollTo(0, document.body.scrollHeight);
|
|
};
|
|
|
|
window.clearAll = function() {
|
|
currentBuffer = ""; activeDiv.innerHTML = ""; historyDiv.innerHTML = "";
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|