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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://use.fontawesome.com/e5864653ea.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
  <title>pa-chat</title>
</head>

  <body>
    <div class="chat-main-box">
      <div class="message-box">
        <!-- <div class="message">
          <div class="item">
            <div class="type">FEED</div>
            <div class="header">[State Alert]</div>
            <div class="text">Power outage detected. Backup generators will enable momentarily.</div>
          </div>
        </div>
       
        <div class="message">
          <div class="item"  style="border-left: 0.15vw solid red">
          <div class="type">FEED</div>
          <div class="header">[Ls Water & Power]</div>
          <div class="text">City power has been restored!</div>
          </div>
        </div>
        <div class="message">
          <div class="item"  style="border-left: 0.15vw solid red">
          <div class="type">FEED</div>
          <div class="header">[Ls Water & Power]</div>
          <div class="text">City power has been restored!</div>
          </div>
        </div>
        <div class="message">
          <div class="item"  style="border-left: 0.15vw solid red">
          <div class="type">FEED</div>
          <div class="header">[Ls Water & Power]</div>
          <div class="text">City power has been restored!</div>
          </div>
        </div>
        <div class="message">
          <div class="item"  style="border-left: 0.15vw solid red">
          <div class="type">FEED</div>
          <div class="header">[Ls Water & Power]</div>
          <div class="text">City power has been restored!</div>
          </div>
        </div>
        <div class="message">
          <div class="item"  style="border-left: 0.15vw solid red">
          <div class="type">FEED</div>
          <div class="header">[Ls Water & Power]</div>
          <div class="text">City power has been restored!</div>
          </div>
        </div>
        <div class="message">
          <div class="item"  style="border-left: 0.15vw solid red">
          <div class="type">FEED</div>
          <div class="header">[Ls Water & Power]</div>
          <div class="text">City power has been restored!</div>
          </div>
        </div>
        <div class="message">
          <div class="item"  style="border-left: 0.15vw solid red">
          <div class="type">FEED</div>
          <div class="header">[Ls Water & Power]</div>
          <div class="text">City power has been restored!</div>
          </div>
        </div>
        <div class="message">
          <div class="item"  style="border-left: 0.15vw solid red">
          <div class="type">FEED</div>
          <div class="header">[Ls Water & Power]</div>
          <div class="text">City power has been restored!</div>
          </div>
        </div> -->

   
      </div>
      <input type="text" class="message-input" placeholder="Press [TAB] to switch channels">
      <div class="send-box"><i class="fa fa-angle-right"></i></div>
      <div class="select-box">
        <div class="select-item 1 active">Feed</div>
        <div class="select-item 2">OOC</div>
        <div class="select-item 3">Me</div>
        <div class="select-item 4">Dispatch</div>
        <div class="select-item 5">Staff</div>
      </div>

      <div class="suggestion-box">
        <!-- <div class="suggestion-item">
            <div class="command"><span style="color:rgb(61, 212, 162);text-shadow: 0 0 0.2vw rgb(12 181 142)">/me</span> [text]</div>
            <div class="desc">Bu komut ile yeni me komutları oluşturabilirsiniz oluşturabilirsinizoluşturabilirsiniz</div>
        </div> -->
      </div>

    </div>


  </body>

</html>

<script src="./script.js" type="text/javascript"></script>