Skip to content
Snippets Groups Projects
Select Git revision
  • main default protected
1 result
Blame Permalink
Forked from teaching-materials / website
13 commits behind, 279 commits ahead of the upstream repository.
presentation_production.html 4.76 KiB 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>{{ page.title | strip_html }}</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link
        rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"  />	

    <style type="text/css">
      @import url({{'/assets/css/ubuntu.css' | relative_url}});
      @import url({{'/assets/css/ubuntu-mono.css' | relative_url}});
      @import url({{'/assets/css/yanone-kaffeesatz.css'  | relative_url}});
      @import url({{'/assets/css/my-remark.css' | relative_url}});
      @import url({{'/assets/css/mermaid.css' | relative_url}});

      @page {
        size: 418px 182px;
        margin: 0;
      }
      @media print {
        .remark-slide-scaler {
          transform: scale(1) !important;
          top: 0 !important;
          left: 0 !important;
        }
      }
    </style>

    <!-- Favicon head tag -->
    <link rel="icon" href="{{site.baseurl}}/assets/img/favicon.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono|Yanone+Kaffeesatz" rel="stylesheet">

  </head>
  <body>
    <textarea id="source">
{{ content }}
    </textarea>

    <script src="{{'/assets/js/remark-latest.min.js' | relative_url}}" type="text/javascript"></script>
    <script src="{{'/assets/js/remark-macros-jm.js' | relative_url}}" type="text/javascript"></script>
    <script type="text/javascript" async
      src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML" async>
    <script type="text/javascript" src="{{'assets/js/mathjax-sre.js' | relative_url}}"></script>
    <script type="text/javascript" src="{{'assets/js/html2canvas.min.js' | relative_url}}"></script>
    <script type="text/javascript" src="{{site.mermaid}}"></script>

    <script type="text/javascript">
      var slideshow = remark.create({
          navigation: {scroll: false},
          ratio: "16:9",
          highlightStyle: 'androidstudio',
          highlightLines: 'true',
          slideNumberFormat: '(%current% of %total%)',
	  countIncrementalSlides: false
      });

      // Add event listener for slide changes
     slideshow.on('afterShowSlide', async function (event) {
	 console.log('Slide changed to: ', event);
	 // Your custom callback code here
	 // Get the div with the class name 'remark-visible' and 'mermaid' inside 'remark-visible'
         mermaidElements = document.getElementsByClassName('remark-visible')[0].getElementsByClassName('mermaid')
         console.log('ElementList', mermaidElements);
         // Convert the NodeList to an array (optional, if you need array methods)
         const mermaidElementsArray = Array.from(mermaidElements);

	 await mermaid.run({
	     nodes: mermaidElementsArray
	 });
    });

      var config = {
	logLevel:1,
	cloneCssStyles:false,
	useMaxWidth:true,
	startOnLoad:false,
	flowchart:{
	    curve:'linear',
	    fontSize:20,
	    useMaxWidth:true,
	},
      };

      mermaid.initialize(config);
    </script>

    <script type="text/javascript" src="{{site.baseurl}}/assets/js/qrcode.js"></script>
    <script>
      // this script was copied from  https://github.com/darcamo/remarkjs_template
      // Find an element with the #qrcode id and replace it with the a QR code
      function prepare_qr_code() {
          var element = document.getElementById("qrcode");
          if (element !== null) {
              var url = element.textContent;
              element.textContent = "";
              var qrcode = new QRCode("qrcode", {
                  text: url,
                  width: 128,
                  height: 128,
                  colorDark : "black",
                  colorLight : "white",
                  correctLevel : QRCode.CorrectLevel.H
              });
          }
      }
      
      // this script was copied from  https://github.com/darcamo/remarkjs_template
      // Add any javascript function that changes the presentation here, such as changing the QR code, updating a chart, etc.
      window.addEventListener("load", async function() {
          // Even though we are executing code in the "load" event of the
          // window, directly calling the functions we want might not work
          // because it needs to be run after other code that also runs in
          // the load event. Therefore, we use a setTimeout to sleep for 1
          // second before calling the functions
          await prepare_qr_code();
      });

    </script>


    <div class="my-header">
        <img src="{{site.baseurl}}/assets/img/favicon.ico" style="height: 30px;"/> 
    </div>

 </body>

<!--
class center middle
class center middle inverse
```html
```ruby
als erste Zeilen in Slide
-->