Skip to content

Instantly share code, notes, and snippets.

@Ryann10

Ryann10/index.html

Last active October 4, 2016 01:52
Show Gist options
  • Save Ryann10/8d871c33ac0d73c05845c8c73787ec9f to your computer and use it in GitHub Desktop.
Save Ryann10/8d871c33ac0d73c05845c8c73787ec9f to your computer and use it in GitHub Desktop.
Download ZIP
Pokemon KU
Raw
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>
Raw
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment