Created
September 12, 2022 13:36
-
-
Save asleepace/abbb83b7524a92f3fa271e2b0f651648 to your computer and use it in GitHub Desktop.
Soladex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Soladex Corp.</title> | |
| <script> | |
| function getAddress(latitude, longitude) { | |
| return new Promise(function(resolve, reject) { | |
| var request = new XMLHttpRequest(); | |
| var method = 'GET'; | |
| var url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + latitude + ',' + longitude + '&sensor=true'; | |
| var async = true; | |
| request.open(method, url, async); | |
| request.onreadystatechange = function() { | |
| if (request.readyState == 4) { | |
| if (request.status == 200) { | |
| var data = JSON.parse(request.responseText); | |
| console.log(data) | |
| var address = data.results[0]; | |
| resolve(address); | |
| } else { | |
| reject(request.status); | |
| } | |
| } | |
| }; | |
| request.send(); | |
| }); | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <div class='header'> | |
| <h1>Soladex Corp.</h1> | |
| <h2>Advanced Solar Technology | |
| </div> | |
| <div class='container'> | |
| <div class="display"> | |
| <h1>Solar Power Index</h1> | |
| <h2 class="address"> | |
| </div> | |
| <h3 style="text-align:center;" id="location"> | |
| loading current location ... | |
| </h3> | |
| <script> | |
| var x = document.getElementById("location"); | |
| navigator.geolocation.getCurrentPosition(({ | |
| coords | |
| }) => { | |
| const { | |
| latitude, | |
| longitude | |
| } = coords; | |
| x.innerHTML = `( ${latitude}, ${latitude} )` | |
| getAddress(latitude, longitude) | |
| .then(console.log) | |
| .then(console.error) | |
| }); | |
| </script> | |
| </div> | |
| </div> | |
| <div class="widgets"> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import * as React from "https://cdn.skypack.dev/[email protected]"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| overflow: hidden; | |
| font-family: "Montserrat", sans-serif; | |
| width: 100%; | |
| height: 100%; | |
| flex-direction: column; | |
| display: flex; | |
| flex: 1; | |
| } | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| overflow: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| color: #202124; | |
| margin: 0; | |
| text-size-adjust: 100%; | |
| padding: 0px; | |
| flex-direction: column; | |
| flex: 1; | |
| } | |
| h1 { | |
| font-size: 50px; | |
| line-height: 60px; | |
| margin: 0px; | |
| } | |
| h2 { | |
| font-size: 22px; | |
| line-height: 34px; | |
| font-weight: 320; | |
| color: rgba(0, 0, 0, 0.8); | |
| margin: 0px; | |
| } | |
| h3 { | |
| font-size: 14px; | |
| line-height: 24px; | |
| font-weight: 500; | |
| color: rgba(0, 0, 0, 0.7); | |
| margin: 0px; | |
| } | |
| .container { | |
| padding: 16px; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| display: flex; | |
| height: 100%; | |
| flex: 1; | |
| } | |
| .widgets { | |
| background-color: "red"; | |
| display: flex; | |
| margin: 16px; | |
| } | |
| .header { | |
| box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; | |
| padding: 32px; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| } | |
| .display: { | |
| padding: 16px; | |
| text-align: center; | |
| flex-direction: center; | |
| align-items: center; | |
| justify-content: center; | |
| display: flex; | |
| flex: 1; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment