From 396f8a3f9c1763756ff92646bb7c279dd9c05750 Mon Sep 17 00:00:00 2001
From: xyuanmu <xyuanmu@gmail.com>
Date: Sat, 26 Dec 2015 11:13:19 +0800
Subject: [PATCH] Update webui status info

---
 gae_proxy/web_ui/status.html  | 424 +++++++++++++++++++---------------
 launcher/web_control.py       |  19 +-
 launcher/web_ui/css/style.css |  25 +-
 3 files changed, 277 insertions(+), 191 deletions(-)

diff --git a/gae_proxy/web_ui/status.html b/gae_proxy/web_ui/status.html
index c33660fd31..aa7fbbb074 100644
--- a/gae_proxy/web_ui/status.html
+++ b/gae_proxy/web_ui/status.html
@@ -5,176 +5,177 @@
 </div>
 <![endif]-->
 
-<div pro="False">
-    </br></br></br>
-    <div id="noob-info"></div>
-    </br></br></br>
-
-    <!-- show pro="True" and hide pro="False"-->
-    <button id="show_detail" class="btn btn-primary">{{ _( "Show Details" ) }}</button>
-
+<div id="noob-info" class=""></div>
+
+<!-- Toggle #details-->
+<div class="row-fluid">
+    <div class="span3 bold">{{ _( "Show Details" ) }}</div> <!-- .span4 -->
+    <div class="span9">
+        <input id="show-detail" type="checkbox" />
+    </div> <!-- .span8 -->
 </div>
 
