SharedDocsLib/docslib/templates/index.html

85 lines
4.2 KiB
HTML

<!doctype html>
<html lang="und">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="color-scheme" content="dark light">
<title>{{DOCSLIB_TITLE}}</title>
<script>
try { document.documentElement.dataset.theme = localStorage.getItem("docslib-theme") || "dark"; }
catch (_) { document.documentElement.dataset.theme = "dark"; }
</script>
<style id="docslib-loader-style">
:root { --docslib-loader-bg: #000000; --docslib-loader-text: #f4f4f4; color-scheme: dark; }
:root[data-theme="light"] { --docslib-loader-bg: #ffffff; --docslib-loader-text: #111111; color-scheme: light; }
html, body { width: 100%; height: 100dvh; min-height: 100dvh; margin: 0; overflow: hidden; background: var(--docslib-loader-bg); }
#docslib-loading { position: fixed; inset: 0; z-index: 2147483647; display: grid; width: 100vw; height: 100dvh; place-items: center; color: var(--docslib-loader-text); background: var(--docslib-loader-bg); }
.docslib-loading-spinner { width: 48px; height: 48px; box-sizing: border-box; border: solid 4px currentColor; border-top: solid 4px transparent; border-radius: 9999px; animation: docslib-loader-spin .8s linear infinite; }
@keyframes docslib-loader-spin { to { transform: rotate(360deg); } }
</style>
</head>
<body>
<div id="docslib-loading" aria-hidden="true"><div class="docslib-loading-spinner"></div></div>
<div id="app" class="app-shell">
<header class="desktop-header">
<h2 id="desktop-site-title" class="desktop-title">{{DOCSLIB_TITLE}}</h2>
<div id="desktop-toolbar" class="desktop-toolbar">
<div id="desktop-search-shell" class="desktop-search-shell">
<div class="search-control">
<input id="desktop-search-input" type="search" aria-label="⌕" autocomplete="off" spellcheck="false">
<button id="desktop-search-button" class="glyph-button search-glyph" aria-label="⌕"></button>
</div>
<div id="desktop-search-results" class="desktop-search-results"></div>
</div>
<button id="theme-button" class="glyph-button theme-button" aria-label="◐"><span id="theme-icon"></span></button>
<button id="refresh-button" class="refresh-button" aria-label="⟳">
<span class="refresh-glyph"></span>
<span id="manifest-identity" class="manifest-identity"></span>
</button>
</div>
</header>
<section class="desktop-main">
<aside class="desktop-sidebar">
<nav id="desktop-header-buttons" class="sidebar-header-buttons" aria-label="⋯"></nav>
<nav id="desktop-page-tree" class="page-tree" aria-label="≡"></nav>
</aside>
<section class="workspace">
<section id="page-surface" class="page-surface">
<main id="content" class="content" tabindex="-1"></main>
<footer class="page-navigation">
<button id="previous-page" class="nav-card"></button>
<button id="next-page" class="nav-card"></button>
</footer>
</section>
<section id="mobile-menu-view" class="mobile-view mobile-menu-view">
<h1 id="mobile-site-title" class="mobile-site-title">{{DOCSLIB_TITLE}}</h1>
<nav id="mobile-header-buttons" class="mobile-header-buttons" aria-label="⋯"></nav>
<nav id="mobile-page-tree" class="page-tree mobile-page-tree" aria-label="≡"></nav>
</section>
<section id="mobile-search-view" class="mobile-view mobile-search-view">
<div id="mobile-search-results" class="mobile-search-results"></div>
</section>
</section>
</section>
<div class="mobile-dock">
<button id="mobile-menu-button" class="mobile-menu-button glyph-button" aria-label="☰"></button>
<div class="mobile-search-control">
<input id="mobile-search-input" type="search" aria-label="⌕" autocomplete="off" spellcheck="false">
<button id="mobile-search-button" class="glyph-button search-glyph" aria-label="⌕"></button>
</div>
</div>
</div>
<script id="docslib-manifest" type="application/json">{{DOCSLIB_MANIFEST}}</script>
<script id="docslib-config" type="application/json">{{DOCSLIB_CONFIG}}</script>
<script>
{{DOCSLIB_LOADER}}
</script>
</body>
</html>