189 lines
8.6 KiB
HTML
189 lines
8.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="dark">
|
|
<title>librus-tui :: synergia</title>
|
|
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="crt" id="crt">
|
|
<div class="crt-scanlines" aria-hidden="true"></div>
|
|
<div class="crt-vignette" aria-hidden="true"></div>
|
|
<div class="crt-flicker" aria-hidden="true"></div>
|
|
|
|
<div class="terminal" id="terminal">
|
|
<header class="titlebar">
|
|
<div class="titlebar-left">
|
|
<span class="titlebar-mark">▚</span>
|
|
<span class="titlebar-name">librus-tui</span>
|
|
<span class="titlebar-sep">::</span>
|
|
<span class="titlebar-sub">synergia gateway</span>
|
|
</div>
|
|
<div class="titlebar-right">
|
|
<span class="badge demo-badge hidden" id="demo-badge">DEMO</span>
|
|
<span class="led" id="connection-led" title="connection"></span>
|
|
<span class="titlebar-date" id="date"></span>
|
|
<span class="titlebar-clock" id="clock">--:--:--</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ---------------------------------------------------------- login -->
|
|
<section class="screen login-screen" id="login-screen">
|
|
<div class="login-wrap">
|
|
<pre class="logo" aria-label="LIBRUS TUI"> _ ___ ____ ____ _ _ ____
|
|
| | |_ _| __ )| _ \| | | / ___|
|
|
| | | || _ \| |_) | | | \___ \
|
|
| |___ | || |_) | _ <| |_| |___) |
|
|
|_____|___|____/|_| \_\\___/|____/ <span class="logo-accent">// TUI</span></pre>
|
|
<p class="logo-sub">a terminal frontend for Librus Synergia</p>
|
|
|
|
<div class="login-grid">
|
|
<form class="login-box" id="login-form" autocomplete="on">
|
|
<div class="box-rule"><span>AUTHENTICATION</span></div>
|
|
<label class="field">
|
|
<span class="field-label">login</span>
|
|
<span class="field-input-wrap">
|
|
<span class="field-prompt">></span>
|
|
<input id="login" name="login" type="text" autocomplete="username"
|
|
spellcheck="false" autocapitalize="off" placeholder="synergia login" required>
|
|
</span>
|
|
</label>
|
|
<label class="field">
|
|
<span class="field-label">password</span>
|
|
<span class="field-input-wrap">
|
|
<span class="field-prompt">></span>
|
|
<input id="password" name="password" type="password"
|
|
autocomplete="current-password" placeholder="••••••••" required>
|
|
</span>
|
|
</label>
|
|
<button class="btn btn-primary" id="login-btn" type="submit">[ authenticate ]</button>
|
|
<div class="login-alt">
|
|
<button class="btn hidden" id="demo-btn" type="button">[ enter demo mode ]</button>
|
|
<span class="login-note">OAuth 2.0 · gateway api/2.0</span>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="bootlog-wrap">
|
|
<div class="box-rule"><span>BOOT LOG</span></div>
|
|
<pre class="bootlog" id="bootlog" aria-live="polite"></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="login-hint">
|
|
credentials are exchanged with Librus and kept in server memory only ·
|
|
<span class="dim">no cookies are stored in your browser except the session id</span>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ------------------------------------------------------------- app -->
|
|
<section class="screen app-screen hidden" id="app-screen">
|
|
<div class="app-grid">
|
|
<nav class="sidebar" id="sidebar" aria-label="Sections">
|
|
<div class="side-head">NAVIGATION</div>
|
|
<button class="nav-item" data-view="dashboard" type="button">
|
|
<span class="nav-key">1</span><span class="nav-label">dashboard</span>
|
|
</button>
|
|
<button class="nav-item" data-view="grades" type="button">
|
|
<span class="nav-key">2</span><span class="nav-label">grades</span>
|
|
</button>
|
|
<button class="nav-item" data-view="timetable" type="button">
|
|
<span class="nav-key">3</span><span class="nav-label">timetable</span>
|
|
</button>
|
|
<button class="nav-item" data-view="homework" type="button">
|
|
<span class="nav-key">4</span><span class="nav-label">homework</span>
|
|
</button>
|
|
<button class="nav-item" data-view="attendance" type="button">
|
|
<span class="nav-key">5</span><span class="nav-label">attendance</span>
|
|
</button>
|
|
<button class="nav-item" data-view="messages" type="button">
|
|
<span class="nav-key">6</span><span class="nav-label">messages</span>
|
|
</button>
|
|
<button class="nav-item" data-view="freedays" type="button">
|
|
<span class="nav-key">7</span><span class="nav-label">free days</span>
|
|
</button>
|
|
<button class="nav-item" data-view="settings" type="button">
|
|
<span class="nav-key">8</span><span class="nav-label">settings</span>
|
|
</button>
|
|
|
|
<div class="side-sep"></div>
|
|
<button class="nav-item nav-muted" data-action="refresh" type="button">
|
|
<span class="nav-key">r</span><span class="nav-label">refresh</span>
|
|
</button>
|
|
<button class="nav-item nav-muted" data-action="help" type="button">
|
|
<span class="nav-key">?</span><span class="nav-label">help</span>
|
|
</button>
|
|
<button class="nav-item nav-muted" data-action="logout" type="button">
|
|
<span class="nav-key">q</span><span class="nav-label">logout</span>
|
|
</button>
|
|
|
|
<div class="side-spacer"></div>
|
|
<div class="side-user" id="side-user">
|
|
<div class="side-user-name" id="side-user-name">connecting…</div>
|
|
<div class="side-user-meta" id="side-user-meta">synergia://</div>
|
|
</div>
|
|
<div class="side-foot">
|
|
<span>v<span id="version">1.0.0</span></span>
|
|
<span id="side-status">offline</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="main">
|
|
<div class="view-head">
|
|
<div class="view-path">
|
|
<span class="dim">synergia:</span><span id="view-title">dashboard</span>
|
|
<span class="cursor-block" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="view-meta" id="view-meta"></div>
|
|
</div>
|
|
<section class="view" id="view" tabindex="0" aria-live="polite"></section>
|
|
</main>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ------------------------------------------------------- status bar -->
|
|
<footer class="command">
|
|
<div class="command-line" id="command-line">
|
|
<span class="prompt" id="prompt">~$</span>
|
|
<span class="command-display" id="command-display"></span>
|
|
<input class="command-input hidden" id="command-input" type="text"
|
|
autocomplete="off" spellcheck="false" aria-label="Command">
|
|
<span class="command-hint" id="command-hint">press <kbd>:</kbd> for commands · <kbd>?</kbd> for help</span>
|
|
</div>
|
|
<div class="statusbar">
|
|
<span class="status-left" id="status-left">ready</span>
|
|
<span class="status-keys">
|
|
<kbd>1</kbd><span class="dim">-</span><kbd>7</kbd> views
|
|
<kbd>r</kbd> refresh
|
|
<kbd>:</kbd> cmd
|
|
<kbd>j</kbd><kbd>k</kbd> move
|
|
</span>
|
|
<span class="status-right" id="status-right">synergia://offline</span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<div class="toasts" id="toasts" aria-live="assertive"></div>
|
|
|
|
<div class="modal-root hidden" id="modal-root" role="dialog" aria-modal="true">
|
|
<div class="modal-backdrop" data-modal-close></div>
|
|
<div class="modal-box" id="modal-box" tabindex="-1">
|
|
<div class="modal-title" id="modal-title"></div>
|
|
<div class="modal-body" id="modal-body"></div>
|
|
<div class="modal-actions" id="modal-actions"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/static/js/00-core.js" defer></script>
|
|
<script src="/static/js/10-auth.js" defer></script>
|
|
<script src="/static/js/20-dashboard.js" defer></script>
|
|
<script src="/static/js/22-grades.js" defer></script>
|
|
<script src="/static/js/24-timetable.js" defer></script>
|
|
<script src="/static/js/26-more-views.js" defer></script>
|
|
<script src="/static/js/30-app.js" defer></script>
|
|
</body>
|
|
</html>
|