EVOLUTION-NINJA

Edit File: index.html

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

<title>Web Task</title>
  <style type="text/css">
    .plus-icon-container {
      position: relative;
      display: inline-block;
    }

.plus-icon {
      background-color: #EFF5FE;
      color: white;
      border: 0.5px solid #C7C7C7;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      font-size: 20px;
      cursor: pointer;
    }

.options-dropdown {
      display: none;
      position: absolute;
      top: 50px;
      left: 0;
      background-color: white;
      border: 1px solid #ddd;
      padding: 10px;
      z-index: 1;
    }

.upload-btn,
    .emoji-picker {
      display: block;
      padding: 5px;
      margin-bottom: 5px;
      cursor: pointer;
      background-color: #f1f1f1;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

.upload-btn:hover,
    .emoji-picker:hover {
      background-color: #ddd;
    }

/* ------------------------------------------------------------------------ */
    /* #upload-options{
    margin-top: -255px;
    width: 30%;
    margin-left: -40px;
    background-color: red;
    padding: 10px;
    border-radius: 12px;
} */
    .dropdown-menu {
      width: 130px;
      height: 137px;
      border: none;
      margin-bottom: 5px !important;
      padding: 16px;
      border-radius: 16px;
      background-color: #fff;
      box-shadow: 0px 1px 9px 0px rgba(176, 176, 176, 0.15);
    }

.dropdown-menu button {
      border: none;
      background: #ffffff;
      font-family: Inter;
      font-size: 12px;
      font-weight: 500;
      text-align: center;
      padding: 8px;
    }

.plus-i {
      color: #001E4A
    }

#cameraStream,
    #videoPreview,
    #imagePreview {
      /* width: 80%;
      border-radius: 10px; */
    }

/* 
    #captureButton {
      border: none;
      border-radius: 50%;
      padding: 1px;
      position: relative;
      top: 9px;
      left: -38px;

background-color: white;
      margin-left: -180px; */
    /* margin-top: 50px !important; */
    /* box-shadow: 0px 0px 7px 0px #00000042; */
    /* } */

/* #startVideoRecording,
    #stopVideoRecording {
      border: none;
      border-radius: 50%;
      padding: 1px;
      position: relative;
      top: 9px;
      left: -97px;

background-color: white;
    } */

/* #cancelButton {
      border: none;
      background-color: transparent;
      position: relative;
      top: -206px;
      left: -196px;
    } */

#cancelPreview,
    #addRecording {
      background-color: transparent;
    }

#addRecording>img {
      width: 30px;
    }

#startRecording {
      border: none;
      background-color: white;
    }

#stopRecording {
      height: 41px;
      border-radius: 25px;
      border: none;
      padding: 0px 15px;
      font-family: Inter;
      font-size: 14px;
      font-weight: 600;
      /* text-align: left;   */
      color: #AE160E;
      background-color: #EFF5FE;

}

#cancelRecording {
      height: 41px;
      border-radius: 25px;
      border: none;
      padding: 0px 15px;
      font-family: Inter;
      font-size: 14px;
      font-weight: 600;

background-color: #EFF5FE;
      /* text-align: left;   */
      color: #4F4F4F;

}

/* #addRecording {
      display: inline;
    border: none;
    background-color: transparent;
    margin-left: 280px;
    position: relative;
    top: -43px;
    } */

.messages-from-you audio {
      /* width: auto; */
      /* padding: 0px; */
      margin: 0px;
      height: 35px;
      /* margin-bottom: -5px;
      margin-left: -28px; */
      max-width: 100%;
    }

/* #confirmImageButton {
      margin-left: 100px;
      border: none;
      background-color: transparent;
      position: relative;
      top: -44px;
      left: 257px;
    } */

/* #cancelImagePreview {
      border: none;
      background-color: transparent;
  
      margin-left: 10px;
      position: relative;
      top: -220px;
      left: -154px;
    } */

/* #confirmVideoButton {
      border: none;
      background-color: transparent;
      margin-left: 100px;
      position: relative;
      top: -240px;
      left: 114px;
    }

#cancelVideoPreview {
      border: none;
      background-color: transparent;
      position: relative;
      top: -239px;
      left: -177x !important;
      right: 216px;
    } */

#imagePreview {
      width: 90%;
      height: 222px;
      margin-left: 22px;
    }

#filePreviewName {
      width: 100%;
      text-align: center;
      /* margin: 20px 0px; */
    }

#confirmFileButton {
      border: none;
      background: transparent;
      margin-left: 165px;
    }

#cancelFilePreview {
      border: none;
      background: transparent;
      margin-left: -18px;
    }

.image-cancel {
      /* position: relative !important;
  top: -289px !important; */
      position: relative;
      /* top: -70px; */
      /* height: 290px; */

}

/* ------------------------------------------------------------------------ */
    .typing-section {
      display: flex;
      align-items: end;
      width: 100%;
      gap: 8px;
      padding: 0px 20px;
      padding-top: 16px;
    }

.messages-from-you {
      text-align: left;
    }

.icons-container {
      display: flex;
      gap: 8px;
      margin-bottom: 6px;
    }

.send-button {
      border: none;
      background-color: transparent;
      margin-bottom: 7px;
    }

.message-input {
      padding: 8px 12px;
      border-radius: 30px;
      border: 1px solid var(--Border-Hard, #CCC);
      background: #FFF;
      width: 200px !important;
      max-height: 100px;
      /* Set max height of the textarea to 100px */
      outline: none;
      overflow-y: hidden;
      /* Initially hide the scrollbar */

resize: none;
      word-wrap: break-word;
      white-space: pre-wrap;
      line-height: 1.5;

/* Firefox */

/* WebKit Browsers (Chrome, Safari) */
      &::-webkit-scrollbar {
        width: 8px;
        /* Width of the scrollbar */
        display: none;
        /* Hide scrollbar */
      }

&::-webkit-scrollbar-thumb {
        background-color: #888;
        /* Color of the scrollbar thumb */
        border-radius: 10px;
        /* Roundness of the scrollbar thumb */
        height: 50px;
        /* Set the height of the scrollbar thumb */
      }

&::-webkit-scrollbar-thumb:hover {
        background-color: #555;
        /* Color when hovering over the scrollbar thumb */
      }

&::-webkit-scrollbar-track {
        background: #f1f1f1;
        /* Background of the scrollbar track */
        border-radius: 10px;
        /* Roundness of the track */
      }
    }
  </style>

</head>

<body>

<div class="top-section">
      <h3 class="task-heading">Logistics Company: Home page design</h3>
      <p class="task-details">Creating 7 home screen sections following all band guidelines. <a class="read-more"
          href="#" id="readMoreLink">Read more</a></p>
      <div id="overlay" class="overlay"></div>
      <div id="popup" class="popup">
        <div class="popup-content">
          <span class="close">×</span>
          <h3 class="task-heading">Logistics Company: Home page design</h3>
          <p class="task-details">This is the full paragraph that appears in the pop-up. It provides additional
            information and details about the home screen sections and band guidelines that are mentioned in the initial
            text. This full paragraph will be displayed when the user clicks on "Read more".</p>
        </div>
      </div>
      <div class="row">
        <div class="col-6">
          <div class="assignee-container">
            <img class="profile-photo" src="assets/profilephoto.png" alt="profilephoto">
            <div>
              <p class="assigned-to">Assigned to</p>
              <p class="assignee-name">Prajit</p>
            </div>
          </div>
        </div>
        <div class="col-6">
          <div class="timeline-container">
            <div class="calender-holder"><img class="calender-icon" src="assets/calendar-days.svg" alt="calendar-days">
            </div>
            <div>
              <p class="timeline">Timeline</p>
              <p class="timeline-value">1 Jan-25 Mar,24</p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-7 container-for-chips">
          <p class="task-id">Task ID: 1234</p>
          <p class="high-priority">High priority</p>
          <p class="project-name"><svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
              viewbox="0 0 16 16" fill="none">
              <path fill-rule="evenodd" clip-rule="evenodd"
                d="M13.2678 2.73223C12.2915 1.75592 10.7085 1.75592 9.73223 2.73223L6.73223 5.73223C5.75592 6.70854 5.75592 8.29146 6.73223 9.26777C6.93948 9.47501 7.17318 9.63769 7.42202 9.75656C7.67119 9.87559 7.77669 10.1741 7.65766 10.4232C7.53863 10.6724 7.24014 10.7779 6.99097 10.6589C6.64113 10.4918 6.31375 10.2635 6.02513 9.97487C4.65829 8.60804 4.65829 6.39196 6.02513 5.02513L9.02513 2.02513C10.392 0.658291 12.608 0.658291 13.9749 2.02513C15.3417 3.39196 15.3417 5.60804 13.9749 6.97487L12.8036 8.14619C12.6083 8.34145 12.2917 8.34145 12.0965 8.14619C11.9012 7.95093 11.9012 7.63434 12.0965 7.43908L13.2678 6.26777C14.2441 5.29146 14.2441 3.70854 13.2678 2.73223ZM8.34234 5.57676C8.46137 5.32758 8.75986 5.22208 9.00903 5.34112C9.35887 5.50824 9.68625 5.7365 9.97487 6.02513C11.3417 7.39196 11.3417 9.60804 9.97487 10.9749L6.97487 13.9749C5.60804 15.3417 3.39196 15.3417 2.02513 13.9749C0.658291 12.608 0.658291 10.392 2.02513 9.02513L3.19644 7.85381C3.3917 7.65855 3.70828 7.65855 3.90355 7.85381C4.09881 8.04907 4.09881 8.36566 3.90355 8.56092L2.73223 9.73223C1.75592 10.7085 1.75592 12.2915 2.73223 13.2678C3.70854 14.2441 5.29146 14.2441 6.26777 13.2678L9.26777 10.2678C10.2441 9.29146 10.2441 7.70854 9.26777 6.73223C9.06052 6.52499 8.82682 6.36232 8.57798 6.24344C8.32881 6.12441 8.22331 5.82593 8.34234 5.57676Z"
                fill="#0B71D0"></path>
            </svg> Project ABCD</p>
        </div>
        <div class="col-5 d-flex justify-content-end">
          <div class="progress-circle-1">
            <svg viewbox="0 0 140 140" class="progress-svg-1">
              <circle class="progress-background-1" cx="70" cy="70" r="60"></circle>
              <circle class="progress-bar-1" cx="70" cy="70" r="60"></circle>
            </svg>
            <div class="progress-content-1">
              <h2 class="progress-display" id="percentValue-1">0<span>%</span></h2>
            </div>
          </div>
        </div>
      </div>
    </div>

<div class="tab-container">
      <div class="tabs justify-content-between">
        <div class="navtab active" data-target="subtask">
          Sub-tasks
        </div>
        <div class="navtab" data-target="attachments">
          Attachments
        </div>
        <div class="navtab" data-target="updates" id="updatesTab">
          Updates
        </div>
        <div class="underline"></div>
      </div>
      <div id="subtask" class="content active">
        <form class="mb-5">

<div class="separate-subtask d-flex justify-content-between align-items-center">
            <p class="m-0">Daily work report</p>
            <a class="respond-link" href="">Respond</a>
          </div>

<div class="separate-subtask">
            <input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="value1">
            <label for="styled-checkbox-1">Navbar design</label>
          </div>

<div class="separate-subtask">
            <input class="styled-checkbox" id="styled-checkbox-2" type="checkbox" value="value1">
            <label for="styled-checkbox-2">Hero section design</label>
          </div>

<div class="separate-subtask">
            <input class="styled-checkbox" id="styled-checkbox-3" type="checkbox" value="value1">
            <label for="styled-checkbox-3">About us section</label>
          </div>

<div class="separate-subtask">
            <input class="styled-checkbox" id="styled-checkbox-4" type="checkbox" value="value1">
            <label for="styled-checkbox-4">Service section</label>
          </div>

<div class="separate-subtask">
            <input class="styled-checkbox" id="styled-checkbox-5" type="checkbox" value="value1">
            <label for="styled-checkbox-5">Why choose us section </label>
          </div>

<div class="separate-subtask">
            <input class="styled-checkbox" id="styled-checkbox-6" type="checkbox" value="value1">
            <label for="styled-checkbox-6">Option 6</label>
          </div>

<div class="separate-subtask">
            <input class="styled-checkbox" id="styled-checkbox-7" type="checkbox" value="value1">
            <label for="styled-checkbox-7">Option 7</label>
          </div>

<div class="separate-subtask">
            <input class="styled-checkbox" id="styled-checkbox-8" type="checkbox" value="value1">
            <label for="styled-checkbox-8">Option 8</label>
          </div>
        </form>
        <div class="mark-as-complete-button-container">
          <button class="mark-as-complete-button">Mark as Complete</button>
        </div>
      </div>
      <div id="attachments" class="content">
        <p class="date">Today</p>
        <div>

</div>
              <a href="path/to/your/file.pdf" download="filename.pdf" class="download-file-button"><img
                  src="assets/arrow-down-tray.svg" alt="arrow-down-tray"></a>
            </div>

<p class="d-flex flex-column justify-content-start ps-3 m-0">
                  <span class="file-name align-items-start">Testimonials. csv</span>
                  <span class="file-size align-items-start ">125KB</span>
                </p>
              </div>
              <a href="path/to/your/file.pdf" download="filename.pdf" class="download-file-button"><img
                  src="assets/arrow-down-tray.svg" alt="arrow-down-tray"></a>
            </div>
          </div>

<div class="d-flex flex-row align-items-center user-who-sends mt-3">
            <img class="user-image-in-chat" src="assets/user2.png" alt="profilephoto">
            <p class="user-name-in-chat px-1">Nikhil</p>
          </div>

<p class="d-flex flex-column justify-content-start ps-3 m-0">
                  <span class="file-name align-items-start">Contract Details. pdf</span>
                  <span class="file-size align-items-start ">125KB</span>
                </p>
              </div>
              <a href="path/to/your/file.pdf" download="filename.pdf" class="download-file-button"><img
                  src="assets/arrow-down-tray.svg" alt="arrow-down-tray"></a>
            </div>
            <div class="file">
              <div class="d-flex flex-row align-items-center">
                <img src="assets/Video.svg" alt="Csv">

<p class="d-flex flex-column justify-content-start ps-3 m-0">
                  <span class="file-name align-items-start">Video Tutorial .Mp4</span>
                  <span class="file-size align-items-start ">20MB</span>
                </p>
              </div>
              <a href="path/to/your/file.pdf" download="filename.pdf" class="download-file-button"><img
                  src="assets/arrow-down-tray.svg" alt="arrow-down-tray"></a>
            </div>

<p class="d-flex flex-column justify-content-start ps-3 m-0">
                  <span class="file-name align-items-start">Google Sheet. XLSX</span>
                  <span class="file-size align-items-start ">20MB</span>
                </p>
              </div>
              <a href="path/to/your/file.pdf" download="filename.pdf" class="download-file-button"><img
                  src="assets/arrow-down-tray.svg" alt="arrow-down-tray"></a>
            </div>

<p class="d-flex flex-column justify-content-start ps-3 m-0">
                  <span class="file-name align-items-start">Voice clip. mp3</span>
                  <span class="file-size align-items-start ">2MB</span>
                </p>
              </div>
              <a href="path/to/your/file.pdf" download="filename.pdf" class="download-file-button"><img
                  src="assets/arrow-down-tray.svg" alt="arrow-down-tray"></a>
            </div>

</div>

<div id="imagePreviewContainer" style="display: none;">
        <img id="imagePreview" />
        <button id="confirmImageButton"><img src="assets/Send.png" alt=""></button>
        <button id="cancelImagePreview"><img src="assets/Delete.png" class="image-cancel" alt=""></button>
      </div>

<div id="updates" class="content">
        <p class="date">Today</p>

<div id="cameraContainer" style="display: none;">
          <video id="cameraStream" autoplay playsinline></video>
          <button id="captureButton" title="Capture Image"><img src="assets/Camera (1).png" alt=""></button>
          <button id="cancelButton" title="Cancel"><img src="assets/Delete.png" alt=""></button>

<button id="startVideoRecording" title="Start Video Recording"><img src="assets/startRecording.png"
              alt=""></button>
          <button id="stopVideoRecording" title="Stop Video Recording" style="display: none;"><img
              src="assets/stopRecording.png" alt=""></button>
        </div>

<canvas id="cameraCanvas" style="display: none;"></canvas>

<div id="recordContainer" style="display: none;">
          
          <button id="stopRecording" style="display: none;"> <img src="assets/Stop_fill.png" alt="sendicon"> Stop
            Recording</button>
          <button id="cancelRecording" style="display: none;"><img src="assets/Cancel (1).png" alt="sendicon"></button>

<audio id="audioPreview" controls style="display: none; height:35px"></audio>
          <button id="cancelPreview" style="display: none;"><img src="assets/Cancel (1).png" alt="sendicon"></button>

<button id="addRecording" style="display: none;"><img src="assets/icon _send_.png" alt="sendicon"></button>
        </div>

<div class="d-flex flex-row align-items-end justify-content-end">

<div class="btn-group dropup">
                <button id="plus-icon" class="plus-icon" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                  <i class="fa fa-plus plus-i rotateImage" aria-hidden="true"></i>
                </button>

<div id="upload-options" class="dropdown-menu" style="display:none;">
                  <input type="file" id="image-upload" accept="image/*" style="display:none;">
                  <button id="raise-hand" class="option-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none">
                      <path
                        d="M10.05 4.575C10.05 3.70515 9.34486 3 8.47501 3C7.60516 3 6.90001 3.70515 6.90001 4.575L6.9 7.575M10.05 4.575L10.05 3.075C10.05 2.20515 10.7552 1.5 11.625 1.5C12.4949 1.5 13.2 2.20515 13.2 3.075L13.2 4.575M10.05 4.575L10.125 10.5M13.2 11.25V4.575M13.2 4.575C13.2 3.70515 13.9052 3 14.775 3C15.6449 3 16.35 3.70515 16.35 4.575V15M6.9 7.575C6.9 6.70515 6.19485 6 5.325 6C4.45515 6 3.75 6.70515 3.75 7.575V15.75C3.75 19.4779 6.77208 22.5 10.5 22.5H12.5179C13.9103 22.5 15.2456 21.9469 16.2302 20.9623L17.9623 19.2302C18.9469 18.2456 19.5 16.9103 19.5 15.5179L19.5031 13.494C19.5046 13.3209 19.5701 13.1533 19.7007 13.0227C20.3158 12.4076 20.3158 11.4104 19.7007 10.7953C19.0857 10.1802 18.0884 10.1802 17.4733 10.7953C16.7315 11.5371 16.3578 12.5111 16.3531 13.4815M6.9 7.575V12M13.17 16.318C13.5599 15.9281 14.0035 15.6248 14.477 15.4079C15.0701 15.1362 15.71 15.0003 16.35 15M16.3519 15H16.35"
                        stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    Raise Request
                  </button>

<button id="select-file">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none">
                      <path
                        d="M19.5 14.25V11.625C19.5 9.76104 17.989 8.25 16.125 8.25H14.625C14.0037 8.25 13.5 7.74632 13.5 7.125V5.625C13.5 3.76104 11.989 2.25 10.125 2.25H8.25M10.5 2.25H5.625C5.00368 2.25 4.5 2.75368 4.5 3.375V20.625C4.5 21.2463 5.00368 21.75 5.625 21.75H18.375C18.9963 21.75 19.5 21.2463 19.5 20.625V11.25C19.5 6.27944 15.4706 2.25 10.5 2.25Z"
                        stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    Documents
                  </button>
                  <input type="file" id="file-upload" accept=".pdf,.doc,.docx,.txt" style="display:none;">
                  <button id="select-image">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none">
                      <path
                        d="M2.25 15.75L7.40901 10.591C8.28769 9.71231 9.71231 9.71231 10.591 10.591L15.75 15.75M14.25 14.25L15.659 12.841C16.5377 11.9623 17.9623 11.9623 18.841 12.841L21.75 15.75M3.75 19.5H20.25C21.0784 19.5 21.75 18.8284 21.75 18V6C21.75 5.17157 21.0784 4.5 20.25 4.5H3.75C2.92157 4.5 2.25 5.17157 2.25 6V18C2.25 18.8284 2.92157 19.5 3.75 19.5ZM14.25 8.25H14.2575V8.2575H14.25V8.25ZM14.625 8.25C14.625 8.45711 14.4571 8.625 14.25 8.625C14.0429 8.625 13.875 8.45711 13.875 8.25C13.875 8.04289 14.0429 7.875 14.25 7.875C14.4571 7.875 14.625 8.04289 14.625 8.25Z"
                        stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    Gallery
                  </button>
                </div>
              </div>

<textarea id="text-message" class="message-input" placeholder="Type a message..."></textarea>

<a href="#" id="cameraLink" class="icon camera-icon">
                  
                  <img src="assets/Camera.png" alt="">
                </a>

</div><button class="send-button" id="send-text"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                  height="24" viewbox="0 0 24 24" fill="none">
                  <path
                    d="M3.47779 2.4043C3.21306 2.3274 2.92747 2.40193 2.73407 2.5984C2.54068 2.79487 2.47066 3.0816 2.55174 3.3451L4.98402 11.25H13.4998C13.914 11.25 14.2498 11.5858 14.2498 12C14.2498 12.4142 13.914 12.75 13.4998 12.75H4.98403L2.55183 20.6546C2.47076 20.9181 2.54077 21.2049 2.73417 21.4013C2.92756 21.5978 3.21315 21.6723 3.47789 21.5954C10.1765 19.6494 16.3972 16.5814 21.923 12.6087C22.119 12.4678 22.2352 12.2412 22.2352 11.9998C22.2352 11.7583 22.119 11.5317 21.923 11.3908C16.3971 7.41817 10.1764 4.35021 3.47779 2.4043Z"
                    fill="#5864DB"></path>
                </svg></button>
            </div>
          </div>
          <div id="myModal" class="modal">
            <div class="modal-content">
              <h3 class="progress-heading">Progress</h3><span class="close" id="closeModal">×</span>
              <div class="progress-container d-flex flex-column">
                <div class="progress-circle">
                  <svg viewbox="0 0 140 140" class="progress-svg">
                    <circle class="progress-background" cx="70" cy="70" r="60"></circle>
                    <circle class="progress-bar" cx="70" cy="70" r="60"></circle>
                  </svg>
                  <div class="progress-content">
                    <input type="number" class="progress-input" id="percentInput" value="0" min="0" max="100">
                  </div>
                </div><button class="submit-button" id="submitButton">Save Progress</button>
              </div>
            </div>
          </div>

<a class="file-option mb-3 d-flex align-items-center" href="#"><svg xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" viewbox="0 0 24 24" fill="none">
                <path
                  d="M10.05 4.575C10.05 3.70515 9.34486 3 8.47501 3C7.60516 3 6.90001 3.70515 6.90001 4.575L6.9 7.575M10.05 4.575L10.05 3.075C10.05 2.20515 10.7552 1.5 11.625 1.5C12.4949 1.5 13.2 2.20515 13.2 3.075L13.2 4.575M10.05 4.575L10.125 10.5M13.2 11.25V4.575M13.2 4.575C13.2 3.70515 13.9052 3 14.775 3C15.6449 3 16.35 3.70515 16.35 4.575V15M6.9 7.575C6.9 6.70515 6.19485 6 5.325 6C4.45515 6 3.75 6.70515 3.75 7.575V15.75C3.75 19.4779 6.77208 22.5 10.5 22.5H12.5179C13.9103 22.5 15.2456 21.9469 16.2302 20.9623L17.9623 19.2302C18.9469 18.2456 19.5 16.9103 19.5 15.5179L19.5031 13.494C19.5046 13.3209 19.5701 13.1533 19.7007 13.0227C20.3158 12.4076 20.3158 11.4104 19.7007 10.7953C19.0857 10.1802 18.0884 10.1802 17.4733 10.7953C16.7315 11.5371 16.3578 12.5111 16.3531 13.4815M6.9 7.575V12M13.17 16.318C13.5599 15.9281 14.0035 15.6248 14.477 15.4079C15.0701 15.1362 15.71 15.0003 16.35 15M16.3519 15H16.35"
                  stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                </path>
              </svg> Raise Request</a>

<a href="" class="documents-option mb-3 d-flex align-items-center"><svg xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" viewbox="0 0 24 24" fill="none">
                <path
                  d="M19.5 14.25V11.625C19.5 9.76104 17.989 8.25 16.125 8.25H14.625C14.0037 8.25 13.5 7.74632 13.5 7.125V5.625C13.5 3.76104 11.989 2.25 10.125 2.25H8.25M10.5 2.25H5.625C5.00368 2.25 4.5 2.75368 4.5 3.375V20.625C4.5 21.2463 5.00368 21.75 5.625 21.75H18.375C18.9963 21.75 19.5 21.2463 19.5 20.625V11.25C19.5 6.27944 15.4706 2.25 10.5 2.25Z"
                  stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg> Documents</a>

</div>

</div>
  </div>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

#messagesContainer {
      margin-top: 20px;
      height: 300px;
      padding-bottom: 55px;
      overflow-y: scroll;
      float: right;
      scrollbar-width: none;
      width: 80%;
      display: flex;
      flex-direction: column;
      align-items: end;
      overflow-wrap: break-word;

}

