doc.html

<!DOCTYPE html>
<html lang="en">
<head>
	<title>FIREFLY - Довідка </title>
	<link rel="stylesheet" href="./css/style.css">
	<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
	<meta charset="UTF-8">


	<meta name="description" CONTENT="FireFly - візуальний редактор CSS-анімації,
	що дозволить вам без особливих зусиль створити свою анімацію. Або ж редагувати
	вже існуючу анімацію з будь-якої популярної бібліотеки">
	<meta name="keywords" CONTENT="firefly, css, анімація,
	редактор, візуальний редактор, CSS-анімація">
</head>
<body class="documentation">
		<div class="header">
			<div class="logo">
				<img src="img/logo.png" alt="" />
				<span>Firefly </span>
				<span class="version"> v1.0</span>
			</div>
		</div>
	<div class="wrap">
		<h2>Довідка</h2>
		<div class="deskr">
			<p>FireFly - візуальний редактор CSS-анімації, що значно спрощує створення нової анімації або ж редагування вже існуючої.</p>
			<p>Нижче описано детальну інструкції як користуватися даним редактором.</p>
		</div>

		<section class="first">
			 <div class="right">
			 	<p><strong>Вкладка "Клас"</strong></p>
			 	<ol>
			 		<li>Елемент для пошуку необхідної анімації</li>
			 		<li>Кліком миші анімації буде перенесена до редактора</li>
			 		<li>Значок для задання значення "безкінечного повторення"</li>
			 		<li>Випадаючи списки статичних параметрів анімації</li>
			 		<li>Таби для переходу між вкладками</li>
			 	</ol>
			 </div>
			<div class="left">
				<img src="img/docs/props-block-1.png" alt="" />
			</div>
		</section>
		<section class="first curve">
			<!-- start .left -->
			 <!-- start .right -->

			  <!-- end .right -->
			<div class="left">
				<img src="img/docs/curve.jpg" alt="" />
			</div>
			<div class="right">
			 	<p><strong>Крива Безьє</strong></p>
			 	<ol>
			 		<li>Елементи керування</li>
			 		<li>Показники прогресу відносно часу</li>
			 		<li>Кнопки зберження чи відміни дій</li>
			 	</ol>
			 </div>
			 <!-- end .left -->

		</section>
		<section class="first">
			<!-- start .left -->
			 <!-- start .right -->
			<div class="right">
			 	<p><strong>Вкладка "Кадри"</strong></p>
			 	<ol>
			 		<li>Додавання нових керуючих елементів для введення</li>
			 		<li>Після наведення на елемент, з'являється значок для його видалення</li>
			 	</ol>
			 </div>
			 <!-- end .left -->
			  <!-- end .right -->
			<div class="left">
				<img src="img/docs/props-block-2.jpg" alt="" />
			</div>


		</section>
		<section class="first">

			<!-- start .left -->
			<div class="left">
				<img src="img/docs/editor.jpg" alt="" />
			</div>
			 <!-- end .left -->

			 <!-- start .right -->
			 <div class="right">
			 	<p><strong>Текстовий редактор</strong></p>
			 	<ol>
			 		<li>Кнопки копіювання, імпорту та експорту текстового файлу</li>
			 		<li>В редакторі можна вносити зміни в анімацію, вони застосуються у всіх частинах редактора</li>
			 	</ol>
			 </div>
			  <!-- end .right -->

		</section>
		<section class="first">
			<!-- start .left -->
			 <!-- start .right -->
			 <div class="right">
			 	<p><strong>Часова лінія</strong></p>
			 	<ol>
			 		<li>Кнопки керування відтвроенням анімації</li>
			 		<li>Індекатор прогресу</li>
			 		<li>Неактивний кадр</li>
			 		<li>При наведені на активний кадр з'являється значок для його видалення</li>
			 		<li>Вигляд активного кадру</li>
			 	</ol>
			 </div>
			  <!-- end .right -->
			<div class="left">
				<img src="img/docs/timeline.jpg" alt="" />
			</div>
			 <!-- end .left -->

		</section>
		<section class="first">
			<!-- start .left -->
			<div class="left">
				<img src="img/docs/anim-zone.jpg" alt="" />
			</div>
			 <!-- end .left -->

			 <!-- start .right -->
			 <div class="right">
			 	<p><strong>Зона попердньго перегляду</strong></p>
			 	<ol>
			 		<li>Елемент що анімується</li>
			 		<li>Редагування стилів та структури анімованого елемента</li>
			 		<li>Кнопка застосування змін</li>
			 		<li>Повернення до початкового вигляду елемента</li>
			 	</ol>
			 </div>
			  <!-- end .right -->

		</section>
		<section class="first">
		 <!-- start .right -->
			 <div class="right">
			 	<p><strong>Меню сайту</strong></p>
			 	<ol>
			 		<li>Авторизація через популярні сервіси</li>
			 		<li>Зміна розташування елементів в редакторі</li>
			 		<li>Виклик вікна з інформацією про автора сайту</li>
			 		<li>Детальна документація</li>
			 		<li>Виклик вікна з підказками в користуванні сайтом</li>
			 	</ol>
			 </div>
			  <!-- end .right -->
			<!-- start .left -->
			<div class="left">
				<img src="img/docs/top-menu.jpg" alt="" />
			</div>
			 <!-- end .left -->
		</section>
		<section class="first">
			<!-- start .left -->
			<div class="left">
				<img src="img/docs/top-menu-2.jpg" alt="" />
			</div>
			 <!-- end .left -->
			  <!-- start .right -->
			 <div class="right">
			 	<p><strong>Меню сайту після авторизації</strong></p>
			 	<ol>
			 		<li>Кнопка збреження анімації в базу даних для авторизованого користувача</li>
			 		<li>Відображення збережених раніше анімацій</li>
			 		<li>Дані про активного користувача</li>
			 		<li>Значки для прив'язання інших сервісів авторизації</li>
			 		<li>Вихід з профілю</li>
			 	</ol>
			 </div>
			  <!-- end .right -->
		</section>

		<section class="video-inst">
			<h2>Демонстрація роботи в редакторі</h2>
			<iframe width="854" height="480" src="https://www.youtube.com/embed/IY9Nri6jpd4" frameborder="0" allowfullscreen></iframe>
		</section>
	</div>
	 <!-- end .wrap -->
	<div class="copyright">
		<p>CopyRight <i class="fa fa-copyright" aria-hidden="true"></i> 2017 - by Kolya Stanislavchuk</p>
	</div>
</body>
</html>