<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title>First tattler notification</title>

  <style>
    /* separate local & remote CSS directives in two 'style' tags, so clients censoring them will still apply the rest */
    body {
      font-family: 'Montserrat', sans-serif;
      font-weight: 200;
      margin: 0;
      color: #0c0b10;
    }
    
    div {
      padding: 0;
      margin: 0;
    }
    
    #header {
      background-color: #f15230;
      border-bottom: 2px dotted #fff;
    }

    a.logo {
      text-decoration: none;
    }

    #header svg {
      margin: 10px;
      width: 150px;
    }

    #content {
      padding: 10px;
    }

    h1, h2, h3 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
    }

    a {
      color: #f15230;
      text-decoration: none;
    }

    dt {
      font-weight: bold;
    }

    dd {
      margin-bottom: 1em;
    }

    code {
      color: darkgray;
    }

    table {
      font-size: small;
    }

    th {
      background-color: #f15230;
      color: #fff;
      font-size: medium;
      text-align: left;
      padding: 0.2rem;
    }

    td {
      padding: 0.2rem;
    }
    
    #footer {
      background-color: #f15230;
      border-top: 2px dotted #fff;
      color: #fff;
      font-size: small;
      padding: 0.5em;
      width: 100%;
    }

    #notif_id {
      width: 100%;
      text-align: center;
      margin-bottom: 1em;
    }
    
    #footer table a {
      color: #f15230;
      margin: auto;
    }
    
    #footer td {
      color: #f15230;
      text-align: center;
      background-color: #fff;
      border: 1px solid #f15230;
      padding: 0.2em;
      margin-left: 30px;
    }

    .button {
      padding: .5em 2em;
      border-radius: 5px;
      background-color: #f15230;
      color: #fff;
    }

    .button:hover {
      color: #f2dddb;
    }

    /* adaptations for light mode and dark mode, automatically set by e-mail client according to the user's system preference */
    @media (prefers-color-scheme: light) {
      #logo-dark {
        display: none;
      }
    }
    @media (prefers-color-scheme: dark) {
      #logo-light {
        display: none;
      }
    }
  </style>

  <style>
    /* separate local & remote CSS directives in two 'style' tags, so clients censoring them will still apply the rest */
    @font-face {
      font-family: 'Montserrat', sans-serif;
      font-style: normal;
      src: url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
    }
  </style>