/* record css */
    #recordContainer {
      width: 428px;
      background-color: white;
      box-shadow: 0px 0px 5px #ccc;
      border-radius: 15px;
      padding: 4px 9px;
      position: fixed;
      z-index: 1000;
      height: 58px;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
      animation: recor ease-in-out;
      align-items: center;
      justify-content: space-between;

}

#addRecording,
    #cancelRecording,
    #cancelPreview {
      border: none;
      outline: none;
      color: #434343;
      font-weight: 500;
    }

#startRecording {
      border: none;
      background: none !important;
    }

#stopRecording {
      display: inline;
      padding: 5px 29px;
      border-radius: 25px;
      border: 0.5px solid #EFF5FE;
      color: #AE160E;
      font-size: 14px;
      font-weight: 400;

}

@media only screen and (max-width:628px) {
      #recordContainer {
        width: 96%;
      }

}

@keyframes recor {
      0% {
        transform: translateX(500px);
        opacity: 0;
      }

100% {
        transform: translateX(0%);
        opacity: 1;
      }
    }
  </style>

// Add event listeners to the buttons
    selectImageBtn.addEventListener('click', hideDropdown);
    selectFileBtn.addEventListener('click', hideDropdown);
    raiseHandBtn.addEventListener('click', hideDropdown);

