NonProuctiveAppUsageAlert

Id: 32C85DAF-07CB-4912-9B2C-6465D4661B8C
Configurable: yes
Company: 6E919CFE-74DD-4EBC-8665-3C0D44866649
Created: 2023-10-24 11:56:49.297000
Updated: 2026-03-28 14:50:11.303000

HTML body (13873 chars)

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="x-apple-disable-message-reformatting">
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  <script type="text/javascript" src="css3-mediaqueries.js"></script>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Non-Productive app Usage Alert</title>
  <style type="text/css">
    body {
      font-family: 'Poppins', sans-serif;
      letter-spacing: .2px;
    }

a {
      text-decoration: none;
      outline: none;
    }

p {
      font-size: 14px;
      font-family: roboto;
    }

b {
      font-size: 14px;
      font-family: roboto;
    }

@media (max-width: 649px) {
      .o_col-full {
        max-width: 100% !important;
      }

.o_col-half {
        max-width: 50% !important;
      }

.o_hide-lg {
        display: inline-block !important;
        font-size: inherit !important;
        max-height: none !important;
        line-height: inherit !important;
        overflow: visible !important;
        width: auto !important;
        visibility: visible !important;
      }

.o_hide-xs,
      .o_hide-xs.o_col_i {
        display: none !important;
        font-size: 0 !important;
        max-height: 0 !important;
        width: 0 !important;
        line-height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        height: 0 !important;
      }

.o_xs-center {
        text-align: center !important;
      }

.o_xs-left {
        text-align: left !important;
      }

.o_xs-right {
        text-align: left !important;
      }

table.o_xs-left {
        margin-left: 0 !important;
        margin-right: auto !important;
        float: none !important;
      }

table.o_xs-right {
        margin-left: auto !important;
        margin-right: 0 !important;
        float: none !important;
      }

table.o_xs-center {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
      }

h1.o_heading {
        font-size: 32px !important;
        line-height: 41px !important;
      }

h2.o_heading {
        font-size: 26px !important;
        line-height: 37px !important;
      }

h3.o_heading {
        font-size: 20px !important;
        line-height: 30px !important;
      }

.o_xs-py-md {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
      }

.o_xs-pt-xs {
        padding-top: 8px !important;
      }

.o_xs-pb-xs {
        padding-bottom: 8px !important;
      }
    }

@media screen {
      @font-face {
        font-family: Roboto;
        font-style: normal;
        font-weight: 400;
        src: local("Roboto"), local("Roboto-Regular"), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format("woff2");
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
      }

@font-face {
        font-family: Roboto;
        font-style: normal;
        font-weight: 400;
        src: local("Roboto"), local("Roboto-Regular"), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }

@font-face {
        font-family: Roboto;
        font-style: normal;
        font-weight: 700;
        src: local("Roboto Bold"), local("Roboto-Bold"), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format("woff2");
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
      }

@font-face {
        font-family: Roboto;
        font-style: normal;
        font-weight: 700;
        src: local("Roboto Bold"), local("Roboto-Bold"), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }

.o_sans,
      .o_heading {
        font-family: "Roboto", sans-serif !important;
      }

.o_heading,
      strong,
      b {
        font-weight: 700 !important;
      }

a[x-apple-data-detectors] {
        color: inherit !important;
        text-decoration: none !important;
      }
    }

@media (max-width: 600px) {
      .small_font {
        font-size: 10px;
      }
    }

@media (max-width: 400px) {
      .small_font {
        font-size: 7px;
      }
    }

@media (max-width: 425px) {
      .small_font {
        font-size: 10px;
      }
    }

@media screen and (max-width: 375px) {
      .small_font {
        font-size: 7px;
      }
    }

@media (min-width: 321px) and (max-width: 374px) {
      .small_font {
        font-size: 9px;
      }
    }

@media (min-width: 301px) and (max-width: 374px) {
      .ccc {
        padding-top: 4px;
      }
    }

@media (min-width: 321px) and (max-width: 374px) {
      .youtube {
        height: 10px !important;
        width: 10px !important;
      }
    }

@media screen and (max-width: 375px) {
      .youtube {
        height: 8px !important;
        width: 8px !important;
      }
    }

@media screen and (max-width: 300px) {
      .small_font {
        font-size: 7px;
        margin-top: 2px !important;
      }
    }

@media screen and (max-width: 300px) {
      .youtube {
        width: 5px !important;
        height: 5px !important;
      }
    }

@media screen and (max-width: 450px) {
      .bbb {
        align-items: center;
        flex-direction: column-reverse;
      }
    }

@media screen and (max-width: 320px) {
      .youtube {
        width: 8px !important;
        height: 8px !important;
      }
    }

@media (max-width: 320px) {
      .image {
        font-size: 7px;
      }
    }

@media only screen and (max-width: 320px) {
      table.youtube {
        width: 7px !important;
        height: 7px !important;
      }
    }

