ObsiViewer/index.html

74 lines
2.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ObsiViewer - Obsidian Vault Viewer</title>
<script>
(function () {
try {
const key = 'obsiviewer.preferences.v1';
const raw = localStorage.getItem(key);
const prefs = raw ? JSON.parse(raw) : null;
const html = document.documentElement;
function apply(mode, theme) {
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
const dark = mode === 'system' ? prefersDark : (mode === 'dark');
html.classList.toggle('dark', !!dark);
if (theme) html.setAttribute('data-theme', theme);
}
if (prefs && prefs.mode && prefs.theme) {
apply(prefs.mode, prefs.theme);
} else {
// défaut : system + light tokens
apply('system', 'light');
}
} catch (e) { /* no-op */ }
})();
</script>
<script type="importmap">
{
"imports": {
"rxjs": "https://aistudiocdn.com/rxjs@^7.8.2?conditions=es2015",
"rxjs/operators": "https://aistudiocdn.com/rxjs@^7.8.2/operators?conditions=es2015",
"rxjs/ajax": "https://aistudiocdn.com/rxjs@^7.8.2/ajax?conditions=es2015",
"rxjs/webSocket": "https://aistudiocdn.com/rxjs@^7.8.2/webSocket?conditions=es2015",
"rxjs/testing": "https://aistudiocdn.com/rxjs@^7.8.2/testing?conditions=es2015",
"rxjs/fetch": "https://aistudiocdn.com/rxjs@^7.8.2/fetch?conditions=es2015",
"@angular/common": "https://next.esm.sh/@angular/common@^20.3.1?external=rxjs",
"@angular/common/http": "https://next.esm.sh/@angular/common@^20.3.1/http?external=rxjs",
"@angular/core": "https://next.esm.sh/@angular/core@^20.3.1?external=rxjs",
"@angular/compiler": "https://next.esm.sh/@angular/compiler@^20.3.1?external=rxjs",
"@angular/platform-browser": "https://next.esm.sh/@angular/platform-browser@^20.3.1?external=rxjs",
"@angular/forms": "https://next.esm.sh/@angular/forms@^20.3.1?external=rxjs"
}
}
</script>
</head>
<body>
<app-root></app-root>
<script>
(function () {
const body = document.body;
let timer = null;
const IDLE_DELAY = 900;
const setIdle = () => {
body.classList.remove('scrollbar-moving');
body.classList.add('scrollbar-idle');
};
const setMoving = () => {
body.classList.add('scrollbar-moving');
body.classList.remove('scrollbar-idle');
if (timer) clearTimeout(timer);
timer = setTimeout(setIdle, IDLE_DELAY);
};
setIdle();
window.addEventListener('mousemove', setMoving, { passive: true });
window.addEventListener('wheel', setMoving, { passive: true });
window.addEventListener('touchmove', setMoving, { passive: true });
})();
</script>
</body>
</html>