From 5430d51b092a4a1cdf7f32233e38e5350995956c Mon Sep 17 00:00:00 2001
From: pliablepixels <pliablepixels@gmail.com>
Date: Wed, 25 May 2016 15:17:48 -0400
Subject: #261 - more intl

Former-commit-id: 0976517fc45eff4876eba6fd945cccea15b69f42
---
 www/templates/devoptions.html              | 40 ++++++++++-----------
 www/templates/events-date-time-filter.html | 14 ++++----
 www/templates/events-graphs.html           |  3 ++
 www/templates/events-modal.html            |  6 ++--
 www/templates/events-popover.html          |  8 ++---
 www/templates/eventserversettings.html     | 35 +++++-------------
 www/templates/first-use.html               | 12 ++++---
 www/templates/help.html                    |  6 ++--
 www/templates/help/montage-help.html       |  2 ++
 www/templates/important_message.html       | 14 ++++----
 www/templates/log.html                     |  4 +--
 www/templates/login.html                   | 30 ++++++++--------
 www/templates/lowversion.html              | 12 +++----
 www/templates/monitors-modal.html          |  2 +-
 www/templates/monitors.html                | 24 ++++++-------
 www/templates/montage-history.html         | 24 ++++++-------
 www/templates/montage.html                 |  2 +-
 www/templates/news.html                    |  4 +--
 www/templates/state.html                   | 16 ++++-----
 www/templates/timeline-modal.html          |  6 ++--
 www/templates/timeline-popover.html        | 12 +++----
 www/templates/timeline.html                |  8 ++---
 www/templates/wizard.html                  | 58 +++++++++++++++---------------
 www/templates/zm-portal-login.html         |  6 ++--
 24 files changed, 168 insertions(+), 180 deletions(-)

(limited to 'www/templates')

diff --git a/www/templates/devoptions.html b/www/templates/devoptions.html
index bec45385..c9544fbf 100644
--- a/www/templates/devoptions.html
+++ b/www/templates/devoptions.html
@@ -1,4 +1,4 @@
-<ion-view view-title="Dev. Settings">
+<ion-view view-title="{{'kDevOptions' | translate}}">
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
 
@@ -14,11 +14,11 @@
     <ion-content class="padding">
         <div class="list list-inset">
             <span style="color:rgb(100,100,100)">
-                <i class="ion-android-settings" style="font-size:150%"></i> Developer Options for {{loginData.serverName}}
+                <i class="ion-android-settings" style="font-size:150%"></i> {{'kDeveloperOptionsFor'|translate}} {{loginData.serverName}}
             </span>
 
             <div class="item item-input-inset">
-                Frame update (sec.)&nbsp;
+                {{'kFrameUpdate'|translate}} ({{'kSec'|translate}}.)&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="min is 1s" ng-model="loginData.refreshSec">
                 </label>
@@ -26,12 +26,12 @@
 
 
             <label>
-                <ion-toggle ng-model="loginData.use24hr" ng-checked="{{loginData.use24hr}}" toggle-class="toggle-calm">enable 24hr time format</ion-toggle>
+                <ion-toggle ng-model="loginData.use24hr" ng-checked="{{loginData.use24hr}}" toggle-class="toggle-calm">{{'kEnable24hr' | translate}}</ion-toggle>
             </label>
 
             <div ng-if="$root.platformOS=='android'">
                 <label>
-                    <ion-toggle ng-model="loginData.exitOnSleep" ng-checked="{{loginData.exitOnSleep}}" toggle-class="toggle-calm">exit app in background</ion-toggle>
+                    <ion-toggle ng-model="loginData.exitOnSleep" ng-checked="{{loginData.exitOnSleep}}" toggle-class="toggle-calm">{{'kExitAppBackground' | translate}}</ion-toggle>
                 </label>
             </div>
 
@@ -50,7 +50,7 @@
             -->
 
             <div class="item item-input-inset">
-                Max monitors in montage&nbsp;
+                {{'kMaxMonitorsMontage' | translate }}&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="be careful" ng-model="loginData.maxMontage">
                 </label>
@@ -66,21 +66,21 @@
             -->
 
             <div class="item item-input-inset">
-                Montage image scale(%)&nbsp;
+                {{'kMontageImageScale' | translate}}(%)&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="max is 70" ng-model="loginData.montageQuality">
                 </label>
             </div>
 
             <div class="item item-input-inset">
-                Event single image scale(%)&nbsp;
+                {{'kEventSingleImageScale' | translate}}(%)&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="" ng-model="loginData.singleImageQuality">
                 </label>
             </div>
 
             <div class="item item-input-inset">
-                resume delay(ms)&nbsp;
+                {{'kResumeDelay' | translate}}(ms)&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="" ng-model="loginData.resumeDelay">
 
@@ -89,14 +89,14 @@
             </div>
 
             <div class="item item-input-inset">
-                Event Montage image scale(%)&nbsp;
+                {{'kEventMontageImageScale'|translate}}(%)&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="" ng-model="loginData.montageHistoryQuality">
                 </label>
             </div>
 
             <div class="item item-input-inset">
-                Max. items for Timeline&nbsp;
+                {{'kMaxItemsForTimeline' | translate}}&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="" ng-model="loginData.graphSize">
                     <br/>
@@ -104,9 +104,9 @@
                 </label>
                 <br/>
             </div>
-            
+
             <div class="item item-input-inset">
-                Minimum Alarm Count&nbsp;
+                {{'kMinAlarmCount' | translate}}&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="" ng-model="loginData.minAlarmCount">
                     <br/>
@@ -118,36 +118,36 @@
             <div class="item" style="background-color:#C8F7C5" ng-if="loginData.graphSize > 5000">
                 <label class="animated fadeInDown item-text-wrap">
 
-                    A large value can affect timeline performance. If you find timeline performance slow, try reducing the value to 200 and work your way up from there.
+                    {{'kWarningLargeTimeline' | translate}}
 
                 </label>
             </div>
 
             <label>
 
-                <ion-toggle ng-model="loginData.enableLogs" ng-checked="{{loginData.enableLogs}}" toggle-class="toggle-calm">Enable logs</ion-toggle>
+                <ion-toggle ng-model="loginData.enableLogs" ng-checked="{{loginData.enableLogs}}" toggle-class="toggle-calm">{{'kEnableLogs' | translate}}</ion-toggle>
             </label>
 
             <label>
 
-                <ion-toggle ng-if="loginData.enableLogs" ng-model="loginData.enableDebug" ng-checked="{{loginData.enableDebug}}" toggle-class="toggle-calm">Enable debug logs</ion-toggle>
+                <ion-toggle ng-if="loginData.enableLogs" ng-model="loginData.enableDebug" ng-checked="{{loginData.enableDebug}}" toggle-class="toggle-calm">{{'kEnableDebug' | translate}}</ion-toggle>
             </label>
 
             <label>