</head>
<body>
  <div id="header">
    <a href="https://tattler.dev" class="logo" target="_blank">
      <svg id="logo-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 519.04 149.03"><defs><style>.cls-1{fill:#0b1c1e;}.cls-1,.cls-2{fill-rule:evenodd;}.cls-1,.cls-2,.cls-3{stroke-width:0px;}.cls-2{fill:#ffe8ba;}.cls-3{fill:#ffffff;}</style></defs><g id="Design"><g id="Horizontal_Lockup_-_Color"><g id="Text"><path class="cls-3" d="M160.32,122.46l11.96-60.13h-23.7l3.54-17.38h69.43l-3.54,17.38h-23.81l-11.96,60.13h-21.92Z"/><path class="cls-3" d="M228.62,123.46c-4.28,0-8.36-1.07-12.24-3.21-3.88-2.14-7.01-5.24-9.41-9.3-2.4-4.06-3.6-9.01-3.6-14.84,0-5.02.85-9.63,2.55-13.84,1.7-4.21,4.04-7.88,7.03-11.02,2.99-3.14,6.46-5.57,10.41-7.31,3.95-1.73,8.14-2.6,12.57-2.6,4.87,0,9.04.96,12.51,2.88,3.47,1.92,6.03,4.98,7.7,9.19,1.66,4.21,2.05,9.78,1.16,16.72-.66,6.86-2.23,12.79-4.71,17.77-2.47,4.98-5.72,8.82-9.74,11.52-4.02,2.7-8.77,4.04-14.23,4.04ZM236.04,106.51c2.8,0,5.28-.7,7.42-2.1,2.14-1.4,3.82-3.36,5.04-5.87,1.22-2.51,1.83-5.46,1.83-8.86s-1-6.15-2.99-8.25c-1.99-2.1-4.76-3.16-8.3-3.16-2.81,0-5.3.7-7.47,2.1-2.18,1.4-3.88,3.38-5.09,5.92-1.22,2.55-1.83,5.48-1.83,8.8s1,6.24,2.99,8.3c1.99,2.07,4.8,3.1,8.42,3.1ZM245.01,122.46l1.99-10.08,3.99-19.93,2.77-19.71,1.99-10.41h21.04l-11.96,60.13h-19.82Z"/><path class="cls-3" d="M278.12,80.38l3.21-15.72h43.41l-3.1,15.72h-43.52ZM302.7,123.46c-4.73,0-8.73-.9-12.01-2.71-3.29-1.81-5.63-4.47-7.03-7.97-1.4-3.51-1.62-7.7-.66-12.57l10.19-51.27h21.04l-10.19,51.16c-.37,2.29-.11,4.04.78,5.26s2.4,1.83,4.54,1.83c1.11,0,2.16-.15,3.16-.44,1-.29,2.01-.74,3.04-1.33l2.88,14.4c-2.29,1.33-4.8,2.27-7.53,2.82-2.73.55-5.46.83-8.19.83Z"/><path class="cls-3" d="M324.18,80.38l3.21-15.72h43.41l-3.1,15.72h-43.52ZM348.76,123.46c-4.73,0-8.73-.9-12.01-2.71-3.29-1.81-5.63-4.47-7.03-7.97-1.4-3.51-1.62-7.7-.66-12.57l10.19-51.27h21.04l-10.19,51.16c-.37,2.29-.11,4.04.78,5.26s2.4,1.83,4.54,1.83c1.11,0,2.16-.15,3.16-.44,1-.29,2.01-.74,3.04-1.33l2.88,14.4c-2.29,1.33-4.8,2.27-7.53,2.82-2.73.55-5.46.83-8.19.83Z"/><path class="cls-3" d="M368.04,122.46l16.39-82.16h21.04l-16.39,82.16h-21.04Z"/><path class="cls-3" d="M432.94,123.46c-6.42,0-12.03-1.12-16.83-3.38-4.8-2.25-8.51-5.43-11.13-9.52-2.62-4.1-3.93-8.91-3.93-14.45,0-6.64,1.53-12.59,4.6-17.83,3.06-5.24,7.33-9.37,12.79-12.4,5.46-3.03,11.77-4.54,18.94-4.54,6.13,0,11.41,1.13,15.83,3.38,4.43,2.25,7.82,5.33,10.19,9.25,2.36,3.91,3.54,8.56,3.54,13.95,0,1.62-.13,3.29-.39,4.98-.26,1.7-.54,3.29-.83,4.76h-48.17l1.99-11.07h36.43l-8.75,3.21c.66-2.88.57-5.3-.28-7.25-.85-1.95-2.16-3.47-3.93-4.54-1.77-1.07-3.99-1.61-6.64-1.61-3.4,0-6.18.87-8.36,2.6-2.18,1.74-3.82,4.02-4.93,6.87-1.11,2.84-1.66,6-1.66,9.47,0,4.13,1.16,7.18,3.49,9.14,2.33,1.96,5.78,2.93,10.35,2.93,2.66,0,5.26-.42,7.81-1.27,2.55-.85,4.78-2.05,6.7-3.6l8.86,13.18c-3.76,2.81-7.86,4.8-12.29,5.98-4.43,1.18-8.9,1.77-13.4,1.77Z"/><path class="cls-3" d="M466.77,122.46l11.96-60.13h19.82l-3.32,17.16-1.99-4.87c2.58-4.8,6.07-8.21,10.46-10.24,4.39-2.03,9.5-3.04,15.34-3.04l-3.65,19.05c-.96-.15-1.79-.24-2.49-.28-.7-.04-1.46-.06-2.27-.06-4.58,0-8.3,1.11-11.18,3.32-2.88,2.21-4.84,5.8-5.87,10.74l-5.76,28.35h-21.04Z"/></g><g id="Outline_-_Face"><path class="cls-1" d="M109.5,47.03c0-1.28-.03-2.89-.03-4.9,0-14.43-19.06-29.55-40.15-31.71C48.22,8.27,33.78,0,33.78,0c0,0-27.03,22.42-7.76,38.91-6.24,6.41-9.88,16.65-10.49,33-1.8-.14-3.63.12-5.4.77-6.25,2.33-10.14,9.04-10.14,17.5,0,5.79,2.24,10.23,5.3,13.52-.09.54-.13,1.1-.13,1.66,0,5.89,4.78,10.67,10.66,10.67.56,0,1.11-.04,1.65-.13,1.09,3.85,2.8,8.74,5.37,13.67,7.48,14.4,21.43,19.45,35,19.45v.02c26.04,0,57.84-3.85,57.84-59.14,0-19.4-1.77-33.26-6.18-42.86ZM15.85,110.68c-2.97,0-5.38-2.41-5.38-5.38s2.41-5.38,5.38-5.38,5.38,2.41,5.38,5.38-2.41,5.38-5.38,5.38ZM82.41,133.66c-.04.09-.09.18-.14.26-.19.35-.42.71-.68,1.06-.06.09-.13.18-.2.27-.04.05-.08.1-.12.16-.65.82-1.48,1.63-2.49,2.39-2.51,1.9-6.46,3.3-10.86,4.06-4.7.82-9.92.9-14.45.09-3.85-.7-7.2-2.05-9.3-4.15-2.88-2.88-3.97-9.82-3.59-16.94h0c.51-9.5,3.62-19.31,8.57-20.22,0,0,0,0,.01,0,.09-.02.19-.03.28-.04.15-.02.31-.03.46-.03h0c1.28,0,2.3.26,3.09.69.18.09.34.2.5.32h0c.16.11.3.24.43.37.16.16.31.32.44.5.13.18.25.36.37.55h0c.53.95.78,2.08.86,3.26.03.4.03.8.02,1.21,0,.03,0,.05,0,.08,0,.24-.02.48-.04.72-.06.72-.16,1.42-.28,2.07,0,.04-.01.08-.02.11-.03.15-.06.29-.09.43-.05.22-.09.43-.14.62-.09.37-.18.71-.25,1.01-.01.03-.02.06-.03.09-.03.11-.06.21-.09.31-.11.37-.2.64-.25.78-.03.07-.04.11-.04.11,0,0,2.21-1.2,5.09-2.76,3.3-1.79,7.47-4.04,10.2-5.51.08-.04.17-.09.25-.13.29-.15.59-.27.87-.38-.07.02-.14.04-.22.07,5.93-2.58,11.26.96,7.35,6.31-.24.33-.51.66-.83,1-1.37,1.51-3.47,3.13-6.45,4.77,1-.56,1.95-1,2.82-1.34t0,0c.17-.07.34-.13.5-.19,8.41-3.03,10.4,3.5,5.64,8.12-.76.74-1.68,1.42-2.79,2.02-.09.05-.18.09-.27.14.53-.22,1.03-.37,1.51-.44,1.04-.19,1.97-.06,2.75.3,0,0,0,0,0,0,1.35.62,2.24,1.94,2.45,3.59.16,1.29-.1,2.78-.89,4.29ZM85.4,138.45c2.99-3.88,4.12-8.66,2.76-12.7-.01-.04-.03-.09-.05-.13,1.46-1.36,2.85-2.92,4-4.66,6.21-9.4,6.69-29.4,6.69-29.4l-38.11,1.44s0,4.46-.47,9.94c-.32-1.15-.82-2.25-1.52-3.26-1.92-2.72-5.04-4.21-8.78-4.21l-.02-.02c-5.55,0-12.21,5.99-14.23,22.81-.77,6.34-.02,13.14,2.28,18.51-3.53-2.39-6.63-5.71-8.99-10.23-2.67-5.09-4.34-10.24-5.31-13.94,1.76-1.9,2.83-4.44,2.83-7.23,0-5.89-4.77-10.66-10.66-10.66-2.65,0-5.06.96-6.93,2.56-1.23-1.88-2.05-4.22-2.05-7.1,0-6.61,2.95-10.05,5.68-11.07.7-.26,1.39-.38,2.09-.38l-.02-.02c1.97,0,3.92,1.01,5.58,2.93h0s2.58,8.75,2.58,8.75c0,0,.05.1.09.14,4.23,3.85,11.03,1.02,11.32-4.69.98-18.8,4.45-32.67,21.71-35.63,10.77-1.85,21.16-2.6,21.16-2.6,3.29-5.14-7.74-12.24-7.74-12.24,0,0,14.55,0,18.17,12.48,7.69.88,12.72,2.11,15.98,2.87,3.6,8.22,5.35,20.6,5.35,39.17,0,30.39-9.64,43.24-23.42,48.59Z"/><g id="Eyes"><path class="cls-1" d="M73.55,64.23c-1.34-.77-3.69-1.53-6.16-1.47-2.37.06-5.02.89-6.86,3.37-1.45,1.7-2.29,4.59-2.06,7.8.35,4.96,3.12,8.81,6.19,8.59,3.07-.22,5.27-4.42,4.92-9.38-.2-2.8-1.17-5.25-2.53-6.81.14-.01.28-.02.43-.02,1.78-.04,3.5.53,4.31,1,.85.49,1.93.19,2.42-.66.49-.85.19-1.93-.66-2.42Z"/><path class="cls-1" d="M102.84,63.46c-1.34-.77-3.69-1.53-6.16-1.47-2.53.06-5.39,1.01-7.23,3.91h0c-1.11,1.74-1.72,4.28-1.52,7.07.35,4.96,3.12,8.81,6.18,8.59,3.07-.22,5.27-4.41,4.92-9.38-.19-2.7-1.1-5.07-2.39-6.64h.12c1.78-.05,3.49.53,4.31,1,.85.49,1.94.19,2.42-.66.48-.85.19-1.94-.66-2.42Z"/></g></g><g id="Fill_-_Face"><path class="cls-2" d="M80.85,125.79s0,0,0,0c-.78-.36-1.71-.48-2.75-.3-.48.08-.98.22-1.51.44.09-.05.19-.09.27-.14,1.1-.59,2.03-1.28,2.79-2.02,4.77-4.62,2.77-11.14-5.64-8.12-.16.06-.33.12-.5.19t0,0c-.87.34-1.82.78-2.82,1.34,2.98-1.64,5.08-3.26,6.45-4.77.32-.34.59-.68.83-1,3.91-5.35-1.41-8.89-7.35-6.31.07-.03.14-.05.22-.07-.28.11-.58.23-.87.38-.08.04-.17.09-.25.13-2.73,1.46-6.9,3.72-10.2,5.51-2.88,1.56-5.09,2.76-5.09,2.76,0,0,.01-.04.04-.11.05-.14.14-.41.25-.78.03-.09.06-.2.09-.31,0-.03.02-.06.03-.09.08-.3.17-.64.25-1.01.04-.2.09-.41.14-.62.03-.14.06-.28.09-.43,0-.03,0-.07.02-.11.12-.65.22-1.35.28-2.07.02-.24.03-.48.04-.72,0-.03,0-.05,0-.08.01-.4,0-.81-.02-1.21-.08-1.18-.33-2.31-.86-3.25h0c-.11-.19-.23-.38-.37-.56-.13-.17-.28-.34-.44-.5-.13-.13-.28-.26-.43-.37h0c-.16-.12-.32-.22-.5-.32-.79-.43-1.81-.69-3.09-.69h0c-.16,0-.31,0-.46.03-.09,0-.19.02-.28.04,0,0,0,0-.01,0-4.95.91-8.06,10.72-8.57,20.21h0c-.38,7.12.71,14.07,3.59,16.94,2.11,2.11,5.46,3.45,9.3,4.15,4.53.82,9.74.73,14.45-.09,4.4-.76,8.34-2.16,10.86-4.06,1.01-.76,1.83-1.57,2.49-2.39.04-.05.08-.1.12-.16.07-.09.14-.18.2-.27.26-.35.49-.71.68-1.06.05-.09.09-.17.14-.26.79-1.51,1.05-3,.89-4.29-.21-1.65-1.09-2.97-2.45-3.59Z"/><path class="cls-2" d="M103.46,50.69c-3.27-.77-8.29-1.99-15.98-2.87-3.61-12.48-18.17-12.48-18.17-12.48,0,0,11.03,7.1,7.74,12.24,0,0-10.39.75-21.16,2.6-17.26,2.96-20.73,16.83-21.71,35.63-.29,5.72-7.09,8.55-11.32,4.69-.03-.03-.09-.14-.09-.14l-2.58-8.75h0c-1.66-1.91-3.61-2.92-5.58-2.92l.02.02c-.7,0-1.39.12-2.09.38-2.74,1.02-5.68,4.47-5.68,11.07,0,2.88.82,5.21,2.05,7.1,1.86-1.6,4.28-2.56,6.93-2.56,5.89,0,10.66,4.78,10.66,10.66,0,2.79-1.07,5.33-2.83,7.23.97,3.69,2.64,8.85,5.31,13.94,2.36,4.51,5.47,7.83,8.99,10.23-2.3-5.37-3.05-12.17-2.28-18.51,2.02-16.81,8.68-22.81,14.23-22.81l.02.02c3.75,0,6.86,1.49,8.78,4.21.7,1.01,1.19,2.12,1.52,3.26.47-5.48.47-9.94.47-9.94l38.11-1.44s-.48,20-6.69,29.4c-1.15,1.74-2.54,3.3-4,4.66.02.04.03.09.05.13,1.36,4.04.23,8.82-2.76,12.7,13.77-5.35,23.42-18.19,23.42-48.59,0-18.57-1.76-30.95-5.35-39.17ZM74.22,66.65c-.49.85-1.57,1.15-2.42.66-.82-.47-2.54-1.04-4.31-1-.15,0-.29,0-.43.02,1.36,1.56,2.33,4,2.53,6.81.35,4.96-1.85,9.16-4.92,9.38-3.07.22-5.83-3.63-6.19-8.59-.22-3.21.62-6.1,2.06-7.8,1.84-2.48,4.49-3.31,6.86-3.37,2.47-.06,4.82.7,6.16,1.47.85.49,1.15,1.57.66,2.42ZM101.08,66.54c-.82-.47-2.53-1.05-4.31-1h-.12c1.28,1.57,2.19,3.94,2.39,6.64.35,4.96-1.85,9.16-4.92,9.38-3.07.22-5.83-3.63-6.18-8.59-.2-2.79.41-5.33,1.52-7.07h0c1.84-2.9,4.7-3.85,7.23-3.91,2.47-.06,4.81.7,6.16,1.47.85.48,1.15,1.57.66,2.42-.49.85-1.57,1.15-2.42.66Z"/></g><circle id="Fill_-_Earring" class="cls-3" cx="15.85" cy="105.3" r="5.38"/></g></g></svg>
      <svg id="logo-dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 525.54 163.4"><defs><style>.cls-1{fill:#0b1c1e;}.cls-1,.cls-2{fill-rule:evenodd;}.cls-1,.cls-2,.cls-3,.cls-4{stroke-width:0px;}.cls-2{fill:#ffe8ba;}.cls-3{fill:#fff;}.cls-4{fill:#f15230;}</style></defs><g id="Design"><g id="Horizontal_Lockup_-_Color"><g id="Text"><path class="cls-3" d="M166.83,130.32l11.96-60.13h-23.7l3.54-17.38h69.43l-3.54,17.38h-23.81l-11.96,60.13h-21.92Z"/><path class="cls-3" d="M235.12,131.32c-4.28,0-8.36-1.07-12.24-3.21-3.88-2.14-7.01-5.24-9.41-9.3-2.4-4.06-3.6-9.01-3.6-14.84,0-5.02.85-9.63,2.55-13.84,1.7-4.21,4.04-7.88,7.03-11.02,2.99-3.14,6.46-5.57,10.41-7.31,3.95-1.73,8.14-2.6,12.57-2.6,4.87,0,9.04.96,12.51,2.88,3.47,1.92,6.03,4.98,7.7,9.19,1.66,4.21,2.05,9.78,1.16,16.72-.66,6.86-2.23,12.79-4.71,17.77-2.47,4.98-5.72,8.82-9.74,11.52-4.02,2.7-8.77,4.04-14.23,4.04ZM242.54,114.38c2.8,0,5.28-.7,7.42-2.1,2.14-1.4,3.82-3.36,5.04-5.87,1.22-2.51,1.83-5.46,1.83-8.86s-1-6.15-2.99-8.25c-1.99-2.1-4.76-3.16-8.3-3.16-2.81,0-5.3.7-7.47,2.1-2.18,1.4-3.88,3.38-5.09,5.92-1.22,2.55-1.83,5.48-1.83,8.8s1,6.24,2.99,8.3c1.99,2.07,4.8,3.1,8.42,3.1ZM251.51,130.32l1.99-10.08,3.99-19.93,2.77-19.71,1.99-10.41h21.04l-11.96,60.13h-19.82Z"/><path class="cls-3" d="M284.62,88.25l3.21-15.72h43.41l-3.1,15.72h-43.52ZM309.2,131.32c-4.73,0-8.73-.9-12.01-2.71-3.29-1.81-5.63-4.47-7.03-7.97-1.4-3.51-1.62-7.7-.66-12.57l10.19-51.27h21.04l-10.19,51.16c-.37,2.29-.11,4.04.78,5.26s2.4,1.83,4.54,1.83c1.11,0,2.16-.15,3.16-.44,1-.29,2.01-.74,3.04-1.33l2.88,14.4c-2.29,1.33-4.8,2.27-7.53,2.82-2.73.55-5.46.83-8.19.83Z"/><path class="cls-3" d="M330.69,88.25l3.21-15.72h43.41l-3.1,15.72h-43.52ZM355.27,131.32c-4.73,0-8.73-.9-12.01-2.71-3.29-1.81-5.63-4.47-7.03-7.97-1.4-3.51-1.62-7.7-.66-12.57l10.19-51.27h21.04l-10.19,51.16c-.37,2.29-.11,4.04.78,5.26s2.4,1.83,4.54,1.83c1.11,0,2.16-.15,3.16-.44,1-.29,2.01-.74,3.04-1.33l2.88,14.4c-2.29,1.33-4.8,2.27-7.53,2.82-2.73.55-5.46.83-8.19.83Z"/><path class="cls-3" d="M374.55,130.32l16.39-82.16h21.04l-16.39,82.16h-21.04Z"/><path class="cls-3" d="M439.45,131.32c-6.42,0-12.03-1.12-16.83-3.38-4.8-2.25-8.51-5.43-11.13-9.52-2.62-4.1-3.93-8.91-3.93-14.45,0-6.64,1.53-12.59,4.6-17.83,3.06-5.24,7.33-9.37,12.79-12.4,5.46-3.03,11.77-4.54,18.94-4.54,6.13,0,11.41,1.13,15.83,3.38,4.43,2.25,7.82,5.33,10.19,9.25,2.36,3.91,3.54,8.56,3.54,13.95,0,1.62-.13,3.29-.39,4.98-.26,1.7-.54,3.29-.83,4.76h-48.17l1.99-11.07h36.43l-8.75,3.21c.66-2.88.57-5.3-.28-7.25-.85-1.95-2.16-3.47-3.93-4.54-1.77-1.07-3.99-1.61-6.64-1.61-3.4,0-6.18.87-8.36,2.6-2.18,1.74-3.82,4.02-4.93,6.87-1.11,2.84-1.66,6-1.66,9.47,0,4.13,1.16,7.18,3.49,9.14,2.33,1.96,5.78,2.93,10.35,2.93,2.66,0,5.26-.42,7.81-1.27,2.55-.85,4.78-2.05,6.7-3.6l8.86,13.18c-3.76,2.81-7.86,4.8-12.29,5.98-4.43,1.18-8.9,1.77-13.4,1.77Z"/><path class="cls-3" d="M473.28,130.32l11.96-60.13h19.82l-3.32,17.16-1.99-4.87c2.58-4.8,6.07-8.21,10.46-10.24,4.39-2.03,9.5-3.04,15.34-3.04l-3.65,19.05c-.96-.15-1.79-.24-2.49-.28-.7-.04-1.46-.06-2.27-.06-4.58,0-8.3,1.11-11.18,3.32-2.88,2.21-4.84,5.8-5.87,10.74l-5.76,28.35h-21.04Z"/></g><g id="Outline_-_Face"><path class="cls-1" d="M116,54.9c0-1.28-.03-2.89-.03-4.9,0-14.43-19.06-29.55-40.15-31.71-21.09-2.16-35.53-10.43-35.53-10.43,0,0-27.03,22.42-7.76,38.91-6.24,6.41-9.88,16.65-10.49,33-1.8-.14-3.63.12-5.4.77-6.25,2.33-10.14,9.04-10.14,17.5,0,5.79,2.24,10.23,5.3,13.52-.09.54-.13,1.1-.13,1.66,0,5.89,4.78,10.67,10.66,10.67.56,0,1.11-.04,1.65-.13,1.09,3.85,2.8,8.74,5.37,13.67,7.48,14.4,21.43,19.45,35,19.45v.02c26.04,0,57.84-3.85,57.84-59.14,0-19.4-1.77-33.26-6.18-42.86ZM22.36,118.55c-2.97,0-5.38-2.41-5.38-5.38s2.41-5.38,5.38-5.38,5.38,2.41,5.38,5.38-2.41,5.38-5.38,5.38ZM88.91,141.53c-.04.09-.09.18-.14.26-.19.35-.42.71-.68,1.06-.06.09-.13.18-.2.27-.04.05-.08.1-.12.16-.65.82-1.48,1.63-2.49,2.39-2.51,1.9-6.46,3.3-10.86,4.06-4.7.82-9.92.9-14.45.09-3.85-.7-7.2-2.05-9.3-4.15-2.88-2.88-3.97-9.82-3.59-16.94h0c.51-9.5,3.62-19.31,8.57-20.22,0,0,0,0,.01,0,.09-.02.19-.03.28-.04.15-.02.31-.03.46-.03h0c1.28,0,2.3.26,3.09.69.18.09.34.2.5.32h0c.16.11.3.24.43.37.16.16.31.32.44.5.13.18.25.36.37.55h0c.53.95.78,2.08.86,3.26.03.4.03.8.02,1.21,0,.03,0,.05,0,.08,0,.24-.02.48-.04.72-.06.72-.16,1.42-.28,2.07,0,.04-.01.08-.02.11-.03.15-.06.29-.09.43-.05.22-.09.43-.14.62-.09.37-.18.71-.25,1.01-.01.03-.02.06-.03.09-.03.11-.06.21-.09.31-.11.37-.2.64-.25.78-.03.07-.04.11-.04.11,0,0,2.21-1.2,5.09-2.76,3.3-1.79,7.47-4.04,10.2-5.51.08-.04.17-.09.25-.13.29-.15.59-.27.87-.38-.07.02-.14.04-.22.07,5.93-2.58,11.26.96,7.35,6.31-.24.33-.51.66-.83,1-1.37,1.51-3.47,3.13-6.45,4.77,1-.56,1.95-1,2.82-1.34t0,0c.17-.07.34-.13.5-.19,8.41-3.03,10.4,3.5,5.64,8.12-.76.74-1.68,1.42-2.79,2.02-.09.05-.18.09-.27.14.53-.22,1.03-.37,1.51-.44,1.04-.19,1.97-.06,2.75.3,0,0,0,0,0,0,1.35.62,2.24,1.94,2.45,3.59.16,1.29-.1,2.78-.89,4.29ZM91.9,146.31c2.99-3.88,4.12-8.66,2.76-12.7-.01-.04-.03-.09-.05-.13,1.46-1.36,2.85-2.92,4-4.66,6.21-9.4,6.69-29.4,6.69-29.4l-38.11,1.44s0,4.46-.47,9.94c-.32-1.15-.82-2.25-1.52-3.26-1.92-2.72-5.04-4.21-8.78-4.21l-.02-.02c-5.55,0-12.21,5.99-14.23,22.81-.77,6.34-.02,13.14,2.28,18.51-3.53-2.39-6.63-5.71-8.99-10.23-2.67-5.09-4.34-10.24-5.31-13.94,1.76-1.9,2.83-4.44,2.83-7.23,0-5.89-4.77-10.66-10.66-10.66-2.65,0-5.06.96-6.93,2.56-1.23-1.88-2.05-4.22-2.05-7.1,0-6.61,2.95-10.05,5.68-11.07.7-.26,1.39-.38,2.09-.38l-.02-.02c1.97,0,3.92,1.01,5.58,2.93h0s2.58,8.75,2.58,8.75c0,0,.05.1.09.14,4.23,3.85,11.03,1.02,11.32-4.69.98-18.8,4.45-32.67,21.71-35.63,10.77-1.85,21.16-2.6,21.16-2.6,3.29-5.14-7.74-12.24-7.74-12.24,0,0,14.55,0,18.17,12.48,7.69.88,12.72,2.11,15.98,2.87,3.6,8.22,5.35,20.6,5.35,39.17,0,30.39-9.64,43.24-23.42,48.59Z"/><g id="Eyes"><path class="cls-1" d="M80.06,72.09c-1.34-.77-3.69-1.53-6.16-1.47-2.37.06-5.02.89-6.86,3.37-1.45,1.7-2.29,4.59-2.06,7.8.35,4.96,3.12,8.81,6.19,8.59,3.07-.22,5.27-4.42,4.92-9.38-.2-2.8-1.17-5.25-2.53-6.81.14-.01.28-.02.43-.02,1.78-.04,3.5.53,4.31,1,.85.49,1.93.19,2.42-.66.49-.85.19-1.93-.66-2.42Z"/><path class="cls-1" d="M109.35,71.32c-1.34-.77-3.69-1.53-6.16-1.47-2.53.06-5.39,1.01-7.23,3.91h0c-1.11,1.74-1.72,4.28-1.52,7.07.35,4.96,3.12,8.81,6.18,8.59,3.07-.22,5.27-4.41,4.92-9.38-.19-2.7-1.1-5.07-2.39-6.64h.12c1.78-.05,3.49.53,4.31,1,.85.49,1.94.19,2.42-.66.48-.85.19-1.94-.66-2.42Z"/></g></g><g id="Fill_-_Face"><path class="cls-2" d="M87.36,133.65s0,0,0,0c-.78-.36-1.71-.48-2.75-.3-.48.08-.98.22-1.51.44.09-.05.19-.09.27-.14,1.1-.59,2.03-1.28,2.79-2.02,4.77-4.62,2.77-11.14-5.64-8.12-.16.06-.33.12-.5.19t0,0c-.87.34-1.82.78-2.82,1.34,2.98-1.64,5.08-3.26,6.45-4.77.32-.34.59-.68.83-1,3.91-5.35-1.41-8.89-7.35-6.31.07-.03.14-.05.22-.07-.28.11-.58.23-.87.38-.08.04-.17.09-.25.13-2.73,1.46-6.9,3.72-10.2,5.51-2.88,1.56-5.09,2.76-5.09,2.76,0,0,.01-.04.04-.11.05-.14.14-.41.25-.78.03-.09.06-.2.09-.31,0-.03.02-.06.03-.09.08-.3.17-.64.25-1.01.04-.2.09-.41.14-.62.03-.14.06-.28.09-.43,0-.03,0-.07.02-.11.12-.65.22-1.35.28-2.07.02-.24.03-.48.04-.72,0-.03,0-.05,0-.08.01-.4,0-.81-.02-1.21-.08-1.18-.33-2.31-.86-3.25h0c-.11-.19-.23-.38-.37-.56-.13-.17-.28-.34-.44-.5-.13-.13-.28-.26-.43-.37h0c-.16-.12-.32-.22-.5-.32-.79-.43-1.81-.69-3.09-.69h0c-.16,0-.31,0-.46.03-.09,0-.19.02-.28.04,0,0,0,0-.01,0-4.95.91-8.06,10.72-8.57,20.21h0c-.38,7.12.71,14.07,3.59,16.94,2.11,2.11,5.46,3.45,9.3,4.15,4.53.82,9.74.73,14.45-.09,4.4-.76,8.34-2.16,10.86-4.06,1.01-.76,1.83-1.57,2.49-2.39.04-.05.08-.1.12-.16.07-.09.14-.18.2-.27.26-.35.49-.71.68-1.06.05-.09.09-.17.14-.26.79-1.51,1.05-3,.89-4.29-.21-1.65-1.09-2.97-2.45-3.59Z"/><path class="cls-2" d="M109.96,58.56c-3.27-.77-8.29-1.99-15.98-2.87-3.61-12.48-18.17-12.48-18.17-12.48,0,0,11.03,7.1,7.74,12.24,0,0-10.39.75-21.16,2.6-17.26,2.96-20.73,16.83-21.71,35.63-.29,5.72-7.09,8.55-11.32,4.69-.03-.03-.09-.14-.09-.14l-2.58-8.75h0c-1.66-1.91-3.61-2.92-5.58-2.92l.02.02c-.7,0-1.39.12-2.09.38-2.74,1.02-5.68,4.47-5.68,11.07,0,2.88.82,5.21,2.05,7.1,1.86-1.6,4.28-2.56,6.93-2.56,5.89,0,10.66,4.78,10.66,10.66,0,2.79-1.07,5.33-2.83,7.23.97,3.69,2.64,8.85,5.31,13.94,2.36,4.51,5.47,7.83,8.99,10.23-2.3-5.37-3.05-12.17-2.28-18.51,2.02-16.81,8.68-22.81,14.23-22.81l.02.02c3.75,0,6.86,1.49,8.78,4.21.7,1.01,1.19,2.12,1.52,3.26.47-5.48.47-9.94.47-9.94l38.11-1.44s-.48,20-6.69,29.4c-1.15,1.74-2.54,3.3-4,4.66.02.04.03.09.05.13,1.36,4.04.23,8.82-2.76,12.7,13.77-5.35,23.42-18.19,23.42-48.59,0-18.57-1.76-30.95-5.35-39.17ZM80.72,74.51c-.49.85-1.57,1.15-2.42.66-.82-.47-2.54-1.04-4.31-1-.15,0-.29,0-.43.02,1.36,1.56,2.33,4,2.53,6.81.35,4.96-1.85,9.16-4.92,9.38-3.07.22-5.83-3.63-6.19-8.59-.22-3.21.62-6.1,2.06-7.8,1.84-2.48,4.49-3.31,6.86-3.37,2.47-.06,4.82.7,6.16,1.47.85.49,1.15,1.57.66,2.42ZM107.59,74.4c-.82-.47-2.53-1.05-4.31-1h-.12c1.28,1.57,2.19,3.94,2.39,6.64.35,4.96-1.85,9.16-4.92,9.38-3.07.22-5.83-3.63-6.18-8.59-.2-2.79.41-5.33,1.52-7.07h0c1.84-2.9,4.7-3.85,7.23-3.91,2.47-.06,4.81.7,6.16,1.47.85.48,1.15,1.57.66,2.42-.49.85-1.57,1.15-2.42.66Z"/></g><circle id="Fill_-_Earring" class="cls-4" cx="22.36" cy="113.16" r="5.38"/><path id="Outline" class="cls-3" d="M40.29,7.86s14.43,8.27,35.52,10.43c21.1,2.16,40.16,17.28,40.16,31.71,0,2.01.04,3.62.03,4.9,4.41,9.59,6.18,23.45,6.18,42.86,0,55.28-31.79,59.14-57.84,59.14v-.02c-13.56,0-27.51-5.05-34.99-19.45-2.57-4.93-4.28-9.83-5.37-13.67-.54.09-1.09.13-1.65.13-5.88,0-10.66-4.78-10.66-10.67,0-.56.04-1.12.13-1.66-3.06-3.29-5.3-7.73-5.3-13.52,0-8.45,3.89-15.16,10.14-17.49,1.47-.54,2.99-.81,4.49-.81.3,0,.6.01.9.03.61-16.34,4.25-26.59,10.49-32.99C13.26,30.28,40.29,7.86,40.29,7.86M39.61,0l-3.47,2.86c-1.73,1.44-16.92,14.48-17.04,30.02-.04,5.15,1.61,9.99,4.83,14.24-4.47,6.66-7.08,15.42-8.05,26.86-.49.14-.98.3-1.47.48-8.89,3.32-14.4,12.35-14.4,23.59,0,5.81,1.78,11.19,5.18,15.72.25,8.14,6.2,14.88,13.98,16.34,1.26,3.64,2.74,7.11,4.43,10.34,6.76,13.02,18.79,20.9,34.25,22.6l6.5.37c14.63,0,29.9-1.21,42.43-10.02,14.75-10.36,21.91-28.56,21.91-55.62,0-20.41-1.91-34.16-6.18-44.24,0-.3,0-.61,0-.93,0-.78-.02-1.64-.02-2.6,0-8.89-5.33-18.2-14.64-25.55-8.69-6.87-20.12-11.47-31.36-12.62-19.32-1.98-32.83-9.53-32.96-9.61l-3.9-2.21h0Z"/></g></g></svg>
    </a>
  </div>

  <div id="content">
    <h1 id="greeting">Hey {{ user_firstname }}!</h1>
    
    <p>Here is your first notification through <a href="https://tattler.dev">Tattler</a>. Congrats!</p>


    <h2 id="call-to-action">Feel free to clone me!</h2>

    <p>Feel free to clone &amp; customize this template for your own branded notifications!</p>


    <h2 id="tips">Some practical advice</h2>

    <p>Beware of these when designing your notification stationery:</p>

    <dl>
      <dt>Encoding</dt>
      <dd>Make sure to explicitly declare the encoding &mdash; usually UTF-8 &mdash; with
        a <code>&lt;meta charse="utf-8"&gt;</code> tag &mdash; like in this example.</dd>

      <dt>HTML / CSS</dt>
      <dd>Avoid complex CSS and HTML because you'd be surprised how poorly e-mail
        applications support it. Commonplace Gmail is among the worst by a margin.
        Refer to <a href="https://caniemail.com">CanIEmail</a> for what works where.</dd>

      <dt>Logos</dt>
      <dd>If you include a logo, do your best to embed it as SVG (like in this example).
        If you source an image hosted elsewhere, many clients block remote assets
        for privacy reasons &mdash; and you might easily accidentally remove, rename
        or relocate the image over time.</dd>

      <dt>Unsubscribe</dt>
      <dd>Remember to include a reference (footer?) to guide your reader who no longer
        wants to receive your communications. Omitting it will only inflame their
        frustration.</dd>

      <dt>Notification ID</dt>
      <dd>Tattler provides you with variable <code>notification_id</code>. Display it
        somewhere so you can easily locate the notification in your logs or notification
        sentbox, if you use any.</dd>

      <dt>Dark mode</dt>
      <dd>Beware that most e-mail clients display your content with inverted colors
        if the reader uses a dark mode setting. Test how your template is displayed
        on one such client to ensure the result is readable, as often it isn't.
        If you want more control, add selective styling for dark mode with
        <code>@media</code> queries in your template's CSS &mdash; as exemplified in
        this template.</dd>
    </dl>


    <h2 id="elements">Some reusable elements</h2>

    <h3 id="button">Buttons</h3>

    <p>Stick with a basic <code>a</code> anchor with some CSS:</p>

    <a class="button" href="tel:00123456789">Call us! &rarr;</a>


    <h3 id="table">Tables</h3>

    <p>E-mail clients support tables more broadly than the
      <code>display: flex</code> CSS property,
    so rely on tables if you want maximum compatibility.</p>

    <table style="width: 50%; margin: 0 auto;">
      <thead>
        <tr>
          <th>Items</th>
          <th>U. price</th>
          <th>Quantity</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Banana</td>
          <td>0.50 €</td>
          <td>3</td>
          <td>1.50 €</td>
        </tr>
        <tr>
          <td>Apple</td>
          <td>0.35 €</td>
          <td>10</td>
          <td>3.50 €</td>
        </tr>
        <tr>
          <td style="border-top: 1px solid #f15230"><strong>Total</strong></td>
          <td style="border-top: 1px solid #f15230"></td>
          <td style="border-top: 1px solid #f15230"></td>
          <td style="border-top: 1px solid #f15230"><strong>5.00 €</strong></td>
        </tr>
      </tbody>
    </table>

    <h3 id="lists">Lists</h3>

    <p>The list of tips above is a <strong>Definition List</strong>,
      which are supported by most clients.</p>

    <p>Unordered lists work on most clients too:</p>

    <ul>
      <li>The order of the elements doesn't matter here.</li>
      <li>Elements could be reshuffled without changing the meaning.</li>
    </ul>

    <p>And so do ordered lists:</p>

    <ol>
      <li>First walking,</li>
      <li>and then running.</li>
    </ol>

    <h3 id="fonts">Custom fonts (type faces)</h3>

    <p>Custom fonts will work in many cases, but be prepared for exceptions.</p>

    <p>The most portable approach is a
      <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">@font-face</a>
      CSS definition &mdash; like done in this template.</p>

    <p>Custom fonts only work on few e-mail clients, so consider them an
      optimization.</p>

    <p>However, you can portably use the
      <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font">font</a> tag to declare a generic family.</p>
  </div>
  
  <div id="footer">
    <div id="notif_id">&mdash; notification #{{ notification_id }} &mdash;</div>

    <table style="width: 80%; margin: auto;">
      <tr>
        <td><a href="https://tattler.dev">Tattler</a></td>
        <td><a href="https://docs.tattler.dev">Documentation</a></td>
        <td><a href="https://gitlab.com/tattler/tattler-community">Source code</a></td>
        <td><a href="https://tattler.dev/#unsubscribe">Unsubscribe</a></td>
      </tr>
    </table>
  </div>
</body>
</html>
