mirror of
https://github.com/towishy/owen-editor.git
synced 2026-07-22 17:10:30 +00:00
494 lines
19 KiB
HTML
494 lines
19 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Owen Editor Glass Toolbar Preview</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: light;
|
|
--bg: #edf1f5;
|
|
--panel: #ffffff;
|
|
--line: #d4dbe4;
|
|
--text: #182230;
|
|
--muted: #66758a;
|
|
--accent: #2563eb;
|
|
--accent-soft: #eaf2ff;
|
|
--teal: #0f766e;
|
|
--glass: rgba(248, 250, 252, 0.62);
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
align-items: center;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
padding: 28px;
|
|
}
|
|
|
|
.workspace {
|
|
background: #eef2f6;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 8px;
|
|
box-shadow: 0 22px 54px rgba(31, 41, 55, 0.18);
|
|
display: grid;
|
|
grid-template-columns: 220px minmax(0, 1fr);
|
|
height: 760px;
|
|
max-width: 1240px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar {
|
|
background: #e4e9ef;
|
|
border-right: 1px solid var(--line);
|
|
padding: 18px 14px;
|
|
}
|
|
|
|
.brand {
|
|
color: #374151;
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.nav-item {
|
|
align-items: center;
|
|
border-radius: 6px;
|
|
color: #475569;
|
|
display: flex;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
gap: 8px;
|
|
min-height: 34px;
|
|
padding: 7px 8px;
|
|
}
|
|
|
|
.nav-item.is-active {
|
|
background: rgba(255, 255, 255, 0.84);
|
|
border: 1px solid rgba(100, 116, 139, 0.34);
|
|
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
|
color: #111827;
|
|
}
|
|
|
|
.content {
|
|
display: grid;
|
|
grid-template-rows: 48px minmax(0, 1fr);
|
|
min-width: 0;
|
|
}
|
|
|
|
.topbar {
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
border-bottom: 1px solid var(--line);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 18px;
|
|
}
|
|
|
|
.doc-title {
|
|
color: #334155;
|
|
font-size: 13px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.editor {
|
|
padding: 116px 42px 42px;
|
|
}
|
|
|
|
.paper {
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
max-width: 760px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.paper-head {
|
|
border-bottom: 1px solid var(--line);
|
|
color: #475569;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.markdown {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
padding: 18px;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.toolbar-stage {
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 88px;
|
|
transform: translateX(-50%);
|
|
width: min(1120px, calc(100% - 64px));
|
|
z-index: 4;
|
|
}
|
|
|
|
.glass-toolbar {
|
|
align-items: center;
|
|
-webkit-backdrop-filter: blur(4px) saturate(125%) brightness(1.12);
|
|
backdrop-filter: blur(4px) saturate(125%) brightness(1.12);
|
|
background: transparent;
|
|
border: 1px solid rgba(255, 255, 255, 0.44);
|
|
border-radius: 16px;
|
|
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2), 0 6px 16px rgba(15, 23, 42, 0.1), 0 0 24px rgba(15, 23, 42, 0.08);
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 4px;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
padding: 5px;
|
|
position: relative;
|
|
width: max-content;
|
|
}
|
|
|
|
.glass-toolbar::before,
|
|
.glass-toolbar::after {
|
|
border-radius: inherit;
|
|
content: "";
|
|
inset: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
}
|
|
|
|
.glass-toolbar::before {
|
|
-webkit-backdrop-filter: blur(4px);
|
|
backdrop-filter: blur(4px);
|
|
background: rgba(255, 255, 255, 0.01);
|
|
z-index: 0;
|
|
}
|
|
|
|
.glass-toolbar::after {
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.12));
|
|
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.82), inset 0 0 9px rgba(255, 255, 255, 0.5);
|
|
z-index: 1;
|
|
}
|
|
|
|
.tool-button {
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
border-radius: 12px;
|
|
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.34), inset 0 0 4px rgba(255, 255, 255, 0.14);
|
|
color: #475569;
|
|
display: inline-flex;
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
height: 34px;
|
|
justify-content: center;
|
|
min-width: 34px;
|
|
padding: 0 8px;
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.tool-button::after {
|
|
background: #ffffff;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 6px;
|
|
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
|
|
color: #182230;
|
|
content: attr(data-tooltip);
|
|
font-size: 11px;
|
|
font-weight: 750;
|
|
left: 50%;
|
|
opacity: 0;
|
|
padding: 6px 8px;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: calc(100% + 8px);
|
|
transform: translateX(-50%);
|
|
white-space: nowrap;
|
|
z-index: 6;
|
|
}
|
|
|
|
.tool-button.tooltip-visible::after,
|
|
.tool-button:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tool-button.icon-only { width: 34px; padding: 0; }
|
|
.tool-button svg { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.28)); height: 17px; stroke-width: 2.25; width: 17px; }
|
|
|
|
.tool-button.is-graphite {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.18);
|
|
color: #475569;
|
|
}
|
|
|
|
.tool-button.is-open {
|
|
background: linear-gradient(180deg, rgba(153, 246, 228, 0.42), rgba(204, 251, 241, 0.26));
|
|
border-color: rgba(45, 212, 191, 0.34);
|
|
color: var(--teal);
|
|
}
|
|
|
|
.tool-button.is-selection {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.18);
|
|
color: #475569;
|
|
}
|
|
|
|
.tool-button.is-links {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.18);
|
|
color: #475569;
|
|
}
|
|
|
|
.tool-button.is-blocks {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.18);
|
|
color: #475569;
|
|
}
|
|
|
|
.tool-button.is-all {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.18);
|
|
color: #475569;
|
|
}
|
|
|
|
.separator {
|
|
align-self: stretch;
|
|
background: transparent;
|
|
flex: 0 0 6px;
|
|
margin: 0 2px;
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.palette-popover {
|
|
-webkit-backdrop-filter: blur(22px) saturate(150%);
|
|
backdrop-filter: blur(22px) saturate(150%);
|
|
background: rgba(255, 255, 255, 0.84);
|
|
border: 1px solid rgba(148, 163, 184, 0.52);
|
|
border-radius: 8px;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 20px 46px rgba(15, 23, 42, 0.2);
|
|
margin: 10px auto 0;
|
|
padding: 14px;
|
|
width: 560px;
|
|
}
|
|
|
|
.palette-head {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.palette-title {
|
|
color: #111827;
|
|
font-size: 16px;
|
|
font-weight: 850;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.badge {
|
|
background: #f0fdfa;
|
|
border: 1px solid #99d6c9;
|
|
border-radius: 999px;
|
|
color: var(--teal);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.search {
|
|
background: rgba(248, 250, 252, 0.86);
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
margin-bottom: 12px;
|
|
padding: 10px 12px;
|
|
width: 100%;
|
|
}
|
|
|
|
.group-title {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 850;
|
|
letter-spacing: 0;
|
|
margin: 12px 0 8px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.command-grid {
|
|
display: grid;
|
|
gap: 8px;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.command {
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.52);
|
|
border: 1px solid rgba(148, 163, 184, 0.42);
|
|
border-radius: 6px;
|
|
color: #334155;
|
|
display: flex;
|
|
gap: 8px;
|
|
min-height: 36px;
|
|
padding: 7px 8px;
|
|
}
|
|
|
|
.command.is-highlighted {
|
|
background: var(--accent-soft);
|
|
border-color: #93c5fd;
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
.command svg { flex: 0 0 auto; height: 16px; width: 16px; }
|
|
.command span { font-size: 12px; font-weight: 750; line-height: 1.25; }
|
|
|
|
.highlight-grid {
|
|
display: grid;
|
|
gap: 8px;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.highlight-option {
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.52);
|
|
border: 1px solid rgba(148, 163, 184, 0.42);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
gap: 8px;
|
|
min-height: 44px;
|
|
padding: 7px 8px;
|
|
}
|
|
|
|
.highlight-swatch {
|
|
align-items: center;
|
|
border: 1px solid rgba(100, 116, 139, 0.24);
|
|
border-radius: 6px;
|
|
display: inline-flex;
|
|
flex: 0 0 38px;
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
height: 28px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.highlight-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.highlight-copy strong { color: #1f2937; font-size: 12px; line-height: 1.1; }
|
|
.highlight-copy span { color: var(--muted); font-size: 11px; font-weight: 750; line-height: 1.1; }
|
|
|
|
@media (max-width: 900px) {
|
|
body { padding: 14px; }
|
|
.workspace { grid-template-columns: 1fr; height: 760px; }
|
|
.sidebar { display: none; }
|
|
.toolbar-stage { width: calc(100% - 28px); }
|
|
.glass-toolbar { justify-content: flex-start; max-width: 100%; }
|
|
.palette-popover { width: min(100%, 560px); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="workspace" aria-label="Owen Editor glass toolbar preview">
|
|
<aside class="sidebar">
|
|
<div class="brand">Owen Graphite</div>
|
|
<div class="nav-item is-active"><span>◆</span><span>Report Draft.md</span></div>
|
|
<div class="nav-item"><span>◇</span><span>References.md</span></div>
|
|
<div class="nav-item"><span>◇</span><span>Risk Matrix.md</span></div>
|
|
</aside>
|
|
|
|
<section class="content">
|
|
<header class="topbar">
|
|
<div class="doc-title">Report Draft.md</div>
|
|
<div class="doc-title">Owen Editor</div>
|
|
</header>
|
|
|
|
<div class="toolbar-stage">
|
|
<div class="glass-toolbar" aria-label="Owen Editor toolbar">
|
|
<div class="tool-button icon-only" data-tooltip="Undo edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg></div>
|
|
<div class="tool-button icon-only" data-tooltip="Redo edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 15-6.7L21 13"/></svg></div>
|
|
<div class="tool-button icon-only" data-tooltip="Clear formatting"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 20H8a4 4 0 0 1-4-4V4"/><path d="m16 4 4 4-10 10H6v-4z"/></svg></div>
|
|
<div class="separator"></div>
|
|
<div class="tool-button" data-tooltip="Convert line to H2">H2</div>
|
|
<div class="tool-button" data-tooltip="Convert line to H3">H3</div>
|
|
<div class="tool-button" data-tooltip="Bold selection">B</div>
|
|
<div class="tool-button" data-tooltip="Italic selection"><em>I</em></div>
|
|
<div class="tool-button" data-tooltip="Strikethrough selection"><s>S</s></div>
|
|
<div class="tool-button" data-tooltip="Underline selection"><u>U</u></div>
|
|
<div class="tool-button icon-only" data-tooltip="Highlight selection"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m9 11 6-6 4 4-6 6"/><path d="m4 20 5-9 4 4-9 5z"/></svg></div>
|
|
<div class="separator"></div>
|
|
<div class="tool-button icon-only" data-tooltip="Insert link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21.4 11.6 12 21a6 6 0 0 1-8.5-8.5l9.4-9.4a4 4 0 0 1 5.7 5.7L9.2 18.2a2 2 0 1 1-2.8-2.8l8.7-8.7"/></svg></div>
|
|
<div class="tool-button icon-only" data-tooltip="Outdent line or selection"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 6H11"/><path d="M21 12H11"/><path d="M21 18H11"/><path d="m7 8-4 4 4 4"/></svg></div>
|
|
<div class="tool-button icon-only" data-tooltip="Indent line or selection"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 6H11"/><path d="M21 12H11"/><path d="M21 18H11"/><path d="m3 8 4 4-4 4"/></svg></div>
|
|
<div class="tool-button icon-only" data-tooltip="Toggle task"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></div>
|
|
<div class="tool-button icon-only" data-tooltip="Bullet list"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/></svg></div>
|
|
<div class="separator"></div>
|
|
<div class="tool-button is-selection icon-only" data-tooltip="Open selection tools"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/></svg></div>
|
|
<div class="tool-button is-links icon-only" data-tooltip="Open link tools"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M10 13a5 5 0 0 0 7.1 0l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1"/><path d="M14 11a5 5 0 0 0-7.1 0l-2 2a5 5 0 0 0 7.1 7.1l1.1-1.1"/></svg></div>
|
|
<div class="tool-button is-blocks icon-only" data-tooltip="Open block tools"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M8 6h8"/><path d="M8 12h8"/><path d="M8 18h8"/><path d="M19 12h3"/><path d="M20.5 10.5v3"/></svg></div>
|
|
<div class="tool-button is-open icon-only tooltip-visible" data-tooltip="Open table tools"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M3 3h18v18H3z"/><path d="M3 9h18"/><path d="M9 3v18"/></svg></div>
|
|
<div class="tool-button is-graphite icon-only" data-tooltip="Open Owen Graphite tools"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 3 14.7 8.5 21 9.4 16.5 13.8 17.6 20 12 17.1 6.4 20 7.5 13.8 3 9.4 9.3 8.5z"/></svg></div>
|
|
<div class="tool-button is-all icon-only" data-tooltip="Open all commands"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 4h16v16H4z"/><path d="M4 9h16"/><path d="m9 14 3 3 3-3"/></svg></div>
|
|
</div>
|
|
|
|
<section class="palette-popover" aria-label="Expanded comments and notices palette">
|
|
<div class="palette-head">
|
|
<div class="palette-title">Selection Tools</div>
|
|
<span class="badge">palette</span>
|
|
</div>
|
|
<div class="group-title">Comments and notices</div>
|
|
<div class="command-grid">
|
|
<div class="command is-highlighted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg><span>Comment selection</span></div>
|
|
<div class="command"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 8h.01"/><path d="M11 12h1v4h1"/><circle cx="12" cy="12" r="10"/></svg><span>Info</span></div>
|
|
<div class="command"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M15.5 2H8.6a2 2 0 0 0-2 2v16l5.4-3 5.4 3V4a2 2 0 0 0-1.9-2z"/></svg><span>Note</span></div>
|
|
<div class="command"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 0 0-4 12c.6.5 1 1.4 1 2h6c0-.6.4-1.5 1-2a7 7 0 0 0-4-12z"/></svg><span>Tip</span></div>
|
|
<div class="command"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 9v4"/><path d="M12 17h.01"/><path d="M3 12a9 9 0 1 0 18 0 9 9 0 0 0-18 0"/></svg><span>Important</span></div>
|
|
<div class="command"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m9 12 2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg><span>Success</span></div>
|
|
<div class="command"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 1 1 5.8 1c0 2-3 2-3 4"/><path d="M12 17h.01"/></svg><span>Question</span></div>
|
|
<div class="command"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg><span>Warning</span></div>
|
|
<div class="command"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg><span>Failure</span></div>
|
|
<div class="command"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M8.6 3h6.8L21 8.6v6.8L15.4 21H8.6L3 15.4V8.6z"/><path d="M12 8v5"/><path d="M12 17h.01"/></svg><span>Danger</span></div>
|
|
<div class="command"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m8 2 1.9 1.9"/><path d="M14.1 3.9 16 2"/><path d="M9 7h6"/><path d="M8 11h8"/><path d="M9 15h6"/><path d="M12 7v12"/><path d="M7 13H2"/><path d="M22 13h-5"/><path d="M6 9l-4-4"/><path d="m22 5-4 4"/><path d="m6 17-4 4"/><path d="m22 21-4-4"/></svg><span>Bug</span></div>
|
|
<div class="command"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/></svg><span>Example</span></div>
|
|
<div class="command"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 3-1 5-4 5z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 3-1 5-4 5z"/></svg><span>Quote</span></div>
|
|
<div class="command"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><span>Abstract</span></div>
|
|
<div class="command"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m9 11 3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg><span>Todo</span></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="editor">
|
|
<article class="paper">
|
|
<div class="paper-head">Live Preview</div>
|
|
<div class="markdown">## Executive Review
|
|
|
|
> [!summary] Executive summary
|
|
> 핵심 판단과 근거를 간결하게 정리합니다.
|
|
|
|
<table class="risk-table compact-table">
|
|
<tr><th>Risk</th><th>Status</th></tr>
|
|
<tr><td>Policy drift</td><td class="risk-medium">Medium</td></tr>
|
|
</table>
|
|
|
|
<span class="ogd-status-badge is-e5">E5</span></div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|