-                <ion-toggle ng-model="loginData.canSwipeMonitors" ng-checked="{{loginData.canSwipeMonitors}}" toggle-class="toggle-calm">Swipe to change monitors</ion-toggle>
+                <ion-toggle ng-model="loginData.canSwipeMonitors" ng-checked="{{loginData.canSwipeMonitors}}" toggle-class="toggle-calm">{{'kSwipeToChangeMon' | translate}}</ion-toggle>
             </label>
 
             <label>
-                <ion-toggle ng-model="loginData.persistMontageOrder" ng-checked="{{loginData.persistMontageOrder}}" toggle-class="toggle-calm">Persist hidden monitors</ion-toggle>
+                <ion-toggle ng-model="loginData.persistMontageOrder" ng-checked="{{loginData.persistMontageOrder}}" toggle-class="toggle-calm">{{'kPersistHidden' | translate}}</ion-toggle>
             </label>
 
 
             <label>
-                <ion-toggle ng-model="loginData.enableh264" ng-checked="{{loginData.enableh264}}" toggle-class="toggle-calm"> H264 Video support</ion-toggle>
+                <ion-toggle ng-model="loginData.enableh264" ng-checked="{{loginData.enableh264}}" toggle-class="toggle-calm"> {{'kH264VideoSupport' | translate}}</ion-toggle>
             </label>
 
             <label>
-                <ion-toggle ng-model="loginData.enableBlog" ng-checked="{{loginData.enableBlog}}" toggle-class="toggle-calm"> enable news updates</ion-toggle>
+                <ion-toggle ng-model="loginData.enableBlog" ng-checked="{{loginData.enableBlog}}" toggle-class="toggle-calm"> {{'kEnableNewsUpdates' | translate}}</ion-toggle>
             </label>
 
 
diff --git a/www/templates/events-date-time-filter.html b/www/templates/events-date-time-filter.html
index f2e328e3..465f79e5 100644
--- a/www/templates/events-date-time-filter.html
+++ b/www/templates/events-date-time-filter.html
@@ -1,32 +1,32 @@
-<ion-view view-title="Filter Events">
+<ion-view view-title="{{'kFilterEvents' | translate}}">
 
 
 
     <ion-content>
         <label class="item item-input">
-            <span class="input-label">From Date:</span>
+            <span class="input-label">{{'kFromDate'|translate}}:</span>
             <input type="date" ng-model="$root.fromDate">
         </label>
         <label class="item item-input">
-                   <span class="input-label">From Time:</span>
+                   <span class="input-label">{{'kFromTime'|translate}}</span>
                     <input type="time" ng-model="$root.fromTime">
         </label>
         <label class="item item-input">
-                    <span class="input-label">To Date</span>
+                    <span class="input-label">{{'kToDate'|translate}}</span>
                     <input type="date" ng-model="$root.toDate">
         </label>
         <label class="item item-input">
-                    <span class="input-label">To Time</span>
+                    <span class="input-label">{{'kToTime'|translate}}</span>
                     <input type="time" ng-model="$root.toTime">
          </label>
 
         <br/>
         <center>
               <button class="button"
-                                ng-click="saveFilters();" > Save
+                                ng-click="saveFilters();" > {{'kSave'|translate}}
                         </button>
         <button class="button"
-                                ng-click="removeFilters();" > Reset
+                                ng-click="removeFilters();" > {{'kReset'|translate}}
                         </button>
 
 
diff --git a/www/templates/events-graphs.html b/www/templates/events-graphs.html
index 787ce857..2f7b965d 100644
--- a/www/templates/events-graphs.html
+++ b/www/templates/events-graphs.html
@@ -1,3 +1,6 @@
+
+<!----- NOT USED -------->
+
 <ion-view view-title="Monitor Event Summary" cache-view="false">
 
     <ion-nav-buttons side="left">
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index 1861e273..63c31092 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -18,7 +18,7 @@
                             <img image-spinner-src="{{loginData.streamingurl}}/nph-zms?source=event&mode=jpeg&event={{eventId}}&frame=1&replay={{currentStreamMode}}&rate=100&connkey={{connKey}}&scale={{singleImageQuality}}{{$root.authSession}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-double-tap="closeModal();" />
 
                             <div ng-if="isPaused" style="position:absolute; top:50%; left:50%;white-space:nowrap;overflow:hidden;z-index:999" class="header-paused">
-                                &nbsp;<i class="ion-pause"></i> paused&nbsp;
+                                &nbsp;<i class="ion-pause"></i> {{'kPaused' | translate}}&nbsp;
                             </div>
 
                         </div>
@@ -70,7 +70,7 @@
                     </div>
                 </div>
                 <div id="event_rate_text">
-                    @{{currentRate}}x at:{{currentProgress.progress}}s
+                    @{{currentRate}}x {{'kAt' | translate}}:{{currentProgress.progress}}s
                 </div>
             </div>
 
@@ -104,7 +104,7 @@
 
 
 
-    <div class="events-range-modal-text">showing event: {{d_eventId}}</div>
+    <div class="events-range-modal-text">{{'kShowingEvent' | translate}}: {{d_eventId}}</div>
 
     <div id="flyoutmenu" style="position:absolute;bottom:100px;left:10px">
         <ul>
diff --git a/www/templates/events-popover.html b/www/templates/events-popover.html
index eec4f52d..e48b290e 100644
--- a/www/templates/events-popover.html
+++ b/www/templates/events-popover.html
@@ -1,17 +1,17 @@
 <ion-popover-view class="fit">
         <ion-content>
           <div class="list" ng-click="popover.hide()">
-            <a class="item" ng-href="" ng-click="popover.hide();$state.go('events-date-time-filter');">Filter by Date/Time</a>
+            <a class="item" ng-href="" ng-click="popover.hide();$state.go('events-date-time-filter');">{{'kFilterByDateTime' | translate}}</a>
 
             <!-- <a class="item" ng-href="" ng-click=" popover.hide();$state.go('events-graphs');" >
               Event Graphs
             </a>-->
             <a class="item" ng-href="" ng-click="popover.hide();doRefresh();">
-              Refresh
+              {{'kRefresh' | translate}}
             </a>
             
-            <a class="item" ng-href="" ng-click="popover.hide();toggleMinAlarmFrameCount();" ng-if="loginData.enableAlarmCount">Show all events</a>
-             <a class="item" ng-href="" ng-click="popover.hide();toggleMinAlarmFrameCount();" ng-if="!loginData.enableAlarmCount"> Show alarmed events</a>
+            <a class="item" ng-href="" ng-click="popover.hide();toggleMinAlarmFrameCount();" ng-if="loginData.enableAlarmCount">{{'kShowAllEvents' | translate}}</a>
+             <a class="item" ng-href="" ng-click="popover.hide();toggleMinAlarmFrameCount();" ng-if="!loginData.enableAlarmCount"> {{'kShowAlarmedEvents' | translate}}</a>
           </div>
         </ion-content>
       </ion-popover-view>
diff --git a/www/templates/eventserversettings.html b/www/templates/eventserversettings.html
index de6f43ce..58c4777c 100644
--- a/www/templates/eventserversettings.html
+++ b/www/templates/eventserversettings.html
@@ -1,4 +1,4 @@
-<ion-view view-title="Event Server/{{loginData.serverName}}" cache-view="false">
+<ion-view view-title="{{'kEventServer' | translate}}/{{loginData.serverName}}" cache-view="false">
 
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
@@ -13,22 +13,22 @@
     <ion-content padding="true">
         
          <div class="list list-inset">
-        Please make sure your ZM settings are configured and saved before you configure the event server
+        {{'kEventServerConfig1' | translate }}
         </div>
         <ion-checkbox ng-model="loginData.isUseEventServer" ng-checked="{{loginData.isUseEventServer}}">use event server</ion-checkbox>
         
         
         <ion-item  ng-href="" ng-click="selectScreen()">
-            on tap, navigate to: {{defScreen}}
+            {{'kOnTapNavigate' | translate}}: {{defScreen}}
         </ion-item>
 
         <label class="item item-input item-floating-label" ng-if="loginData.isUseEventServer">
-            <span class="input-label">Event Server</span>
+            <span class="input-label">{{'kEventServer'}}</span>
             <input autocapitalize="none" autocomplete="off" autocorrect="off" type="text" placeholder="Event notification url" ng-model="loginData.eventServer">
 
         </label>
         
-            <ion-toggle ng-if="loginData.isUseEventServer" ng-model="loginData.disablePush"  ng-checked="{{loginData.disablePush}}" toggle-class="toggle-calm"  class="item-text-wrap">only use websockets<br/><p>disables APNS/GCM</p></ion-toggle>
+            <ion-toggle ng-if="loginData.isUseEventServer" ng-model="loginData.disablePush"  ng-checked="{{loginData.disablePush}}" toggle-class="toggle-calm"  class="item-text-wrap">{{'kOnlyUseWebSocket'| translate }}<br/><p>{{'kDisablePush' | translate }}</p></ion-toggle>
         
         <!--
              <ion-toggle  ng-model="loginData.defaultPushSound" toggle-class="toggle-calm" class="item-text-wrap" ng-checked="{{loginData.defaultPushSound}}">use system sound<p>please save and restart app</p></ion-toggle>
@@ -49,7 +49,7 @@
                       ng-show="isGroupShown(monitor)">
                 <span class="item-checkbox">
                 
-                    report events
+                    {{'kReportEvents' | translate }}
                     <label class="checkbox">
                         <input type="checkbox" ng-model="monitor.Monitor.isChecked" ng-checked="monitor.Monitor.isChecked">
                     </label>
@@ -62,7 +62,7 @@
                       <label class="item-input-wrapper" >
                         <input type="tel"  placeholder="sec." ng-model="monitor.Monitor.reportingInterval">
                     </label>
-                    &nbsp;minimum interval
+                    &nbsp;{{'kMinimumIntervals' | translate}}
                   
                     
                 </div>
@@ -75,29 +75,10 @@
         
         
 
-       <!-- <ul class="list" ng-if="check.isUseEventServer">
-http://codepen.io/anon/pen/QbVveV
-            <div class="item-icon-right">
-                <li class="item item-checkbox" ng-repeat="monitor in monitors">
-                    <label class="checkbox">
-                        <input type="checkbox" ng-model="monitor.Monitor.isChecked" ng-checked="monitor.Monitor.isChecked">
-                    </label>
-                    {{monitor.Monitor.Name}}
-
-                    <i class="icon ion-ios-arrow-down"></i>
-                </li>
-            </div>
-
-
-        </ul>-->
+   
 
     </ion-content>
 </ion-view>
 
 
 
-<!--
- <label class="checkbox">
-                    <input type="checkbox" ng-model="monitor.Monitor.isChecked" ng-checked="monitor.Monitor.isChecked">
-                </label>
-                {{monitor.Monitor.Name}}-->
\ No newline at end of file
diff --git a/www/templates/first-use.html b/www/templates/first-use.html
index f9fb050c..c0553333 100644
--- a/www/templates/first-use.html
+++ b/www/templates/first-use.html
@@ -1,4 +1,4 @@
-<ion-view view-title="zmNinja" hide-nav-bar="true" hide-back-button="true" cache-view="false">
+<ion-view view-title="{{$root.appName}}" hide-nav-bar="true" hide-back-button="true" cache-view="false">
     <ion-content class="pin-background">
         <div style="margin-left:20px; margin-right:20px">
             <center>
@@ -13,8 +13,9 @@
                 <span style="color:white">
                     <h2 style="color:white" >Hi There!</h2>
                     <br/>
-                    <h4 style="color:white">Thanks for using zmNinja. <br/><br/>
-                    I need to know your ZoneMinder login and path details to get started.</h4>
+                    <h4 style="color:white">{{'kThanksForUsing' | translate}} {{$root.appName}}. <br/><br/>
+                        {{'kNeedToKnow' | translate}}
+                    </h4>
                     <br/>
                     
                     </span>
@@ -23,11 +24,12 @@
                  
                     
                     <button  class="button icon icon-left ion-wand button-stable animated bounceInUp" ng-click="goToWizard()">
-                        Wizard
+                        {{'kWizard' | translate}}
                     </button>
                     
                     <button  class="button icon icon-left ion-university button-stable animated bounceInUp" ng-click="goToLogin()">
-                        Expert
+                        {{'kExpert' | translate }}
+                        
                     </button>
                     
                 </div>
diff --git a/www/templates/help.html b/www/templates/help.html
index ef4ddd83..8d9c7c04 100644
--- a/www/templates/help.html
+++ b/www/templates/help.html
@@ -10,7 +10,7 @@
 
     <ion-content class="padding" overflow-scroll="false">
        
-        <p><small>zmNinja v{{zmAppVersion}}</small></p>
+        <p><small>{{$root.appName}} v{{zmAppVersion}}</small></p>
         <div class="list">
 
             <ion-item class="item-text-wrap">
@@ -20,7 +20,7 @@
             <ion-item class="item-text-wrap">
                 <h2><b> What do I enter for ZM Portal URL, Base path to cgi-bin and ZM API URL?</b> </h2>
                 <ul>
