[Services] Update old service
This commit is contained in:
206
src/css/legacy.css
Normal file
206
src/css/legacy.css
Normal file
@@ -0,0 +1,206 @@
|
|||||||
|
/*
|
||||||
|
*
|
||||||
|
* janishutz.com - mainstyle.css
|
||||||
|
*
|
||||||
|
*
|
||||||
|
* Created 2023 by Janis Hutz
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
Set size of html and body to full width
|
||||||
|
*/
|
||||||
|
html {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: calc(14pt + 0.395vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: rgb(105, 144, 189);
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Styling for links and buttons
|
||||||
|
*/
|
||||||
|
.textlink {
|
||||||
|
font-size: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
transition: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textlink:hover {
|
||||||
|
color: darkblue;
|
||||||
|
font-size: 115%;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 20px;
|
||||||
|
color: white;
|
||||||
|
background-color:rgba(0, 40, 131, 1);
|
||||||
|
border-radius: 25px;
|
||||||
|
transition: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: darkblue;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.references {
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuOpen {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Main page content
|
||||||
|
*/
|
||||||
|
|
||||||
|
.content-wrapper {
|
||||||
|
width: 100vw;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
font-size: 1rem;
|
||||||
|
width: 70%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 5%;
|
||||||
|
margin-bottom: 7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-title {
|
||||||
|
font-size: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-title-small {
|
||||||
|
font-size: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pullquote-lines {
|
||||||
|
border-color: black;
|
||||||
|
margin-bottom: 2%;
|
||||||
|
margin-top: 2%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quotes-text {
|
||||||
|
font-size: 150%;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quotes-author {
|
||||||
|
text-align: right;
|
||||||
|
font-style: italic;
|
||||||
|
width: 80%;
|
||||||
|
margin-right: auto;
|
||||||
|
font-weight: lighter;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Bottom container styling
|
||||||
|
*/
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.element {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-logo {
|
||||||
|
margin-top: 12vh;
|
||||||
|
width: 80vw;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 550px) and (max-width: 998px) {
|
||||||
|
.project-logo {
|
||||||
|
margin-top: 10vh;
|
||||||
|
width: 50vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 999px) {
|
||||||
|
/*
|
||||||
|
Align content side by side
|
||||||
|
*/
|
||||||
|
.sidebyside {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
gap: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.element {
|
||||||
|
width: 47%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemsInline {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
gap: 5%;
|
||||||
|
margin-bottom: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-logo {
|
||||||
|
margin-top: 0;
|
||||||
|
width: auto;
|
||||||
|
height: 40vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
91
src/services/dms-deg/index.html
Normal file
91
src/services/dms-deg/index.html
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>DMS - Decimal Degree Converter</title>
|
||||||
|
<link rel="stylesheet" href="/css/legacy.css">
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
||||||
|
<style>
|
||||||
|
.converter-input {
|
||||||
|
width: 4rem;
|
||||||
|
padding: 7.5px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: none;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings:
|
||||||
|
'FILL' 0,
|
||||||
|
'wght' 400,
|
||||||
|
'GRAD' 0,
|
||||||
|
'opsz' 24
|
||||||
|
}
|
||||||
|
|
||||||
|
#out {
|
||||||
|
width: 30%;
|
||||||
|
padding: 7.5px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-icon {
|
||||||
|
margin-left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: white;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="content-wrapper">
|
||||||
|
<div class="content">
|
||||||
|
<h1>Degrees Minutes Seconds - Decimal Degree Converter</h1>
|
||||||
|
<button onclick="clearApp()" class="button" style="margin-bottom: 5px;">Clear</button>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Latitude
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input type="number" step="0.1" id="deg-lat" class="converter-input">°
|
||||||
|
<input type="number" step="0.1" id="min-lat" class="converter-input">'
|
||||||
|
<input type="number" step="0.1" id="sec-lat" class="converter-input">''
|
||||||
|
<select id="lat" class="converter-input">
|
||||||
|
<option value="N">N</option>
|
||||||
|
<option value="S">S</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<td>
|
||||||
|
Longitude
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input type="number" step="0.1" id="deg-long" class="converter-input">°
|
||||||
|
<input type="number" step="0.1" id="min-long" class="converter-input">'
|
||||||
|
<input type="number" step="0.1" id="sec-long" class="converter-input">''
|
||||||
|
<select id="long" class="converter-input">
|
||||||
|
<option value="W">W</option>
|
||||||
|
<option value="E">E</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</table>
|
||||||
|
<button onclick="convertDMSDecimal()" class="button">Convert!</button>
|
||||||
|
<h3>Output</h3>
|
||||||
|
<div style="width: 100%; display: flex; justify-content: center; align-items: center;">
|
||||||
|
<input type="text" id="out"></input>
|
||||||
|
<span class="material-symbols-outlined copy-icon" onclick="copy()"
|
||||||
|
title="copy output to clipboard">content_copy</span>
|
||||||
|
</div>
|
||||||
|
<script src="index.js"></script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
47
src/services/dms-deg/index.js
Normal file
47
src/services/dms-deg/index.js
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
const degLat = document.getElementById( 'deg-lat' );
|
||||||
|
const minLat = document.getElementById( 'min-lat' );
|
||||||
|
const secLat = document.getElementById( 'sec-lat' );
|
||||||
|
const latitude = document.getElementById( 'lat' );
|
||||||
|
const degLong = document.getElementById( 'deg-long' );
|
||||||
|
const minLong = document.getElementById( 'min-long' );
|
||||||
|
const secLong = document.getElementById( 'sec-long' );
|
||||||
|
const longitude = document.getElementById( 'long' );
|
||||||
|
|
||||||
|
const output = document.getElementById( 'out' );
|
||||||
|
|
||||||
|
|
||||||
|
var convertDMSDecimal = () => {
|
||||||
|
let long = 0;
|
||||||
|
let lat = 0;
|
||||||
|
if ( !isNaN( degLat.value ) && !isNaN( minLat.value ) && !isNaN( secLat.value ) && !isNaN( degLong.value ) && !isNaN( minLong.value ) && !isNaN( secLong.value ) ) {
|
||||||
|
try {
|
||||||
|
// calculate latitude
|
||||||
|
lat = Math.round( ( parseInt( degLat.value ) + parseInt( minLat.value ) / 60 + parseFloat( secLat.value ) / 6000 ) * 100000 ) / 100000;
|
||||||
|
|
||||||
|
// calculate longitude
|
||||||
|
long = Math.round( ( parseInt( degLong.value ) + parseInt( minLong.value ) / 60 + parseFloat( secLong.value ) / 6000 ) * 100000 ) / 100000;
|
||||||
|
} catch ( err ) {
|
||||||
|
console.error( err );
|
||||||
|
alert( 'An error occurred whilst calculating. Please ensure that degrees & minutes are entered as whole numbers' );
|
||||||
|
}
|
||||||
|
output.value = String( lat ) + latitude.value + ' ' + String( long ) + longitude.value;
|
||||||
|
} else {
|
||||||
|
alert( 'Invalid input. Please ensure that all input fields only contain numbers!' );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var copy = () => {
|
||||||
|
navigator.clipboard.writeText( output.value );
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var clearApp = () => {
|
||||||
|
degLat.value = '';
|
||||||
|
minLat.value = '';
|
||||||
|
secLat.value = '';
|
||||||
|
degLong.value = '';
|
||||||
|
minLong.value = '';
|
||||||
|
secLong.value = '';
|
||||||
|
latitude.value = 'N';
|
||||||
|
longitude.value = 'W';
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user