306 lines
17 KiB
HTML
306 lines
17 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="TEAFORO">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_TEAFORO 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 class="settings_voice align_column">
|
|
<div style="justify-content: right">
|
|
<a style="margin-left: 20px">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>
|
|
|
|
<template id="tmpl_client_ban">
|
|
<div class="align_column">
|
|
<div class="align_column" style="margin: 5px">
|
|
<a>Name:</a>
|
|
<input value="${client_name}" readonly>
|
|
</div>
|
|
<div class="align_column" style="margin: 5px">
|
|
<a>Reason:</a>
|
|
<textarea style="height: 32px; resize: vertical; max-height: 150px; min-height: 32px" maxlength="512" class="ban_reason"></textarea>
|
|
</div>
|
|
<div class="align_row" style="margin: 5px; justify-content: space-between">
|
|
<a>Duration:</a>
|
|
<div class="align_row">
|
|
<input type="number" value="1" class="ban_duration" style="margin-right: 7px" min="1">
|
|
<select class="ban_duration_type">
|
|
<option value="sec">seconds</option>
|
|
<option value="min">minutes</option>
|
|
<option value="hours">hours</option>
|
|
<option value="days">days</option>
|
|
<option value="perm">permanent</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="tmpl_music_frame">
|
|
<div class="music-wrapper">
|
|
<div class="container">
|
|
<div class="left">
|
|
<div class="static-card">
|
|
<img src="${thumbnail}" alt="Thumbnail" class="thumbnail">
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="controls hover">
|
|
<label class="btn-forward"><span></span></label>
|
|
<label class="btn-rewind"><span></span></label>
|
|
<label class="btn-settings"><span></span></label>
|
|
</div>
|
|
<div class="flip-card">
|
|
<img src="${thumbnail}" alt="Thumbnail" class="thumbnail">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="controls-overlay">
|
|
<div class="timer">
|
|
<div>
|
|
<svg class="button" x="0px" y="0px" viewBox="0 0 4.5 6.9" style="enable-background:new 0 0 4.5 6.9;">
|
|
<defs>
|
|
<filter id="shadow">
|
|
<feDropShadow dx="4" dy="8" stdDeviation="4"/>
|
|
</filter>
|
|
</defs>
|
|
<polyline style="filter:url(#shadow);" class="button" points="0.6,0.3 3.9,3.4 0.6,6.6 "></polyline>
|
|
</svg>
|
|
<svg class="button" x="0px" y="0px" viewBox="0 0 4.5 6.9" style="enable-background:new 0 0 4.5 6.9;">
|
|
<defs>
|
|
<filter id="shadow">
|
|
<feDropShadow dx="4" dy="8" stdDeviation="4"/>
|
|
</filter>
|
|
</defs>
|
|
<g style="filter:url(#shadow);">
|
|
<line x1="0.4" y1="0.1" x2="0.4" y2="6.8"></line>
|
|
<line x1="4.1" y1="0.1" x2="4.1" y2="6.8"></line>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="timeline">
|
|
<div class="buffered"></div>
|
|
<div class="played"></div>
|
|
<div class="slider"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="tmpl_music_frame_empty">
|
|
<div class="music-wrapper empty">
|
|
<img src="img/music/empty_disk.svg">
|
|
<a>Not playing any music</a>
|
|
</div>
|
|
</template>
|
|
</body>
|
|
</html> |