Ryann10/index.html

## index.html
<!DOCTYPE html>
<html>

<head>

<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript." />
<meta name="author" content="//samdutton.com">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
<meta itemprop="image" content="/images/icons/icon192.png">
<meta name="mobile-web-app-capable" content="yes">
<meta id="theme-color" name="theme-color" content="#fff">

<base target="_blank">

<title>Pokemon KU</title>

<link rel="stylesheet" href="https://rawgit.com/Ryann10/8d871c33ac0d73c05845c8c73787ec9f/raw/main.css" />

  <style>
  div.select {
    margin: 0 0 1em 0;
  }
  </style>

</head>

<body>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<div class="container">
  <video muted autoplay></video>

    <div class="img-pokemon"></div>
    <div id="btn-ball" class="btn-ball"></div>
</div>
  <script>
    var videoElement = document.querySelector('video');
var backSourceId;

var engineeringLatitude = 37.584596;
var engineeringLongitude = 127.026551;
var engineeringLatitude = 37.587698;
var engineeringLongitude = 127.026980;
var libralLatitude = 37.587740;
var libralLongitude = 127.031282;
var koreaLimitKm = 0.5;

var yonseiLatitude = 37.562415;
var yonseiLongitude = 126.941025;
var yonseiLimitKm = 1;

var x = document.getElementById("demo");
var btnBall = document.getElementById("btn-ball");
btnBall.style.display = 'none';

navigator.getUserMedia = navigator.getUserMedia ||
  navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

function gotSources(sourceInfos) {
  for (var i = sourceInfos.length - 1; i >= 0; --i) {
    var sourceInfo = sourceInfos[i];

    if (sourceInfo.kind === 'video') {
      if (sourceInfo.label.includes("back")) {
        backSourceId = sourceInfo.id;
        start();
      }

    }
  }
}

if (typeof MediaStreamTrack === 'undefined' ||
  typeof MediaStreamTrack.getSources === 'undefined') {
  alert('This browser does not support MediaStreamTrack.\n\nTry Chrome.');
} else {
  MediaStreamTrack.getSources(gotSources);
}

function successCallback(stream) {
  window.stream = stream; // make stream available to console
  videoElement.src = window.URL.createObjectURL(stream);
  videoElement.play();
  console.log("video url" + videoElement.src);
}

function errorCallback(error) {
  console.log('navigator.getUserMedia error: ', error);
}

function start() {
  if (window.stream) {
    videoElement.src = null;
    window.stream.getVideoTracks()[0].stop();
  }

  var videoSource = backSourceId;

  var constraints = {
    video: {
      optional: [{
        sourceId: videoSource
      }]
    }
  };
  navigator.getUserMedia(constraints, successCallback, errorCallback);
}

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);

    navigator.geolocation.getCurrentPosition(
      function(position) {
        alert("Lat: " + position.coords.latitude + "\nLon: " + position.coords.longitude);
      },
      function(error) {
        alert(error.message);
      }, {
        enableHighAccuracy: true,
        timeout: 5000
      }
    );
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;

  alert(calcCrow(position.coords.latitude, position.coords.longitude, engineeringLatitude, engineeringLongitude).toFixed(1));
}

//This function takes in latitude and longitude of two location and returns the distance between them as the crow flies (in km)
function calcCrow(lat1, lon1, lat2, lon2) {
  var R = 6371; // km
  var dLat = toRad(lat2 - lat1);
  var dLon = toRad(lon2 - lon1);
  var lat1 = toRad(lat1);
  var lat2 = toRad(lat2);

  var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  var d = R * c;
  return d;
}

// Converts numeric degrees to radians
function toRad(Value) {
  return Value * Math.PI / 180;
}

  </script>
</body>
</html>

## main.css
body {
  font-family: sans-serif;
  font-weight: 300;
}

@media screen and (min-width: 1000px) {
  /* hack! to detect non-touch devices */
  div#links a {
    line-height: 0.8em;
  }
}

h1 a {
  font-weight: 300;
  white-space: nowrap;
}

audio {
  max-width: 100%;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 1em;
  word-break: break-word;
}

button {
  background-color: #d84a38;
  border: none;
  border-radius: 2px;
  color: white;
  font-family: sans-serif;
  font-size: 0.8em;
  margin: 0 0 1em 0;
  padding: 0.6em;
}

button:active {
  background-color: #cf402f;
}

button:hover {
  background-color: #cf402f;
}

button[disabled] {
  color: #ccc;
}

button[disabled]:hover {
  background-color: #d84a38;
}

