@geogirafe/lib-geoportal
Version:
GeoGirafe is a flexible application to build online geoportals.
80 lines (71 loc) • 2.91 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
<meta name="description" content="GeoGirafe is an flexible application to build online geoportals." />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="configs" content="main,mobile" />
<link rel="config-main-url" href="config.json" />
<link rel="config-mobile-url" href="config.mobile.json" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="images/logo/apple-touch-icon-black.png"
media="(prefers-color-scheme: light)" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="images/logo/apple-touch-icon-white.png"
media="(prefers-color-scheme: dark)" />
<link href="images/logo/favicon_black.svg" rel="icon" media="(prefers-color-scheme: light)" />
<link href="images/logo/favicon_white.svg" rel="icon" media="(prefers-color-scheme: dark)" />
<link rel="manifest" href="site.webmanifest" />
<!-- To prevent the FOUC effect (flash of unstyled content),
the html element is set to invisible when the application starts.
When all elements have been declared, the html element is made visible
(=> see main.ts) -->
<style>
html {
opacity: 0;
transition: opacity 1s;
}
</style>
<noscript>
<style>
html {
opacity: 1;
}
</style>
</noscript>
<link rel="stylesheet" media="screen" href="styles/mobile.css" />
<link rel="stylesheet" media="screen" href="styles/common.mobile.css" />
<script type="module" src="src/main.mobile.ts"></script>
<title>GeoGirafe</title>
</head>
<body>
<div class="bottom-button-container-mobile">
<button
class="switch3d girafe-button-big"
onclick="document.geogirafe.state.globe.display = document.geogirafe.state.globe.display==='3D'?'2D':'3D'">
<img alt="switch-icon" src="icons/globe.svg" />
</button>
<girafe-align-north-button-mobile></girafe-align-north-button-mobile>
<!-- <girafe-offline></girafe-offline> -->
<girafe-geolocation-mobile></girafe-geolocation-mobile>
<girafe-display-selector-button-mobile></girafe-display-selector-button-mobile>
</div>
<girafe-search></girafe-search>
<div id="content">
<girafe-map></girafe-map>
<girafe-infobox></girafe-infobox>
</div>
<girafe-swipe-up-panel>
<girafe-basemap-theme-layer-selector-mobile slot="main"></girafe-basemap-theme-layer-selector-mobile>
</girafe-swipe-up-panel>
</body>
</html>