221 lines
13 KiB
HTML
221 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>TeaSpeak-Web client templates</title>
|
|
|
|
|
|
<!-- Imports just for my IDE -->
|
|
<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>
|
|
<!-- Template for chennel create & edit-->
|
|
<template id="tmpl_channel_edit">
|
|
<div class="align_column channel_general_properties">
|
|
<div class="align_row property_entry">
|
|
<a class="key">Name:</a>
|
|
<input class="value channel_name" value="${channel_name}"/>
|
|
</div>
|
|
<div class="align_row property_entry">
|
|
<a class="key">Password:</a>
|
|
{{if channel_flag_password == "1"}}
|
|
<input class="value channel_password" type="password" value="WolverinDEV">
|
|
{{else}}
|
|
<input class="value channel_password" type="password">
|
|
{{/if}}
|
|
</div>
|
|
<div class="align_row property_entry">
|
|
<a class="key">Topic:</a>
|
|
<input class="value channel_topic" value="${channel_topic}"/>
|
|
</div>
|
|
<div class="align_row property_entry">
|
|
<a class="key">Description:</a>
|
|
<textarea class="value channel_description" style="height: 150px; resize: none">${channel_description}</textarea>
|
|
</div>
|
|
</div>
|
|
<div style="margin-bottom: 5px"></div>
|
|
<x-tab>
|
|
<x-entry>
|
|
<x-tag>Standard</x-tag>
|
|
<x-content>
|
|
<div class="settings_standard" 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" value="temp"> Temporary</div>
|
|
<div><input type="radio" name="channel_type" value="semi"> Semi-Permanent</div>
|
|
<div><input type="radio" name="channel_type" 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">
|
|
</select>
|
|
</div>
|
|
<div style="margin-top: 20px">
|
|
<div>Needed Talk Power:</div>
|
|
<input type="number" min="0" value="0" name="talk_power" 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" class="value"></td></tr>
|
|
<tr><td class="key">Subscribe:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
|
|
<tr><td class="key">Desc. view:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
|
|
<tr><td class="key">Modify:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
|
|
<tr><td class="key">Delete:</td><td><input type="number" min="0" value="0" class="value"></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" class="value"></td></tr>
|
|
<tr><td class="key">Subscribe:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
|
|
<tr><td class="key">Desc. view:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
|
|
<tr><td class="key">Modify:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
|
|
<tr><td class="key">Delete:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
-->
|
|
TODO Implement!
|
|
</x-content>
|
|
</x-entry>
|
|
<x-entry>
|
|
<x-tag>Advanced</x-tag>
|
|
<x-content>TODO!</x-content>
|
|
</x-entry>
|
|
</x-tab>
|
|
</template>
|
|
|
|
|
|
<!-- Template for the connect modal -->
|
|
<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="unknown">
|
|
</div>
|
|
<div style="width: 20%">
|
|
<div>Server password:</div>
|
|
<form name="server_password_form" onsubmit="return false;">
|
|
<input type="password" autocomplete="off" style="width: 100%" class="connect_password">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>Nickname:</div>
|
|
<input type="text" style="width: 100%" class="connect_nickname" value="">
|
|
</div>
|
|
<hr>
|
|
<div class="group_box">
|
|
<div style="display: flex; justify-content: space-between;">
|
|
<div style="text-align: right;">Identity Settings</div>
|
|
<select class="identity_select">
|
|
<option name="identity_type" value="forum">Forum Account</option>
|
|
<option name="identity_type" value="teamspeak">TeamSpeak</option>
|
|
</select>
|
|
</div>
|
|
<hr>
|
|
<div class="identity_config_teamspeak identity_config">
|
|
Please enter your exported TS3 Identity string bellow or select your exported Identity<br>
|
|
<div style="width: 100%; display: flex; flex-direction: row">
|
|
<input placeholder="Identity string" style="width: 70%; margin: 5px;" class="identity_string">
|
|
<div style="width: 30%; margin: 5px"><input class="identity_file" type="file"></div>
|
|
</div>
|
|
</div>
|
|
<div class="identity_config_forum identity_config">
|
|
You're using your forum account as verification
|
|
</div>
|
|
|
|
<div style="background-color: red; border-radius: 1px; display: none" class="error_message"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<!-- Template for the settings -->
|
|
<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: column;" class="settings_voice">
|
|
<div>
|
|
<a>Microphone:</a>
|
|
<select class="voice_microphone_select"></select>
|
|
<hr>
|
|
</div>
|
|
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-evenly"><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">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-content>
|
|
</x-entry>
|
|
</x-tab>
|
|
</template>
|
|
|
|
<template id="tmpl_change_volume">
|
|
<div style="display: flex; justify-content: center; vertical-align: center">
|
|
<input type="range" min="0" max="200" value="100" class="volume_slider" style="width: 100%">
|
|
<div class="display_volume" style="width: 60px; align-self: center; text-align: center">±0 %</div>
|
|
</div>
|
|
</template>
|
|
</body>
|
|
</html> |