canvas {
  background-color: #ccc;
  max-width: 100%;
  width: 100%;
}

code {
  font-family: sans-serif;
  font-weight: 400;
}

.container {
  position: relative;
}

.container>.img-pokemon{
    background: url('http://cdn.bulbagarden.net/upload/a/a6/SugimoriPokeBall.png') center center no-repeat;
    background-size: cover;
    height: 200px;
    left: 20%;
    position: absolute;
    top: 20%;
    width: 200px;
    z-index: 1;
}

.container>.btn-ball{
    background: url('http://cdn.bulbagarden.net/upload/a/a6/SugimoriPokeBall.png') center center no-repeat;
    background-size: cover;
    height: 42px;
    left: 45%;
    position: absolute;
    top: 80%;
    width: 42px;
    z-index: 1;
}

div#highlight {
  background-color: #eee;
  font-size: 1.2em;
  margin: 0 0 50px 0;
  padding: 0.5em 2em;
}

div#links {
  padding: 0.5em 0 0 0;
}

html {
/* avoid annoying page width change
when moving from the home page */
overflow-y: scroll;
}

img {
  border: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

input {
  font-family: sans-serif;
}

p {
  color: #444;
  font-weight: 300;
  line-height: 1.6em;
}

p.borderBelow {
  border-bottom: 1px solid #eee;
  padding: 0 0 20px 0;
}

h1 span {
  white-space: nowrap;
}

strong {
  font-weight: 500;
}

strong {
  font-weight: 500;
}

video {
  background: #222;
  margin: 0 0 20px 0;
  width: 100%;
}

@media screen and (max-width: 650px) {
  h1 {
    font-size: 24px;
  }
}

@media screen and (max-width: 550px) {
  button:active {
    background-color: darkRed;
  }
  h1 {
    font-size: 22px;
  }
}

@media screen and (max-width: 450px) {
  h1 {
    font-size: 20px;
  }
}
	<!DOCTYPE html>
	<html>

	<head>

	<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript." />
	<meta name="author" content="//samdutton.com">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
	<meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
	<meta itemprop="image" content="/images/icons/icon192.png">
	<meta name="mobile-web-app-capable" content="yes">
	<meta id="theme-color" name="theme-color" content="#fff">

	<base target="_blank">

	<title>Pokemon KU</title>

	<link rel="stylesheet" href="https://rawgit.com/Ryann10/8d871c33ac0d73c05845c8c73787ec9f/raw/main.css" />

	<style>
	div.select {
	margin: 0 0 1em 0;
	}
	</style>

	</head>

	<body>

	<button onclick="getLocation()">Try It</button>

	<p id="demo"></p>

	<div class="container">
	<video muted autoplay></video>

	<div class="img-pokemon"></div>
	<div id="btn-ball" class="btn-ball"></div>
	</div>
	<script>
	var videoElement = document.querySelector('video');
	var backSourceId;

	var engineeringLatitude = 37.584596;
	var engineeringLongitude = 127.026551;
	var engineeringLatitude = 37.587698;
	var engineeringLongitude = 127.026980;
	var libralLatitude = 37.587740;
	var libralLongitude = 127.031282;
	var koreaLimitKm = 0.5;

	var yonseiLatitude = 37.562415;
	var yonseiLongitude = 126.941025;
	var yonseiLimitKm = 1;

	var x = document.getElementById("demo");
	var btnBall = document.getElementById("btn-ball");
	btnBall.style.display = 'none';

	navigator.getUserMedia = navigator.getUserMedia \|\|
	navigator.webkitGetUserMedia \|\| navigator.mozGetUserMedia;

	function gotSources(sourceInfos) {
	for (var i = sourceInfos.length - 1; i >= 0; --i) {
	var sourceInfo = sourceInfos[i];

	if (sourceInfo.kind === 'video') {
	if (sourceInfo.label.includes("back")) {
	backSourceId = sourceInfo.id;
	start();
	}

	}
	}
	}

	if (typeof MediaStreamTrack === 'undefined' \|\|
	typeof MediaStreamTrack.getSources === 'undefined') {
	alert('This browser does not support MediaStreamTrack.\n\nTry Chrome.');
	} else {
	MediaStreamTrack.getSources(gotSources);
	}

	function successCallback(stream) {
	window.stream = stream; // make stream available to console
	videoElement.src = window.URL.createObjectURL(stream);
	videoElement.play();
	console.log("video url" + videoElement.src);
	}

	function errorCallback(error) {
	console.log('navigator.getUserMedia error: ', error);
	}

	function start() {
	if (window.stream) {
	videoElement.src = null;
	window.stream.getVideoTracks()[0].stop();
	}

	var videoSource = backSourceId;

	var constraints = {
	video: {
	optional: [{
	sourceId: videoSource
	}]
	}
	};
	navigator.getUserMedia(constraints, successCallback, errorCallback);
	}

	function getLocation() {
	if (navigator.geolocation) {
	navigator.geolocation.watchPosition(showPosition);

	navigator.geolocation.getCurrentPosition(
	function(position) {
	alert("Lat: " + position.coords.latitude + "\nLon: " + position.coords.longitude);
	},
	function(error) {
	alert(error.message);
	}, {
	enableHighAccuracy: true,
	timeout: 5000
	}
	);
	} else {
	x.innerHTML = "Geolocation is not supported by this browser.";
	}
	}

	function showPosition(position) {
	x.innerHTML = "Latitude: " + position.coords.latitude +
	"<br>Longitude: " + position.coords.longitude;

	alert(calcCrow(position.coords.latitude, position.coords.longitude, engineeringLatitude, engineeringLongitude).toFixed(1));
	}

	//This function takes in latitude and longitude of two location and returns the distance between them as the crow flies (in km)
	function calcCrow(lat1, lon1, lat2, lon2) {
	var R = 6371; // km
	var dLat = toRad(lat2 - lat1);
	var dLon = toRad(lon2 - lon1);
	var lat1 = toRad(lat1);
	var lat2 = toRad(lat2);

	var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
	Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
	var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
	var d = R * c;
	return d;
	}

	// Converts numeric degrees to radians
	function toRad(Value) {
	return Value * Math.PI / 180;
	}

	</script>
	</body>
	</html>
	body {
	font-family: sans-serif;
	font-weight: 300;
	}

	@media screen and (min-width: 1000px) {
	/* hack! to detect non-touch devices */
	div#links a {
	line-height: 0.8em;
	}
	}

	h1 a {
	font-weight: 300;
	white-space: nowrap;
	}

	audio {
	max-width: 100%;
	}

	body {
	font-family: sans-serif;
	margin: 0;
	padding: 1em;
	word-break: break-word;
	}

	button {
	background-color: #d84a38;
	border: none;
	border-radius: 2px;
	color: white;
	font-family: sans-serif;
	font-size: 0.8em;
	margin: 0 0 1em 0;
	padding: 0.6em;
	}

	button:active {
	background-color: #cf402f;
	}

	button:hover {
	background-color: #cf402f;
	}

	button[disabled] {
	color: #ccc;
	}

	button[disabled]:hover {
	background-color: #d84a38;
	}

	canvas {
	background-color: #ccc;
	max-width: 100%;
	width: 100%;
	}

	code {
	font-family: sans-serif;
	font-weight: 400;
	}

	.container {
	position: relative;
	}

	.container>.img-pokemon{
	background: url('http://cdn.bulbagarden.net/upload/a/a6/SugimoriPokeBall.png') center center no-repeat;
	background-size: cover;
	height: 200px;
	left: 20%;
	position: absolute;
	top: 20%;
	width: 200px;
	z-index: 1;
	}

	.container>.btn-ball{
	background: url('http://cdn.bulbagarden.net/upload/a/a6/SugimoriPokeBall.png') center center no-repeat;
	background-size: cover;
	height: 42px;
	left: 45%;
	position: absolute;
	top: 80%;
	width: 42px;
	z-index: 1;
	}

	div#highlight {
	background-color: #eee;
	font-size: 1.2em;
	margin: 0 0 50px 0;
	padding: 0.5em 2em;
	}

	div#links {
	padding: 0.5em 0 0 0;
	}

	html {
	/* avoid annoying page width change
	when moving from the home page */
	overflow-y: scroll;
	}

	img {
	border: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

	input {
	font-family: sans-serif;
	}

	p {
	color: #444;
	font-weight: 300;
	line-height: 1.6em;
	}

	p.borderBelow {
	border-bottom: 1px solid #eee;
	padding: 0 0 20px 0;
	}

	h1 span {
	white-space: nowrap;
	}

	strong {
	font-weight: 500;
	}

	strong {
	font-weight: 500;
	}

	video {
	background: #222;
	margin: 0 0 20px 0;
	width: 100%;
	}

	@media screen and (max-width: 650px) {
	h1 {
	font-size: 24px;
	}
	}

	@media screen and (max-width: 550px) {
	button:active {
	background-color: darkRed;
	}
	h1 {
	font-size: 22px;
	}
	}

	@media screen and (max-width: 450px) {
	h1 {
	font-size: 20px;
	}
	}