-                    zmNinja now has a wizard that tries to detect your settings. This may fail if you have a custom install with non standard paths.
+                    {{$root.appName}} now has a wizard that tries to detect your settings. This may fail if you have a custom install with non standard paths.
                     <li><i class="ion-android-arrow-dropright"></i> ZM Portal URL: The URL using which you can access ZM
                         <p>(example http://myserver.ddns.net/zm)</p>
                     </li>
@@ -44,7 +44,7 @@
 
 
             <ion-item class="item-text-wrap">
-                <h2> <b>Everything works! but live streaming does not </b></h2> Check if streaming works in the web interface. If it does not work, zmNinja won't work either. Fix ZM first. If streaming in ZM works, go to zmNinja settings and fix your cgi-bin path. the automatic path that is filled in won't work. Here is a hint, go to zoneminder->options->paths and check the value of the cgi-bin path - your zmNinja path will be "base path of your server" + cgi-bin path.
+                <h2> <b>Everything works! but live streaming does not </b></h2> Check if streaming works in the web interface. If it does not work, {{$root.appName}} won't work either. Fix ZM first. If streaming in ZM works, go to {{$root.appName}} settings and fix your cgi-bin path. the automatic path that is filled in won't work. Here is a hint, go to zoneminder->options->paths and check the value of the cgi-bin path - your {{$root.appName}} path will be "base path of your server" + cgi-bin path.
             </ion-item>
 
 
diff --git a/www/templates/help/montage-help.html b/www/templates/help/montage-help.html
index f9d6955f..4a01153e 100644
--- a/www/templates/help/montage-help.html
+++ b/www/templates/help/montage-help.html
@@ -1,3 +1,5 @@
+<!--- NOT USED -->
+
 <ion-popover-view style="width:90%">
     <ion-header-bar class="item item-divider">
                 Montage Help
diff --git a/www/templates/important_message.html b/www/templates/important_message.html
index a97f1ada..bd3274f5 100644
--- a/www/templates/important_message.html
+++ b/www/templates/important_message.html
@@ -1,4 +1,4 @@
-<ion-view view-title="zmNinja" hide-nav-bar="false" hide-back-button="false" cache-view="false">
+<ion-view view-title="{{$root.appName}}" hide-nav-bar="false" hide-back-button="false" cache-view="false">
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
 
@@ -15,17 +15,17 @@
 
                 <br/>
                 <span style="color:white">
-                    <h2 style="color:white" class="animated bounce">Important Message</h2>
+                    <h2 style="color:white" class="animated bounce">{{'kImpMsg1' | translate}}</h2>
                     <br/>
-                    <h4 style="color:white">I'd appreciate if you upgraded ZoneMinder</h4>
+                    <h4 style="color:white">{{'kImpMsg2' | translate}}</h4>
                     <br/>
-                    You are running v{{currentVersion}}.<br/> v{{recommendedVersion}} has some important fixes that enhance the API amongst other things. This is required to avail of the new alarm APIs and other new features.
+                    {{'kImpMsg3' | translate}} v{{currentVersion}}.<br/> v{{recommendedVersion}} {{'kImpMsg4' | translate}}
                     <br/>
-                    Reported Version: <b>v{{currentVersion}}</b><br/>
-                     Recommended Version:<b>v{{recommendedVersion}}</b><br/><br/>
+                    {{'kImpMsg5' | translate}}: <b>v{{currentVersion}}</b><br/>
+                     {{'kImpMsg6' | translate}}:<b>v{{recommendedVersion}}</b><br/><br/>
                     
                     <button  class="button button-stable animated bounceInUp" ng-click="openMenu()">
-                    Ok, got it
+                    {{'kImpMsg7' | translate}}
                     </button>
             
                     
diff --git a/www/templates/log.html b/www/templates/log.html
index 37b85d1b..1a2d8053 100644
--- a/www/templates/log.html
+++ b/www/templates/log.html
@@ -1,4 +1,4 @@
-<ion-view view-title="Logs">
+<ion-view view-title="{{'kLogs' | translate}}">
 
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
@@ -23,7 +23,7 @@
     </ion-nav-buttons>
 
     <ion-content class="padding">
-        <b>zmNinja Version: {{zmAppVersion}}</b><br/>
+        <b>{{$root.appName}} {{'kVersion'|translate}}: {{zmAppVersion}}</b><br/>
         <!-- don't indent here -- its a pre-->
         <pre>{{zmLog.logString}}</pre>
     </ion-content>
diff --git a/www/templates/login.html b/www/templates/login.html
index fac74dbd..56f0c945 100644
--- a/www/templates/login.html
+++ b/www/templates/login.html
@@ -1,4 +1,4 @@
-<ion-view view-title="Settings" cache-view="false">
+<ion-view view-title="{{'kSettings' | translate}}" cache-view="false">
 
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
@@ -16,25 +16,25 @@
     <ion-content padding="true" >
         
          <div class="item item-input-inset">
-                Server Name:&nbsp;
+                {{'kServerName' | translate }}:&nbsp;
                 <label class="item-input-wrapper">
-                    <input type="text" placeholder="eg. My House" ng-model="loginData.serverName">
+                    <input type="text" placeholder="{{'kExampleServer' | translate}}" ng-model="loginData.serverName">
                 </label>
         </div>
         
         <div class="list list-inset">
             <span style="color:rgb(100,100,100)">
                 <i class="ion-android-home" style="font-size:150%"></i>
-                ZoneMinder Settings for {{loginData.serverName || "(unknown)"}}
+               {{'kZMSettingsFor' | translate}} {{loginData.serverName || ('kUnknown' | translate)}}
             </span>
             
             <div class="item">
-            <ion-checkbox ng-model="check.isUseAuth">use ZM authentication</ion-checkbox>
+            <ion-checkbox ng-model="check.isUseAuth">{{'kUseZmAuth' | translate }}</ion-checkbox>
             
             <div ng-if = "check.isUseAuth" >
                 
                 <label class="item item-input item-floating-label" >
-                    <span class="input-label">username</span>
+                    <span class="input-label">{{'kUserName'|translate}}</span>
                     <input autocapitalize="none" autocomplete="off"
                            autocorrect="off" type="text"
                            placeholder="username"
@@ -42,7 +42,7 @@
                 </label>
 
                 <label class="item item-input item-floating-label" >
-                    <span class="input-label">password</span>
+                    <span class="input-label">{{'kPassword' | translate}}</span>
                     <input type="password" placeholder="password"
                            ng-model="loginData.password">
                 </label>
@@ -50,7 +50,7 @@
                 
                 </div>
             <label class="item item-input item-floating-label" >
-                <span class="input-label">ZM portal url</span>
+                <span class="input-label">{{'kPortalUrl' | translate}}</span>
                 <input autocapitalize="none" autocomplete="off"
                        autocorrect="off" type="text"
                        placeholder="ZM portal url "
@@ -66,7 +66,7 @@
                     <!--<span style="float:right;margin-top:-7px;background-color:#6d0909;color:#fff;font-size:14px;opacity:0.7;width:90px;border-radius: 0px 0px 5px 5px;" on-tap="detectCgi();">&nbsp;&nbsp;&nbsp;<i class="ion-wand"></i>discover</span>-->
                 
 
-                <span class="input-label">path to cgi-bin</span>
+                <span class="input-label">{{'kPathToCgi' | translate}}</span>
            
                     <input autocapitalize="none" autocomplete="off"
                            autocorrect="off" type="text"
@@ -78,7 +78,7 @@
                
             
             <label class="item item-input item-floating-label" >
-                <span class="input-label">ZM api url</span>
+                <span class="input-label">{{'kApiUrl' | translate}}</span>
                 <input autocapitalize="none"
                        autocomplete="off" autocorrect="off"
                        type="text" placeholder="ZM api url"
@@ -88,13 +88,13 @@
             <a class="item item-icon-right" href="" ng-click="selectFallback()">
                 <i class="icon ion-ios-arrow-right">
                 </i>
-                Fallback configuration<p>{{loginData.fallbackConfiguration}}</p>
+                {{'kFallback' | translate}}<p>{{loginData.fallbackConfiguration}}</p>
             </a>     
             
             <a class="item item-icon-right" href="" ng-click="eventServerSettings()">
                 <i class="icon ion-ios-arrow-right">
                 </i>
-                Event Server 
+                {{'kEventServer' | translate}}
             </a>
             
             
@@ -103,14 +103,14 @@
 
                 <ion-toggle ng-model="loginData.usePin" ng-change="pinPrompt();"
                             ng-checked="{{loginData.usePin}}"
-                            toggle-class="toggle-calm">Password protect</ion-toggle>
+                            toggle-class="toggle-calm">{{'kPassword' | translate}} {{'kProtect'|translate}}</ion-toggle>
                 </label>
             </div>
             
             <label>
             <ion-toggle ng-model="loginData.useSSL"
                         ng-checked="{{loginData.useSSL}}"
-                        toggle-class="toggle-calm">Use SSL</ion-toggle>
+                        toggle-class="toggle-calm">{{'kUseSSL' | translate}}</ion-toggle>
             </label>
 
             <div ng-if="$root.platformOS != 'desktop'">
@@ -118,7 +118,7 @@
             
             <ion-toggle ng-model="loginData.keepAwake"
                         ng-checked="{{loginData.keepAwake}}"
-                        toggle-class="toggle-calm">Keep display on<p>(When viewing footage)</p>
+                        toggle-class="toggle-calm">{{'kAwake1'|translate}}<p>{{'kAwake2'| translate}}</p>
             </ion-toggle>
             </label>
             </div>
diff --git a/www/templates/lowversion.html b/www/templates/lowversion.html
index 3b50683b..d9a50986 100644
--- a/www/templates/lowversion.html
+++ b/www/templates/lowversion.html
@@ -1,5 +1,5 @@
-<ion-view view-title="zmNinja" hide-nav-bar="true" hide-back-button="true" cache-view="false">
-    <!--<ion-view view-title="zmNinja" hide-nav-bar="false" hide-back-button="true" cache-view="false">-->
+<ion-view view-title="{{$root.appName}}" hide-nav-bar="true" hide-back-button="true" cache-view="false">
+  
     <ion-content class="pin-background">
         <div style="margin-left:20px; margin-right:20px">
             <center>
@@ -12,12 +12,12 @@
 
                 <br/>
                 <span style="color:white">
-                    <h2 style="color:white" class="animated bounce">ZoneMinder upgrade needed</h2>
+                    <h2 style="color:white" class="animated bounce">{{'kZMUpgradeNeeded' | translate}}</h2>
                     <br/>
-                    <h4 style="color:white">I am incompatible with your ZoneMinder version</h4>
+                    <h4 style="color:white">{{'kVersionIncompatible' | translate }}</h4>
                     <br/>
-                    Reported Version: <b>{{currentVersion}}</b><br/>
-                    Minimum Required Version:<b>{{requiredVersion}}</b><br/>
+                    {{'kReportedVersion' | translate}}: <b>{{currentVersion}}</b><br/>
+                    {{'kMinVersion' | translate}}:<b>{{requiredVersion}}</b><br/>
                     
                     
                     </span>
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index f1032907..527b6307 100644
--- a/www/templates/monitors-modal.html
+++ b/www/templates/monitors-modal.html
@@ -59,7 +59,7 @@
                 </div>
                 <br/>
                 <a class="button button-small icon ion-stop  button-assertive" href="" ng-click="controlPTZ(monitorId, ptzStopCommand);"></a>
-                <a class="button button-small button-royal" href="" ng-click="togglePresets();">presets</a>
+                <a class="button button-small button-royal" href="" ng-click="togglePresets();">{{'kPresets' | translate}}</a>
             </div>
 
         </div>
diff --git a/www/templates/monitors.html b/www/templates/monitors.html
index a7a5a25f..8cf41df1 100644
--- a/www/templates/monitors.html
+++ b/www/templates/monitors.html
@@ -1,4 +1,4 @@
-<ion-view view-title="Monitors" cache="false">
+<ion-view view-title="{{'kMonitors' | translate}}" cache="false">
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()">
         </button>
@@ -30,28 +30,28 @@
                     </div>
 
 
-                    <p>Mode :{{monitor.Monitor.Function}}<br/>
-                        Resolution: {{monitor.Monitor.Width}}*{{monitor.Monitor.Height}}<br/>
-                        Max FPS: {{monitor.Monitor.MaxFPS}}
-                        <br/> Alarm Max FPS:{{monitor.Monitor.AlarmMaxFPS}}
-                        <br/> Alarm Frame Count: {{monitor.Monitor.AlarmFrameCount}}
-                        <br/> Status: {{monitor.Monitor.isRunningText}}
-                        <br/> Id: {{monitor.Monitor.Id}}
+                    <p>{{'kMode' | translate}} :{{monitor.Monitor.Function}}<br/>
+                        {{'kResolution' | translate}}: {{monitor.Monitor.Width}}*{{monitor.Monitor.Height}}<br/>
+                        {{'kMaxFPS' | translate}}: {{monitor.Monitor.MaxFPS}}
+                        <br/> {{'kAlarmMaxFPS' | translate}}:{{monitor.Monitor.AlarmMaxFPS}}
+                        <br/> {{'kAlarmFrameCount' |translate}}: {{monitor.Monitor.AlarmFrameCount}}
+                        <br/> {{'kStatus' | translate}}: {{monitor.Monitor.isRunningText}}
+                        <br/> {{'kId' | translate}}: {{monitor.Monitor.Id}}
                         <br/>
                         <br/>
                     </p>
 
                     <div style="float:right;">
                         <a class="button button-small icon icon-left icon ion-gear-a"
-                           href="" ng-click="changeConfig(monitor.Monitor.Name, monitor.Monitor.Id,monitor.Monitor.Enabled,monitor.Monitor.Function);">Configuration</a>
-                        <a class="button button-small icon icon-left ion-calendar" href="#/events/{{monitor.Monitor.Id}}">Events</a>
-                        <a class="button button-small icon icon-left ion-ios-eye" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey,  monitor)">Live View</a>
+                           href="" ng-click="changeConfig(monitor.Monitor.Name, monitor.Monitor.Id,monitor.Monitor.Enabled,monitor.Monitor.Function);">{{'kConfiguration' | translate}}</a>
+                        <a class="button button-small icon icon-left ion-calendar" href="#/events/{{monitor.Monitor.Id}}">{{'kEvents'|translate}}</a>
+                        <a class="button button-small icon icon-left ion-ios-eye" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey,  monitor)">{{'kLiveView' | translate}}</a>
                     </div>
                 </div>
             </div>
 
         <ion-item ng-show="!monitors.length">
