You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

chat.html 8.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  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>{{title}}</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="/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>
  22. <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>
  23. <a href="/save" title="Save"><i class="fa fa-file-download">​</i></a>
  24. <a href="/load" title="Load"><i class="fa fa-file-upload">​</i></a>
  25. </div>
  26. <div class="reveal">
  27. <div class="slides">
  28. {% with messages = get_flashed_messages() %}
  29. {% if messages %}
  30. <section data-theme="solarized">
  31. {% for m in messages %}
  32. <h4>{{ m }}</h4>
  33. {% endfor %}
  34. <a href="#/latest">Continue...</a>
  35. </section>
  36. {% endif %}
  37. {% endwith %}
  38. <section data-theme="sky">
  39. <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">
  40. <h3 class="title slide_title">{{title}}</h3>
  41. {% if prompt %}
  42. <input class="prompt" value="{{prompt}}" disabled />
  43. {% endif %}
  44. <div class="scrollable">
  45. {% if embed %}
  46. {# @{{ embed.url_extras }}@ #}
  47. {% if embed.type == "youtube" %}
  48. <div class="iframe-container-{{embed.proportions}}">
  49. <iframe src="https://www.youtube.com/embed/{{ embed.code }}?controls=0{{ embed.url_extras }}" allowfullscreen="allowfullscreen"></iframe>
  50. </div>
  51. {% elif embed.type == "vimeo" %}
  52. <div class="iframe-container-{{embed.proportions}}">
  53. <iframe src="https://player.vimeo.com/video/{{ embed.code }}?title=0&amp;byline=0&amp;portrait=0{{ embed.url_extras }}" allowfullscreen="allowfullscreen"></iframe>
  54. </div>
  55. {% endif %}
  56. {% endif %}
  57. {{ content|safe }}
  58. </div>
  59. <form method="POST" action=""
  60. onsubmit='setTimeout(() => { document.getElementById("prompt").setAttribute("disabled", ""); }, 100)'>
  61. <input class="prompt" id="prompt" name="prompt" placeholder="Talk to me" />
  62. </form>
  63. </section>
  64. {% for moment in history %}
  65. <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">
  66. <h3 class="title slide_title">{{moment.title}}</h3>
  67. {% if moment.prompt %}
  68. <input class="prompt" value="{{moment.prompt}}" disabled />
  69. {% endif %}
  70. <div class="scrollable">
  71. {% if moment.embed %}
  72. {# @{{ moment.embed.url_extras }}@ #}
  73. {% if moment.embed.type == "youtube" %}
  74. <div class="iframe-container-{{moment.embed.proportions}}">
  75. <iframe src="https://www.youtube.com/embed/{{ moment.embed.code }}?controls=0{{ moment.embed.url_extras }}" allowfullscreen="allowfullscreen"></iframe>
  76. </div>
  77. {% elif moment.embed.type == "vimeo" %}
  78. <div class="iframe-container-{{moment.embed.proportions}}">
  79. <iframe src="https://player.vimeo.com/video/{{ moment.embed.code }}?title=0&amp;byline=0&amp;portrait=0{{ moment.embed.url_extras }}" allowfullscreen="allowfullscreen"></iframe>
  80. </div>
  81. {% endif %}
  82. {% endif %}
  83. {{ moment.content|safe }}
  84. </div>
  85. </section>
  86. {% endfor %}
  87. </section>
  88. </div>
  89. </div>
  90. <script src="/static/reveal/dist/reveal.js"></script>
  91. <script src="/static/reveal/plugin/notes/notes.js"></script>
  92. <script src="/static/reveal/plugin/markdown/markdown.js"></script>
  93. <script src="/static/reveal/plugin/highlight/highlight.js"></script>
  94. <script src="/static/js/jquery-3.7.1.min.js"></script>
  95. <script>
  96. // More info about initialization & config:
  97. // - https://revealjs.com/initialization/
  98. // - https://revealjs.com/config/
  99. Reveal.initialize({
  100. hash: true,
  101. progress: false,
  102. help: false,
  103. transition: 'convex',
  104. controlsBackArrows: 'visible', // would hopefully solve the faded-arrow thing
  105. // slideNumber: "h.v",
  106. // Learn about plugins: https://revealjs.com/plugins/
  107. plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
  108. });
  109. $(function() {
  110. // force autoplay for bg videos (but why?!?)
  111. $('.reveal .slide-background-content video').each((index, element) => element.play());
  112. // open external links in new tab
  113. $('.reveal a:not([href^="#"])').attr('target','_blank');
  114. // extract css classes from img alt
  115. $('.reveal img').addClass("w-50 float-right");
  116. // make all headers max-size
  117. // $('.reveal h1, .reveal h2, .reveal h3').addClass('r-fit-text');
  118. var enterSlide = function() {
  119. // set theme
  120. var the_slide=$(Reveal.getCurrentSlide()),
  121. the_theme=the_slide.data('theme') ||
  122. the_slide.parent().data('theme') || 'sky';
  123. $('#theme').attr('href',`static/reveal/dist/theme/${the_theme}.css`);
  124. $('#nav-theme').attr('href',`static/css/nav/${the_theme}.css`);
  125. // set (or hide) top link
  126. var here = Reveal.getIndices();
  127. if (here.v) {
  128. $('#top-link').removeAttr('disabled').attr('href', `#/${here.h}`);
  129. } else {
  130. $('#top-link').removeAttr('href').attr('disabled', 'disabled');
  131. }
  132. };
  133. enterSlide();
  134. Reveal.addEventListener('slidechanged', enterSlide);
  135. });
  136. </script>
  137. </body>
  138. </html>