<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta charset="utf-8" />

  <link
    rel="stylesheet"
    href="https://site-assets.fontawesome.com/releases/v6.4.2/css/all.css"
  />

  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

  <link rel="stylesheet" href="./css/hud.css" type="text/css" />
  <link rel="stylesheet" href="./css/notify.css" type="text/css" />
  <link rel="stylesheet" href="./css/announce.css" type="text/css" />
  <link rel="stylesheet" href="./css/teamchat.css" type="text/css" />
  <link rel="stylesheet" href="./css/helpnotify.css" type="text/css" />
  <link rel="stylesheet" href="./css/emotemenu.css" type="text/css" />

  <script src="./js/hud.js" type="text/javascript"></script>
  <script src="./js/notify.js" type="text/javascript"></script>
  <script src="./js/announce.js" type="text/javascript"></script>
  <script src="./js/teamchat.js" type="text/javascript"></script>
  <script src="./js/helpnotify.js" type="text/javascript"></script>
  <script src="./js/emotemenu.js" type="text/javascript"></script>
</head>

<body>
  <div class="hud_container" id="hud_container">
    <div class="hud_topleft">
      <div id="hud_time" class="hud_time">
        <img src="img/clock.png" /> 20:37
      </div>
      <div id="hud_date" class="hud_date">
        <img src="img/calender.png" /> 23.07.2024
      </div>
    </div>

    <div class="hud_topright" id="hud_topright">
      <div class="hud_title">
        <a style="color: #5301d9">PRUDA </a
        ><a style="color: rgb(255, 255, 255)">ROLEPLAY</a>
      </div>
      <div class="hud_id"><a style="color: #5301d9">ID </a>2357</div>

      <!--<div class="hud_visum">
                <img src="img/visum1.png">
                <a style="color: white;"> </a>
            </div>-->

      <!-- <img class="hud_ghost" src="img/ghost-icon.png"> -->
      <img class="hud_mic" src="/img/mic.png" />
      <img class="hud_funk" src="/img/funk.png" />

      <div class="hud_talkpoint hud_talkpoint_active"></div>
      <div class="hud_talkpoint2"></div>
      <div class="hud_talkpoint3"></div>
      <div class="hud_talkpoint4"></div>

      <div class="hud_hidehud">
        <div class="hud_elements">
          <div
            class="hud_element"
            style="background: linear-gradient(to right, #99999900, #99999979)"
          >
            <div
              class="hud_element_icon"
              style="
                background: #91ff008e;
                filter: drop-shadow(0 0 0.6rem #91ff008e);
              "
            >
              <img src="img/wallet.png" />
            </div>
            <div id="hud_money" class="hud_element_text">lädt...</div>
          </div>
          <div
            class="hud_element"
            style="background: linear-gradient(to right, #99999900, #99999979)"
          >
            <div
              class="hud_element_icon"
              style="
                background: #cea10088;
                filter: drop-shadow(0 0 0.6rem #cea10088);
              "
            >
              <img src="img/bank.png" />
            </div>
            <div id="hud_bank" class="hud_element_text">lädt...</div>
          </div>
          <div
            class="hud_element2"
            style="
              background: linear-gradient(to right, #99999900, #99999979);
              display: none;
            "
          >
            <div class="hud_element_icon2" style="background: #99999979">
              <img src="img/ammo.png" />
            </div>
            <div class="hud_element_text2">
              PISTOLE &nbsp;<span>16 </span>252
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="hud_hidehud">
      <div class="hud_bottomright" id="hud_bottomright" style="display: none">
        <div class="hud_kmh"><span>0</span>92</div>
        <div class="hud_kmhname">KM/H</div>
        <div class="hud_rpmelems">
          <div class="hud_rpmelem hud_rpmelem_dark"></div>
          <div class="hud_rpmelem hud_rpmelem_dark"></div>
          <div class="hud_rpmelem hud_rpmelem_dark"></div>
          <div class="hud_rpmelem hud_rpmelem_dark"></div>
          <div class="hud_rpmelem hud_rpmelem_dark"></div>
          <div class="hud_rpmelem hud_rpmelem_dark"></div>
          <div class="hud_rpmelem hud_rpmelem_dark"></div>
          <div class="hud_rpmelem hud_rpmelem_dark"></div>
          <div class="hud_rpmelem hud_rpmelem_dark"></div>
          <div class="hud_rpmelem hud_rpmelem_dark"></div>
          <div class="hud_rpmelem"></div>
          <div class="hud_rpmelem"></div>
          <div class="hud_rpmelem"></div>
          <div class="hud_rpmelem"></div>
          <div class="hud_rpmelem"></div>
          <div class="hud_rpmelem"></div>
          <div class="hud_rpmelem"></div>
          <div class="hud_rpmelem"></div>
          <div class="hud_rpmelem"></div>

          <div class="hud_rpmelem hud_rpmelem2"></div>
          <div class="hud_rpmelem hud_rpmelem2"></div>
          <div class="hud_rpmelem hud_rpmelem2"></div>
          <div class="hud_rpmelem hud_rpmelem2"></div>
          <div class="hud_rpmelem hud_rpmelem2"></div>
        </div>

        <div class="hud_tank">42L</div>
        <div class="hud_tankbalken">
          <div></div>
        </div>
        <img class="hud_tankicon" src="img/tank.png" />

        <img class="hud_gurticon" src="img/gurt.png" />
        <div class="hud_gurtpoint"></div>

        <img class="hud_motoricon" src="img/motor.png" />
        <div class="hud_motorpoint"></div>

        <img class="hud_dooricon" src="img/door.png" />
        <div class="hud_doorpoint"></div>
      </div>

      <div class="hud_fraktion" id="hud_fraktion">
        <div class="hud_fraktion_icon">
          <img src="img/fraktion.png" />
        </div>
        <div class="hud_fraktion_name">Job lädt...</div>
        <div class="hud_fraktion_grade">
          Bei Fehler "reloadhud" in F8 eingeben.
        </div>
      </div>

      <div class="hud_location" id="hud_location">
        <div class="hud_location_icon">
          <img src="img/location.png" />
        </div>
        <div class="hud_fraktion_name">Location lädt...</div>
        <div class="hud_fraktion_grade">
          Bei Fehler "reloadhud" in F8 eingeben.
        </div>
      </div>

      <div class="hud_fooddiv" id="hud_fooddiv">
        <img src="img/food.png" />
        <div
          id="hud_foodpoint"
          class="hud_foodpoint hud_foodpoint_filled"
        ></div>
        <div id="hud_foodpoint2" class="hud_foodpoint"></div>
        <div id="hud_foodpoint3" class="hud_foodpoint"></div>
        <div id="hud_foodpoint4" class="hud_foodpoint"></div>
        <div id="hud_foodpoint5" class="hud_foodpoint"></div>

        <div class="hud_foodpercent">lädt...</div>
      </div>
      <div class="hud_drinkdiv" id="hud_drinkdiv">
        <img src="img/drink.png" />
        <div
          id="hud_drinkpoint"
          class="hud_foodpoint hud_drinkpoint_filled"
        ></div>
        <div id="hud_drinkpoint2" class="hud_foodpoint"></div>
        <div id="hud_drinkpoint3" class="hud_foodpoint"></div>
        <div id="hud_drinkpoint4" class="hud_foodpoint"></div>
        <div id="hud_drinkpoint5" class="hud_foodpoint"></div>

        <div class="hud_foodpercent">lädt...</div>
      </div>
    </div>

    <div id="teamchats"></div>
  </div>

  <div class="hud_grid-container"></div>

  <div class="hud_save">
    <i class="fa-duotone fa-rotate" onclick="hud_restore()"></i>

    <div class="hud_savetitle">HUD VERSCHIEBEN</div>
    <div class="hud_savesubtitle">
      Hier kannst du die verschiedenen HUD Elemente frei verschieben!
    </div>
    <button type="button" class="hud_saveyes" onclick="hud_save()">
      Übernehmen
    </button>
    <button type="button" class="hud_saveno" onclick="hud_close()">
      Abbrechen
    </button>
  </div>

  <div id="notifications"></div>

  <div id="announce_root">
    <div class="announce_main"></div>
  </div>

  <div class="helpnotify_container">
    <div class="helpnotify_background"></div>
    <div class="helpnotify_key">E</div>
    <div class="helpnotify_text">
      Drücke E um auf den Waffenladen zuzugreifen
    </div>
  </div>

  <div id="emotemenu_container">
    <div class="emotemenu_container_innerborder"></div>
    <div class="emotemenu_container_innerborder2"></div>
    <div class="emotemenu_container_inner">
      <div
        class="emotemenu_element"
        data-id="1"
        onmouseover="emotemenu_hoverEmote(this)"
        onmouseout="emotemenu_mouseoutEmote(this)"
        onclick="emotemenu_playEmote(this)"
      ></div>
      <div
        class="emotemenu_element"
        data-id="2"
        onmouseover="emotemenu_hoverEmote(this)"
        onmouseout="emotemenu_mouseoutEmote(this)"
        onclick="emotemenu_playEmote(this)"
      ></div>
      <div
        class="emotemenu_element"
        data-id="3"
        onmouseover="emotemenu_hoverEmote(this)"
        onmouseout="emotemenu_mouseoutEmote(this)"
        onclick="emotemenu_playEmote(this)"
      ></div>
      <div
        class="emotemenu_element"
        data-id="4"
        onmouseover="emotemenu_hoverEmote(this)"
        onmouseout="emotemenu_mouseoutEmote(this)"
        onclick="emotemenu_playEmote(this)"
      ></div>
      <div
        class="emotemenu_element"
        data-id="5"
        onmouseover="emotemenu_hoverEmote(this)"
        onmouseout="emotemenu_mouseoutEmote(this)"
        onclick="emotemenu_playEmote(this)"
      ></div>
      <div
        class="emotemenu_element"
        data-id="6"
        onmouseover="emotemenu_hoverEmote(this)"
        onmouseout="emotemenu_mouseoutEmote(this)"
        onclick="emotemenu_playEmote(this)"
      ></div>
      <div
        class="emotemenu_element"
        data-id="7"
        onmouseover="emotemenu_hoverEmote(this)"
        onmouseout="emotemenu_mouseoutEmote(this)"
        onclick="emotemenu_playEmote(this)"
      ></div>
      <div
        class="emotemenu_element"
        data-id="8"
        onmouseover="emotemenu_hoverEmote(this)"
        onmouseout="emotemenu_mouseoutEmote(this)"
        onclick="emotemenu_playEmote(this)"
      ></div>
    </div>

    <div class="emotemenu_infotext">L Dance</div>
    <div class="emotemenu_info">
      Emotes können über <span>/bindemote (1-8) emotename</span> gebindet werden
    </div>
  </div>
</body>
