<style>
button { width: 22px; padding: 1px }
select { width: 100% }
.sq { width: 6px; height: 6px }
.in { border-width: 1px; width: 100% }
.pad10 { padding: 10px }
#nc td, #mc td { border: 0 }
.slider { background: #eee; margin: 2px 5px }
#slider { position: relative; background: #eee url(/images/bg-slider.gif) 0 3px no-repeat; width: 183px; height: 27px; margin: 5px auto }
#slider div { position: absolute }
.smiles div { margin: 1px }
img.icon { border: 1px solid #000; padding: 5px }
</style>

<script type="text/javascript">
function addNick() {
var form1 = document.getElementById('enter_mess').value;
var check1 = form1.indexOf("NICK");
var form2 = document.getElementById('quit_mess').value;
var check2 = form2.indexOf("NICK");

if (check1 == -1 && form1 != 0) {
document.getElementById('enter_mess').value = "NICK " + form1;
}
if (check2 == -1 && form2 != 0) {
document.getElementById('quit_mess').value = "NICK " + form2;
}
}
</script>

%NICK_PANEL<<<END
<table cellspacing=0 cellpadding=0 class=t>
<tr><th colspan=2>Графический ник</th></tr>
<tr><td width=100% class=t>
<div class='ex pad10' align=center>__%?<img name=nick src=/people/nick/%NICK% width=%NICK_WIDTH% height=%NICK_HEIGHT%>%:%<img name=nick src=images/0.gif>?%__</div>
</td>
<td class=t>
<a id=nick_up href=/ title='сдвинуть вверх'></a><br><a id=nick_down href=/ title='сдвинуть вниз'></a>
</td></tr>
<tr><td colspan=2 class=t>
%checkbox("use_pic", %USER_PICTURE%, 1, " использовать графник")%<br><br>
%input("nick_pic", "", 0, 0, "class=in type=file")%
<div>Размеры: %NICK_MAX_WIDTH%x%NICK_MAX_HEIGHT%, %NICK_FILESIZE%k</div>
</td>
</tr></tr>
</table><br>
END%

%ICON_PANEL<<<END
<table cellspacing=0 cellpadding=0 class=t>
<tr><th>Личная иконка</th></tr>
<tr><td class=t>
<div class=pad10 align=center>
%?
<img class=icon name=icon src=/people/icon/%ICON% width=%ICON_WIDTH% height=%ICON_HEIGHT%><br>
%checkbox("del_icon", 0, 1, " удалить иконку")%
%:%
<img class=icon name=icon width=0 height=0>
?%
</div>
%input("icon_pic", "", 0, 0, "class=in type=file")%
<div>Размеры: %ICON_MAX_WIDTH%x%ICON_MAX_HEIGHT%, %ICON_FILESIZE%k</div>
</td></tr>
</table><br>
END%

%COLOR_PANEL<<<END
<table cellspacing=0 cellpadding=0 class=t>
<tr><th>%T%</th></tr>
<tr><td align=center class=t>
<div class='ex pad10'><span id=%N%_ex></span></div>
%input("%N%_color", "", 0, 255, "class=in")%
<table id=%N%_colors_table border=0 cellpadding=0 cellspacing=0></table>
%?%GRADIENT%%(%GRADIENT_PANEL%)%?%
</td></tr>
</table><br>
END%

%GRADIENT_PANEL<<<END
</td></tr>
<tr><td class=t>
%checkbox("%N%_gradient", 0, 1, " градиентный цвет")%
<table id=%N%_gradient_colors cellspacing=1 cellpadding=0 width=100% bgcolor=black></table>
END%

%STYLE_PANEL<<<END
<table cellspacing=0 cellpadding=0 class=t>
<tr><th>%T%</th></tr>
<tr><td nowrap class=t id=%N%_fonts_table></td></tr>
<tr><td class=t>
%radio("%N%_weight", 0, [1, " тонкий", 2, " нормальный"], "<br>")%<br>
%checkbox("%N%_italic", 0, 4, " курсив")%
</td></tr>
</table><br>
END%

%INVISIBLE_PANEL<<<ENDEND
<table cellspacing=0 cellpadding=0 class=t>
<tr><th>Невидимость</th></tr>
<tr><td class=t>
%checkbox("invisible", %INVISIBLE%, 1, " невидимка")%<br>
%checkbox("friends", %FRIENDS%, 1, " только для друзей")%<br>
%checkbox("add_friend", %ADD_FRIENDS%, 1, " автодобавление друзей")%
</td></tr>
</table><br>
ENDEND%

%PHRASES_PANEL<<<END
<table cellspacing=0 cellpadding=0 class=t>
<tr><th>Фразы</th></tr>
<tr><td class=t>
&nbsp;Фраза при входе:<br>
%input("entry_mess", %ENTRY_MESS%, 0, 100, "class=in")%<br>
&nbsp;Фраза при выходе:<br>
%input("exit_mess", %EXIT_MESS%, 0, 100, "class=in")%<br><br>
&nbsp;TIME - текущее время<br>&nbsp;NICK - ваш ник
</td></tr>
</table><br>
END%

%MODER_PANEL<<<END
<table cellspacing=0 cellpadding=0 class=t>
<tr><th>Модерирование</th></tr>
<tr><td class=t>
%?%MODER_FORM%%checkbox("notify_form", %MODER_NOTIFY_FORM%, 1, " уведомлять о регистрации новой анкеты")%<br>?%
</td></tr>
</table><br>
END%

%PARAM_PANEL<<<END
<table cellspacing=0 cellpadding=0 class=t>
<tr><th>Параметры</th></tr>
<tr><td class=t>
%checkbox("smooth_nav", %SMOOTH_NAV%, 1, " плавная навигация")%<br>
%checkbox("smooth_mess", %SMOOTH_MESS%, 1, " плавная прокрутка")%<br>
%checkbox("show_time", %SHOW_TIME%, 1, " выводить время")%<br>
%checkbox("local_time", %LOCAL_TIME%, 1, " локальное время")%<br>
%checkbox("smiles_off", %SMILES_OFF%, 1, " отключить смайлы")%<br>
%checkbox("nicks_off", %NICKS_OFF%, 1, " отключить графники")%<br>
%checkbox("img", %IMG%, 1, " разрешить картинки")%<br>
%checkbox("media",%MEDIA%, 1, " разрешить звук")%<br>
%checkbox("mono", %MONO%, 1, " монохромный цвет")%<br>
%checkbox("keep_nick", %KEEP_NICK%, 1, " сохранять ник")%<br>
%checkbox("translit", %TRANSLIT%, 1, " транслит (Ctrl+Alt)")%<br>
%checkbox("security", %SECURITY%, 1, " высокая безопасность")%<br>
%?%checkbox("hide_views", %HIDE_VIEWS%, 1, " скрывать просмотры")%<br>%PRIV_HIDE_VIEWS%?%
</td></tr>
<tr><th>Вывод сообщений</th></tr>
<tr><td class=t>
%radio("dir", %DIR%, [0, " сообщения сверху", 1, " сообщения снизу"], "<br>")%<br>
&nbsp;%select("mm", %MM%, [0, 50, 1, 100, 2, 150, 3, 200, 4, 300, 5, 500], "", "style=width:60px")% фраз в окне
</td></tr>
<tr><th>Сообщения для меня</th></tr>
<tr><td class=t>
%radio("my_phrases", %MY_PHRASES%, [0, " не выделять", 1, " подчеркивать", 2, " в рамку", 3, " подсвечивать", 4, " отфильтровывать"], "<br>")%<br>
%checkbox("exactly_nick", %EXACTLY_NICK%, 1, " точная проверка ника")%
</td></tr>
</table><br>
END%

%SOUNDS_PANEL<<<END
<table cellspacing=0 cellpadding=0 class=t>
<tr><th>Звуки</th></tr><tr>
<td class=t>Громкость звуков: <span id=volume></span>%
<div class=slider><div id=slider><div><img width=23 height=27 src=images/slider-cursor2.gif></div></div></div>
</td></tr>
<tr><td nowrap class=t>

<table cellspacing=1 cellpadding=0 class=t>
<tr><td colspan=2 nowrap>%checkbox("use_my_sound", 0, 1, " сообщение для меня")%</tr>
<tr>
<td width=100%><select name=my_sound></select></td>
<td><button class=in name=play_my title='прослушать'><img src=images/sound.gif width=16 height=16></button></td>
</tr>

<tr><td colspan=2 nowrap>%checkbox("use_nb_sound", 0, 1, " мне пришла записка")%</tr>
<tr>
<td width=100%><select name=nb_sound></select></td>
<td><button class=in name=play_nb title='прослушать'><img src=images/sound.gif width=16 height=16></button></td>
</tr>

<tr><td colspan=2 nowrap>%checkbox("use_pr_sound", 0, 1, " приглашение в приват")%</tr>
<tr>
<td width=100%><select name=pr_sound></select></td>
<td><button class=in name=play_pr title='прослушать'><img src=images/sound.gif width=16 height=16></button></td>
</tr>

%?%WEBCAMERA%
<tr><td colspan=2 nowrap>%checkbox("use_wc_sound", 0, 1, " подключение к веб-камере")%</tr>
<tr>
<td width=100%><select name=wc_sound></select></td>
<td><button class=in name=play_wc title='прослушать'><img src=images/sound.gif width=16 height=16></button></td>
</tr>
?%

<tr><td colspan=2 nowrap>%checkbox("use_vote_sound", 0, 1, " начало голосования")%</tr>
<tr>
<td width=100%><select name=vote_sound></select></td>
<td><button class=in name=play_vote title='прослушать'><img src=images/sound.gif width=16 height=16></button></td>
</tr>

<tr><td colspan=2 nowrap>%checkbox("use_nick_sound",0 , 1, " пришел/ушел друг")%</tr>
<tr>
<td width=100%><select name=nick_sound></select></td>
<td><button class=in name=play_nick title='прослушать'><img src=images/sound.gif width=16 height=16></button></td>
</tr>

<tr>
<td width=100%>%input("add_nick", "введите ник кого ждем", 0, 0, "class=in")%
<td>%button("add", ">>", "добавить ник", "style=width:24px")%
</tr>
</table>

<select name=nicks size=3></select>
</td></tr>
</table><br>
END%

%DESIGN_PANEL<<<END
<table cellspacing=0 cellpadding=0 class=t>
<tr><th>Дизайн чата</th></tr>
<tr><td class=t>
%radio("design", %CHAT("DESIGN")%, %CHAT_DESIGN%, "<br>")%
</td></tr>
</table><br>
END%

%SEX_PANEL<<<END
<table cellspacing=0 cellpadding=0 class=t>
<tr><th>Ваш пол</th></tr>
<tr><td class=t>
%radio("sex", %SEX%, [1, " мужской", 2, " женский", 0, " скрываю"], "<br>")%
</td></tr>
</table><br>
END%
%PERSONAL_SMILES_PANEL<<<END
<table cellspacing=0 cellpadding=0 class=t>
<tr><th>Личные смайлики</th></tr>
<tr><td class=t>
%button("smiles", "Показать", "", "", "style=width:100%")%
</td></tr>
</table><br>
END%

<center><h3>Личные настройки</h3>
<table cellspacing=1 cellpadding=0 align=center width=100%>
<tr><td colspan=2>

%(%?%PRIV_NICK_GRAPH%%NICK_PANEL%?%)%
%(%?%PRIV_ICON%%ICON_PANEL%?%)%
%T="Цвет ника"%%N="n"%%GRADIENT=%PRIV_NICK_GRADIENT%%
%(%?%PRIV_NICK_COLOR%%COLOR_PANEL%?%)%
%T="Цвет сообщений"%%N="m"%%GRADIENT=%PRIV_MESS_GRADIENT%%
%(%?%PRIV_MESS_COLOR%%COLOR_PANEL%?%)%
%T="Шрифт ника"%%N="n"%
%(%?%PRIV_NICK_STYLE%%STYLE_PANEL%?%)%
%T="Шрифт сообщений"%%N="m"%
%(%?%PRIV_MESS_STYLE%%STYLE_PANEL%?%)%
%(%?%PRIV_INVISIBLE%%INVISIBLE_PANEL%?%)%
%(%?%PRIV_PHRASES%%PHRASES_PANEL%?%)%
%(%PARAM_PANEL%)%
%(%SOUNDS_PANEL%)%
%(%DESIGN_PANEL%)%
%(%?%TRUE(%PROFILE%)%%:%%SEX_PANEL%?%)%
%(%?%PRIV_PERSONAL_SMILES%%PERSONAL_SMILES_PANEL%?%)%
%(%?%MODER%%MODER_PANEL%?%)%

</td></tr>
<tr><td width=50%>%submit("ok", "OK", "", "", "style=width:100%")%</td><td width=50%>%button("cancel", "Cancel", "", "", "style=width:100%")%</td></tr>
</table>
    <script>
     window.addEventListener('DOMContentLoaded', function(){
    window.$ = function( n ) {
        return parent.$(n, window)
    }
    window.tableFonts = function( n, f ) {
        var font_priv = 1; // <= you can specify here whenever user can set own font or not
        _lbl++;
        var table = $(n + "_fonts_table");
        var Fonts = 'Arial,Book Antiqua,Bookman Old Style,Calibri,Cambria,Candara,Century,Century Gothic,Comic Sans MS,Consolas,Constantia,Corbel,Courier New,Franklin Gothic,Garamond,Georgia,Lucida Console,Lucida Sans Unicode,Microsoft Sans Serif,Monotype Corsiva,Palatino Linotype,Segoe Print,Segoe Script,Segoe UI,Sylfaen,Tahoma,Times New Roman,Trebuchet MS,Verdana'.split(',');
        var tabFont = "<tr><td><input id=_" + _lbl + " type=radio name=" + n + "_font value=\"\"" + (f [1] ? "" : " checked") + "><td> <td><label for=_" + _lbl + ">default</label></tr>";
        var set = false;
        for (var i = 0; i < Fonts.length; i++) {
        _lbl++;
        var checked = Fonts [i].toLowerCase () == f [1].toLowerCase ();
        set |= checked;
        tabFont += "<tr><td><input id=_" + _lbl + " type=radio name=" + n + "_font value=\"" + Fonts [i] + "\"" + (checked ? " checked" : "") + "><td><td><label for=_" + _lbl + " style='font-family: " + Fonts [i] + "'>" + Fonts [i] + "</label></tr>";
        } tabFont += "<tr><td><input type=radio name=" + n + "_font value=1 onClick=\"" + n + "_font_user.select (); " + n + "_font_user.focus ()\"" + ((!set && f [1]) ? " checked" : "") + "><td><td><input class=in onFocus=\"" + n + "_font [" + n + "_font.length - 1].checked = true\" name=" + n + "_font_user" + (font_priv ? "" : " disabled") + " maxlength=30 value='" + (set ? "" : f [1]) + "'></tr>";
        table.innerHTML = "<table width=100% cellspacing=0 cellpadding=1 class=t><col><col><col width=100%>" + tabFont + "</table>";
        setup [n + "_weight"] [((f [2] & 3) == 1) ? 0 : 1].checked = true;
        setup [n + "_italic"].checked = f [2] & 4;
    }
    var NickIMG = Setup.ns.indexOf ("%") + 1;
    if ($("n_fonts_table"))
        tableFonts ("n", (NickIMG ? Setup.dbns : Setup.ns).split (":"));
    if ($("m_fonts_table"))
        tableFonts ("m", Setup.ms.split (":"));
    });
    </script>
<script>
// Code from http://igust4u.ru/post36132.html, © Code4august, 2017
window.addEventListener('DOMContentLoaded', function(){
  document.getElementsByName('design').forEach(function(el){
    el.onclick = function(event){ root.loadDesign(event.target.value); };
  });
});
</script>