-        No monitors to display
+        {{'kNoMonitors' | translate}}
         </ion-item>
     </ion-content>
 </ion-view>
diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html
index aed56100..d495b482 100644
--- a/www/templates/montage-history.html
+++ b/www/templates/montage-history.html
@@ -1,4 +1,4 @@
-<ion-view view-title="Event Montage" cache-view="false" hide-nav-bar="{{minimal}}">
+<ion-view view-title="{{'kEventMontage' | translate}}" cache-view="false" hide-nav-bar="{{minimal}}">
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
 
@@ -26,12 +26,12 @@
 
 
         <div class="timeline_text" ion-datetime-picker title="From" am-pm={{!loginData.use24hr}} ng-model="datetimeValueFrom.value" ng-change="dateChanged()">
-            <b>From: </b>{{datetimeValueFrom.value | date: timeFormat}}
+            <b>{{'kFrom' | translate}} : </b>{{datetimeValueFrom.value | date: timeFormat}}
         </div>
 
         <div class="timeline_text" ion-datetime-picker am-pm={{!loginData.use24hr}} ng-model="datetimeValueTo.value" ng-change="dateChanged()">
-            <b>To: </b>{{datetimeValueTo.value | date: timeFormat}} @ {{sliderVal.rate}}x
-            <div ng-if="$root.platformOS != 'ios'">(max of 5 monitors - chrome limit)</div>
+            <b>{{'kTo' | translate}}: </b>{{datetimeValueTo.value | date: timeFormat}} @ {{sliderVal.rate}}x
+            <div ng-if="$root.platformOS != 'ios'">({{'kChromeMax' | translate}})</div>
         </div>
 
 