// Function to hide the dropdown div
    function hideDropdown() {
      if (uploadOptions.style.display !== 'none') {
        uploadOptions.style.display = 'none';
      }
    }

</script>
  <script>
    const button = document.querySelector('#plus-icon');
    const rotateImage = document.querySelector('.rotateImage');
    //  const menu = document.querySelector('#upload-options');

// Toggle rotation when plus icon is clicked
    button.addEventListener('click', function (event) {
      event.stopPropagation(); // Prevent event from bubbling up to the document
      rotateImage.classList.toggle('rotate'); // Add or remove rotation class
    });

//Close the dropdown and remove rotation class if the user clicks outside of it
    document.addEventListener('click', function (event) {
      const dropup = document.querySelector('.btn-group.dropup');

// If the click is outside the dropup button and dropdown menu
      if (!dropup.contains(event.target)) {
        rotateImage.classList.remove('rotate'); // Remove rotation class
      }
    });
  </script>

<script>
    const textarea = document.getElementById('text-message');

// Set the initial height (based on the expected single-line height)
    const initialHeight = '40px';
    textarea.style.height = initialHeight; // Set the initial height on page load

textarea.addEventListener('input', function () {
      // Reset height back to the initial value on every input to recalculate properly
      this.style.height = initialHeight;

// Check if the value is empty, reset to initial height
      if (this.value === '') {
        this.style.height = initialHeight;
        this.style.overflowY = 'hidden'; // Hide scrollbar when empty
      } else {
        // Calculate the scroll height
        const scrollHeight = this.scrollHeight;

// Set the height based on the scrollHeight, ensuring we stay within the max-height
        if (scrollHeight > parseInt(initialHeight)) {
          this.style.height = scrollHeight + 'px';
          // Set overflow to auto only if scrollHeight exceeds max-height
          this.style.overflowY = scrollHeight > 153 ? 'auto' : 'hidden';
        } else {
          this.style.height = initialHeight;
          this.style.overflowY = 'hidden'; // Hide scrollbar when below initial height
        }
      }
    });

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

