function addUser() {



        const newUserNameInput = document.querySelector('.newUserName');
        const newUserIdInput = document.querySelector('.newUserId');
        const newUserName = newUserNameInput.value.trim();
        const newUserId = newUserIdInput.value.trim();
        const level = document.getElementById('levelSelect').value;
        const level2 = document.getElementById('levelSelect2').value;
        const level3 = document.getElementById('levelSelect3').value;
        const level4 = document.getElementById('levelSelect4').value;
      
        if (newUserName !== '' && newUserId !== '') {
          if (userIDs.hasOwnProperty(newUserId)) {
            return;
          } else {
            // Rest of the code for adding the user and counting
            // Increment the user count
            userCount++;
            handleUserCountChange(userCount);
            // Add the user ID to the list
            userIDs[newUserId] = true;
          
            // Update the count display
            const countDisplay = document.getElementById('userCount');
            countDisplay.textContent = userCount;
          
          }
          const personContainer = document.createElement('div');
          personContainer.classList.add('personContainer');
      
          const newProfilePhoto = document.createElement('img');
          newProfilePhoto.src = newUserId;
          newProfilePhoto.alt = newUserName;
          newProfilePhoto.classList.add('profilePhoto');
      
          const newInputField = document.createElement('input');
          newInputField.type = 'text';
          newInputField.classList.add('inputField');
          newInputField.placeholder = newUserName;
      
          const newSendButton = document.createElement('button');
          newSendButton.classList.add('sendButton');
          newSendButton.textContent = 'Send';
      
          const deleteButton = document.createElement('span');
          deleteButton.classList.add('deleteButton');
          deleteButton.textContent = 'X';
      
  // Create checkbox element
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.classList.add('giftCheckbox');


 
          personContainer.appendChild(checkbox);
          personContainer.appendChild(newProfilePhoto);
          personContainer.appendChild(newInputField);
          personContainer.appendChild(newSendButton);
          personContainer.appendChild(deleteButton);
      
          // Append level images if the value is not empty
          if (level !== '') {
            const levelPhoto = document.createElement('img');
            levelPhoto.src = `levels/${level}.png`;
            levelPhoto.classList.add('levelPhoto');
            personContainer.appendChild(levelPhoto);
          }
      
          if (level2 !== '') {
            const levelPhoto2 = document.createElement('img');
            levelPhoto2.src = `levels/${level2}.png`;
            levelPhoto2.classList.add('levelPhoto2');
            personContainer.appendChild(levelPhoto2);
          }
      
          if (level3 !== '') {
            const levelPhoto3 = document.createElement('img');
            levelPhoto3.src = `levels/${level3}.png`;
            levelPhoto3.classList.add('levelPhoto3');
            personContainer.appendChild(levelPhoto3);
          }
      
          if (level4 !== '') {
            const levelPhoto4 = document.createElement('img');
            levelPhoto4.src = `levels/${level4}.png`;
            levelPhoto4.classList.add('levelPhoto4');
            personContainer.appendChild(levelPhoto4);
          }
      
          // Add the 'data-sender' and 'name' attributes
          personContainer.setAttribute('data-sender', newUserName);
      
          const nameSelect = document.createElement('select');
          nameSelect.classList.add('nameSelect');
      
          // Add options to the select element
          const names = ['Rose', 'Jane', 'Mike', 'Hand Hearts', 'Hand Heart'];
          names.forEach((name) => {
            const option = document.createElement('option');
            option.value = name;
            option.textContent = name;
            nameSelect.appendChild(option);
          });
      

          const userSelect = document.createElement('select');
          userSelect.classList.add('userSelect');
      
          // Add options to the select element
          const users = ['user1', 'user2'];
          users.forEach((user) => {
            const option = document.createElement('option');
            option.value = user;
            option.textContent = user;
            userSelect.appendChild(option);
          });

          personContainer.appendChild(nameSelect);
          personContainer.appendChild(userSelect);

      
          // Update the 'name' attribute when the selection changes
          nameSelect.addEventListener('change', () => {
            personContainer.setAttribute('name', nameSelect.value);
          });

          userSelect.addEventListener('change', () => {
            personContainer.setAttribute('user', userSelect.value);
          });
      

          checkbox.addEventListener('change', () => {
            if (checkbox.checked) {
             
              const selectedName = '3points';
              const selectedUser = userSelect.value;
              const giftNumber = "3";
              const giftImage = ''; 
              const giftAnimation = null; 
              const duration = null; 
              const abela = '';
          
              const usernamenew = personContainer.getAttribute('data-sender');
              const profilephoto2 = newUserId;
              
              checkbox.setAttribute('data-sender', usernamenew);
              
              // Pass the gift image URL and animation URL to the `gift` function
              gift(selectedUser, giftNumber, checkbox.getAttribute('data-sender'), selectedName, profilephoto2, giftImage, giftAnimation, duration, abela);adjustLines();
        
              checkbox.disabled = true;
            }
          });

          const sendGiftButton = document.createElement('button');
          sendGiftButton.classList.add('sendGiftButton');
          sendGiftButton.textContent = 'Send Gift';
          sendGiftButton.addEventListener('click', () => {
            const selectedName = nameSelect.value;
            const selectedUser = userSelect.value;

            const giftDetails = getGiftNumber(selectedName);
            
            const giftNumber = giftDetails.giftNumber; // Retrieve the gift number
            const giftImage = giftDetails.image; // Retrieve the gift image URL
            const giftAnimation = giftDetails.animation; // Retrieve the gift animation URL
            const duration = giftDetails.duration; // Retrieve the gift animation URL

            const usernamenew = personContainer.getAttribute('data-sender');
            const profilephoto2 = newUserId;
            
            sendGiftButton.setAttribute('data-sender', usernamenew);
            
            // Pass the gift image URL and animation URL to the `gift` function
            gift(selectedUser, giftNumber, sendGiftButton.getAttribute('data-sender'), selectedName, profilephoto2, giftImage, giftAnimation, duration);
            
            adjustLines();
          });
          personContainer.appendChild(sendGiftButton);
  

          inputContainer.appendChild(personContainer);
      
          newInputField.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
              sendMessage(personContainer);
            }
          });
      
          newSendButton.addEventListener('click', () => {
            sendMessage(personContainer);
          });
      


          deleteButton.addEventListener('click', () => {
            personContainer.remove();
            
            // Decrement the user count
            userCount--;
            handleUserCountChange(userCount);
          
            // Remove the user ID from the list
            delete userIDs[newUserId];
          
            // Update the count display
            const countDisplay = document.getElementById('userCount');
            countDisplay.textContent = userCount;
          });
      
          newUserNameInput.value = '';
          newUserIdInput.value = '';
      
          const chatContainerBottom = document.getElementById('chatContainerBottom');
          const highLevelJoined = document.querySelector('.highLevelJoined');
        
 
          
          function replaceExistingMessage(container, newMessage) {
            const existingMessage = container.querySelector('.messageContainerBottomMessage');
            if (existingMessage) {
              existingMessage.remove();
            }
          
            const messageContainer = document.createElement('div');
            messageContainer.classList.add('messageContainerBottomMessage');
            messageContainer.appendChild(newMessage);
            container.appendChild(messageContainer);
          }
          
          function replaceExistingHighMessage(container, newMessage) {
            const existingMessage = container.querySelector('.HighMessageContainer');
            if (existingMessage) {
              existingMessage.remove();

              
            }
          
            const messageContainer = document.createElement('div');
            messageContainer.classList.add('HighMessageContainer');
            messageContainer.appendChild(newMessage);
            container.appendChild(messageContainer);
          
            const highLevelJoined = document.querySelector('.highLevelJoined');
            highLevelJoined.style.left = '-200px'; // Start position
            highLevelJoined.style.display = 'block'; // Reset display
          
            setTimeout(() => {
              highLevelJoined.style.left = '10px'; // End position
            }, 10); // Adjust the timing as needed
          
            setTimeout(() => {
              highLevelJoined.style.display = 'none'; // Hide the highLevelJoined element after 3 seconds
              highLevelJoined.style.left = '-200px'; // Reset the position
            }, 3000); // Adjust the timing as needed
          }
      
          // Create and append the new message containers
          const messageContainer = document.createElement('div');
          messageContainer.classList.add('messageContainerBottomMessage');
      
          // Append profile photo to the message only if level is below 25
          if (parseInt(level) < 25 || level === '') {
            const profilePhoto = document.createElement('img');
            profilePhoto.src = './images/joined.png';
            profilePhoto.alt = 'tiktok';
            profilePhoto.classList.add('profilePhoto');
            messageContainer.appendChild(profilePhoto);
          }
      
          // Append level photo to the message
          if (level >= 25) {
            const levelPhoto = document.createElement('img');
            levelPhoto.src = `levels/${level}.png`;
              levelPhoto.classList.add('levelPhotoHigh');
            messageContainer.appendChild(levelPhoto);
          }
          
          if (!isArabic(newUserName)){
            if (level !== '') {
          if (level < 25) {
            const levelPhoto = document.createElement('img');
            levelPhoto.src = `levels/${level}.png`;
            levelPhoto.classList.add('levelPhoto');
            levelPhoto.style.paddingBottom = "0";
            messageContainer.appendChild(levelPhoto);
            }}}
          
          
          const spaceElement = document.createElement('span');
          
          messageContainer.appendChild(spaceElement);
          
          const messageText = document.createElement('span');
          messageText.classList.add(parseInt(level) >= 25 ? 'newUserNameHigh' : 'newUserName');
          
          const userNameText = document.createElement('span');
          userNameText.textContent = newUserName;


          const joinedText = document.createElement('span');
          joinedText.classList.add('joinedText');
          joinedText.textContent = ' joined';
          
          if (isArabic(newUserName) && parseInt(level) < 25) {
            userNameText.style.paddingLeft = '5px';
            messageText.appendChild(joinedText);
            messageText.appendChild(userNameText);
          }else if (!isArabic(newUserName) && parseInt(level) < 25) {
            messageText.appendChild(userNameText);
            messageText.appendChild(joinedText);
          }else if (!isArabic(newUserName) && parseInt(level) >= 25) {
            messageText.appendChild(userNameText);
            messageText.appendChild(joinedText);
           }else if (isArabic(newUserName) && parseInt(level) >= 25) {
            userNameText.style.paddingLeft = '5px';
            messageText.appendChild(userNameText);
            messageText.appendChild(joinedText);
           }else if (isArabic(newUserName) && level === '') {
            userNameText.style.paddingLeft = '5px';
            messageText.appendChild(joinedText);
            messageText.appendChild(userNameText);
           }else if (!isArabic(newUserName) && level === '') {
            messageText.appendChild(userNameText);
            messageText.appendChild(joinedText);
           }
          messageContainer.appendChild(messageText);

          if (isArabic(newUserName)){
            if (level !== '') {
            if (level < 25) {
              const levelPhoto = document.createElement('img');
              levelPhoto.src = `levels/${level}.png`;
              levelPhoto.classList.add('levelPhoto');
              levelPhoto.style.paddingLeft = '5px';
              messageContainer.appendChild(levelPhoto);
            }}}


          if (parseInt(level) >= 25) {
            replaceExistingHighMessage(highLevelJoined, messageContainer);
          } else {
            replaceExistingMessage(chatContainerBottom, messageContainer);
          }
        }

      } when adding a user for the first time save all the added info to a txt file user_info.txt , when trying to add a user again check if the user exists in the txt file if yes get all the info from that file if not proceed with the add user function,  my file is html , u can use javascript and php without removing any parts of the code