Untitled

mail@pastecode.io avatar
unknown
html
8 months ago
6.6 kB
4
Indexable
Never
<div class="wrapper absolute flex items-center justify-center flex-row" id="wrapper">
      <div class="content-measurements absolute content bg-[#333333]">
        <div class="float-right"><button id="close-btn"><i class="fa-regular fa-circle-xmark fa-2xl m-5 mt-7" style="color: #1853b9;"></i></button></div>
        <div class="dispatch-container absolute overflow-y-scroll max-h-full w-1/4 rounded-r-[20px] bg-[#183153] flex overflow-auto flex-col items-center gap-7">
          <div class="header-container w-full h-14 flex items-center justify-center bg-[#001C40]">
            <i class="fa-regular fa-bell text-white text-2xl"></i>
            <span class="text-white align-middle font-['Kanit'] text-2xl ml-2">Inkomende meldingen</span>
          </div>
          <div class="notification-card min-h-[]: rounded-md bg-[#001C40] text-white flex items-center">
            <i class="fa-solid fa-person-circle-exclamation ml-3 fa-2xl"></i>
            <button class="gps-button ml-60 mb-20 fixed w-10 h-10 bg-[#183153] rounded-full"><i class="fa-solid fa-location-dot text-lg"></i></button>
            <button class="info-button ml-48 mb-20 fixed w-10 h-10 bg-[#183153] rounded-full"><i class="fa-solid fa-info text-lg"></i></button>

            <div class="flex flex-col ml-3">
              <span class="font-bold">John Doe</span>
              <span>Er is iemand neergestoken op blokkenpark!</span>
            </div>
          </div>
          <div class="notification-card h-36 rounded-md bg-[#001C40] text-white flex items-center">
            <i class="fa-solid fa-person-circle-exclamation ml-3 fa-2xl"></i>
            <button class="gps-button ml-60 mb-20 fixed w-10 h-10 bg-[#183153] rounded-full"><i class="fa-solid fa-location-dot text-lg"></i></button>
            <button class="info-button ml-48 mb-20 fixed w-10 h-10 bg-[#183153] rounded-full"><i class="fa-solid fa-info text-lg"></i></button>

            <div class="flex flex-col ml-3">
              <span class="font-bold">John Doe</span>
              <span>Er is iemand neergestoken op blokkenpark!</span>
            </div>
          </div>
          <div class="notification-card h-36 rounded-md bg-[#001C40] text-white flex items-center">
            <i class="fa-solid fa-person-circle-exclamation ml-3 fa-2xl"></i>
            <button class="gps-button ml-60 mb-20 fixed w-10 h-10 bg-[#183153] rounded-full"><i class="fa-solid fa-location-dot text-lg"></i></button>
            <button class="info-button ml-48 mb-20 fixed w-10 h-10 bg-[#183153] rounded-full"><i class="fa-solid fa-info text-lg"></i></button>

            <div class="flex flex-col ml-3">
              <span class="font-bold">John Doe</span>
              <span>Er is iemand neergestoken op blokkenpark!</span>
            </div>
          </div>
          <div class="notification-card h-36 rounded-md bg-[#001C40] text-white flex items-center">
            <i class="fa-solid fa-person-circle-exclamation ml-3 fa-2xl"></i>
            <button class="gps-button ml-60 mb-20 fixed w-10 h-10 bg-[#183153] rounded-full"><i class="fa-solid fa-location-dot text-lg"></i></button>
            <button class="info-button ml-48 mb-20 fixed w-10 h-10 bg-[#183153] rounded-full"><i class="fa-solid fa-info text-lg"></i></button>

            <div class="flex flex-col ml-3">
              <span class="font-bold">John Doe</span>
              <span>Er is iemand neergestoken op blokkenpark!</span>
            </div>
          </div>
          <div class="notification-card h-36 rounded-md bg-[#001C40] text-white flex items-center">
            <i class="fa-solid fa-person-circle-exclamation ml-3 fa-2xl"></i>
            <button class="gps-button ml-60 mb-20 fixed w-10 h-10 bg-[#183153] rounded-full"><i class="fa-solid fa-location-dot text-lg"></i></button>
            <button class="info-button ml-48 mb-20 fixed w-10 h-10 bg-[#183153] rounded-full"><i class="fa-solid fa-info text-lg"></i></button>

            <div class="flex flex-col ml-3">
              <span class="font-bold">John Doe</span>
              <span>Er is iemand neergestoken op blokkenpark!</span>
            </div>
          </div>
          <div class="notification-card h-36 rounded-md bg-[#001C40] text-white flex items-center">
            <i class="fa-solid fa-person-circle-exclamation ml-3 fa-2xl"></i>
            <button class="gps-button ml-60 mb-20 fixed w-10 h-10 bg-[#183153] rounded-full"><i class="fa-solid fa-location-dot text-lg"></i></button>
            <button class="info-button ml-48 mb-20 fixed w-10 h-10 bg-[#183153] rounded-full"><i class="fa-solid fa-info text-lg"></i></button>

            <div class="flex flex-col ml-3">
              <span class="font-bold">John Doe</span>
              <span>Er is iemand neergestoken op blokkenpark!</span>
            </div>
          </div>
        </div>
        <!-- <div class="unit-status-container w-1/5 h-1/3 bg-[#202124]">
          <div class="status-btn">
            <span class="title">Status 1</span>
            <span class="description">Beschikbaar</span>
          </div>
          <div class="status-btn">
            <span class="title">Status 2</span>
            <span class="description">Onderweg</span>
          </div>
          <div class="status-btn">
            <span class="title">Status 3</span>
            <span class="description">Ter plaatse</span>
          </div>
          <div class="status-btn">
            <span class="title">Status 4</span>
            <span class="description">Niet beschikbaar</span>
          </div>
          <div class="status-btn">
            <span class="title">Status 5</span>
            <span class="description">Transport aanvraag</span>
          </div>
          <div class="status-btn">
            <span class="title">Status 6</span>
            <span class="description">Spraakaanvraag</span>
          </div>
          <div class="status-btn">
            <span class="title">Status 7</span>
            <span class="description">Urgente spraakaanvraag</span>
          </div>
          <div class="status-btn">
            <span class="title">Status 8</span>
            <span class="description">Uit dienst</span>
          </div>
          <div class="status-btn">
            <span class="title">Status 9</span>
            <span class="description">NOODKNOP</span>
          </div>
        </div> -->
        </div>
        <img class="screen" src="src/tablet-border.png" id="tablet-screen" alt="Frame niet geladen">
      </div>
      </div>
    </div>