IPC GUI Update Nr.7 (#759)

* Save last visited page

* Update Crowdin configuration file

* Add basic localization

* Add basic localization

* Add basic localization

* Add basic localization

* Added simple farming info

* Misc

* Add basic translation

* Add basic localization

ArchiSteamFarm/www/css/app.css

@@ -14,7 +14,7 @@
     overflow-x: hidden;
 }
 
-.box-content-command {
+.box-content-commands {
     width: auto;
     height: 400px;
     padding: 6px 12px;
@@ -191,3 +191,6 @@ button.bot-resumed:hover {
         height: 250px !important;
     }
 }
+.sidebar-menu li.header {
+    text-transform: uppercase;
+}

ArchiSteamFarm/www/index.html

@@ -16,6 +16,14 @@
     <script>
         'use strict';
 
+        var tmpIsAuthorized = get('IsAuthorized'),
+            tmpLastPage = get('CurrentPage'),
+            redirectPage = 'pages/commands.html';
+
+        if (tmpLastPage) {
+            redirectPage = tmpLastPage;
+        }
+
         function store(name, val) {
             if (typeof Storage !== 'undefined') {
                 localStorage.setItem(name, val);
@@ -31,10 +39,9 @@
                 window.alert('Please use a modern browser to properly view ASF GUI!');
             }
         }
-
-        var tmpIsAuthorized = get('IsAuthorized');
+        
         if (tmpIsAuthorized === 'true') {
-            window.location.replace('pages/command.html');
+            window.location.replace(redirectPage);
         } else {
             $.ajax({
                 url: '/Api/ASF',
@@ -53,7 +60,7 @@
                     },
                     200: function () {
                         store('IsAuthorized', true);
-                        window.location.replace('pages/command.html');
+                        window.location.replace(redirectPage);
                     }
                 }
             });
@@ -145,7 +152,7 @@
                                     title: 'Success!',
                                     text: 'Your IPC password has been saved.',
                                     type: 'success'
-                                }, function () { window.location.replace('pages/command.html'); });
+                                }, function () { window.location.replace(redirectPage); });
                             }
                         }
                     });

ArchiSteamFarm/www/js/app.js

@@ -50,7 +50,7 @@ $('.main-footer').ready(function () {
             var version = data['Result'].Version,
                 versionNr = version.Major + '.' + version.Minor + '.' + version.Build + '.' + version.Revision;
             
-            $('#version').html('<b>Version</b> ' + versionNr);
+            $('#version').text(versionNr);
             $('#changelog').attr('href', 'https://github.com/JustArchi/ArchiSteamFarm/releases/tag/' + versionNr);
         }
     });
@@ -145,7 +145,7 @@ function uptimeToString(startTime) {
 }
 //#endregion ASF Information
 
-//#region Command Page
+//#region Commands Page
 var $cmdInput = $('#commandInput');
 function fillCommand(cmd) { $cmdInput.val(cmd + ' '); }
 function fillBots(bot) { $cmdInput.val($cmdInput.val() + bot); }
@@ -167,9 +167,9 @@ function logCommand(state, cmd) {
         $('#commandSent').val(getDateAndTime() + ' Command sent: ' + cmd);
     } else {
         if (tmpAutoClear === 'false') {
-            $('.box-content-command').append('\n' + getDateAndTime() + ' Response received: ' + cmd + '\n');
+            $('.box-content-commands').append('\n' + getDateAndTime() + ' Response received: ' + cmd + '\n');
         } else {
-            $('.box-content-command').text(getDateAndTime() + ' Response received: ' + cmd);
+            $('.box-content-commands').text(getDateAndTime() + ' Response received: ' + cmd);
         }
     }
 }
