From aeebb1291f72e7d50a08103ec13115d54bf7d051 Mon Sep 17 00:00:00 2001 From: Thomas Kolb Date: Tue, 14 Nov 2023 23:04:25 +0100 Subject: [PATCH] web: add some CSS --- static/style.css | 60 ++++++++++++++++++++++++++++++++++++++++++++++++ views/index.tpl | 27 ++++++++++++++-------- 2 files changed, 78 insertions(+), 9 deletions(-) create mode 100644 static/style.css diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..451b976 --- /dev/null +++ b/static/style.css @@ -0,0 +1,60 @@ +body { + background-color: #eef; + color: #112; + font: sans-serif; +} + +div.form form { + border: 1px solid #118; + border-radius: 0.5em; + padding: 0.2em; + width: fit-content; + display: flex; + flex-direction: column; +} + +div.form form div { + padding: 0.2em; + display: flex; + flex-direction: row; +} + +div.form * label { + font-weight: bold; + flex: 3; +} + +div.form * input[type=text] { + flex: 1; + width: 5em; + margin-left: 1em; + text-align: right; +} + +div.form * input[type=submit] { + flex: 1; +} + +#loading { + color: green; + font-weight: bold; +} + +#downloadlink { + display: block; + width: fit-content; + background: #ddf; + padding: 0.5em; + border: 1px solid #229; + border-radius: 0.5em; + margin: 1em 0; +} + +#svgcontainer { + border: 1px solid #229; + padding: 1em; + display: block; + width: fit-content; + background: #888; + border-radius: 2em; +} diff --git a/views/index.tpl b/views/index.tpl index 99c047d..31408d5 100644 --- a/views/index.tpl +++ b/views/index.tpl @@ -6,22 +6,31 @@ QSOMap: Azimuthal-equidistant SVG map generator - +

QSOMap: Azimuthal-equidistant SVG map generator

-

Here you can generate a map in azimuthal-equidistant projections for any point on Earth. You get a map where the specified coordinate is in the center, and all other locations are projected such that locations with the same physical distance from the given coordinate are also the same distance from the center on the map.

+

Here you can generate a map in azimuthal-equidistant projection for any point on Earth. You get a map where the specified coordinate is in the center, and all other locations are projected such that locations with the same physical distance from the given coordinate are also the same distance from the center on the map.

The generated output is a Scalable Vector Graphics (SVG) image that can be edited as needed. I recommend Inkscape as an SVG editor.

Please note: It may take a few seconds to generate the map. Please give it some time. The map will appear below the form along with a download link. If you have JavaScript disabled, the map will replace this page.

-
- -
- -
- -
+
+
+
+ + +
+
+ + +
+
+ +
+
+
+

This map generator was build by Thomas DL5TKL.