1 <!DOCTYPE html>
2 <html lang="en">
3 <!-- Made with "minslides", possibly the easiest presentation slides ever -->
4 <head>
5 <title>A little minslides presentation</title>
6 <meta charset="utf-8">
7 <meta name="viewport" content="width=device-width,initial-scale=1">
8 <style>
9 /*
10 Modify these CSS properties to suit your unique style!
11 */
12 body {
13 background-color: #ffd;
14 color: #333;
15 font-size: 6vmin;
16 }
17 div.slide {
18 height: 100vh;
19 border-bottom: 2px solid silver;
20 padding: 1em;
21 }
22 h1 { font-weight: bold; margin: 0 0 0.5em 0; }
23 pre {
24 color: pink;
25 background: black;
26 padding: 1em;
27 font-size: 4vmin;
28 }
29 </style>
30 </head>
31 <body>
32 <div class="slide">
33 <h1>Hello world!</h1>
34 <p>This is <strong>minslides</strong>, the minimalistic HTML slide presentation "framework".
35 <p>Press the <strong>J</strong> key on your keyboard to go the next slide.
36 </div>
37 <div class="slide">
38 <h1>minslides is:</h1>
39 <ul>
40 <li>Almost nothing
41 <li>Just a single web page
42 <li>Keyboard driven slides!
43 </ul>
44 <p>(Try <strong>K</strong> to go back, then <strong>J</strong> to return.)
45 </div>
46 <div class="slide">
47 <h1>Content is HTML</h1>
48 <pre><div class="slide">Your content here...</div></pre>
49 <p>Like I said, it's just a web page.
50 <p>(Now try scrolling up and down like you would on any normal web page.)
51 </div>
52 <div class="slide">
53 <h1>The End</h1>
54 <p>Thanks for checking out <strong>minslides</strong>. Here's some links:
55 <p><a href="http://ratfactor.com/minslides">http://ratfactor.com/minslides</a>
56 <p><a href="https://github.com/ratfactor/minslides">https://github.com/ratfactor/minslides</a>
57 </div>
58
59 <script>
60 /*
61 Keyboard navigation - you can change 'j' and 'k' if you like!
62 */
63 var slides = document.getElementsByClassName("slide");
64 var current = 0;
65
66 document.addEventListener('keypress', function(event){
67 if(event.key == 'j'){ current++; }
68 if(event.key == 'k'){ current--; }
69 if(current < 0){ current = 0; }
70 if(current >= slides.length){ current = slides.length - 1; }
71 slides[current].scrollIntoView();
72 });
73 </script>
74 </body></html>
Ratfactor.com
>
Dave's Repos