upd prices

pack.js

+module.exports = {
+    src: './src',
+    entry: {js: 'main.jsx', html: 'index.html'},
+    public: './public',
+    scss: {
+        shared: `@import '/main.scss';`
+    },
+    build: './build'
+};

pack.production.js

+module.exports = {
+  src: './src',
+  entry: {js: 'main.jsx', html: 'index.html'},
+  public: './public',
+  scss: {
+    shared: `@import '/main.scss';`
+  },
+  build: './build'
+};

src/cmp/Checkbox/Checkbox.jsx

@@ -29,7 +29,7 @@ var Checkbox = new Component({
     var _self = this;
 
     this.sub([this.value], function (val) {
-      console.log(val)
+//      console.log(val)
       _self.inputEl.checked = !!val;
     });
 

src/core/Observer.js

@@ -24,7 +24,7 @@ var Observable = (function(){
             }
         },
         fire: function( k ){
-            console.log(k)
+            //console.log(k)
             var listeners = this._listeners[ k ],
               listener;
             if( listeners === void 0 )

src/main.jsx

@@ -16,7 +16,7 @@ import { Social } from "posts/Social.jsx";
 const {IF, ELSE} = Store;
 export default function() {
   var krokotau = Store.Value.Boolean(false);
-  let graph, klaps = true,
+  let graph, klaps = false,
     dom = <div renderTo={document.body} class={[ "page-content", { krokotau } ]}>
       {_ => {
         setTimeout( function(){
@@ -50,16 +50,16 @@ export default function() {
       </Collapse>
 
 
-      <Collapse label={'Социальная сеть'} value={klaps}>
+      {/*<Collapse label={'Социальная сеть'} value={klaps}>
         <Social/>
-      </Collapse>
+      </Collapse>*/}
 
 
-      <Collapse label={'Технологический стэк'} value={false}>
+      <Collapse label={'Технологический стэк'} value={klaps}>
         <Stack/>
       </Collapse>
 
-      <Collapse label={'План этапов работ'} value={klaps}>
+      <Collapse label={'План этапов работ'} value={false}>
         <Plan/>
       </Collapse>
 

src/posts/Plan.scss

+.content {
+  margin:0 0 0 64px;
+  position: relative;
+}
+body {
+  margin: 0 0 64px 0;
+  padding: 0;
+  font-family: 'Yanone Kaffeesatz', sans-serif;
+  font-weight: 300;
+  font-size: 24px;
+  /*line-height: 1.3;*/
+}
+.sub {
+  padding: 0 0 0 32px;
+}
+.description {
+  font-size: 20px;
+}
+.h2 {
+  margin: 0 0 8px 8px;
+  font-size: 20px;
+}
+.title {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0.5em 0;
+  padding: 4px 4px 0 0;
+  position: relative;
+}
+.title-1 {
+  font-size: 56px;
+  line-height: 1;
+}
+
+.title-2 {
+  font-size: 48px;
+}
+.title-25 {
+  font-size: 40px;
+}
+.title-3 {
+  font-size: 32px;
+}
+.title-4 {
+  font-size: 24px;
+}
+.time {
+  display: inline;
+  font-size: 16px;
+  color: #777;
+}
+.cost {
+  display: inline;
+  padding: 0 16px 0 0;
+}
+.cost-name, .cost-amount {
+  padding: 0 4px 0 0;
+  display: inline;
+  white-space: nowrap;
+}
+.cost-amount {
+  padding-left: 8px;
+}
+.cost-after {
+  display: inline-block;
+}
+.collapsed .sub, .collapsed .description{
+  display: none;
+}
+#works button {
+  border: 0;
+  background: transparent;
+  font-size: 32px;
+  vertical-align: middle;
+  padding: 0;
+  margin: -8px 0 0 -32px;
+  width: 32px;
+
+  font-family: monospace;
+}
+.option {
+  padding: 16px 0 0 0;
+  font-size:32px;
+}
+.option input {
+  width: 24px;
+  height: 24px;
+  margin: 0 8px 0 -32px;
+  padding: 0;
+}
+
+.clickable {
+  cursor: pointer
+}
+.calculation .cost {
+  display: block;
+}
+
+.title.sub-options {
+  padding: 8px 0 8px 0;
+  margin-left: -32px;
+}
+.title-1:before, .title-2:before, .title-3:before {
+  content: '';
+  left: -135px;
+  width: 128px;
+  height: 8px;
+  position: absolute;
+  z-index: -1;
+  top: 35px;
+}
+.title-1, .title-2, .title-3 {
+  background-repeat: no-repeat;
+  background-size: 100% 56%;
+  background-position: 35% 55%;
+}
+.title-2 {
+  color: #104361;
+
+  /*background-image: linear-gradient(14deg, #184f6b 0%, #092839 100%);*/
+
+  /*text-shadow: 0px 1px 3px #092839;*/
+}
+.title-3 {
+  color: #870036;
+  /*
+              background-image: linear-gradient(179deg, #76002c 0%, #f5a94b 100%);
+              background-size: 100% 40%;
+              text-shadow: 0px 1px 3px #76002c;*/
+
+
+}
+.title-1 {
+  color: #334808;
+  /*
+              background-image: linear-gradient(179deg, #666f3b 0%, #182103 100%);
+              background-size: 100% 40%;
+              background-position: 35% 68%;
+              text-shadow: 0px 1px 3px #182103;*/
+}
+#works .options {
+  margin: 64px 0 0 0;
+  margin-left: -3px;
+}
+.pre-options {
+
+  margin-left: -32px;
+}
+.description {
+  white-space: pre-line;
+  max-width: 640px;
+}
+.comment {
+  color: #559405;
+  font-style: italic;
+  padding: 16px 0 8px 0;
+}
+.list {
+  margin: 4px 0 16px 0;
+  padding-inline-start: 13px;
+  /*list-style-image: linear-gradient(14deg, #997ab5 0%, #75848a 100%);*/
+}
+ul {
+  list-style: square; /* Remove default bullets */
+}
+.nobr {
+  white-space: nowrap;
+  display: inline-block;
+}
\ No newline at end of file

src/posts/PlanOld.jsx

+import {Info, Content, Note, Header, SubHeader, Field} from '/cmp/Blocks.jsx';
+
+import { PlainSelect } from "cmp/PlainSelect/PlainSelect.jsx";
+import { Checkbox } from "cmp/Checkbox/Checkbox.jsx";
+import { Radio } from "cmp/Radio/Radio.jsx";
+import { Input } from "cmp/Input/Input.jsx";
+import { TimeInput } from "cmp/TimeInput/TimeInput.jsx";
+import { NumberInput } from "cmp/NumberInput/NumberInput.jsx";
+
+import Add from "/svg/ic_add.svg";
+import "./Plan.scss";
+import { Collapse } from "cmp/Collapse/Collapse.jsx";
+
+
+var PlanOld = function(){
+  s.set( {} );
+
+  var tasks = `
+
+
+Разбить макеты на типовые блоки
+  #вёрстка: 6h * $componentCount
+  #dependency: design
+  >После получения финального дизайна выделить все присутствующие в макетах компоненты и оценить время необходимое для их вёрстки
+  
+  
+Вёрстка страниц макетов
+  #id:markup-full
+  $constructor.design===as-is
+  #вёрстка: 8h * $pagesCount
+  #dependency: design
+  >Вёрстка макетов всех отрисованных страниц 
+
+Вёрстка страниц макетов
+  #id:markup-full
+  $constructor.design===components
+  #вёрстка: 3h * $pagesCount
+  #dependency: design, design-grid
+  >Вёрстка макетов всех отрисованных страниц с использованием заготовленных дизайн-сеток
+  
+Построить адаптивную систему сеток для позицонирования компонентов
+  #id:design-grid
+  $constructor.design===components
+  #вёрстка: 4d
+  #dependency: design
+  #tag: ui
+  >Определить и унифицировать гайдлайны для построения всех экранов. Гайдлайны должны представлять собой дизайн-систему позволяющую добавлять компоненты на страницу, сохраняя результат соответствующим дизайну. Сетка должна адекватно отображаться как на телевизоре, так и на мобильном устройстве.
+  
+
+
+
+Построить инфраструктуру для перекодирования видео
+
+Развернуть очередь сообщений
+
+
+
+
+Пользователи
+  Сервис отвечающий за регистрацию и авторизацию пользователей #микросервисы
+  Сервис проверяющий права пользователя X на совершения действия Y над объектом Z #микросервисы
+  Реализация API регистрации и авторизации пользователей #монолит
+  Реализация API проверки прав пользователя X на совершения действия Y над объектом Z #монолит
+  
+  Структура пользователя должна включать в себя, но не ограничиваться следующими полями: Фамилия, Имя, отчество, Телефон, Адрес электронной почты, Дату регистрации, Дату последней авторизации, Сессионный ключ, Хэш пароля.
+  
+  Структура записи права доступа включает в себя поля:
+  Актор, Объект, Действие, Кем выдано право, Дата выдачи права
+  
+  Структура последних просмотренных 
+
+
+
+
+  
+  
+  `;
+  var tasks = [
+    {
+      title: '',
+      description: [
+        'Разбиваем макеты на типовые блоки. Разработка системы сеток. Сборка страниц из блоков с использованием сетки и компонентов.'
+      ],
+      parents: [],
+      work: {}
+    }
+  ];
+
+
+  var dom = <div class={'plan'}>
+    <Header>Этапы разработки</Header>
+
+
+  </div>;
+  return dom;
+};
+
+export {PlanOld};
\ No newline at end of file

src/posts/Stack.jsx

@@ -19,7 +19,9 @@ var Stack = function(){
     'constructor.Video': 'micro',
     'constructor.smartTV': ['WebOS'],
     'constructor.Mobile': 'web',
-    'constructor.Locale': 'rus'
+    'constructor.Locale': 'rus',
+    'constructor.design': 'asIs',
+    'constructor.2fa': 'no2fa'
 
   } );
 
@@ -193,6 +195,13 @@ var Stack = function(){
         Fire TV Amazon
       </button>
 
+      <button onClick={()=>toggle('constructor.smartTV', 'Browser') }
+              cls={D.cls('option', {
+                active: _=>s.sub('constructor.smartTV', val=> _(val.indexOf('Browser')>-1))
+              })}>
+        Use Web Browser to view videos
+      </button>
+
     </Content>
 
     <SubHeader>Мобильная платформа</SubHeader>
@@ -214,7 +223,10 @@ var Stack = function(){
               cls={D.cls('option', {active: s.valEqual('constructor.Locale', 'rus')})}>
         Русский язык
       </button>
-
+      <button onClick={()=>s.set('constructor.Locale', 'en')}
+              cls={D.cls('option', {active: s.valEqual('constructor.Locale', 'en')})}>
+        Английский язык
+      </button>
       <button onClick={()=>s.set('constructor.Locale', 'rusSystem')}
               cls={D.cls('option', {active: s.valEqual('constructor.Locale', 'rusSystem')})}>
         Русский язык с системой локализации
@@ -233,8 +245,8 @@ var Stack = function(){
 
     <SubHeader>Дизайн-система</SubHeader>
     <Content>
-      <button onClick={()=>s.set('constructor.design', 'as-is')}
-              cls={D.cls('option', {active: s.valEqual('constructor.design', 'as-is')})}>
+      <button onClick={()=>s.set('constructor.design', 'asIs')}
+              cls={D.cls('option', {active: s.valEqual('constructor.design', 'asIs')})}>
         Вёрстка макетов
       </button>
 
@@ -244,6 +256,28 @@ var Stack = function(){
       </button>
     </Content>
 
+    <SubHeader>Двуфакторная авторизация</SubHeader>
+    <Content>
+      <button onClick={()=>s.set('constructor.2fa', 'no2fa')}
+              cls={D.cls('option', {active: s.valEqual('constructor.2fa', 'no2fa')})}>
+        Не интегрируем двуфакторную авторизаци
+      </button>
+
+      <button onClick={()=>s.set('constructor.2fa', 'tuFaSMS')}
+              cls={D.cls('option', {active: s.valEqual('constructor.2fa', 'tuFaSMS')})}>
+        Двуфакторная авторизация по смс
+      </button>
+
+      <button onClick={()=>s.set('constructor.2fa', 'tuFaEmail')}
+              cls={D.cls('option', {active: s.valEqual('constructor.2fa', 'tuFaEmail')})}>
+        Двуфакторная авторизация по e-mail
+      </button>
+
+      <button onClick={()=>s.set('constructor.2fa', 'tuFaBoth')}
+              cls={D.cls('option', {active: s.valEqual('constructor.2fa', 'tuFaBoth')})}>
+        Двуфакторная авторизация по e-mail и смс
+      </button>
+    </Content>
   </div>;
   return dom;
 };