index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Local Party</title>
    <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/inter-ui@3.15.1/inter.min.css">
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">
    <!-- Icons -->
    <script src="https://kit.fontawesome.com/abc159cb0a.js" crossorigin="anonymous"></script>
    <link rel="shortcut icon" href="icon.png">
    <!-- Notyf -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
    <script defer src="render.js"></script>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <!-- Landing Page -->
    <div class="landing" id="landing">
      <div class="container-fluid main">
        <div class="row">
          <div class="col-12 logo text-center">
            <img src="icon.png" width="300px" alt="Logo">
          </div>
        </div>
        <div class="row">
          <div class="col-12 text-center">
            <h1 class="head">
              Local Party
            </h1>
          </div>
          <div class="col-12 text-center mt-4">
            <button class="buttons" id="createRoomButton">
              Create Room
            </button>
          </div>
          <div class="col-12 mt-4 text-center">
            <button class="buttons" id="joinRoomButton">
              Join Room
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Create Page -->
    <div class="create" id="create">
      <div class="container-fluid">
        <div class="row mt-3">
          <div class="col-1 text-center">
            <i class="fas fa-arrow-left back-btn" id="backButton"></i>
          </div>
        </div>
        <div class="row">
          <div class="col-12 text-center create-col">
            <h1 class="create-head">
              Create Room
            </h1>
          </div>
          <div class="col-12 text-center mt-2">
              <p id="createRoomText"></p>
              <div>
                <div class="mt-1 mb-1">
                  <input 
                  class=""
                  type="text"
                  name="username"
                  id="create-username"
                  placeholder="username"
                  autocomplete="off"
                  required
                >
                </div>
                <div class="mt-3">
                  <input 
                  class=""
                  type="text"
                  name="roomname"
                  id="roomname"
                  placeholder="room name"
                  autocomplete="off"
                  required
                >
                </div>
                <div class="mt-4">
                  <label for="file-id" class="form-label">Select Video File</label>
                  <input type="file" class="form-control fileInput" id="file-id" onchange="onChangeFile();">
                  <br>
                  <p id="filePathText"></p>
                </div>
                <div class="mt-4"></div>
                  <label for="sub-file-id" class="form-label">Select Subtitle File</label>
                  <input type="file" class="form-control fileInput" id="sub-file-id" onchange="onChangeSubFile();">
                  <br>
                  <p id="subFilePathText"></p>
                </div>
              </div>
              <div class="mt-4">
                  <button class="buttons" style="width: 10rem;" id="roomCreateButton">
                    Create
                  </button>
              </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Join Page -->
    <div class="join" id="join">
      <div class="container-fluid">
        <div class="row mt-3">
          <div class="col-1 text-center">
            <i class="fas fa-arrow-left back-btn" id="backButton"></i>
          </div>
        </div>
        <div class="row">
          <div class="col-12 text-center join-col">
            <h1 class="create-head">
              Join Room
            </h1>
          </div>
          <div class="col-12 text-center mt-3">
              <p id="joinRoomText"></p>
              <div class="mt-1 mb-1">
                <input 
                class=""
                type="text"
                name="username"
                id="join-username"
                placeholder="username"
                autocomplete="off"
                required
              >
              </div>
              <div class="mt-3">
                <input 
                class=""
                type="text"
                name="roomCode"
                id="roomCode"
                placeholder="room code"
                autocomplete="off"
                required
              >
              </div>
              <div class="mt-4">
                <label for="join-file-id" class="form-label">Select Video File</label>
                <input type="file" class="form-control fileInput" id="join-file-id" onchange="onChangeJoinFile();">
                <br>
                <p id="filePathText"></p>
              </div>
              <div class="mt-4">
                <label for="join-sub-file-id" class="form-label">Select Subtitle File</label>
                <input type="file" class="form-control fileInput" id="join-sub-file-id" onchange="onChangeJoinSubFile();">
                <br>
                <p id="subFilePathText"></p>
              </div>
              <div class="mt-4">
                <button class="buttons" style="width: 10rem;" id="roomJoinButton">
                  Join
                </button>
              </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Room Page -->
    <div class="room" id="room">
      <div class="container-fluid">
        <div class="row">
            <div class="col-9 left-side">
                <div class="video video-player-conatiner">
                    <video
                      id="video-player"
                      class="video-js vjs-big-play-centered"
                      controls
                      preload="metadata"
                      data-setup='{}'
                    >
                      <source id="videoSrc" src="test.mp4" type="video/mp4" />
                      <track id="subtitleTrack" kind="subtitles" src="" srclang="en" label="English" default>
                    </video>
                  </div>
                  <!-- <img src="loading.gif" alt="loader" id="loader"/> -->
            </div>
            <div class="col-3 right-side">
                <div class="row mt-3">
                    <div class="col-12 text-center">
                        <h6 class="room-code" id="roomNameText">Room Name</h6>
                    </div>
                </div>
                <hr class="mt-1" style="height: 0.1rem; width: 90%; background-color: white; margin: auto;">
                <div class="row mt-3">
                    <div class="col-12">
                        <div class="row">
                            <div class="col-2 text-center" data-toggle="tooltip" data-placement="bottom" title="Leave Party">
                                <i class="fas fa-sign-out-alt icon" id="roomLeaveButton"></i>
                            </div>
                            <div class="col-8 text-center">
                                <h6 class="room-code" data-toggle="tooltip" data-placement="left" title="Room Code" id="roomCodeText">1234</h6>
                            </div>
                            <div class="col-2 text-center">
                                <h6 id="pplinparty" class="members" data-toggle="tooltip" data-placement="left" title="People in party: 1">
                                    <i class="fas fa-user-friends"></i>
                                </h6>
                            </div>
                        </div>
                        <div class="row mt-2 mb-2 messages" id="messages-box">
                          
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="row justify-content-center chattimg">
                                  <form action="#" id="send-form">
                                    <div class="col-12">
                                      <input 
                                        autocomplete="off"
                                        class="form-control"
                                        type="text"
                                        name="messageInp"
                                        id="messageInp"
                                        placeholder="Message"
                                      >
                                    </div>
                                  </form>
                                </div>
                            </div>
                          </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
    <script src="https://local-party.herokuapp.com/socket.io/socket.io.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
  </body>
</html>