-<h4 pro="True" hidden>{{ _( "Status" ) }}</h4>
-<table id="status" class="table table-bordered table-striped" pro="True" hidden>
-    <thead>
-        <tr>
-            <th width="25%">{{ _( "Property" ) }}</th>
-            <th>{{ _( "Value" ) }}</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>{{ _( "Local Network Status" ) }}</td>
-            <td id="network-status"></td>
-        </tr>
-        <tr>
-            <td>{{ _( "IP Number" ) }}</td>
-            <td id="ip-num"></td>
-        </tr>
-        <tr>
-            <td>{{ _( "IP Quality" ) }}</td>
-            <td id="ip-quality"></td>
-        </tr>
-        <tr>
-            <td>{{ _( "Connection Pool" ) }}(<a href="https://github.com/XX-net/XX-Net/wiki/GoAgent-Connection-status" target="_blank">{{ _( "Help" ) }}</a>)</td>
-            <td id="connection-status"></td>
-        </tr>
-        <tr>
-            <td>{{ _( "Browser Proxy Setting" ) }}</td>
-            <td id="browser-proxy-setting"></td>
-        </tr>
-        <tr id="tr_ca-status">
-            <td>{{ _( "CA status" ) }}</td>
-            <td id="ca-status"></td>
-        </tr>
-        <tr>
-            <td>{{ _( "Number of IP-Scanning Threads" ) }}(<a href="/?module=gae_proxy&menu=advanced#scan_ip">{{ _( "Settings" ) }}</a>)</td>
-            <td id="scan-ip-thread-num"></td>
-        </tr>
-        <tr>
-            <td>{{ _( "Block Status" ) }} (<a href="https://github.com/XX-net/XX-Net/wiki/GoAgent-Blocked" target="_blank">{{ _( "Help" ) }}</a>)</td>
-            <td id="block-stat"></td>
-        </tr>
-        <!--tr pro="False">
-            <td>{{ _( "XX-Net Version" ) }}</td>
-            <td id="xxnet-version"></td>
-        </tr-->
-    </tbody>
-</table>
-
-<h4 pro="True" hidden>{{ _( "Configuration" ) }}</h4>
-<table id="setting" class="table table-bordered table-striped" pro="True" hidden>
-    <thead>
-        <tr>
-            <th width="25%">{{ _( "Property" ) }}</th>
-            <th>{{ _( "Value" ) }}</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr hidden>
-            <td>{{ _( "System Proxy Status" ) }}</td>
-            <td id="proxy-status"></td>
-        </tr>
-        <tr>
-            <td>{{ _( "Listening Proxy" ) }}</td>
-            <td id="proxy-listen"></td>
-        </tr>
-        <tr>
-            <td>{{ _( "PAC URL" ) }}</td>
-            <td id="pac-url"></td>
-        </tr>
-        <tr>
-            <td>IPv6</td>
-            <td id="ipv6-status"></td>
-        </tr>
-    </tbody>
-</table>
-
-<h4 pro="True" hidden>Appid</h4>
-<table id="appids" class="table table-bordered table-striped" pro="True" hidden>
-    <thead>
-        <tr>
-            <th width="25%">{{ _( "Property" ) }}</th>
-            <th width="75%">{{ _( "Value" ) }}</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr id="hidden-appids">
-            <td>{{ _( "Working AppIDs" ) }}</td>
-            <td id="working-appid"></td>
-        </tr>
-        <tr id="tr-out-of-quota-appids" hidden="true">
-            <td>{{ _( "Out-of-quota AppIDs" ) }}</td>
-            <td id="out-of-quota-appids"></td>
-        </tr>
-        <tr id="tr-not-exist-appids" hidden="true">
-            <td>{{ _( "Nonexistent AppIDs" ) }}</td>
-            <td id="not-exist-appids"></td>
-        </tr>
-    </tbody>
-</table>
-
-<h4 pro="True" hidden>{{ _( "System Version" ) }}</h4>
-<table id="version" class="table table-bordered table-striped" pro="True" hidden>
-    <thead>
-        <tr>
-            <th width="25%">{{ _( "Property" ) }}</th>
-            <th width="75%">{{ _( "Value" ) }}</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>XX-Net Version</td>
-            <td id="xxnet-version"></td>
-        </tr>
-        <tr>
-            <td>Python Version</td>
-            <td id="python-version"></td>
-        </tr>
-        <tr>
-            <td>System Platform</td>
-            <td id="sys-platform"></td>
-        </tr>
-        <tr>
-            <td>OS System</td>
-            <td id="os-system"></td>
-        </tr>
-        <tr>
-            <td>OS Version</td>
-            <td id="os-version"></td>
-        </tr>
-        <tr>
-            <td>OS Release</td>
-            <td id="os-release"></td>
-        </tr>
-        <tr>
-            <td>OS Detail</td>
-            <td id="os-detail"></td>
-        </tr>
-        <tr>
-            <td>Language</td>
-            <td id="language"></td>
-        </tr>
-        <tr>
-            <td>Architecture</td>
-            <td id="architecture"></td>
-        </tr>
-        <tr>
-            <td>Browser</td>
-            <td id="browser"></td>
-        </tr>
-    </tbody>
-</table>
-
-<div pro="True" hidden>
+<div id="details" hidden>
+    </br>
+    <h4>{{ _( "Status" ) }}</h4>
+    <table id="status" class="table table-bordered table-striped">
+        <thead>
+            <tr>
+                <th width="25%">{{ _( "Property" ) }}</th>
+                <th>{{ _( "Value" ) }}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>{{ _( "Local Network Status" ) }}</td>
+                <td id="network-status"></td>
+            </tr>
+            <tr>
+                <td>{{ _( "IP Number" ) }}</td>
+                <td id="ip-num"></td>
+            </tr>
+            <tr>
+                <td>{{ _( "IP Quality" ) }}</td>
+                <td id="ip-quality"></td>
+            </tr>
+            <tr>
+                <td>{{ _( "Connection Pool" ) }}(<a href="https://github.com/XX-net/XX-Net/wiki/GoAgent-Connection-status" target="_blank">{{ _( "Help" ) }}</a>)</td>
+                <td id="connection-status"></td>
+            </tr>
+            <tr>
+                <td>{{ _( "Browser Proxy Setting" ) }}</td>
+                <td id="browser-proxy-setting"></td>
+            </tr>
+            <tr id="tr_ca-status">
+                <td>{{ _( "CA status" ) }}</td>
+                <td id="ca-status"></td>
+            </tr>
+            <tr>
+                <td>{{ _( "Number of IP-Scanning Threads" ) }}(<a href="/?module=gae_proxy&menu=advanced#scan_ip">{{ _( "Settings" ) }}</a>)</td>
+                <td id="scan-ip-thread-num"></td>
+            </tr>
+            <tr>
+                <td>{{ _( "Block Status" ) }} (<a href="https://github.com/XX-net/XX-Net/wiki/GoAgent-Blocked" target="_blank">{{ _( "Help" ) }}</a>)</td>
+                <td id="block-stat"></td>
+            </tr>
+            <!--tr pro="False">
+                <td>{{ _( "XX-Net Version" ) }}</td>
+                <td id="xxnet-version"></td>
+            </tr-->
+        </tbody>
+    </table>
+
+    <h4>{{ _( "Configuration" ) }}</h4>
+    <table id="setting" class="table table-bordered table-striped">
+        <thead>
+            <tr>
+                <th width="25%">{{ _( "Property" ) }}</th>
+                <th>{{ _( "Value" ) }}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr hidden>
+                <td>{{ _( "System Proxy Status" ) }}</td>
+                <td id="proxy-status"></td>
+            </tr>
+            <tr>
+                <td>{{ _( "Listening Proxy" ) }}</td>
+                <td id="proxy-listen"></td>
+            </tr>
+            <tr>
+                <td>{{ _( "PAC URL" ) }}</td>
+                <td id="pac-url"></td>
+            </tr>
+            <tr>
+                <td>IPv6</td>
+                <td id="ipv6-status"></td>
+            </tr>
+        </tbody>
+    </table>
+
+    <h4>Appid</h4>
+    <table id="appids" class="table table-bordered table-striped">
+        <thead>
+            <tr>
+                <th width="25%">{{ _( "Property" ) }}</th>
+                <th width="75%">{{ _( "Value" ) }}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr id="hidden-appids">
+                <td>{{ _( "Working AppIDs" ) }}</td>
+                <td id="working-appid"></td>
+            </tr>
+            <tr id="tr-out-of-quota-appids" hidden="true">
+                <td>{{ _( "Out-of-quota AppIDs" ) }}</td>
+                <td id="out-of-quota-appids"></td>
+            </tr>
+            <tr id="tr-not-exist-appids" hidden="true">
+                <td>{{ _( "Nonexistent AppIDs" ) }}</td>
+                <td id="not-exist-appids"></td>
+            </tr>
+        </tbody>
+    </table>
+
+    <h4>{{ _( "System Version" ) }}</h4>
+    <table id="version" class="table table-bordered table-striped">
+        <thead>
+            <tr>
+                <th width="25%">{{ _( "Property" ) }}</th>
+                <th width="75%">{{ _( "Value" ) }}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>XX-Net Version</td>
+                <td id="xxnet-version"></td>
+            </tr>
+            <tr>
+                <td>Python Version</td>
+                <td id="python-version"></td>
+            </tr>
+            <tr>
+                <td>System Platform</td>
+                <td id="sys-platform"></td>
+            </tr>
+            <tr>
+                <td>OS System</td>
+                <td id="os-system"></td>
+            </tr>
+            <tr>
+                <td>OS Version</td>
+                <td id="os-version"></td>
+            </tr>
+            <tr>
+                <td>OS Release</td>
+                <td id="os-release"></td>
+            </tr>
+            <tr>
+                <td>OS Detail</td>
+                <td id="os-detail"></td>
+            </tr>
+            <tr>
+                <td>Language</td>
+                <td id="language"></td>
+            </tr>
+            <tr>
+                <td>Architecture</td>
+                <td id="architecture"></td>
+            </tr>
+            <tr>
+                <td>Browser</td>
+                <td id="browser"></td>
+            </tr>
+        </tbody>
+    </table>
+
     <button id="pop-up-report" class="btn btn-primary">{{ _( "Feedback" ) }}</button>
     <br><br>
     <div id="tip">
             <a href="https://github.com/XX-net/XX-Net/issues">{{ _("Check Github issues") }}</a>{{ _(" or ")}} <a href="https://groups.google.com/forum/#!forum/xx-net">Google Group{{ _(" Discussions") }}</a><br>
     </div>
