Skip to content

Instantly share code, notes, and snippets.

@mapcentia

mapcentia/gist:e76b74236bdd763360f395834f1d2344

Last active April 28, 2017 11:38
Show Gist options
  • Save mapcentia/e76b74236bdd763360f395834f1d2344 to your computer and use it in GitHub Desktop.
Save mapcentia/e76b74236bdd763360f395834f1d2344 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<title>Naturpark Lillebælt</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="google" value="notranslate">
<link rel="apple-touch-icon" sizes="40x40" href="https://s3-eu-west-1.amazonaws.com/mapcentia-www/naturpark_lillebaelt/webpage_icons/apple-touch-icon-40x40.png">
<link rel="apple-touch-icon" sizes="58x58" href="https://s3-eu-west-1.amazonaws.com/mapcentia-www/naturpark_lillebaelt/webpage_icons/apple-touch-icon-58x58.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://s3-eu-west-1.amazonaws.com/mapcentia-www/naturpark_lillebaelt/webpage_icons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="80x80" href="https://s3-eu-west-1.amazonaws.com/mapcentia-www/naturpark_lillebaelt/webpage_icons/apple-touch-icon-80x80.png">
<link rel="apple-touch-icon" sizes="87x87" href="https://s3-eu-west-1.amazonaws.com/mapcentia-www/naturpark_lillebaelt/webpage_icons/apple-touch-icon-87x87.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://s3-eu-west-1.amazonaws.com/mapcentia-www/naturpark_lillebaelt/webpage_icons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://s3-eu-west-1.amazonaws.com/mapcentia-www/naturpark_lillebaelt/webpage_icons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://s3-eu-west-1.amazonaws.com/mapcentia-www/naturpark_lillebaelt/webpage_icons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="https://s3-eu-west-1.amazonaws.com/mapcentia-www/naturpark_lillebaelt/webpage_icons/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://s3-eu-west-1.amazonaws.com/mapcentia-www/naturpark_lillebaelt/webpage_icons/apple-touch-icon-180x180.png">
<meta name="apple-mobile-web-app-title" content="Naturpark Lillebælt">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Material Design fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:200,300,400,500,700">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<!-- Leafet measure -->
<link rel="stylesheet" href="/bower_components/leaflet-measure/dist/leaflet-measure.css">
<!-- build:css /css/build/all.min.css -->
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/snackbarjs/dist/snackbar.min.css">
<link rel="stylesheet" href="/bower_components/bootstrap-material-design/dist/css/ripples.min.css">
<link rel="stylesheet" href="/css/jasny-bootstrap.min.css">
<link rel="stylesheet" href="/css/L.Control.Locate.min.css">
<link rel="stylesheet" href="/css/Leaflet.GraphicScale.min.css">
<link rel="stylesheet" href="/css/leaflet.toolbar.css">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/cartodb.css"/>
<!-- /build -->
<!-- Bootstrap Material -->
<link rel="stylesheet" href="/bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.min.css">
<link rel="stylesheet" href="https://s3-eu-west-1.amazonaws.com/mapcentia-www/libs/addtohomescreen.css">
<style>
#loadscreen{
display: inline-block;
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
}
#bubbles { height: 100% }
#bubbles { padding: 100px 0 }
.bubble {
width: 60px;
height: 60px;
background: #59B8E3;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: absolute;
}
.x1 {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9);
opacity: 0.2;
-webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
-o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x2 {
left: 20%;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.5;
-webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
-moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
-o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.x3 {
left: 40%;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.3;
-webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
-o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x4 {
left: 60%;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.35;
-webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
-o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x5 {
left: 80%;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.3;
-webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
-moz-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
-o-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
@-webkit-keyframes moveclouds {
0% {
top: 500px;
}
100% {
top: -500px;
}
}
@-webkit-keyframes sideWays {
0% {
margin-left:0px;
}
100% {
margin-left:50px;
}
}
@-moz-keyframes moveclouds {
0% {
top: 500px;
}
100% {
top: -500px;
}
}
@-moz-keyframes sideWays {
0% {
margin-left:0px;
}
100% {
margin-left:50px;
}
}
@-o-keyframes moveclouds {
0% {
top: 500px;
}
100% {
top: -500px;
}
}
@-o-keyframes sideWays {
0% {
margin-left:0px;
}
100% {
margin-left:50px;
}
}
#loadscreen{
background-image: url(https://s3-eu-west-1.amazonaws.com/mapcentia-www/naturpark_lillebaelt/images/background/Naturpark_Lillebaelt_app_splash_2048x1536px.png);
}
@media only screen and (max-width: 768px) {
#loadscreen{
background-image: url(https://s3-eu-west-1.amazonaws.com/mapcentia-www/naturpark_lillebaelt/images/background/Naturpark_Lillebaelt_app_splash_1536x2048px.png);
}
}
</style>
</head>
<body>
<div class="loadingIndicator">
<div class="loadingIndicator__bar"></div>
</div>
<div id="main-container">
</div>
<div id="loadscreen">
<div id="bubbles">
<div class="bubble x1"></div>
<div class="bubble x2"></div>
<div class="bubble x3"></div>
<div class="bubble x4"></div>
<div class="bubble x5"></div>
</div>
</div>
</body>
<script type="text/javascript">
// Load of mutationobserver shim if < IE11.
var check = false;
/*@cc_on
check = (/^10/.test(@_jscript_version) || /^9/.test(@_jscript_version))
@*/
if (check) {
document.write("<script src=\"//cdn.jsdelivr.net/g/mutationobserver/\"><\/script>");
}
</script>
<script src="/locale"></script>
<script src="//maps.google.com/maps/api/js?v=3&libraries=places&key=AIzaSyCjTXR2Tmg_Ok7u4S5dl6_Rgy3br_BQfPQ"></script>
<script src="//gc2.mapcentia.com/js/leaflet/cartodb-all.js"></script>
<script src="/api/baselayer"></script>
<!-- build:js /js/build/all.min.js -->
<script src="/bower_components/leaflet-measure/dist/leaflet-measure.js"></script>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/typeahead.js/dist/typeahead.jquery.min.js"></script>
<script src="/bower_components/hogan.js/web/builds/3.0.2/hogan-3.0.2.js"></script>
<script src="/bower_components/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="/bower_components/bootstrap-table/dist/bootstrap-table-locale-all.min.js"></script>
<script src="/bower_components/bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="/bower_components/tableExport.jquery.plugin/tableExport.min.js"></script>
<script src="/bower_components/bootstrap-material-design/dist/js/ripples.js"></script>
<script src="/bower_components/bootstrap-material-design/dist/js/material.js"></script>
<script src="/js/jasny-bootstrap.min.js"></script>
<script src="/js/templates.js"></script>
<script src="/js/bundle.js"></script>
<script src="/js/vidi.js"></script>
<!-- /build -->
<script src="//gc2.mapcentia.com/apps/widgets/gc2table/js/gc2table.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/mapcentia-www/libs/addtohomescreen.js"></script>
<script>
window.go = function () {
setTimeout(function () {
window.MapCentia = new Vidi().init.init();
}, 1);
addToHomescreen({
startDelay: 5
});
};
</script>
<script src="//gc2.mapcentia.com/api/v3/js/geocloud.php?callback=go&maplib=leaflet&i18n=false"></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment