144 lines
4.1 KiB
HTML
144 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Ontoref — Architecture</title>
|
|
<style>
|
|
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Inter:wght@400;600;700&display=swap");
|
|
|
|
:root {
|
|
--bg: #0f172a;
|
|
--border: rgba(96, 165, 250, 0.3);
|
|
--muted: #94a3b8;
|
|
--blue: #60a5fa;
|
|
--orange: #E8A838;
|
|
}
|
|
|
|
html.light {
|
|
--bg: #f8fafc;
|
|
--border: rgba(96, 165, 250, 0.35);
|
|
--muted: #64748b;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
background: var(--bg);
|
|
font-family: "Inter", sans-serif;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.diagram-container {
|
|
width: min(1100px, 100vw);
|
|
aspect-ratio: 900 / 578;
|
|
position: relative;
|
|
}
|
|
|
|
.diagram-container img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
/* ── Nav ── */
|
|
.nav {
|
|
position: fixed;
|
|
top: 1.5rem;
|
|
right: 1.5rem;
|
|
z-index: 100;
|
|
display: flex;
|
|
gap: 0.3rem;
|
|
align-items: center;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 20px;
|
|
padding: 0.3rem;
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.nav-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--muted);
|
|
padding: 0.45rem 0.9rem;
|
|
border-radius: 16px;
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
font-size: 0.82rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
font-family: "JetBrains Mono", monospace;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.nav-btn:hover { color: var(--blue); }
|
|
|
|
.nav-btn.back {
|
|
background: rgba(96, 165, 250, 0.1);
|
|
color: var(--blue);
|
|
border: 1px solid rgba(96, 165, 250, 0.3);
|
|
}
|
|
|
|
.nav-btn.back:hover { background: rgba(96, 165, 250, 0.18); }
|
|
|
|
.nav-btn.theme { font-size: 1.1rem; padding: 0.4rem 0.7rem; }
|
|
|
|
@media (max-width: 768px) {
|
|
.nav { top: 1rem; right: 1rem; }
|
|
.diagram-container {
|
|
width: 100vw;
|
|
aspect-ratio: 900 / 578;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="nav">
|
|
<button class="nav-btn theme" onclick="toggleTheme()" title="Toggle dark/light mode" id="theme-btn">☀️</button>
|
|
<a href="index.html" class="nav-btn back">← Ontoref</a>
|
|
</nav>
|
|
|
|
<div class="diagram-container">
|
|
<img id="svg-dark" src="../protocol-flow-dark.svg" alt="Ontoref — Protocol Layers & Request Flow (dark)" style="display:block;" />
|
|
<img id="svg-light" src="../protocol-flow-light.svg" alt="Ontoref — Protocol Layers & Request Flow (light)" style="display:none;" />
|
|
</div>
|
|
|
|
<script>
|
|
const THEME_KEY = "ontoref-arch-theme";
|
|
|
|
function getTheme() { return localStorage.getItem(THEME_KEY) || "dark"; }
|
|
|
|
function setTheme(t) {
|
|
localStorage.setItem(THEME_KEY, t);
|
|
var btn = document.getElementById("theme-btn");
|
|
var dark = document.getElementById("svg-dark");
|
|
var light = document.getElementById("svg-light");
|
|
if (t === "light") {
|
|
document.documentElement.classList.add("light");
|
|
btn.textContent = "\uD83C\uDF19";
|
|
dark.style.display = "none";
|
|
light.style.display = "block";
|
|
} else {
|
|
document.documentElement.classList.remove("light");
|
|
btn.textContent = "\u2600\uFE0F";
|
|
dark.style.display = "block";
|
|
light.style.display = "none";
|
|
}
|
|
}
|
|
|
|
function toggleTheme() { setTheme(getTheme() === "dark" ? "light" : "dark"); }
|
|
|
|
setTheme(getTheme());
|
|
</script>
|
|
</body>
|
|
</html>
|