transform: rotate(45deg);

}
  </style>

#imagePreview {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100vw;
      height: 100%;
      object-fit: scale-down;
      background-color: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 999;
      margin-left: initial;
      overflow: hidden;
    }

#cameraContainer {
      position: relative;
      width: 100%;
      height: 100%;
      display: none;
      justify-content: center;
      align-items: center;
      background-color: black;
    }

#cameraStream {
      width: 33%;
      height: 100%;
      object-fit: scale-down;
      z-index: 1;
      background: black;
    }

#captureButton,
    #cancelButton {
      position: absolute;
      z-index: 2;
      background-color: rgba(0, 0, 0, 0.6);
      border: none;
      padding: 10px;
      border-radius: 50%;
      cursor: pointer;
    }

#captureButton img,
    #cancelButton img {
      width: 40px;
      height: 40px;
    }

#captureButton {
      position: fixed;
      bottom: 10px;

}

#cancelButton {
      position: fixed;
      top: 20px;
      left: 20px;
    }

#startVideoRecording,
    #stopVideoRecording {
      /* position: absolute; */
      z-index: 2;
      position: fixed;
      bottom: 10px;
      left: 56%;
      background-color: rgba(0, 0, 0, 0.6);
      border: none;
      padding: 10px;
      border-radius: 50%;
      cursor: pointer;
    }

