diff --git a/css/stylesheet.css b/css/stylesheet.css index 7122ff1..faba95a 100644 --- a/css/stylesheet.css +++ b/css/stylesheet.css @@ -1,58 +1,44 @@ -body { - background: #eee; - font-family: Roboto, "Helvetica Neue", sans-serif; +body { + padding: 2%; + background-size: 100%; + background-color: #282828; + background: url(../images/illusion.png); /*This pattern is downloaded from www.subtlepatterns.com*/ + font-family: 'Lato', sans-serif; + color: #e8e8e8; + text-align: center; } -h2 { - color: #7c795d; - font-family: 'Source Sans Pro', sans-serif; - font-size: 32px; - font-weight: 400; - line-height: 40px; - margin: 0 0 24px; - text-align: center; - margin-top: 10%; +.label { + font-weight: 100; + font-size: 18px; } .card { + background-color: rgba(100, 100, 100, 0.2); width: 60%; + margin-top: 3%; margin-left: 20%; margin-right: 20%; - background: #FFF; - text-align: center; - margin-top: 2%; - box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); - transition: all 0.3s cubic-bezier(.25,.8,.25,1); - padding: 20px 0 20px 0; -} - -.label { - font-size: 18px; -} - -#button { - width: 40%; - padding: 10px; - cursor: pointer; - border: none; - background-color: #4285f4; - color: #fff; - font-size: 1.6vw; + padding: 20px 0; + -webkit-box-shadow: 0px 0px 3px 1px rgba(40,40,40,1); + -moz-box-shadow: 0px 0px 3px 1px rgba(40,40,40,1); + box-shadow: 0px 0px 3px 1px rgba(40,40,40,1); } #output { - font-size: 15px; - border-top: 1px solid #4285f4; - padding-top:5px; + border-radius: 0; + border-top: 1px solid #e8e8e8; + margin-top: 1%; + padding-top:2%; margin-right:5%; margin-left:5%; width: 90%; } -#output, #out { - display: none; +#out label { + font-weight: 100; } #out * { - margin-top: 10px; + margin-top: 3%; } diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..eb7196d Binary files /dev/null and b/favicon.ico differ diff --git a/images/illusion.png b/images/illusion.png new file mode 100644 index 0000000..665c7c7 Binary files /dev/null and b/images/illusion.png differ diff --git a/index.html b/index.html index 9b9e62d..3710ea6 100644 --- a/index.html +++ b/index.html @@ -1,32 +1,39 @@ - + - - - - - - Geolocator for FOSSASIA + Geolocator for FOSSASIA + + + + + + + + + + -

Geo locator to faciliate easy integration of location data

+

Geolocator to facilitate easy integration of location data

-


- -

+

Click the below button to get Geolocation



+

-
+
- Mentors file [If you are a mentor]
+ Mentors file [If you are a mentor]
-
Created with ♡ for FOSSASIA
- - +
+ Created with ♡ for FOSSASIA +
+ + + diff --git a/js/main.js b/js/main.js index 3720e3f..636db32 100644 --- a/js/main.js +++ b/js/main.js @@ -3,7 +3,7 @@ let out = document.getElementById("out") const geolocation = () => { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(rit, fileit); - document.getElementById("button").value = "Get my geolocation again"; + document.getElementById("button").value = "Get my geolocation again 🔄"; document.getElementById("button").onclick = "window.location.reload();"; // reloads and executes the geolocation(); } else { @@ -13,8 +13,8 @@ const geolocation = () => { } const rit = (position) => { - let mylocation = `lat:${position.coords.latitude}
`; - mylocation += `lng:${position.coords.longitude}

`; + let mylocation = `lat: ${position.coords.latitude}
`; + mylocation += `lng: ${position.coords.longitude}

`; output.innerHTML = mylocation; my_preview = `https://www.google.com/maps/?q=${position.coords.latitude},${position.coords.longitude}`; preview.innerHTML = `