Untitled

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="//unpkg.com/mystical-notification@1.0.0"></script>
  </head>
  <body>
    <h1>Mystical Notification</h1>
    <button type="button" onclick="mysticalAlert()">Alert</button>
    <button type="button" onclick="mysticalConfirm()">Confirm</button>
    <button type="button" onclick="mysticalInfo()">Info</button>
    <button type="button" onclick="mysticalSuccess()">Success</button>
    <button type="button" onclick="mysticalWarning()">Warning</button>

  </body>

</html>

// Code goes here

function mysticalAlert() {
  mystical.Mystical.alert({
    backgroundColor: "#fff000",
    color: "#333",
    position: "bottom",
    duration: 3000,
    backdrop: false,
    template: `
      <h3>Oh No!</h3>
      <p>What have we done?!?!</p>
    `
  })
}

function mysticalConfirm() {
   mystical.Mystical.confirm({
    template: `
      <h3>Oh No!</h3>
      <p>What have we done?!?!</p>
    `
  }).then(function (result) {
    alert("Result is: " + result)
  })
}

function mysticalInfo() {
  mystical.Mystical.info(`<p>Just some info... </p>`)
}

function mysticalSuccess() {
  mystical.Mystical.success(`<p> You did it! You win the internet! </p>`)
}

function mysticalWarning() {
  mystical.Mystical.warning(`<p> Oh no! What have you done?!?! </p>`)
}

/* Styles go here */

html, body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}