#startVideoRecording img,
    #stopVideoRecording img {
      width: 40px;
      height: 40px;
    }

/* #startVideoRecording {
      top: -70px;
      left: 340px;
    }

#stopVideoRecording {
      bottom: 6px;
      left: 342px;
      display: none;
    } */

#confirmImageButton img,
    #cancelImagePreview img {
      width: 40px;
      height: 40px;
    }

#confirmImageButton {
      position: fixed;
      bottom: 20px;
      right: 20px;
    }

#cameraContainer {
      position: relative;
      display: block;
      width: 100%;
      height: auto;
    }

#confirmImageButton,
    #cancelImagePreview {
      z-index: 999;
      background-color: rgba(0, 0, 0, 0.6);
      border: none;
      padding: 10px;
      border-radius: 50%;
      cursor: pointer;
    }

.show-buttons #confirmImageButton,
    .show-buttons #cancelImagePreview {
      display: block;
    }

#confirmImageButton {
      position: fixed;
      bottom: 10px;

}

#cancelImagePreview {
      position: fixed;

left: 20px;
      top: 20px;
    }

#imagePreview {
      object-fit: scale-down;
      background-color: black;
    }

#cameraContainer {
      position: relative;
      width: 100%;
      height: 100%;
    }

#confirmVideoButton,
    #cancelVideoPreview {

