@geogirafe/lib-geoportal
Version:
GeoGirafe is a flexible application to build online geoportals.
188 lines (175 loc) • 7.76 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." />
<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/variables.css" />
<link rel="stylesheet" media="screen" href="styles/index.css" />
<link rel="stylesheet" media="screen" href="styles/common.css" />
<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="lib/tippy.js/tippy.css" />
<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="lib/tippy.js/backdrop.css" />
<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="lib/tippy.js/border.css" />
<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="lib/tippy.js/svg-arrow.css" />
<noscript>
<link rel="stylesheet" href="lib/tippy.js/tippy.css" />
<link rel="stylesheet" href="lib/tippy.js/backdrop.css" />
<link rel="stylesheet" href="lib/tippy.js/border.css" />
<link rel="stylesheet" href="lib/tippy.js/svg-arrow.css" />
</noscript>
<script type="module" src="src/main.ts"></script>
<title>GeoGirafe</title>
</head>
<body>
<header>
<girafe-theme-select></girafe-theme-select>
<img class="logo" alt="geogirafe-logo" src="images/logo/horizontal_black.svg" />
<girafe-search id="search"></girafe-search>
<girafe-oauth></girafe-oauth>
<girafe-nav-history></girafe-nav-history>
<girafe-video-record></girafe-video-record>
<girafe-colorswitcher></girafe-colorswitcher>
</header>
<girafe-help></girafe-help>
<girafe-modals></girafe-modals>
<div id="content">
<div id="main">
<girafe-lr-panel class="panel-left" dock="left">
<girafe-tree-view slot="main"></girafe-tree-view>
</girafe-lr-panel>
<div id="content-map">
<girafe-map></girafe-map>
<div class="info-area">
<girafe-basemap></girafe-basemap>
<girafe-infobox></girafe-infobox>
</div>
<girafe-prototype-banner></girafe-prototype-banner>
<footer>
<girafe-scale></girafe-scale>
<girafe-coordinate></girafe-coordinate>
<span class="copyright">
<span>Information without public faith</span>
<span>
©
<a href="https://doc.geomapfish.dev" target="_blank">GeoGirafe</a>,
<a href="https://www.swisstopo.admin.ch/fr/bases-legales" target="_blank">swisstopo</a>,
<a href="http://www.openstreetmap.org/copyright" target="_blank">OSM</a>
</span>
</span>
</footer>
</div>
<girafe-lr-panel class="panel-right" dock="right">
<girafe-drawing
slot="main"
data-toggle-path="interface.drawingPanelVisible"
data-title="drawing-panel"></girafe-drawing>
<girafe-print
slot="main"
data-toggle-path="interface.printPanelVisible"
data-title="print-panel"></girafe-print>
<girafe-cross-section-settings
slot="main"
data-toggle-path="interface.crossSectionPanelVisible"
data-title="cross-section-settings"></girafe-cross-section-settings>
<girafe-layout
slot="main"
data-toggle-path="interface.layoutPanelVisible"
data-title="layout-panel"></girafe-layout>
<girafe-about
slot="main"
data-toggle-path="interface.aboutPanelVisible"
data-title="about-panel"></girafe-about>
<girafe-user-preferences
slot="main"
data-toggle-path="interface.userPreferencesPanelVisible"
data-title="user-preferences-panel"></girafe-user-preferences>
<girafe-share
slot="main"
data-toggle-path="interface.sharePanelVisible"
data-title="share-panel"></girafe-share>
</girafe-lr-panel>
<girafe-info-window></girafe-info-window>
<girafe-selection-window></girafe-selection-window>
</div>
<div id="content-bottom">
<girafe-selection-grid dock="bottom"></girafe-selection-grid>
<girafe-cross-section-view id="cross-section-footer" dock="bottom"></girafe-cross-section-view>
</div>
</div>
<div id="buttonbar">
<button
slot="menu-content"
class="gg-icon-button gg-big"
onclick="document.geogirafe.state.interface.drawingPanelVisible = !document.geogirafe.state.interface.drawingPanelVisible">
<img alt="help-icon" src="icons/draw.svg" />
</button>
<button
slot="menu-content"
class="gg-icon-button gg-big"
onclick="document.geogirafe.state.interface.printPanelVisible = !document.geogirafe.state.interface.printPanelVisible">
<img alt="help-icon" src="icons/print.svg" />
</button>
<button
slot="menu-content"
class="gg-icon-button gg-big"
onclick="document.geogirafe.state.interface.crossSectionPanelVisible = !document.geogirafe.state.interface.crossSectionPanelVisible">
<img alt="cross-section-icon" src="icons/cross-section.svg" />
</button>
<button
slot="menu-content"
class="gg-icon-button gg-big"
onclick="document.geogirafe.state.interface.sharePanelVisible = !document.geogirafe.state.interface.sharePanelVisible">
<img alt="help-icon" src="icons/share.svg" />
</button>
<button
class="gg-icon-button gg-big"
onclick="document.geogirafe.state.interface.layoutPanelVisible = !document.geogirafe.state.interface.layoutPanelVisible">
<img alt="help-icon" src="icons/layout.svg" />
</button>
<div class="filler"></div>
<button class="gg-icon-button gg-big" onclick="document.geogirafe.state.interface.helpVisible = true">
<img alt="help-icon" src="icons/help.svg" />
</button>
<button
class="gg-icon-button gg-big"
onclick="document.geogirafe.state.interface.aboutPanelVisible = !document.geogirafe.state.interface.aboutPanelVisible">
<img alt="help-icon" src="icons/info.svg" />
</button>
<button
class="gg-icon-button gg-big"
onclick="document.geogirafe.state.interface.userPreferencesPanelVisible = !document.geogirafe.state.interface.userPreferencesPanelVisible">
<img alt="user-preferences-icon" src="icons/config.svg" />
</button>
</div>
</body>
</html>