Storm Dragon
220 lines
10 KiB
HTML
220 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Skald Version 2026.07.08</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="/skald.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"/>
|
|
</head>
|
|
|
|
<body>
|
|
<main id="main" class="app">
|
|
<div class="row full-height">
|
|
<nav id="left-sidebar" class="connected-only invisible" aria-hidden="true">
|
|
<div class="users-header">
|
|
<div class="skald-header">Skald Version 2026.07.08</div>
|
|
</div>
|
|
<div class="header-sep"></div>
|
|
<div id="users"></div>
|
|
</nav>
|
|
<div class="container">
|
|
<header class="connected-only invisible" aria-hidden="true">
|
|
<nav class="topnav navbar navbar-expand navbar-light fixed-top">
|
|
<div id="header">
|
|
<button class="collapse" aria-label="Toggle left panel" aria-expanded="true" aria-controls="left-sidebar" id="sidebarCollapse">
|
|
<i class="fas fa-align-left" aria-hidden="true"></i>
|
|
</button>
|
|
<h1 id="title" class="header-title" tabindex="-1">Skald Version 2026.07.08</h1>
|
|
</div>
|
|
|
|
<ul class="nav-menu">
|
|
<li>
|
|
<button id="presentbutton" class="invisible btn btn-success" aria-label="Enable microphone">
|
|
<i class="fas fa-play" aria-hidden="true"></i><span class="nav-text"> Enable</span>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button id="mutebutton" class="nav-link nav-button" aria-pressed="false" aria-label="Mute microphone">
|
|
<span><i class="fas fa-microphone-slash" aria-hidden="true"></i></span>
|
|
<span class="nav-text">Mute</span>
|
|
</button>
|
|
</li>
|
|
|
|
<li>
|
|
<button class="nav-button nav-link nav-more" id="openside" aria-label="Settings" aria-haspopup="true" aria-expanded="false" aria-controls="sidebarnav">
|
|
<span><i class="fas fa-ellipsis-v" aria-hidden="true"></i></span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<div class="row full-width" id="mainrow">
|
|
<div class="coln-left connected-only invisible" id="left" aria-hidden="true">
|
|
<div id="chat" role="region" aria-label="Chat">
|
|
<div id="chatbox">
|
|
<button class="close-chat" id="close-chat" aria-label="Hide chat">
|
|
<span class="close-icon"></span>
|
|
</button>
|
|
<h2 id="chat-history-heading" class="sr-only">Chat History</h2>
|
|
<div id="box"></div>
|
|
<div id="audio-streams" aria-hidden="true"></div>
|
|
<div class="reply">
|
|
<form id="inputform">
|
|
<textarea id="input" class="form-reply" aria-label="Message or /command"></textarea>
|
|
<input id="inputbutton" type="submit" value="➤" class="btn btn-default" aria-label="Send message"/>
|
|
</form>
|
|
</div>
|
|
<div id="chalkboard-area">
|
|
<h2 id="chalkboard-heading">Virtual chalkboard</h2>
|
|
<textarea id="chalkboard" aria-labelledby="chalkboard-heading"></textarea>
|
|
<button id="chalkboard-copy" type="button" class="btn btn-default" disabled>Copy to clipboard</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="resizer" class="connected-only invisible" aria-hidden="true" tabindex="0" role="separator" aria-label="Resize chat panel with Left and Right Arrow" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-valuetext="Chat width 50 percent"></div>
|
|
<div class="coln-right" id="right">
|
|
<button class="chat-btn show-chat invisible" id="show-chat" aria-label="Show chat">
|
|
<i class="far fa-comment-alt icon-chat" aria-hidden="true"></i>
|
|
</button>
|
|
<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>
|
|
<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>
|
|
</main>
|
|
<div id="chat-announcements" role="status" aria-live="polite" aria-atomic="true" class="sr-only"></div>
|
|
<div id="urgent-announcements" role="alert" aria-live="assertive" aria-atomic="true" class="sr-only"></div>
|
|
|
|
<aside id="sidebarnav" class="sidenav connected-only invisible" aria-hidden="true" aria-label="Settings">
|
|
<div class="sidenav-header">
|
|
<h2>Settings</h2>
|
|
<button class="closebtn" id="closeside" aria-label="Close settings"><i class="fas fa-times" aria-hidden="true"></i></button>
|
|
</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" aria-label="Change password">Change password</a></span>
|
|
</div>
|
|
<div class="user-logout">
|
|
<button id="disconnectbutton" type="button" aria-label="Logout">
|
|
<span class="logout-icon"><i class="fas fa-sign-out-alt" aria-hidden="true"></i></span>
|
|
<span class="logout-text">Logout</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="mediaoptions" class="invisible">
|
|
<fieldset>
|
|
<legend>Media Options</legend>
|
|
<label for="audioselect" class="sidenav-label-first">Microphone:</label>
|
|
<select id="audioselect" class="select select-inline">
|
|
<option value="default">default microphone</option>
|
|
<option value="off">off</option>
|
|
</select>
|
|
|
|
<form>
|
|
<input id="preprocessingbox" type="checkbox"/>
|
|
<label for="preprocessingbox">Noise suppression</label>
|
|
</form>
|
|
|
|
<form>
|
|
<input id="hqaudiobox" type="checkbox" checked/>
|
|
<label for="hqaudiobox">High-quality audio</label>
|
|
</form>
|
|
|
|
</fieldset>
|
|
</div>
|
|
|
|
<fieldset>
|
|
<legend>Other Settings</legend>
|
|
|
|
<form>
|
|
<input id="notificationsoundsbox" type="checkbox" checked/>
|
|
<label for="notificationsoundsbox">Notification sounds</label>
|
|
</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" selected>audio only</option>
|
|
</select>
|
|
</form>
|
|
|
|
<form>
|
|
<input id="activitybox" type="checkbox"/>
|
|
<label for="activitybox">Activity detection</label>
|
|
</form>
|
|
</fieldset>
|
|
</div>
|
|
</aside>
|
|
|
|
|
|
|
|
<dialog id="invite-dialog" aria-labelledby="invite-dialog-title">
|
|
<form method="dialog">
|
|
<h2 id="invite-dialog-title" class="sr-only">Invite user</h2>
|
|
<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">Invite</button>
|
|
</form>
|
|
</dialog>
|
|
|
|
<script src="/protocol.js" defer></script>
|
|
<script src="/third-party/toastify/toastify.js" defer></script>
|
|
<script src="/skald.js" defer></script>
|
|
</body>
|
|
</html>
|