z-index: 999;
      background-color: rgba(0, 0, 0, 0.6);
      border: none;
      padding: 10px;
      border-radius: 50%;
      cursor: pointer;
    }

#confirmVideoButton {
      position: fixed;
      top: 10px;
      right: 10px;
    }

#cancelVideoPreview {
      position: fixed;
      top: 10px;
      left: 10px;

}

#videoPreview {
      background-color: black;
      object-fit: scale-down;
    }

#confirmVideoButton img,
    #cancelVideoPreview img {
      width: 40px;
      height: 40px;
    }

#confirmVideoButton,
    #cancelVideoPreview {
      display: block;
    }

#confirmFileButton {
      position: fixed;
      right: 11px;
      bottom: 20px;
      border: none;
      background: transparent;
      margin-left: 0px;
    }

#cancelFilePreview {
      position: fixed;
      left: 10px;
      bottom: 20px;
      border: none;
      background: transparent;
      margin-left: 0px;
    }

.filsenpcan {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

#previewContent {
      height: 81vh;
      max-height: 857px !important;
      overflow-y: scroll;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

#filePreviewContainer {
      display: none;
      width: 428px;
      margin: auto;
      box-shadow: 0px 0px 2px #ccc;
      background-color: white;
      position: fixed;
      top: 0px;
      z-index: 1111;
      bottom: 0;
    }

@media only screen and (min-width:369px) and (max-width: 600px) {
      #cameraStream {
        width: 100%;
        height: 100%;
        object-fit: scale-down;
        z-index: 1;
        background: black;
      }

#cameraStream,
      #videoPreview,
      #imagePreview {
        margin-left: 0px;
      }

#captureButton {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 19px;
        /* left: 88%; */
      }

