<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />

    <title>DeckDeckGo - Slide Content Template</title>

    <script type="module" src="/build/deckdeckgo-slide-content.esm.js"></script>
    <script nomodule src="/build/deckdeckgo-slide-content.js"></script>

    <script type="module" src="https://unpkg.com/@deckdeckgo/core@latest/dist/deckdeckgo/deckdeckgo.esm.js"></script>

    <script type="module" src="https://unpkg.com/@deckdeckgo/reveal@latest/dist/deckdeckgo-reveal/deckdeckgo-reveal.esm.js"></script>

    <style>
      * {
        box-sizing: border-box;
      }

      body {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        position: absolute;
      }
    </style>
  </head>
  <body style="margin: 0">
    <deckgo-deck direction="vertical">
      <deckgo-slide-content>
        <h1 slot="title">Reveal after element</h1>

        <div slot="content">
          <deckgo-reveal-list list-tag="ul" style="list-style-type: square" contenteditable="true">
            <li>Use HTML and CSS to create <strong>without effort</strong> your presentation</li>
            <li><strong>Ionic</strong> components and icons to create your content</li>
            <li><strong>Style</strong> your presentation quickly</li>
            <li>Lightweight and <strong>lazy</strong> loaded images</li>
            <li>Bundles the presentation with an <strong>offline</strong> support</li>
          </deckgo-reveal-list>

          <deckgo-reveal>
            <img tag="DeckDeckGo" data-src="https://deckdeckgo.com/assets/img/deckdeckgo.png" style="width: 50px" />

            <p>
              <img tag="DeckDeckGo" data-src="https://deckdeckgo.com/assets/img/deckdeckgo.png" style="width: 50px" />
            </p>
          </deckgo-reveal>

          <deckgo-reveal-list>
            <li>Use HTML and CSS to create <strong>without effort</strong> your presentation</li>
            <li><strong>Ionic</strong> components and icons to create your content</li>
            <li><strong>Style</strong> your presentation quickly</li>
            <li>Lightweight and <strong>lazy</strong> loaded images</li>
            <li>Bundles the presentation with an <strong>offline</strong> support</li>
          </deckgo-reveal-list>
        </div>
      </deckgo-slide-content>

      <deckgo-slide-content>
        <h1 slot="title">Yolo</h1>
      </deckgo-slide-content>

      <div slot="header">
        <img style="max-height: 100%" src="https://deckdeckgo.com/assets/favicon/icon-default-512x512.png" /> DeckDeckGo
      </div>
      <div slot="footer">
        <img style="max-height: 100%" src="https://abs.twimg.com/responsive-web/web/icon-default-maskable-large.433070b4.png" />
        daviddalbusco
      </div>

      <button onclick="slideNext()" slot="actions">Action slide next</button>
    </deckgo-deck>

    <script type="text/javascript">
      function slideNext() {
        const elem = document.getElementsByTagName('deckgo-deck');
        if (elem && elem.length > 0) {
          elem[0].slideNext(false);
        }
      }
    </script>
  </body>
</html>
