Created
May 25, 2019 09:26
-
-
Save harsh183/8c5c605a93f63d9c64380e76cdbb2641 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html><html lang="C"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta property="og:type" content="website"><meta name="twitter:card" content="summary"><style>@media screen{body,html{background:#000;height:100%;margin:0;overflow:hidden}[data-bespoke-marp-fragment=inactive]{visibility:hidden}.bespoke-marp-osc{display:none;opacity:0}.bespoke-marp-parent{bottom:0;left:0;position:absolute;right:0;top:0}.bespoke-marp-parent>.bespoke-marp-osc{background:rgba(0,0,0,.65);border-radius:7px;bottom:50px;color:#fff;display:block;font-family:Helvetica,Arial,sans-serif;font-size:16px;left:50%;line-height:0;opacity:1;padding:12px;position:absolute;touch-action:manipulation;-webkit-transform:translateX(-50%);transform:translateX(-50%);transition:opacity .2s linear;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;z-index:1}.bespoke-marp-parent>.bespoke-marp-osc>*{margin-left:6px}.bespoke-marp-parent>.bespoke-marp-osc>:first-child{margin-left:0}.bespoke-marp-parent>.bespoke-marp-osc>span{opacity:.8}.bespoke-marp-parent>.bespoke-marp-osc>span[data-bespoke-marp-osc=page]{display:inline-block;min-width:140px;text-align:center}.bespoke-marp-parent>.bespoke-marp-osc>button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font-size:inherit;opacity:.8;outline:none;padding:0;transition:opacity .2s linear;-webkit-tap-highlight-color:transparent}.bespoke-marp-parent>.bespoke-marp-osc>button:disabled{cursor:not-allowed;opacity:.15!important}.bespoke-marp-parent>.bespoke-marp-osc>button:hover{opacity:1}.bespoke-marp-parent>.bespoke-marp-osc>button:hover:active{opacity:.6}.bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled){transition:none}.bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNNjggOTBMMjggNTBsNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;height:32px;overflow:hidden;text-indent:100%;white-space:nowrap;width:32px}.bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNMzIgOTBsNDAtNDAtNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;height:32px;overflow:hidden;text-indent:100%;white-space:nowrap;width:32px}.bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJhIiB4PSIxMCIgeT0iMjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgcng9IjUuNjciLz48cGF0aCBjbGFzcz0iYSIgZD0iTTQwIDcwSDIwVjUwbTIwIDBMMjAgNzBtNDAtNDBoMjB2MjBtLTIwIDBsMjAtMjAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;height:32px;overflow:hidden;text-indent:100%;white-space:nowrap;width:32px}.bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen].exit{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJhIiB4PSIxMCIgeT0iMjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgcng9IjUuNjciLz48cGF0aCBjbGFzcz0iYSIgZD0iTTIwIDUwaDIwdjIwbS0yMCAwbDIwLTIwbTQwIDBINjBWMzBtMjAgMEw2MCA1MCIvPjwvc3ZnPg==")}.bespoke-marp-parent.bespoke-marp-inactive{cursor:none}.bespoke-marp-parent.bespoke-marp-inactive>.bespoke-marp-osc{opacity:0;pointer-events:none}svg.bespoke-marp-slide{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:-1}svg.bespoke-marp-slide.bespoke-marp-active{pointer-events:auto;z-index:0}.bespoke-progress-parent{background:#222;display:flex;height:5px;width:100%}.bespoke-progress-parent+.bespoke-marp-parent{top:5px}.bespoke-progress-parent .bespoke-progress-bar{flex:0 0 0;background:#0288d1;transition:flex-basis .2s cubic-bezier(0,1,1,1)}}@media print{.bespoke-marp-osc,.bespoke-progress-parent{display:none!important;transition:none!important}.bespoke-marp-parent{top:0}}</style><style>article#presentation > svg > foreignObject > section { | |
width: 1280px; | |
height: 720px; | |
box-sizing: border-box; | |
overflow: hidden; | |
position: relative; | |
scroll-snap-align: center center; | |
}article#presentation > svg > foreignObject > section::after { | |
bottom: 0; | |
content: attr(data-marpit-pagination); | |
padding: inherit; | |
pointer-events: none; | |
position: absolute; | |
right: 0; | |
}article#presentation > svg > foreignObject > section:not([data-marpit-pagination])::after { | |
display: none; | |
}/* Normalization */article#presentation > svg > foreignObject > section h1 { | |
font-size: 2em; | |
margin: 0.67em 0; | |
}@page { | |
size: 1280px 720px; | |
margin: 0; | |
}@media print {html, body { | |
background-color: #fff; | |
margin: 0; | |
page-break-inside: avoid; | |
break-inside: avoid-page; | |
} | |
article#presentation > svg > foreignObject > section { | |
page-break-before: always; | |
break-before: page; | |
} | |
article#presentation > svg > foreignObject > section, article#presentation > svg > foreignObject > section * { | |
-webkit-print-color-adjust: exact !important; | |
color-adjust: exact !important; | |
} | |
article#presentation > svg[data-marpit-svg] { | |
display: block; | |
height: 100vh; | |
width: 100vw; | |
} | |
}article#presentation > svg > foreignObject > section svg[data-marp-fitting=svg]{display:block;height:auto;width:100%}@supports (-ms-ime-align:auto){article#presentation > svg > foreignObject > section svg[data-marp-fitting=svg]{position:static}}article#presentation > svg > foreignObject > section svg[data-marp-fitting=svg].__reflow__{content:""}@supports (-ms-ime-align:auto){article#presentation > svg > foreignObject > section svg[data-marp-fitting=svg].__reflow__{position:relative}}article#presentation > svg > foreignObject > section [data-marp-fitting-svg-content]{display:table;white-space:nowrap}article#presentation > svg > foreignObject > section [data-marp-fitting-svg-content-wrap]{white-space:pre}article#presentation > svg > foreignObject > section img[data-marp-twemoji]{background:transparent;height:1em;margin:0 .05em 0 .1em;vertical-align:-.1em;width:1em}/*! | |
* Marp / Marpit Uncover theme | |
* | |
* @theme uncover | |
* @author Yuki Hattori | |
* | |
* @auto-scaling fittingHeader,math | |
*/article#presentation > svg > foreignObject > section{display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;flex-wrap:nowrap;font-size:40px;height:720px;justify-content:center;letter-spacing:3px;line-height:1.4;padding:30px 70px;position:relative;text-align:center;width:1280px;z-index:0;background:#fdfcff;color:#202228}article#presentation > svg > foreignObject > section:after{align-items:flex-end;display:flex;font-size:.6em;height:80px;justify-content:flex-end;padding:30px;text-align:right;width:80px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1 1" width="1" height="1"><path d="M0 1h1v-1Z" fill="rgba(32, 34, 40, 0.05)"/></svg>') no-repeat 50%;background-size:cover;color:#202228;text-shadow:0 0 5px #fdfcff}article#presentation > svg > foreignObject > section code,article#presentation > svg > foreignObject > section pre{background:#f2f1f4;color:#202228}article#presentation > svg > foreignObject > section a{color:#009dd5}article#presentation > svg > foreignObject > section a:hover{color:#087eaa}article#presentation > svg > foreignObject > section h1 strong,article#presentation > svg > foreignObject > section h2 strong,article#presentation > svg > foreignObject > section h3 strong,article#presentation > svg > foreignObject > section h4 strong,article#presentation > svg > foreignObject > section h5 strong,article#presentation > svg > foreignObject > section h6 strong{color:#33b1dd}article#presentation > svg > foreignObject > section footer,article#presentation > svg > foreignObject > section header{color:rgba(32,34,40,.4);text-shadow:0 1px 0 rgba(253,252,255,.8)}article#presentation > svg > foreignObject > section mark{color:#009dd5;background:transparent}article#presentation > svg > foreignObject > section:not(.invert) .hljs{display:block;overflow-x:auto;padding:.5em;background:#fff}article#presentation > svg > foreignObject > section:not(.invert) .hljs,article#presentation > svg > foreignObject > section:not(.invert) .hljs-subst{color:#000}article#presentation > svg > foreignObject > section:not(.invert) .hljs-addition,article#presentation > svg > foreignObject > section:not(.invert) .hljs-meta,article#presentation > svg > foreignObject > section:not(.invert) .hljs-string,article#presentation > svg > foreignObject > section:not(.invert) .hljs-symbol,article#presentation > svg > foreignObject > section:not(.invert) .hljs-template-tag,article#presentation > svg > foreignObject > section:not(.invert) .hljs-template-variable{color:#756bb1}article#presentation > svg > foreignObject > section:not(.invert) .hljs-comment,article#presentation > svg > foreignObject > section:not(.invert) .hljs-quote{color:#636363}article#presentation > svg > foreignObject > section:not(.invert) .hljs-bullet,article#presentation > svg > foreignObject > section:not(.invert) .hljs-link,article#presentation > svg > foreignObject > section:not(.invert) .hljs-literal,article#presentation > svg > foreignObject > section:not(.invert) .hljs-number,article#presentation > svg > foreignObject > section:not(.invert) .hljs-regexp{color:#31a354}article#presentation > svg > foreignObject > section:not(.invert) .hljs-deletion,article#presentation > svg > foreignObject > section:not(.invert) .hljs-variable{color:#88f}article#presentation > svg > foreignObject > section:not(.invert) .hljs-built_in,article#presentation > svg > foreignObject > section:not(.invert) .hljs-doctag,article#presentation > svg > foreignObject > section:not(.invert) .hljs-keyword,article#presentation > svg > foreignObject > section:not(.invert) .hljs-name,article#presentation > svg > foreignObject > section:not(.invert) .hljs-section,article#presentation > svg > foreignObject > section:not(.invert) .hljs-selector-class,article#presentation > svg > foreignObject > section:not(.invert) .hljs-selector-id,article#presentation > svg > foreignObject > section:not(.invert) .hljs-selector-tag,article#presentation > svg > foreignObject > section:not(.invert) .hljs-strong,article#presentation > svg > foreignObject > section:not(.invert) .hljs-tag,article#presentation > svg > foreignObject > section:not(.invert) .hljs-title,article#presentation > svg > foreignObject > section:not(.invert) .hljs-type{color:#3182bd}article#presentation > svg > foreignObject > section:not(.invert) .hljs-emphasis{font-style:italic}article#presentation > svg > foreignObject > section:not(.invert) .hljs-attribute{color:#e6550d}article#presentation > svg > foreignObject > section.invert{background:#202228;color:#fff}article#presentation > svg > foreignObject > section.invert:after{background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1 1" width="1" height="1"><path d="M0 1h1v-1Z" fill="rgba(255, 255, 255, 0.05)"/></svg>') no-repeat 50%;background-size:cover;color:#fff;text-shadow:0 0 5px #202228}article#presentation > svg > foreignObject > section.invert code,article#presentation > svg > foreignObject > section.invert pre{background:#2b2d33;color:#fff}article#presentation > svg > foreignObject > section.invert a{color:#60d0f0}article#presentation > svg > foreignObject > section.invert a:hover{color:#88dcf4}article#presentation > svg > foreignObject > section.invert h1 strong,article#presentation > svg > foreignObject > section.invert h2 strong,article#presentation > svg > foreignObject > section.invert h3 strong,article#presentation > svg > foreignObject > section.invert h4 strong,article#presentation > svg > foreignObject > section.invert h5 strong,article#presentation > svg > foreignObject > section.invert h6 strong{color:#80d9f3}article#presentation > svg > foreignObject > section.invert footer,article#presentation > svg > foreignObject > section.invert header{color:hsla(0,0%,100%,.4);text-shadow:0 1px 0 rgba(32,34,40,.8)}article#presentation > svg > foreignObject > section.invert mark{color:#60d0f0;background:transparent}article#presentation > svg > foreignObject > section.invert .hljs{display:block;overflow-x:auto;padding:.5em;background:#222;color:#fff}article#presentation > svg > foreignObject > section.invert .hljs-comment,article#presentation > svg > foreignObject > section.invert .hljs-quote{color:#777}article#presentation > svg > foreignObject > section.invert .hljs-built_in,article#presentation > svg > foreignObject > section.invert .hljs-builtin-name,article#presentation > svg > foreignObject > section.invert .hljs-bullet,article#presentation > svg > foreignObject > section.invert .hljs-deletion,article#presentation > svg > foreignObject > section.invert .hljs-link,article#presentation > svg > foreignObject > section.invert .hljs-literal,article#presentation > svg > foreignObject > section.invert .hljs-meta,article#presentation > svg > foreignObject > section.invert .hljs-number,article#presentation > svg > foreignObject > section.invert .hljs-params,article#presentation > svg > foreignObject > section.invert .hljs-regexp,article#presentation > svg > foreignObject > section.invert .hljs-symbol,article#presentation > svg > foreignObject > section.invert .hljs-tag,article#presentation > svg > foreignObject > section.invert .hljs-template-variable,article#presentation > svg > foreignObject > section.invert .hljs-variable{color:#ab875d}article#presentation > svg > foreignObject > section.invert .hljs-attribute,article#presentation > svg > foreignObject > section.invert .hljs-name,article#presentation > svg > foreignObject > section.invert .hljs-section,article#presentation > svg > foreignObject > section.invert .hljs-selector-class,article#presentation > svg > foreignObject > section.invert .hljs-selector-id,article#presentation > svg > foreignObject > section.invert .hljs-title,article#presentation > svg > foreignObject > section.invert .hljs-type{color:#9b869b}article#presentation > svg > foreignObject > section.invert .hljs-addition,article#presentation > svg > foreignObject > section.invert .hljs-keyword,article#presentation > svg > foreignObject > section.invert .hljs-selector-tag,article#presentation > svg > foreignObject > section.invert .hljs-string{color:#8f9c6c}article#presentation > svg > foreignObject > section.invert .hljs-emphasis{font-style:italic}article#presentation > svg > foreignObject > section.invert .hljs-strong{font-weight:700}article#presentation > svg > foreignObject > section>:first-child,article#presentation > svg > foreignObject > section[data-header]>:nth-child(2){margin-top:0}article#presentation > svg > foreignObject > section>:last-child,article#presentation > svg > foreignObject > section[data-footer]>:nth-last-child(2){margin-bottom:0}article#presentation > svg > foreignObject > section svg[data-marp-fitting=svg]{max-height:660px;--preserve-aspect-ratio:xMidYMid meet}article#presentation > svg > foreignObject > section blockquote,article#presentation > svg > foreignObject > section p{margin:0 0 15px}article#presentation > svg > foreignObject > section h1,article#presentation > svg > foreignObject > section h2,article#presentation > svg > foreignObject > section h3,article#presentation > svg > foreignObject > section h4,article#presentation > svg > foreignObject > section h5,article#presentation > svg > foreignObject > section h6{margin:15px 0 30px}article#presentation > svg > foreignObject > section h1 strong,article#presentation > svg > foreignObject > section h2 strong,article#presentation > svg > foreignObject > section h3 strong,article#presentation > svg > foreignObject > section h4 strong,article#presentation > svg > foreignObject > section h5 strong,article#presentation > svg > foreignObject > section h6 strong{font-weight:inherit}article#presentation > svg > foreignObject > section h1{font-size:2em}article#presentation > svg > foreignObject > section h2{font-size:1.7em}article#presentation > svg > foreignObject > section h3{font-size:1.4em;letter-spacing:2px}article#presentation > svg > foreignObject > section h4{font-size:1.2em;letter-spacing:2px}article#presentation > svg > foreignObject > section h5{font-size:1em;letter-spacing:1px}article#presentation > svg > foreignObject > section h6{font-size:.8em;letter-spacing:1px}article#presentation > svg > foreignObject > section footer,article#presentation > svg > foreignObject > section header{position:absolute;z-index:1;left:70px;right:70px;font-size:.45em;letter-spacing:1px}article#presentation > svg > foreignObject > section header{top:30px}article#presentation > svg > foreignObject > section footer{bottom:30px}article#presentation > svg > foreignObject > section a{text-decoration:none}article#presentation > svg > foreignObject > section a:hover{text-decoration:underline}article#presentation > svg > foreignObject > section ol,article#presentation > svg > foreignObject > section ul{margin:0 auto;text-align:left}article#presentation > svg > foreignObject > section>ol,article#presentation > svg > foreignObject > section>ul{margin-bottom:15px}article#presentation > svg > foreignObject > section code,article#presentation > svg > foreignObject > section pre{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;letter-spacing:0;margin:-.2em .2em .2em;padding:.2em}article#presentation > svg > foreignObject > section pre{box-shadow:0 4px 8px rgba(0,0,0,.2);font-size:70%;line-height:1.15;margin:15px auto 30px;min-width:40%;padding:.4em .6em;text-align:left}article#presentation > svg > foreignObject > section pre>code{margin:0;padding:0}article#presentation > svg > foreignObject > section table{border-collapse:collapse;margin:0 auto 15px}article#presentation > svg > foreignObject > section table>tbody>tr>td,article#presentation > svg > foreignObject > section table>tbody>tr>th,article#presentation > svg > foreignObject > section table>thead>tr>td,article#presentation > svg > foreignObject > section table>thead>tr>th{padding:.15em .5em}article#presentation > svg > foreignObject > section table>thead>tr>td,article#presentation > svg > foreignObject > section table>thead>tr>th{border-bottom:3px solid}article#presentation > svg > foreignObject > section table>tbody>tr:not(:last-child)>td,article#presentation > svg > foreignObject > section table>tbody>tr:not(:last-child)>th{border-bottom:1px solid}article#presentation > svg > foreignObject > section blockquote{font-size:90%;line-height:1.3;padding:0 2em;position:relative;z-index:0}article#presentation > svg > foreignObject > section blockquote:after,article#presentation > svg > foreignObject > section blockquote:before{content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNNDQgMTkuM0wzOC45NCAwQzguMTQgOS41OSAwIDQwLjA1IDAgNTQuODNWMTAwaDQxLjQ3VjU0LjgzaC0yM2MtLjA0LS4yOC4yNS0yNy42NiAyNS41My0zNS41M3ptNTYgMEw5NC45NCAwQzY0LjE0IDkuNTkgNTYgNDAuMDUgNTYgNTQuODNWMTAwaDQxLjQ3VjU0LjgzaC0yM2MtLjA0LS4yOC4yNS0yNy42NiAyNS41My0zNS41M3oiIGZpbGw9IiM4ODgiIG9wYWNpdHk9Ii4zMyIvPjwvc3ZnPg==");height:auto;pointer-events:none;position:absolute;width:1em;z-index:-1}article#presentation > svg > foreignObject > section blockquote:before{left:0;top:0}article#presentation > svg > foreignObject > section blockquote:after{bottom:0;right:0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}article#presentation > svg > foreignObject > section blockquote>:last-child{margin-bottom:0}article#presentation > svg > foreignObject > section[data-marpit-advanced-background="background"] { | |
padding: 0 !important; | |
}article#presentation > svg > foreignObject > section[data-marpit-advanced-background="background"]::before, | |
article#presentation > svg > foreignObject > section[data-marpit-advanced-background="background"]::after, | |
article#presentation > svg > foreignObject > section[data-marpit-advanced-background="content"]::before, | |
article#presentation > svg > foreignObject > section[data-marpit-advanced-background="content"]::after { | |
display: none !important; | |
}article#presentation > svg > foreignObject > section[data-marpit-advanced-background="background"] > div[data-marpit-advanced-background-container] { | |
all: initial; | |
display: flex; | |
flex-direction: row; | |
height: 100%; | |
overflow: hidden; | |
width: 100%; | |
}article#presentation > svg > foreignObject > section[data-marpit-advanced-background="background"] > div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction="vertical"] { | |
flex-direction: column; | |
}article#presentation > svg > foreignObject > section[data-marpit-advanced-background="background"][data-marpit-advanced-background-split] > div[data-marpit-advanced-background-container] { | |
width: 50%; | |
}article#presentation > svg > foreignObject > section[data-marpit-advanced-background="background"][data-marpit-advanced-background-split="right"] > div[data-marpit-advanced-background-container] { | |
margin-left: 50%; | |
}article#presentation > svg > foreignObject > section[data-marpit-advanced-background="background"] > div[data-marpit-advanced-background-container] > figure { | |
all: initial; | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: cover; | |
flex: auto; | |
margin: 0; | |
}article#presentation > svg > foreignObject > section[data-marpit-advanced-background="content"], | |
article#presentation > svg > foreignObject > section[data-marpit-advanced-background="pseudo"] { | |
background: transparent !important; | |
}article#presentation > svg > foreignObject > section[data-marpit-advanced-background="pseudo"], | |
article#presentation > svg[data-marpit-svg] > foreignObject[data-marpit-advanced-background="pseudo"] { | |
pointer-events: none !important; | |
}article#presentation > svg > foreignObject > section[data-marpit-advanced-background-split] { | |
width: 100%; | |
height: 100%; | |
}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button></div><article id="presentation"><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="1" data-theme="uncover" style="--theme:uncover;"> | |
<p>Hello I am a sample presentation.</p> | |
<p>Trust me this software is hella easy to use. We're trying to get this to android.</p> | |
</section> | |
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-theme="uncover" style="--theme:uncover;"> | |
<h1>How this works</h1> | |
<p>The phone app connects to rethinkDB (maybe we'll add a layer for sec reasons<br /> | |
who knows), which updates the right file that we serve as a pdf (maybe if<br /> | |
we can call direct js that's faster)</p> | |
</section> | |
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-theme="uncover" style="--theme:uncover;"> | |
<p>Live editing.</p> | |
<p>You can edit this and it changes live. Yup. That's it.</p> | |
</section> | |
</foreignObject></svg></article><script>!function(){"use strict";function e(e){var n=r([["iOS",/iP(hone|od|ad)/],["Android OS",/Android/],["BlackBerry OS",/BlackBerry|BB10/],["Windows Mobile",/IEMobile/],["Amazon OS",/Kindle/],["Windows 3.11",/Win16/],["Windows 95",/(Windows 95)|(Win95)|(Windows_95)/],["Windows 98",/(Windows 98)|(Win98)/],["Windows 2000",/(Windows NT 5.0)|(Windows 2000)/],["Windows XP",/(Windows NT 5.1)|(Windows XP)/],["Windows Server 2003",/(Windows NT 5.2)/],["Windows Vista",/(Windows NT 6.0)/],["Windows 7",/(Windows NT 6.1)/],["Windows 8",/(Windows NT 6.2)/],["Windows 8.1",/(Windows NT 6.3)/],["Windows 10",/(Windows NT 10.0)/],["Windows ME",/Windows ME/],["Open BSD",/OpenBSD/],["Sun OS",/SunOS/],["Linux",/(Linux)|(X11)/],["Mac OS",/(Mac_PowerPC)|(Macintosh)/],["QNX",/QNX/],["BeOS",/BeOS/],["OS/2",/OS\/2/],["Search Bot",/(nuhk)|(Googlebot)|(Yammybot)|(Openbot)|(Slurp)|(MSNBot)|(Ask Jeeves\/Teoma)|(ia_archiver)/]]).filter(function(n){return n.rule&&n.rule.test(e)})[0];return n?n.name:null}function n(){return"undefined"!=typeof process&&process.version&&{name:"node",version:process.version.slice(1),os:process.platform}}function t(n){var t=r([["aol",/AOLShield\/([0-9\._]+)/],["edge",/Edge\/([0-9\._]+)/],["yandexbrowser",/YaBrowser\/([0-9\._]+)/],["vivaldi",/Vivaldi\/([0-9\.]+)/],["kakaotalk",/KAKAOTALK\s([0-9\.]+)/],["samsung",/SamsungBrowser\/([0-9\.]+)/],["chrome",/(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9\.]+)(:?\s|$)/],["phantomjs",/PhantomJS\/([0-9\.]+)(:?\s|$)/],["crios",/CriOS\/([0-9\.]+)(:?\s|$)/],["firefox",/Firefox\/([0-9\.]+)(?:\s|$)/],["fxios",/FxiOS\/([0-9\.]+)/],["opera",/Opera\/([0-9\.]+)(?:\s|$)/],["opera",/OPR\/([0-9\.]+)(:?\s|$)$/],["ie",/Trident\/7\.0.*rv\:([0-9\.]+).*\).*Gecko$/],["ie",/MSIE\s([0-9\.]+);.*Trident\/[4-7].0/],["ie",/MSIE\s(7\.0)/],["bb10",/BB10;\sTouch.*Version\/([0-9\.]+)/],["android",/Android\s([0-9\.]+)/],["ios",/Version\/([0-9\._]+).*Mobile.*Safari.*/],["safari",/Version\/([0-9\._]+).*Safari/],["facebook",/FBAV\/([0-9\.]+)/],["instagram",/Instagram\s([0-9\.]+)/],["ios-webview",/AppleWebKit\/([0-9\.]+).*Mobile/]]);if(!n)return null;var i=t.map(function(e){var t=e.rule.exec(n),r=t&&t[1].split(/[._]/).slice(0,3);return r&&r.length<3&&(r=r.concat(1==r.length?[0,0]:[0])),t&&{name:e.name,version:r.join(".")}}).filter(Boolean)[0]||null;return i&&(i.os=e(n)),/alexa|bot|crawl(er|ing)|facebookexternalhit|feedburner|google web preview|nagios|postrank|pingdom|slurp|spider|yahoo!|yandex/i.test(n)&&((i=i||{}).bot=!0),i}function r(e){return e.map(function(e){return{name:e[0],rule:e[1]}})}var i=function(){return"undefined"!=typeof navigator?t(navigator.userAgent):n()},o=i;let s;const a=["android","bb10","crios","facebook","fxios","instagram","ios-webview","ios","phantomjs","safari"];function l(){Array.from(document.getElementsByTagName("svg"),e=>{if(e.hasAttribute("data-marpit-svg")){const{clientHeight:n,clientWidth:t}=e;e.style.transform||(e.style.transform="translateZ(0)");const{width:r,height:i}=e.viewBox.baseVal,o=Math.min(n/i,t/r);Array.from(e.querySelectorAll(":scope > foreignObject"),e=>{const s=e.x.baseVal.value,a=e.y.baseVal.value;Array.from(e.querySelectorAll(":scope > section"),e=>{e.style.transformOrigin||(e.style.transformOrigin="0 0");const l=(t-o*r)/2-s,c=(n-o*i)/2-a;e.style.transform=`translate3d(${l}px,${c}px,0) scale(${o}) translate(${s}px,${a}px)`})})}})}var c,p,d=(function(e,n){Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var t=function(e){return(n,...t)=>{if(n.marpit)return e.call(this,n,...t);throw new Error("Marpit's markdown-it plugin requires `marpit` member.")}};n.default=t}(c={exports:{}},c.exports),c.exports),u=(p=d)&&p.__esModule&&Object.prototype.hasOwnProperty.call(p,"default")?p.default:p;const f="data-marp-fitting",m="data-marp-fitting-code",g="data-marp-fitting-math",h="data-marp-fitting-svg-content",w="data-marp-fitting-svg-content-wrap",v=/^(<pre[^>]*?><code[^>]*?>)([\s\S]*)(<\/code><\/pre>\n*)$/,b=(e,n)=>{const t=function(e,n){const{lastGlobalDirectives:t}=e,r=t?t.theme:void 0;return e.themeSet.getThemeProp(r,`meta.${n}`)}(e,"auto-scaling")||"";return!!("true"===t||n&&t.includes(n))};function S(e){const{code_block:n,fence:t}=e.renderer.rules,r=n=>(...t)=>{const r=n(...t);return b(e.marpit,"code")?r.replace(v,(n,t,r,i)=>e.marpit.options.inlineSVG?[`${t}<svg ${f}="svg" ${m}><foreignObject>`,`<span ${h}><span ${w}>`,r,`</span></span></foreignObject></svg>${i}`].join(""):`${t}<span ${f}="plain">${r}</span>${i}`):r};e.renderer.rules.code_block=r(n),e.renderer.rules.fence=r(t)}function $(e){e.core.ruler.after("inline","marp_fitting_header",e=>{let n=void 0;for(const t of e.tokens)if(n||"heading_open"!==t.type||(n=t),n)if("inline"===t.type){let n=!1;for(const e of t.children)"marpit_comment"===e.type&&"fit"===e.content&&(n=!0,e.meta=e.meta||{},e.meta.marpitCommentParsed="marp-fitting-header");if(n){const n=new e.Token("marp_fitting_open","span",1);n.attrSet(f,"plain"),t.children=[n,...t.children,new e.Token("marp_fitting_close","span",-1)]}}else"heading_close"===t.type&&(n=void 0)}),e.renderer.rules.marp_fitting_open=(()=>b(e.marpit,"fittingHeader")?e.marpit.options.inlineSVG?`<svg ${f}="svg"><foreignObject><span ${h}>`:`<span ${f}="plain">`:""),e.renderer.rules.marp_fitting_close=(()=>b(e.marpit,"fittingHeader")?`</span>${e.marpit.options.inlineSVG?"</foreignObject></svg>":""}`:"")}function _(e){const{marp_math_block:n}=e.renderer.rules;n&&(e.renderer.rules.marp_math_block=((...t)=>{const r=n(...t);if(b(e.marpit,"math")){const n=r.slice(3,-4);return e.marpit.options.inlineSVG?[`<p><svg ${f}="svg" ${g}><foreignObject>`,`<span ${h}><span ${w}>`,n,"</span></span></foreignObject></svg></p>"].join(""):`<p><span ${f}="plain">${n}</span></p>`}return r}))}u(e=>{e.use($).use(S).use(_)});const W=(e,n,t)=>{if(e.getAttribute(n)!==t)return e.setAttribute(n,t),!0};!function(e=!0){const n=()=>{for(const e of function(){if(!s){s=[];const{name:e}=o()||{};a.includes(e)&&s.push(l)}return s}())e();Array.from(document.querySelectorAll(`svg[${f}="svg"]`),e=>{const n=e.firstChild,t=n.firstChild,{scrollWidth:r,scrollHeight:i}=t;let o,s=1;if(e.hasAttribute(m)&&(o=e.parentElement.parentElement),e.hasAttribute(g)&&(o=e.parentElement),o){const e=getComputedStyle(o),n=Math.ceil(o.clientWidth-parseFloat(e.paddingLeft)-parseFloat(e.paddingRight));n&&(s=n)}const a=Math.max(r,s),l=Math.max(i,1),c=`0 0 ${a} ${l}`;W(n,"width",`${a}`),W(n,"height",`${l}`),W(e,"preserveAspectRatio",getComputedStyle(e).getPropertyValue("--preserve-aspect-ratio")||"xMinYMin meet"),W(e,"viewBox",c)&&e.classList.toggle("__reflow__")}),e&&window.requestAnimationFrame(n)};n()}()}(); | |
</script><script>!function(){"use strict";var e={from:function(e,t){var n=1===(e.parent||e).nodeType?e.parent||e:document.querySelector(e.parent||e),r=[].filter.call("string"==typeof e.slides?n.querySelectorAll(e.slides):e.slides||n.children,function(e){return"SCRIPT"!==e.nodeName}),i=r[0],l={},s=function(e,t){r[e]&&(c("deactivate",u(i,t)),i=r[e],c("activate",u(i,t)))},o=function(e,t){var n=r.indexOf(i)+e;c(e>0?"next":"prev",u(i,t))&&s(n,t)},a=function(e,t){l[e]=(l[e]||[]).filter(function(e){return e!==t})},c=function(e,t){return(l[e]||[]).reduce(function(e,n){return e&&!1!==n(t)},!0)},u=function(e,t){return(t=t||{}).index=r.indexOf(e),t.slide=e,t},d={on:function(e,t){return(l[e]||(l[e]=[])).push(t),a.bind(null,e,t)},off:a,fire:c,slide:function(e,t){if(!arguments.length)return r.indexOf(i);c("slide",u(r[e],t))&&s(e,t)},next:o.bind(null,1),prev:o.bind(null,-1),parent:n,slides:r};return(t||[]).forEach(function(e){e(d)}),s(0),d}},t=function(){return function(e){e.slides.forEach(function(e){e.addEventListener("keydown",function(e){(/INPUT|TEXTAREA|SELECT/.test(e.target.nodeName)||"true"===e.target.contentEditable)&&e.stopPropagation()})})}};function n(e){e.parent.classList.add("bespoke-marp-parent"),e.slides.map(e=>e.classList.add("bespoke-marp-slide")),e.on("activate",t=>{e.slides.map(e=>e.classList.remove("bespoke-marp-active")),t.slide.classList.add("bespoke-marp-active")})}function r(e=2e3){return t=>{let n;function r(){n&&clearTimeout(n),n=setTimeout(()=>{t.parent.classList.add("bespoke-marp-inactive")},e),t.parent.classList.remove("bespoke-marp-inactive")}document.addEventListener("mousedown",r),document.addEventListener("mousemove",r),document.addEventListener("touchend",r),setTimeout(r,0)}}function i(e){let t=0,n=0;const r=e.slides.map(e=>[null,...e.querySelectorAll("[data-marpit-fragment]")]),i=e=>void 0!==r[t][n+e],l=(i,l)=>{t=i,n=l,r.forEach((e,t)=>{e.forEach((e,n)=>{if(null==e)return;const r=t<i||t===i&&n<=l;e.setAttribute("data-bespoke-marp-fragment",r?"active":"inactive"),t===i&&n===l?e.setAttribute("data-bespoke-marp-current-fragment","current"):e.removeAttribute("data-bespoke-marp-current-fragment")})}),e.fire("fragment",{slide:e.slides[i],index:i,fragments:r[i],fragmentIndex:l})};e.on("next",()=>{if(i(1))return l(t,n+1),!1;const e=t+1;r[e]&&l(e,0)}),e.on("prev",()=>{if(i(-1))return l(t,n-1),!1;const e=t-1;r[e]&&l(e,r[e].length-1)}),e.on("slide",({index:e,fragment:t})=>{let n=0;if(void 0!==t){const i=r[e];if(i){const{length:e}=i;n=-1===t?e-1:Math.min(Math.max(t,0),e-1)}}l(e,n)}),l(0,0)}var l,s,o=(function(e){!function(){var t="undefined"!=typeof window&&void 0!==window.document?window.document:{},n=e.exports,r="undefined"!=typeof Element&&"ALLOW_KEYBOARD_INPUT"in Element,i=function(){for(var e,n=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],r=0,i=n.length,l={};r<i;r++)if((e=n[r])&&e[1]in t){for(r=0;r<e.length;r++)l[n[0][r]]=e[r];return l}return!1}(),l={change:i.fullscreenchange,error:i.fullscreenerror},s={request:function(e){return new Promise(function(n){var l=i.requestFullscreen,s=function(){this.off("change",s),n()}.bind(this);e=e||t.documentElement,/ Version\/5\.1(?:\.\d+)? Safari\//.test(navigator.userAgent)?e[l]():e[l](r?Element.ALLOW_KEYBOARD_INPUT:{}),this.on("change",s)}.bind(this))},exit:function(){return new Promise(function(e){if(this.isFullscreen){var n=function(){this.off("change",n),e()}.bind(this);t[i.exitFullscreen](),this.on("change",n)}else e()}.bind(this))},toggle:function(e){return this.isFullscreen?this.exit():this.request(e)},onchange:function(e){this.on("change",e)},onerror:function(e){this.on("error",e)},on:function(e,n){var r=l[e];r&&t.addEventListener(r,n,!1)},off:function(e,n){var r=l[e];r&&t.removeEventListener(r,n,!1)},raw:i};i?(Object.defineProperties(s,{isFullscreen:{get:function(){return Boolean(t[i.fullscreenElement])}},element:{enumerable:!0,get:function(){return t[i.fullscreenElement]}},enabled:{enumerable:!0,get:function(){return Boolean(t[i.fullscreenEnabled])}}}),n?(e.exports=s,e.exports.default=s):window.screenfull=s):n?e.exports=!1:window.screenfull=!1}()}(l={exports:{}},l.exports),l.exports);function a(e){e.fullscreen=()=>o&&o.toggle(document.body),document.addEventListener("keydown",t=>{70!==t.which&&122!==t.which||t.altKey||t.ctrlKey||t.metaKey||!o||!o.enabled||(e.fullscreen(),t.preventDefault())})}function c(e={}){const t=Object.assign({history:!0},e);return e=>{function n(){const t=parseInt(window.location.hash.slice(1),10);Number.isNaN(t)||function(t){const n=Math.max(0,Math.min(t,e.slides.length-1));n!==e.slide()&&e.slide(n)}(t-1)}setTimeout(()=>{n(),e.on("activate",e=>{t.history?window.location.hash=e.index+1:window.location.replace(`#${e.index+1}`)}),window.addEventListener("hashchange",n)},0)}}function u(e={}){const t=Object.assign({interval:200},e);return e=>{document.addEventListener("keydown",t=>{(32===t.which&&t.shiftKey||33===t.which||37===t.which||38===t.which)&&e.prev(),(32===t.which&&!t.shiftKey||34===t.which||39===t.which||40===t.which)&&e.next(),35===t.which&&e.slide(e.slides.length-1,{fragment:-1}),36===t.which&&e.slide(0)});let n,r,i=0;e.parent.addEventListener("wheel",l=>{let o=!1;const a=(e,t)=>{e&&(o=o||function(e,t){return function(e,t){const n=t===s.X?"Width":"Height";return e[`client${n}`]<e[`scroll${n}`]}(e,t)&&function(e,t){const{overflow:n}=e,r=e[`overflow${t}`];return"auto"===n||"scroll"===n||"auto"===r||"scroll"===r}(getComputedStyle(e),t)}(e,t)),e&&e.parentElement&&a(e.parentElement,t)};if(0!==l.deltaX&&a(l.target,s.X),0!==l.deltaY&&a(l.target,s.Y),o)return;l.preventDefault(),r&&clearTimeout(r),r=setTimeout(()=>{n=0},t.interval);const c=Date.now()-i<t.interval,u=Math.sqrt(Math.pow(l.deltaX,2)+Math.pow(l.deltaY,2)),d=u<=n;if(n=u,c||d)return;let f;(l.deltaX>0||l.deltaY>0)&&(f="next"),(l.deltaX<0||l.deltaY<0)&&(f="prev"),f&&(e[f](),i=Date.now())})}}function d(e=".bespoke-marp-osc"){const t=document.querySelector(e);if(!t)return()=>{};const n=(e,n)=>{t.querySelectorAll(`[data-bespoke-marp-osc=${JSON.stringify(e)}]`).forEach(n)};return o&&!o.enabled&&n("fullscreen",e=>e.style.display="none"),e=>{t.addEventListener("click",t=>{if(t.target instanceof HTMLElement)switch(t.target.dataset.bespokeMarpOsc){case"next":e.next();break;case"prev":e.prev();break;case"fullscreen":"function"==typeof e.fullscreen&&o&&o.enabled&&e.fullscreen()}}),e.parent.appendChild(t),e.on("activate",({index:t})=>{n("page",n=>n.textContent=`Page ${t+1} of ${e.slides.length}`)}),e.on("fragment",({index:t,fragments:r,fragmentIndex:i})=>{n("prev",e=>e.disabled=0===t&&0===i),n("next",n=>n.disabled=t===e.slides.length-1&&i===r.length-1)}),o&&o.onchange(()=>n("fullscreen",e=>e.classList.toggle("exit",o&&o.isFullscreen)))}}!function(e){e.X="X",e.Y="Y"}(s||(s={}));const f=".bespoke-progress-bar";function h(e){e.on("activate",t=>{document.querySelectorAll(f).forEach(n=>{n.style.flexBasis=`${100*t.index/(e.slides.length-1)}%`})})}function m(e={}){const t=Object.assign({slope:Math.tan(-35*Math.PI/180),swipeThreshold:30},e);return e=>{let n;const r=e.parent,i=e=>{const t=r.getBoundingClientRect();return{x:e.pageX-(t.left+t.right)/2,y:e.pageY-(t.top+t.bottom)/2}};r.addEventListener("touchstart",e=>{n=1===e.touches.length?i(e.touches[0]):void 0}),r.addEventListener("touchmove",e=>{if(n)if(1===e.touches.length){e.preventDefault();const t=i(e.touches[0]),r=t.x-n.x,l=t.y-n.y;n.delta=Math.sqrt(Math.pow(Math.abs(r),2)+Math.pow(Math.abs(l),2)),n.radian=Math.atan2(r,l)}else n=void 0}),r.addEventListener("touchend",r=>{if(n){if(n.delta&&n.delta>=t.swipeThreshold){let i=n.radian-t.slope;i=(i+Math.PI)%(2*Math.PI)-Math.PI,e[i<0?"next":"prev"](),r.stopPropagation()}n=void 0}})}}e.from(document.getElementById("presentation"),[t(),n,r(),c({history:!1}),u(),a,h,m(),d(),i])}(); | |
</script></body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment