<!DOCTYPE html> <html lang="en"> <head> <title>Galène</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="ScreenOrientation" content="autoRotate:disabled"> <link rel="stylesheet" type="text/css" href="/common.css"/> <link rel="stylesheet" type="text/css" href="/galene.css"/> <link rel="author" href="https://www.irif.fr/~jch/"/> <link rel="stylesheet" type="text/css" href="/third-party/fontawesome/css/fontawesome.min.css"/> <link rel="stylesheet" type="text/css" href="/third-party/fontawesome/css/solid.min.css"/> <link rel="stylesheet" type="text/css" href="/third-party/fontawesome/css/regular.min.css"/> <link rel="stylesheet" type="text/css" href="/third-party/toastify/toastify.css"/> <link rel="stylesheet" type="text/css" href="/third-party/contextual/contextual.css"/> </head> <body> <div id="main" class="app"> <div class="row full-height"> <nav id="left-sidebar"> <div class="users-header"> <div class="galene-header">Galène</div> </div> <div class="header-sep"></div> <div id="users"></div> </nav> <div class="container"> <header> <nav class="topnav navbar navbar-expand navbar-light fixed-top"> <div id="header"> <div class="collapse" title="Collapse left panel" id="sidebarCollapse"> <i class="fas fa-align-left" aria-hidden="true"></i> </div> <h1 id="title" class="header-title">Galène</h1> </div> <ul class="nav-menu"> <li> <button id="presentbutton" class="invisible btn btn-success"> <i class="fas fa-play" aria-hidden="true"></i><span class="nav-text"> Enable</span> </button> </li> <li> <button id="unpresentbutton" class="invisible btn btn-cancel"> <i class="fas fa-stop" aria-hidden="true"></i><span class="nav-text"> Disable</span> </button> </li> <li> <div id="mutebutton" class="nav-link nav-button"> <span><i class="fas fa-microphone-slash" aria-hidden="true"></i></span> <label>Mute</label> </div> </li> <li> <div id="sharebutton" class="invisible nav-link nav-button"> <span><i class="fas fa-share-square" aria-hidden="true"></i></span> <label>Share Screen</label> </div> </li> <li> <div class="nav-button nav-link nav-more" id="openside"> <span><i class="fas fa-ellipsis-v" aria-hidden="true"></i></span> </div> </li> </ul> </nav> </header> <div class="row full-width" id="mainrow"> <div class="coln-left" id="left"> <div id="chat"> <div id="chatbox"> <div class="close-chat" id="close-chat" title="Hide chat"> <span class="close-icon"></span> </div> <div id="box"></div> <div class="reply"> <form id="inputform"> <textarea id="input" class="form-reply"></textarea> <input id="inputbutton" type="submit" value="➤" class="btn btn-default"/> </form> </div> </div> </div> </div> <div id="resizer"></div> <div class="coln-right" id="right"> <span class="show-video blink invisible" id="show-video"> <i class="fas fa-exchange-alt" aria-hidden="true"></i> </span> <div class="chat-btn show-chat invisible" id="show-chat"> <i class="far fa-comment-alt icon-chat" title="Show chat"></i> </div> <div class="chat-btn collapse-video invisible" id="collapse-video"> <i class="far fa-comment-alt icon-chat" title="Hide video and show chat"></i> </div> <div class="video-container invisible" id="video-container"> <div id="expand-video" class="expand-video"> <div id="peers"></div> </div> </div> <div id="captions-container" class="invisible"> <div id="captions"></div> </div> <div class="login-container invisible" id="login-container"> <div class="login-box"> <form id="loginform" class="loginform"> <div id="userform"> <label for="username">Username</label> <input id="username" type="text" name="username" autocomplete="username" class="form-control"/> </div> <div id="passwordform"> <label for="password">Password</label> <input id="password" type="password" name="password" autocomplete="current-password" class="form-control"/> </div> <label>Enable at start:</label> <div class="present-switch"> <p class="switch-radio"> <input id="presentoff" type="radio" name="presentradio" value="" checked/> <label for="presentoff">Nothing</label> </p> <p class="switch-radio"> <input id="presentmike" type="radio" name="presentradio" value="mike"/> <label for="presentmike">Microphone</label> </p> <p class="switch-radio"> <input id="presentboth" type="radio" name="presentradio" value="both"/> <label for="presentboth">Camera and microphone</label> </p> </div> <div class="clear"></div> <div class="connect"> <input id="connectbutton" type="submit" class="btn btn-blue" value="Connect"/> </div> </form> <div class="clear"></div> </div> </div> </div> </div> </div> </div> </div> <div id="sidebarnav" class="sidenav"> <div class="sidenav-header"> <h2>Settings</h2> <a class="closebtn" id="clodeside"><i class="fas fa-times" aria-hidden="true"></i></a> </div> <div class="sidenav-content" id="optionsdiv"> <div id="profile" class="profile invisible"> <div class="profile-user"> <div class="profile-logo"> <span><i class="fas fa-user" aria-hidden="true"></i></span> </div> <div class="profile-info"> <span id="userspan"></span> <span id="permspan"></span> <span id="chpwspan" class="invisible"><a id="change-password">Change password</a></span> </div> <div class="user-logout"> <a id="disconnectbutton"> <span class="logout-icon"><i class="fas fa-sign-out-alt"></i></span> <span class="logout-text">Logout</span> </a> </div> </div> </div> <div id="mediaoptions" class="invisible"> <fieldset> <legend>Media Options</legend> <label for="videoselect" class="sidenav-label-first">Camera:</label> <select id="videoselect" class="select select-inline"> <option value="">off</option> </select> <label for="audioselect" class="sidenav-label">Microphone:</label> <select id="audioselect" class="select select-inline"> <option value="">off</option> </select> <form> <input id="mirrorbox" type="checkbox" checked/> <label for="mirrorbox">Mirror view</label> </form> <form> <input id="blackboardbox" type="checkbox"/> <label for="blackboardbox">Blackboard mode</label> </form> <form> <input id="preprocessingbox" type="checkbox"/ checked> <label for="preprocessingbox">Noise suppression</label> </form> <form> <input id="hqaudiobox" type="checkbox"/> <label for="hqaudiobox">High-quality audio</label> </form> </fieldset> </div> <fieldset> <legend>Other Settings</legend> <form id="filterform"> <label for="filterselect" class="sidenav-label-first">Filter:</label> <select id="filterselect" class="select select-inline"> <option value="" selected>none</option> </select> </form> <form id="sendform"> <label for="sendselect" class="sidenav-label-first">Send:</label> <select id="sendselect" class="select select-inline"> <option value="lowest">lowest</option> <option value="low">low</option> <option value="normal" selected>normal</option> <option value="unlimited">unlimited</option> </select> </form> <form id="simulcastform"> <label for="simulcastselect" class="sidenav-label-first">Simulcast:</label> <select id="simulcastselect" class="select select-inline"> <option value="off">off</option> <option value="auto" selected>auto</option> <option value="on">on</option> </select> </form> <form id="requestform"> <label for="requestselect" class="sidenav-label">Receive:</label> <select id="requestselect" class="select select-inline"> <option value="">nothing</option> <option value="audio">audio only</option> <option value="screenshare">screenshare only</option> <option value="everything-low">low quality</option> <option value="everything" selected>everything</option> </select> </form> <form> <input id="activitybox" type="checkbox"/> <label for="activitybox">Activity detection</label> </form> <form> <input id="displayallbox" type="checkbox"/> <label for="displayallbox">Display audio-only users</label> </form> </fieldset> </div> </div> <div id="videocontrols-template" class="invisible"> <div class="video-controls vc-overlay"> <div class="controls-button controls-left"> <span class="video-play" title="Play video"> <i class="fas fa-play"></i> </span> <span class="volume" title="Volume"> <i class="fas fa-volume-up volume-mute" aria-hidden="true"></i> <input class="volume-slider" type="range" max="100" value="100" min="0" step="5" > </span> </div> <div class="controls-button controls-right"> <span class="pip" title="Picture In Picture"> <i class="far fa-clone" aria-hidden="true"></i> </span> <span class="fullscreen" title="Fullscreen"> <i class="fas fa-expand" aria-hidden="true"></i> </span> </div> </div> </div> <div id="topvideocontrols-template" class="invisible"> <div class="top-video-controls"> <div class="controls-button controls-right"> <span class="close-icon video-stop" title="Stop video"> </span> </div> </div> </div> <dialog id="invite-dialog"> <form method="dialog"> <label for="invite-username">Username (optional):</label> <input id="invite-username" type="text"/> <br> <label for="invite-not-before">Not before:</label> <input id="invite-not-before" type="datetime-local"/> <br> <label for="invite-expires">Expires:</label> <input id="invite-expires" type="datetime-local"/> <br> <button id="invite-cancel" value="cancel" type="button">Cancel</button> <button value="invite" value="invite">Invite</button> </form> </dialog> <script src="/protocol.js" defer></script> <script src="/third-party/toastify/toastify.js" defer></script> <script src="/third-party/contextual/contextual.js" defer></script> <script src="/galene.js" defer></script> </body> </html>