index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>mapper | Interaktive Kartenapplikation</title>
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
  <link rel="icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700;800" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="https://informatik.hs-bremerhaven.de/leaflet/leaflet.css" />
  <script type="text/javascript" src="https://informatik.hs-bremerhaven.de/leaflet/leaflet.js"></script>
  <!-- Styles für den Ladebildschirm, inline weil das CSS dort noch nicht geladen ist -->
  <style>
    #loading-screen {
      height: 100vh;
      width: 100vw;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #4f82ee;
      z-index: 99999999999999;
      display: none;
      pointer-events: none;
    }

    #loading-screen.is-loading {
      display: block;
      pointer-events: all;
    }
    #loading-screen svg {
      position: fixed;
      top: 48%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 4.5rem;
      width: 4.5rem;
    }
    #loading-screen .marker {
      animation: marker-bounce-loading 0.5s cubic-bezier(.48,.01,.69,.98) infinite alternate;
    }
    @keyframes marker-bounce-loading{
      0%{transform: translateY(0)}
      100%{transform: translateY(-0.08rem)}
    }
    #loading-screen .loading-progress {
      position: fixed;
      top: 55%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #b1c1d5;
      border-radius: 1rem;
      width: 11vw;
    }
    #loading-screen .loading-progress .bar {
      width: 0;
      margin-left: 0;
      margin-right: auto;
      height: 2px;
      background-color: #fff;
      border-radius: 1rem;
      transition: width 1s ease-out;
    }
  </style>

  <link rel="stylesheet" href="css/lib/chatStyles.css">
  <link rel="stylesheet" href="css/lib/toastify.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/lib/fuse.js"></script>
  <script src="js/lib/reef.js"></script>
  <script src="js/lib/customPrompt.js" defer></script>
  <script src="js/lib/chat_client.js" defer></script>
  <script src="js/lib/toastify.js" defer></script>
  <script src="js/app.js" defer></script>
