mirror of
https://github.com/seigler/janus
synced 2025-07-26 17:26:10 +00:00
53 lines
2 KiB
HTML
53 lines
2 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>
|
|
<main>
|
|
<section style="background: linear-gradient(-30deg, black, rebeccapurple)">
|
|
<h1>Janus Presentations</h1>
|
|
<h2>Hotkey powered, multi-window presentations</h2>
|
|
<div>Press <code>Page Down</code> to continue.</div>
|
|
</section>
|
|
<section style="background: linear-gradient(-30deg, #400, black)">
|
|
<h1>Hotkeys</h1>
|
|
<div janus-timeline>
|
|
Clone Window: <code>F2</code>
|
|
</div>
|
|
<div janus-timeline>
|
|
Navigation: <code>Page Down</code>, <code>Page Up</code>
|
|
</div>
|
|
<div janus-timeline>
|
|
Toggle Presenter Mode: <code>F1</code>
|
|
</div>
|
|
</section>
|
|
<section style="text-shadow: 0 0 1em 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="scripts/shortcut.js"></script>
|
|
<script type="text/javascript" src="scripts/app.js"></script>
|
|
</body>
|
|
</html>
|