circle.html.jst

   1 return async env => {
   2   let _out = []
   3   _out.push('<!DOCTYPE html>')
   4   html {
   5     head {
   6       link(rel="stylesheet" type="text/css" href="olly.css") {}
   7       title {
   8         'Circle Calculator'
   9       }
  10       style {
  11         form div + div {
  12           margin-top: 1em
  13         }
  14         label {
  15           display: inline-block;
  16           width: 90px;
  17           text-align: right
  18         }
  19         input,
  20         textarea {
  21           font: 1em sans-serif;
  22           width: 300px;
  23           box-sizing: border-box;
  24           border: 1px solid #999
  25         }
  26         input:focus,
  27         textarea:focus {
  28           border-color: #000
  29         }
  30         textarea {
  31           vertical-align: top;
  32           height: 5em
  33         }
  34         .button {
  35           padding-left: 90px
  36         }
  37         button {
  38           margin-left: .5em
  39         }
  40       }
  41     }
  42     body.olly {
  43       h1 {
  44         'Circle Calculator'
  45       }
  46       img(src="circle.svg") {}
  47       br {}
  48       'Please type the number, optionally followed by the unit (there must be a space between the number and the unit).'
  49       br {}
  50       _out.push('&nbsp;')
  51       form(action="/calculatebutton.html" method="post") {
  52         div {
  53           label(for="radius") {
  54             'Radius:'
  55           }
  56           ' '
  57           input#radius(type="text" name="radius") {}
  58         }
  59         div.button {
  60           button(type="submit") {
  61             'Calculate'
  62           }
  63         }
  64       }
  65     }
  66   }
  67   env.site.serve(env, 200, Buffer.from(_out.join('')), 'circle.html.jst')
  68 }