@@ -89,7 +89,7 @@
                             <div  ng-if="monitor.isPaused" style="position:absolute; top:50%; left:50%;white-space:nowrap;overflow:hidden;" 
                              class="header-paused">
                             &nbsp;<i class="ion-pause"></i>
-                               paused&nbsp;
+                               {{'kPaused' | translate}}&nbsp;
                             </div>
                             
                             <!--<div ng-if="!monitor.isPaused"
@@ -109,7 +109,7 @@
         </div>
 
         <ion-item ng-show="!MontageMonitors.length">
-            No monitors to display.
+           {{'kNoMonitors' | translate }}
         </ion-item>
 
 
@@ -141,7 +141,7 @@
             <i class="icon ion-chevron-up"></i>
         </ion-pull-up-handle>
         <ion-pull-up-bar>
-            <h1 class="title" ion-pull-up-trigger>Event History</h1>
+            <h1 class="title" ion-pull-up-trigger>{{'kEventMontage' | translate}}</h1>
         </ion-pull-up-bar>
         <ion-pull-up-content scroll="true">
 
@@ -149,7 +149,7 @@
             <div class="list list-inset">
 
 
-                <ion-toggle ng-model="sliderVal.hideNoEvents" ng-checked="{{sliderVal.hideNoEvents}}" toggle-class="toggle-dark"><span class="item-text-wrap">Hide monitors without events</span></ion-toggle>
+                <ion-toggle ng-model="sliderVal.hideNoEvents" ng-checked="{{sliderVal.hideNoEvents}}" toggle-class="toggle-dark"><span class="item-text-wrap">{{'kHideMonsWithoutEvents' | translate}}</span></ion-toggle>
 
 
 
@@ -171,21 +171,21 @@
                         <br/>
                     </div>
                     <div class="col col-25" style="background-color:#AEA8D3;text-align:center">
-                        speed
+                        {{'kSpeed' | translate }}
                     </div>
                 </div>
 
-                <div class="item item-divider">Timeline</div>
+                <div class="item item-divider">{{'kTimeline' | translate}}</div>
 
                 <ion-item>
                     <div ion-datetime-picker title="From" am-pm={{!loginData.use24hr}} ng-model="datetimeValueFrom.value">
-                        <b>From: </b>{{datetimeValueFrom.value | date: timeFormat}}
+                        <b>{{'kFrom' | translate }}: </b>{{datetimeValueFrom.value | date: timeFormat}}
                     </div>
                 </ion-item>
 
                 <ion-item>
                     <div ion-datetime-picker am-pm={{!loginData.use24hr}} ng-model="datetimeValueTo.value">
-                        <b>To: </b>{{datetimeValueTo.value | date: timeFormat}}
+                        <b>{{'kTo' | translate}}: </b>{{datetimeValueTo.value | date: timeFormat}}
                     </div>
                 </ion-item>
 
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 57f1d629..26403da4 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -1,4 +1,4 @@
-<ion-view view-title="Montage" cache-view="false" hide-nav-bar="{{minimal}}">
+<ion-view view-title="{{'kMontage' | translate}}" cache-view="false" hide-nav-bar="{{minimal}}">
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
          <button class="button button-icon button-clear ion-eye" ng-click="hideUnhide();">&nbsp;
diff --git a/www/templates/news.html b/www/templates/news.html
index 3052661c..3edb2a16 100644
--- a/www/templates/news.html
+++ b/www/templates/news.html
@@ -1,4 +1,4 @@
-<ion-view view-title="News">
+<ion-view view-title="{{'kNews' | translate}}">
 
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
@@ -22,7 +22,7 @@
             </span>
             
             <div ng-if="!newsItems.length">
-                <ion-item>Loading...</ion-item>
+                <ion-item>{{'kLoading' | translate}}...</ion-item>
             </div>
             
 
diff --git a/www/templates/state.html b/www/templates/state.html
index 13232413..5763c284 100644
--- a/www/templates/state.html
+++ b/www/templates/state.html
@@ -1,11 +1,11 @@
-<ion-view view-title="System Status" cache-view="false">
+<ion-view view-title="{{'kSystemStatus' | translate}}" cache-view="false">
 
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
         <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
     </ion-nav-buttons>
     <ion-content>
-        <ion-refresher pulling-text="Pull to reload data..."
+        <ion-refresher pulling-text="{{'kPullToReload' | translate}}..."
                        spinner="bubbles" on-refresh="doRefresh()"></ion-refresher>
         <ion-list>
             <ion-item>
@@ -14,7 +14,7 @@
                         <i class="ion-home" style="font-size:150%;"></i>
                     </div>
                     <div class="col">
-                        ZoneMinder is:
+                        ZoneMinder:
                     </div>
                     <div class="col" style="text-align:right; {{color}}">
                         {{zmRun}}
@@ -29,7 +29,7 @@
                     </div>
                     <div class="col">
 
-                        ZoneMinder load:
+                        ZoneMinder {{'kLoad' | translate}}:
                     </div>
                     <div class="col" style="text-align:right;">
                         {{zmLoad}}
@@ -63,12 +63,12 @@
                     <div class="row">
                         <div class="col text-center">
                             <a class="button button-small button-outline button-dark "
-                               ng-click="selectCustomState();" href="">Change State</a>
+                               ng-click="selectCustomState();" href="">{{'kChangeState'|translate}}</a>
                             <a class="button  button-small button-outline button-dark "
-                               ng-click="controlZM('restart');" href="">Restart</a>
+                               ng-click="controlZM('restart');" href="">{{'kRestart' | translate}}</a>
                             <a class="button  button-small button-outline  button-dark"