@@ -184,21 +184,21 @@ function sendCommand() {
     logCommand(true, command);
 
     if (tmpAutoClear === 'false') {
-        if ($('.box-content-command').text() === '') {
-            $('.box-content-command').append(getDateAndTime() + ' Waiting for response...' + '\n');
+        if ($('.box-content-commands').text() === '') {
+            $('.box-content-commands').append(getDateAndTime() + ' Waiting for response...' + '\n');
         } else {
-            $('.box-content-command').append('\n' + getDateAndTime() + ' Waiting for response...' + '\n');
+            $('.box-content-commands').append('\n' + getDateAndTime() + ' Waiting for response...' + '\n');
         }
 
     } else {
-        $('.box-content-command').text(getDateAndTime() + ' Waiting for response...');
+        $('.box-content-commands').text(getDateAndTime() + ' Waiting for response...');
     }
 
-    $('.box-content-command').append('<div class="overlay"><i class="fas fa-sync fa-spin" style="color:white"></i></div>');
+    $('.box-content-commands').append('<div class="overlay"><i class="fas fa-sync fa-spin" style="color:white"></i></div>');
     
     $.ajax({
         url: requestURL,
-        type: 'GET',
+        type: 'POST',
         success: function (data) {
             $('.overlay').remove();
             logCommand(false, data['Result']);
@@ -211,7 +211,7 @@ function sendCommand() {
 
     if (tmpAutoClear !== 'false') $cmdInput.val('');
 }
-//#endregion Command Page
+//#endregion Commands Page
 
 //#region Global Config Utils
 //#region Spicy parsing helper by Mole
@@ -962,30 +962,133 @@ $(function () {
         }
     }
 
+    function loadLocales(language) {
+        var i18n = $.i18n(),
+            langCode = (language === 'strings') ? 'us' : language.substr(language.length - 2).toLowerCase(),
+            translationFile;
+
+        i18n.locale = language;
+        translationFile = '../locale/' + i18n.locale + '.json';
+        i18n.load(translationFile, i18n.locale).done(
+            function () {                
+                var missing = 0,
+                    totalSize = 0;
+                
+                $.getJSON(translationFile, function (obj) {
+                    for (var prop in obj) {
+                        if (obj.hasOwnProperty(prop)) {
+                            totalSize++;
+                            if (obj[prop]) {
+                                $('[data-i18n="' + prop + '"]').i18n();
+                            } else {
+                                missing++;
+                            }
+                        }
+                    }
+
+                    if (missing > 0) {
+                        var percentage = missing * 100 / totalSize;
+                        $('#languageInfo').html('<div class="alert alert-warning alert-dismissible">'
+                            + '<button title="Never show again" type="button" class="close" data-dismiss="alert" aria-hidden="true">x</button>'
+                            + percentage.toFixed(0) + '% of this language is not translated! Help us <a href="https://github.com/JustArchi/ArchiSteamFarm/wiki/Localization">here</a>.'
+                            + '</div>');
+                    } else {
+                        $('#languageInfo').text('');
+                    }
+
+                    $('#languages').collapse('hide');
+                });
+            }
+        );
+    
+        store('language', language);
+        $('#currentLanguage').attr({
+            alt: langCode,
+            src: '../img/flags/' + langCode + '.gif'
+        });
+    }
+
+    const defaultLocale = 'strings';
+    const nameRegex = /\.\/(\S+)\.json/i;
+
+    function getLocale(validLocales) {
+        const language = navigator.language || navigator.userLanguage; // If the browser doesn't support this, it will not support other page elements as well
+        if (!language) return defaultLocale; // If the browser doesn't provide the language - return default locale
+        if (language.length !== 2) return validLocales.includes(language) ? language : defaultLocale; // If the language is in `xx-XX` format, check if it's valid
+        if (validLocales.includes(`${language}-${language.toUpperCase()}`)) return `${language}-${language.toUpperCase()}`; // If the language is two letter code, check if corresponding 5 letter code is a valid locale
+
+        const languageRegex = new RegExp(`${language}\-\\\S\\\S`); // Create a regex to match `xx-**` where `*` is a wildcard
+
+        for (const validLocale of validLocales) {
+            if (languageRegex.test(validLocale)) return validLocale; // Check if the locale matches the regex, if so, return it
+        }
+
+        return defaultLocale; // If no match found, return default locale
+    }
+
+    var availableLanguages = [];
+
+    function loadAllLanguages() {
+        $.ajax({
+            url: '/Api/WWW/Directory/locale',
+            type: 'GET',
+            async: false,
+            success: function (data) {
+                var obj = data['Result'];
+
+                availableLanguages = [];
+
+                for (var prop in obj) {
+                    if (obj.hasOwnProperty(prop)) {
+                        var language = obj[prop];
+                        availableLanguages.push(language.substr(0, language.length - 5));
+                    }
+                }
+            }
+        });
+    }
+
     function setup() {
         var tmpSkin = get('skin'),
             tmpLayoutState = get('layoutState'),
             tmpNightmodeState = get('nightmodeState'),
-            tmpLeftSidebarState = get('leftSidebarState');
+            tmpLeftSidebarState = get('leftSidebarState'),
+            tmpLanguage = get('language');
 
         if (tmpSkin && $.inArray(tmpSkin, mySkins)) changeSkin(tmpSkin);            
-        if (tmpLeftSidebarState) {
-            if (tmpLeftSidebarState === 'sidebar-collapse') {
-                $('body').addClass('sidebar-collapse');
-            }
+        if (tmpLeftSidebarState === 'sidebar-collapse') {
+            $('body').addClass('sidebar-collapse');
         } 
         if (tmpLayoutState) changeBoxed(tmpLayoutState);
         if (tmpNightmodeState) changeNightmode(tmpNightmodeState);
 
-        $('[data-skin]').on('click', function (e) { changeSkin($(this).data('skin')); });
-        $('#toggleBoxed').on('click', function () { toggleBoxed(); });
-        $('#toggleNightmode').on('click', function () { toggleNightmode(); });
-        $('#leftSidebar').on('click', function () {
-            if ($('body').hasClass('sidebar-collapse')) {
-                store('leftSidebarState', 'normal');
-            } else {
-                store('leftSidebarState', 'sidebar-collapse');
-            }
+        var myLocal = (tmpLanguage) ? tmpLanguage : getLocale(availableLanguages);
+        loadLocales(myLocal);
+
+        $('[data-skin]').on('click', function (e) {
+            e.preventDefault();
+            changeSkin($(this).data('skin'));
+        });
+
+        $('#toggleBoxed').on('click', function (e) {
+            e.preventDefault();
+            toggleBoxed();
+        });
+
+        $('#toggleNightmode').on('click', function (e) {
+            e.preventDefault();
+            toggleNightmode();
+        });
+
+        $('#leftSidebar').on('click', function (e) {
+            e.preventDefault();
+            var state = $('body').hasClass('sidebar-collapse') ? 'normal' : 'sidebar-collapse';
+            store('leftSidebarState', state);
+        });
+
+        $('.language').on('click', function (e) {
+            e.preventDefault();
+            loadLocales($(this).data('locale'));
         });
     }
 
@@ -994,56 +1097,75 @@ $(function () {
 
     // Layout options
     $layoutSettings.append(
-        '<h4 class="control-sidebar-heading">'
-        + 'Layout'
-        + '</h4>'
+        '<h4 class="control-sidebar-heading" data-i18n="global-layout">Layout</h4>'
         // Boxed Layout
         + '<div class="form-group hidden-xs hidden-sm">'
         + '<label class="control-sidebar-subheading">'
         + '<button title="Toggle boxed layout" type="button" class="btn btn-box-tool pull-right text-grey" id="toggleBoxed"><i id="iconBoxed" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button>'
-        + '<i class="far fa-square fa-fw"></i> Boxed Layout'
+        + '<i class="far fa-square fa-fw"></i> <span data-i18n="global-boxed">Boxed Layout</span>'
         + '</label>'
-        + '<p>Toggle the boxed layout</p>'
+        + '<p data-i18n="global-boxed-description">Toggle the boxed layout</p>'
         + '</div>'
         // Nightmode
         + '<div class="form-group">'
         + '<label class="control-sidebar-subheading">'
         + '<button title="Toggle nightmode" type="button" class="btn btn-box-tool pull-right text-grey" id="toggleNightmode"><i id="iconNightmode" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button>'
-        + '<i class="fas fa-moon fa-fw"></i> Nightmode'
+        + '<i class="fas fa-moon fa-fw"></i> <span data-i18n="global-nightmode">Nightmode</span>'
         + '</label>'
-        + '<p>Toggle the nightmode</p>'
+        + '<p data-i18n="global-nightmode-description">Toggle the nightmode</p>'
         + '</div>'
     );
     
-    var $skinsList = $('<ul />', { 'class': 'list-unstyled clearfix' });
+    var $skinsList = $('<ul />', { 'class': 'list-unstyled clearfix text-center' });
     
-    var $skinBlue = $('<li />', { style: 'float:left; width: 14%; padding: 5px;' })
-        .append('<a href="javascript:void(0)" data-skin="skin-blue" class="clearfix full-opacity-hover btn btn-badge bg-blue"></a>');
+    var $skinBlue = $('<li />', { style: 'float:left; width: 14%;' })
+        .append('<button data-skin="skin-blue" class="clearfix full-opacity-hover btn btn-badge bg-blue"></button>');
     $skinsList.append($skinBlue);
-    var $skinBlack = $('<li />', { style: 'float:left; width: 14%; padding: 5px;' })
-        .append('<a href="javascript:void(0)" data-skin="skin-black" class="clearfix full-opacity-hover btn btn-badge bg-black"></a>');
+    var $skinBlack = $('<li />', { style: 'float:left; width: 14%;' })
+        .append('<button data-skin="skin-black" class="clearfix full-opacity-hover btn btn-badge bg-black"></button>');
     $skinsList.append($skinBlack);
-    var $skinPurple = $('<li />', { style: 'float:left; width: 14%; padding: 5px;' })
-        .append('<a href="javascript:void(0)" data-skin="skin-purple" class="clearfix full-opacity-hover btn btn-badge bg-purple"></a>');
+    var $skinPurple = $('<li />', { style: 'float:left; width: 14%;' })
+        .append('<button data-skin="skin-purple" class="clearfix full-opacity-hover btn btn-badge bg-purple"></button>');
     $skinsList.append($skinPurple);
-    var $skinGreen = $('<li />', { style: 'float:left; width: 14%; padding: 5px;' })
-        .append('<a href="javascript:void(0)" data-skin="skin-green" class="clearfix full-opacity-hover btn btn-badge bg-green"></a>');
+    var $skinGreen = $('<li />', { style: 'float:left; width: 14%;' })
+        .append('<button data-skin="skin-green" class="clearfix full-opacity-hover btn btn-badge bg-green"></button>');
     $skinsList.append($skinGreen);
-    var $skinRed = $('<li />', { style: 'float:left; width: 14%; padding: 5px;' })
-        .append('<a href="javascript:void(0)" data-skin="skin-red" class="clearfix full-opacity-hover btn btn-badge bg-red"></a>');
+    var $skinRed = $('<li />', { style: 'float:left; width: 14%;' })
+        .append('<button data-skin="skin-red" class="clearfix full-opacity-hover btn btn-badge bg-red"></button>');
     $skinsList.append($skinRed);
-    var $skinYellow = $('<li />', { style: 'float:left; width: 14%; padding: 5px;' })
-        .append('<a href="javascript:void(0)" data-skin="skin-yellow" class="clearfix full-opacity-hover btn btn-badge bg-yellow"></a>');
+    var $skinYellow = $('<li />', { style: 'float:left; width: 14%;' })
+        .append('<button data-skin="skin-yellow" class="clearfix full-opacity-hover btn btn-badge bg-yellow"></button>');
     $skinsList.append($skinYellow);
-    var $skinTeal = $('<li />', { style: 'float:left; width: 14%; padding: 5px;' })
-        .append('<a href="javascript:void(0)" data-skin="skin-teal" class="clearfix full-opacity-hover btn btn-badge bg-teal"></a>');
+    var $skinTeal = $('<li />', { style: 'float:left; width: 14%;' })
+        .append('<button data-skin="skin-teal" class="clearfix full-opacity-hover btn btn-badge bg-teal"></button>');
     $skinsList.append($skinTeal);
 
-    var $skinsListLight = $('<ul />', { 'class': 'list-unstyled clearfix' });
-
-    $layoutSettings.append('<h4 class="control-sidebar-heading">Skins</h4>');
+    $layoutSettings.append('<h4 class="control-sidebar-heading" data-i18n="global-skins">Skins</h4>');
     $layoutSettings.append($skinsList);
 
+    var $languagesList = $('<div />', { 'class': 'collapse', 'id': 'languages' });
+
+    loadAllLanguages();
+
+    for (var i in availableLanguages) {
+        var language = availableLanguages[i],
+            langCode = (language === 'strings') ? 'us' : language.substr(language.length - 2).toLowerCase();
+
+        $languagesList.append('<button title="Change language" type="button" class="btn btn-box-tool language" data-locale="' + language + '"><img src="../img/flags/' + langCode + '.gif" alt="' + langCode + '"></button>');
+    }
+
+    $layoutSettings.append('<h4 class="control-sidebar-heading" data-i18n="global-language">Language</h4>'
+        + '<div id="languageInfo"></div>'
+        + '<div class="form-group">'
+        + '<label class="control-sidebar-subheading">'
+        + '<button title="Change language" type="button" class="btn btn-box-tool pull-right" data-toggle="collapse" data-target="#languages"><span data-i18n="global-change">Change</span> <i class="fas fa-caret-down"></i></button>'
+        + '<img id="currentLanguage" src="../img/flags/us.gif" alt="us">'
+        + '</label>'
+        + '</div>'
+    );
+
+    $layoutSettings.append($languagesList);
+
     $('#control-right-sidebar').after($layoutSettings);
 
     setup();

ArchiSteamFarm/www/locale/strings.json

@@ -0,0 +1,44 @@
+{
+  "bots-delete": "Show delete button",
+  "bots-hide": "Hide bots",
+  "bots-hide-offline": "Offline bots",
+  "bots-hide-online": "Online bots",
+  "bots-key": "Show key button",
+  "bots-simple": "Simple farming info",
+  "bots-title": "ASF | Bots",
+  "changer-change": "Change bot",
+  "changer-current": "Currently editing:",
+  "changer-save": "Save",
+  "changer-title": "ASF | Config Changer",
+  "command-auto-clear": "Auto clear",
+  "commands-title": "ASF | Commands",
+  "generator-change": "Change mode",
+  "generator-current": "Current mode:",
+  "generator-download": "Download",
+  "generator-title": "ASF | Config Generator",
+  "global-bots": "Bots",
+  "global-boxed": "Boxed Layout",
+  "global-boxed-description": "Toggle the boxed layout",
+  "global-change": "Change",
+  "global-changelog": "Changelog",
+  "global-changer": "Changer",
+  "global-commands": "Commands",
+  "global-config": "Config",
+  "global-control-panel": "Control Panel",
+  "global-generator": "Generator",
+  "global-github": "GitHub",
+  "global-home": "Home",
+  "global-information": "Information",
+  "global-language": "Language",
+  "global-layout": "Layout",
+  "global-log": "Log",
+  "global-navigation": "Toggle navigation",
+  "global-nightmode": "Nightmode",
+  "global-nightmode-description": "Toggle the nightmode",
+  "global-ram-usage": "RAM Usage",
+  "global-skins": "Skins",
+  "global-uptime": "Uptime",
+  "global-version": "Version",
+  "global-wiki": "Wiki",
+  "log-title": "ASF | Log"
+}

ArchiSteamFarm/www/pages/bots.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>ASF | Bots</title>
+    <title data-i18n="bots-title">ASF | Bots</title>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
     <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <!--Change to cdnjs once available-->
     <link rel="icon" href="../favicon.png" type="image/png">
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.2/css/AdminLTE.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
-    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">-->
+    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">--> <!--Implement properly-->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
     <link rel="stylesheet" href="../css/_all-skins.min.css">
     <link rel="stylesheet" href="../css/app.css">
@@ -32,7 +32,7 @@
                 <!-- Left Sidebar Toggle Button-->
                 <a href="javascript:void(0)" class="sidebar-toggle" id="leftSidebar" data-toggle="push-menu" role="button">
                     <i class="fas fa-bars"></i>
-                    <span class="sr-only">Toggle navigation</span>
+                    <span class="sr-only" data-i18n="global-navigation">Toggle navigation</span>
                 </a>
                 <div class="navbar-custom-menu">
                     <ul class="nav navbar-nav">
@@ -42,15 +42,16 @@
                 </div>
             </nav>
         </header>
+
         <!-- Left Sidebar -->
         <aside class="main-sidebar">
             <section class="sidebar">
                 <ul class="sidebar-menu" data-widget="tree">
-                    <li class="header">HOME</li>
-                    <li><a href="command.html"><i class="fas fa-laptop fa-fw"></i> <span>Command</span></a></li>
+                    <li class="header" data-i18n="global-home">Home</li>
+                    <li><a href="commands.html"><i class="fas fa-laptop fa-fw"></i> <span data-i18n="global-commands">Commands</span></a></li>
                     <li class="active">
                         <a href="bots.html">
-                            <i class="fas fa-users fa-fw"></i> <span>Bots</span>
+                            <i class="fas fa-users fa-fw"></i> <span data-i18n="global-bots">Bots</span>
                             <span class="pull-right-container bot-status">
                                 <small class="label pull-right bg-gray" id="offlineBots">0</small>
                                 <small class="label pull-right bg-yellow" id="idleBots">0</small>
@@ -58,16 +59,16 @@
                             </span>
                         </a>
                     </li>
-                    <li><a href="log.html"><i class="far fa-file-alt fa-fw"></i> <span>Log</span></a></li>
+                    <li><a href="log.html"><i class="far fa-file-alt fa-fw"></i> <span data-i18n="global-log">Log</span></a></li>
 
-                    <li class="header">CONFIG</li>
-                    <li><a href="changer.html"><i class="far fa-edit fa-fw"></i> <span>Changer</span></a></li>
-                    <li><a href="generator.html"><i class="far fa-copy fa-fw"></i> <span>Generator</span></a></li>
+                    <li class="header" data-i18n="global-config">Config</li>
+                    <li><a href="changer.html"><i class="far fa-edit fa-fw"></i> <span data-i18n="global-changer">Changer</span></a></li>
+                    <li><a href="generator.html"><i class="far fa-copy fa-fw"></i> <span data-i18n="global-generator">Generator</span></a></li>
 
-                    <li class="header">INFORMATION</li>
+                    <li class="header" data-i18n="global-information">Information</li>
                     <li class="info-overview">
                         <a>
-                            <i class="fas fa-tachometer-alt fa-fw"></i> <span>RAM Usage</span>
+                            <i class="fas fa-tachometer-alt fa-fw"></i> <span data-i18n="global-ram-usage">RAM Usage</span>
                             <span class="pull-right-container">
                                 <small class="label pull-right bg-blue" id="ramUsage">0.00 MB</small>
                             </span>
@@ -75,7 +76,7 @@
                     </li>
                     <li class="info-overview">
                         <a>
-                            <i class="far fa-clock fa-fw"></i> <span>Uptime</span>
+                            <i class="far fa-clock fa-fw"></i> <span data-i18n="global-uptime">Uptime</span>
                             <span class="pull-right-container">
                                 <small class="label pull-right bg-blue" id="uptime">0d 0h 0m</small>
                             </span>
@@ -89,12 +90,12 @@
         <div class="content-wrapper">
             <section class="content-header">
                 <h1>
-                    Bots
-                    <small>Control Panel</small>
+                    <span data-i18n="global-bots">Bots</span>
+                    <small data-i18n="global-control-panel">Control Panel</small>
                 </h1>
                 <ol class="breadcrumb">
-                    <li><i class="fas fa-home"></i> Home</li>
-                    <li class="active"><i class="fas fa-users"></i> Bots</li>
+                    <li><i class="fas fa-home"></i> <span data-i18n="global-home">Home</span></li>
+                    <li class="active"><i class="fas fa-users"></i> <span data-i18n="global-bots">Bots</span></li>
                 </ol>
             </section>
 
@@ -103,35 +104,37 @@
                 <div class="box collapsed-box" id="headerBox">
                     <div class="box-header with-border">
                         <i class="fas fa-users"></i>
-                        <h3 class="box-title">Bots</h3>
+                        <h3 class="box-title" data-i18n="global-bots">Bots</h3>
                         <div class="box-tools pull-right">
                             <div class="btn-group">
                                 <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
-                                    Hide bots <span class="fas fa-caret-down"></span>
+                                    <span data-i18n="bots-hide">Hide bots</span> <span class="fas fa-caret-down"></span>
                                 </button>
                                 <ul class="dropdown-menu" role="menu">
-                                    <li><button title="Toggle online bots" type="button" class="btn btn-box-tool text-grey" id="chkHideOnlineBots"><i id="iconHideOnlineBots" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button>Online bots</li>
-                                    <li><button title="Toggle offline bots" type="button" class="btn btn-box-tool text-grey" id="chkHideOfflineBots"><i id="iconHideOfflineBots" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button>Offline bots</li>
+                                    <li><button title="Toggle online bots" type="button" class="btn btn-box-tool text-grey" id="chkHideOnlineBots"><i id="iconHideOnlineBots" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button><span data-i18n="bots-hide-online">Online bots</span></li>
+                                    <li><button title="Toggle offline bots" type="button" class="btn btn-box-tool text-grey" id="chkHideOfflineBots"><i id="iconHideOfflineBots" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button><span data-i18n="bots-hide-offline">Offline bots</span></li>
                                 </ul>
                             </div>
                             <!--Implement properly-->
                             <!--<button title="Toggle multi select" type="button" class="btn btn-box-tool" id="chkMultiSelect" data-widget="collapse"><i id="iconMultiSelect" class="far fa-square"></i></button>-->
-                            <button type="button" class="btn btn-box-tool" id="btnRefreshContent"><i class="fas fa-sync"></i></button>
+                            <button title="Refresh content" type="button" class="btn btn-box-tool" id="btnRefreshContent"><i class="fas fa-sync"></i></button>
                             <div class="btn-group">
                                 <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                                     <i class="fas fa-wrench"></i>
                                 </button>
                                 <ul class="dropdown-menu" role="menu">
-                                    <li><button title="Toggle key button" type="button" class="btn btn-box-tool text-grey" id="chkShowKeyButton"><i id="iconShowKeyButton" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button>Show key button</li>
-                                    <li><button title="Toggle delete button" type="button" class="btn btn-box-tool text-grey" id="chkShowDeleteButton"><i id="iconShowDeleteButton" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button>Show delete button</li>
+                                    <li><button title="Toggle key button" type="button" class="btn btn-box-tool text-grey" id="chkShowKeyButton"><i id="iconShowKeyButton" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button><span data-i18n="bots-key">Show key button</span></li>
+                                    <li><button title="Toggle delete button" type="button" class="btn btn-box-tool text-grey" id="chkShowDeleteButton"><i id="iconShowDeleteButton" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button><span data-i18n="bots-delete">Show delete button</span></li>
+                                    <li><button title="Toggle simple farming info" type="button" class="btn btn-box-tool text-grey" id="chkSimpleFarmingInfo"><i id="iconSimpleFarmingInfo" class="fas fa-toggle-on fa-2x fa-rotate-180"></i></button><span data-i18n="bots-simple">Simple farming info</span></li>
                                 </ul>
                             </div>
                         </div>
                     </div>
-                    <div class="box-body">
+                    <!--Implement properly-->
+                    <!--<div class="box-body">
                         <button title="Select all bots" type="button" class="btn btn-default" id="selectAllBots"><i class="fas fa-th"></i> Select all</button>
                         <button title="Deselect all bots" type="button" class="btn btn-default" id="deselectAllBots"><i class="fas fa-th"></i> Deselect all</button>
-                    </div>
+                    </div>-->
                 </div>
                 <div class="row" id="totalBotOverview"></div>
                 <div class="row" id="botRow"></div>
@@ -140,11 +143,11 @@
 
         <!-- Footer -->
         <footer class="main-footer">
-            <div class="pull-right" id="version"><b>Version</b> 0.0.0.0</div>
+            <div class="pull-right"><strong data-i18n="global-version">Version</strong> <span id="version">0.0.0.0</span></div>
             <strong>
-                <a href="https://github.com/JustArchi/ArchiSteamFarm">GitHub</a> -
-                <a href="https://github.com/JustArchi/ArchiSteamFarm/wiki">Wiki</a> -
-                <a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master" id="changelog">Changelog</a>
+                <a href="https://github.com/JustArchi/ArchiSteamFarm"><span data-i18n="global-github">GitHub</span></a> -
+                <a href="https://github.com/JustArchi/ArchiSteamFarm/wiki"><span data-i18n="global-wiki">Wiki</span></a> -
+                <a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master" id="changelog"><span data-i18n="global-changelog">Changelog</span></a>
             </strong>
         </footer>
 
@@ -162,19 +165,29 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.2/js/adminlte.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
-    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>-->
+    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>--> <!--Implement properly-->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/humanize-duration/3.12.1/humanize-duration.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.messagestore.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.fallbacks.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.language.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.parser.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.bidi.min.js"></script>
     <script src="../js/app.js"></script>
     <script>
         $(function () {
             'use strict';
 
+            store('CurrentPage', 'pages/bots.html');
+
             var tmpHideOnlineBots = get('hideOnlineBots'),
                 tmpHideOfflineBots = get('hideOfflineBots'),
                 tmpShowDeleteButton = get('showDeleteButton'),
                 tmpShowKeyButton = get('showKeyButton'),
-                tmpMultiSelect = get('multiSelect'),
+                tmpSimpleFarmingInfo = get('simpleFarmingInfo'),
+                //tmpMultiSelect = get('multiSelect'), // Implement properly
                 currentlySelectedBots = [];
 
             $(document).delegate('#gamesToRedeemInBackground', 'keydown', function (e) {
@@ -238,6 +251,18 @@
                     $('#iconShowKeyButton').removeClass('fa-rotate-180');
                 }
 
+                if (tmpShowKeyButton === 'true') {
+                    $('#chkShowKeyButton').removeClass('text-grey');
+                    $('#chkShowKeyButton').addClass('text-olive');
+                    $('#iconShowKeyButton').removeClass('fa-rotate-180');
+                }
+
+                if (tmpSimpleFarmingInfo === 'true') {
+                    $('#chkSimpleFarmingInfo').removeClass('text-grey');
+                    $('#chkSimpleFarmingInfo').addClass('text-olive');
+                    $('#iconSimpleFarmingInfo').removeClass('fa-rotate-180');
+                }
+
                 // Implement properly
                 //if (tmpMultiSelect === 'true') {
                 //    $('#iconMultiSelect').removeClass('fa-square');
@@ -248,6 +273,21 @@
                 //}
             });
 
+            $('#chkSimpleFarmingInfo').click(function () {
+                if ($('#iconSimpleFarmingInfo').hasClass('fa-rotate-180')) {
+                    $('#iconSimpleFarmingInfo').removeClass('fa-rotate-180');
+                    $('#chkSimpleFarmingInfo').removeClass('text-grey');
+                    $('#chkSimpleFarmingInfo').addClass('text-olive');
+                    store('simpleFarmingInfo', true);
+                } else {
+                    $('#iconSimpleFarmingInfo').addClass('fa-rotate-180');
+                    $('#chkSimpleFarmingInfo').removeClass('text-olive');
+                    $('#chkSimpleFarmingInfo').addClass('text-grey');
+                    store('simpleFarmingInfo', false);
+                }
+                loadPageContent();
+            });
+
             $('#chkHideOnlineBots').click(function () {
                 if ($('#iconHideOnlineBots').hasClass('fa-rotate-180')) {
                     $('#iconHideOnlineBots').removeClass('fa-rotate-180');
@@ -278,32 +318,34 @@
                 loadPageContent();
             });
 
-            $('#chkMultiSelect').click(function () {
-                if ($('#iconMultiSelect').hasClass('fa-square')) {
-                    $('#iconMultiSelect').removeClass('fa-square');
-                    $('#iconMultiSelect').addClass('fa-check-square');
-                    $('#botRow').selectable();
-                    store('multiSelect', true);
-                } else {
-                    $('#iconMultiSelect').removeClass('fa-check-square');
-                    $('#iconMultiSelect').addClass('fa-square');
-                    $('#botRow').selectable('destroy');
-                    store('multiSelect', false);
-                }
-                $('#chkMultiSelect').blur();
-            });
+            //Implement properly
 
-            $('#selectAllBots').click(function () {
-                $(".ui-widget-content").each(function () {
-                    $(this).addClass('ui-selected');
-                });
-            });
+            //$('#chkMultiSelect').click(function () {
+            //    if ($('#iconMultiSelect').hasClass('fa-square')) {
+            //        $('#iconMultiSelect').removeClass('fa-square');
+            //        $('#iconMultiSelect').addClass('fa-check-square');
+            //        $('#botRow').selectable();
+            //        store('multiSelect', true);
+            //    } else {
+            //        $('#iconMultiSelect').removeClass('fa-check-square');
+            //        $('#iconMultiSelect').addClass('fa-square');
+            //        $('#botRow').selectable('destroy');
+            //        store('multiSelect', false);
+            //    }
+            //    $('#chkMultiSelect').blur();
+            //});
 
-            $('#deselectAllBots').click(function () {
-                $(".ui-selected").each(function () {
-                    $(this).removeClass('ui-selected');
-                });
-            });
+            //$('#selectAllBots').click(function () {
+            //    $(".ui-widget-content").each(function () {
+            //        $(this).addClass('ui-selected');
+            //    });
+            //});
+
+            //$('#deselectAllBots').click(function () {
+            //    $(".ui-selected").each(function () {
+            //        $(this).removeClass('ui-selected');
+            //    });
+            //});
 
             $('#btnRefreshContent').click(function () {
                 $('#btnRefreshContent').blur();
@@ -345,7 +387,8 @@
                     tmpHideOfflineBots = get('hideOfflineBots'),
                     tmpShowDeleteButton = get('showDeleteButton'),
                     tmpDelimeter = get('delimeter'),
-                    tmpShowKeyButton = get('showKeyButton');
+                    tmpShowKeyButton = get('showKeyButton'),
+                    tmpSimpleFarmingInfo = get('simpleFarmingInfo');
                 
                 $('#totalBotOverview').empty(); // Clear page content
                 $('#botRow').empty(); // Clear page content
@@ -409,8 +452,8 @@
                                     if (TimeRemaining !== '00:00:00') { // Bot is farming
                                         var GamesToFarm = obj.CardsFarmer.GamesToFarm,
                                             CurrentGamesFarming = obj.CardsFarmer.CurrentGamesFarming,
-                                            allGamesRemainingName = [],
                                             allGamesFarmingAppID = [],
+                                            allGamesFarmingName = [],
                                             allCardsRemaining = 0;
 
                                         farmingIsActive = true; // At least one bot is farming
@@ -419,11 +462,11 @@
                                         for (var j = 0; j < GamesToFarm.length; j++) {
                                             totalCardsRemaining = totalCardsRemaining + GamesToFarm[j].CardsRemaining;
                                             allCardsRemaining = allCardsRemaining + GamesToFarm[j].CardsRemaining;
-                                            allGamesRemainingName.push(GamesToFarm[j].GameName);
                                         }
 
                                         for (var k = 0; k < CurrentGamesFarming.length; k++) {
                                             allGamesFarmingAppID.push(CurrentGamesFarming[k].AppID);
+                                            allGamesFarmingName.push(CurrentGamesFarming[k].GameName);
                                         }
 
                                         if (totalTimeRemaining < TimeRemaining) totalTimeRemaining = TimeRemaining;
@@ -436,18 +479,22 @@
                                             if (Paused) {
                                                 allGamesHTML = '<p class="text-center no-margin">Bot is paused.</p>';
                                             } else {
-                                                if (allGamesFarmingAppID.length === 1) {
-                                                    var value = allGamesFarmingAppID;
-                                                    allGamesHTML = '<img src="' + steamGameBaseURL + value[0] + '/header.jpg" alt="" class="img-responsive">'; // ToDo: Fill alt="" with gameName
-                                                } else { // Multiple game farming is active
-                                                    allGamesHTML = '<div class="games-carousel-' + BotName + '">';
+                                                if (tmpSimpleFarmingInfo === 'true') {
+                                                    allGamesHTML = '<p class="text-center no-margin">' + allGamesFarmingName.join(", ") + '</p>';
+                                                } else {
+                                                    if (allGamesFarmingAppID.length === 1) {
+                                                        var value = allGamesFarmingAppID;
+                                                        allGamesHTML = '<img src="' + steamGameBaseURL + value[0] + '/header.jpg" alt="" class="img-responsive">'; // ToDo: Fill alt="" with gameName
+                                                    } else { // Multiple game farming is active
+                                                        allGamesHTML = '<div class="games-carousel-' + BotName + '">';
 
-                                                    for (var appID in allGamesFarmingAppID) {
-                                                        var value = allGamesFarmingAppID[appID];
-                                                        allGamesHTML += '<div class="game-box" style="max-height: 215px;"><img src="' + steamGameBaseURL + value + '/header.jpg" alt="" class="img-responsive"></div>'; // ToDo: Fill alt="" with gameName
+                                                        for (var appID in allGamesFarmingAppID) {
+                                                            var value = allGamesFarmingAppID[appID];
+                                                            allGamesHTML += '<div class="game-box" style="max-height: 215px;"><img src="' + steamGameBaseURL + value + '/header.jpg" alt="" class="img-responsive"></div>'; // ToDo: Fill alt="" with gameName
+                                                        }
+
+                                                        allGamesHTML += '</div>';
                                                     }
-
-                                                    allGamesHTML += '</div>';
                                                 }
                                             }
                                         } else {
@@ -532,7 +579,7 @@
 
                                         $.ajax({
                                             url: '/Api/Command/start ' + encodeURIComponent(BotName),
-                                            type: 'GET',
+                                            type: 'POST',
                                             success: function (data) {
                                                 $('.overlay').remove();
                                                 swal({
@@ -549,7 +596,7 @@
 
                                         $.ajax({
                                             url: '/Api/Command/stop ' + encodeURIComponent(BotName),
-                                            type: 'GET',
+                                            type: 'POST',
                                             success: function (data) {
                                                 $('.overlay').remove();
                                                 swal({
@@ -566,7 +613,7 @@
 
                                         $.ajax({
                                             url: '/Api/Command/pause ' + encodeURIComponent(BotName),
-                                            type: 'GET',
+                                            type: 'POST',
                                             success: function (data) {
                                                 $('.overlay').remove();
                                                 swal({
@@ -583,7 +630,7 @@
 
                                         $.ajax({
                                             url: '/Api/Command/resume ' + encodeURIComponent(BotName),
-                                            type: 'GET',
+                                            type: 'POST',
                                             success: function (data) {
                                                 $('.overlay').remove();
                                                 swal({

ArchiSteamFarm/www/pages/changer.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>ASF | Config Changer</title>
+    <title data-i18n="changer-title">ASF | Config Changer</title>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
     <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <!--Change to cdnjs once available-->
     <link rel="icon" href="../favicon.png" type="image/png">
@@ -30,7 +30,7 @@
                 <!-- Left Sidebar Toggle Button-->
                 <a href="javascript:void(0)" class="sidebar-toggle" id="leftSidebar" data-toggle="push-menu" role="button">
                     <i class="fas fa-bars"></i>
-                    <span class="sr-only">Toggle navigation</span>
+                    <span class="sr-only" data-i18n="global-navigation">Toggle navigation</span>
                 </a>
                 <div class="navbar-custom-menu">
                     <ul class="nav navbar-nav">
@@ -45,11 +45,11 @@
         <aside class="main-sidebar">
             <section class="sidebar">
                 <ul class="sidebar-menu" data-widget="tree">
-                    <li class="header">HOME</li>
-                    <li><a href="command.html"><i class="fas fa-laptop fa-fw"></i> <span>Command</span></a></li>
+                    <li class="header" data-i18n="global-home">Home</li>
+                    <li><a href="commands.html"><i class="fas fa-laptop fa-fw"></i> <span data-i18n="global-commands">Commands</span></a></li>
                     <li>
                         <a href="bots.html">
-                            <i class="fas fa-users fa-fw"></i> <span>Bots</span>
+                            <i class="fas fa-users fa-fw"></i> <span data-i18n="global-bots">Bots</span>
                             <span class="pull-right-container bot-status">
                                 <small class="label pull-right bg-gray" id="offlineBots">0</small>
                                 <small class="label pull-right bg-yellow" id="idleBots">0</small>
@@ -57,16 +57,16 @@
                             </span>
                         </a>
                     </li>
-                    <li><a href="log.html"><i class="far fa-file-alt fa-fw"></i> <span>Log</span></a></li>
+                    <li><a href="log.html"><i class="far fa-file-alt fa-fw"></i> <span data-i18n="global-log">Log</span></a></li>
 
-                    <li class="header">CONFIG</li>
-                    <li class="active"><a href="changer.html"><i class="far fa-edit fa-fw"></i> <span>Changer</span></a></li>
-                    <li><a href="generator.html"><i class="far fa-copy fa-fw"></i> <span>Generator</span></a></li>
+                    <li class="header" data-i18n="global-config">Config</li>
+                    <li class="active"><a href="changer.html"><i class="far fa-edit fa-fw"></i> <span data-i18n="global-changer">Changer</span></a></li>
+                    <li><a href="generator.html"><i class="far fa-copy fa-fw"></i> <span data-i18n="global-generator">Generator</span></a></li>
 
-                    <li class="header">INFORMATION</li>
+                    <li class="header" data-i18n="global-information">Information</li>
                     <li class="info-overview">
                         <a>
-                            <i class="fas fa-tachometer-alt fa-fw"></i> <span>RAM Usage</span>
+                            <i class="fas fa-tachometer-alt fa-fw"></i> <span data-i18n="global-ram-usage">RAM Usage</span>
                             <span class="pull-right-container">
                                 <small class="label pull-right bg-blue" id="ramUsage">0.00 MB</small>
                             </span>
@@ -74,7 +74,7 @@
                     </li>
                     <li class="info-overview">
                         <a>
-                            <i class="far fa-clock fa-fw"></i> <span>Uptime</span>
+                            <i class="far fa-clock fa-fw"></i> <span data-i18n="global-uptime">Uptime</span>
                             <span class="pull-right-container">
                                 <small class="label pull-right bg-blue" id="uptime">0d 0h 0m</small>
                             </span>
@@ -88,12 +88,12 @@
         <div class="content-wrapper">
             <section class="content-header">
                 <h1>
-                    Changer
-                    <small>Control Panel</small>
+                    <span data-i18n="global-changer">Changer</span>
+                    <small data-i18n="global-control-panel">Control Panel</small>
                 </h1>
                 <ol class="breadcrumb">
-                    <li><i class="fas fa-cogs"></i> Config</li>
-                    <li class="active"><i class="far fa-edit"></i> Changer</li>
+                    <li><i class="fas fa-cogs"></i> <span data-i18n="global-config">Config</span></li>
+                    <li class="active"><i class="far fa-edit"></i> <span data-i18n="global-changer">Changer</span></li>
                 </ol>
             </section>
 
@@ -102,11 +102,11 @@
                 <div class="box">
                     <div class="box-header with-border">
                         <i class="far fa-edit"></i>
-                        <h3 class="box-title">Currently editing:</h3>
+                        <h3 class="box-title" data-i18n="changer-current">Currently editing:</h3>
                         <div class="box-tools pull-right">
                             <div class="btn-group">
                                 <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-                                    Change bot
+                                    <span data-i18n="changer-change">Change bot</span>
                                     <span class="fas fa-caret-down"></span>
                                 </button>
                                 <ul class="dropdown-menu scrollable-menu" role="menu" id="botsDropDown"></ul>
@@ -118,7 +118,9 @@
                     </div>
                     <div class="box-footer">
                         <div class="input-group pull-right">
-                            <button class="btn btn-default" id="saveButton"><i class="fas fa-save"></i> Save</button>
+                            <button class="btn btn-default" id="saveButton">
+                                <i class="fas fa-save"></i> <span data-i18n="changer-save">Save</span>
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -127,11 +129,11 @@
 
         <!-- Footer -->
         <footer class="main-footer">
-            <div class="pull-right" id="version"><b>Version</b> 0.0.0.0</div>
+            <div class="pull-right"><strong data-i18n="global-version">Version</strong> <span id="version">0.0.0.0</span></div>
             <strong>
-                <a href="https://github.com/JustArchi/ArchiSteamFarm">GitHub</a> -
-                <a href="https://github.com/JustArchi/ArchiSteamFarm/wiki">Wiki</a> -
-                <a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master" id="changelog">Changelog</a>
+                <a href="https://github.com/JustArchi/ArchiSteamFarm"><span data-i18n="global-github">GitHub</span></a> -
+                <a href="https://github.com/JustArchi/ArchiSteamFarm/wiki"><span data-i18n="global-wiki">Wiki</span></a> -
+                <a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master" id="changelog"><span data-i18n="global-changelog">Changelog</span></a>
             </strong>
         </footer>
 
@@ -148,11 +150,20 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.2/js/adminlte.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.messagestore.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.fallbacks.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.language.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.parser.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.bidi.min.js"></script>
     <script src="../js/app.js"></script>
     <script>
         $(function () {
             'use strict';
 
+            store('CurrentPage', 'pages/changer.html');
+
             $('.box-content-config').ready(function () {
                 $.ajax({
                     url: '/Api/Bot/ASF',

ArchiSteamFarm/www/pages/commands.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>ASF | Command</title>
+    <title data-i18n="commands-title">ASF | Commands</title>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
     <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <!--Change to cdnjs once available-->
     <link rel="icon" href="../favicon.png" type="image/png">
@@ -30,7 +30,7 @@
                 <!-- Left Sidebar Toggle Button-->
                 <a href="javascript:void(0)" class="sidebar-toggle" id="leftSidebar" data-toggle="push-menu" role="button">
                     <i class="fas fa-bars"></i>
-                    <span class="sr-only">Toggle navigation</span>
+                    <span class="sr-only" data-i18n="global-navigation">Toggle navigation</span>
                 </a>
                 <div class="navbar-custom-menu">
                     <ul class="nav navbar-nav">
@@ -45,11 +45,11 @@
         <aside class="main-sidebar">
             <section class="sidebar">
                 <ul class="sidebar-menu" data-widget="tree">
-                    <li class="header">HOME</li>
-                    <li class="active"><a href="command.html"><i class="fas fa-laptop fa-fw"></i> <span>Command</span></a></li>
+                    <li class="header" data-i18n="global-home">Home</li>
+                    <li class="active"><a href="commands.html"><i class="fas fa-laptop fa-fw"></i> <span data-i18n="global-commands">Commands</span></a></li>
                     <li>
                         <a href="bots.html">
-                            <i class="fas fa-users fa-fw"></i> <span>Bots</span>
+                            <i class="fas fa-users fa-fw"></i> <span data-i18n="global-bots">Bots</span>
                             <span class="pull-right-container bot-status">
                                 <small class="label pull-right bg-gray" id="offlineBots">0</small>
                                 <small class="label pull-right bg-yellow" id="idleBots">0</small>
@@ -57,16 +57,16 @@
                             </span>
                         </a>
                     </li>
-                    <li><a href="log.html"><i class="far fa-file-alt fa-fw"></i> <span>Log</span></a></li>
+                    <li><a href="log.html"><i class="far fa-file-alt fa-fw"></i> <span data-i18n="global-log">Log</span></a></li>
 
-                    <li class="header">CONFIG</li>
-                    <li><a href="changer.html"><i class="far fa-edit fa-fw"></i> <span>Changer</span></a></li>
-                    <li><a href="generator.html"><i class="far fa-copy fa-fw"></i> <span>Generator</span></a></li>
+                    <li class="header" data-i18n="global-config">Config</li>
+                    <li><a href="changer.html"><i class="far fa-edit fa-fw"></i> <span data-i18n="global-changer">Changer</span></a></li>
+                    <li><a href="generator.html"><i class="far fa-copy fa-fw"></i> <span data-i18n="global-generator">Generator</span></a></li>
 
-                    <li class="header">INFORMATION</li>
+                    <li class="header" data-i18n="global-information">Information</li>
                     <li class="info-overview">
                         <a>
-                            <i class="fas fa-tachometer-alt fa-fw"></i> <span>RAM Usage</span>
+                            <i class="fas fa-tachometer-alt fa-fw"></i> <span data-i18n="global-ram-usage">RAM Usage</span>
                             <span class="pull-right-container">
                                 <small class="label pull-right bg-blue" id="ramUsage">0.00 MB</small>
                             </span>
@@ -74,7 +74,7 @@
                     </li>
                     <li class="info-overview">
                         <a>
-                            <i class="far fa-clock fa-fw"></i> <span>Uptime</span>
+                            <i class="far fa-clock fa-fw"></i> <span data-i18n="global-uptime">Uptime</span>
                             <span class="pull-right-container">
                                 <small class="label pull-right bg-blue" id="uptime">0d 0h 0m</small>
                             </span>
@@ -88,12 +88,12 @@
         <div class="content-wrapper">
             <section class="content-header">
                 <h1>
-                    Command
-                    <small>Control Panel</small>
+                    <span data-i18n="global-commands">Commands</span>
+                    <small data-i18n="global-control-panel">Control Panel</small>
                 </h1>
                 <ol class="breadcrumb">
-                    <li><i class="fas fa-home"></i> Home</li>
-                    <li class="active"><i class="fas fa-laptop"></i> Command</li>
+                    <li><i class="fas fa-home"></i> <span data-i18n="global-home">Home</span></li>
+                    <li class="active"><i class="fas fa-laptop"></i> <span data-i18n="global-commands">Commands</span></li>
                 </ol>
             </section>
 
@@ -102,34 +102,34 @@
                 <div class="box">
                     <div class="box-header with-border">
                         <i class="fas fa-laptop"></i>
-                        <h3 class="box-title">Command</h3>
+                        <h3 class="box-title" data-i18n="global-commands">Commands</h3>
                         <div class="box-tools pull-right">
                             <div class="btn-group">
                                 <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                                     <i class="fas fa-wrench"></i>
                                 </button>
                                 <ul class="dropdown-menu" role="menu">
-                                    <li><button title="Toggle auto clear" type="button" class="btn btn-box-tool text-olive" id="chkAutoClear"><i id="iconAutoClear" class="fas fa-toggle-on fa-2x"></i></button>Auto clear</li>
+                                    <li><button title="Toggle auto clear" type="button" class="btn btn-box-tool text-olive" id="chkAutoClear"><i id="iconAutoClear" class="fas fa-toggle-on fa-2x"></i></button><span data-i18n="command-auto-clear">Auto clear</span></li>
                                 </ul>
                             </div>
                         </div>
                     </div>
                     <div class="box-body">
-                        <div class="box-content-command"></div>
+                        <div class="box-content-commands"></div>
                         <input type="text" class="form-control" id="commandSent" disabled>
                     </div>
                     <div class="box-footer">
                         <div class="input-group">
                             <div class="input-group-btn hidden-xs" id="cmdsDropDownBox">
                                 <button title="Show all commands" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                                    Commands
+                                    <span data-i18n="global-commands">Commands</span>
                                     <span class="fas fa-caret-down" id="iconCmdsDropDownBox"></span>
                                 </button>
                                 <ul class="dropdown-menu scrollable-menu" id="commandsDropDown"></ul>
                             </div>
                             <div class="input-group-btn hidden-xs" id="botsDropDownBox">
                                 <button title="Show all bots" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                                    Bots
+                                    <span data-i18n="global-bots">Bots</span>
                                     <span class="fas fa-caret-down" id="iconBotsDropDownBox"></span>
                                 </button>
                                 <ul class="dropdown-menu scrollable-menu" id="botsDropDown"></ul>
@@ -146,11 +146,11 @@
 
         <!-- Footer -->
         <footer class="main-footer">
-            <div class="pull-right" id="version"><b>Version</b> 0.0.0.0</div>
+            <div class="pull-right"><strong data-i18n="global-version">Version</strong> <span id="version">0.0.0.0</span></div>
             <strong>
-                <a href="https://github.com/JustArchi/ArchiSteamFarm">GitHub</a> -
-                <a href="https://github.com/JustArchi/ArchiSteamFarm/wiki">Wiki</a> -
-                <a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master" id="changelog">Changelog</a>
+                <a href="https://github.com/JustArchi/ArchiSteamFarm"><span data-i18n="global-github">GitHub</span></a> -
+                <a href="https://github.com/JustArchi/ArchiSteamFarm/wiki"><span data-i18n="global-wiki">Wiki</span></a> -
+                <a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master" id="changelog"><span data-i18n="global-changelog">Changelog</span></a>
             </strong>
         </footer>
 
@@ -168,11 +168,20 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.9/interact.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.2/js/adminlte.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.messagestore.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.fallbacks.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.language.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.parser.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.bidi.min.js"></script>
     <script src="../js/app.js"></script>
     <script>
         $(function () {
             'use strict';
 
+            store('CurrentPage', 'pages/commands.html');
+
             var $chkAutoClear = $('#chkAutoClear'),
                 $commandInput = $('#commandInput'),
                 $cmdsDropDownBox = $('#cmdsDropDownBox'),
@@ -266,11 +275,11 @@
                 return false;
             });
             
-            $('.box-content-command').ready(function () {
+            $('.box-content-commands').ready(function () {
                 var tmpCommandHeight = get('commandHeight');
 
                 if (tmpCommandHeight) {
-                    $('.box-content-command').css('height', tmpCommandHeight + 'px');
+                    $('.box-content-commands').css('height', tmpCommandHeight + 'px');
 
                     if (tmpCommandHeight > 475) {
                         $cmdsDropDownBox.addClass('dropup');
@@ -288,11 +297,11 @@
                         $('#iconBotsDropDownBox').addClass('fa-caret-down');
                     }
                 } else {
-                    $('.box-content-command').css('height', 400 + 'px');
+                    $('.box-content-commands').css('height', 400 + 'px');
                 }
             });
 
-            interact('.box-content-command')
+            interact('.box-content-commands')
                 .resizable({
                     edges: { left: false, right: false, bottom: true, top: false },
                     restrictEdges: {

ArchiSteamFarm/www/pages/generator.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>ASF | Config Generator</title>
+    <title data-i18n="generator-title">ASF | Config Generator</title>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
     <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <!--Change to cdnjs once available-->
     <link rel="icon" href="../favicon.png" type="image/png">
@@ -30,7 +30,7 @@
                 <!-- Left Sidebar Toggle Button-->
                 <a href="javascript:void(0)" class="sidebar-toggle" id="leftSidebar" data-toggle="push-menu" role="button">
                     <i class="fas fa-bars"></i>
-                    <span class="sr-only">Toggle navigation</span>
+                    <span class="sr-only" data-i18n="global-navigation">Toggle navigation</span>
                 </a>
                 <div class="navbar-custom-menu">
                     <ul class="nav navbar-nav">
@@ -45,11 +45,11 @@
         <aside class="main-sidebar">
             <section class="sidebar">
                 <ul class="sidebar-menu" data-widget="tree">
-                    <li class="header">HOME</li>
-                    <li><a href="command.html"><i class="fas fa-laptop fa-fw"></i> <span>Command</span></a></li>
+                    <li class="header" data-i18n="global-home">Home</li>
+                    <li><a href="commands.html"><i class="fas fa-laptop fa-fw"></i> <span data-i18n="global-commands">Commands</span></a></li>
                     <li>
                         <a href="bots.html">
-                            <i class="fas fa-users fa-fw"></i> <span>Bots</span>
+                            <i class="fas fa-users fa-fw"></i> <span data-i18n="global-bots">Bots</span>
                             <span class="pull-right-container bot-status">
                                 <small class="label pull-right bg-gray" id="offlineBots">0</small>
                                 <small class="label pull-right bg-yellow" id="idleBots">0</small>
@@ -57,16 +57,16 @@
                             </span>
                         </a>
                     </li>
-                    <li><a href="log.html"><i class="far fa-file-alt fa-fw"></i> <span>Log</span></a></li>
+                    <li><a href="log.html"><i class="far fa-file-alt fa-fw"></i> <span data-i18n="global-log">Log</span></a></li>
 
-                    <li class="header">CONFIG</li>
-                    <li><a href="changer.html"><i class="far fa-edit fa-fw"></i> <span>Changer</span></a></li>
-                    <li class="active"><a href="generator.html"><i class="far fa-copy fa-fw"></i> <span>Generator</span></a></li>
+                    <li class="header" data-i18n="global-config">Config</li>
+                    <li><a href="changer.html"><i class="far fa-edit fa-fw"></i> <span data-i18n="global-changer">Changer</span></a></li>
+                    <li class="active"><a href="generator.html"><i class="far fa-copy fa-fw"></i> <span data-i18n="global-generator">Generator</span></a></li>
 
-                    <li class="header">INFORMATION</li>
+                    <li class="header" data-i18n="global-information">Information</li>
                     <li class="info-overview">
                         <a>
-                            <i class="fas fa-tachometer-alt fa-fw"></i> <span>RAM Usage</span>
+                            <i class="fas fa-tachometer-alt fa-fw"></i> <span data-i18n="global-ram-usage">RAM Usage</span>
                             <span class="pull-right-container">
                                 <small class="label pull-right bg-blue" id="ramUsage">0.00 MB</small>
                             </span>
@@ -74,7 +74,7 @@
                     </li>
                     <li class="info-overview">
                         <a>
-                            <i class="far fa-clock fa-fw"></i> <span>Uptime</span>
+                            <i class="far fa-clock fa-fw"></i> <span data-i18n="global-uptime">Uptime</span>
                             <span class="pull-right-container">
                                 <small class="label pull-right bg-blue" id="uptime">0d 0h 0m</small>
                             </span>
@@ -88,12 +88,12 @@
         <div class="content-wrapper">
             <section class="content-header">
                 <h1>
-                    Generator
-                    <small>Control Panel</small>
+                    <span data-i18n="global-generator">Generator</span>
+                    <small data-i18n="global-control-panel">Control Panel</small>
                 </h1>
                 <ol class="breadcrumb">
-                    <li><i class="fas fa-cogs"></i> Config</li>
-                    <li class="active"><i class="far fa-copy"></i> Generator</li>
+                    <li><i class="fas fa-cogs"></i> <span data-i18n="global-config">Config</span></li>
+                    <li class="active"><i class="far fa-copy"></i> <span data-i18n="global-generator">Generator</span></li>
                 </ol>
             </section>
 
@@ -102,11 +102,11 @@
                 <div class="box">
                     <div class="box-header with-border">
                         <i class="far fa-copy"></i>
-                        <h3 class="box-title">Current mode:</h3>
+                        <h3 class="box-title" data-i18n="generator-current">Current mode:</h3>
                         <div class="box-tools pull-right">
                             <div class="btn-group">
                                 <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-                                    Change mode
+                                    <span data-i18n="generator-change">Change mode</span>
                                     <span class="fas fa-caret-down"></span>
                                 </button>
                                 <ul class="dropdown-menu scrollable-menu" role="menu" id="modeDropDown"></ul>
@@ -121,7 +121,9 @@
                             <div class="input-group">
                                 <input type="text" class="form-control" placeholder="Name" id="GeneratorName">
                                 <span class="input-group-btn">
-                                    <button class="btn btn-default" type="button" id="downloadButton"><i class="fas fa-cloud-download-alt"></i> Download</button>
+                                    <button class="btn btn-default" type="button" id="downloadButton">
+                                        <i class="fas fa-cloud-download-alt"></i> <span data-i18n="generator-download">Download</span>
+                                    </button>
                                 </span>
                             </div>
                         </div>
@@ -132,11 +134,11 @@
 
         <!-- Footer -->
         <footer class="main-footer">
-            <div class="pull-right" id="version"><b>Version</b> 0.0.0.0</div>
+            <div class="pull-right"><strong data-i18n="global-version">Version</strong> <span id="version">0.0.0.0</span></div>
             <strong>
-                <a href="https://github.com/JustArchi/ArchiSteamFarm">GitHub</a> -
-                <a href="https://github.com/JustArchi/ArchiSteamFarm/wiki">Wiki</a> -
-                <a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master" id="changelog">Changelog</a>
+                <a href="https://github.com/JustArchi/ArchiSteamFarm"><span data-i18n="global-github">GitHub</span></a> -
+                <a href="https://github.com/JustArchi/ArchiSteamFarm/wiki"><span data-i18n="global-wiki">Wiki</span></a> -
+                <a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master" id="changelog"><span data-i18n="global-changelog">Changelog</span></a>
             </strong>
         </footer>
 
@@ -153,11 +155,20 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.2/js/adminlte.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.messagestore.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.fallbacks.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.language.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.parser.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.bidi.min.js"></script>
     <script src="../js/app.js"></script>
     <script>
         $(function () {
             'use strict';
 
+            store('CurrentPage', 'pages/generator.html');
+
             $('.box-content-config').ready(function () {                
                 loadPageContentGenerator();
             });

ArchiSteamFarm/www/pages/log.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>ASF | Log</title>
+    <title data-i18n="log-title">ASF | Log</title>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
     <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <!--Change to cdnjs once available-->
     <link rel="icon" href="../favicon.png" type="image/png">
@@ -30,7 +30,7 @@
                 <!-- Left Sidebar Toggle Button-->
                 <a href="javascript:void(0)" class="sidebar-toggle" id="leftSidebar" data-toggle="push-menu" role="button">
                     <i class="fas fa-bars"></i>
-                    <span class="sr-only">Toggle navigation</span>
+                    <span class="sr-only" data-i18n="global-navigation">Toggle navigation</span>
                 </a>
                 <div class="navbar-custom-menu">
                     <ul class="nav navbar-nav">
@@ -45,11 +45,11 @@
         <aside class="main-sidebar">
             <section class="sidebar">
                 <ul class="sidebar-menu" data-widget="tree">
-                    <li class="header">HOME</li>
-                    <li><a href="command.html"><i class="fas fa-laptop fa-fw"></i> <span>Command</span></a></li>
+                    <li class="header" data-i18n="global-home">Home</li>
+                    <li><a href="commands.html"><i class="fas fa-laptop fa-fw"></i> <span data-i18n="global-commands">Commands</span></a></li>
                     <li>
                         <a href="bots.html">
-                            <i class="fas fa-users fa-fw"></i> <span>Bots</span>
+                            <i class="fas fa-users fa-fw"></i> <span data-i18n="global-bots">Bots</span>
                             <span class="pull-right-container bot-status">
                                 <small class="label pull-right bg-gray" id="offlineBots">0</small>
                                 <small class="label pull-right bg-yellow" id="idleBots">0</small>
@@ -57,16 +57,16 @@
                             </span>
                         </a>
                     </li>
-                    <li class="active"><a href="log.html"><i class="far fa-file-alt fa-fw"></i> <span>Log</span></a></li>
+                    <li class="active"><a href="log.html"><i class="far fa-file-alt fa-fw"></i> <span data-i18n="global-log">Log</span></a></li>
 
-                    <li class="header">CONFIG</li>
-                    <li><a href="changer.html"><i class="far fa-edit fa-fw"></i> <span>Changer</span></a></li>
-                    <li><a href="generator.html"><i class="far fa-copy fa-fw"></i> <span>Generator</span></a></li>
+                    <li class="header" data-i18n="global-config">Config</li>
+                    <li><a href="changer.html"><i class="far fa-edit fa-fw"></i> <span data-i18n="global-changer">Changer</span></a></li>
+                    <li><a href="generator.html"><i class="far fa-copy fa-fw"></i> <span data-i18n="global-generator">Generator</span></a></li>
 
-                    <li class="header">INFORMATION</li>
+                    <li class="header" data-i18n="global-information">Information</li>
                     <li class="info-overview">
                         <a>
-                            <i class="fas fa-tachometer-alt fa-fw"></i> <span>RAM Usage</span>
+                            <i class="fas fa-tachometer-alt fa-fw"></i> <span data-i18n="global-ram-usage">RAM Usage</span>
                             <span class="pull-right-container">
                                 <small class="label pull-right bg-blue" id="ramUsage">0.00 MB</small>
                             </span>
@@ -74,7 +74,7 @@
                     </li>
                     <li class="info-overview">
                         <a>
-                            <i class="far fa-clock fa-fw"></i> <span>Uptime</span>
+                            <i class="far fa-clock fa-fw"></i> <span data-i18n="global-uptime">Uptime</span>
                             <span class="pull-right-container">
                                 <small class="label pull-right bg-blue" id="uptime">0d 0h 0m</small>
                             </span>
@@ -88,12 +88,12 @@
         <div class="content-wrapper">
             <section class="content-header">
                 <h1>
-                    Log
-                    <small>Control Panel</small>
+                    <span data-i18n="global-log">Log</span>
+                    <small data-i18n="global-control-panel">Control Panel</small>
                 </h1>
                 <ol class="breadcrumb">
-                    <li><i class="fas fa-home"></i> Home</li>
-                    <li class="active"><i class="far fa-file-alt"></i> Log</li>
+                    <li><i class="fas fa-home"></i> <span data-i18n="global-home">Home</span></li>
+                    <li class="active"><i class="far fa-file-alt"></i> <span data-i18n="global-log">Log</span></li>
                 </ol>
             </section>
 
@@ -102,7 +102,7 @@
                 <div class="box">
                     <div class="box-header with-border">
                         <i class="far fa-file-alt"></i>
-                        <h3 class="box-title">Log</h3>
+                        <h3 class="box-title" data-i18n="global-log">Log</h3>
                         <div class="box-tools pull-right">
                             <button title="Toggle auto scroll" type="button" class="btn btn-box-tool text-olive" id="toggleAutoScroll"><i class="fas fa-toggle-on fa-2x"></i></button>
                         </div>
@@ -118,11 +118,11 @@
 
         <!-- Footer -->
         <footer class="main-footer">
-            <div class="pull-right" id="version"><b>Version</b> 0.0.0.0</div>
+            <div class="pull-right"><strong data-i18n="global-version">Version</strong> <span id="version">0.0.0.0</span></div>
             <strong>
-                <a href="https://github.com/JustArchi/ArchiSteamFarm">GitHub</a> -
-                <a href="https://github.com/JustArchi/ArchiSteamFarm/wiki">Wiki</a> -
-                <a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master" id="changelog">Changelog</a>
+                <a href="https://github.com/JustArchi/ArchiSteamFarm"><span data-i18n="global-github">GitHub</span></a> -
+                <a href="https://github.com/JustArchi/ArchiSteamFarm/wiki"><span data-i18n="global-wiki">Wiki</span></a> -
+                <a href="https://github.com/JustArchi/ArchiSteamFarm/commits/master" id="changelog"><span data-i18n="global-changelog">Changelog</span></a>
             </strong>
         </footer>
 
@@ -140,11 +140,20 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.9/interact.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.2/js/adminlte.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.messagestore.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.fallbacks.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.language.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.parser.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.i18n/1.0.4/jquery.i18n.emitter.bidi.min.js"></script>
     <script src="../js/app.js"></script>
     <script>
         $(function () {
             'use strict';
 
+            store('CurrentPage', 'pages/log.html');
+
             var lastScrollPosition = 0,
                 ws;
 
@@ -158,11 +167,14 @@
 
                 new_uri += '//' + loc.host + '/Api/Log?password=' + encodeURIComponent(tmpIPCPassword);
                 ws = new WebSocket(new_uri);
-                $('.overlay').remove();
-                $('.box-content-log').text(''); // Clear log
 
-                ws.onmessage = function (evt) {
-                    var msg = JSON.parse(evt.data)['Result'] + '\n';
+                ws.onopen = function (event) {
+                    $('.overlay').remove();
+                    $('.box-content-log').text(''); // Clear log
+                };
+
+                ws.onmessage = function (event) {
+                    var msg = JSON.parse(event.data)['Result'] + '\n';
                     $('.box-content-log').append(msg);
                     $('.box-content-log').stop().animate({ scrollTop: $('.box-content-log')[0].scrollHeight }, 1000);
                 };
@@ -171,7 +183,7 @@
                     if (event.code !== 1000) { // Code 1000 means that the connection was closed normally
                         swal({
                             title: 'Error!',
-                            text: event.code + ' - ' + event.reason,
+                            text: 'Event code: ' + event.code,
                             type: 'error'
                         }, function () { swal.close(); });
                     }

crowdin.yaml

@@ -4,3 +4,5 @@ files:
     translation: /ArchiSteamFarm/Localization/Strings.%locale%.resx
   - source: /docs/WebConfigGenerator/src/locale/strings.json
     translation: /docs/WebConfigGenerator/src/locale/%locale%.json
+  - source: /ArchiSteamFarm/www/locale/strings.json
+    translation: /ArchiSteamFarm/www/locale/%locale%.json