bunch of texts

src/cmp/Blocks.jsx

@@ -37,6 +37,12 @@ var SubHeader = function(cfg, children) {
     headers.push(Object.assign(item, {type: 'SubHeader'}));
   return D.div({cls: 'subHeader'}, [D.h('a', {attr: {name: item.name}})].concat(children))
 };
+var SubSubHeader = function(cfg, children) {
+  var item = uniqLink(children);
+  if(!cfg || !cfg.hidden)
+    headers.push(Object.assign(item, {type: 'SubSubHeader'}));
+  return D.div({cls: 'subSubHeader'}, [D.h('a', {attr: {name: item.name}})].concat(children))
+};
 var Field = function(cfg, children) {
   cfg = cfg || {};
   if(children[0].name === 'radio' || children[0].name === 'checkbox'){
@@ -55,4 +61,4 @@ var Field = function(cfg, children) {
   }
 };
 
-export {Info, Content, Note, Header, SubHeader, Field, headers};
+export {Info, Content, Note, Header, SubHeader, SubSubHeader, Field, headers};
\ No newline at end of file

src/index.html

@@ -89,6 +89,11 @@
             font-size: 32px;
             margin: 96px 0 48px 0;
         }
+        .subSubHeader {
+            font-weight: bold;
+            font-size: 24px;
+            margin: 64px 0 32px 0;
+        }
         .thead td {
             border-bottom: 2px solid #000;
         }

src/main.jsx

@@ -3,32 +3,59 @@ import {lal} from '/posts/post.jsx';
 import {s} from '/posts/store.jsx';
 import {VideoCalculator} from '/posts/VideoCalculator.jsx';
 import {Interactive} from '/posts/Interactive.jsx';
-import { headers, Header, SubHeader } from "cmp/Blocks.jsx";
+import { headers, Header, SubHeader, SubSubHeader } from "cmp/Blocks.jsx";
 import { Collapse } from "cmp/Collapse/Collapse.jsx";
+import { Users } from "posts/Users.jsx";
+import { Profit } from "posts/Profit.jsx";
+import { Portal } from "posts/Portal.jsx";
+import { Plan } from "posts/Plan.jsx";
+import { Stack } from "posts/Stack.jsx";
 
 
 const {IF, ELSE} = Store;
 export default function() {
   var krokotau = Store.Value.Boolean(false);
-  let graph,
+  let graph, klaps = false,
     dom = <div renderTo={document.body} class={[ "page-content", { krokotau } ]}>
       {_ => {
         setTimeout( function(){
           _( headers.map( i =>
             <div class={D.cls( 'link-header', {
               h1: i.type === 'Header',
-              h2: i.type === 'SubHeader'
+              h2: i.type === 'SubHeader',
+              h3: i.type === 'SubSubHeader'
             } )}><a href={'#' + i.name}>{i.title}</a></div>
           ) )
         }, 10 );
       }}
-      <Collapse label={'Хранение и передача видео'} value={false}>
-        {VideoCalculator}
+
+      <Collapse label={'Пользователи'} value={klaps}>
+        <Users/>
+      </Collapse>
+
+      <Collapse label={'Портал'} value={false}>
+        <Portal/>
       </Collapse>
-      <Collapse label={'Интерактив'} value={false}>
+
+      <Collapse label={'Хранение и передача видео'} value={klaps}>
+        <VideoCalculator/>
+      </Collapse>
+      <Collapse label={'Интерактив'} value={klaps}>
         <Interactive/>
       </Collapse>
 
+      <Collapse label={'Монетизация'} value={klaps}>
+        <Profit/>
+      </Collapse>
+
+      <Collapse label={'Технологический стэк'} value={klaps}>
+        <Stack/>
+      </Collapse>
+
+      <Collapse label={'План этапов работ'} value={klaps}>
+        <Plan/>
+      </Collapse>
+
     </div>;
 
   const w = window;

src/posts/Interactive.jsx

@@ -256,7 +256,7 @@ var _now, vid,
       Типы интерактива
     </Header>
     <SubHeader>
-      Опрос
+      Опрос <img className="interactive-image" src={"quiz.png"}/>
     </SubHeader>
     <Content>
       <p>
@@ -264,25 +264,41 @@ var _now, vid,
       </p><p>
         Действие доступно как из приложения smartTV с помощью пульта, так и с мобильного телефона.
     </p><p>
-      Настраивается позиция блока, количество и текст вариантов. При включенной опции "Свой вариант" - зритель получает возможность ввести свой текст.
-      <Info>Можно реализовать сборку текста из заранее подготовленных кусочков. Это сильно упрощает анализ и группировку ответов пользователей, а так же на корню решает все проблемы с матом и модерацией. Пример такого ввода текста встречается в играх от From Software - Bloodborn и Dark Souls 1, 2, 3</Info>
+      Настраивается позиция блока, количество и текст вариантов. При включенной опции «Свой вариант» — зритель получает возможность ввести свой текст.
+      <Info>
+        <p>Можно реализовать сборку текста из заранее подготовленных кусочков. Это сильно упрощает анализ и группировку ответов пользователей, а так же на корню решает все проблемы с матом и модерацией. Пример такого ввода текста встречается в играх от From Software — Bloodborn; Dark Souls 1, 2, 3</p>
+      {/*<p>Кусочки выбираются из категорий\подкатегорий, например:</p>
+
+      <p>Место → Рельеф → Гора</p>
+      <p>Подменю зависимости слов → Вложенность</p>
+      <p>Место → Страна → Азия → Китай</p>
+      <p>Получились <i>Горы Китая</i></p>
+      <p>Подменю зависимости слов → Описание</p>
+      <p>Качество → Положительное → Красивый</p>
+      <p>Получилось <i>Горы Китая красивы</i></p>
+      <p>Время → Время года → Зима</p>
+      <p>Получилось <i>Горы Китая красивы зимой</i></p>*/}
+
+      </Info>
     </p>
     </Content>
 
+
     <SubHeader>
-      Вопрос
+      Вопрос     <img className="interactive-image" src={"question.png"}/>
     </SubHeader>
     <Content>
       <p>
         Предлагает зрителю <i>ответить на вопрос</i>. Без вариантов ответов. Как и опрос, можно реализовать набор фразы из кусочков.
       </p>
       <p>
-        Помимо стандартных настроек - можно задать минимальную\максимальную длину ответа.
+        Настраивается максимальная и минимальная длина ответа.
       </p>
     </Content>
 
+
     <SubHeader>
-      Загадка
+      Загадка    <img className="interactive-image" src={"zhsloe.png"}/>
     </SubHeader>
     <Content>
       <p>
@@ -295,6 +311,95 @@ var _now, vid,
         Настраивается стиль клеток, их количество, расположение относительно друг друга и доступные для ввода символы\цвета или даже звуки (конкурс с подбором мелодии!)
       </p>
     </Content>
+
+    <SubHeader>
+      Переход    <img className="interactive-image" src={"goto.png"}/>
+    </SubHeader>
+    <Content>
+      <p>
+        <i>Элемент навигации</i>, работает как гиперссылка. Позволяет выполнить переход в другое видео, в другой раздел или остаться в текущем видео, но попасть в другое время.
+      </p>
+      <p>
+        С помощью этого инструмента можно делать:
+        <ul>
+          <li><i>«Видеостатьи»</i> — сейчас я буду распаковывать этот товар, кому не интересна эта часть — переходите сразу к обзору</li>
+          <li><i>Квесты</i> — *перед персонажем появляется камень на котором есть три варианта действия* Терять коня, Терять жизнь, Забывать себя. При выборе любого из действий — зритель попадает или в другое видео где разворачивается соответствующая сюжетная линия, или передвигается по текущему видео по принципу <a href={'https://eksmo.ru/trends/knigi-kvesty-kak-ikh-chitat-i-zachem-ID15503007/'} target={'_blank'}>квестовых книг</a>.</li>
+          <li><i>Отсылки</i> — в своём прошлом видео я рассказывал о принципе устройства конденсаторов, эти знания будут важны для понимания дальнейшего материала</li>
+          <li><i>Рекламный баннер</i></li>
+        </ul>
+      </p>
+      <p>
+        Настраивается стиль перехода. Можно установить текст, картинку, зацикленное короткое видео или отрезок другого видео с выбором начала и конца отрезка.
+      </p>
+    </Content>
+
+
+
+    <SubHeader>
+      Разветвление сюжета     <img className="interactive-image" src={"split.png"}/>
+    </SubHeader>
+    <Content>
+      <p>
+        <i>Обязательный выбор</i> — этот тип интерактива похож на <i>переход</i>, но является обязательным. Основной видеопоток останавливается и ждёт реакции пользователя.
+      </p>
+      <p>
+        Настройки аналогичны <i>переходу</i>, но добавляется настройка поведения основного видео во время выбора:
+        <ul>
+          <li>Повтор последних X секунд</li>
+          <li>Воспроизведение Х секунд вперёд-назад-вперёд-назад</li>
+          <li>Изменение скорости при повторе</li>
+          <li>Вставка другого зацикленного видео</li>
+          <li>Зацикленная звуковая дорожка</li>
+        </ul>
+      </p>
+    </Content>
+
+
+    <SubHeader>
+      Результат опроса     <img className="interactive-image" src={"chart.png"}/>
+    </SubHeader>
+    <Content>
+      <p>
+        <img src={'tv.jpg'} className="article-image"/>
+        Выводит информацию о результатах опроса. Может выводить одновременно с опросом, в таком случае отображение будет аналогично телефонным голосованием.
+      </p>
+      <p>
+        Настраивается:
+        <ul>
+          <li>Стиль графика. Цвета, отступы</li>
+          <li>Тип графика. Столбцы, круговая диаграмма (пирог)</li>
+          <li>Фильтрация данных. Можно не показывать ответы с менее чем 5 голосами</li>
+          <li>Формат ответов: абсолютные числа, проценты</li>
+        </ul>
+      </p>
+    </Content>
+
+
+    <SubHeader>
+      Виджет     <img className="interactive-image" src={"widget.png"}/>
+    </SubHeader>
+    <Content>
+      <p>
+        Отображает информацию поверх видеоряда. Погода, объявление, картинки, кусочки видео.
+      </p>
+      <p>
+        Виджет не подразумевает пользовательского взаимодействия
+      </p>
+    </Content>
+
+
+    <Info>
+      <SubHeader>Общие настройки</SubHeader>
+      <Content>
+        <p>Все типы интерактива имеют не только специфичные настроеки, но и стандартные:</p>
+        <ul>
+          <li>Позиция (x, y, width, height)</li>
+          <li>Длительность и время отображения.</li>
+          <li>Эффект появления и исчезновения интерактивного блока</li>
+          <li>Название (системное свойство для редактора, позволяет не путать блоки)</li>
+        </ul>
+      </Content>
+    </Info>
   </div>;
 
 

src/posts/Interactive.scss

@@ -247,4 +247,17 @@
   .inputs {
     opacity: 0;
   }
+}
+.interactive-image {
+  float: right;
+  position: relative;
+  margin: 0 128px 0 0;
+}
+.article-image {
+   position: absolute;
+   right: -64px;
+}
+ul {
+  list-style-type: bengali;
+  padding-inline-start: 32px;
 }
