Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

embeds.html 5.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6. <title>Embed library</title>
  7. <link rel="stylesheet" href="static/css/style.css" />
  8. <link rel="stylesheet" href="static/reveal/dist/reset.css" />
  9. <link rel="stylesheet" href="static/reveal/dist/reveal.css" />
  10. <link id="theme" rel="stylesheet" href="static/reveal/dist/theme/sky.css" />
  11. <link id="nav-theme" rel="stylesheet" href="static/css/nav/sky.css" />
  12. <link rel="stylesheet" href=
  13. "https://use.fontawesome.com/releases/v5.6.3/css/all.css"
  14. integrity=
  15. "sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
  16. crossorigin="anonymous">
  17. </head>
  18. <body>
  19. <div id="custom-nav">
  20. <!-- the zero-width-space is a tweak against tidy removing empty tags -->
  21. <a href="/embed-editor" title="Edit"><i class="fa fa-user-edit">​</i></a>
  22. </div>
  23. <div class="reveal">
  24. <div class="slides">
  25. {% with messages = get_flashed_messages() %}
  26. {% if messages %}
  27. <section data-theme="solarized">
  28. {% for m in messages %}
  29. <h4>{{ m }}</h4>
  30. {% endfor %}
  31. <a href="#/latest">Continue...</a>
  32. </section>
  33. {% endif %}
  34. {% endwith %}
  35. <section data-theme="sky">
  36. {% for embed in embeds %}
  37. <section id="{{embed.id}}">
  38. <h3 class="title slide_title">{{embed.id}}</h3>
  39. <div class="scrollable">
  40. {% if embed.type == "youtube" %}
  41. <iframe class="iframe-{{embed.proportions}}" src="https://www.youtube.com/embed/{{ embed.code }}" allowfullscreen="allowfullscreen"></iframe>
  42. {% elif embed.type == "vimeo" %}
  43. <iframe class="iframe-{{embed.proportions}}" src="https://player.vimeo.com/video/{{ embed.code }}" allowfullscreen="allowfullscreen"></iframe>
  44. {% endif %}
  45. <p>{{ embed.description }}</p>
  46. </div>
  47. </section>
  48. {% endfor %}
  49. </section>
  50. </div>
  51. </div>
  52. <script src="/static/reveal/dist/reveal.js"></script>
  53. <script src="/static/reveal/plugin/notes/notes.js"></script>
  54. <script src="/static/reveal/plugin/markdown/markdown.js"></script>
  55. <script src="/static/reveal/plugin/highlight/highlight.js"></script>
  56. <script src="/static/js/jquery-3.7.1.min.js"></script>
  57. <script>
  58. // More info about initialization & config:
  59. // - https://revealjs.com/initialization/
  60. // - https://revealjs.com/config/
  61. Reveal.initialize({
  62. hash: true,
  63. progress: false,
  64. help: false,
  65. transition: 'convex',
  66. controlsBackArrows: 'visible', // would hopefully solve the faded-arrow thing
  67. // slideNumber: "h.v",
  68. // Learn about plugins: https://revealjs.com/plugins/
  69. plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
  70. });
  71. $(function() {
  72. // force autoplay for bg videos (but why?!?)
  73. $('.reveal .slide-background-content video').each((index, element) => element.play());
  74. // open external links in new tab
  75. $('.reveal a:not([href^="#"])').attr('target','_blank');
  76. // extract css classes from img alt
  77. $('.reveal img').addClass("w-50 centered");
  78. // make all headers max-size
  79. // $('.reveal h1, .reveal h2, .reveal h3').addClass('r-fit-text');
  80. var enterSlide = function() {
  81. // set theme
  82. var the_slide=$(Reveal.getCurrentSlide()),
  83. the_theme=the_slide.data('theme') ||
  84. the_slide.parent().data('theme') || 'sky';
  85. $('#theme').attr('href',`static/reveal/dist/theme/${the_theme}.css`);
  86. $('#nav-theme').attr('href',`static/css/nav/${the_theme}.css`);
  87. // set (or hide) top link
  88. var here = Reveal.getIndices();
  89. if (here.v) {
  90. $('#top-link').removeAttr('disabled').attr('href', `#/${here.h}`);
  91. } else {
  92. $('#top-link').removeAttr('href').attr('disabled', 'disabled');
  93. }
  94. };
  95. enterSlide();
  96. Reveal.addEventListener('slidechanged', enterSlide);
  97. });
  98. </script>
  99. </body>
  100. </html>