<!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="{{ url_for('static', filename='css/style.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='reveal/dist/reset.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='reveal/dist/reveal.css') }}" />
<link id="theme" rel="stylesheet" href="{{ url_for('static', filename='reveal/dist/theme/white.css') }}" />
<link id="nav-theme" rel="stylesheet" href="{{ url_for('static', filename='css/nav/white.css') }}" />
<link rel="stylesheet" href=
"https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity=
"sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<!-- Theme used for syntax highlighted code -->
<!-- link rel="stylesheet" href="{{ url_for('static', filename='reveal/plugin/highlight/monokai.css') }}" -->
</head>
<body>
<div id="custom-nav">
<!-- the zero-width-space is a tweak against tidy removing empty tags -->
<a href="#/" title="Home"><i class="fa fa-home"></i></a>
<a id="top-link" title="Section top" disabled="disabled"><i class="fa fa-angle-double-up"></i></a>
<a href="/editor" title="Edit"><i class="fa fa-user-edit"></i></a>
</div>
<div class="reveal">
<div class="slides">
{% for column in columns %}
<section{% if column.params %}{% for key, value in column.params|dictsort %} data-{{key}}="{{value}}"{% endfor %}{% endif %}>
<section id="{{column.id}}">
{# column's top slide #}
<h3 class="title slide_title">{{column.title}}</h3>
{% if column.content %}{{ column.content|safe }}{% endif %}
{% if generate_indices %}
{# Main column shows links to other columns #}
{% if loop.first %}
<ul>
{% for other in columns %}
{% if not loop.first %}<li><a href="#/{{other.id}}">{{other.title}}</a></li>{% endif %}
{% endfor %}
</ul>
{% endif %}
{# if column has sub-slides, link to them #}
{% if column.slides %}
<ul>
{% for slide in column.slides %}
<li><a href="#/{{column.id}}_{{slide.id}}">{{slide.title}}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endif %}
</section>
{# show all column's sub-slides #}
{% for slide in column.slides %}
<section id="{{column.id}}_{{slide.id}}"{% if slide.params %}{% for key, value in slide.params|dictsort %} data-{{key}}="{{value}}"{% endfor %}{% endif %}>
<p class="title">{{slide.title}}</p>
{% if slide.content %}{{ slide.content|safe }}{% endif %}
</section>
{% endfor %}
</section>
{% endfor %}
</div>
</div>
<script src="{{ url_for('static', filename='reveal/dist/reveal.js') }}"></script>
<script src="{{ url_for('static', filename='reveal/plugin/notes/notes.js') }}"></script>
<script src="{{ url_for('static', filename='reveal/plugin/markdown/markdown.js') }}"></script>
<script src="{{ url_for('static', filename='reveal/plugin/highlight/highlight.js') }}"></script>
<script src="{{ url_for('static', filename='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,
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').each((index, element) => {
var img = $(element),
altvec = img.attr('alt').split('|');
if (altvec.length>1) {
img.attr('alt',altvec[0]).addClass(altvec[1]);
}
});
// 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>