<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns:v>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Expires" CONTENT="-1">
<link rel="icon" href="images/favicon.png">
<title><#860#> - <#2212#></title>
<link rel="stylesheet" type="text/css" href="index_style.css">
<link rel="stylesheet" type="text/css" href="form_style.css">
<link rel="stylesheet" type="text/css" href="device-map/device-map.css">
<link rel="stylesheet" type="text/css" href="css/basic.css">
<link rel="stylesheet" type="text/css" href="css/gameprofile.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/httpApi.js"></script>
<script type="text/javascript" src="/state.js"></script>
<script type="text/javascript" src="/help.js"></script>
<script type="text/javascript" src="/general.js"></script>
<script type="text/javascript" src="/popup.js"></script>
<script type="text/javascript" src="/client_function.js"></script>
<script type="text/javascript" src="/validator.js"></script>
<script type="text/javascript" src="js/gameProfile.js"></script>
<script type="text/javascript" src="js/searchOpenNatProfile.js"></script>
<script>
var wItem2 = new Array();
<% login_state_hook(); %>
var overlib_str0 = new Array();
var overlib_str = new Array();
var vts_rulelist_array = decodeURIComponent('<% nvram_char_to_ascii("","game_vts_rulelist"); %>').replace(/>/g, ">");
var nvram = httpApi.nvramGet(["vts_enable_x"]);
var gameList = new Object;
var faq_href = "https://nw-dlcdnet.asus.com/support/forward.html?model=&type=Faq&lang="+ui_lang+"&kw=&num=125";
(function(){
var vts_rulelist_row = vts_rulelist_array.split('<');
var _temp = '';
for(var i=0; i<vts_rulelist_row.length; i++){
var vts_rulelist_col = vts_rulelist_row[i].split('>');
var _platform = vts_rulelist_col[0].split('@')[1];
var _port = vts_rulelist_col[1];
if((vts_rulelist_col[0].indexOf('Rocket League') != -1)){
if(_platform == 'PC' && _port == '7000:9000'){
_temp += '<' + vts_rulelist_col[0];
_temp += '>' + '7000:8080,8082:8442,8444:9000';
_temp += '>' + vts_rulelist_col[2];
_temp += '>' + vts_rulelist_col[3];
_temp += '>' + vts_rulelist_col[4];
_temp += '>' + vts_rulelist_col[5];
}
else if(_platform == 'PS4' && _port == '1935,3074,3478:3480,7000:9000'){
_temp += '<' + vts_rulelist_col[0];
_temp += '>' + '1935,3074,3478:3480,7000:8080,8082:8442,8444:9000';
_temp += '>' + vts_rulelist_col[2];
_temp += '>' + vts_rulelist_col[3];
_temp += '>' + vts_rulelist_col[4];
_temp += '>' + vts_rulelist_col[5];
}
else if(_platform == 'XBOXONE' && _port == '88,500,3074,3544,4500,7000:9000'){
_temp += '<' + vts_rulelist_col[0];
_temp += '>' + '88,500,3074,3544,4500,7000:8080,8082:8442,8444:9000';
_temp += '>' + vts_rulelist_col[2];
_temp += '>' + vts_rulelist_col[3];
_temp += '>' + vts_rulelist_col[4];
_temp += '>' + vts_rulelist_col[5];
}
else if(_platform == 'STEAM' && _port == '4380,7000:9000,27000:27031,27036:27037'){
_temp += '<' + vts_rulelist_col[0];
_temp += '>' + '4380,7000:8080,8082:8442,8444:9000,27000:27031,27036:27037';
_temp += '>' + vts_rulelist_col[2];
_temp += '>' + vts_rulelist_col[3];
_temp += '>' + vts_rulelist_col[4];
_temp += '>' + vts_rulelist_col[5];
}
}
else{
_temp += '<' + vts_rulelist_row[i];
}
}
})();
function initial(){
show_menu();
$("#faq").attr('target','_blank')
.attr("href", faq_href);
if((wan_proto == "v6plus" || wan_proto == "ocnvc") && s46_ports_check_flag && array_ipv6_s46_ports.length > 1){
$("#v6plus_port_range_note").show();
$(".setup_info_icon_game").show();
$(".setup_info_icon_game").click(
function() {
if($("#s46_ports_content").is(':visible'))
$("#s46_ports_content").fadeOut();
else{
var position = $(".setup_info_icon_game").position();
pop_s46_ports(position, "game");
}
}
);
$("#new_profile_externalPort").focus(
function() {
var position_text = $("#new_profile_externalPort").position();
pop_s46_ports(position_text, "game");
}
);
}
(nvram.vts_enable_x == '1') ? $('#PF_switch').prop('checked', true) : $('#PF_switch').prop('checked', false);
collectGameList();
updatProfileOnline();
if(vts_rulelist_array != ''){
$('#listTable').show();
genListTable();
}
else{
genQuickAdd();
$('#emptyTable').show();
}
genQuickAddInner();
setTimeout("showDropdownClientList('setClientIP', 'ip', 'all', 'ClientList_Block_PC', 'pull_arrow', 'all');", 1000);
}
function collectGameList(){
var _profile = gameProfile.profile;
for(i=0; i<_profile.length; i++){
if(gameList[_profile[i].id] == undefined){
gameList[_profile[i].id] = {
'id': _profile[i].id,
'title': _profile[i].title,
'class': _profile[i].class
}
}
}
}
function updatProfileOnline(){
$.ajax({
url: 'https://nw-dlcdnet.asus.com/plugin/js/gameProfile.json',
dataType: 'json',
error: function(xhr) {
setTimeout("updatProfileOnline();", 5000);
},
success: function(response){
gameProfile.profile = Object.keys(response).map(function(e){
return response[e];
});
collectGameList();
genQuickAdd();
genQuickAddInner();
}
});
}
function genQuickAdd(){
var code = '';
var _list = Object.keys(gameList).map(function(e){
return gameList[e];
});
for(i=0; i<_list.length; i++){
code += '<div id="_'+ _list[i].id +'" class="game-profile game-p-'+ _list[i].class +'" onclick="addNewProfile(this.id);">';
code += '<div class="game-p-t-container">';
code += '<div class="game-p-bar"></div>';
code += '<div class="game-p-title">'+ _list[i].title +'</div>';
code += '</div>';
code += '</div>';
}
$('#empty_qiuckAdd').html(code);
}
function genQuickAddInner(){
var code = '';
var _list = Object.keys(gameList).map(function(e){
return gameList[e];
});
var _defaultObj = {
'id': 'default_game',
'title': 'Manual',
'class': 'default'
}
_list.unshift(_defaultObj);
for(i=0; i<_list.length; i++){
code += '<div id="'+ _list[i].id +'" class="new-g-p-content" onclick="quickAddRule(this.id);">';
code += '<div class="new-g-p-image game-p-'+ _list[i].class +'"></div>';
code += '<div class="new-g-p-desc">'+ _list[i].title +'</div>';
code += '</div>';
}
$('#inner_quickAdd').html(code);
}
function genListTable(){
var vts_rulelist_row = vts_rulelist_array.split('<');
var code = '';
var _count = 0;
code += '<div class="flexbox table-title">';
code += '<div class="table-content1-width"><div><#1252#></div></div>';
code += '<div class="table-content2-width"><div><#1556#></div></div>';
code += '<div class="table-content3-width"><div><#2441#></div></div>';
code += '<div class="table-content4-width"><div>Actions</div></div>';
code += '</div>';
for(i=1; i< vts_rulelist_row.length; i++){
var vts_rulelist_col = vts_rulelist_row[i].split('>');
var _platform = '';
var _class = 'game-p-default';
_count++;
code += '<div class="flexbox flex-a-center table-per-content">';
code += '<div class="flexbox flex-a-center table-content1-width">';
for(j=0; j<gameProfile.profile.length; j++){
var _target = gameProfile.profile[j];
if(_target.port == vts_rulelist_col[1]){
if(vts_rulelist_col[0].split('@').length < 2){
if(_target.port == vts_rulelist_col[1]
&& (_target.title == vts_rulelist_col[0] || vts_rulelist_col[0].indexOf(_target.title) != -1)){
_platform = _target.platform;
}
}
else{
_platform = vts_rulelist_col[0].split('@')[1];
}
_class += ' game-p-' + _target.class;
}
}
var _platformObj = {
'PC': 'PC',
"XBOXSerX":"XBOX Series X",
"XBOXONE":"XBOX ONE",
"XBOX360":"XBOX 360",
"PS5": "PS5",
"PS4": "PS4",
"PS3": "PS3",
"STEAM": "STEAM",
"SWITCH": "SWITCH"
}
code += '<div class="table-content-image ' + _class + ' "></div>';
code += '<div class="table-content1-container">';
code += '<div class="table-content1-title">' + vts_rulelist_col[0] + '</div>';
code += '<div class="flexbox flex-a-center table-content1-subcontainer">';
if(_platform != ''){
code += '<div class="table-content1-platform">' + _platformObj[_platform] + '</div>';
code += '<div class="table-content1-divide"></div>';
}
var _port = vts_rulelist_col[1];
if(vts_rulelist_col[1].length > 18){
_port = vts_rulelist_col[1].slice(0, 14) + '...';
}
code += '<div title="'+ vts_rulelist_col[1] +'">' + _port + '</div>';
code += '</div>';
code += '</div>';
code += '</div>';
code += '<div class="table-content2-width">';
var _clientName = '';
for(j=0; j<clientList.length; j++){
var _index = clientList[j];
if(clientList[_index].ip == vts_rulelist_col[2]){
_clientName = clientList[_index].name;
}
}
code += '<div class="table-content1-title">' + _clientName + '</div>';
code += '<div class="table-content1-subcontainer">' + vts_rulelist_col[2] + '</div>';
code += '</div>';
code += '<div class="table-content3-width">';
code += '<div class="table-content1-title">' + vts_rulelist_col[4] + '</div>';
code += '<div class="table-content1-subcontainer">' + vts_rulelist_col[3] + '</div>';
code += '</div>';
code += '<div class="table-content4-width">';
code += '<div class="flexbox flex-a-center">';
code += '<div class="table-action-icon icon-delete" onclick="deleteRule('+ i +')"></div>';
code += '</div>';
code += '</div>';
code += '</div>';
}
$('#rule_num').html(_count);
$('#list_content').html(code);
}
function deleteRule(flag){
var vts_rulelist_row = vts_rulelist_array.split('<');
var code = '';
for(i=1; i<vts_rulelist_row.length; i++){
if(i != flag){
code += '<' + vts_rulelist_row[i];
}
}
vts_rulelist_array = code;
genListTable();
}
function applyRule(){
document.form.game_vts_rulelist.value = vts_rulelist_array;
showLoading();
document.form.submit();
}
function setClientIP(num){
document.getElementById('new_profile_localIP').value = num;
hideClients_Block();
}
function pullLANIPList(obj){
var element = document.getElementById('ClientList_Block_PC');
var isMenuopen = element.offsetWidth > 0 || element.offsetHeight > 0;
if(isMenuopen == 0){
element.style.display = 'block';
document.getElementById('new_profile_localIP').focus();
}
else
hideClients_Block();
}
function hideClients_Block(){
document.getElementById('ClientList_Block_PC').style.display='none';
}
function validate_multi_range(val, mini, maxi){
var rangere=new RegExp("^([0-9]{1,5})\:([0-9]{1,5})$", "gi");
if(rangere.test(val)){
if(!validator.eachPort(document.getElementById("new_profile_externalPort"), RegExp.$1, mini, maxi) || !validator.eachPort(document.getElementById("new_profile_externalPort"), RegExp.$2, mini, maxi)){
return false;
}else if(parseInt(RegExp.$1) >= parseInt(RegExp.$2)){
alert("<#347#>");
return false;
}else
return true;
}
else{
if(!validate_single_range(val, mini, maxi)){
return false;
}
return true;
}
}
function validate_single_range(val, min, max) {
for(j=0; j<val.length; j++){
if (val.charAt(j)<'0' || val.charAt(j)>'9'){
alert('<#350#> ' + min + ' <#351#> ' + max);
return false;
}
}
if(val < min || val > max) {
alert('<#350#> ' + min + ' <#351#> ' + max);
return false;
}else
return true;
}
function check_multi_range(obj, mini, maxi, allow_range){
var _objValue = obj.value.replace(/[-~]/gi,":");
var PortSplit = _objValue.split(/,|:/);
for(i=0;i<PortSplit.length;i++){
PortSplit[i] = PortSplit[i].replace(/(^\s*)|(\s*$)/g, "");
PortSplit[i] = PortSplit[i].replace(/(^0*)/g, "");
if(PortSplit[i] == "" ||PortSplit[i] == 0){
alert("<#2523#>");
obj.focus();
obj.select();
return false;
}
if(allow_range)
res = validate_multi_range(PortSplit[i], mini, maxi);
else
res = validate_single_range(PortSplit[i], mini, maxi);
if(!res){
obj.focus();
obj.select();
return false;
}
}
return true;
}
function check_multi_range_s46_ports(obj){
_objValue = obj.value.replace(/[-~]/gi,":");
var PortSplit = _objValue.split(/,|:/);
var res=false;
var res_result=0;
for(i=0;i<PortSplit.length;i++){
PortSplit[i] = PortSplit[i].replace(/(^\s*)|(\s*$)/g, "");
PortSplit[i] = PortSplit[i].replace(/(^0*)/g, "");
res = validator.range_s46_ports(obj, PortSplit[i]);
if(res)
res_result++;
}
if(res_result != PortSplit.length){
return false;
}
return true;
}
function switchPortForward(obj){
nvram.vts_enable_x = (obj.checked)?"1":"0";
httpApi.nvramSet({
"vts_enable_x": nvram.vts_enable_x,
"action_mode": "apply",
"action_wait": "5",
"rc_service": "restart_firewall"
});
showLoading(5);
}
function addNewProfile(target){
$('#emptyTable').hide();
$('#listTable').hide();
$('#addRuleField').show();
$('.game-selected').removeClass('game-selected');
$('#new_profile_name').val('');
$('#new_profile_externalPort').val('');
$('#new_profile_localPort').val('');
$('#new_profile_localIP').val('');
$('#new_profile_sourceIP').val('');
$('#platformPC').prop('checked', false);
$('#platformXBOXSerX').prop('checked', false);
$('#platformXBOXONE').prop('checked', false);
$('#platformXBOX360').prop('checked', false);
$('#platformPS5').prop('checked', false);
$('#platformPS4').prop('checked', false);
$('#platformPS3').prop('checked', false);
$('#platformSTEAM').prop('checked', false);
$('#platformSWITCH').prop('checked', false);
$('#platformPC_field').hide();
$('#platformXBOXSerX_field').hide();
$('#platformXBOXONE_field').hide();
$('#platformXBOX360_field').hide();
$('#platformPS5_field').hide();
$('#platformPS4_field').hide();
$('#platformPS3_field').hide();
$('#platformSTEAM_field').hide();
$('#platformSWITCH_field').hide();
if(target == undefined){
$('#default_game').addClass('game-selected');
$('#protocol_field').show();
$('#externalPort_field').show();
$('#localPort_field').show();
$('#sourceIP_field').show();
}
else{
var id = target.split('_')[1];
$('#new_profile_name').prop('disabled', true);
$('#protocol_field').hide();
$('#externalPort_field').hide();
$('#localPort_field').hide();
$('#sourceIP_field').hide();
$('#' + id).addClass('game-selected');
var _name = '';
for(i=0; i<gameProfile.profile.length; i++){
var _platform = '';
if(gameProfile.profile[i].id == id){
_platform = gameProfile.profile[i].platform;
$('#platform' + _platform).prop('checked', true);
$('#platform' + _platform + '_field').show();
_name = gameProfile.profile[i].title;
}
}
$('#new_profile_name').val(_name);
}
}
function cancelNewProfile(){
if($("#s46_ports_content").is(':visible'))
$("#s46_ports_content").fadeOut();
if($("#ClientList_Block_PC").is(':visible'))
$("#ClientList_Block_PC").fadeOut();
$('#addRuleField').hide();
if(vts_rulelist_array != ''){
$('#listTable').show();
}
else{
$('#emptyTable').show();
}
}
function quickAddRule(id){
$('.game-selected').removeClass('game-selected');
$('#' + id).addClass('game-selected');
$('#platformPC').prop('checked', false);
$('#platformXBOXSerX').prop('checked', false);
$('#platformXBOXONE').prop('checked', false);
$('#platformXBOX360').prop('checked', false);
$('#platformPS5').prop('checked', false);
$('#platformPS4').prop('checked', false);
$('#platformPS3').prop('checked', false);
$('#platformSTEAM').prop('checked', false);
$('#platformSWITCH').prop('checked', false);
$('#platformPC_field').hide();
$('#platformXBOXSerX_field').hide();
$('#platformXBOXONE_field').hide();
$('#platformXBOX360_field').hide();
$('#platformPS5_field').hide();
$('#platformPS4_field').hide();
$('#platformPS3_field').hide();
$('#platformSTEAM_field').hide();
$('#platformSWITCH_field').hide();
if(id == 'default_game'){
$('#new_profile_name').prop('disabled', false);
$('#protocol_field').show();
$('#externalPort_field').show();
$('#localPort_field').show();
$('#sourceIP_field').show();
}
else{
$('#new_profile_name').prop('disabled', true);
$('#protocol_field').hide();
$('#externalPort_field').hide();
$('#localPort_field').hide();
$('#sourceIP_field').hide();
}
var _name = '';
for(i=0; i<gameProfile.profile.length; i++){
var _platform = '';
if(gameProfile.profile[i].id == id){
_platform = gameProfile.profile[i].platform;
$('#platform' + _platform).prop('checked', true);
$('#platform' + _platform + '_field').show();
_name = gameProfile.profile[i].title;
}
}
$('#new_profile_name').val(_name);
}
function newProfileOK(){
var _platformArray = ['PC', 'XBOXSerX', 'XBOXONE', 'XBOX360', 'PS5', 'PS4', 'PS3', 'STEAM', 'SWITCH'];
if($("#s46_ports_content").is(':visible'))
$("#s46_ports_content").fadeOut();
if($("#ClientList_Block_PC").is(':visible'))
$("#ClientList_Block_PC").fadeOut();
var _manual = $('#protocol_field').is(':visible');
if(!_manual){
var _platformCheck = false;
for(i=0; i<_platformArray.length; i++){
if($('#platform'+ _platformArray[i]).prop('checked')){
_platformCheck = true;
}
}
if(_platformCheck == false){
alert('Please select at least one platform.');
return false;
}
}
if(!Block_chars(document.getElementById("new_profile_name"), ["<" ,">" ,"%"])){
return false;
}
if(!Block_chars(document.getElementById("new_profile_externalPort"), ["<" ,">"])){
return false;
}
if(!Block_chars(document.getElementById("new_profile_localPort"), ["<" ,">"])){
return false;
}
if($("#default_game").hasClass("game-selected")){
if(document.getElementById("new_profile_externalPort").value == "OTHER") {
document.getElementById("new_profile_localPort").value = "";
if (!validator.numberRange(document.getElementById("new_profile_externalPort"), 1, 255, false))
return false;
}
else{
if(!check_multi_range(document.getElementById("new_profile_externalPort"), 1, 65535, true))
return false;
if((wan_proto == "v6plus" || wan_proto == "ocnvc") && s46_ports_check_flag && array_ipv6_s46_ports.length > 1){
if (!check_multi_range_s46_ports(document.getElementById("new_profile_externalPort"))){
if(!confirm(port_confirm))
{
document.getElementById("new_profile_externalPort").focus();
return false;
}
}
}
}
}
if(document.getElementById("new_profile_localPort").value.length > 0
&& !validator.numberRange(document.getElementById("new_profile_localPort"), 1, 65535)) {
return false;
}
if(document.getElementById("new_profile_localIP").value == "") {
alert("<#332#>");
document.getElementById("new_profile_localIP").focus();
document.getElementById("new_profile_localIP").select();
return false;
}
if(!validator.validIPForm(document.getElementById("new_profile_localIP"), 0)){
return false;
}
$('#addRuleField').hide();
$('#listTable').show();
var _name = $('#new_profile_name').val();
var _id = $('.game-selected').prop('id');
if(_id == 'default_game'){
vts_rulelist_array += '<' + _name;
vts_rulelist_array += '>' + $('#new_profile_externalPort').val();
vts_rulelist_array += '>' + $('#new_profile_localIP').val();
vts_rulelist_array += '>' + $('#new_profile_localPort').val();
vts_rulelist_array += '>' + $('#new_profile_protocol').val();
vts_rulelist_array += '>' + $('#new_profile_sourceIP').val();
}
else{
for(i=0; i<gameProfile.profile.length; i++){
var _target = gameProfile.profile[i];
if(_target.id == _id && $('#platform' + _target.platform).prop('checked')){
vts_rulelist_array += '<' + _name + '@' + _target.platform;
vts_rulelist_array += '>' + _target.port;
vts_rulelist_array += '>' + $('#new_profile_localIP').val();
vts_rulelist_array += '>';
vts_rulelist_array += '>' + _target.protocol;
vts_rulelist_array += '>';
}
}
}
genListTable();
}
</script>
</head>
<body onload="initial();" onunLoad="return unload_body();" class="bg">
<div id="TopBanner"></div>
<div id="Loading" class="popup_bg"></div>
<iframe name="hidden_frame" id="hidden_frame" src="" width="0" height="0" frameborder="0"></iframe>
<form method="post" name="form" action="/start_apply.htm" target="hidden_frame" >
<input type="hidden" name="productid" value="<% nvram_get("productid"); %>">
<input type="hidden" name="current_page" value="GameProfile.asp">
<input type="hidden" name="next_page" value="GameProfile.asp">
<input type="hidden" name="modified" value="0">
<input type="hidden" name="action_wait" value="5">
<input type="hidden" name="action_mode" value="apply">
<input type="hidden" name="action_script" value="restart_firewall">
<input type="hidden" name="first_time" value="">
<input type="hidden" name="preferred_lang" id="preferred_lang" value="<% nvram_get("preferred_lang"); %>">
<input type="hidden" name="firmver" value="<% nvram_get("firmver"); %>">
<input type="hidden" name="game_vts_rulelist" value=''>
<table class="content" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td width="17"> </td>
<td valign="top" width="202">
<div id="mainMenu"></div>
<div id="subMenu"></div>
</td>
<td valign="top">
<div id="tabMenu" class="submenuBlock"></div>
<div class="border-container">
<div class="border-corner border-corner-top-left"></div>
<div class="border-corner border-corner-bottom-left"></div>
<div class="border-bar"></div>
<div class="flexbox title-container">
<div class="title-symbol"></div>
<div class="title-content">OPEN NAT</div>
</div>
<div class="description-container"><#2224#></div>
<div class="description-container" id="v6plus_port_range_note" style="color:#FFCC00;display:none;">* When using v6plus, the number of available assigned ports is limited. Kindly understand that this may result in an interruption of this services and functions.</div> <div class="description-container" style="color:#FFCC00;position:relative;z-index:9;"><#2225#></div>
<div class="world-map">
<div class="map-connection-line"></div>
<div class="location-indicator location-US3"></div>
<div class="location-indicator location-US2"></div>
<div class="location-indicator location-US1"></div>
<div class="location-indicator location-BR"></div>
<div class="location-indicator location-CL"></div>
<div class="location-indicator location-EU1"></div>
<div class="location-indicator location-EU2"></div>
<div class="location-indicator location-RU"></div>
<div class="location-indicator location-SA"></div>
<div class="location-indicator location-CN"></div>
<div class="location-indicator location-TW"></div>
<div class="location-indicator location-AU"></div>
</div>
<div class="divide-line"></div>
<div class="flexbox flex-a-center control-f-container">
<div class="control-description"><#2437#></div>
<div class="switch-button-container">
<label for="PF_switch" >
<input type="checkbox" id="PF_switch" class="switch-button" onchange="switchPortForward(this);">
<div class="switch-button-bg"></div>
<div class="switch-button-circle"></div>
</label>
</div>
</div>
</div>
<div id="emptyTable" class="border-container" style="display:none">
<div class="border-corner border-corner-top-left"></div>
<div class="border-corner border-corner-bottom-left"></div>
<div class="border-bar"></div>
<div class="flexbox title-container">
<div class="title-symbol"></div>
<div class="title-content"><#2212#></div>
</div>
<div class="description-container"><#2213#></div>
<div class="button-container button-container-left" onclick="addNewProfile();">
<div class="button-icon icon-plus"></div>
<div class="button-text"><#1665#></div>
</div>
<div class="divide-line"></div>
<div id='empty_qiuckAdd' class="flexbox flex-d-column flex-w-wrap game-profile-container"></div>
<div class="divide-line"></div>
<div class="right-desc">** <#1317#></div>
</div>
<div id="addRuleField" class="border-container" style="display:none">
<div class="border-corner border-corner-top-left"></div>
<div class="border-corner border-corner-bottom-left"></div>
<div class="border-bar"></div>
<div class="flexbox flex-j-end cancel-button-padding" onclick="cancelNewProfile()">
<div class="icon-button-container">
<div class="icon-button icon-cancel"></div>
</div>
</div>
<div class="flexbox flex-a-center new-g-p-t-field">
<div class="new-g-p-title">New Game Profile</div>
</div>
<div>
<div class="flexbox flex-a-center new-g-profile">
<div class="new-g-p-step">1</div>
<div class="new-g-p-s-title"><#2207#></div>
</div>
<div id="inner_quickAdd" class="new-g-p-container"></div>
<div class="divide-line new-p-divide"></div>
</div>
<div>
<div class="flexbox flex-a-center new-g-profile">
<div class="new-g-p-step">2</div>
<div class="new-g-p-s-title"><#2210#></div>
</div>
<div class="flexbox new-p-platform">
<div id="platformPC_field" class="checkbox-container">
<div>
<input id="platformPC" type="checkbox">
<label for="platformPC">
<div></div>
</label>
</div>
<div class="checkbox-desc">PC</div>
</div>
<div id="platformXBOXSerX_field" class="checkbox-container">
<div>
<input id="platformXBOXSerX" type="checkbox">
<label for="platformXBOXSerX">
<div></div>
</label>
</div>
<div class="checkbox-desc">XBOX Series X</div>
</div>
<div id="platformXBOXONE_field" class="checkbox-container">
<div>
<input id="platformXBOXONE" type="checkbox">
<label for="platformXBOXONE">
<div></div>
</label>
</div>
<div class="checkbox-desc">XBOX ONE</div>
</div>
<div id="platformXBOX360_field" class="checkbox-container">
<div>
<input id="platformXBOX360" type="checkbox">
<label for="platformXBOX360">
<div></div>
</label>
</div>
<div class="checkbox-desc">XBOX 360</div>
</div>
<div id="platformPS5_field" class="checkbox-container">
<div>
<input id="platformPS5" type="checkbox">
<label for="platformPS5">
<div></div>
</label>
</div>
<div class="checkbox-desc">PS 5</div>
</div>
<div id="platformPS4_field" class="checkbox-container">
<div>
<input id="platformPS4" type="checkbox">
<label for="platformPS4">
<div></div>
</label>
</div>
<div class="checkbox-desc">PS 4</div>
</div>
<div id="platformPS3_field" class="checkbox-container">
<div>
<input id="platformPS3" type="checkbox">
<label for="platformPS3">
<div></div>
</label>
</div>
<div class="checkbox-desc">PS 3</div>
</div>
<div id="platformSTEAM_field" class="checkbox-container">
<div>
<input id="platformSTEAM" type="checkbox">
<label for="platformSTEAM">
<div></div>
</label>
</div>
<div class="checkbox-desc">STEAM</div>
</div>
<div id="platformSWITCH_field" class="checkbox-container">
<div>
<input id="platformSWITCH" type="checkbox">
<label for="platformSWITCH">
<div></div>
</label>
</div>
<div class="checkbox-desc">SWITCH</div>
</div>
</div>
<div class="divide-line new-p-divide"></div>
</div>
<div>
<div class="flexbox flex-a-center new-g-profile">
<div class="new-g-p-step">3</div>
<div class="new-g-p-s-title"><#3193#></div>
</div>
<div class="new-p-platform">
<div id="name_field" class="game-p-s-field">
<div class="settings-filed-title"><#1527#></div>
<input id="new_profile_name" type="text" class="input-container" value="" maxlength="30" onkeypress="return validator.isString(this, event);" autocomplete="off" autocorrect="off" autocapitalize="off" >
</div>
<div id="protocol_field" class="game-p-s-field">
<div class="settings-filed-title"><#2441#></div>
<div class="select-container">
<select name="" id="new_profile_protocol">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="BOTH"><#2895#></option>
</select>
<div class="select-arrow">
<div></div>
</div>
</div>
</div>
<div id="externalPort_field" class="game-p-s-field">
<div class="settings-filed-title"><#2452#><div class="setup_info_icon_game" style="display:none;"></div></div>
<input id="new_profile_externalPort" type="text" class="input-container" value="" maxlength="60" onkeypress="return validator.isPortRange(this, event);" autocomplete="off" autocorrect="off" autocapitalize="off" >
</div>
<div id="localPort_field" class="game-p-s-field">
<div class="settings-filed-title"><#2454#></div>
<input id="new_profile_localPort" type="text" class="input-container" style="width:80px;" value="" maxlength="5" onkeypress="return validator.isNumber(this,event);" autocomplete="off" autocorrect="off" autocapitalize="off" >
<div class="hint"><#2008#></div>
</div>
<div id="localIP_field" class="game-p-s-field" >
<div class="settings-filed-title"><#2455#></div>
<div style="position: relative">
<input id="new_profile_localIP" type="text" class="input-container" value="" maxlength="15" onkeypress="return validator.isIPAddr(this, event);" autocomplete="off" autocorrect="off" autocapitalize="off">
<div class="select-arrow" style="cursor:pointer;z-index: 999;" onclick="pullLANIPList(this);" >
<div></div>
</div>
<div id="ClientList_Block_PC" class="clientlist_dropdown" style="margin-left:0;"></div>
</div>
</div>
<div id="sourceIP_field" class="game-p-s-field">
<div class="settings-filed-title"><#2449#></div>
<input id="new_profile_sourceIP" type="text" class="input-container" value="" maxlength="15" onkeypress="return validator.isIPAddrPlusNetmask(this, event)" autocomplete="off" autocorrect="off" autocapitalize="off" >
<div class="hint"><#2008#></div>
</div>
</div>
</div>
<div class="divide-line"></div>
<div class="button-container button-container-center" onclick="newProfileOK();">
<div class="button-icon button-icon-check"></div>
<div class="button-text"><#1687#></div>
</div>
</div>
<div id="listTable" class="border-container" style="display:none">
<div class="border-corner border-corner-top-left"></div>
<div class="border-corner border-corner-bottom-left"></div>
<div class="border-bar"></div>
<div class="flexbox title-container">
<div class="title-symbol"></div>
<div class="title-content"><#2212#></div>
</div>
<div class="flexbox flex-j-spaceB control-f-container">
<div class="button-container " onclick="applyRule();">
<div class="button-icon button-icon-check"></div>
<div class="button-text"><#203#></div>
</div>
<div class="button-container" onclick="addNewProfile();">
<div class="button-icon icon-plus"></div>
<div class="button-text"><#1665#></div>
</div>
</div>
<div class="flexbox flex-a-center flex-j-spaceB new-g-p-t-field ">
<div class="new-g-p-title"><#2207#></div>
<div class="new-g-p-rule"><span id="rule_num">2</span> Rules (<#2656#> 32)</div>
</div>
<div id="list_content">
<div class="flexbox table-title">
<div class="table-content1-width">
<div><#1252#></div>
</div>
<div class="table-content2-width">
<div><#1556#></div>
</div>
<div class="table-content3-width">
<div><#2441#></div>
</div>
<div class="table-content4-width">
<div>Actions</div>
</div>
</div>
</div>
</div>
</td>
<td width="10" align="center" valign="top"> </td>
</tr>
</table>
<div id="footer"></div>
</form>
</body>
</html>
