JSFiddle - React, Tailwind, and code Playground

by Evgenii Malikov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.10.0/angular-translate.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as vm">

  <select ng-model="vm.check.type">
    <option>precheck</option>
    <option>receipt</option>
    <option>invoice</option>
  </select>

<div id="animate" ng-show="vm.check.type=='receipt'" ng-class="((loadtemplate) && 'animated fadeIn') || ''" >
	<form class="span9 offset1 sample-show-hide">
		<!-- message-panel -->
		<div class="message-panel" >
			<!-- message-panel directive-->
			<message-panel messagelist='messagelist'></message-panel>
			<!-- /.message-panel directive-->
		</div>
		<!-- /.message-panel -->
		<a href="/cash_desk_operations"><span class="close" >x</span></a>
		<h3>{{ 'load.static.RECEIPT' | translate}}</h3>
		<p>{{ 'load.static.RECEIPT_NOTE' | translate}}</p>
		<hr>
		<div class="span9 margin-bottom-20" style="float:none;margin:0 auto;overflow: hidden;border: 1px solid #CCC;padding: 15px;">
			<!-- precheck -->
			<div id="print-form1">
				<div>
					<h4 style="text-align:center">{{ 'load.static.RECEIPT' | translate}}</h4>
					<br />
					<ol class="unstyled" style="list-style:none;">
						<li><strong>{{ 'load.static.DATE' | translate}}:</strong> {{ greeting.date }}</li>
						<li>
							<strong>{{ 'load.static.PHONE_CLIENT' | translate}} </strong>: {{ greeting.client_to ? greeting.client_to : greeting.client_phone }}
						</li>
						<li><br></li>
						<li><br></li>
						<li><strong>{{ 'load.static.OPERATION' | translate}}:</strong> {{ formData.oper_note }} {{ greeting.operation_number }}</li>
						<li><br></li>
						<li><strong>{{ 'load.static.TRANSLATE_SUM' | translate}}:</strong> {{ greeting.sum }} {{greeting.selcur}}</li>
						<li><br></li>
						<li><strong>{{ 'load.static.CASH' | translate}}:</strong> {{ greeting.cash_desk_id }} </li>
					</ol>
					<br />
					<ol class="unstyled" style="list-style:none;">
						<li><strong>{{ 'load.static.SING_CLIENT' |...

JavaScript

angular.module('myApp',['pascalprecht.translate'])
.controller('myCtrl',function(){
vm=this;
vm.check={};
vm.check.type='precheck';
})
.config(function ($translateProvider) {
   $translateProvider.translations('ru',window.tr);
   $translateProvider.preferredLanguage('ru');
});
window.tr={
"load" : {
  "static" : {
    "TITLE"     : "Вход в систему",
    "TITLE1"    : "Личный кабинет",
    "TITLE2"    : "Выдача денег",
    "TITLE3"    :  "Внесение денег",
    "TITLE4"    :  "Перевод денег",
    "TITLE5"    :  "Отправить баланс",
    "LANGUAGE"    : "Язык",
    "HELP" : "Помощь",
    "WELCOME" : "Добро пожаловать!",
    "PHONE_NUMBER"    : "Ваш номер телефона",
    "PASSWORD"    : "Ваш пароль",
    "LOGIN"   : "Вход",
    "LOGOUT"   : "Выход",
    "HOME"    : "Главная",
    "REMEMBER"  : "Запомнить",
    "CONTACT" : "Контакты",
    "RECPASSTEXT1": "Забыли свой пароль ?",
    "RECPASSTEXT2": "не волнуйтесь, <a class='color-green' href='#' >жмите сюда</a> для сброса вашего пароля.",
    "COPYRIGHT" : "Все права защищены",
    "NO_SESSION" : "Сессии с данным id не существует",
    "NO_NUMBER" : "Номер отсутствует в базе",
    "INVALID_PASS" : "Неверный пароль",
    "SMS_PASS_EXPIRED" : "SMS­пароль ошибочен",
    "Время подтверждения истекло" : "SMS­пароль ошибочен",
    "CASH_DESK_OCCUPIED" : "В кассе засел другой кассир",
    "YES_AUTHORIZ" : "Авторизация прошла успешно, SMS­пароль не требуется",
    "STEP1_AUTHORIZ" : "Первая стадия авторизации прошла успешно, требуется подтверждение SMS­паролем",
    "STEP2_AUTHORIZ" : "Вторая стадия авторизации прошла успешно, SMS­пароль верен",
    "YES_LOGOUT" : "logout успешен",
    "UNKNOWN_RESPONSE"   :   "Неизвестный ответ",
    "PLEASE_WAIT"   :   "Пожалуйста подождите...",
    "SESSION_EXPIRED"   :   "Время сессии истекло",
    "SMS" : "Введите СМС код",
    "OPER" : "Операции",
    "LATEST_OPER"   :   "Последние операции",
    "USER_INFO" : "Информация о пользователе",
    "YOUR_ACCESS" : "Ваши доступы",
   ...