+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
-<link rel="stylesheet" type="text/css" href="olly.css">
-<title>Circle Calculator</title>
-<style>
-form div + div {
- margin-top: 1em;
-}
-
-label {
- /* To make sure that all labels have the same size and are properly aligned */
- display: inline-block;
- width: 90px;
- text-align: right;
-}
-
-input, textarea {
- /* To make sure that all text fields have the same font settings
- By default, textareas have a monospace font */
- font: 1em sans-serif;
-
- /* To give the same size to all text fields */
- width: 300px;
- box-sizing: border-box;
-
- /* To harmonize the look & feel of text field border */
- border: 1px solid #999;
-}
-
-input:focus, textarea:focus {
- /* To give a little highlight on active elements */
- border-color: #000;
-}
-
-textarea {
- /* To properly align multiline text fields with their labels */
- vertical-align: top;
-
- /* To give enough room to type some text */
- height: 5em;
-}
-
-.button {
- /* To position the buttons to the same position of the text fields */
- padding-left: 90px; /* same size as the label elements */
-}
-
-button {
- /* This extra margin represent roughly the same space as the space
- between the labels and their text fields */
- margin-left: .5em;
-}
-</style>
-</head>
-<body class="olly">
-<h1>Circle Calculator</h1>
-<img src="circle.svg">
-<br>Please type the number, optionally followed by the unit (there must be a space between the number and the unit).
-<br> <form action="/calculatebutton.html" method="post">
- <div>
- <label for="radius">Radius:</label>
- <input type="text" id="radius" name="radius">
- </div>
- <div class="button">
- <button type="submit">Calculate</button>
- </div>
-</form>
-</body>
-</html>
-
--- /dev/null
+return async env => {
+ let _out = []
+ _out.push('<!DOCTYPE html>')
+ html {
+ head {
+ link(rel="stylesheet" type="text/css" href="olly.css") {}
+ title {
+ 'Circle Calculator'
+ }
+ style {
+ form div + div {
+ margin-top: 1em
+ }
+ label {
+ display: inline-block;
+ width: 90px;
+ text-align: right
+ }
+ input,
+ textarea {
+ font: 1em sans-serif;
+ width: 300px;
+ box-sizing: border-box;
+ border: 1px solid #999
+ }
+ input:focus,
+ textarea:focus {
+ border-color: #000
+ }
+ textarea {
+ vertical-align: top;
+ height: 5em
+ }
+ .button {
+ padding-left: 90px
+ }
+ button {
+ margin-left: .5em
+ }
+ }
+ }
+ body.olly {
+ h1 {
+ 'Circle Calculator'
+ }
+ img(src="circle.svg") {}
+ br {}
+ 'Please type the number, optionally followed by the unit (there must be a space between the number and the unit).'
+ br {}
+ _out.push(' ')
+ form(action="/calculatebutton.html" method="post") {
+ div {
+ label(for="radius") {
+ 'Radius:'
+ }
+ ' '
+ input#radius(type="text" name="radius") {}
+ }
+ div.button {
+ button(type="submit") {
+ 'Calculate'
+ }
+ }
+ }
+ }
+ }
+ env.site.serve(env, 200, Buffer.from(_out.join('')), 'circle.html.jst')
+}
+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
-<link rel="stylesheet" type="text/css" href="olly.css">
-<title>Olly's Website</title>
-</head>
-<body class="olly">
-<h1>Olly's Website</h1>
-<a href="/circle.html">Go to Circle Calculator</a>
-<br><a href="/trapezium.html">Go to Trapezium Area Calculator</a>
-</body>
-</html>
-
--- /dev/null
+return async env => {
+ let _out = []
+ _out.push('<!DOCTYPE html>')
+ html {
+ head {
+ link(rel="stylesheet" type="text/css" href="olly.css") {}
+ title {
+ 'Olly\'s Website'
+ }
+ }
+ body.olly {
+ h1 {
+ 'Olly\'s Website'
+ }
+ a(href="/circle.html") {
+ 'Go to Circle Calculator'
+ }
+ br {}
+ a(href="/trapezium.html") {
+ 'Go to Trapezium Area Calculator'
+ }
+ }
+ }
+ env.site.serve(env, 200, Buffer.from(_out.join('')), 'index.html.jst')
+}
+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
-<link rel="stylesheet" type="text/css" href="olly.css">
-<title>Trapezium Area Calculator</title>
-<style>
-form div + div {
- margin-top: 1em;
-}
-
-label {
- /* To make sure that all labels have the same size and are properly aligned */
- display: inline-block;
- width: 90px;
- text-align: right;
-}
-
-input, textarea {
- /* To make sure that all text fields have the same font settings
- By default, textareas have a monospace font */
- font: 1em sans-serif;
-
- /* To give the same size to all text fields */
- width: 300px;
- box-sizing: border-box;
-
- /* To harmonize the look & feel of text field border */
- border: 1px solid #999;
-}
-
-input:focus, textarea:focus {
- /* To give a little highlight on active elements */
- border-color: #000;
-}
-
-textarea {
- /* To properly align multiline text fields with their labels */
- vertical-align: top;
-
- /* To give enough room to type some text */
- height: 5em;
-}
-
-.button {
- /* To position the buttons to the same position of the text fields */
- padding-left: 90px; /* same size as the label elements */
-}
-
-button {
- /* This extra margin represent roughly the same space as the space
- between the labels and their text fields */
- margin-left: .5em;
-}
-</style>
-</head>
-<body class="olly">
-<h1>Trapezium Area Calculator</h1>
-<img src="drawing.svg">
-<form action="/calculate_button_trapezium.html" method="post">
- <div>
- <label for="height">Height:</label>
- <input type="text" id="height" name="height">
- units
- </div>
- <div>
- <label for="a_length">A:</label>
- <input type="text" id="a_length" name="a_length">
- units
- </div>
- <div>
- <label for="b_length">B:</label>
- <input type="text" id="b_length" name="b_length">
- units
- </div>
- <div class="button">
- <button type="submit">Calculate</button>
- </div>
-</form>
-</body>
-</html>
-
--- /dev/null
+return async env => {
+ let _out = []
+ _out.push('<!DOCTYPE html>')
+ html {
+ head {
+ link(rel="stylesheet" type="text/css" href="olly.css") {}
+ title {
+ 'Trapezium Area Calculator'
+ }
+ style {
+ form div + div {
+ margin-top: 1em
+ }
+ label {
+ display: inline-block;
+ width: 90px;
+ text-align: right
+ }
+ input,
+ textarea {
+ font: 1em sans-serif;
+ width: 300px;
+ box-sizing: border-box;
+ border: 1px solid #999
+ }
+ input:focus,
+ textarea:focus {
+ border-color: #000
+ }
+ textarea {
+ vertical-align: top;
+ height: 5em
+ }
+ .button {
+ padding-left: 90px
+ }
+ button {
+ margin-left: .5em
+ }
+ }
+ }
+ body.olly {
+ h1 {
+ 'Trapezium Area Calculator'
+ }
+ img(src="drawing.svg") {}
+ form(action="/calculate_button_trapezium.html" method="post") {
+ div {
+ label(for="height") {
+ 'Height:'
+ }
+ ' '
+ input#height(type="text" name="height") {}
+ ' units'
+ }
+ div {
+ label(for="a_length") {
+ 'A:'
+ }
+ ' '
+ input#a_length(type="text" name="a_length") {}
+ ' units'
+ }
+ div {
+ label(for="b_length") {
+ 'B:'
+ }
+ ' '
+ input#b_length(type="text" name="b_length") {}
+ ' units'
+ }
+ div.button {
+ button(type="submit") {
+ 'Calculate'
+ }
+ }
+ }
+ }
+ }
+ env.site.serve(env, 200, Buffer.from(_out.join('')), 'trapezium.html.jst')
+}
public / olly_site.git / commitdiff