<!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" 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" 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 }}" 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 }}" 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 centered");
// 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>