theophile
Version:
A templating module that transforms a web page into a (Powerpoint-like) presentation
40 lines • 3.19 kB
HTML
<html lang="en" data-th-slide-ratio="[4,3]" data-th-slide-nlines="30" data-th-slide-transition="duration:1000;name:blur;blur:1;direction:e;mode:peel;width:50">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My first document</title>
<script type="module">
import App from "../App.js";
await App.exec();
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates beatae minima, harum iste quidem dolores enim magnam voluptatum error quasi commodi magni libero ut velit voluptate! Libero omnis quo reiciendis!</p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum sequi molestias hic obcaecati, cum possimus repudiandae velit eius magnam inventore corrupti eveniet ipsam odio voluptatem fuga debitis blanditiis rerum reiciendis.
<h1>My first document</h1>
<p>Will be in an "intro" slide. (or not)</p>
<h2>My first slide</h2>
<p>Molestias magni eveniet porro perferendis, officia maxime ducimus quibusdam ut itaque! Voluptatum nam eius libero tempora. Ullam nam eaque magni reprehenderit repudiandae!</p>
<h3>Part of a slide</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla ducimus neque eaque dolor accusantium vitae magnam modi consequatur, minus voluptate quas minima nemo autem cumque laborum et eum doloribus asperiores!</p>
<br/>
<h3>Other part of a slide</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quaerat, necessitatibus dignissimos ratione similique aliquid veritatis qui itaque ducimus tempora exercitationem sunt tempore labore accusantium quibusdam optio eos eius ipsa?</p>
<h2>My second slide</h2>
<p>Place an image here</p>
<div class="th-references">
<a href="page2.html">Another document as a reference</a>
</div>
<h1>Here's an image</h1>
<img src="img/horse.jpg" alt="" style="height: 20em;">
<h1>Skipping heading</h1>
<p>Aliquam voluptates omnis a consectetur, repudiandae, magni repellat ducimus nobis, rerum quod ratione dignissimos laboriosam vel recusandae? Atque, sapiente odio repudiandae ipsam alias odit magni provident ipsum rem facilis. Culpa.</p>
<p>Quaerat eaque, maiores impedit vero ut odit qui placeat sequi fugit cumque quo autem eveniet perferendis facere expedita voluptates neque porro. Veniam quae velit eveniet doloremque commodi distinctio temporibus necessitatibus!</p>
<h3>No h2</h3>
<p>Nihil eum dolore quia deserunt natus cupiditate, deleniti odit blanditiis ullam accusantium delectus saepe sed mollitia pariatur? Hic inventore repudiandae saepe. Nihil asperiores reprehenderit cumque ducimus dolore consequatur recusandae tenetur.</p>
<h4>H4 no slide, no toc</h4>
<p>Odio laborum ab expedita sit quasi, laboriosam delectus, optio harum dolore dignissimos maiores, excepturi illum provident recusandae tempore repellendus cum ut? Voluptatum at, repudiandae reprehenderit nulla dolore quos officiis hic?</p>
</body>
</html>