-</div>
-<!-- pro mode: show advanced information.-->
+</div> <!-- #details -->
+
 
 <div id="report-issue-modal" class="modal hide fade">
     <div class="modal-header">
@@ -252,33 +253,30 @@ <h3>{{ _( "Diagnostic Info" ) }}</h3>
         });
 
         updateStatus();
+        getConfig();
     });
 
     $("#pop-up-report").click(function(){
         OneKeyReport();
         $('#report-issue-modal').modal();
     });
-
-    $("#show_detail").click(function(){
-            $("[pro='True']").show();
-            $("[pro='False']").hide();
-            updateDetailStatus();
-    });
 </script>
 <script type="text/javascript">
     function updateStatus(){
-        if ( $("[pro='False']").is(":visible")){
-            updateNoobStatus();
-        }else{
+        if ( $("#details").is(":visible")){
             updateDetailStatus();
         }
+        updateNoobStatus();
     }
 
-    function updateProperty(selector, content) {
+    function updateProperty(selector, content, attrclass) {
         var previousContent = $(selector).html();
         if (String(previousContent) != String(content)) {
             $(selector).html(content);
         }
+        if (attrclass) {
+            $(selector).attr("class",attrclass);
+        }
     }
     function updateDetailStatus() {
         $.ajax({
@@ -355,8 +353,6 @@ <h3>{{ _( "Diagnostic Info" ) }}</h3>
 
                 if ( formValue == '' ) {
                     tip('{{ _("The status page is empty. Highly likely that GAEProxy failed getting started. Please follow ")}}<a href="https://github.com/XX-net/XX-Net/wiki/How-to-get-start-error-log" target="_blank">{{ _("guide ")}}</a>{{ _("to troubleshoot.")}}<br>', 'warning', false);
-                } else {
-                    tip('{{ _("No response from GAEProxy process. It might have already exited.")}}', 'warning', false);
                 }
             }
         });
@@ -370,50 +366,50 @@ <h3>{{ _( "Diagnostic Info" ) }}</h3>
             dataType: 'JSON',
             success: function(result) {
                 if ( result['network_state'] == "Fail" ){
-                    return updateProperty('#noob-info', '{{ _( "Your local network failed. Please check your network and firewall. " ) }}');
+                    return updateProperty('#noob-info', '{{ _( "Your local network failed. Please check your network and firewall. " ) }}', 'none');
                 }
 
                 if ( result['good_ip_num'] < 1){
                     if ( result['scan_ip_thread_num'] < 3 ){
-                        return updateProperty('#noob-info', '{{ _( "You may want to <a href=\"./?module=gae_proxy&menu=advanced#scan_ip\">turn on IP scaner</a>." ) }}');
+                        return updateProperty('#noob-info', '{{ _( "You may want to <a href=\"./?module=gae_proxy&menu=advanced#scan_ip\">turn on IP scaner</a>." ) }}', 'none');
                     }else{
-                        return updateProperty('#noob-info', '{{ _( "XX-Net is scanning IP. Please wait about half an hour." ) }}');
+                        return updateProperty('#noob-info', '{{ _( "XX-Net is scanning IP. Please wait about half an hour." ) }}', 'none');
                     }
                 }
 
                 if (result['working_appid'] == ""){
                     if ( result['out_of_quota_appids'] != "" ){
                         if ( is_public_appid(result['gae_appid']) ){
-                            return updateProperty('#noob-info', '{{ _( "Public appid out of quota, Please <a href=\"https://github.com/XX-net/XX-Net/wiki/Register-Google-appid\" target=\"_blank\">deploy your own APPID</a>" ) }}');
+                            return updateProperty('#noob-info', '{{ _( "Public appid out of quota, Please <a href=\"https://github.com/XX-net/XX-Net/wiki/Register-Google-appid\" target=\"_blank\">deploy your own APPID</a>" ) }}', 'none');
                         }else{
-                            return updateProperty('#noob-info', '{{ _( "Your appid out of quota, Please <a href=\"https://github.com/XX-net/XX-Net/wiki/Register-Google-appid\" target=\"_blank\">deploy more APPID</a>" ) }}');
+                            return updateProperty('#noob-info', '{{ _( "Your appid out of quota, Please <a href=\"https://github.com/XX-net/XX-Net/wiki/Register-Google-appid\" target=\"_blank\">deploy more APPID</a>" ) }}', 'none');
                         }
                     }else{
-                        return updateProperty('#noob-info', '{{ _( "No working appid. Please check. " ) }}');
+                        return updateProperty('#noob-info', '{{ _( "No working appid. Please check. " ) }}', 'none');
                     }
                 }
 
                 if ( (result['connected_link_new'] + result['connected_link_used']) < 1 ){
-                    return updateProperty('#noob-info', '{{ _( "Connection not established yet. " ) }}');
+                    return updateProperty('#noob-info', '{{ _( "Connection not established yet. " ) }}', 'none');
                 }
 
                 if ( test_http_proxy_setting() == "Fail" ){
-                    return updateProperty('#noob-info', '<a href="https://github.com/XX-net/XX-Net/wiki/%E8%AE%BE%E7%BD%AE%E4%BB%A3%E7%90%86" target="_blank">' + '{{ _( "Please check your browser proxy setting." ) }}' + '</a>');
+                    return updateProperty('#noob-info', '<a href="https://github.com/XX-net/XX-Net/wiki/%E8%AE%BE%E7%BD%AE%E4%BB%A3%E7%90%86" target="_blank">' + '{{ _( "Please check your browser proxy setting." ) }}' + '</a>', 'none');
                 } else  if ( test_http_proxy_setting() == "Detecting" ){
-                    return updateProperty('#noob-info', '{{ _( "Detecting..." ) }}');
+                    return updateProperty('#noob-info', '{{ _( "Detecting..." ) }}', 'none');
                 }
 
                 if ( test_https_proxy_setting() == "Fail"){
-                    return updateProperty('#noob-info', '<a href="https://github.com/XX-net/XX-Net/wiki/GoAgent-Import-CA" target="_blank">' + '{{ _( "Please import certificates to your browser." ) }}' + '</a>');
+                    return updateProperty('#noob-info', '<a href="https://github.com/XX-net/XX-Net/wiki/GoAgent-Import-CA" target="_blank">' + '{{ _( "Please import certificates to your browser." ) }}' + '</a>', 'none');
                 } else  if ( test_https_proxy_setting() == "Detecting" ){
-                    return updateProperty('#noob-info', '{{ _( "Detecting..." ) }}');
+                    return updateProperty('#noob-info', '{{ _( "Detecting..." ) }}', 'none');
                 }
 
                 if ( is_public_appid(result['working_appid']) ){
-                    return updateProperty('#noob-info', '{{ _( "You are using public APPID. You are recommended to <a href=\"https://github.com/XX-net/XX-Net/wiki/Register-Google-appid\" target=\"_blank\">deploy your own APPID</a>" ) }}');
+                    return updateProperty('#noob-info', '{{ _( "You are using public APPID. You are recommended to <a href=\"https://github.com/XX-net/XX-Net/wiki/Register-Google-appid\" target=\"_blank\">deploy your own APPID</a>" ) }}', 'hard');
                 }
 
-                return updateProperty('#noob-info', "XX-Net " + result['xxnet_version'] + '{{ _( ", Everything is OK. Welcome to the FREE Internet. " ) }}');
+                return updateProperty('#noob-info', "XX-Net " + result['xxnet_version'] + '{{ _( ", Everything is OK. Welcome to the FREE Internet. " ) }}', 'fluent');
 
             },
             error: function(result) {
@@ -421,7 +417,7 @@ <h3>{{ _( "Diagnostic Info" ) }}</h3>
                 if ( infoValue == '' ) {
                     tip('{{ _("The status page is empty. Highly likely that GAEProxy failed getting started. Please follow ")}}<a href="https://github.com/XX-net/XX-Net/wiki/How-to-get-start-error-log" target="_blank">{{ _("guide ")}}</a>{{ _("to troubleshoot.")}}<br>', 'warning', false);
                 } else {
-                    updateProperty('#noob-info', '{{ _("No response from GAEProxy process. It might have already exited.")}}');
+                    updateProperty('#noob-info', '{{ _("No response from GAEProxy process. It might have already exited.")}}', 'none');
                 }
             }
         });
