jason/Jnf.me
jason/Jnf.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added subtle map to background, using home as a default location for now.

Browse Source
This commit is contained in:
Jason Williams 2018-08-11 14:53:02 -06:00
parent 80abea4a86
commit a96cc52d07
1 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
www/where/index.php
View File

@ -19,16 +19,34 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
<style type="text/css"> <style type="text/css">
* {box-sizing: border-box; margin: 0; border: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-weight: 400; text-align: center;} * {box-sizing: border-box; margin: 0; border: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-weight: 400; text-align: center;}
html, body {height: 100%; min-height: 100%;} html, body {height: 100%; min-height: 100%;}
body {background-color: #333333;} body {background-color: #333333;}
p {font-size: 5vh; color: #FFFFFF; opacity: 0.5;} p {font-size: 5vh; color: #FFFFFF; opacity: 0.5;}
h1 {font-size: 13.9vh; color: #FFFFFF;} h1 {font-size: 13.9vh; color: #FFFFFF;}
#container {width: 100%; height: 100%; border: 1.5vw solid #333333; background: linear-gradient(135deg, #a25cbf 0%,#009cde 100%);} #map {width: 100; height: 100%}
#container {position: absolute; top: 0; width: 100%; height: 100%; border: 1.5vw solid #333333; background: linear-gradient(135deg, rgba(162,92,191,0.8) 0%,rgba(0,156,222,0.8) 100%);}
#centered {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #centered {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
</style> </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=&AIzaSyCo79O07nOpWmdxKBUdgslJRrBwYSykDxwv=3.exp"></script>
<script>
$(function() {
var myLatlng = new google.maps.LatLng(51.1475, -114.11484);
var mapOptions = {
zoom: 15,
center: myLatlng,
disableDefaultUI: true,
styles: [{"featureType":"poi","elementType":"all","stylers":[{"hue":"#000000"},{"saturation":-100},{"lightness":-100},{"visibility":"off"}]},{"featureType":"poi","elementType":"all","stylers":[{"hue":"#000000"},{"saturation":-100},{"lightness":-100},{"visibility":"off"}]},{"featureType":"administrative","elementType":"all","stylers":[{"hue":"#000000"},{"saturation":0},{"lightness":-100},{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"hue":"#000000"},{"saturation":-100},{"lightness":-100},{"visibility":"off"}]},{"featureType":"road.local","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"on"}]},{"featureType":"transit","elementType":"labels","stylers":[{"hue":"#000000"},{"saturation":0},{"lightness":-100},{"visibility":"off"}]},{"featureType":"landscape","elementType":"labels","stylers":[{"hue":"#000000"},{"saturation":-100},{"lightness":-100},{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"hue":"#bbbbbb"},{"saturation":-100},{"lightness":26},{"visibility":"on"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"hue":"#dddddd"},{"saturation":-100},{"lightness":-3},{"visibility":"on"}]}]
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
});
</script>
<body> <body>
<div id="map"></div>
<div id="container"> <div id="container">
<div id="centered"> <div id="centered">
<p>Where tf is Jason?</p> <p>Where tf is Jason?</p>