diff options
Diffstat (limited to 'webAO/client.html')
| -rw-r--r-- | webAO/client.html | 424 |
1 files changed, 252 insertions, 172 deletions
diff --git a/webAO/client.html b/webAO/client.html index 5a8bd0e..2343264 100644 --- a/webAO/client.html +++ b/webAO/client.html @@ -1,54 +1,56 @@ <!DOCTYPE html> -<html lang="en"><head> - <title>Attorney Online session</title> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" type="text/css" href="client.css"> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> +<html lang="en"> + +<head> + <title>Attorney Online session</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" type="text/css" href="client.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> - <!--<script src="golden/js/goldenlayout.js"></script>--> - <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> + <!--<script src="golden/js/goldenlayout.js"></script>--> + <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link type="text/css" rel="stylesheet" href="golden/css/goldenlayout.css" /> - <link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" /> - <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> + <link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" /> + <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <script src="lib/jquery.ui.touch-punch.min.js"></script> <script src="lib/jdataview.min.js"></script> <script src="lib/gify.min.js"></script> <script src="backgrounds.min.js"></script> <script src="evidences.min.js"></script> <script src="ui.b.js"></script> - <script src="client.b.js"></script> + <script src="client.b.js"></script> </head> <template id="client_wrapper"> - <meta name="frame-title" lang="en" content="Game"> + <meta name="frame-title" lang="en" content="Game"> <div id="client_background"></div> - <div id="client_gamewindow"> - <img id="client_court" alt="Courtroom background" onerror="imgError(this);"> - <img id="client_char" alt="Character sprite" onerror="imgError(this);"> - <img id="client_bench" alt="Bench overlay"> - <img id="client_fg" alt="Various overlay" onerror="imgError(this);"> + <div id="client_gamewindow"> + <img id="client_court" alt="Courtroom background" onerror="imgError(this);"> + <img id="client_char" alt="Character sprite" onerror="imgError(this);"> + <img id="client_bench" alt="Bench overlay"> + <img id="client_fg" alt="Various overlay" onerror="imgError(this);"> <img id="client_evi" src="misc/evidence_selector.png" alt="Character Evidence" onerror="imgError(this);"> <img id="client_shout" alt="Effect overlay" src="misc/placeholder.gif" onerror="imgError(this);"> <div id="client_name"> - <p>Dolan</p> - </div> + <p>Dolan</p> + </div> <div id="client_chat"> - <p id="client_inner_chat"></p> - </div> + <p id="client_inner_chat"></p> + </div> <img id="client_testimony" alt="Testimony overlay" onerror="imgError(this);"> - </div> - <input id="client_inputbox" class="long" type="text" onkeypress="onEnter(event)" style="padding-left: 1px; padding-right: 1px;"> + </div> + <input id="client_inputbox" class="long" type="text" onkeypress="onEnter(event)" style="padding-left: 1px; padding-right: 1px;"> <meta name="frame-title" lang="en" content="Miscellaneous"> - <div id="client_bars"> + <div id="client_bars"> <span id="client_defense_hp" class="health-box"> <div class="health-bar"></div> </span> <span id="client_prosecutor_hp" class="health-box"> <div class="health-bar"></div> </span> - </div> + </div> <div id="client_emo"> </div> <br> @@ -56,7 +58,8 @@ <img src="misc/holdit.png" id="button_1" alt="Hold it!" class="client_button" onclick="toggleshout(1)"> <img src="misc/objection.png" id="button_2" alt="OBJECTION!" class="client_button" onclick="toggleshout(2)"> <img src="misc/takethat.png" id="button_3" alt="Take That!" class="client_button" onclick="toggleshout(3)"> - <br><br> + <br> + <br> <label for="textcolor">Text Color:</label> <select id="textcolor" name="textcolor"> <option value="0">Default</option> @@ -69,51 +72,87 @@ </select> <label for="sendsfx">SFX</label> <input type="checkbox" id="sendsfx" name="sendsfx" value="sendsfx"> - <br><br> + <br> + <br> <label>Flip: </label> - <img src="misc/flip.png" id="button_flip" alt="Flip" class="client_button" onclick="toggleflip()"> + <img src="misc/flip.png" id="button_flip" alt="Flip" class="client_button" onclick="toggleflip()"> <label>Effect: </label> <img src="misc/flash.png" id="button_effect_1" alt="Flash" class="client_button" onclick="toggleaffect(1)"> <img src="misc/shake.png" id="button_effect_2" alt="Shake" class="client_button" onclick="toggleaffect(2)"> </div> <fieldset style="margin:10px;"> <legend>Action Commands</legend> - <!----------- Judge Commands ---------------> + <!-- Judge Commands --> <span id="judge_action" style="display:none"> - <span id="menu_wt" onclick="initwt()" class="menu_icon"><i class="material-icons em-3">record_voice_over</i><div>Witness<br>Testimony</div></span> - <span id="menu_ce" onclick="initce()" class="menu_icon"><i class="material-icons em-3">question_answer</i><div>Cross<br>Examination</div></span> + <span id="menu_wt" onclick="initwt()" class="menu_icon"> + <i class="material-icons em-3">record_voice_over</i> + <div>Witness + <br>Testimony</div> + </span> + <span id="menu_ce" onclick="initce()" class="menu_icon"> + <i class="material-icons em-3">question_answer</i> + <div>Cross + <br>Examination</div> + </span> <br> <span style="display:inline-block; vertical-align: middle;"> - <span id="menu_ahpd" onclick="addHPD()" class="menu_icon" ><i class="material-icons em1-5">add_circle</i></span> + <span id="menu_ahpd" onclick="addHPD()" class="menu_icon"> + <i class="material-icons em1-5">add_circle</i> + </span> <span style="font-size: 1.25em">Defense</span> - <span id="menu_rhpd" onclick="redHPD()" class="menu_icon" ><i class="material-icons em1-5">remove_circle</i></span> + <span id="menu_rhpd" onclick="redHPD()" class="menu_icon"> + <i class="material-icons em1-5">remove_circle</i> + </span> </span> <span style="display:inline-block; vertical-align: middle;"> - <span id="menu_ahpp" onclick="addHPP()" class="menu_icon" ><i class="material-icons em-1-5">add_circle</i></span> - <span style="font-size: 1.25em">Prosecution</span> - <span id="menu_rhpp" onclick="redHPP()" class="menu_icon" ><i class="material-icons em-1-5">remove_circle</i></span> + <span id="menu_ahpp" onclick="addHPP()" class="menu_icon"> + <i class="material-icons em-1-5">add_circle</i> + </span> + <span style="font-size: 1.25em">Prosecution</span> + <span id="menu_rhpp" onclick="redHPP()" class="menu_icon"> + <i class="material-icons em-1-5">remove_circle</i> + </span> </span> </span> - <!----------- No Commands ---------------> + <!-- No Commands --> <span id="no_action"> - No action available for this role. + No actions available for this role. </span> </fieldset> <br> - <span id="menu_cm" onclick="callmod()" class="menu_icon"><i class="material-icons em-3">report</i><div>Call Mod</div></span> + <span id="menu_cm" onclick="callmod()" class="menu_icon"> + <i class="material-icons em-3">report</i> + <div>Call Mod</div> + </span> </template> <template id="mainmenu"> - <meta name="frame-title" lang="en" content="Log"> - <div id="client_menu"> - <div class="hrtext">↓ Main Menu ↓</div> - <span id="menu_1" onclick="togglemenu(1)" class="menu_icon active"><i class="material-icons em-3">work</i><div>Evidence</div></span> - <span id="menu_2" onclick="togglemenu(2)" class="menu_icon"><i class="material-icons em-3">room</i><div>Location</div></span> - <span id="menu_3" onclick="togglemenu(3)" class="menu_icon"><i class="material-icons em-3">settings</i><div>Settings</div></span> - <span id="menu_4" onclick="togglemenu(4)" class="menu_icon"><i class="material-icons em-3">description</i><div>Guide</div></span> - <span id="menu_5" onclick="togglemenu(5)" class="menu_icon"><i class="material-icons em-3">person</i><div>About</div></span> - <div class="hrtext">↓ <span id="content_name">Content</span> ↓</div> - <!-------- Evidence section --------> + <meta name="frame-title" lang="en" content="Log"> + <div id="client_menu"> + <div class="hrtext">↓ Main Menu ↓</div> + <span id="menu_1" onclick="togglemenu(1)" class="menu_icon active"> + <i class="material-icons em-3">work</i> + <div>Evidence</div> + </span> + <span id="menu_2" onclick="togglemenu(2)" class="menu_icon"> + <i class="material-icons em-3">room</i> + <div>Location</div> + </span> + <span id="menu_3" onclick="togglemenu(3)" class="menu_icon"> + <i class="material-icons em-3">settings</i> + <div>Settings</div> + </span> + <span id="menu_4" onclick="togglemenu(4)" class="menu_icon"> + <i class="material-icons em-3">description</i> + <div>Guide</div> + </span> + <span id="menu_5" onclick="togglemenu(5)" class="menu_icon"> + <i class="material-icons em-3">person</i> + <div>About</div> + </span> + <div class="hrtext">↓ + <span id="content_name">Content</span> ↓</div> + <!-- Evidence section --> <span class="menu_content active" id="content_1"> <meta name="frame-title" lang="en" content="Evidence"> <fieldset style="text-align: left"> @@ -125,165 +164,206 @@ <label for="evi_filename">Icon:</label> <select id="evi_select" name="evi_select" onchange="updateEvidenceIcon()"></select> <input id="evi_filename" name="evi_filename" class="short" type="text"> - <br><br> + <br> + <br> <label for="evi_name">Name:</label> <input id="evi_name" name="evi_name" class="short" type="text"> - <br><br> + <br> + <br> <label for="evi_desc">Description:</label> <textarea id="evi_desc" name="evi_desc" rows="2" cols="20"></textarea> </span> - <br><br> + <br> + <br> <span style="display:block;text-align:center"> - <img src="misc/evidence_add.png" id="evi_add" alt="Add Evidence" class="client_button hover_button" onclick="addevidence()"> - <img src="misc/evidence_edit.png" id="evi_edit" alt="Edit Evidence" class="client_button hover_button inactive" onclick="editevidence()"> - <img src="misc/evidence_cancel.png" id="evi_cancel" alt="Cancel Evidence" class="client_button hover_button inactive" onclick="cancelevidence()"> - <img src="misc/evidence_remove.png" id="evi_del" alt="Remove Evidence" class="client_button hover_button inactive" onclick="delevidence()"> - </span> - </fieldset> + <img src="misc/evidence_add.png" id="evi_add" alt="Add Evidence" class="client_button hover_button" onclick="addevidence()"> + <img src="misc/evidence_edit.png" id="evi_edit" alt="Edit Evidence" class="client_button hover_button inactive" onclick="editevidence()"> + <img src="misc/evidence_cancel.png" id="evi_cancel" alt="Cancel Evidence" class="client_button hover_button inactive" onclick="cancelevidence()"> + <img src="misc/evidence_remove.png" id="evi_del" alt="Remove Evidence" class="client_button hover_button inactive" onclick="delevidence()"> + </span> + </fieldset> <br> <div id="evidences"></div> <br> - <img src="misc/present.png" id="button_present" alt="Present" class="client_button" onclick="togglepresent()"> + <img src="misc/present.png" id="button_present" alt="Present" class="client_button" onclick="togglepresent()"> </span> - - <!-------- Location section --------> + + <!-- Location section --> <span class="menu_content" id="content_2"> - <div id="areas"></div><br> + <div id="areas"></div> + <br> <fieldset style="text-align: left"> <legend>Current Area Background</legend> <span> <img id="bg_preview" src="misc/placeholder.gif" alt="Background Preview" onerror="imgError(this);"> </span> - <span style="display:inline-block"> - <label for="bg_filename">Background:</label><br> + <span style="display:inline-block"> + <label for="bg_filename">Background:</label> + <br> <select id="bg_select" name="bg_select" onchange="updateBackgroundPreview()" style="margin-top:10px"></select> <br> <input id="bg_filename" name="bg_filename" class="short" type="text" style="margin-top:10px"> - <br><br> + <br> + <br> <img src="misc/location_change.png" id="bg_change" alt="Change" class="client_button hover_button" onclick="changeBackgroundOOC()"> - <span> + <span> </fieldset> - </span> - - <!-------- Settings section --------> - <span class="menu_content" id="content_3"> - <meta name="frame-title" lang="en" content="Settings"> - <label for="OOC_name">Server chat name:</label> - <input id="OOC_name" name="OOC_name" class="short" type="text"> - <label for="role_select" >Role:</label> - <select id="role_select" name="role_select" onchange="changeRoleOOC()"> - <option value="def">Defense</option> - <option value="pro">Prosecution</option> - <option value="jud">Judge</option> - <option value="wit">Witness</option> - <option value="hld">Helper Defense</option> - <option value="hlp">Helper Prosecution</option> - </select> - <br><br> - <div class="slider">Music<input id="client_mvolume" class="long" type="range" min="0" max="100" value="80" onchange="changeMusicVolume()"></div> - <div class="slider">SFX <input id="client_svolume" class="long" type="range" min="0" max="100" value="70" onchange="changeSFXVolume()"></div> - <div class="slider">Blip <input id="client_bvolume" class="long" type="range" min="0" max="100" value="60" onchange="changeBlipVolume()"></div> - <br> - <img src="misc/character_change.png" id="char_change" alt="Change" class="client_button hover_button" onclick="changeCharacter()"> - <img src="misc/character_random.png" id="char_change" alt="Change" class="client_button hover_button" onclick="randomCharacterOOC()"> - <br><br> - <label for="client_encoding"> Client side chat encoding:</label> - <select id="client_encoding" name="client_encoding"> - <option value="none">None</option> - <option value="unicode">Unicode</option> - <option value="utf16">UTF-16</option> - </select> - <br><br> - <label for="client_decoding"> Client side chat decoding:</label> - <select id="client_decoding" name="client_decoding"> - <option value="none">None</option> - <option value="unicode">Unicode</option> - <option value="utf16">UTF-16</option> - </select> - <br><br> - <span style="color:red">* If you not sure what does this means, please don't change these following settings.</span> - <br><br> - <label for="bg_command">Change background command:</label> - <input id="bg_command" name="bg_command" class="short" type="text" value="bg $1"> - <br><br> - <label for="role_command">Change role command:</label> - <input id="role_command" name="role_command" class="short" type="text" value="pos $1"> - <br><br> - <label for="randomchar_command">Random character command:</label> - <input id="randomchar_command" name="randomchar_command" class="short" type="text" value="randomchar"> - </span> - - <!-------- Guide section --------> - <span class="menu_content" id="content_4"> - <span style="text-align:left;margin-left:15px;display:block"> - <b>BBcode</b> * Only work on webAO - <ol style="line-height:1.5em;"> - <li>\n : new line</li> - <li>[b][/b] : <b>bolded text</b></li> - <li>[i][/i] : <i>italicized text</i></li> - <li>[u][/u] : <u>underlined text</u></li> - <li>[s][/s] : <del>strikethrough text</del></li> - <li>[sub][/sub] : <sub>subscript text</sub></li> - <li>[sup][/sup] : <sup>superscript text</sup></li> - <li>[m=#0f0][/m] : <mark style="background-color:#0f0">highlighted text</mark></li> - <li>[c=cyan][/c] : <span style="color:cyan">colorized text</span></li> - </ol> </span> - </span> - - <!-------- About section --------> - <span class="menu_content" id="content_5"> - <meta name="frame-title" lang="en" content="About"> - <img id="about-logo" src="images/logo-new.png" alt="Attorney Online logo"> - <h1 style="line-height: .3em;">webAO</h1> - <h3>version 2.1.3</h3> - <p>Client created by <a href="https://github.com/stonedDiscord">@stonedDiscord</a> and fixed up by <a href="https://github.com/oldmud0">@oldmud0</a>.</p> - <p>Modified by <a href="https://github.com/qubrick">Qubrick</a></p> - <p>Special thanks to Aleks for reverse engineering the original Delphi client written by FanatSors.</p> - </span> - </div> + + <!-- Settings section --> + <span class="menu_content" id="content_3"> + <meta name="frame-title" lang="en" content="Settings"> + <label for="OOC_name">Server chat name:</label> + <input id="OOC_name" name="OOC_name" class="short" type="text"> + <label for="role_select">Role:</label> + <select id="role_select" name="role_select" onchange="changeRoleOOC()"> + <option value="def">Defense</option> + <option value="pro">Prosecution</option> + <option value="jud">Judge</option> + <option value="wit">Witness</option> + <option value="hld">Helper Defense</option> + <option value="hlp">Helper Prosecution</option> + </select> + <br> + <br> + <div class="slider">Music + <input id="client_mvolume" class="long" type="range" min="0" max="100" value="80" onchange="changeMusicVolume()"> + </div> + <div class="slider">SFX + <input id="client_svolume" class="long" type="range" min="0" max="100" value="70" onchange="changeSFXVolume()"> + </div> + <div class="slider">Blip + <input id="client_bvolume" class="long" type="range" min="0" max="100" value="60" onchange="changeBlipVolume()"> + </div> + <br> + <img src="misc/character_change.png" id="char_change" alt="Change" class="client_button hover_button" onclick="changeCharacter()"> + <img src="misc/character_random.png" id="char_change" alt="Change" class="client_button hover_button" onclick="randomCharacterOOC()"> + <br> + <br> + <label for="client_encoding"> Client side chat encoding:</label> + <select id="client_encoding" name="client_encoding"> + <option value="none">None</option> + <option value="unicode">Unicode</option> + <option value="utf16">UTF-16</option> + </select> + <br> + <br> + <label for="client_decoding"> Client side chat decoding:</label> + <select id="client_decoding" name="client_decoding"> + <option value="none">None</option> + <option value="unicode">Unicode</option> + <option value="utf16">UTF-16</option> + </select> + <br> + <br> + <span style="color:red">Only touch these settings if you know what you are doing.</span> + <br> + <br> + <label for="bg_command">Change background command:</label> + <input id="bg_command" name="bg_command" class="short" type="text" value="bg $1"> + <br> + <br> + <label for="role_command">Change role command:</label> + <input id="role_command" name="role_command" class="short" type="text" value="pos $1"> + <br> + <br> + <label for="randomchar_command">Random character command:</label> + <input id="randomchar_command" name="randomchar_command" class="short" type="text" value="randomchar"> + </span> + + <!-- Guide section --> + <span class="menu_content" id="content_4"> + <span style="text-align:left;margin-left:15px;display:block"> + <b>BBcode</b>Only works on webAO + <ol style="line-height:1.5em;"> + <li>\n : new line</li> + <li>[b][/b] : + <b>bolded text</b> + </li> + <li>[i][/i] : + <i>italicized text</i> + </li> + <li>[u][/u] : + <u>underlined text</u> + </li> + <li>[s][/s] : + <del>strikethrough text</del> + </li> + <li>[sub][/sub] : + <sub>subscript text</sub> + </li> + <li>[sup][/sup] : + <sup>superscript text</sup> + </li> + <li>[m=#0f0][/m] : + <mark style="background-color:#0f0">highlighted text</mark> + </li> + <li>[c=cyan][/c] : + <span style="color:cyan">colorized text</span> + </li> + </ol> + </span> + </span> + + <!-- About section --> + <span class="menu_content" id="content_5"> + <meta name="frame-title" lang="en" content="About"> + <img id="about-logo" src="images/logo-new.png" alt="Attorney Online logo"> + <h1 style="line-height: .3em;">webAO</h1> + <h3>version 2.3</h3> + <p>Client created by + <a href="https://github.com/stonedDiscord">@stonedDiscord</a> and fixed up by + <a href="https://github.com/oldmud0">@oldmud0</a> and + <a href="https://github.com/qubrick">Qubrick</a>.</p> + <p>Special thanks to Aleks for reverse engineering the original Delphi client written by FanatSors.</p> + </span> + </div> </template> <template id="log"> - <meta name="frame-title" lang="en" content="Log"> - <div id="client_log"> - <div class="hrtext">↓ log starts here ↓</div> - </div> + <meta name="frame-title" lang="en" content="Log"> + <div id="client_log"> + <div class="hrtext">↓ log starts here ↓</div> + </div> </template> <template id="ooc"> - <meta name="frame-title" lang="en" content="Server"> - <div style="height: 100%; display: flex; flex-direction: column;"> - <textarea id="client_ooclog" style="flex: 1 auto" readonly></textarea> - <input id="client_oocinputbox" class="long" type="text" onkeypress="onOOCEnter(event)"> - </div> + <meta name="frame-title" lang="en" content="Server"> + <div style="height: 100%; display: flex; flex-direction: column;"> + <textarea id="client_ooclog" style="flex: 1 auto" readonly></textarea> + <input id="client_oocinputbox" class="long" type="text" onkeypress="onOOCEnter(event)"> + </div> </template> <template id="music"> - <meta name="frame-title" lang="en" content="Music"> - <select id="client_musiclist" size="5" onclick="musiclist_click(event)" style="width: 100%; height: 100%;"> - </select> + <meta name="frame-title" lang="en" content="Music"> + <select id="client_musiclist" size="5" onclick="musiclist_click(event)" style="width: 100%; height: 100%;"> + </select> </template> <div id="callmod_dialog" title="Are you sure to call mod?"> - <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>They might be very busy. Are you sure?</p> + <p> + <span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>They might be very busy. Are you sure?</p> </div> <body> - <span id="sound"></span> - <div id="here"></div> - <div id="client_loading"> - <h1 id="client_loadingtext">Loading</h1> - <button onclick="RetryButton()">RETRY</button> - </div> - <div id="client_charselect"> - <button onclick="pickchar(1001)">SPECTATE</button> - <table id="client_chartable"></table> - </div> - <div id="client_error" class="error" style="display: none"> - <p>You were disconnected from the server.</p> - <p>Code: <span id="error_id">(none)</span></p> - <button onclick="ReconnectButton()">Reconnect</button> - </div> + <span id="sound"></span> + <div id="here"></div> + <div id="client_loading"> + <h1 id="client_loadingtext">Loading</h1> + <button onclick="RetryButton()">RETRY</button> + </div> + <div id="client_charselect"> + <button onclick="pickchar(1001)">SPECTATE</button> + <table id="client_chartable"></table> + </div> + <div id="client_error" class="error" style="display: none"> + <p>You were disconnected from the server.</p> + <p>Code: + <span id="error_id">(none)</span> + </p> + <button onclick="ReconnectButton()">Reconnect</button> + </div> </body> + </html>
\ No newline at end of file |