mirror of
https://github.com/seigler/janus
synced 2025-07-26 17:26:10 +00:00
81 lines
2.7 KiB
HTML
81 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Janus Presentation Framework</title>
|
|
<link rel="stylesheet" href="styles/main.css" charset="utf-8">
|
|
</head>
|
|
<body class="is-loading">
|
|
<nav>
|
|
<label for="commandField">Command:</label>
|
|
<input list="commands" type="text" id="commandField" autocomplete="off" pattern="[0-9]+|[spc]">
|
|
<ul class="help">
|
|
<li>
|
|
<strong>#</strong> - jump to a slide item
|
|
</li>
|
|
<li>
|
|
<strong>s</strong> - toggle projector simulation
|
|
</li>
|
|
<li>
|
|
<strong>p</strong> - toggle presenter mode
|
|
</li>
|
|
<li>
|
|
<strong>c</strong> - clone window
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<main>
|
|
|
|
<section style="background: linear-gradient(-30deg, black, rebeccapurple)">
|
|
<h1>Janus Presentations</h1>
|
|
<h2>Hotkey powered, multi-window presentations</h2>
|
|
<div><small>
|
|
Press <kbd>Escape</kbd> for commands. <kbd>Page Up</kbd> / <kbd>Page Down</kbd> to navigate.
|
|
</small></div>
|
|
<div><a href="https://github.com/seigler/janus">Get the code on GitHub</a></div>
|
|
</section>
|
|
|
|
<section style="background: linear-gradient(-30deg, #400, black)">
|
|
<h1>Hotkeys</h1>
|
|
<div janus-timeline>
|
|
Clone Window: <kbd>F2</kbd>
|
|
</div>
|
|
<div janus-timeline>
|
|
Navigation: <kbd>Page Down</kbd>, <kbd>Page Up</kbd>
|
|
</div>
|
|
<div janus-timeline>
|
|
Toggle Presenter Mode: <kbd>F1</kbd>
|
|
</div>
|
|
</section>
|
|
|
|
<section style="color: black">
|
|
<img class="cover" src="https://placekitten.com/1024/768" alt="" />
|
|
<h1>Self-scaling cover images with <code>object-fit</code></h1>
|
|
</section>
|
|
<section style="background: linear-gradient(60deg, #060, black)">
|
|
<h1>Simple default markup</h1>
|
|
<div>
|
|
Any <code>section</code> tag or item with attribute <code>janus-timeline</code> is added to the timeline and revealed in sequence.
|
|
</div>
|
|
</section>
|
|
|
|
<section style="background: linear-gradient(-60deg, black, #630)">
|
|
<h1>Animations controlled by CSS</h1>
|
|
<div>
|
|
Framework sets custom attribute <code>janus-timeline</code> to <code>past</code>, <code>present</code>, or <code>future</code>
|
|
</div>
|
|
</section>
|
|
|
|
<section style="color: black; background-color: #FA0">
|
|
<h1>Cross-window synchronization with JavaScript <code>localStorage</code> events.</h1>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>The end.</h1>
|
|
</section>
|
|
|
|
</main>
|
|
<script type="text/javascript" src="libs/openjs-shortcut/shortcut.js"></script>
|
|
<script type="text/javascript" src="scripts/app.js"></script>
|
|
</body>
|
|
</html>
|