TeaWeb/index.html

259 lines
14 KiB
HTML
Raw Normal View History

2018-02-27 17:20:49 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TeaSpeak-Web</title>
<link rel="stylesheet" href="css/ts/tab.css" type="text/css">
<link rel="stylesheet" href="css/ts/chat.css" type="text/css">
<link rel="stylesheet" href="css/ts/client.css" type="text/css">
<link rel="stylesheet" href="css/ts/icons.css" type="text/css">
<link rel="stylesheet" href="css/general.css" type="text/css">
</head>
<body>
TeaSpeak-Web<br>
2018-03-07 19:06:52 +01:00
<div style="width: 600px; height: 450px; display: flex; flex-direction: column; resize: both; margin: 20px"> <!-- Container -->
2018-02-27 17:20:49 +01:00
<div style="height: 45px; width: 100%; border-radius: 2px 0px 0px 0px; border-bottom-width: 0px; background-color: lightgrey" class="main_container">
<div id="control_bar" class="control_bar">
2018-03-07 19:06:52 +01:00
<div class="button btn_connect"><div class="icon_x32 client-connect"></div></div>
<div style="border-left:2px solid gray;height: auto; margin-left: 5px; margin-right: 5px"></div>
2018-02-27 17:20:49 +01:00
<div class="button btn_client_away"><div class="icon_x32 client-away"></div></div>
<div class="button btn_mute_input"><div class="icon_x32 client-input_muted"></div></div>
<div class="button btn_mute_output"><div class="icon_x32 client-output_muted"></div></div>
<div style="width: 100%"></div>
2018-03-07 19:06:52 +01:00
<div class="button btn_open_settings"><div class="icon_x32 client-settings"></div></div>
2018-02-27 17:20:49 +01:00
</div>
</div>
<div style="flex-direction: row; height: 100%; width: 100%; display: flex">
<div style="width: 60%; flex-direction: column;">
2018-03-07 19:06:52 +01:00
<div style="height: 60%; border-radius: 0px 0px 0px 0px; border-right-width: 0px; overflow: auto; overflow-x: visible" class="main_container">
2018-02-27 17:20:49 +01:00
<div class="channelTree" id="channelTree">
<div class="server l"><div class="icon client-server_green"></div> TeaSpeak web!</div>
</div>
</div> <!-- Channel tree -->
<div style="height: 40%; border-radius: 0px 0px 0px 2px; border-top-width: 0px; border-right-width: 0px;" class="main_container">
<div id="chat">
<div class="messages">
<div class="message_box"></div>
</div>
<div class="chats"></div>
<div class="input">
<!--<div contentEditable="true" class="input_box"></div>-->
<textarea class="input_box"></textarea>
<button>Send</button>
</div>
</div>
</div> <!-- Chat window -->
</div>
<div style="width: 40%; border-radius: 0px 0px 2px 0px;" class="main_container">
<div id="select_info" class="select_info">
</div>
</div> <!-- Selection info -->
</div>
</div>
<button id="test">Test Stuff</button>
<div id="contextMenu" class="contextMenu"></div>
<template id="tmpl_channel_edit">
<table style="margin-bottom: 20px">
<tr>
<td>Name:</td>
<td><input value="${channel_name}"/></td>
</tr>
<tr>
<td>Password:</td>
<td><input/></td>
</tr>
<tr>
<td>Topic:</td>
<td><input/></td>
</tr>
<tr>
<td>Description:</td>
<td><input/></td>
</tr>
</table>
<x-tab>
<x-entry>
<x-tag>Standard</x-tag>
<x-content>
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-evenly">
<div style="vertical-align: center; margin: 20px;">
<a>Channel Type</a><br>
<fieldset style="border: gray solid; border-width: 2px; border-radius: 0px 6px 6px 6px;">
<div><input type="radio" name="channel_type" id="temp" value="temp" checked> Temporary</div>
<div><input type="radio" name="channel_type" id="semi" value="semiperm"> Semi-Permanent</div>
<div><input type="radio" name="channel_type" id="perm" value="perm"> Permanent</div>
<hr style="width: 100%;">
<div><input type="checkbox" name="channel_default" id="default" value="def"> Default Channel</div>
</fieldset>
</div>
<div style="border-left:1px solid #000;height: auto;"></div>
<div style="flex-direction: column; align-content: stretch; vertical-align: center; margin: 20px;">
<div>
<div>Sort this channel after:</div>
<select class="order_id" style="width: 150px">
<option value="channel_3">Audi</option>
</select>
</div>
<div style="margin-top: 20px">
<div>Needed Talk Power:</div>
<input type="number" min="0" value="0" style="width: 150px">
</div>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>Audio</x-tag>
<x-content>TODO!</x-content>
</x-entry>
<x-entry>
<x-tag>Permissions</x-tag>
<x-content>
<div style="display: flex; justify-content: space-evenly">
<div>
Regular needed powers:
<table class="channel_perm_tbl">
<tr><td class="key">Join:</td><td><input type="number" min="0" value="0"></td></tr>
<tr><td class="key">Subscribe:</td><td><input type="number" min="0" value="0"></td></tr>
<tr><td class="key">Desc. view:</td><td><input type="number" min="0" value="0"></td></tr>
<tr><td class="key">Modify:</td><td><input type="number" min="0" value="0"></td></tr>
<tr><td class="key">Delete:</td><td><input type="number" min="0" value="0"></td></tr>
</table>
</div>
<div>
File transfare needed powers:
<table class="channel_perm_tbl">
<tr><td class="key">Join:</td><td><input type="number" min="0" value="0"></td></tr>
<tr><td class="key">Subscribe:</td><td><input type="number" min="0" value="0"></td></tr>
<tr><td class="key">Desc. view:</td><td><input type="number" min="0" value="0"></td></tr>
<tr><td class="key">Modify:</td><td><input type="number" min="0" value="0"></td></tr>
<tr><td class="key">Delete:</td><td><input type="number" min="0" value="0"></td></tr>
</table>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>Advanced</x-tag>
<x-content>TODO!</x-content>
</x-entry>
</x-tab>
</template>
<template id="tmpl_connect">
<div style="margin-top: 5px;">
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-between">
<div style="width: 68%; margin-bottom: 5px">
<div>Remote address and port:</div>
<input type="text" style="width: 100%" class="connect_address" value="localhost"> <!-- ts.TeaSpeak.de -->
</div>
<div style="width: 20%">
<div>Server password:</div>
<input type="password" style="width: 100%" class="connect_password">
</div>
</div>
<div>
<div>Nickname:</div>
<input type="text" style="width: 100%" class="connect_nickname" value="A TeaSpeak web user">
</div>
</div>
</template>
2018-03-07 19:06:52 +01:00
<template id="tmpl_settings">
<x-tab>
<x-entry>
<x-tag>General</x-tag>
<x-content>Didnt setuped yet!</x-content>
</x-entry>
<x-entry>
<x-tag>Voice</x-tag>
<x-content>
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-evenly" class="settings_voice">
<div style="vertical-align: center; margin: 20px; min-width: 175px">
<a>Voice Activity Detection</a>
<div>
<fieldset class="GroupBox">
<div><input type="radio" name="vad_type" value="pt" display="Always active"> Always active</div>
<div><input type="radio" name="vad_type" value="vad" display="Voice activity detection"> Voice activity detection</div>
<div><input type="radio" name="vad_type" value="ppt" display="Push to talk"> Push to talk</div>
</fieldset>
</div>
</div>
<div style="border-left:1px solid #000;height: auto;"></div>
<div style="flex-direction: column; align-content: stretch; vertical-align: center; margin: 20px;">
<div class="vad_settings">
<div style="font-size: 14px; text-align: center"><a class="vad_type">Type[Unknown]</a> settings</div>
<div class="vad_type_settings vad_type_pt">There are no setting entries for an <b>always</b> online voice detection.</div>
<div class="vad_type_settings vad_type_ppt">
<a>Push to talk key:</a>
<button class="vat_ppt_key">Uninitialised</button>
</div>
<div class="vad_type_settings vad_type_vad">
2018-03-08 15:40:31 +01:00
<div>Voice activity threshold (<a class="vad_vad_slider_value">20</a>%)</div>
<div class="vad_vad_threshold_selector">
<div class="vad_vad_bar">
<div style="width: 100%; height: 100%; position: absolute">
<div class="vad_vad_bar_filler"></div>
</div>
<input type="range" min="0" max="100" value="50" class="vad_vad_slider">
</div>
2018-03-07 19:06:52 +01:00
</div>
</div>
</div>
</div>
</div>
</x-content>
</x-entry>
</x-tab>
</template>
2018-02-27 17:20:49 +01:00
<script src="vendor/jquery/jquery.min.js"></script>
<!--
<script src="vendor/jquery/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
-->
<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="vendor/opus-recorder/recorder.js"></script>
<script src="vendor/aurora/aurora.js"></script>
<script src="js/utils/modal.js"></script>
2018-03-07 19:06:52 +01:00
<script src="js/ui/modal/ModalConnect.js"></script>
<script src="js/ui/modal/ModalSettings.js"></script>
<script src="js/ui/modal/ModalCreateChannel.js"></script>
2018-02-27 17:20:49 +01:00
<script src="js/utils/tab.js"></script>
<script src="js/proto.js"></script>
<script src="js/settings.js"></script>
<script src="js/contextMenu.js"></script>
<script src="js/connection.js"></script>
<script src="js/FileManager.js"></script>
<script src="js/client.js"></script>
<script src="js/chat.js"></script>
<script src="js/InfoBar.js"></script>
2018-03-07 19:06:52 +01:00
<script src="js/voice/VoiceHandler.js"></script>
<script src="js/voice/VoiceRecorder.js"></script>
<script src="js/voice/AudioResampler.js"></script>
<script src="js/voice/AudioController.js"></script>
2018-02-27 17:20:49 +01:00
<script src="js/permission/PermissionManager.js"></script>
<script src="js/permission/GroupManager.js"></script>
<script src="js/ui/server.js"></script>
<script src="js/ui/channel.js"></script>
<script src="js/ui/client.js"></script>
<script src="js/ui/view.js"></script>
<script src="js/ui/ControlBar.js"></script>
<script src="asm/generated/TeaWeb-Native.js"></script>
<script src="js/codec/Codec.js"></script>
<script src="js/main.js"></script>
<!-- <script src="generated/js/client.js"></script> -->
</body>
</html>