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

    <script type="module" src="/build/deckdeckgo-slide-split.esm.js"></script>
    <script nomodule src="/build/deckdeckgo-slide-split.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 direction="vertical">
      <deckgo-slide-split style="--slide-split-background-start: purple; --slide-split-color-start: white">
        <h1 slot="title">DeckDeckGo</h1>
        <div slot="start">Hello World 1 <a href="https://ionicframework.com">Ionic</a> 🚀</div>
        <div slot="end">Hello World 2 <a href="https://ionicframework.com">Ionic</a> 🚀</div>
      </deckgo-slide-split>

      <deckgo-slide-split vertical style="--slide-split-background-start: blue; --slide-split-color-start: white">
        <h1 slot="title">DeckDeckGo</h1>
        <div slot="start">Hello World 1 <a href="https://ionicframework.com">Ionic</a> 🚀</div>
        <div slot="end">
          Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool
          beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans
          Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool
          beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans
          Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool
          beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans
          Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool
          beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans
          Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool
          beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans
          Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool
          beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans
          Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool
          beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans
          Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool
          beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans
          Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool
          beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans
          Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool
          beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans
          Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool
          beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans
          Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool beans Cool
          beans Cool beans Cool beans Cool beans Cool beans Cool beans
        </div>
      </deckgo-slide-split>

      <deckgo-slide-split>
        <h1 slot="title">DeckDeckGo</h1>
        <div slot="start">Hello World 1 <a href="https://ionicframework.com">Ionic</a> 🚀</div>
        <div slot="end">Hello World 2 <a href="https://ionicframework.com">Ionic</a> 🚀</div>
      </deckgo-slide-split>

      <img slot="background" data-src="https://deckdeckgo.com/assets/img/deckdeckgo.png" />

      <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>