#cancelButton {
        position: fixed;
        top: 10px;
        left: 10px;
        right: initial;
        float: left;
        /* top: 116px; */
      }

#startVideoRecording {
        position: fixed;
        bottom: 19px;
        top: initial;
        left: initial;
        right: 19%;
        /* transform: translateX(-40%); */
        /* top: 54px; */
        /* left: 307px; */
      }

#imagePreview {
        object-fit: scale-down;
        background-color: black;
        width: 100%;
      }

#cancelImagePreview {
        position: fixed;
        /* 
        top: 441px;
        right: 10px; */
        left: 29px !important;
        bottom: 19px !important;
        top: initial;
        right: initial
      }

#confirmImageButton {
        position: fixed;

/* bottom: 406px !important;
        right: 10px !important; */
        bottom: 19px !important;
        right: 29px !important;
      }

#stopVideoRecording {
        position: fixed;
        bottom: 19px;
        top: initial;
        left: initial;
        right: 19%;
        display: none;
      }

#videoPreview {
        background-color: black;
        object-fit: scale-down;
        width: 100%;
      }

#cancelVideoPreview {
        position: fixed;
        top: 18px;
        left: 18px;
        bottom: initial;
        right: initial
      }

#confirmVideoButton {
        position: fixed;
        top: 18px;
        right: 18px;
        bottom: initial;
      }

#filePreviewContainer {
        width: 100%;
        height: 100vh;
      }

#previewContent {
        /* height: auto; */
      }
    }

@media only screen and (max-width:320px) {
      #previewContent {
        /* 71vw */
        width: 93vw;
        max-height: 70vh !important;
        height: 452px;
        overflow-y: scroll;
        margin: auto;
      }
      #confirmImageButton,#cancelImagePreview {
        bottom:50px !important
      }
    }

@media only screen and (max-width:368px) {

/* #previewContent {
        height: 400px;
        width:100%
      } */

#previewContent {
        width: 93vw;
        max-height: 79vh !important;
        height: 539px;
        overflow-y: scroll;
        margin: auto;
      }

.messages-from-you {
        max-width: 221px;
      }

#filePreviewContainer {
        width: 100vw;
      }

#imagePreview {
        /* position: fixed; */
        /* top: 33%; */
        /* left: -463px; */
        /* height: 275px; */
        width: 100% !important;
        display: flex;
        z-index: 999;
      }

#confirmImageButton {
        position: fixed;
        bottom: 25px;
        right: 29px;
        top: initial;
        left:initial;
      }

#cancelImagePreview {
        position: fixed;
        /* top: 20px !important;
        left: 30px !important; */
        left: 29px !important;
        bottom: 25px !important;
        top: initial;
        right: initial
      }

#cameraStream,
      #videoPreview {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw !important;
        height: 100%;
        object-fit: scale-down;
        /* background-color: rgba(0, 0, 0, 0.8); */
        display: flex;
        margin-left: initial;
      }

#captureButton {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 19px;
        /* left: 88%; */
      }

#cancelButton {
        position: fixed;
        top: 10px;
        left: 10px;
        right: initial;
        float: left;
        /* top: 116px; */
      }

#stopVideoRecording {
        position: fixed;
        bottom: 19px;
        top: initial;
        left: initial;
        right: 19%;
        display: none;
      }

#cancelVideoPreview {
        position: fixed;
        top: 18px;
        left: 18px;
        bottom: initial;
        right: initial
      }

#confirmVideoButton {
        position: fixed;
        top: 18px;
        right: 18px;
        bottom: initial;
      }
    }

/* ----------------------------for tablets------------------------------- */
    /* @media only screen and (min-width: 768px) and (max-width: 1024px) {

#cameraStream {
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: 1;
        background: black;
      }

#cameraStream,
      #videoPreview,
      #imagePreview {
        margin-left: 0px;
      }

#captureButton {
        bottom: -242px;
        left: 480px;
      }

#cancelButton {
        right: -151px;
        float: right;
        top: 316px;
      }

#startVideoRecording {
        top: 250px;
        left: 480px;
      }

#imagePreview {
        object-fit: contain;
        background-color: black;
        width: 100%;
      }

#cancelImagePreview {
        position: fixed;
        left: 29px !important;
        bottom: 50px !important;
        top: initial;
        right: initial
      }

#confirmImageButton {
        position: fixed;
        bottom: 50px;
        right: 29px;
        left:initial;
        top:initial
      }

#stopVideoRecording {
        bottom: -309px;
        left: 479px;
        display: none;
      }

#videoPreview {
        background-color: black;
        object-fit: contain;
        width: 100%;
      }

#cancelVideoPreview {
        top: 815px;
        right: 10px;
      }

#confirmVideoButton {
        bottom: 376px;
        right: 10px;
      }

#previewContent {
        height: 804px;
        max-height: 840px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    } */
  </style>
</body>

</html>