amateurfunk/qsomap
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

web: add some CSS

Browse source
This commit is contained in:
Thomas Kolb 2023-11-14 23:04:25 +01:00
parent a071db561d
commit aeebb1291f
2 changed files with 78 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
static/style.css Normal file
View file

@ -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;
}

27
views/index.tpl
View file

@ -6,22 +6,31 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QSOMap: Azimuthal-equidistant SVG map generator</title>
<!--link rel="stylesheet" href="https://www.tkolb.de/main.css"-->
<link rel="stylesheet" href="static/style.css">
<script defer src="static/map.js" type="text/javascript"></script>
</head>
<body>
<h1>QSOMap: Azimuthal-equidistant SVG map generator</h1>
<p>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.</p>
<p>Here you can generate a map in <a href="https://en.wikipedia.org/wiki/Azimuthal_equidistant_projection">azimuthal-equidistant projection</a> 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.</p>
<p>The generated output is a Scalable Vector Graphics (SVG) image that can be edited as needed. I recommend <a href="https://inkscape.org">Inkscape</a> as an SVG editor.</p>
<p><strong>Please note:</strong> 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.</p>
<form action="/render/map.svg" onsubmit="update_map(event);">
<label for="lat">Map center latitude:</label>
<input type="text" id="lat" name="lat" value="49.585"><br>
<label for="lon">Map center longitude:</label>
<input type="text" id="lon" name="lon" value="11.015"><br>
<input type="submit" value="Generate!">
</form>
<div class="form">
<form action="/render/map.svg" onsubmit="update_map(event);">
<div>
<label for="lat">Map center latitude:</label>
<input type="text" id="lat" name="lat" value="49.585">
</div>
<div>
<label for="lon">Map center longitude:</label>
<input type="text" id="lon" name="lon" value="11.015">
</div>
<div>
<input type="submit" value="Generate!">
</div>
</form>
</div>
<div id="downloadlink"></div>
<div id="svgcontainer"></div>
<p>This map generator was build by Thomas DL5TKL.</p>
</body>
</html>