Skip to content

Improved the look of the website #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jakubpawlina wants to merge 13 commits into
base: master
Choose a base branch
from
Open

Improved the look of the website #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
d4c514c
Added links to repositories and ordered in points
Dec 1, 2018
60b10e6
Update README.md
Dec 3, 2018
de1eb16
Added image for README.md
Dec 4, 2018
7c15886
Image added from folder in repo and point deleted
Dec 4, 2018
71277c4
Changed the button's font size
Dec 10, 2018
fac8f82
Added favicon
Dec 12, 2018
da0f0d3
Improved website look
Dec 12, 2018
88e726d
Added background image
Dec 12, 2018
3fda1fd
Improved website look
Dec 12, 2018
191e668
Improved website look
Dec 12, 2018
5434471
Merge pull request #1 from jakubpawlina/new-look-1
Dec 12, 2018
26f6beb
Merge branch 'master' into master
Dec 12, 2018
fb1ccd5
Incremented font size in label
Dec 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 24 additions & 38 deletions css/stylesheet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%;
}
Binary file added favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file added images/illusion.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 23 additions & 16 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,39 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/stylesheet.css" rel="stylesheet">
<link href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" rel="stylesheet"/>
<title>Geolocator for FOSSASIA</title>
<title> Geolocator for FOSSASIA </title>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/stylesheet.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<h2>Geo locator to faciliate easy integration of location data</h2>
<h1> Geolocator to facilitate easy integration of location data </h1>
<div id="main-div" class="card">
<label class="label">Click the below button to get Geolocation</label><br><br><br>
<input id="button" type="button" value="Get my geolocation" onclick="geolocation()">
<br><br>
<h4> Click the below button to get Geolocation </h4> <br /> <br />
<input id="button" class="btn btn-primary btn-lg active" type="button" value="Get my geolocation 🌍" data-toggle="tooltip" title="Get geolocation 🌐" onclick="geolocation()"> <br /><br />
<!-- The below div will hold the data -->
<label id="output" class="label"></label>
<label id="preview" class="label"></label>
<div id="osm-map"></div>
<div id="out">
<label>Copy and paste the lat and lng values to the:</label><br>
<label> Copy and paste the lat and lng values to the: </label> <br />
<!-- Start ignoring LineLengthBear, HTMLLintBear -->
<a href="https://github.com/fossasia/gci18.fossasia.org/edit/master/_data/mentors.yml">Mentors file [If you are a mentor]</a><br>
<a href="https://github.com/fossasia/gci18.fossasia.org/edit/master/_data/mentors.yml"> Mentors file [If you are a mentor] </a> <br />
<!-- stop ignoring -->
</div>
</div>
<div class="card" id="info">Created with ♡ for FOSSASIA</div>
<script src="js/main.js"></script>
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<div class="card" id="info">
Created with ♡ for <a href="https://fossasia.org/" data-toggle="tooltip" title="Visit FOSSASIA website"> FOSSASIA </a>
</div>
<script src="js/main.js"> </script>
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"> </script>
<script> $(function () {$('[data-toggle="tooltip"]').tooltip()}) </script>
</body>
</html>
8 changes: 4 additions & 4 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -13,8 +13,8 @@ const geolocation = () => {
}

const rit = (position) => {
let mylocation = `lat:${position.coords.latitude}<br>`;
mylocation += `lng:${position.coords.longitude}<br><br>`;
let mylocation = `lat: ${position.coords.latitude}<br>`;
mylocation += `lng: ${position.coords.longitude}<br><br>`;
output.innerHTML = mylocation;
my_preview = `https://www.google.com/maps/?q=${position.coords.latitude},${position.coords.longitude}`;
preview.innerHTML = `<a target='_blank' href='${my_preview}>Google Maps!</a><br><br>`;
Expand Down Expand Up @@ -47,4 +47,4 @@ const fileit = (error) => {
output.innerHTML = "Unknown Error please try again";
break;
}
}
}