index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./css/libraries/tailwind.css" rel="stylesheet" type="text/css">
  <script src="./js/libraries/particles.min.js"></script>
  <script src="./js/particles.js" defer></script>
  <link rel="stylesheet" href="./css/style.css">
  <script src="./js/rammerhead.js"></script>
  <script src="./js/modal.js" defer></script>
</head>
<body>
    <div id="particles-js"></div>
    <header class="px-4 py-2 bg-gray-700">
      <div class="container flex items-center justify-between mx-auto">
        <img
          src="https://github.com/Ruby-Network/.github/raw/main/ruby.png"
          width="50"
          alt="Natant Network Logo"
        />
        <strong  class="text-xl text-white">Vitro</strong>
        <button
          class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700 modal-open"
        >
          Settings
        </button>
      </div>
    </header>
    <modal>
      <div class="modal opacity-0 transition-opacity ease-in duration-100 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
        <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
    
        <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
    
          <div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
            <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
              <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
            </svg>
            <span class="text-sm">(Esc)</span>
          </div>
    
          <!-- Add margin if you want to see some of the overlay behind the modal-->
          <div class="modal-content py-4 text-center px-6">
            <!--Title-->
            <div class="flex justify-between items-center pb-3">
              <p class="text-2xl font-bold">Settings</p>
              <div class="modal-close cursor-pointer z-50">
                <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                  <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                </svg>
              </div>
            </div>
    
            <!-- SESSION-->
            <div class="border">
            <!-- <button class="bg-gray-800" id="session-create-btn">Create Session Id</button> -->
            <div class="mt-4">
              <div class="overflow-x-auto">
                  <table class="table w-20">
                      
                      <thead>
                          <tr>
                              <th></th>
                              <th>Session ID</th>

                              <th>Created on</th>
                          </tr>
                      </thead>
                      <!-- Rammerhead should take care of the rest -->
                      <tbody></tbody>
                  </table>
              </div>
          </div>
        </div>
            <!-- END SESSION -->
            <!-- HTTP PROXY -->
            <br>
            <div class="border">
            <div class="form-control">
              <label class="label"> </label>
              <label class="input-group">
                  <span>HttpProxy</span>
                  <input
                      type="text"
                      placeholder="http://username:password@proxyipaddress:proxyport"
                      class="input input-bordered w-96"
                      id="session-httpproxy"
                  />
              </label>
          </div>
          </div>
          <!-- End Http Proxy-->
          <!-- SESSION SHUFFLING -->
          <content id="session-shuffling"></content>
          <!-- END SESSION SHUFFLING -->
            <!-- About Blank Cloak -->
            <br>
            <div class="border">
            <div class="form-control">
              <!-- <span class="label-text mr-5">Ab Cloak</span>
              <div class="slideTwo">  
                <input type="checkbox" value="None" id="slideTwo Ab-Cloak" name="check" checked="checked"></input>
                <label for="slideTwo"></label>
              </div> -->
                  <label class="label cursor-pointer">
                      <span class="label-text mr-5">Ab Cloak</span>

                      <input
                          type="checkbox"
                          checked
                          class="checkbox checkbox-primary"
                          id="Ab-Cloak"
                      />
                  </label>
              </div>
            </div>
              <!-- END ABOUT BLANK CLOAK -->
    
            <div class="flex justify-end pt-2">
              <button id="session-create-btn" class="px-4 bg-transparent p-3 rounded-lg text-indigo-500 hover:bg-gray-100 hover:text-indigo-400 mr-2">Create a Session</button>
              <button class="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400">Close</button>
            </div>
    
          </div>
        </div>
      </div>
    </modal>
    <!-- div to center all objects vertically and horizontally -->
    <div class="flex flex-col items-center justify-center h-screen overflow-hidden">
        <div class="flex items-center p-6 space-x-6 rounded-xl">
          <h1 class="text-white text-6xl font-bold">VITRO</h1>
          <div class="flex bg-gray-100 p-4 w-72 space-x-4 rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
            <input  id="session-url" class="bg-gray-100 outline-none" type="text" placeholder="Search" />
          </div>
          <div id="session-go" class="bg-slate-500 py-3 px-5 text-white font-semibold rounded-lg hover:shadow-lg transition duration-3000 cursor-pointer">
            <span>Search</span>
          </div>
        </div>
        <div class="form-control flex justify-center items-center">
          <label class="label"> </label>
          <label class="input-group">
              <span class="text-white text-xl font-bold">SessionId</span>
              <input
                  type="text"
                  placeholder="Go to settings to make a session id"
                  class="input input-bordered w-full max-w-xs text-white bg-gray-50"
                  id="session-id"
                  disabled
              />
          </label>
    </div>
    <div class="fixed bottom-10 right-0 mb-6 mr-6" id="error-container" style="display: none">
      <div class="alert alert-error shadow-lg">
          <div>
              <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="stroke-current flex-shrink-0 h-6 w-6"
                  fill="none"
                  viewBox="0 0 24 24"
              >
                  <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
              </svg>
              <span id="error-text"></span>
          </div>
      </div>
  </div>
</div>
</body>
</html>