-                               href="" ng-click="controlZM('stop');">Stop</a>
-                            <a class="button  button-small button-outline button-dark" ng-click="controlZM('start');" href="">Start</a>
+                               href="" ng-click="controlZM('stop');">{{'kStop' | translate}}</a>
+                            <a class="button  button-small button-outline button-dark" ng-click="controlZM('start');" href="">{{'kStart' | translate}}</a>
                         </div>
                     </div>
                 </div>
diff --git a/www/templates/timeline-modal.html b/www/templates/timeline-modal.html
index c9a207d8..7893f0be 100644
--- a/www/templates/timeline-modal.html
+++ b/www/templates/timeline-modal.html
@@ -6,15 +6,15 @@
         <ion-content  ng-cloak on-double-tap="closeModal()" delegate-handle="timeline-modal-delegate">
 <div ng-controller="TimelineModalCtrl" >   
             <br/>
-            <div class="item item-divider">Event: {{eid}}
+            <div class="item item-divider">{{'kEvent' | translate}}: {{eid}}
                   <button class="button icon-left button-small  button-positive" style="float:right; opacity:0.7" ng-click="switchType()">
                 <i class="ion-shuffle"></i>
                 </button>
                 
             </div>
           
-            <center> <h5>Showing {{graphType}} frames </h5>
-                <p>double-tap exits. touch/mouse-over and drag over items to see frames</p>
+            <center> <h5>{{'kShowing' | translate}} {{graphType}} {{'kFrames' | translate}} </h5>
+                <p>{{'kTimelineMessage' | translate}}</p>
              
                 
                {{errorDetails}}
diff --git a/www/templates/timeline-popover.html b/www/templates/timeline-popover.html
index 7d8760a3..b5460f57 100644
--- a/www/templates/timeline-popover.html
+++ b/www/templates/timeline-popover.html
@@ -2,21 +2,21 @@
         <ion-content>
           <div class="list" ng-click="popover.hide()">
               
-            <a class="item" ng-href="" ng-click="popover.hide();toggleMinAlarmFrameCount();" ng-if="loginData.enableAlarmCount">Show all events</a>
-             <a class="item" ng-href="" ng-click="popover.hide();toggleMinAlarmFrameCount();" ng-if="!loginData.enableAlarmCount"> Show alarmed events</a>  
+            <a class="item" ng-href="" ng-click="popover.hide();toggleMinAlarmFrameCount();" ng-if="loginData.enableAlarmCount">{{'kShowAllEvents' | translate}}</a>
+             <a class="item" ng-href="" ng-click="popover.hide();toggleMinAlarmFrameCount();" ng-if="!loginData.enableAlarmCount"> {{'kShowAlarmedEvents' | translate}}</a>  
               
               
-            <a class="item" ng-href="" ng-click="popover.hide();buttonClicked(0);">Month</a>
+            <a class="item" ng-href="" ng-click="popover.hide();buttonClicked(0);">{{'kMonth' | translate}}</a>
 
             <a class="item" ng-href="" ng-click=" popover.hide();buttonClicked(1);" >
-              Week
+              {{'kWeek' | translate}}
             </a>
             <a class="item" ng-href="" ng-click="popover.hide();buttonClicked(2);">
-              Day
+              {{'kDay' | translate}}
             </a>
 
               <a class="item" ng-href="" ng-click="popover.hide();buttonClicked(3);">
-              Custom Range
+              {{'kCustomRange' | translate}}
             </a>
 
               
diff --git a/www/templates/timeline.html b/www/templates/timeline.html
index cbc4084f..2f8e6481 100644
--- a/www/templates/timeline.html
+++ b/www/templates/timeline.html
@@ -1,5 +1,5 @@
 <meta name="format-detection" content="telephone=no" />
-<ion-view title="Timeline" cache-view="false">
+<ion-view title="{{'kTimeline' | translate}}" cache-view="false">
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
 
@@ -26,8 +26,8 @@
     <ion-content>
         <div style="padding-left:15px; font-size:10px; color:grey">
 
-        {{prettify(fromDate)}} - {{prettify(toDate)}} (only displaying last {{maxItems}} events) 
-        <strong><br/>tap:view event, double-tap:view frame graph</strong>
+        {{prettify(fromDate)}} - {{prettify(toDate)}} ({{'kTimelineOnlyDisplaying1' | translate:translationData}}) 
+        <strong><br/>{{'kTimelineControlDisplay'|translate}}</strong>
             </div>
 
         <ion-spinner icon="spiral" style="position:absolute; top:50%;left:50%" ng-if="!graphLoaded"></ion-spinner>  
@@ -35,7 +35,7 @@
         <div ng-if="!graphLoaded">
             <br/><br/>
             <center>
-                <p>working on graph data...</p>
+                <p>{{'kWorkingOnGraph' | translate}}...</p>
             </center>
         </div>
         
diff --git a/www/templates/wizard.html b/www/templates/wizard.html
index 7eab6f3e..dab46d02 100644
--- a/www/templates/wizard.html
+++ b/www/templates/wizard.html
@@ -1,4 +1,4 @@
-<ion-view view-title="Wizard" ng-cloak cache-view="false" >
+<ion-view view-title="{{'kWizard' | translate}}" ng-cloak cache-view="false" >
 
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
@@ -12,11 +12,11 @@
         <!-- portal url -->
         <wz-step wz-title="1" canexit="exitPortal">
             
-            <h4><i id="transition-delay" class="animated swing ion-wand" style="font-size:2em"></i> Welcome to zmWizard</h4>
+            <h4><i id="transition-delay" class="animated swing ion-wand" style="font-size:2em"></i> {{'kWelcomeWizard' | translate}}</h4>
             <img src="img/wizard.svg" width="100px" style="float:left"/>
-            <p>Configuring ZoneMinder can be a pain. Let's see if zmWizard can help.</p>
+            <p>{{'kWizConfigPain' | translate}}</p>
 
-            <h4>What is your Zoneminder portal url?</h4>
+            <h4>{{'kWizPortalUrl' | translate}}</h4>
             <label class="item item-input">
                 <input autocapitalize="none" autocomplete="off" type="text" placeholder="typically http://server/zm" ng-model="wizard.portalurl">
             </label>
@@ -25,13 +25,13 @@
 
 
             <div class="wizardtip" ng-show="wizard.tipshow">
-                <b>Tip: </b>Confused? You can easily find out your portal URL by noting down the url you see on your browser when accessing the ZoneMinder Console.<br/>
+                <b>{{'kWizTip' | translate}}: </b>{{'kWizPortalTip' | translate}}<br/>
 
                 <img src="img/portalurl.png" width="30%">
             </div>
 
             <br/>
-            <button class="button button-small icon icon-right ion-chevron-right" wz-next>Next</button>
+            <button class="button button-small icon icon-right ion-chevron-right" wz-next>{{'kNext' | translate}}</button>
             
 
         </wz-step>
@@ -39,34 +39,34 @@
    
         <!-- auth mode -->  
         <wz-step wz-title="2"  >
