<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://gc.zgo.at/; img-src *; connect-src 'self' https://raw.githubusercontent.com/ https://www.openstreetmap.org/ https://api.openstreetmap.org/;">
    <link href="./css/mobile.css" rel="stylesheet"/>
    <link href="./css/openinghourstable.css" rel="stylesheet"/>
    <link href="./css/tagrendering.css" rel="stylesheet"/>
    <link href="css/ReviewElement.css" rel="stylesheet"/>
    <link href="./css/index-tailwind-output.css" rel="stylesheet"/>
    <link href="./css/wikipedia.css" rel="stylesheet"/>
    <meta content="website" property="og:type">

    <!-- THEME-SPECIFIC -->
    <!-- Every theme gets their own html page, this is created by a script; this part will be removed except for the index -->
    <title>MapComplete</title>
    <link href="./index.webmanifest" rel="manifest">
    
    <link href="./assets/svg/add.svg" rel="icon" sizes="any" type="image/svg+xml">
    <meta content="./assets/SocialImage.png" property="og:image">
    <meta content="MapComplete - editable, thematic maps with OpenStreetMap" property="og:title">
    <meta content="MapComplete is a platform to visualize OpenStreetMap on a specific topic and to easily contribute data back to it."
          property="og:description">

    <link href="./assets/generated/images/assets_svg_mapcomplete_logo512.png" rel="apple-touch-icon" sizes="512x512">
    <link href="./assets/generated/images/assets_svg_mapcomplete_logo384.png" rel="apple-touch-icon" sizes="384x384">
    <link href="./assets/generated/images/assets_svg_mapcomplete_logo192.png" rel="apple-touch-icon" sizes="192x192">
    <link href="./assets/generated/images/assets_svg_mapcomplete_logo180.png" rel="apple-touch-icon" sizes="180x180">
    <link href="./assets/generated/images/assets_svg_mapcomplete_logo152.png" rel="apple-touch-icon" sizes="152x152">
    <link href="./assets/generated/images/assets_svg_mapcomplete_logo144.png" rel="apple-touch-icon" sizes="144x144">
    <link href="./assets/generated/images/assets_svg_mapcomplete_logo128.png" rel="apple-touch-icon" sizes="128x128">
    <link href="./assets/generated/images/assets_svg_mapcomplete_logo120.png" rel="apple-touch-icon" sizes="120x120">
    <link href="./assets/generated/images/assets_svg_mapcomplete_logo96.png" rel="apple-touch-icon" sizes="96x96">
    <link href="./assets/generated/images/assets_svg_mapcomplete_logo72.png" rel="apple-touch-icon" sizes="72x72">


    <!-- THEME-SPECIFIC-END-->

    <style>
        #decoration-desktop img {
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>

<!-- Mastodon link verification: https://docs.joinmastodon.org/user/profile/#Link%20verification -->
<a rel="me" href="https://en.osm.town/@MapComplete" class="hidden">Mastodon</a>

<div id="main"></div>
<script type="module" src="./src/leaderboard.ts"></script>
<script async data-goatcounter="https://pietervdvn.goatcounter.com/count" src="https://gc.zgo.at/count.js" crossorigin="anonymous"
        integrity="sha384-nx5O+otcqJoqMhdDt8jUzmia6ng81Z5zZozYr69TzPkOLjVhLKMxu5zHCV9/0MPn"></script>

<script>
    window.addEventListener('load', () => {
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/service-worker.js').then(
                () => {
                    console.log('Service worker registration successful');
                },
                err => {
                    console.error('Service worker registration failed', err)
                });
        } else {
            console.log("Service workers are not supported")
        }
    });
</script>

</body>
</html>