diff --git a/src/css/legacy.css b/src/css/legacy.css new file mode 100644 index 0000000..787c2f3 --- /dev/null +++ b/src/css/legacy.css @@ -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; +} diff --git a/src/services/dms-deg/index.html b/src/services/dms-deg/index.html new file mode 100644 index 0000000..049a806 --- /dev/null +++ b/src/services/dms-deg/index.html @@ -0,0 +1,91 @@ + + + + + + + DMS - Decimal Degree Converter + + + + + + +
+
+

Degrees Minutes Seconds - Decimal Degree Converter

+ + + + + + + + +
+ Latitude + + ° + ' + '' + +
+ Longitude + + ° + ' + '' + +
+ +

Output

+
+ + content_copy +
+ +
+
+ + + diff --git a/src/services/dms-deg/index.js b/src/services/dms-deg/index.js new file mode 100644 index 0000000..add78ca --- /dev/null +++ b/src/services/dms-deg/index.js @@ -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'; +} \ No newline at end of file