github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/data/templates/main.html (about)

     1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     2  <html xmlns="http://www.w3.org/1999/xhtml">
     3  
     4  <head>
     5      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     6  
     7      <meta name="viewport" content="width=device-width" />
     8  
     9      <style type="text/css">
    10          #outlook a {
    11              padding: 0;
    12          }
    13  
    14          body {
    15              width: 100% !important;
    16              min-width: 100%;
    17              -webkit-text-size-adjust: 100%;
    18              -ms-text-size-adjust: 100%;
    19              margin: 0;
    20              padding: 0;
    21          }
    22  
    23          .ExternalClass {
    24              width: 100%;
    25          }
    26  
    27          .ExternalClass,
    28          .ExternalClass p,
    29          .ExternalClass span,
    30          .ExternalClass font,
    31          .ExternalClass td,
    32          .ExternalClass div {
    33              line-height: 100%;
    34          }
    35  
    36          #backgroundTable {
    37              margin: 0;
    38              padding: 0;
    39              width: 100% !important;
    40              line-height: 100% !important;
    41          }
    42  
    43          img {
    44              outline: none;
    45              text-decoration: none;
    46              -ms-interpolation-mode: bicubic;
    47              width: auto;
    48              max-width: 100%;
    49              float: left;
    50              clear: both;
    51              display: block;
    52          }
    53  
    54          center {
    55              width: 100%;
    56              min-width: 580px;
    57          }
    58  
    59          a img {
    60              border: none;
    61          }
    62  
    63          p {
    64              margin: 0 0 0 10px;
    65          }
    66  
    67          table {
    68              border-spacing: 0;
    69              border-collapse: collapse;
    70          }
    71  
    72          td {
    73              word-break: break-word;
    74              -webkit-hyphens: auto;
    75              -moz-hyphens: auto;
    76              hyphens: auto;
    77              border-collapse: collapse !important;
    78          }
    79  
    80          table,
    81          tr,
    82          td {
    83              padding: 0;
    84              vertical-align: top;
    85              text-align: left;
    86          }
    87  
    88          hr {
    89              color: #d9d9d9;
    90              background-color: #d9d9d9;
    91              height: 1px;
    92              border: none;
    93          }
    94          /* Responsive Grid */
    95  
    96          table.body {
    97              height: 100%;
    98              width: 100%;
    99          }
   100  
   101          table.container {
   102              width: 580px;
   103              margin: 0 auto;
   104              text-align: inherit;
   105          }
   106  
   107          table.row {
   108              padding: 0;
   109              width: 100%;
   110              position: relative;
   111          }
   112  
   113          table.container table.row {
   114              display: block;
   115          }
   116  
   117          td.wrapper {
   118              padding: 10px 20px 0 0;
   119              position: relative;
   120          }
   121  
   122          table.columns,
   123          table.column {
   124              margin: 0 auto;
   125          }
   126  
   127          table.columns td,
   128          table.column td {
   129              padding: 0 0 10px;
   130          }
   131  
   132          table.columns td.sub-columns,
   133          table.column td.sub-columns,
   134          table.columns td.sub-column,
   135          table.column td.sub-column {
   136              padding-right: 10px;
   137          }
   138  
   139          td.sub-column,
   140          td.sub-columns {
   141              min-width: 0;
   142          }
   143  
   144          table.row td.last,
   145          table.container td.last {
   146              padding-right: 0;
   147          }
   148  
   149          table.one {
   150              width: 30px;
   151          }
   152  
   153          table.two {
   154              width: 80px;
   155          }
   156  
   157          table.three {
   158              width: 130px;
   159          }
   160  
   161          table.four {
   162              width: 180px;
   163          }
   164  
   165          table.five {
   166              width: 230px;
   167          }
   168  
   169          table.six {
   170              width: 280px;
   171          }
   172  
   173          table.seven {
   174              width: 330px;
   175          }
   176  
   177          table.eight {
   178              width: 380px;
   179          }
   180  
   181          table.nine {
   182              width: 430px;
   183          }
   184  
   185          table.ten {
   186              width: 480px;
   187          }
   188  
   189          table.eleven {
   190              width: 530px;
   191          }
   192  
   193          table.twelve {
   194              width: 580px;
   195          }
   196  
   197          table.one center {
   198              min-width: 30px;
   199          }
   200  
   201          table.two center {
   202              min-width: 80px;
   203          }
   204  
   205          table.three center {
   206              min-width: 130px;
   207          }
   208  
   209          table.four center {
   210              min-width: 180px;
   211          }
   212  
   213          table.five center {
   214              min-width: 230px;
   215          }
   216  
   217          table.six center {
   218              min-width: 280px;
   219          }
   220  
   221          table.seven center {
   222              min-width: 330px;
   223          }
   224  
   225          table.eight center {
   226              min-width: 380px;
   227          }
   228  
   229          table.nine center {
   230              min-width: 430px;
   231          }
   232  
   233          table.ten center {
   234              min-width: 480px;
   235          }
   236  
   237          table.eleven center {
   238              min-width: 530px;
   239          }
   240  
   241          table.twelve center {
   242              min-width: 580px;
   243          }
   244  
   245          table.one .panel center {
   246              min-width: 10px;
   247          }
   248  
   249          table.two .panel center {
   250              min-width: 60px;
   251          }
   252  
   253          table.three .panel center {
   254              min-width: 110px;
   255          }
   256  
   257          table.four .panel center {
   258              min-width: 160px;
   259          }
   260  
   261          table.five .panel center {
   262              min-width: 210px;
   263          }
   264  
   265          table.six .panel center {
   266              min-width: 260px;
   267          }
   268  
   269          table.seven .panel center {
   270              min-width: 310px;
   271          }
   272  
   273          table.eight .panel center {
   274              min-width: 360px;
   275          }
   276  
   277          table.nine .panel center {
   278              min-width: 410px;
   279          }
   280  
   281          table.ten .panel center {
   282              min-width: 460px;
   283          }
   284  
   285          table.eleven .panel center {
   286              min-width: 510px;
   287          }
   288  
   289          table.twelve .panel center {
   290              min-width: 560px;
   291          }
   292  
   293          .body .columns td.one,
   294          .body .column td.one {
   295              width: 8.333333%;
   296          }
   297  
   298          .body .columns td.two,
   299          .body .column td.two {
   300              width: 16.666666%;
   301          }
   302  
   303          .body .columns td.three,
   304          .body .column td.three {
   305              width: 25%;
   306          }
   307  
   308          .body .columns td.four,
   309          .body .column td.four {
   310              width: 33.333333%;
   311          }
   312  
   313          .body .columns td.five,
   314          .body .column td.five {
   315              width: 41.666666%;
   316          }
   317  
   318          .body .columns td.six,
   319          .body .column td.six {
   320              width: 50%;
   321          }
   322  
   323          .body .columns td.seven,
   324          .body .column td.seven {
   325              width: 58.333333%;
   326          }
   327  
   328          .body .columns td.eight,
   329          .body .column td.eight {
   330              width: 66.666666%;
   331          }
   332  
   333          .body .columns td.nine,
   334          .body .column td.nine {
   335              width: 75%;
   336          }
   337  
   338          .body .columns td.ten,
   339          .body .column td.ten {
   340              width: 83.333333%;
   341          }
   342  
   343          .body .columns td.eleven,
   344          .body .column td.eleven {
   345              width: 91.666666%;
   346          }
   347  
   348          .body .columns td.twelve,
   349          .body .column td.twelve {
   350              width: 100%;
   351          }
   352  
   353          td.offset-by-one {
   354              padding-left: 50px;
   355          }
   356  
   357          td.offset-by-two {
   358              padding-left: 100px;
   359          }
   360  
   361          td.offset-by-three {
   362              padding-left: 150px;
   363          }
   364  
   365          td.offset-by-four {
   366              padding-left: 200px;
   367          }
   368  
   369          td.offset-by-five {
   370              padding-left: 250px;
   371          }
   372  
   373          td.offset-by-six {
   374              padding-left: 300px;
   375          }
   376  
   377          td.offset-by-seven {
   378              padding-left: 350px;
   379          }
   380  
   381          td.offset-by-eight {
   382              padding-left: 400px;
   383          }
   384  
   385          td.offset-by-nine {
   386              padding-left: 450px;
   387          }
   388  
   389          td.offset-by-ten {
   390              padding-left: 500px;
   391          }
   392  
   393          td.offset-by-eleven {
   394              padding-left: 550px;
   395          }
   396  
   397          td.expander {
   398              visibility: hidden;
   399              width: 0;
   400              padding: 0 !important;
   401          }
   402  
   403          table.columns .text-pad,
   404          table.column .text-pad {
   405              padding-left: 10px;
   406              padding-right: 10px;
   407          }
   408  
   409          table.columns .left-text-pad,
   410          table.columns .text-pad-left,
   411          table.column .left-text-pad,
   412          table.column .text-pad-left {
   413              padding-left: 10px;
   414          }
   415  
   416          table.columns .right-text-pad,
   417          table.columns .text-pad-right,
   418          table.column .right-text-pad,
   419          table.column .text-pad-right {
   420              padding-right: 10px;
   421          }
   422          /* Block Grid */
   423  
   424          .block-grid {
   425              width: 100%;
   426              max-width: 580px;
   427          }
   428  
   429          .block-grid td {
   430              display: inline-block;
   431              padding: 10px;
   432          }
   433  
   434          .two-up td {
   435              width: 270px;
   436          }
   437  
   438          .three-up td {
   439              width: 173px;
   440          }
   441  
   442          .four-up td {
   443              width: 125px;
   444          }
   445  
   446          .five-up td {
   447              width: 96px;
   448          }
   449  
   450          .six-up td {
   451              width: 76px;
   452          }
   453  
   454          .seven-up td {
   455              width: 62px;
   456          }
   457  
   458          .eight-up td {
   459              width: 52px;
   460          }
   461          /* Alignment & Visibility Classes */
   462  
   463          table.center,
   464          td.center {
   465              text-align: center;
   466          }
   467  
   468          h1.center,
   469          h2.center,
   470          h3.center,
   471          h4.center,
   472          h5.center,
   473          h6.center {
   474              text-align: center;
   475          }
   476  
   477          span.center {
   478              display: block;
   479              width: 100%;
   480              text-align: center;
   481          }
   482  
   483          img.center {
   484              margin: 0 auto;
   485              float: none;
   486          }
   487  
   488          .show-for-small,
   489          .hide-for-desktop {
   490              display: none;
   491          }
   492          /* Typography */
   493  
   494          body,
   495          table.body,
   496          h1,
   497          h2,
   498          h3,
   499          h4,
   500          h5,
   501          h6,
   502          p,
   503          td {
   504              color: #222222;
   505              font-family: "Helvetica", "Arial", sans-serif;
   506              font-weight: normal;
   507              padding: 0;
   508              margin: 0;
   509              text-align: left;
   510              line-height: 1.3;
   511          }
   512  
   513          h1,
   514          h2,
   515          h3,
   516          h4,
   517          h5,
   518          h6 {
   519              word-break: normal;
   520          }
   521          /*h1 {font-size: 40px;}*/
   522  
   523          h1 {
   524              font-size: 30px;
   525          }
   526          /*h2 {font-size: 36px;}*/
   527  
   528          h2 {
   529              font-size: 26px;
   530          }
   531  
   532          h3 {
   533              font-size: 32px;
   534          }
   535  
   536          h4 {
   537              font-size: 28px;
   538          }
   539  
   540          h5 {
   541              font-size: 27px;
   542          }
   543  
   544          h6 {
   545              font-size: 20px;
   546          }
   547  
   548          body,
   549          table.body,
   550          p,
   551          td {
   552              font-size: 14px;
   553              line-height: 19px;
   554          }
   555  
   556          p.lead,
   557          p.lede,
   558          p.leed {
   559              font-size: 18px;
   560              line-height: 21px;
   561          }
   562  
   563          p {
   564              margin-bottom: 10px;
   565          }
   566  
   567          small {
   568              font-size: 10px;
   569          }
   570  
   571          a {
   572              color: #2ba6cb;
   573              text-decoration: none;
   574          }
   575  
   576          a:hover {
   577              color: #2795b6 !important;
   578          }
   579  
   580          a:active {
   581              color: #2795b6 !important;
   582          }
   583  
   584          a:visited {
   585              color: #2ba6cb !important;
   586          }
   587  
   588          h1 a,
   589          h2 a,
   590          h3 a,
   591          h4 a,
   592          h5 a,
   593          h6 a {
   594              color: #2ba6cb;
   595          }
   596  
   597          h1 a:active,
   598          h2 a:active,
   599          h3 a:active,
   600          h4 a:active,
   601          h5 a:active,
   602          h6 a:active {
   603              color: #2ba6cb !important;
   604          }
   605  
   606          h1 a:visited,
   607          h2 a:visited,
   608          h3 a:visited,
   609          h4 a:visited,
   610          h5 a:visited,
   611          h6 a:visited {
   612              color: #2ba6cb !important;
   613          }
   614          /* Panels */
   615  
   616          .panel {
   617              background: #f2f2f2;
   618              border: 1px solid #d9d9d9;
   619              padding: 10px !important;
   620          }
   621  
   622          .sub-grid table {
   623              width: 100%;
   624          }
   625  
   626          .sub-grid td.sub-columns {
   627              padding-bottom: 0;
   628          }
   629          /* Buttons */
   630  
   631          table.button,
   632          table.tiny-button,
   633          table.small-button,
   634          table.medium-button,
   635          table.large-button {
   636              width: 100%;
   637              overflow: hidden;
   638          }
   639  
   640          table.button td,
   641          table.tiny-button td,
   642          table.small-button td,
   643          table.medium-button td,
   644          table.large-button td {
   645              display: block;
   646              width: auto !important;
   647              text-align: center;
   648              background: #2ba6cb;
   649              border: 1px solid #2284a1;
   650              color: #ffffff;
   651              padding: 8px 0;
   652          }
   653  
   654          table.tiny-button td {
   655              padding: 5px 0 4px;
   656          }
   657  
   658          table.small-button td {
   659              padding: 8px 0 7px;
   660          }
   661  
   662          table.medium-button td {
   663              padding: 12px 0 10px;
   664          }
   665  
   666          table.large-button td {
   667              padding: 21px 0 18px;
   668          }
   669  
   670          table.button td a,
   671          table.tiny-button td a,
   672          table.small-button td a,
   673          table.medium-button td a,
   674          table.large-button td a {
   675              font-weight: bold;
   676              text-decoration: none;
   677              font-family: Helvetica, Arial, sans-serif;
   678              color: #ffffff;
   679              font-size: 16px;
   680          }
   681  
   682          table.tiny-button td a {
   683              font-size: 12px;
   684              font-weight: normal;
   685          }
   686  
   687          table.small-button td a {
   688              font-size: 16px;
   689          }
   690  
   691          table.medium-button td a {
   692              font-size: 20px;
   693          }
   694  
   695          table.large-button td a {
   696              font-size: 24px;
   697          }
   698  
   699          table.button:hover td,
   700          table.button:visited td,
   701          table.button:active td {
   702              background: #2795b6 !important;
   703          }
   704  
   705          table.button:hover td a,
   706          table.button:visited td a,
   707          table.button:active td a {
   708              color: #fff !important;
   709          }
   710  
   711          table.button:hover td,
   712          table.tiny-button:hover td,
   713          table.small-button:hover td,
   714          table.medium-button:hover td,
   715          table.large-button:hover td {
   716              background: #2795b6 !important;
   717          }
   718  
   719          table.button:hover td a,
   720          table.button:active td a,
   721          table.button td a:visited,
   722          table.tiny-button:hover td a,
   723          table.tiny-button:active td a,
   724          table.tiny-button td a:visited,
   725          table.small-button:hover td a,
   726          table.small-button:active td a,
   727          table.small-button td a:visited,
   728          table.medium-button:hover td a,
   729          table.medium-button:active td a,
   730          table.medium-button td a:visited,
   731          table.large-button:hover td a,
   732          table.large-button:active td a,
   733          table.large-button td a:visited {
   734              color: #ffffff !important;
   735          }
   736  
   737          table.secondary td {
   738              background: #e9e9e9;
   739              border-color: #d0d0d0;
   740              color: #555;
   741          }
   742  
   743          table.secondary td a {
   744              color: #555;
   745          }
   746  
   747          table.secondary:hover td {
   748              background: #d0d0d0 !important;
   749              color: #555;
   750          }
   751  
   752          table.secondary:hover td a,
   753          table.secondary td a:visited,
   754          table.secondary:active td a {
   755              color: #555 !important;
   756          }
   757  
   758          table.success td {
   759              background: #5da423;
   760              border-color: #457a1a;
   761          }
   762  
   763          table.success:hover td {
   764              background: #457a1a !important;
   765          }
   766  
   767          table.alert td {
   768              background: #c60f13;
   769              border-color: #970b0e;
   770          }
   771  
   772          table.alert:hover td {
   773              background: #970b0e !important;
   774          }
   775  
   776          table.radius td {
   777              -webkit-border-radius: 3px;
   778              -moz-border-radius: 3px;
   779              border-radius: 3px;
   780          }
   781  
   782          table.round td {
   783              -webkit-border-radius: 500px;
   784              -moz-border-radius: 500px;
   785              border-radius: 500px;
   786          }
   787          /* Outlook First */
   788  
   789          body.outlook p {
   790              display: inline !important;
   791          }
   792          /*  Media Queries */
   793  
   794          @media only screen and (max-width: 600px) {
   795              table[class="body"] img {
   796                  width: auto !important;
   797                  height: auto !important;
   798              }
   799              table[class="body"] center {
   800                  min-width: 0 !important;
   801              }
   802              table[class="body"] .container {
   803                  width: 95% !important;
   804              }
   805              table[class="body"] .row {
   806                  width: 100% !important;
   807                  display: block !important;
   808              }
   809              table[class="body"] .wrapper {
   810                  display: block !important;
   811                  padding-right: 0 !important;
   812              }
   813              table[class="body"] .columns,
   814              table[class="body"] .column {
   815                  table-layout: fixed !important;
   816                  float: none !important;
   817                  width: 100% !important;
   818                  padding-right: 0 !important;
   819                  padding-left: 0 !important;
   820                  display: block !important;
   821              }
   822              table[class="body"] .wrapper.first .columns,
   823              table[class="body"] .wrapper.first .column {
   824                  display: table !important;
   825              }
   826              table[class="body"] table.columns td,
   827              table[class="body"] table.column td {
   828                  width: 100% !important;
   829              }
   830              table[class="body"] .columns td.one,
   831              table[class="body"] .column td.one {
   832                  width: 8.333333% !important;
   833              }
   834              table[class="body"] .columns td.two,
   835              table[class="body"] .column td.two {
   836                  width: 16.666666% !important;
   837              }
   838              table[class="body"] .columns td.three,
   839              table[class="body"] .column td.three {
   840                  width: 25% !important;
   841              }
   842              table[class="body"] .columns td.four,
   843              table[class="body"] .column td.four {
   844                  width: 33.333333% !important;
   845              }
   846              table[class="body"] .columns td.five,
   847              table[class="body"] .column td.five {
   848                  width: 41.666666% !important;
   849              }
   850              table[class="body"] .columns td.six,
   851              table[class="body"] .column td.six {
   852                  width: 50% !important;
   853              }
   854              table[class="body"] .columns td.seven,
   855              table[class="body"] .column td.seven {
   856                  width: 58.333333% !important;
   857              }
   858              table[class="body"] .columns td.eight,
   859              table[class="body"] .column td.eight {
   860                  width: 66.666666% !important;
   861              }
   862              table[class="body"] .columns td.nine,
   863              table[class="body"] .column td.nine {
   864                  width: 75% !important;
   865              }
   866              table[class="body"] .columns td.ten,
   867              table[class="body"] .column td.ten {
   868                  width: 83.333333% !important;
   869              }
   870              table[class="body"] .columns td.eleven,
   871              table[class="body"] .column td.eleven {
   872                  width: 91.666666% !important;
   873              }
   874              table[class="body"] .columns td.twelve,
   875              table[class="body"] .column td.twelve {
   876                  width: 100% !important;
   877              }
   878              table[class="body"] td.offset-by-one,
   879              table[class="body"] td.offset-by-two,
   880              table[class="body"] td.offset-by-three,
   881              table[class="body"] td.offset-by-four,
   882              table[class="body"] td.offset-by-five,
   883              table[class="body"] td.offset-by-six,
   884              table[class="body"] td.offset-by-seven,
   885              table[class="body"] td.offset-by-eight,
   886              table[class="body"] td.offset-by-nine,
   887              table[class="body"] td.offset-by-ten,
   888              table[class="body"] td.offset-by-eleven {
   889                  padding-left: 0 !important;
   890              }
   891              table[class="body"] table.columns td.expander {
   892                  width: 1px !important;
   893              }
   894              table[class="body"] .right-text-pad,
   895              table[class="body"] .text-pad-right {
   896                  padding-left: 10px !important;
   897              }
   898              table[class="body"] .left-text-pad,
   899              table[class="body"] .text-pad-left {
   900                  padding-right: 10px !important;
   901              }
   902              table[class="body"] .hide-for-small,
   903              table[class="body"] .show-for-desktop {
   904                  display: none !important;
   905              }
   906              table[class="body"] .show-for-small,
   907              table[class="body"] .hide-for-desktop {
   908                  display: inherit !important;
   909              }
   910          }
   911      </style>
   912  
   913      <style type="text/css">
   914          table.facebook td {
   915              background: #3b5998;
   916              border-color: #2d4473;
   917          }
   918  
   919          table.facebook:hover td {
   920              background: #2d4473 !important;
   921          }
   922  
   923          table.twitter td {
   924              background: #00acee;
   925              border-color: #0087bb;
   926          }
   927  
   928          table.twitter:hover td {
   929              background: #0087bb !important;
   930          }
   931  
   932          table.google-plus td {
   933              background-color: #DB4A39;
   934              border-color: #CC0000;
   935          }
   936  
   937          table.google-plus:hover td {
   938              background: #CC0000 !important;
   939          }
   940  
   941          .template-label {
   942              color: #ffffff;
   943              font-weight: bold;
   944              font-size: 11px;
   945          }
   946  
   947          .callout .wrapper {
   948              padding-bottom: 20px;
   949          }
   950  
   951          .callout .panel {
   952              background: #ECF8FF;
   953              border-color: #b9e5ff;
   954          }
   955  
   956          .header {
   957              background: #394e63;
   958              min-height: 100px;
   959          }
   960  
   961          .footer .wrapper {
   962              background: #ebebeb;
   963          }
   964  
   965          .footer h5 {
   966              padding-bottom: 10px;
   967          }
   968  
   969          table.columns .text-pad {
   970              padding-left: 10px;
   971              padding-right: 10px;
   972          }
   973  
   974          table.columns .left-text-pad {
   975              padding-left: 10px;
   976          }
   977  
   978          table.columns .right-text-pad {
   979              padding-right: 10px;
   980          }
   981  
   982          @media only screen and (max-width: 600px) {
   983              table[class="body"] .right-text-pad {
   984                  padding-left: 10px !important;
   985              }
   986              table[class="body"] .left-text-pad {
   987                  padding-right: 10px !important;
   988              }
   989          }
   990      </style>
   991  </head>
   992  
   993  <body>
   994  <table class="body">
   995      <tr>
   996          <td class="center" align="center" valign="top">
   997              <center> [header:block]
   998                  <table class="container">
   999                      <tr>
  1000                          <td> [message:block] [callout:block] [footer:block] [privacy:block]</td>
  1001                      </tr>
  1002                  </table>
  1003              </center>
  1004          </td>
  1005      </tr>
  1006  </table>
  1007  </body>
  1008  
  1009  </html>