index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Trappermapper</title>
    <link rel="icon" type="image/x-icon" href="img/hollyrosa-square.png">
    <meta charset="utf-8" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

    <link rel="stylesheet" href="src/L.Control.Locate.min.css" />
    <script src="src/L.Control.Locate.min.js" charset="utf-8"></script>

    <script src="src/L.Control.Layers.Tree.js"></script>
    <link rel="stylesheet" href="src/L.Control.Layers.Tree.css" />
    
    <link rel="stylesheet" href="src/leaflet-sidebar.css" />
    <link rel="stylesheet" href="src/leaflet.fullscreen.css">
    <script src="src/L.Control.Locate.min.js" charset="utf-8"></script>
    <script src="src/L.Control.Layers.Tree.js"></script>
    <script src="src/Leaflet.fullscreen.min.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="icons.js"></script>
    <script src="maplayers.js"></script>

    <!--stulet från https://leafletjs.com/examples/mobile/example.html-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>

<body>
    <div id="map">
      
      <!--Allt inuti div#map kommer vara kvar när kartan byter till fullskärm-->
      <div id="sidebar" class="sidebar collapsed">
          <!-- Definiera flikar -->
          <div class="sidebar-tabs">
              <ul role="tablist">
                  <li><a href="#menu" role="tab"><i class="fa fa-solid fa-bars"></i></a></li>
                  <li><a href="#qr" role="tab"><i class="fa fa-solid fa-sharp fa-qrcode"></i></a></li>
                  <li><a href="#filter" id="filter" role="tab"><img src="icons/filter.svg" width="40px"></a></li>
                  <li><a id="lagerskola"><img src="img/logotyp-ls.png" alt="Äventyret Vässarös logga" width="40px"></a></li>
              </ul>
              <ul role="tablist">
                  <div id="button-box"></div>
              </ul>
          </div>

          <!-- Flikpaneler och innehåll -->
          <div class="sidebar-content">
              <div class="sidebar-pane" id="menu">
                  <h1 class="sidebar-header">
                      TRAPPERMAPPER
                      <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
                  </h1>
                  <p>Det här är en karta framtagen av programfunktionärerna på Vässarö. Använd den inte som ett navigationsverktyg på vattnet.</p>
                  <p>Under filtret till vänster kan du välja vad du vill se på kartan. Du kan också klicka på Äventyret
                      Vässarö-loggan till vänster för att endast se lägerskolans aktiviteter.</p>
                  <p>Mer info om aktiviteterna, och om de som inte finns på kartan, finns i vår 
                      <a href="https://vassaro.se/wp-content/uploads/Programlunta-Ver-23.1.0.pdf">Programlunta</a>.</a></p>
                  <p>Du kan hjälpa till med kartans utveckling genom att prata med oss på Lillgårn, mejla oss på
                      program(at)vassaro.se eller bidra på <a href="https://github.com/danielmartling/trappermapper/"><i
                              class="fa fa-github"></i> Github</a>.</p><br>
                  <center>
                      <p><img src="img/hollyrosa.svg" alt="Programpatrullens maskot Hollyrosa" width="60px"></p>
                      <p><a href="https://vassaro.se/"><img src="img/vassaro_logga.jpg" alt="Vässarös logga"
                                  width="75px"></a>&emsp;&emsp;&emsp;&emsp;<a href="https://aventyretvassaro.se/"><img
                                  src="img/logotyp-ls.png" alt="Äventyrets Vässarös logga" width="75px"></a></p>
                      <p><a href="https://scouterna.se/"><img src="img/Scoutsymbolen_rgb.png" alt="Scouternas logga"
                                  width="75px"></a></p>
                  </center>
              </div>

              <div class="sidebar-pane" id="qr">
                  <h1 class="sidebar-header">
                      QR-KOD
                      <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
                  </h1>
                  <p>Du hittar enklast tillbaka till den här kartan genom att spara länken eller skanna QR-koden med din
                      mobilkamera:<br><br>
                      <img src="img/qr/qr-hollyrosa2.png" alt="QR-kod som leder till den här kartan!" width="100%"><br>
                  </p>
              </div>

              <div class="sidebar-pane" id="filter">
                  <h1 class="sidebar-header">
                      KARTFILTER
                      <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
                  </h1>
                  <div>
                      <h4>KARTBAKGRUNDER</h4>
                      <input type="radio" id="osmRadio" name="selectBackground" value="OpenStreetMap" checked>
                      <label for="osmRadio">OpenStreetMap</label><br>
                      <input type="radio" id="satRadio" name="selectBackground" value="Satellit">
                      <label for="satRadio">Satellit</label>

                      <h4>KARTFILTER</h4>
                      <div id="filter-box" style="padding-top: 0px;"></div>
                  </div>
              </div>
          </div>
      </div>
    </div>
    <script src="src/leaflet-sidebar.js" charset="utf-8"></script>
    <script src="leaflet.js"></script>
</body>
</html>