\ No newline at end of file

src/posts/Plan.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 Plan = function(){
+  s.set( {} );
+  var dom = <div class={'plan'}>
+    <Header>Этапы разработки</Header>
+
+
+  </div>;
+  return dom;
+};
+
+export {Plan};
\ No newline at end of file

src/posts/Portal.jsx

+import {Info, Content, Note, Header, SubHeader,SubSubHeader, 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 "./Portal.scss";
+import { Collapse } from "cmp/Collapse/Collapse.jsx";
+
+
+var Portal = function(){
+  s.set( {} );
+  var dom = <div class={'users'}>
+    <Header>Портал-Аттракцион</Header>
+    <Info>Этот раздел фиксирует структуру проекта. Структура описана в соответствии с макетами из cacoo.</Info>
+
+    <Content>
+      <p>Сложно охарактеризовать разрабатываемый проект более лаконично чем «<i>Портал-Аттракцион</i>»</p>
+      <p>Любой наш зритель может как круглосуточно <i>потреблять</i> имеющийся контент, так и <i>создавать</i> нечто своё-новое и выкладывать на всеобщее обозрение.</p>
+      <p>Пользователи будут участвовать в опросах и конкурсах. Делать это они смогут не на альтруистических началах, а зарабатывая попутно коины.</p>
+    </Content>
+
+    <SubHeader>Структура проекта</SubHeader>
+    <SubSubHeader>Раздел</SubSubHeader>
+    <Content>
+
+      <p>Базовой структурной единицей проекта является «Раздел».</p><p>Свойства раздела:</p>
+      <ul>
+        <li>Название — заголовок раздела</li>
+        <li>Описание — пояснение описывающее содержание раздела. У одного раздела может быть несколько описаний для разных форматов отображения (короткое, длинное).</li>
+        <li>Родительский раздел — если задан, то раздел становится <i>подразделом</i>, если нет — коренным.</li>
+        <li>
+          <a href="#Права доступа">Права доступа</a>. Определяют кто может наполнять и редактировать раздел.
+        </li>
+        <li><a href="#Предварительный просмотр">Предварительный просмотр</a> — обложка раздела. Содержит ссылки на подразделы и выборки в соответствии с настройками.</li>
+        <li><a href="#Тип контента">Тип контента</a> — указывает какой тип контента можно добавлять в раздел (например: текст, видео, музыка).</li>
+      </ul>
+
+
+    </Content>
+
+    <SubHeader>Права доступа</SubHeader>
+    <Content>
+      <p>Любой объект в системе имеет права доступа.</p>
+      <p>Права доступа похожи на систему прав *nix операционных систем.</p>
+      <p>У любого объекта есть <i>создатель</i>.</p>
+      <p>Создатель может делать с объектом что угодно, а именно — удалять, редактировать, наполнять, просматривать.</p>
+      <p>Создатель может дать права на удаление, редактирование, наполнение и просмотр любому другому пользователю или группе пользователей.</p>
+      <p>Группа пользователей — такой же объект. Создатель группы может добавлять в неё других пользователей.</p>
+    </Content>
+  </div>;
+  return dom;
+};
+
+export {Portal};
\ No newline at end of file

src/posts/Profit.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 "./Profit.scss";
+import { Collapse } from "cmp/Collapse/Collapse.jsx";
+
+
+var Profit = function(){
+  s.set( {} );
+  var dom = <div class={'profit'}>
+    <Header>Монетизация и система вознаграждения</Header>
+
+
+  </div>;
+  return dom;
+};
+
+export {Profit};
\ No newline at end of file

src/posts/Stack.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 "./Stack.scss";
+import { Collapse } from "cmp/Collapse/Collapse.jsx";
+
+
+var Stack = function(){
+  s.set( {} );
+  var dom = <div class={'stack'}>
+    <Header>Технологический стэк</Header>
+
+
+  </div>;
+  return dom;
+};
+
+export {Stack};
\ No newline at end of file

src/posts/Users.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 "./Users.scss";
+import { Collapse } from "cmp/Collapse/Collapse.jsx";
+
+
+var Users = function(){
+  s.set( {} );
+  var dom = <div class={'users'}>
+    <Header>Пользователи</Header>
+
+    <SubHeader>
+      Поведенческий анализ
+    </SubHeader>
+    <Content>
+      <p>
+      Разрабатываемая система производит постоянное отслеживание поведения пользователей. Накопленные поведенческие данные могут обрабатываться с помощью Data Mining и Machine Learning алгоритмов.
+      </p>
+      <p>
+        Мы обеспечиваем прямую связь между зрителями и создателями контента. Создатели могут как оценивать такие статистические данные как количество просмотров видео, наиболее полпулярные видео и разделы, так и напрямую обратиться к зрителю и спросить о том что нравится в шоу, а что нет; устраивать опросы и розыгрыши призов.
+      </p>
+    </Content>
+    <SubHeader>
+      Кросс-платформенная связь
+    </SubHeader>
+    <Content>
+      <p>
+        Основной платформой для просмотра видеоконтента является телевизор, но последнее время всё больше пользователей использует мобильный телефон или персональный компьютер в качестве устройства для доступа к видео информации. Это легко объясняется тем, что интернет сервисы, такие как youtube, дают зрителю возможность выбирать контент для просмотра по своему желанию, а не основываясь на предварительно составленной сетке показов телеканала.
+      </p>
+      <p>
+        Наша цель — объединить эти два мира. Вернуть пользователю удобство восприятия видеоинформации с большого экрана и обеспечить выбор желаемого контента.
+      </p>
+      <p>
+        <i>Интерактивная часть</i>. Обратная связь, опросы, конкурсы и все другие места где от пользователя требуется ввод информации — не удобно использовать с телевизора. Пульт как правило не имеет достаточно кнопок для удобного ввода текстовой информации. По этой причине мы решили объединить SmartTV и мобильное вебприложение в единую синергитическую систему. Отвечать на вопросы и предлагать свои варианты развития сюжета можно с удобной мобильной клавиатуры. Или даже с клавиатуры своего ноутбука!
+      </p>
+    </Content>
+
+    <SubHeader>
+      Регистрация
+    </SubHeader>
+    <Content>
+      <p>
+    Первоначальная регистрация пользователей происходит при установке мобильного приложения или при открытии smartTV приложения.
+      </p>
+      <p>
+    Заполнение персональных данных не обязательно, но подкрепляется положительными мотиваторами (день просмотра без рекламы, получение мир-коинов*?).
+      </p>
+    </Content>
+
+    <SubHeader>
+      Слияние аккаунтов
+    </SubHeader>
+    <Content>
+      <p>
+        Система должна предусматривать возможность слияния пользователей для объединения случайно созданых разных профилей мобильного и smartTV приложений.
+      </p>
+      <p>
+        Для слияния пользователей и\или авторизации необходимо отсканировать мобильным телефоном QR-код с телевизора.
+      </p>
+    </Content>
+
+    <SubHeader>
+      Вход в существующий аккаунт
+    </SubHeader>
+    <Content>
+      <p>
+          Вход в существующий аккаунт с устройства не поддерживающего сканирование QR-кода (компьютер) возможен только при:
+      </p>
+      <ul>
+        <li>
+    прохождении двуфакторной авторизации с мобильного устройства
+        </li>
+        <li>
+    прозождении авторизации по смс
+        </li>
+        <li>
+    прозождении авторизации по email
+        </li>
+        <li>
+    при изначальном создании аккаунта из web версии приложения
+        </li>
+      </ul>
+      <p>
+    При изначачальном создании аккаунта из web версии - дальнейшая авторизация на телевизоре происходит с помощью сканирования мобильным приложением QR-кодов web версии и smartTV версии приложения МИР.
+      </p>
+    </Content>
+
+    <SubHeader>
+      Поощрение
+    </SubHeader>
+    <Content>
+      <p>
+        Нам выгодно заполнение как можно более подробное заполнение профиля пользователя. Введённые данные дают нам возможность производить точное таргетирование отображаемой рекламы и рекомендуемого контента.
+      </p>
+      <p>
+        После заполнения username, email и phone number — у пользователя появляется кошелёк.
+      </p>
+      <p>
+        По этой причине за заполнение профиля мы даём пользователю награду в виде МИР-коинов.
+      </p>
+      <p>
+      Распоряжение коинами происходит с мобильного приложения с использованием двуфакторной авторизации. Второй фактор может быть email, sms или сканирование QR кода с телевизора.
+      </p>
+    </Content>
+
+  </div>;
+  return dom;
+};
+
+export {Users};
\ No newline at end of file

src/posts/VideoCalculator.scss

@@ -17,4 +17,11 @@ select, input {
 .h1 {
   margin: 32px 0 0 0;
   font-size: 24px;
+}
+.h3 {
+  margin: 0 0 8px 16px;
+  font-size: 16px;
+  a {
+    text-decoration: none;
+  }
 }
\ No newline at end of file