141 lines
4.3 KiB
HTML
141 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ObsiGate - Popout</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" id="hljs-theme-dark">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
<script src="https://unpkg.com/lucide@0.344.0/dist/umd/lucide.min.js"></script>
|
|
<style>
|
|
body, html {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: #0d1117; /* GitHub-like dark background */
|
|
color: #e6edf3;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
|
}
|
|
.popout-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
border: 1px solid #30363d;
|
|
box-sizing: border-box;
|
|
}
|
|
.popout-header {
|
|
padding: 12px 20px;
|
|
background: #161b22;
|
|
border-bottom: 1px solid #30363d;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.popout-title {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: #7d8590;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.popout-content {
|
|
flex: 1;
|
|
padding: 3.5rem 2rem;
|
|
overflow-y: auto;
|
|
}
|
|
.main-wrapper {
|
|
max-width: 840px;
|
|
margin: 0 auto;
|
|
padding: 2.5rem;
|
|
background: #161b22;
|
|
border: 1px solid #30363d;
|
|
border-radius: 12px;
|
|
box-shadow: 0 12px 48px rgba(0,0,0,0.3);
|
|
}
|
|
.markdown-body {
|
|
line-height: 1.7;
|
|
color: #e6edf3;
|
|
}
|
|
/* Hide default scrollbar but keep functionality */
|
|
::-webkit-scrollbar { width: 8px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 10px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #484f58; }
|
|
|
|
.popout-loading {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #0d1117;
|
|
z-index: 100;
|
|
transition: opacity 0.3s;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="popup-mode">
|
|
<div class="popout-loading" id="loading">Chargement...</div>
|
|
|
|
<div class="popout-container">
|
|
<div class="popout-header">
|
|
<div class="popout-title" id="file-title">ObsiGate</div>
|
|
<div style="font-size: 0.75rem; color: #7d8590;" id="vault-name"></div>
|
|
</div>
|
|
<div class="popout-content">
|
|
<div class="main-wrapper">
|
|
<div id="content-area" class="markdown-body"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
async function initPopout() {
|
|
const pathParts = window.location.pathname.split('/');
|
|
// Expected: /popout/{vault}/{path...}
|
|
const vault = decodeURIComponent(pathParts[2]);
|
|
const path = decodeURIComponent(pathParts.slice(3).join('/'));
|
|
|
|
if (!vault || !path) {
|
|
document.getElementById('loading').textContent = "Paramètres invalides";
|
|
return;
|
|
}
|
|
|
|
document.getElementById('vault-name').textContent = vault;
|
|
document.getElementById('file-title').textContent = path.split('/').pop();
|
|
|
|
try {
|
|
const response = await fetch(`/api/file/${encodeURIComponent(vault)}?path=${encodeURIComponent(path)}`, {
|
|
credentials: 'include'
|
|
});
|
|
if (!response.ok) throw new Error("Erreur lors du chargement du fichier");
|
|
|
|
const data = await response.json();
|
|
document.getElementById('content-area').innerHTML = data.html;
|
|
document.title = data.title + " - ObsiGate";
|
|
|
|
// Highlight code blocks
|
|
document.querySelectorAll('pre code').forEach((el) => {
|
|
hljs.highlightElement(el);
|
|
});
|
|
|
|
// Hide loading
|
|
document.getElementById('loading').style.opacity = '0';
|
|
setTimeout(() => {
|
|
document.getElementById('loading').style.display = 'none';
|
|
}, 300);
|
|
|
|
} catch (err) {
|
|
document.getElementById('loading').textContent = err.message;
|
|
}
|
|
}
|
|
|
|
window.onload = initPopout;
|
|
</script>
|
|
</body>
|
|
</html>
|