<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>{{title}}</title> <link rel="stylesheet" href="static/css/style.css" /> <link rel="stylesheet" href="static/reveal/dist/reset.css" /> <link rel="stylesheet" href="static/reveal/dist/reveal.css" /> <link id="theme" rel="stylesheet" href="static/reveal/dist/theme/sky.css" /> <link id="nav-theme" rel="stylesheet" href="static/css/nav/sky.css" /> <link rel="stylesheet" href= "https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity= "sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> </head> <body> <div id="custom-nav"> <!-- the zero-width-space is a tweak against tidy removing empty tags --> <a href="/chat-editor" title="Edit"><i class="fa fa-user-edit"></i></a> </div> <div class="reveal"> <div class="slides"> {% with messages = get_flashed_messages() %} {% if messages %} <section data-theme="solarized"> {% for m in messages %} <h4>{{ m }}</h4> {% endfor %} <a href="#/latest">Continue...</a> </section> {% endif %} {% endwith %} <section data-theme="sky"> <section id="latest" data-background-size="cover" data-background-video="{{bg_video}}" data-background-opacity="0.75" data-background-video-loop="True" data-background-video-mute="True"> <h3 class="title slide_title">{{title}}</h3> <div class="scrollable"> {% if embed %} {% if embed.type == "youtube" %} <div class="iframe-container-{{embed.proportions}}"> <iframe src="https://www.youtube.com/embed/{{ embed.code }}?controls=0{{ embed.url_extras }}" allowfullscreen="allowfullscreen"></iframe> </div> {% elif embed.type == "vimeo" %} <div class="iframe-container-{{embed.proportions}}"> <iframe src="https://player.vimeo.com/video/{{ embed.code }}?title=0&byline=0&portrait=0{{ embed.url_extras }}" allowfullscreen="allowfullscreen"></iframe> </div> {% endif %} {% endif %} {{ content|safe }} </div> <form method="POST" action="" onsubmit='setTimeout(() => { document.getElementById("prompt").setAttribute("disabled", ""); }, 100)'> <input class="prompt" id="prompt" name="prompt" placeholder="Talk to me" /> </form> </section> {% for moment in history %} <section {% if loop.last %}id="oldest" {% endif %}data-background-size="cover" data-background-video="{{moment.bg_video}}" data-background-opacity="0.75" data-background-video-loop="True" data-background-video-mute="True"> <h3 class="title slide_title">{{moment.title}}</h3> {% if moment.prompt %} <input class="prompt" value="{{moment.prompt}}" disabled /> {% endif %} <div class="scrollable"> {% if moment.embed %} {% if moment.embed.type == "youtube" %} <div class="iframe-container-{{moment.embed.proportions}}"> <iframe src="https://www.youtube.com/embed/{{ moment.embed.code }}?controls=0{{ embed.url_extras }}" allowfullscreen="allowfullscreen"></iframe> </div> {% elif moment.embed.type == "vimeo" %} <div class="iframe-container-{{moment.embed.proportions}}"> <iframe src="https://player.vimeo.com/video/{{ moment.embed.code }}?title=0&byline=0&portrait=0{{ moment.embed.url_extras }}" allowfullscreen="allowfullscreen"></iframe> </div> {% endif %} {% endif %} {{ moment.content|safe }} </div> </section> {% endfor %} </section> </div> </div> <script src="/static/reveal/dist/reveal.js"></script> <script src="/static/reveal/plugin/notes/notes.js"></script> <script src="/static/reveal/plugin/markdown/markdown.js"></script> <script src="/static/reveal/plugin/highlight/highlight.js"></script> <script src="/static/js/jquery-3.7.1.min.js"></script> <script> // More info about initialization & config: // - https://revealjs.com/initialization/ // - https://revealjs.com/config/ Reveal.initialize({ hash: true, progress: false, help: false, transition: 'convex', controlsBackArrows: 'visible', // would hopefully solve the faded-arrow thing // slideNumber: "h.v", // Learn about plugins: https://revealjs.com/plugins/ plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ] }); $(function() { // force autoplay for bg videos (but why?!?) $('.reveal .slide-background-content video').each((index, element) => element.play()); // open external links in new tab $('.reveal a:not([href^="#"])').attr('target','_blank'); // extract css classes from img alt $('.reveal img').addClass("w-50 float-right"); // make all headers max-size // $('.reveal h1, .reveal h2, .reveal h3').addClass('r-fit-text'); var enterSlide = function() { // set theme var the_slide=$(Reveal.getCurrentSlide()), the_theme=the_slide.data('theme') || the_slide.parent().data('theme') || 'sky'; $('#theme').attr('href',`static/reveal/dist/theme/${the_theme}.css`); $('#nav-theme').attr('href',`static/css/nav/${the_theme}.css`); // set (or hide) top link var here = Reveal.getIndices(); if (here.v) { $('#top-link').removeAttr('disabled').attr('href', `#/${here.h}`); } else { $('#top-link').removeAttr('href').attr('disabled', 'disabled'); } }; enterSlide(); Reveal.addEventListener('slidechanged', enterSlide); }); </script> </body> </html>