<html>
<head>
<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>
<h1>Circle Calculator</h1>
-Please type the number, optionally followed by the unit (there must be a space between the number and the unit).
-<form action="/calculatebutton.html" method="post">
+<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">
--- /dev/null
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="380"
+ height="380"
+ viewBox="0 0 100.54163 100.54168"
+ version="1.1"
+ id="svg8"
+ sodipodi:docname="circle.svg"
+ inkscape:version="0.92.3 (2405546, 2018-03-11)">
+ <defs
+ id="defs2" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="0.90028971"
+ inkscape:cx="314.97144"
+ inkscape:cy="419.10527"
+ inkscape:document-units="mm"
+ inkscape:current-layer="layer1"
+ showgrid="true"
+ inkscape:window-width="1366"
+ inkscape:window-height="713"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ units="px">
+ <inkscape:grid
+ spacingx="2.6458333"
+ spacingy="2.6458333"
+ type="xygrid"
+ id="grid10" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata5">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(0,-196.4576)">
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+ x="39.6875"
+ y="170"
+ id="text4530"><tspan
+ sodipodi:role="line"
+ id="tspan4528"
+ x="39.6875"
+ y="179.36377"
+ style="stroke-width:0.26458332" /></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+ x="39.6875"
+ y="175.29167"
+ id="text4534"><tspan
+ sodipodi:role="line"
+ id="tspan4532"
+ x="39.6875"
+ y="184.65544"
+ style="stroke-width:0.26458332" /></text>
+ <path
+ style="fill:none;stroke:#000000;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:0.79374995, 0.26458332;stroke-dashoffset:0;stroke-opacity:1"
+ d="M 26.458333,164.70833 Z"
+ id="path4542"
+ inkscape:connector-curvature="0" />
+ <path
+ style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92376679"
+ d="m 52.618523,204.69397 a 39.6875,39.6875 0 0 0 -39.6875,39.6875 39.6875,39.6875 0 0 0 39.6875,39.6875 39.6875,39.6875 0 0 0 39.687499,-39.6875 39.6875,39.6875 0 0 0 -39.687499,-39.6875 z"
+ id="path4632"
+ inkscape:connector-curvature="0" />
+ <path
+ style="fill:none;stroke:#000000;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2.11666654, 1.05833327;stroke-dashoffset:0;stroke-opacity:1"
+ d="m 52.916666,244.08333 h 39.6875"
+ id="path4634"
+ inkscape:connector-curvature="0" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+ x="65.849388"
+ y="241.10954"
+ id="text4644"><tspan
+ sodipodi:role="line"
+ id="tspan4642"
+ x="65.849388"
+ y="241.10954"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.23333311px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#000000;stroke-width:0.26458332">Radius</tspan></text>
+ </g>
+</svg>
sodipodi:role="line"
id="tspan4552"
x="15.874999"
- y="281.125"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.88055563px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26458332">height</tspan></text>
+ y="290.48877"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.88055563px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26458332" /></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="37.041668"
y="291.70834"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.23333311px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26458332">b</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+ x="18.520834"
+ y="281.125"
+ id="text4603"><tspan
+ sodipodi:role="line"
+ id="tspan4601"
+ x="18.520834"
+ y="281.125"
+ style="stroke-width:0.26458332;-inkscape-font-specification:'sans-serif, Normal';font-family:sans-serif;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:4.23333333px;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal">height</tspan></text>
</g>
</svg>
<html>
<head>
<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>
<h1>Trapezium Area Calculator</h1>
public / olly_site.git / commitdiff