@@ -518,6 +514,56 @@ <h3>{{ _( "Diagnostic Info" ) }}</h3>
     }
     test_http_proxy_setting();
     test_https_proxy_setting();
+
+    $(function() {
+        $('#show-detail').wrap('<div class="switch" />').parent().bootstrapSwitch();
+    });
+
+    $('#show-detail').change(function() {
+        var isChecked = $(this).is(':checked'),
+            key       = 'show_detail',
+            value     = isChecked ? 1 : 0;
+        if (isChecked) {
+            $( "#details" ).slideDown();
+        } else {
+            $( "#details" ).slideUp();
+        }
+
+        return setConfig(key, value);
+    });
+
+    function setConfig(key, value) {
+        var pageRequests = {};
+        pageRequests['cmd'] = 'set_config';
+        pageRequests[key]   = value;
+
+        $.ajax({
+            type: 'GET',
+            url: '/config',
+            data: pageRequests,
+            dataType: 'JSON'
+        });
+    }
+
+    function getConfig() {
+        var pageRequests = {
+            'cmd': 'get_config'
+        };
+        $.ajax({
+            type: 'GET',
+            url: '/config',
+            data: pageRequests,
+            dataType: 'JSON',
+            success: function(result) {
+                if ( result['show_detail'] != 0 ) {
+                    $( "#show-detail").parent().removeClass('switch-off');
+                    $( "#show-detail").parent().addClass('switch-on');
+                    $( "#show-detail").prop('checked', true);
+                    $( "#details" ).slideDown();
+                }
+            }
+        });
+    };
 </script>
 
 
