mirror of
https://github.com/jech/galene.git
synced 2024-12-27 01:35:48 +01:00
637e280dec
Uses less javascript to update css style, rework buttons css for show/hide video and chat. Fix show or hide video button on normal or mobile ui when windows is resized or when orientation change.
273 lines
12 KiB
HTML
273 lines
12 KiB
HTML
<!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/"/>
|
|
<!-- Font Awesome File -->
|
|
<link href="/css/fontawesome.min.css" rel="stylesheet" type="text/css">
|
|
<link href="/css/solid.css" rel="stylesheet" type="text/css">
|
|
<link href="/css/regular.css" rel="stylesheet" type="text/css">
|
|
<link rel="stylesheet" type="text/css" href="/css/toastify.min.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">
|
|
<svg class="svg-inline--fa" aria-hidden="true" data-icon="align-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
|
<path fill="currentColor" d="M288 44v40c0 8.837-7.163 16-16 16H16c-8.837 0-16-7.163-16-16V44c0-8.837 7.163-16 16-16h256c8.837 0 16 7.163 16 16zM0 172v40c0 8.837 7.163 16 16 16h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16zm16 312h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm256-200H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16h256c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16z"></path>
|
|
</svg>
|
|
</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"> Ready</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"> Panic</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 id="unsharebutton" class="invisible nav-link nav-button nav-cancel">
|
|
<span><i class="fas fa-window-close" aria-hidden="true"></i></span>
|
|
<label>Unshare Screen</label>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div id="stopvideobutton" class="invisible nav-link nav-button nav-cancel">
|
|
<span><i class="fas fa-window-close" aria-hidden="true"></i></span>
|
|
<label>Stop Video</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 class="login-container invisible" id="login-container">
|
|
<div class="login-box">
|
|
<form id="userform" class="userform">
|
|
<label for="username">Username</label>
|
|
<input id="username" type="text" name="username"
|
|
autocomplete="username" class="form-control"/>
|
|
<label for="password">Password</label>
|
|
<input id="password" type="password" name="password"
|
|
autocomplete="current-password" class="form-control"/>
|
|
<label>Auto ready</label>
|
|
<div class="present-switch">
|
|
<p class="switch-radio">
|
|
<input id="presentoff" type="radio" name="presentradio" value="" checked/>
|
|
<label for="presentoff">Disabled</label>
|
|
</p>
|
|
<p class="switch-radio">
|
|
<input id="presentmike" type="radio" name="presentradio" value="mike"/>
|
|
<label for="presentmike">Enable microphone</label>
|
|
</p>
|
|
<p class="switch-radio">
|
|
<input id="presentboth" type="radio" name="presentradio" value="both"/>
|
|
<label for="presentboth">Enable 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>
|
|
</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>
|
|
|
|
</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="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">screen share</option>
|
|
<option value="everything" selected>everything</option>
|
|
</select>
|
|
</form>
|
|
|
|
<form>
|
|
<input id="activitybox" type="checkbox"/>
|
|
<label for="activitybox">Activity detection</label>
|
|
</form>
|
|
|
|
</fieldset>
|
|
|
|
<form id="fileform">
|
|
<label for="fileinput" class=".sidenav-label-first">Play local file:</label>
|
|
<input type="file" id="fileinput" accept="audio/*,video/*" multiple/>
|
|
</form>
|
|
</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>
|
|
|
|
<script src="/protocol.js" defer></script>
|
|
<script src="/scripts/toastify.js" defer></script>
|
|
<script src="/galene.js" defer></script>
|
|
</body>
|
|
</html>
|