123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- <!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="/reset/odelia" title="New session with Odelia"><img height="32" style="position:relative;top:4px;{% if user == 'odelia' %}border:solid white 1px{% endif %}" src="static/users/odelia.png" /></a>
- <a href="/reset/brian" title="New session with Brian"><img height="32" style="position:relative;top:4px;{% if user == 'brian' %}border:solid white 1px{% endif %}" src="static/users/brian.png" /></a>
- <a href="/save" title="Save"><i class="fa fa-file-download"></i></a>
- <a href="/load" title="Load"><i class="fa fa-file-upload"></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>
- {% if prompt %}
- <input class="prompt" value="{{prompt}}" disabled />
- {% endif %}
- <div class="scrollable">
- {% if embed %}
- {# @{{ embed.url_extras }}@ #}
- {% 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 %}
- {# @{{ moment.embed.url_extras }}@ #}
- {% if moment.embed.type == "youtube" %}
- <div class="iframe-container-{{moment.embed.proportions}}">
- <iframe src="https://www.youtube.com/embed/{{ moment.embed.code }}?controls=0{{ moment.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>
|