diff --git a/launcher/web_control.py b/launcher/web_control.py
index 83ffb6b7ba..5cdd982ffb 100644
--- a/launcher/web_control.py
+++ b/launcher/web_control.py
@@ -235,13 +235,14 @@ def req_config_handler(self):
             elif check_update == 1:
                 check_update = "stable"
 
-            data = '{ "check_update": "%s", "language": "%s", "popup_webui": %d, "allow_remote_connect": %d, "show_systray": %d, "auto_start": %d, "php_enable": %d, "gae_proxy_enable": %d }' %\
+            data = '{ "check_update": "%s", "language": "%s", "popup_webui": %d, "allow_remote_connect": %d, "show_systray": %d, "auto_start": %d, "show_detail": %d, "php_enable": %d, "gae_proxy_enable": %d }' %\
                    (check_update
                     , config.get(["language"], i18n_translator.lang)
                     , config.get(["modules", "launcher", "popup_webui"], 1)
                     , config.get(["modules", "launcher", "allow_remote_connect"], 0)
                     , config.get(["modules", "launcher", "show_systray"], 1)
                     , config.get(["modules", "launcher", "auto_start"], 0)
+                    , config.get(["modules", "launcher", "show_detail"], 0)
                     , config.get(["modules", "php_proxy", "auto_start"], 0)
                     , config.get(["modules", "gae_proxy", "auto_start"], 0))
         elif reqs['cmd'] == ['set_config']:
@@ -319,6 +320,22 @@ def req_config_handler(self):
                     config.save()
 
                     data = '{"res":"success"}'
+
+            elif 'show_detail' in reqs:
+                show_detail = int(reqs['show_detail'][0])
+                if show_detail != 0 and show_detail != 1:
+                    data = '{"res":"fail, show_detail:%s"}' % show_detail
+                else:
+                    if show_detail:
+                        autorun.enable()
+                    else:
+                        autorun.disable()
+
+                    config.set(["modules", "launcher", "show_detail"], show_detail)
+                    config.save()
+
+                    data = '{"res":"success"}'
+
             elif 'gae_proxy_enable' in reqs :
                 gae_proxy_enable = int(reqs['gae_proxy_enable'][0])
                 if gae_proxy_enable != 0 and gae_proxy_enable != 1:
diff --git a/launcher/web_ui/css/style.css b/launcher/web_ui/css/style.css
index c921e7915b..e0bb89de78 100644
--- a/launcher/web_ui/css/style.css
+++ b/launcher/web_ui/css/style.css
@@ -214,11 +214,34 @@ div#content div#options div.row-fluid {
     margin-bottom: 10px;
 }
 
-div#content div#options div.row-fluid div.span4 {
+div#content div#options div.row-fluid div.span4, .bold {
     font-weight: bold;
     padding-top: 5px;
 }
 
+#noob-info {
+    padding: 10px;
+    margin: 40px 0;
+    color: #b94a48;
+    background-color: #f2dede;
+    border:1px solid;
+    border-color: #eed3d7;
+    border-radius: 4px;
+    transition: color .3s,background .3s,border .3s;
+}
+
+#noob-info.hard {
+    color: #468847;
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+
+#noob-info.fluent {
+    color: #146C98;
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+
 /* Smaller than standard 1200 (devices and browsers) */
 @media only screen and (max-width: 1199px) {
 }