</head>
<body>
  <div id="loading-screen" class="is-loading">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><defs><style>.cls-1{fill:#4b79e0;}.cls-2{fill:#fff;}</style></defs><g data-name="Ebene 2"><g data-name="Ebene 1"><circle class="cls-1" cx="6" cy="6" r="6"/><g class="marker" data-name="Group 42"><path id="Union_6" data-name="Union 6" class="cls-2" d="M7.88,2.55A2.66,2.66,0,0,0,3.34,4.43a3,3,0,0,0,.38,1.38A7,7,0,0,0,4.45,7a11.66,11.66,0,0,0,1,1.2.73.73,0,0,0,1,0,11.66,11.66,0,0,0,1-1.2,7,7,0,0,0,.73-1.15,3,3,0,0,0,.38-1.38A2.58,2.58,0,0,0,7.88,2.55ZM5.62,4.05a.54.54,0,0,1,.76,0,.55.55,0,0,1,0,.77.54.54,0,0,1-.76,0,.53.53,0,0,1-.16-.39A.55.55,0,0,1,5.62,4.05Z"/></g><rect class="cls-2" x="4.83" y="9.06" width="2.34" height="1.17" rx="0.22"/></g></g></svg>
    <div class="loading-progress">
      <div class="bar"></div>
    </div>
  </div>

  <header id="main-header">
    <img src="assets/mapper-logo.svg" alt="mapper logo" class="logo">
    <nav>
      <button class="menu-item" id="user-profile-button" onclick="updateSidebarUI('#profile', '#user-profile-button')">
        <svg xmlns="http://www.w3.org/2000/svg" width="23.913" height="26.527" viewBox="0 0 23.913 26.527"><defs><style>.a{fill:none;stroke:#383f48;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;}</style></defs><g transform="translate(-4.5 -3)"><path class="a" d="M26.913,30.342V27.728A5.228,5.228,0,0,0,21.685,22.5H11.228A5.228,5.228,0,0,0,6,27.728v2.614" transform="translate(0 -2.315)"/><path class="a" d="M22.456,9.728A5.228,5.228,0,1,1,17.228,4.5a5.228,5.228,0,0,1,5.228,5.228Z" transform="translate(-0.772 0)"/></g></svg>
      </button>
      <button class="menu-item" id="marker-list-button" onclick="updateSidebarUI('#markers', '#marker-list-button')">
        <svg xmlns="http://www.w3.org/2000/svg" width="26.793" height="33.724" viewBox="0 0 26.793 33.724"><defs><style>.a{fill:none;stroke-linejoin:round;}.b,.c{stroke:none;}.c{fill:#383f48;}</style></defs><g class="a" transform="translate(3 3)"><path class="b" d="M10.4,0A10.382,10.382,0,0,0,0,10.4c0,6.931,10.4,17.327,10.4,17.327s10.4-10.4,10.4-17.327A10.382,10.382,0,0,0,10.4,0Zm0,3.465A6.931,6.931,0,1,1,3.465,10.4,6.929,6.929,0,0,1,10.4,3.465Z"/><path class="c" d="M 10.39639091491699 -3.814697265625e-06 C 4.643720626831055 -3.814697265625e-06 0 4.643714904785156 0 10.39639472961426 C 0 17.32731628417969 10.39639091491699 27.72370529174805 10.39639091491699 27.72370529174805 C 10.39639091491699 27.72370529174805 20.79278182983398 17.32731628417969 20.79278182983398 10.39639472961426 C 20.79278182983398 4.643714904785156 16.14906120300293 -3.814697265625e-06 10.39639091491699 -3.814697265625e-06 M 10.39639091491699 17.32731628417969 C 6.584381103515625 17.32731628417969 3.465461730957031 14.24305534362793 3.465461730957031 10.39639472961426 C 3.465461730957031 6.584384918212891 6.584381103515625 3.465465545654297 10.39639091491699 3.465465545654297 C 14.24306106567383 3.465465545654297 17.32732009887695 6.584384918212891 17.32732009887695 10.39639472961426 C 17.32732009887695 14.24305534362793 14.24306106567383 17.32731628417969 10.39639091491699 17.32731628417969 M 10.39639091491699 -3.000003814697266 C 13.97997093200684 -3.000003814697266 17.34555053710938 -1.60798454284668 19.87316131591797 0.9196262359619141 C 22.40076065063477 3.447225570678711 23.79278182983398 6.812814712524414 23.79278182983398 10.39639472961426 C 23.79278182983398 12.47612571716309 23.15782165527344 14.75701522827148 21.85163116455078 17.36941528320312 C 20.90903091430664 19.25459671020508 19.61134147644043 21.30347442626953 17.99458122253418 23.45914459228516 C 15.29856109619141 27.05383491516113 12.62999057769775 29.73274612426758 12.51771068572998 29.84502601623535 C 11.93192577362061 30.43081092834473 11.16415882110596 30.72370338439941 10.39639091491699 30.72370338439941 C 9.628623008728027 30.72370338439941 8.860856056213379 30.43081092834473 8.275071144104004 29.84502601623535 C 8.16279125213623 29.73274612426758 5.494220733642578 27.05383491516113 2.798200607299805 23.45914459228516 C 1.181440353393555 21.30347442626953 -0.1162490844726562 19.25459671020508 -1.058849334716797 17.36941528320312 C -2.365039825439453 14.75701522827148 -3 12.47612571716309 -3 10.39639472961426 C -3 6.812814712524414 -1.607978820800781 3.447225570678711 0.9196205139160156 0.9196262359619141 C 3.447231292724609 -1.60798454284668 6.812810897827148 -3.000003814697266 10.39639091491699 -3.000003814697266 Z M 10.39639091491699 14.32731533050537 C 11.45548057556152 14.32731533050537 12.44513130187988 13.92093563079834 13.18304061889648 13.1830358505249 C 13.92094039916992 12.44512557983398 14.32732105255127 11.45548629760742 14.32732105255127 10.39639472961426 C 14.32732105255127 8.228876113891602 12.56391048431396 6.465465545654297 10.39639091491699 6.465465545654297 C 9.354061126708984 6.465465545654297 8.369030952453613 6.87646484375 7.622740745544434 7.622745513916016 C 6.876461029052734 8.369035720825195 6.465460777282715 9.35406494140625 6.465460777282715 10.39639472961426 C 6.465460777282715 12.56391525268555 8.22887134552002 14.32731533050537 10.39639091491699 14.32731533050537 Z"/></g></svg>
      </button>
      <button class="menu-item" id="chatroom-button" onclick="updateSidebarUI('#chat', '#chatroom-button')">
        <svg xmlns="http://www.w3.org/2000/svg" width="33.657" height="29.064" viewBox="0 0 33.657 29.064"><defs><style>.a{fill:none;stroke:#383f48;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;}</style></defs><g transform="translate(-25.885 377.14)"><path class="a" d="M29.026-375.64A1.641,1.641,0,0,0,27.385-374v14.528a1.641,1.641,0,0,0,2.789,1.173l2.326-2.276h15.74a1.641,1.641,0,0,0,1.641-1.641V-374a1.641,1.641,0,0,0-1.641-1.641Z" transform="translate(0)"/><line class="a" x2="11.223" transform="translate(33.022 -369.958)"/><line class="a" x2="7.598" transform="translate(33.022 -365.827)"/><path class="a" d="M139.319-251.385v1.959a1.641,1.641,0,0,0,1.641,1.641H156.7l2.326,2.276a1.641,1.641,0,0,0,2.789-1.173V-261.21a1.641,1.641,0,0,0-1.641-1.641h-1.944" transform="translate(-103.774 -104.579)"/></g></svg>
        <div id="new-chatmessage-counter" class="hide">0</div>
      </button>
    </nav>
  </header>

  <div id="marker-search-container">
    <div class="input-search">
      <input type="search" id="marker-search" placeholder="Suche">
    </div>
  </div>

  <aside id="sidebar">

    <div id="profile" class="sidebar-item">
      <div class="head" title="Menu schließen" onclick="updateSidebarUI('#profile');">
        <p class="name">Profil</p>
        <img class="arrow" src="assets/arrow-right.svg" alt="Pfeil rechts">
      </div>
      <div class="overflow-scroll">
        <form class="login-window">
          <h2>Willkommen bei <span class="font-blue">mapper</span></h2>
          <label for="login-name">
            <p>Benutzername</p>
            <input type="text" id="login-name" placeholder="Gib deinen Namen ein"/>
          </label>
          <label for="login-password">
            <p>Passwort</p>
            <input type="password" id="login-password" placeholder="Gib dein Passwort ein"/>
          </label>
          <button class="button-round" type="submit">einloggen</button>
        </form>
      </div>
    </div>

    <div id="markers" class="sidebar-item">
      <div class="head" title="Menu schließen" onclick="updateSidebarUI('#profile');">
        <p class="name">Marker</p>
        <img class="arrow" src="assets/arrow-right.svg" alt="Pfeil rechts">
      </div>
      <div class="overflow-scroll">
        <h2>Alle Marker</h2>
        <p>Hier findest du eine Übersicht aller Marker. Nutze die <strong>Suche</strong>, um für dich interessante Inhalte zu finden!</p>
        <div class="input-search">
          <input type="search" id="search" placeholder="Suche"/>
        </div>
        <hr>
        <ul id="marker-list" class="list-unstyled"></ul>
      </div>
    </div>

    <div id="chat" class="sidebar-item">
      <div class="head" title="Menu schließen" onclick="updateSidebarUI('#profile');">
        <p class="name">Chat</p>
        <img class="arrow" src="assets/arrow-right.svg" alt="Pfeil rechts">
      </div>
      <div class="chat-wrapper">
        <div class="loader-wrapper">
          <div class="loader"></div>
        </div>
        <div class="chat-container">
          <div class="message-container" id="message-container"></div>
          <form method="POST" class="send-container" id="send-container">
            <input class="message-input" type="text" id="message-input" placeholder="antworten…"/>
            <button class="button-round" type="submit" id="send-button">
              <img src="assets/icon-send.svg" alt="Nachricht absenden">
            </button>
          </form>
        </div>
      </div>
    </div>


  </aside>

  <div class="map" id="map"></div>

  <div class="tips-overlay">
    <div class="inner">
      <div class="flex-wrapper">
        <svg version="1.1" id="onboarding_illustration" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 923.8 753.7" xml:space="preserve"><style>.st0{opacity:.1;fill:#6c63ff;enable-background:new}.st1{fill:#383f48}.st2{fill:#3f3d56}.st4{opacity:.1;enable-background:new}.st8{fill:none;stroke:#778699;stroke-width:3;stroke-miterlimit:10}.st9{fill:#4b79e0}</style><ellipse transform="rotate(-45.001 869.191 716.595)" class="st0" cx="869.2" cy="716.6" rx="20" ry="48.5"/><ellipse class="st1" cx="872.6" cy="705.7" rx="10.7" ry="14"/><ellipse class="st1" cx="872.6" cy="688.5" rx="10.7" ry="14"/><ellipse class="st1" cx="872.6" cy="671.4" rx="10.7" ry="14"/><ellipse class="st1" cx="872.6" cy="654.2" rx="10.7" ry="14"/><ellipse class="st1" cx="872.6" cy="637" rx="10.7" ry="14"/><ellipse class="st2" cx="872.6" cy="619.8" rx="10.7" ry="14"/><ellipse class="st2" cx="872.6" cy="602.7" rx="10.7" ry="14"/><path d="M912.8 485.2c1.5-1.9 2.8-3.8 4-5.9l-28.2-4.6 30.5.2c5.9-12.9 6.3-27.6 1-40.7l-40.9 21.2 37.7-27.7c-14.2-24.6-45.6-33-70.2-18.8s-33 45.6-18.8 70.2c1.2 2.1 2.6 4.2 4.1 6.1-2.3 2.9-4.3 6-5.9 9.4l36.6 19-39-13.1c-5.6 16.5-2.4 34.6 8.3 48.3-17.6 22.3-13.7 54.6 8.6 72.2 22.3 17.6 54.6 13.7 72.2-8.6 14.7-18.6 14.7-44.9 0-63.6 14.7-18.7 14.7-45 0-63.6z" fill="#4b79e0"/><path class="st4" d="M821 517c0 11.5 3.9 22.7 11 31.8-17.6 22.3-13.7 54.6 8.6 72.2 22.3 17.6 54.6 13.7 72.2-8.6 14.7-18.6 14.7-44.9 0-63.6 6.9-8.8-91.8-37.6-91.8-31.8z"/><path d="M847 12.5v695.8c0 6.2-5.5 10.9-11.6 10.1l-230.7-32.1c-1.1-.2-2.3-.1-3.4.1l-294.9 60.2c-1.6.3-3.2.3-4.7-.2L75.4 684.1c-4.4-1.2-7.5-5.2-7.5-9.8V64.1c0-4.7 3.3-8.9 7.9-9.9L310.8.5c1.4-.3 2.9-.3 4.3 0l263.7 55.1c1.4.3 2.8.3 4.2 0l8.1-1.7L834.7 2.6C841 1.3 847 6.1 847 12.5z" fill="#778699"/><path d="M806 54.1V659c0 13-11.5 22.9-24.3 21.2l-184.6-25.7c-6.2-.9-12.6-.7-18.8.6l-256.1 52.2-2.1.4L120 652.6c-6.5-1.8-11-7.7-11-14.4V104.1c0-8.6 5.9-16 14.3-17.9l170.5-39c22.7-5.2 46.2-5.4 69-.6L568 89.4l9.1-1.9 214.4-45.1c7.5-1.6 14.5 4.1 14.5 11.7z" fill="#ebeff5"/><path class="st4" d="M603 686l-296.6 60.5L313 0l268 56 10.2-2.2z"/><g opacity=".3"><path class="st8" d="M573.3 138l.2 209.5h87v-86h149l17.5-22.4M89 204.5h323.5l20-9h8v202h140l6 18v91h108V619M483.2 619V397.5M827 559.7H483.2M740.9 138v481M88 517.1h739M177.9 619V138M349.7 138v481M89 259.5l571.5 2M255.3 138.9V619"/><path class="st8" d="M88 370.8h261.7l133.5 146.3M512.1 138v259.5M483.2 444H827"/></g><ellipse transform="rotate(-23.299 511.851 733.499)" class="st0" cx="511.8" cy="733.4" rx="33.5" ry="13.8"/><ellipse class="st1" cx="511.4" cy="728" rx="7.4" ry="9.7"/><ellipse class="st1" cx="511.4" cy="716.1" rx="7.4" ry="9.7"/><ellipse class="st1" cx="511.4" cy="704.3" rx="7.4" ry="9.7"/><ellipse class="st1" cx="511.4" cy="692.5" rx="7.4" ry="9.7"/><ellipse class="st1" cx="511.4" cy="680.6" rx="7.4" ry="9.7"/><ellipse class="st2" cx="511.4" cy="668.8" rx="7.4" ry="9.7"/><ellipse class="st2" cx="511.4" cy="657" rx="7.4" ry="9.7"/><path class="st9" d="M483.7 576c-1-1.3-1.9-2.6-2.8-4l19.4-3.2-21 .2c-4.1-8.9-4.3-19-.7-28.1l28.2 14.6-26-19.1c9.8-16.9 31.5-22.7 48.4-12.9 16.9 9.8 22.7 31.5 12.9 48.4-.8 1.5-1.8 2.9-2.8 4.2 1.6 2 2.9 4.2 4 6.5l-25.2 13.1 26.9-9c3.8 11.3 1.7 23.9-5.7 33.3 12.1 15.4 9.4 37.7-5.9 49.8-15.4 12.1-37.7 9.4-49.8-5.9-10.1-12.9-10.1-31 0-43.8-10-13.1-10-31.2.1-44.1z"/><path class="st4" d="M547 597.8c0 7.9-2.7 15.7-7.6 21.9 12.1 15.4 9.4 37.7-5.9 49.8-15.4 12.1-37.7 9.4-49.8-5.9-10.1-12.9-10.1-31 0-43.8-4.8-6 63.3-25.9 63.3-22z"/><ellipse transform="rotate(-45.001 48.186 694.584)" class="st0" cx="48.2" cy="694.6" rx="20" ry="48.5"/><ellipse class="st1" cx="51.6" cy="683.7" rx="10.7" ry="14"/><ellipse class="st1" cx="51.6" cy="666.5" rx="10.7" ry="14"/><ellipse class="st1" cx="51.6" cy="649.4" rx="10.7" ry="14"/><ellipse class="st1" cx="51.6" cy="632.2" rx="10.7" ry="14"/><ellipse class="st1" cx="51.6" cy="615" rx="10.7" ry="14"/><ellipse class="st2" cx="51.6" cy="597.8" rx="10.7" ry="14"/><ellipse class="st2" cx="51.6" cy="580.7" rx="10.7" ry="14"/><path class="st9" d="M91.8 463.2c1.5-1.9 2.8-3.8 4-5.9l-28.2-4.6 30.5.2c5.9-12.9 6.3-27.6 1-40.7l-40.9 21.2 37.7-27.7c-14.2-24.6-45.6-33-70.2-18.8s-33 45.6-18.8 70.2c1.2 2.1 2.6 4.2 4.1 6.1-2.3 2.9-4.3 6-5.9 9.4l36.6 19-39-13.1C-2.9 495 .3 513.1 11 526.8c-17.6 22.3-13.7 54.6 8.6 72.2 22.3 17.6 54.6 13.7 72.2-8.6 14.7-18.6 14.7-44.9 0-63.6 14.7-18.7 14.7-45 0-63.6z"/><path class="st4" d="M0 495c0 11.5 3.9 22.7 11 31.8-17.6 22.3-13.7 54.6 8.6 72.2 22.3 17.6 54.6 13.7 72.2-8.6 14.7-18.6 14.7-44.9 0-63.6C98.7 518 0 489.2 0 495z"/><g id="Group_42" transform="translate(-433.547 1337.934)"><path id="Union_6" class="st9" d="M1149.3-1166.3c-13.8-13.8-36.1-13.8-49.8 0-6.6 6.6-10.3 15.6-10.3 24.9.2 6.4 1.9 12.6 5 18.2 2.8 5.4 6 10.5 9.7 15.3 4.2 5.6 8.8 10.9 13.6 15.9 3.8 3.8 10 3.8 13.8 0 4.9-5 9.4-10.3 13.6-15.9 3.7-4.8 6.9-9.9 9.7-15.3 3.1-5.6 4.8-11.8 5-18.2 0-9.3-3.7-18.3-10.3-24.9zm-30 19.8c2.8-2.8 7.3-2.8 10.1 0s2.8 7.3 0 10.1-7.3 2.8-10.1 0c-1.3-1.3-2.1-3.2-2.1-5.1 0-1.8.7-3.6 2.1-5z"/></g><g id="Group_42_1_" transform="translate(-433.547 1337.934)"><path id="Union_6_1_" class="st9" d="M657.7-904.6c-13.8-13.8-36.1-13.8-49.8 0-6.6 6.6-10.3 15.6-10.3 24.9.2 6.4 1.9 12.6 5 18.2 2.8 5.4 6 10.5 9.7 15.3 4.2 5.6 8.8 10.9 13.6 15.9 3.8 3.8 10 3.8 13.8 0 4.9-5 9.4-10.3 13.6-15.9 3.7-4.8 6.9-9.9 9.7-15.3 3.1-5.6 4.8-11.8 5-18.2.1-9.3-3.6-18.3-10.3-24.9zm-30 19.9c2.8-2.8 7.3-2.8 10.1 0s2.8 7.3 0 10.1-7.3 2.8-10.1 0c-1.3-1.3-2.1-3.2-2.1-5.1 0-1.9.8-3.7 2.1-5z"/></g><g id="Group_42_2_" transform="translate(-433.547 1337.934)"><path class="marker" d="M939-1088.1c-24.7-24.7-64.8-24.7-89.5 0-11.9 11.9-18.6 28-18.5 44.8.4 11.4 3.5 22.6 9 32.6 5 9.6 10.8 18.8 17.4 27.4 7.5 10 15.7 19.6 24.5 28.5 6.9 6.9 18 6.9 24.9 0 8.8-9 16.9-18.5 24.5-28.5 6.6-8.6 12.4-17.8 17.3-27.4 5.5-10 8.6-21.2 9-32.6 0-16.9-6.7-33-18.6-44.8zm-53.8 35.6c5-5 13.2-5 18.2.1 5 5 5 13.2-.1 18.2-5 5-13.2 5-18.2-.1-2.4-2.4-3.7-5.7-3.7-9.1 0-3.4 1.4-6.7 3.8-9.1z" fill="#e03a7a"/></g></svg>
        <div>
          <h3 style="margin-top: -10px; margin-bottom: 0.6em;">Marker erstellen</h3>
          <ul>
            <li>Klicke auf der Karte an die Position, <br>wo ein Marker erscheinen soll</li>
            <li>Trage deine Daten ein</li>
            <li>Bestätige deine Eingaben</li>
            <li>Das war's schon! <br>Dein neuer Marker ist jetzt auf der Karte verfügbar! 🎊</li>
          </ul>
          <button onclick="this.closest('.tips-overlay').remove()">Ok, los geht's!</button>
        </div>
      </div>
    </div>
  </div>

  <a href="#impressum" id="impressum" title="Erstellt von: Steven Riechers, Johanna Leiber und Meike Siedenbiedel. Studiengang DMP 2021">
    <b>i</b>
  </a>
  
</body>
</html>