beautifications and translations of settings page

1 files changed, 32 insertions, 25 deletions

diff --git a/index.html b/index.html
index ce27e11..0b5bb1d 100644
--- a/index.html
+++ b/index.html
@@ -398,34 +398,41 @@
         <!-- Settings screen -->
         <div class="container" id="screen_settings" style="display: none;">
             <div class="row">
-                <form class="form col-sm-4 col-md-offset-4" id="settingsForm">
-                    <div class="form-group">
-                        <span class="small" data-tkey="language">Language</span>
-                        <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="ui_language_title" data-content="Select the UI language." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
-                        <select class="form-control" id="gui_lang_select">
-                            <option value="sl">Slovensko</option>
-                            <option value="en">English</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <span class="small" data-tkey="robot_address">Robot’s address</span>
-                        <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="robot_address_title" data-content="Set the robot's IPv4 or IPv6 address." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
-                        <input type="text" class="form-control" id="robot_address_input" data-tkey-placeholder="robot_address_placeholder" placeholder="IP address" pattern="(((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$)|(((^|:)([0-9a-fA-F]{0,4})){1,8}$)" data-tkey-title="robot_address_title" title="Set the robot's IPv4 or IPv6 address.">
-                    </div>
-                    <div class="form-group" id="gui_layout_select_form_group">
-                        <span class="small" data-tkey="layout_select" >Layout</span>
-                        <select class="form-control" id="gui_layout_select">
-                            <option value="line-layout">Line</option>
-                            <option value="square-layout">Square</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <div class="text-right">
+                <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
+                    <div class="panel panel-default">
+                        <div class="panel-heading">
+                            <h3 class="text-center" data-tkey="settings">Settings</h3>
+                        </div>
+                        <div class="panel-body">
+                            <form class="form" id="settingsForm">
+                                <div class="form-group">
+                                    <span class="small" data-tkey="language">Language</span>
+                                    <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="ui_language_title" data-content="Select the UI language." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
+                                    <select class="form-control" id="gui_lang_select">
+                                        <option value="sl">Slovensko</option>
+                                        <option value="en">English</option>
+                                    </select>
+                                </div>
+                                <div class="form-group">
+                                    <span class="small" data-tkey="robot_address">Robot’s address</span>
+                                    <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="robot_address_title" data-content="Set the robot's IPv4 or IPv6 address." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
+                                    <input type="text" class="form-control" id="robot_address_input" data-tkey-placeholder="robot_address_placeholder" placeholder="IP address" pattern="^(([0-9a-f]{0,4}:){1,7}[0-9a-f]{1,4}|([0-9]{1,3}\.){3}[0-9]{1,3})$" data-tkey-title="robot_address_title" title="Set the robot's IPv4 or IPv6 address.">
+                                </div>
+                                <div class="form-group" id="gui_layout_select_form_group">
+                                    <span class="small" data-tkey="layout_select" >Layout</span>
+                                    <select class="form-control" id="gui_layout_select">
+                                        <option value="line-layout">Line</option>
+                                        <option value="square-layout">Square</option>
+                                    </select>
+                                </div>
+                            </form>
+                        </div>
+                        <div class="panel-footer text-center">
                             <button type="button" class="btn btn-default" id="settings_cancel_btn">Close</button>
-                            <input form="settingsForm" type="submit" class="btn btn-primary" id="settings_save_btn" value="Save"/>
+                            <input form="settingsForm" type="submit" class="btn btn-primary" id="settings_save_btn" data-tkey-value="save" value="Save"/>
                         </div>
                     </div>
-                </form>
+                </div>
             </div>
         </div>