<!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 Title Template</title>

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

    <script type="module" src="https://unpkg.com/@deckdeckgo/core@latest/dist/deckdeckgo/deckdeckgo.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>
      <deckgo-slide-title custom-footer custom-header>
        <h1 slot="title">DeckDeckGo</h1>
        <p slot="content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales quam. Quisque ornare magna nec leo venenatis, sagittis
          gravida metus iaculis. Aliquam venenatis venenatis lacinia. Aenean lectus nisi, convallis sed magna sed, venenatis elementum dui.
          Morbi scelerisque leo vel sem auctor, et cursus lorem lobortis. Suspendisse dignissim vehicula metus at auctor. Nam vel diam nibh.
          Donec facilisis turpis a facilisis imperdiet. Maecenas laoreet sollicitudin massa, eu sagittis enim euismod vel. Duis pellentesque
          augue sed leo auctor, finibus molestie lorem vehicula. Aliquam
        </p>
        <div slot="notes">This are some notes about this particular slide</div>

        <div slot="actions"><button onclick="alert('Hello World')">Hello</button></div>

        <div slot="header">
          <img style="max-height: 100%" src="https://static-exp1.licdn.com/scds/common/u/images/logos/favicons/v1/favicon.ico" /> LinkedIn
        </div>
        <div slot="footer"><img style="max-height: 100%" src="https://github.com/fluidicon.png" /> peterpeterparker</div>
      </deckgo-slide-title>

      <deckgo-slide-title custom-background>
        <h1 slot="title">Custom slide background</h1>
        <div slot="background">
          <img
            style="width: 200px"
            src="https://images.unsplash.com/photo-1574356544558-c29e9a3b35f5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60"
          />
        </div>
      </deckgo-slide-title>

      <deckgo-slide-title>
        <h1 slot="title">Reveal as slot</h1>
        <deckgo-reveal slot="content">
          <p contenteditable="true">
            Hello World EDITABLE EDITABLE HERE <a href="https://ionicframework.com">Ionic</a> 🚀
            <img data-src="https://deckdeckgo.com/assets/img/deckdeckgo.png" style="width: 50px" />
          </p>

          <p>
            Hello World <a href="https://ionicframework.com">Ionic</a> 🚀
            <img 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" />
        </deckgo-reveal>
      </deckgo-slide-title>

      <deckgo-slide-title>
        <h1 slot="title">Reveal inside slot</h1>
        <div slot="content">
          <deckgo-reveal>
            <p>
              Hello World <a href="https://ionicframework.com">Ionic</a> 🚀
              <img data-src="https://deckdeckgo.com/assets/img/deckdeckgo.png" style="width: 50px" />
            </p>
          </deckgo-reveal>

          <deckgo-reveal>
            <p>
              Hello World <a href="https://ionicframework.com">Ionic</a> 🚀
              <img data-src="https://deckdeckgo.com/assets/img/deckdeckgo.png" style="width: 50px" />
            </p>
          </deckgo-reveal>

          <p>
            Hello World <a href="https://ionicframework.com">Ionic</a> 🚀
            <img data-src="https://deckdeckgo.com/assets/img/deckdeckgo.png" style="width: 50px" />
          </p>
        </div>
      </deckgo-slide-title>

      <deckgo-slide-title>
        <h1 slot="title">Not reveal list</h1>
        <ul slot="content">
          <li>Blue cheese</li>
          <li>Feta</li>
          <li>Gruyère</li>
        </ul>
      </deckgo-slide-title>

      <img
        slot="background"
        data-src="https://images.unsplash.com/photo-1548523697-8bd0d1ecc91a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80"
        style="width: 400px"
      />

      <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);
        }
      }

      document.addEventListener(
        'deckDidLoad',
        () => {
          window.dispatchEvent(new Event('resize'));
        },
        {once: true}
      );
    </script>
  </body>
</html>
