-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathslide.html
134 lines (118 loc) · 6.22 KB
/
slide.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Slide</title>
<style>*{margin:0;padding:0;box-sizing:border-box}#slide{display:none}.slide{white-space:nowrap}.slide-content{align-self:center}@media screen{body{position:absolute;top:50%;left:50%}.slide-4x3{width:1024px;height:768px;margin:-384px 0 0 -512px}.slide-16x9{width:1024px;height:576px;margin:-288px 0 0 -512px}.slide-16x10{width:1024px;height:640px;margin:-320px 0 0 -512px}.slide{position:absolute;width:100%;height:100%;display:flex;justify-content:center;overflow:hidden}}@media print{body{transform:none!important}h1{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem;font-weight:300}.slide-root{width:100%;display:flex;flex-wrap:wrap;align-items:stretch}.slide-content{transform:none!important}.slide{display:flex;justify-content:center;flex:1;padding:.5rem;margin:.5rem .5rem 4rem .5rem;border:1px solid rgba(0,0,0,0.2);visibility:visible!important}}</style>
<script>function trimIndent(e){var t=(e.match(INDENT_RE)||[""])[0].length;if(t>0){var n=e.substring(0,t);return e.replace(new RegExp(n,"g"),"")}}function renderSlide(e,t,n){var i=t.split("\n"),r=-1,o=document.createElement("div"),d=document.createElement("div"),s="";o.className="slide slide-"+n,d.className="slide-content";for(var l=0;l<i.length;l++){var a=i[l];if(a.startsWith("#"))s=s+"<h1>"+a.substring(1)+"</h1>";else if(a.startsWith(" ")||a.startsWith(" "))s=s+"<pre>"+a.replace(/^( )|\t/,"")+"</pre>";else{a.startsWith(".")&&(a=a.substring(1));for(var c=0;c<a.length;c++){var h=a.charAt(c);"*"==h?-1==r?(s+="<strong>",r=s.length):(r!=s.length?s+="</strong>":s=s.substring(0,s.length-8)+"*",r=-1):s+=h}s+="<br/>"}}d.innerHTML=s,o.appendChild(d),e.appendChild(o),o.style.visibility="hidden"}function render(e){var t=document.createElement("div");t.className="slide-root",document.body.appendChild(t),e=trimIndent(e);for(var n=e.split(/[\s+]\n/gm),i=0;i<n.length;i++){var r=n[i].trim();renderSlide(t,r,i)}return t}function resize(){var e=window.innerWidth,t=window.innerHeight,n=document.body.offsetWidth,i=document.body.offsetHeight,r=n/i>e/t?e/n:t/i;document.body.style.transform="scale("+r+")"}function goTo(e){currentSlide=e,window.location.hash=e;for(var t=document.querySelectorAll(".slide"),n=0;n<t.length;n++){var i=t[n],r=i.children[0],o=.8*i.offsetWidth/r.offsetWidth,d=.8*i.offsetHeight/r.offsetHeight;r.style.transform="scale("+Math.min(o,d)+")",n==currentSlide?i.style.visibility="":i.style.visibility="hidden"}}function next(){goTo(Math.min(currentSlide+1,document.querySelectorAll(".slide").length-1))}function prev(){goTo(Math.max(currentSlide-1,0))}var INDENT_RE=/^(?:( )+|\t+)/,currentSlide=-1;window.onload=function(){resize(),render(document.getElementById("slide").innerHTML),goTo(window.location.hash.substring(1)||0),window.onclick=next,window.onresize=resize,window.onkeydown=function(e){39==e.keyCode?next():37==e.keyCode&&prev()}};</script>
<style media="screen">
@import url(https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
/* Customize theme: change body, h1, strong, pre or .slide class */
body {
font-family: 'Lato', sans-serif;
background-color: #edd400;
color: #453029;
line-height: 1.54;
}
.slide h1 {
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 2.6rem;
}
.slide pre {
font-family: 'Inconsolata';
font-size: 0.6rem;
line-height: 1.1;
}
.slide-10 h1 { color: #fff; text-shadow: 1px 1px 3px #453029; }
.slide-11 {
background: url("http://trikita.co/slide/icon.png"), url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/asanoha-400px.png");
background-repeat: no-repeat, repeat;
background-size: 35%, auto;
background-position: bottom right;
}
.slide-13 .slide-content {
background-image: url("http://trikita.co/slide/write_framed.png"),
url("http://trikita.co/slide/styles.gif"),
url("http://trikita.co/slide/illustrate_framed.png");
background-repeat: no-repeat;
background-size: 40%, 40%, 40%;
background-position: bottom left, bottom center, bottom right;
}
</style>
</head>
<body class="slide-16x9">
<pre id="slide">
#SLIDE
Good speech deserves time it takes
Save time for speech
Leave presentation to *Slide*
#Focus on content
Learn 5 markup rules
to make content look great
# #1
Each paragraph is a slide
# #2
Headers start with #
# #3
Emphasize *words*
surrounding them with **asterisks**
# #4
Indent code with 2 spaces
/* Day of week: Sakamoto's algorithm */
int dow(int y, int m, int d)
{
static int t[] = {0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4};
y -= m < 3;
return (y + y/4 - y/100 + y/400 + t[m-1] + d) % 7;
}
# #5
Lines starting with a dot
disable markup such as
headlines, code or blank lines
↵ = new slide
.# = headline
** = emphasize
␣␣ = monospace
.. = escape
# Styling with CSS
# Selectors
..slide
..slide h1
..slide strong
..slide pre
.
..slide-N, where N is slide number
# Example
.
.slide-10 h1 {
color: #fff;
text-shadow: 1px 1px 3px #453029;
}
.
# CSS backgrounds
.slide-12 {
background: url("icon.png"),
url("bg.png");
background-repeat: no-repeat, repeat;
background-size: 40%, auto;
background-position: bottom right;
}
# Print mode
You can print slide thumbnails
to practice your speech
Slide for Android
.
.
.
# Links
http://trikita.co/slide
https://github.com/trikita/slide
https://github.com/trikita/slide-html
https://play.google.com/store/apps/details?id=trikita.slide
</pre>
</body>
</html>