<html lang="fr">
<head>
    <title>Origins UI</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
    <script src="./script.js"></script>
    <link rel="stylesheet" href="./style.css" />
</head>
<body>
    <!-- HUD UI -->
  <!-- <div id="armour">
    <div id="boxArmour"></div>
      <p id="emojiPos"></p>
    </div>
    <div id="heal">
    <div id="box"></div>
        <p id="emojiPos"></p>
    </div>
    <div id="food">
        <div id="boxFood"></div>
        <p id="emojiPos"></p>
    </div>
    <div id="thirst">
        <div id="boxThirst"></div>
        <p id="emojiPos"></p>
    </div>
  </div> -->

  <!-- Report UI -->
  <div id="report-ui" class="hidden">
    <div class="report-message">
      📄 Report en attente, utilisez <span class="command">/cancelreport</span> pour l'annuler.
    </div>
  </div>

  <!-- Safe Zone UI -->
  <div id="safezone-ui" class="hidden">
    <div class="safezone-message">
      <img src="./icon/zonesafe.png" class="icon" alt="">
      Vous êtes dans une zone sécurisée.
    </div>
  </div>

  <!-- Draw Bar UI -->
  <div id="drawbar-ui" class="hidden">
    <img src="./icon/logo.png" alt="" class="drawbar-logo" />
    <span id="drawbar-message">Mon message</span>
  </div>

  <!-- Gas Station UI -->
  <div id="gas-station-ui" class="hidden">
    <button class="close-btn" id="close-gas-ui">&times;</button>
    <div class="header">
        <img src="./icon/gazstation.png" alt="" style="width: 180px; height: auto; margin-top: -10px;" />
    </div>
    <div class="vehicle-info">
        <p>Modèle :</strong> <span id="vehicle-model">N/A</span></p>
        <p>Carburant :</strong> <span id="vehicle-fuel">0%</span></p>
        <p>Plaque :</strong> <span id="vehicle-plate">N/A</span></p>
    </div>
    <div class="gas-station-container">
        <div class="fuel-level">
            <label for="fuel-range">Niveau de carburant :</label>
            <input id="fuel-range" type="range" min="0" max="100" value="0" />
            <span id="fuel-percentage">0%</span>
        </div>
        <div class="actions">
            <button id="buy-fuel" style="background-color: #007bff; color: white;">
                Mettre de l'essence
            </button>
            <button id="buy-jerrican" style="background-color: #007bff; color: white;">
                Acheter un jerrican
            </button>
        </div>
    </div>
  </div>

  <!-- Main UI -->
  <div class="main" style="display: none;">
			<div class="label" id="title_"></div>
			<div style="width: 100%; height: 2%;"></div>
			<dic class="text-box">
				<div style="width: 100%; height: 2%;"></div>
				<textarea class="text-inputs" spellcheck="false" id="main_text" style="display: none;"></textarea>
				<input class="text-inputs" type="number" id="main_number" style="display: none;">
			</dic>
	</div>


  <!-- HUD FA MDR -->

  <!-- <div id="ui">
    <div id="infos">
        <div class="info-server" >
            <div class="linetop">
            <div class="container-server">
                <div class="g1">
                    <div class="g1-content">
                        <img class="imagegroup" src="">
                        <span class="countgg" id=""></span><span class=""></span>
                    </div>
                </div>
                </div>
                <div class="g2">
                    <div class="g2-content">
                        <img class="imageplayer" src="">
                        <span class="" id=""></span>
                    </div>
                </div>
                <div class="g3">
                    <div class="g3-content">
                        <span class="server" id="servername">ALKIARP</span>
                        <span class="discordgg" id="discord">   DISCORD.GG/ALKIARP</span>
                    </div>
                </div>
                <div class="g4">
                    <div class="g4-content">
                        <img class="logo" src="icon/logo.png">
                    </div>
                </div>
            </div>
        </div>
        <div class="info">
            <div class="linecash">
            <div class="container">
                <img class="imagecash" src="icon/money.png">
                <span class="state" id="money">0$</span>
            </div>
            </div>
        </div>
        <div class="info">
            <div class="lineblack">
            <div class="container">
                <img class="imageblack" src="icon/black_money.png">
                <span class="state" id="black_money">0$</span>
            </div>
            </div>
        </div>
        <div class="info">
            <div class="linebank">
            <div class="container">
                <img class="imagebank" src="icon/bank.png">
                <span class="state" id="bank">0$</span>
            </div>
        </div>
        </div>
    </div> -->
</body>
</html>