-            <h4>Portal Authentication</h4>
+            <h4>{{'kWizPortalAuth' | translate}}</h4>
             <!--<img src="img/wizard.svg" width="100px" style="float:left"/>-->
-            <p>Lets talk about how you have configured authentication If you have enabled authentication, toggle this button</p>
-            <ion-toggle ng-change="toggleAuth()" ng-model="wizard.useauth" ng-checked="wizard.useauth" toggle-class="toggle-calm">I use authentication</ion-toggle>
+            <p>{{'kWizPortalText' | translate}}</p>
+            <ion-toggle ng-change="toggleAuth()" ng-model="wizard.useauth" ng-checked="wizard.useauth" toggle-class="toggle-calm">{{'kWizUseAuth' | translate}}</ion-toggle>
 
-            <ion-toggle ng-show="wizard.useauth" ng-model="wizard.usezmauth" ng-checked="wizard.usezmauth" toggle-class="toggle-calm">I use ZM authentication</ion-toggle>
+            <ion-toggle ng-show="wizard.useauth" ng-model="wizard.usezmauth" ng-checked="wizard.usezmauth" toggle-class="toggle-calm">{{'kWizZMAuth' | translate}}</ion-toggle>
             
             <div ng-if="wizard.usezmauth">
                 <label class="item item-input item-floating-label" >
-                    <span class="input-label">user name</span>
+                    <span class="input-label">{{'kUserName' | translate}}</span>
                     <input autocapitalize="none" autocomplete="off" type="text" ng-model="wizard.zmuser" placeholder="zm auth username" >
                 </label>
-                <label class="item item-input item-floating-label" >
-                    <span class="input-label">password</span>
+                <label class="item item-text-wrap item-input item-floating-label" >
+                    <span class="input-label">{{'kPassword' | translate}}</span>
                     <input type="password" ng-model="wizard.zmpassword" placeholder="zm auth password" >
-                    <p>note: if your password has # or ? in it, the wizard will fail cgi detection.</p>
+                    <p >{{'kWizPasswdNote' | translate}}</p>
                 </label>
             </div>
 
-            <ion-toggle ng-show="wizard.useauth" ng-model="wizard.usebasicauth" ng-checked="wizard.usebasicauth" toggle-class="toggle-calm">I use Basic authentication</ion-toggle>
+            <ion-toggle ng-show="wizard.useauth" ng-model="wizard.usebasicauth" ng-checked="wizard.usebasicauth" toggle-class="toggle-calm">{{'kWizBasicAuth' | translate}}</ion-toggle>
             <label class="item item-input item-floating-label" ng-show="wizard.usebasicauth">
-                <span class="input-label">user name</span>
+                <span class="input-label">{{'kUserName' | translate}}</span>
                 <input autocapitalize="none" autocomplete="off" type="text" ng-model="wizard.basicuser" placeholder="basic auth username" >
             </label>
-            <label class="item item-input item-floating-label" ng-show="wizard.usebasicauth">
-                <span class="input-label">password</span>
+            <label class="item item-input item-text-wrap item-floating-label" ng-show="wizard.usebasicauth">
+                <span class="input-label">{{'kPassword' | translate}}</span>
                 <input type="password" ng-model="wizard.basicpassword" placeholder="basic auth password" >
-                <p>note: if your password has # or ? in it, the wizard will fail cgi detection.</p>
+                <p >{{'kWizPasswdNote' | translate}}</p>
             </label>
 
 
@@ -74,19 +74,19 @@
 
 
             <div class="wizardtip" ng-show="wizard.tipshow">
-                <b>Tip: </b>Confused? <i>ZM Auth</i> is the authentication used when you enable OPT_USE_AUTH in the ZM console options screen.<br/>
-                <i>Basic Auth</i> is when you configure a username and password in your webserver. If you are using LDAP authentication, its likely basic auth.
+                <b>{{'kWizTip'| translate}} </b> {{'kWizAuthText1' | translate}}<br/>
+                {{'kWizAuthText2' | translate}}
             </div>
 
            <br/>
-            <button class="button button-small icon icon-left ion-chevron-left" wz-previous>Prev</button>
-            <button class="button button-small icon icon-right ion-chevron-right" ng-click="exitAuth()">Next</button>
+            <button class="button button-small icon icon-left ion-chevron-left" wz-previous>{{'kPrev' | translate}}</button>
+            <button class="button button-small icon icon-right ion-chevron-right" ng-click="exitAuth()">{{'kNext' | translate}}</button>
             
     </wz-step>
             
         
     <wz-step wz-title="3"  >
-        <h4>Results of auto-detection</h4>
+        <h4>{{'kWizResults' | translate}}</h4>
     
         <span ng-if="wizard.portalValidText" style="color:{{wizard.portalColor}};"><i ng-class="wizard.portalColor=='#16a085' ? 'ion-checkmark-circled':'ion-close-circled'"></i>&nbsp;{{wizard.portalValidText}}<br/></span>
         
@@ -96,15 +96,15 @@
         
         <br/>
         <div class="wizardtip">
-            Once auto-detection is over, you could either:
+            {{'kWizNextStep1' | translate}}:
             <ul class="wiz-list">
-                <li>Go back to previous steps and re-do</li>
-                <li>Go to the login screen with these findings auto filled in</li>
+                <li>{{'kWizNextStep2' | translate}}</li>
+                <li>{{'kWizNextStep3' | translate}}</li>
             </ul>
         </div>
         <br/><br/>
-        <button class="button button-small icon icon-left ion-chevron-left" wz-previous>Prev</button>
-        <button class="button button-small icon icon-right ion-chevron-right" ng-click="gotoLoginState()">Go to Login Screen</button>
+        <button class="button button-small icon icon-left ion-chevron-left" wz-previous>{{'kPrev' | translate}}</button>
+        <button class="button button-small icon icon-right ion-chevron-right" ng-click="gotoLoginState()">{{'kWizGotoLogin' | translate}}</button>
     </wz-step>
         
         
diff --git a/www/templates/zm-portal-login.html b/www/templates/zm-portal-login.html
index 67927269..1844a01a 100644
--- a/www/templates/zm-portal-login.html
+++ b/www/templates/zm-portal-login.html
@@ -1,6 +1,6 @@
 
-<ion-view view-title="zmNinja" hide-nav-bar="true" hide-back-button="true" cache-view="false">
-    <!--<ion-view view-title="zmNinja" hide-nav-bar="false" hide-back-button="true" cache-view="false">-->
+<ion-view view-title="{{$root.appName}}" hide-nav-bar="true" hide-back-button="true" cache-view="false">
+    
     <ion-content class="pin-background" scroll="false">
        
         <div style="margin-left:20px; margin-right:20px">
@@ -12,7 +12,7 @@
                 </div>
 
                 <div ng-if="pinPrompt">
-                    <span style="color:white">Enter PIN</span>
+                    <span style="color:white">{{'kEnterPIN' | translate}}</span>
                    
                     <div class="pinCode">
                         <input id="pin-box" type="number" pattern="[0-9]*" ng-model="pindata.pin" ng-keyup="pinChange()" />
-- 
cgit v1.2.3