.dash-list {
      list-style-type: none;
      font-size: 13px;
      padding: 0;
      font-family: 'Poppins', sans-serif;
    }

.dash-list li:before {
      content: "-";
      margin-right: 5px;
    }

.list-lable {
      color: gray;
      font-weight: 600;
    }

.screenshot-img {
      border: 2px solid silver;
      border-radius: 10px;
      width: 275px;
      box-shadow: 3px 3px 15px silver;
    }
  </style>
</head>

<body class="o_body o_bg-light"
  style="width: 100%;margin: 0px;padding: 0px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;background-color: #f4f8f9;">
   <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
    <tbody>
      <tr>
        <td class="o_bg-light o_px-xs" align="center"
          style="background-color: #f9f8fa; padding-left: 8px; padding-right: 8px;">
          <table class="o_block" width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation"
            style="max-width: 632px; margin: 0 auto;">
            <tbody>
              <tr>
                <td style="padding: 10px 0; text-align: left;"> ##Disclaimer## </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation"
    style="background-color:#f9f8fa; margin:0; padding:0;">
    <tbody>
      <tr>
        <td align="center">
          <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" style=" max-width:632px;">
            <tbody>
              <tr>
                <td align="center" style=" max-width:632px;">
                  <div style="text-align:center; max-width:632px;"> ##Header## </div>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
    <tbody>
      <tr>
        <td class="o_bg-light o_px-xs" align="center" style="background:#f9f8fa">
          <table class="o_block" width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation"
            style="max-width: 632px;margin: 0 auto;">
            <tbody>
              <tr>
                <table class="o_block" width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation"
                  style="max-width: 632px;">
                  <tbody>
                    <tr style="margin-bottom: 0px;display: flex;background-color:white" class="bbb">
                      <td class="es-m-p20b esd-container-frame" align="left">
                        <table cellpadding="0" cellspacing="0" width="100%" height="100%">
                          <tbody>
                            <tr>
                              <td align="left" class="esd-block-text es-p10t"
                                style="background-color:white;padding-left: 10px;">
                                <p
                                  style="color: #363636;line-height:23px;  margin-left: 10px;font-family: Arial, Helvetica, sans-serif; font-weight:SemiBold; font-size:15px;margin-top: 20px;">
                                  <b> Dear ##MANAGERNAME##,</b> <br><br> </p>
                                <p
                                  style="color: #363636; margin-left: 10px;font-size: 15px;line-height:23px;margin-bottom: 0px;">
                                  We would like to inform you that <span class="list-lable">##USERNAME##</span> has been
                                  using a non-productive application according to your organization's policies. </p>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td align="left" class="esd-container-frame">
                        <table cellpadding="0" cellspacing="0" width="100%" style="margin-right:60px">
                          <tbody>
                            <tr>
                              <td align="center" class="esd-block-image es-p30t es-m-p0t" style="font-size: 0px;"><img
                                  style="margin-top:10%;padding-left: 10px; width:200px"
                                  src="https://i.imgur.com/ep5XvJR.jpg" alt width="240"></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table class="o_block" width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation"
                  style="max-width: 632px;margin: 0 auto;">
                  <tbody>
                    <tr style="margin-bottom: 0px;background-color:white">
                      <td align="left"
                        style="background-color:white;align-items: center;               flex-direction: row;padding-left: 20px;">
                        <p>Please find the details below:</p>
                        <ul class="dash-list">
                          <li><span class="list-lable">Employee Name : </span> &nbsp;##USERNAME##</li>
                          <li><span class="list-lable">Non-productive Application :</span> &nbsp;##APPLICATIONNAME##
                          </li>
                          <li><span class="list-lable">Date & Time :</span> &nbsp;##APPLICATIONSTARTTIME##</li>
                          <li><span class="list-lable">Past 7 days usage :</span> &nbsp;##PASTUSAGETIME## </li>
                        </ul> ##SCREENSHOTDETAILS## <p>Please address this matter with the employee to ensure adherence
                          to productivity guidelines.</p>
                        <p>
                        <p>Thank you</p> <b>Best Regards,</b>
                        <p> <img src="https://i.stack.imgur.com/SRhpR.png" alt="signature"
                            style="margin-left: -1px;width:100px"></p>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation"
    style="background-color:#f9f8fa; margin:0; padding:0;">
    <tbody>
      <tr>
        <td align="center">
          <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" style=" max-width:632px;">
            <tbody>
              <tr>
                <td align="center" style=" max-width:632px;">
                  <div style="text-align:center;  max-width:632px;"> ##Footer## </div>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Save note (optional, shown in version history)

Reset

Rendered preview — preview as

Version history (0 most recent)

Saved at	By	Size	Note
No saved versions yet. Each Save will record one.

NonProuctiveAppUsageAlert

HTML body (13873 chars)

Rendered preview — preview as unfilled (placeholders visible)

Version history (0 most recent)

Rendered preview — preview as