Browse Source

Initial commit with mockups and nette sandbox

kudlav 1 year ago
commit
48a2a8e7f1
57 changed files with 15479 additions and 0 deletions
  1. 6 0
      .gitignore
  2. 22 0
      app/bootstrap.php
  3. 21 0
      app/config/config.neon
  4. 13 0
      app/presenters/BasePresenter.php
  5. 25 0
      app/presenters/Error4xxPresenter.php
  6. 38 0
      app/presenters/ErrorPresenter.php
  7. 11 0
      app/presenters/HomepagePresenter.php
  8. 21 0
      app/presenters/templates/@layout.latte
  9. 7 0
      app/presenters/templates/Error/403.latte
  10. 8 0
      app/presenters/templates/Error/404.latte
  11. 6 0
      app/presenters/templates/Error/405.latte
  12. 6 0
      app/presenters/templates/Error/410.latte
  13. 4 0
      app/presenters/templates/Error/4xx.latte
  14. 27 0
      app/presenters/templates/Error/500.phtml
  15. 22 0
      app/presenters/templates/Error/503.phtml
  16. 7 0
      app/presenters/templates/Homepage/default.latte
  17. 23 0
      app/router/RouterFactory.php
  18. 33 0
      composer.json
  19. 1279 0
      composer.lock
  20. 2 0
      log/.gitignore
  21. 3 0
      readme.md
  22. 2 0
      temp/.gitignore
  23. 2 0
      vendor/.htaccess
  24. 7 0
      vendor/autoload.php
  25. 28 0
      www/.htaccess
  26. 827 0
      www/adminer/index.php
  27. BIN
      www/favicon.ico
  28. 6 0
      www/index.php
  29. BIN
      www/mockup/dashboard/datagrid-attachements.png
  30. 145 0
      www/mockup/dashboard/edit-video-attachements.html
  31. 202 0
      www/mockup/dashboard/edit-video-links.html
  32. 5580 0
      www/mockup/dashboard/edit-video.css
  33. 252 0
      www/mockup/dashboard/edit-video.html
  34. 96 0
      www/mockup/dashboard/edit-video.scss
  35. 155 0
      www/mockup/dashboard/file.html
  36. BIN
      www/mockup/dashboard/pool.PNG
  37. 52 0
      www/mockup/dashboard/pool.html
  38. BIN
      www/mockup/dashboard/pool_bg.PNG
  39. 125 0
      www/mockup/dashboard/processes.html
  40. BIN
      www/mockup/dashboard/processes.png
  41. 124 0
      www/mockup/dashboard/templates.html
  42. BIN
      www/mockup/dashboard/templates.png
  43. 124 0
      www/mockup/dashboard/tokens.html
  44. BIN
      www/mockup/dashboard/tokens.png
  45. BIN
      www/mockup/dashboard/vid-thumb.PNG
  46. 180 0
      www/mockup/dashboard/video-editor.html
  47. BIN
      www/mockup/fit.png
  48. 28 0
      www/mockup/index.html
  49. 138 0
      www/mockup/main.html
  50. BIN
      www/mockup/player.PNG
  51. BIN
      www/mockup/video-grid.PNG
  52. 5580 0
      www/mockup/video.css
  53. 146 0
      www/mockup/video.html
  54. 96 0
      www/mockup/video.scss
  55. BIN
      www/mockup/video_next.PNG
  56. BIN
      www/mockup/video_prev.PNG
  57. 0 0
      www/robots.txt

+ 6 - 0
.gitignore

@@ -0,0 +1,6 @@
+app/config/config.local.neon
+vendor/*
+processing/*
+!.gitignore
+!.htaccess
+!web.config

+ 22 - 0
app/bootstrap.php

@@ -0,0 +1,22 @@
+<?php
+
+require __DIR__ . '/../vendor/autoload.php';
+
+$configurator = new Nette\Configurator;
+
+//$configurator->setDebugMode('23.75.345.200'); // enable for your remote IP
+$configurator->enableTracy(__DIR__ . '/../log');
+
+$configurator->setTimeZone('Europe/Prague');
+$configurator->setTempDirectory(__DIR__ . '/../temp');
+
+$configurator->createRobotLoader()
+	->addDirectory(__DIR__)
+	->register();
+
+$configurator->addConfig(__DIR__ . '/config/config.neon');
+$configurator->addConfig(__DIR__ . '/config/config.local.neon');
+
+$container = $configurator->createContainer();
+
+return $container;

+ 21 - 0
app/config/config.neon

@@ -0,0 +1,21 @@
+#
+# WARNING: it is CRITICAL that this file & directory are NOT accessible directly via a web browser!
+# https://nette.org/security-warning
+#
+
+php:
+	date.timezone: Europe/Prague
+
+
+application:
+	errorPresenter: Error
+	mapping:
+		*: App\*Module\Presenters\*Presenter
+
+
+session:
+	expiration: 14 days
+
+
+services:
+	router: App\RouterFactory::createRouter

+ 13 - 0
app/presenters/BasePresenter.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Presenters;
+
+use Nette;
+
+
+/**
+ * Base presenter for all application presenters.
+ */
+abstract class BasePresenter extends Nette\Application\UI\Presenter
+{
+}

+ 25 - 0
app/presenters/Error4xxPresenter.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Presenters;
+
+use Nette;
+
+
+class Error4xxPresenter extends Nette\Application\UI\Presenter
+{
+	public function startup()
+	{
+		parent::startup();
+		if (!$this->getRequest()->isMethod(Nette\Application\Request::FORWARD)) {
+			$this->error();
+		}
+	}
+
+
+	public function renderDefault(Nette\Application\BadRequestException $exception)
+	{
+		// load template 403.latte or 404.latte or ... 4xx.latte
+		$file = __DIR__ . "/templates/Error/{$exception->getCode()}.latte";
+		$this->template->setFile(is_file($file) ? $file : __DIR__ . '/templates/Error/4xx.latte');
+	}
+}

+ 38 - 0
app/presenters/ErrorPresenter.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Presenters;
+
+use Nette;
+use Nette\Application\Responses;
+use Tracy\ILogger;
+
+
+class ErrorPresenter implements Nette\Application\IPresenter
+{
+	use Nette\SmartObject;
+
+	/** @var ILogger */
+	private $logger;
+
+
+	public function __construct(ILogger $logger)
+	{
+		$this->logger = $logger;
+	}
+
+
+	public function run(Nette\Application\Request $request)
+	{
+		$exception = $request->getParameter('exception');
+
+		if ($exception instanceof Nette\Application\BadRequestException) {
+			list($module, , $sep) = Nette\Application\Helpers::splitName($request->getPresenterName());
+			return new Responses\ForwardResponse($request->setPresenterName($module . $sep . 'Error4xx'));
+		}
+
+		$this->logger->log($exception, ILogger::EXCEPTION);
+		return new Responses\CallbackResponse(function () {
+			require __DIR__ . '/templates/Error/500.phtml';
+		});
+	}
+}

+ 11 - 0
app/presenters/HomepagePresenter.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Presenters;
+
+
+class HomepagePresenter extends BasePresenter
+{
+	public function renderDefault()
+	{
+	}
+}

+ 21 - 0
app/presenters/templates/@layout.latte

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+  <link rel="stylesheet" href="./mockup/video.css"> </head>
+
+	<title>{ifset title}{include title|stripHtml} | {/ifset}Nette Web</title>
+</head>
+
+<body>
+	<div n:foreach="$flashes as $flash" n:class="flash, $flash->type">{$flash->message}</div>
+	<p>{$czech}</p>
+	{include content}
+
+	{block scripts}
+	<script src="https://nette.github.io/resources/js/netteForms.min.js"></script>
+	{/block}
+</body>
+</html>

+ 7 - 0
app/presenters/templates/Error/403.latte

@@ -0,0 +1,7 @@
+{block content}
+<h1 n:block=title>Access Denied</h1>
+
+<p>You do not have permission to view this page. Please try contact the web
+site administrator if you believe you should be able to view this page.</p>
+
+<p><small>error 403</small></p>

+ 8 - 0
app/presenters/templates/Error/404.latte

@@ -0,0 +1,8 @@
+{block content}
+<h1 n:block=title>Page Not Found</h1>
+
+<p>The page you requested could not be found. It is possible that the address is
+incorrect, or that the page no longer exists. Please use a search engine to find
+what you are looking for.</p>
+
+<p><small>error 404</small></p>

+ 6 - 0
app/presenters/templates/Error/405.latte

@@ -0,0 +1,6 @@
+{block content}
+<h1 n:block=title>Method Not Allowed</h1>
+
+<p>The requested method is not allowed for the URL.</p>
+
+<p><small>error 405</small></p>

+ 6 - 0
app/presenters/templates/Error/410.latte

@@ -0,0 +1,6 @@
+{block content}
+<h1 n:block=title>Page Not Found</h1>
+
+<p>The page you requested has been taken off the site. We apologize for the inconvenience.</p>
+
+<p><small>error 410</small></p>

+ 4 - 0
app/presenters/templates/Error/4xx.latte

@@ -0,0 +1,4 @@
+{block content}
+<h1 n:block=title>Oops...</h1>
+
+<p>Your browser sent a request that this server could not understand or process.</p>

+ 27 - 0
app/presenters/templates/Error/500.phtml

@@ -0,0 +1,27 @@
+<!DOCTYPE html><!-- "' --></textarea></script></style></pre></xmp></a></audio></button></canvas></datalist></details></dialog></iframe></listing></meter></noembed></noframes></noscript></optgroup></option></progress></rp></select></table></template></title></video>
+<meta charset="utf-8">
+<meta name="robots" content="noindex">
+<title>Server Error</title>
+
+<style>
+	#nette-error { all: initial; position: absolute; top: 0; left: 0; right: 0; height: 70vh; min-height: 400px; display: flex; align-items: center; justify-content: center; z-index: 1000 }
+	#nette-error div { all: initial; max-width: 550px; background: white; color: #333; display: block }
+	#nette-error h1 { all: initial; font: bold 50px/1.1 sans-serif; display: block; margin: 40px }
+	#nette-error p { all: initial; font: 20px/1.4 sans-serif; margin: 40px; display: block }
+	#nette-error small { color: gray }
+</style>
+
+<div id=nette-error>
+	<div>
+		<h1>Server Error</h1>
+
+		<p>We're sorry! The server encountered an internal error and
+		was unable to complete your request. Please try again later.</p>
+
+		<p><small>error 500</small></p>
+	</div>
+</div>
+
+<script>
+	document.body.insertBefore(document.getElementById('nette-error'), document.body.firstChild);
+</script>

+ 22 - 0
app/presenters/templates/Error/503.phtml

@@ -0,0 +1,22 @@
+<?php
+
+header('HTTP/1.1 503 Service Unavailable');
+header('Retry-After: 300'); // 5 minutes in seconds
+
+?>
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="robots" content="noindex">
+<meta name="generator" content="Nette Framework">
+
+<style>
+	body { color: #333; background: white; width: 500px; margin: 100px auto }
+	h1 { font: bold 47px/1.5 sans-serif; margin: .6em 0 }
+	p { font: 21px/1.5 Georgia,serif; margin: 1.5em 0 }
+</style>
+
+<title>Site is temporarily down for maintenance</title>
+
+<h1>We're Sorry</h1>
+
+<p>The site is temporarily down for maintenance. Please try again in a few minutes.</p>

+ 7 - 0
app/presenters/templates/Homepage/default.latte

@@ -0,0 +1,7 @@
+{* This is the welcome page, you can delete it *}
+
+{block content}
+
+<h1>Prednasky.com</h1>
+
+<p><a href="mockup">At this moment, you can see just a mockups.</a></p>

+ 23 - 0
app/router/RouterFactory.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App;
+
+use Nette;
+use Nette\Application\Routers\Route;
+use Nette\Application\Routers\RouteList;
+
+
+class RouterFactory
+{
+	use Nette\StaticClass;
+
+	/**
+	 * @return Nette\Application\IRouter
+	 */
+	public static function createRouter()
+	{
+		$router = new RouteList;
+		$router[] = new Route('<presenter>/<action>[/<id>]', 'Homepage:default');
+		return $router;
+	}
+}

+ 33 - 0
composer.json

@@ -0,0 +1,33 @@
+{
+	"name": "kudlac/prednasky",
+	"description": "Prednasky.com - video learning portal",
+	"keywords": ["nette"],
+	"type": "project",
+	"license": ["MIT", "BSD-3-Clause", "GPL-2.0", "GPL-3.0"],
+	"require": {
+		"php": ">= 7.0",
+		"nette/application": "^2.4",
+		"nette/bootstrap": "^2.4.2",
+		"nette/caching": "^2.5",
+		"nette/database": "^2.4",
+		"nette/di": "^2.4",
+		"nette/finder": "^2.4",
+		"nette/forms": "^2.4",
+		"nette/http": "^2.4",
+		"nette/mail": "^2.4",
+		"nette/robot-loader": "^2.4 || ^3.0",
+		"nette/security": "^2.4",
+		"nette/utils": "^2.4",
+		"latte/latte": "^2.4",
+		"tracy/tracy": "^2.4"
+	},
+	"require-dev": {
+		"nette/tester": "^2.0"
+	},
+	"minimum-stability": "stable",
+	"config": {
+		"platform": {
+			"php": "7.0"
+		}
+	}
+}

File diff suppressed because it is too large
+ 1279 - 0
composer.lock


+ 2 - 0
log/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

+ 3 - 0
readme.md

@@ -0,0 +1,3 @@
+# Prednasky.com
+
+Dokumentace v latexu zde: [https://www.overleaf.com/11538267kpnczwtfnmxn](https://www.overleaf.com/11538267kpnczwtfnmxn)

+ 2 - 0
temp/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

+ 2 - 0
vendor/.htaccess

@@ -0,0 +1,2 @@
+Order Allow,Deny
+Deny from all

+ 7 - 0
vendor/autoload.php

@@ -0,0 +1,7 @@
+<?php
+
+// autoload.php @generated by Composer
+
+require_once __DIR__ . '/composer' . '/autoload_real.php';
+
+return ComposerAutoloaderInit091ed5d24b4127ffc48411e34be2086f::getLoader();

+ 28 - 0
www/.htaccess

@@ -0,0 +1,28 @@
+# Apache configuration file (see https://httpd.apache.org/docs/current/mod/quickreference.html)
+Allow from all
+
+# disable directory listing
+<IfModule mod_autoindex.c>
+	Options -Indexes
+</IfModule>
+
+# enable cool URL
+<IfModule mod_rewrite.c>
+	RewriteEngine On
+	# RewriteBase /
+
+	# prevents files starting with dot to be viewed by browser
+	RewriteRule /\.|^\.(?!well-known/) - [F]
+
+	# front controller
+	RewriteCond %{REQUEST_FILENAME} !-f
+	RewriteCond %{REQUEST_FILENAME} !-d
+	RewriteRule !\.(pdf|js|ico|gif|jpg|png|css|rar|zip|tar\.gz|map)$ index.php [L]
+</IfModule>
+
+# enable gzip compression
+<IfModule mod_deflate.c>
+	<IfModule mod_filter.c>
+		AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/json application/xml image/svg+xml
+	</IfModule>
+</IfModule>

File diff suppressed because it is too large
+ 827 - 0
www/adminer/index.php


BIN
www/favicon.ico


+ 6 - 0
www/index.php

@@ -0,0 +1,6 @@
+<?php
+
+$container = require __DIR__ . '/../app/bootstrap.php';
+
+$container->getByType(Nette\Application\Application::class)
+	->run();

BIN
www/mockup/dashboard/datagrid-attachements.png


+ 145 - 0
www/mockup/dashboard/edit-video-attachements.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+  <link rel="stylesheet" href="edit-video.css"> </head>
+
+<body class="">
+  <div class="">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="active nav-link"> <i class="fa fa-flag"></i>&nbsp;English</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Česky</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="nav-link active"> <i class="fa fa-tachometer"></i>&nbsp;Dashboard</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../main.html">Website</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="py-3">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-5">
+          <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed">
+            <img class="img-fluid d-block" src="https://medusa.fit.vutbr.cz/traffic/wp-content/logos/fit.png"> </a>
+        </div>
+        <div class="col-md-6">
+          <h1 class="display-2 text-secondary m-0 p-0">Administration</h1>
+        </div>
+      </div>
+    </div>
+  </div>
+  <nav class="navbar navbar-expand-md bg-primary navbar-dark p-1">
+    <div class="container">
+      <a class="navbar-brand text-white"><i class="fa d-inline fa-lg fa-user"></i><b>  User: <span style="font-weight: normal;">xkudla15</span></b></a>
+      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent"
+        aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
+      <div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
+        <a class="btn navbar-btn ml-2 text-white btn-secondary" href="../main.html"><i class="fa d-inline fa-lg fa-sign-out"></i>&nbsp;Sign out</a>
+      </div>
+    </div>
+  </nav>
+  <div class="py-4">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-3">
+          <h2 class="">Administration:</h2>
+          <ul class="list-group">
+            <li class="list-group-item bg-info text-white">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed?ui=0" class="text-white d-block"> Educational videos </a>
+            </li>
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/aaf7a1106?ui=0" class="text-dark d-block">Lectures records</a>
+            </li>
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/aa8bb2077?ui=0" class="text-dark d-block">Files</a>
+            </li>
+            <li class="list-group-item">
+              <a href="processes.html" class="text-dark d-block">Processes and templates</a>
+            </li>
+            <li class="list-group-item">
+              <a href="../main.html" class="text-dark d-block"><i class="d-block  fa fa-share" style="font-size: 1rem; display: inline !important;"><span style="font-size: 1.25rem;">&nbsp;</span></i>back to videoportal</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-9">
+          <h1 class="">Edit video:</h1>
+          <ul class="nav nav-tabs my-3">
+            <li class="nav-item">
+              <a href="edit-video.html" class="nav-link text-dark"><i class="fa fa-info"></i>&nbsp;Basic informations</a>
+            </li>
+            <li class="nav-item bg-info mx-2">
+              <a class="nav-link text-white" href="edit-video-attachements.html"><i class="fa fa-file-o"></i>&nbsp;Attachements (5)</a>
+            </li>
+            <li class="nav-item">
+              <a href="edit-video-links.html" class="nav-link text-dark"><i class="fa fa-video-camera"></i>&nbsp;Related videos</a>
+            </li>
+          </ul>
+          <a href="pool.html" class="btn btn-outline-primary" target="_blank">Add attachement
+            <br> </a>
+          <a href="file.html">
+            <img class="d-block my-2" src="datagrid-attachements.png"> </a>
+          <ul class="pagination">
+            <li class="page-item">
+              <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a>
+            </li>
+            <li class="page-item">
+              <a class="page-link" href="#">1</a>
+            </li>
+            <li class="page-item">
+              <a class="page-link" href="#">2</a>
+            </li>
+            <li class="page-item">
+              <a class="page-link" href="#">3</a>
+            </li>
+            <li class="page-item">
+              <a class="page-link" href="#">4</a>
+            </li>
+            <li class="page-item">
+              <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="bg-light text-muted py-2" style="border-top: 1px solid rgba(0, 0, 0, 0.125);">
+    <div class="container">
+      <div class="row">
+        <div class="align-self-center col-md-2">
+          <a href="https://www.fit.vutbr.cz/" target="_blank">
+            <img class="d-block" src="../fit.png"> </a>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="text-center m-0"> Božetěchova 1/2 • 612 66 Brno • Czech Republic </p>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="m-0 text-right"> © Faculty of Information Technology, BUT </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+</body>
+
+</html>

+ 202 - 0
www/mockup/dashboard/edit-video-links.html

@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+  <link rel="stylesheet" href="edit-video.css"> </head>
+
+<body class="">
+  <div class="">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="active nav-link"> <i class="fa fa-flag"></i>&nbsp;English</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Česky</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="nav-link active"> <i class="fa fa-tachometer"></i>&nbsp;Dashboard</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../main.html">Website</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="py-3">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-5">
+          <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed">
+            <img class="img-fluid d-block" src="https://medusa.fit.vutbr.cz/traffic/wp-content/logos/fit.png"> </a>
+        </div>
+        <div class="col-md-6">
+          <h1 class="display-2 text-secondary m-0 p-0">Administration</h1>
+        </div>
+      </div>
+    </div>
+  </div>
+  <nav class="navbar navbar-expand-md bg-primary navbar-dark p-1">
+    <div class="container">
+      <a class="navbar-brand text-white"><i class="fa d-inline fa-lg fa-user"></i><b>  User: <span style="font-weight: normal;">xkudla15</span></b></a>
+      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent"
+        aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
+      <div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
+        <a class="btn navbar-btn ml-2 text-white btn-secondary" href="../main.html"><i class="fa d-inline fa-lg fa-sign-out"></i>&nbsp;Sign out</a>
+      </div>
+    </div>
+  </nav>
+  <div class="py-4">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-3">
+          <h2 class="">Administration:</h2>
+          <ul class="list-group">
+            <li class="list-group-item bg-info text-white">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed?ui=0" class="text-white d-block"> Educational videos </a>
+            </li>
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/aaf7a1106?ui=0" class="text-dark d-block">Lectures records</a>
+            </li>
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/aa8bb2077?ui=0" class="text-dark d-block">Files</a>
+            </li>
+            <li class="list-group-item">
+              <a href="processes.html" class="text-dark d-block">Processes and templates</a>
+            </li>
+            <li class="list-group-item">
+              <a href="../main.html" class="text-dark d-block"><i class="d-block  fa fa-share" style="font-size: 1rem; display: inline !important;"><span style="font-size: 1.25rem;">&nbsp;</span></i>back to videoportal</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-9">
+          <h1 class="">Edit video:</h1>
+          <ul class="nav nav-tabs my-3">
+            <li class="nav-item">
+              <a href="edit-video.html" class="nav-link text-dark"><i class="fa fa-info"></i>&nbsp;Basic informations</a>
+            </li>
+            <li class="nav-item mx-2">
+              <a class="nav-link text-dark" href="edit-video-attachements.html"><i class="fa fa-file-o"></i>&nbsp;Attachements</a>
+            </li>
+            <li class="nav-item bg-info">
+              <a href="edit-video-links.html" class="nav-link text-white"><i class="fa fa-video-camera"></i>&nbsp;Related videos</a>
+            </li>
+          </ul>
+          <div class="row">
+            <div class="col-md-12">
+              <form class="" method="post" action="https://formspree.io/">
+                <div class="form-group my-2"> <label><b>Next video:</b></label>
+                  <div class="row my-1">
+                    <div class="align-self-center col-md-3">
+                      <p class="m-0 px-2">Previous video:</p>
+                    </div>
+                    <div class="col-md-9">
+                      <div class="row my-1">
+                        <div class="align-self-center col-md-9" style="transition: all 0.25s;">
+                          <p class="m-0 px-2">ARC – Architektura a programování paralelních systémů</p>
+                        </div>
+                        <div class="col-md-3  offset-md-6 p-0" style="transition: all 0.25s;">
+                          <a href="" class="btn btn-outline-primary" target="">Unlink video</a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row my-1">
+                    <div class="col-md-3 align-self-center">
+                      <p class="m-0 px-2">Previous video:</p>
+                    </div>
+                    <div class="col-md-9">
+                      <div class="row my-1">
+                        <div class="align-self-center col-md-5">
+                          <p class="m-0 px-2">ACH – Architektura procesorů</p>
+                        </div>
+                        <div class="offset-md-6 p-0 col-md-3">
+                          <a href="" class="btn btn-outline-primary" target="">Unlink video</a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="btn-group">
+                    <a href="pool.html" target="_blank">
+                      <button type="button" class="btn btn-outline-primary">Add next video</button>
+                    </a>
+                  </div>
+                </div>
+                <div class="form-group my-2"> <label><b>Previous video:</b></label>
+                  <div class="row my-1">
+                    <div class="align-self-center col-md-3">
+                      <p class="m-0 px-2">Previous video:</p>
+                    </div>
+                    <div class="col-md-9">
+                      <div class="row my-1">
+                        <div class="align-self-center col-md-9" style="transition: all 0.25s;">
+                          <p class="m-0 px-2">ARC – Architektura a programování paralelních systémů</p>
+                        </div>
+                        <div class="col-md-3  offset-md-6 p-0" style="transition: all 0.25s;">
+                          <a href="" class="btn btn-outline-primary" target="">Unlink video</a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row my-1">
+                    <div class="col-md-3 align-self-center">
+                      <p class="m-0 px-2">Previous video:</p>
+                    </div>
+                    <div class="col-md-9">
+                      <div class="row my-1">
+                        <div class="align-self-center col-md-5">
+                          <p class="m-0 px-2">ACH – Architektura procesorů</p>
+                        </div>
+                        <div class="offset-md-6 p-0 col-md-3">
+                          <a href="" class="btn btn-outline-primary" target="">Unlink video</a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <a href="pool.html" target="_blank">
+                    <button type="button" class="btn btn-outline-primary">Add previous video</button>
+                  </a>
+                </div>
+                <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed?ui=0">
+                  <button type="button" class="btn btn-primary my-3">Save</button>
+                </a>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="bg-light text-muted py-2" style="border-top: 1px solid rgba(0, 0, 0, 0.125);">
+    <div class="container">
+      <div class="row">
+        <div class="align-self-center col-md-2">
+          <a href="https://www.fit.vutbr.cz/" target="_blank">
+            <img class="d-block" src="../fit.png"> </a>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="text-center m-0"> Božetěchova 1/2 • 612 66 Brno • Czech Republic </p>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="m-0 text-right"> © Faculty of Information Technology, BUT </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+</body>
+
+</html>

File diff suppressed because it is too large
+ 5580 - 0
www/mockup/dashboard/edit-video.css


+ 252 - 0
www/mockup/dashboard/edit-video.html

@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+  <link rel="stylesheet" href="edit-video.css"> </head>
+
+<body class="">
+  <div class="">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="active nav-link"> <i class="fa fa-flag"></i>&nbsp;English</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Česky</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="nav-link active"> <i class="fa fa-tachometer"></i>&nbsp;Dashboard</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../main.html">Website</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="py-3">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-5">
+          <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed">
+            <img class="img-fluid d-block" src="https://medusa.fit.vutbr.cz/traffic/wp-content/logos/fit.png"> </a>
+        </div>
+        <div class="col-md-6">
+          <h1 class="display-2 text-secondary m-0 p-0">Administration</h1>
+        </div>
+      </div>
+    </div>
+  </div>
+  <nav class="navbar navbar-expand-md bg-primary navbar-dark p-1">
+    <div class="container">
+      <a class="navbar-brand text-white"><i class="fa d-inline fa-lg fa-user"></i><b>  User: <span style="font-weight: normal;">xkudla15</span></b></a>
+      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent"
+        aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
+      <div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
+        <a class="btn navbar-btn ml-2 text-white btn-secondary" href="../main.html"><i class="fa d-inline fa-lg fa-sign-out"></i>&nbsp;Sign out</a>
+      </div>
+    </div>
+  </nav>
+  <div class="py-4">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-3">
+          <h2 class="">Administration:</h2>
+          <ul class="list-group">
+            <li class="list-group-item bg-info text-white">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed?ui=0" class="text-white d-block"> Educational videos </a>
+            </li>
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/aaf7a1106?ui=0" class="d-block text-dark">Lectures records</a>
+            </li>
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/aa8bb2077?ui=0" class="text-dark d-block">Files</a>
+            </li>
+            <li class="list-group-item">
+              <a href="processes.html" class="text-dark d-block">Processes and templates</a>
+            </li>
+            <li class="list-group-item">
+              <a href="../main.html" class="text-dark d-block"><i class="d-block  fa fa-share" style="font-size: 1rem; display: inline !important;"><span style="font-size: 1.25rem;">&nbsp;</span></i>back to videoportal</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-9">
+          <h1 class="">Edit video:</h1>
+          <ul class="nav nav-tabs my-3">
+            <li class="nav-item bg-info">
+              <a href="edit-video.html" class="nav-link text-white"><i class="fa fa-info"></i>&nbsp;Basic informations</a>
+            </li>
+            <li class="nav-item mx-2">
+              <a class="nav-link text-dark" href="edit-video-attachements.html"><i class="fa fa-file-o"></i>&nbsp;Attachements</a>
+            </li>
+            <li class="nav-item">
+              <a href="edit-video-links.html" class="nav-link text-dark"><i class="fa fa-video-camera"></i>&nbsp;Related videos</a>
+            </li>
+          </ul>
+          <div class="row">
+            <div class="col-md-6">
+              <div class="form-group my-2"> <label><b>Title:</b></label>
+                <input type="text" name="title" class="form-control" placeholder="Video title"> </div>
+              <div class="form-group my-2"> <label><b>Recorded:</b></label>
+                <input type="date" name="recorded" class="form-control" placeholder=""> </div>
+              <div class="form-group my-2"> <label><b>Visibility:</b></label>
+                <br>
+                <div class="btn-group">
+                  <button class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown"> Draft </button>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="#">Draft</a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="#">Logged in</a>
+                    <a class="dropdown-item" href="#">Public</a>
+                  </div>
+                </div>
+              </div>
+              <div class="form-group"> <label><b>Share link:</b></label>
+                <div class="row">
+                  <div class="col-md-9">
+                    <input type="text" name="title" class="form-control" placeholder="Secret key"> </div>
+                  <div class="col-md-3 p-0">
+                    <a href="#" class="btn btn-outline-primary">Create link</a>
+                  </div>
+                </div>
+                <p class="mx-2">Video is not shared.</p>
+              </div>
+              <div class="form-group"> <label><b>Abstract:</b></label><textarea class="form-control" id="Textarea" rows="3" placeholder="Type here" style="margin-top: 0px; margin-bottom: 0px; height: 128px;"></textarea> </div>
+              <div class="form-group my-2"> <label><b>Tags:</b></label>
+                <div class="row my-1">
+                  <div class="col-md-3 align-self-center" style="transition: all 0.25s;">
+                    <p class="m-0 px-2">Semester:</p>
+                  </div>
+                  <div class="col-md-8" style="transition: all 0.25s;">
+                    <input type="search" name="semester" class="form-control" placeholder="Start typing..."> </div>
+                </div>
+                <div class="row my-1">
+                  <div class="col-md-3 align-self-center" style="transition: all 0.25s;">
+                    <p class="m-0 px-2">Course:</p>
+                  </div>
+                  <div class="col-md-8" style="transition: all 0.25s;">
+                    <input type="search" name="course" class="form-control" placeholder="Start typing..."> </div>
+                </div>
+                <div class="row my-1">
+                  <div class="col-md-3 align-self-center" style="transition: all 0.25s;">
+                    <p class="m-0 px-2">Type:</p>
+                  </div>
+                  <div class="col-md-8" style="transition: all 0.25s;">
+                    <input type="search" name="type" class="form-control" placeholder="Start typing..."> </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6">
+              <br> <label><b class="">Edit video: &nbsp;&nbsp;</b></label>
+              <a href="video-editor.html" class="btn btn-outline-primary">Video editor
+                <br> </a>
+              <div class="form-group my-2"> <label><b>Thumbnail:</b></label>
+                <img class="d-block img-fluid w-75" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg"> </div>
+              <a href="#" class="btn btn-outline-primary">Upload thumbnail</a>
+            </div>
+          </div>
+          <div class="col-md-12 p-0">
+            <div class="form-group my-2"> <label><b>People:</b></label>
+              <div class="row my-1">
+                <div class="align-self-center col-md-2">
+                  <p class="m-0 px-2">Guarantor:</p>
+                </div>
+                <div class="col-md-4">
+                  <input type="search" name="guarantor" class="form-control" placeholder="Start typing..."> </div>
+                <div class="col-md-4">
+                  <input type="text" name="email" class="form-control" placeholder="Email"> </div>
+                <div class="align-self-center col-md-2">
+                  <div class="form-check m-0"> <label class="form-check-label">
+      								<input type="checkbox" class="form-check-input" value="on" checked="">
+      								Show email
+    								</label> </div>
+                </div>
+              </div>
+              <div class="row my-1">
+                <div class="align-self-center col-md-2">
+                  <p class="m-0 px-2">Lecturer:</p>
+                </div>
+                <div class="col-md-4">
+                  <input type="search" name="guarantor" class="form-control" placeholder="Start typing..."> </div>
+                <div class="col-md-4">
+                  <input type="text" name="email" class="form-control" placeholder="Email"> </div>
+                <div class="align-self-center col-md-2">
+                  <div class="form-check m-0"> <label class="form-check-label">
+      								<input type="checkbox" class="form-check-input" value="on" checked="">
+      								Show email
+    								</label> </div>
+                </div>
+              </div>
+              <div class="row my-1">
+                <div class="align-self-center col-md-2">
+                  <p class="m-0 px-2">Lecturer:</p>
+                </div>
+                <div class="col-md-4">
+                  <input type="search" name="guarantor" class="form-control" placeholder="Start typing..."> </div>
+                <div class="align-self-center col-md-2">
+                  <div class="form-check m-0"> <label class="form-check-label">
+      								<input type="checkbox" class="form-check-input" value="on">
+      								Show email
+    								</label> </div>
+                </div>
+              </div>
+              <div class="row my-1">
+                <div class="align-self-center col-md-2"></div>
+                <div class="col-md-4">
+                  <div class="btn-group">
+                    <button class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown">Add people</button>
+                    <div class="dropdown-menu">
+                      <a class="dropdown-item" href="">Guarantor</a>
+                      <a class="dropdown-item" href="">Lecturer</a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="row my-4">
+                <div class="col-md-2">
+                  <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed?ui=0">
+                    <button class="btn btn-primary" type="button">Save</button>
+                  </a>
+                </div>
+                <div class="col-md-8">
+                  <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed?ui=0" class="btn btn-outline-danger">Delete video</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="bg-light text-muted py-2" style="border-top: 1px solid rgba(0, 0, 0, 0.125);">
+    <div class="container">
+      <div class="row">
+        <div class="align-self-center col-md-2">
+          <a href="https://www.fit.vutbr.cz/" target="_blank">
+            <img class="d-block" src="../fit.png"> </a>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="text-center m-0"> Božetěchova 1/2 • 612 66 Brno • Czech Republic </p>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="m-0 text-right"> © Faculty of Information Technology, BUT </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+</body>
+
+</html>

+ 96 - 0
www/mockup/dashboard/edit-video.scss

@@ -0,0 +1,96 @@
+
+
+// Semantic color scheme
+$theme-colors: (
+  primary: #007bff,
+  secondary: #004EA3,
+  success: #28a745,
+  info: #428bca,
+  warning: #ffc107,
+  danger: #dc3545,
+  light: #f8f9fa,
+  dark: #343a40
+);
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+ 
+$enable-rounded:            true !default;
+$enable-shadows:            false;
+$enable-gradients:          false;
+$enable-transitions:        true !default;
+$enable-hover-media-query:  false !default;
+$enable-grid-classes:       true !default;
+$enable-print-styles:       true !default;
+
+// Variables
+//
+// Theme settings.
+
+$body-bg: white;
+$body-color: #292b2c;
+$body-color-inverse: invert($body-color) !default;
+$link-color: #007bff;
+
+
+$font-family-base: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+$headings-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+
+$font-size-base: 1rem; // Assumes the browser default, typically `16px`
+$font-size-h1: 2.5 * $font-size-base;
+$font-size-h2: 2 * $font-size-base;
+$font-size-h3: 1.75 * $font-size-base;
+$font-size-h4: 1.5 * $font-size-base;
+$font-size-h5: 1.25 * $font-size-base;
+$font-size-h6: $font-size-base;
+
+$display1-size: 6 * $font-size-base;
+$display2-size: 5.5 * $font-size-base;
+$display3-size: 4.5 * $font-size-base;
+$display4-size: 3.5 * $font-size-base;
+
+$border-radius: .25rem;
+
+
+@import 'bootstrap-4.0.0-beta.1';
+
+
+body > * {
+  background-size: cover;
+}
+
+.opaque-overlay {
+  overflow: hidden;
+  position: relative; 
+  > *:first-child:before {
+    content: '';
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: absolute;
+    left: 0px;
+    top: 0px; 
+    pointer-events:none;
+    background: rgba(map-get($theme-colors, 'dark'), 0.25);
+  }
+}
+
+
+.gradient-overlay {
+  overflow: hidden;
+  position: relative; 
+  > *:first-child:before {
+    content: '';
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: absolute;
+    left: 0px;
+    top: 0px; 
+    pointer-events:none;
+    background: linear-gradient(to top , map-get($theme-colors, 'dark') 0%, transparent 100%);
+
+  }
+}
+

+ 155 - 0
www/mockup/dashboard/file.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+  <link rel="stylesheet" href="edit-video.css"> </head>
+
+<body class="">
+  <div class="">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="active nav-link"> <i class="fa fa-flag"></i>&nbsp;English</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Česky</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="nav-link active"> <i class="fa fa-tachometer"></i>&nbsp;Dashboard</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../main.html">Website</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="py-3">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-5">
+          <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed">
+            <img class="img-fluid d-block" src="https://medusa.fit.vutbr.cz/traffic/wp-content/logos/fit.png"> </a>
+        </div>
+        <div class="col-md-6">
+          <h1 class="display-2 text-secondary m-0 p-0">Administration</h1>
+        </div>
+      </div>
+    </div>
+  </div>
+  <nav class="navbar navbar-expand-md bg-primary navbar-dark p-1">
+    <div class="container">
+      <a class="navbar-brand text-white"><i class="fa d-inline fa-lg fa-user"></i><b>  User: <span style="font-weight: normal;">xkudla15</span></b></a>
+      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent"
+        aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
+      <div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
+        <a class="btn navbar-btn ml-2 text-white btn-secondary" href="../main.html"><i class="fa d-inline fa-lg fa-sign-out"></i>&nbsp;Sign out</a>
+      </div>
+    </div>
+  </nav>
+  <div class="py-4">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-3">
+          <h2 class="">Administration:</h2>
+          <ul class="list-group">
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed?ui=0" class="text-dark d-block"> Educational videos </a>
+            </li>
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/aaf7a1106?ui=0" class="text-dark d-block">Lectures records</a>
+            </li>
+            <li class="list-group-item bg-info">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/aa8bb2077?ui=0" class="text-white d-block">Files</a>
+            </li>
+            <li class="list-group-item">
+              <a href="processes.html" class="text-dark d-block">Processes and templates</a>
+            </li>
+            <li class="list-group-item">
+              <a href="../main.html" class="text-dark d-block"><i class="d-block  fa fa-share" style="font-size: 1rem; display: inline !important;"><span style="font-size: 1.25rem;">&nbsp;</span></i>back to videoportal</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-9">
+          <h1 class="">Edit file:</h1>
+          <p class="lead"><b>ID: </b>38
+            <br><b>URL:</b> http://www.prednasky.com/file/2017/11/5698
+            <br> </p>
+          <div class="row">
+            <div class="col-md-6">
+              <form class="" method="post" action="">
+                <div class="form-group my-2"> <label><b>Name:</b></label>
+                  <input type="text" name="name" class="form-control" placeholder="Name of file"> </div>
+                <div class="form-group my-2"> <label><b contenteditable="true">Downloaded:</b></label>
+                  <div class="row">
+                    <div class="col-md-4 align-self-center" style="transition: all 0.25s;">
+                      <p class="m-0 text-left">200 downloads</p>
+                    </div>
+                    <div class="col-md-3" style="transition: all 0.25s;">
+                      <a href="#" class="btn btn-outline-primary">Reset downloads</a>
+                    </div>
+                  </div>
+                </div>
+                <div class="form-group my-2"> <label><b>Type:</b></label>
+                  <br>
+                  <div class="btn-group">
+                    <button class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown">Any</button>
+                    <div class="dropdown-menu">
+                      <a class="dropdown-item" href="#">Any</a>
+                      <div class="dropdown-divider"></div>
+                      <a class="dropdown-item" href="#">Subtitles</a>
+                      <a class="dropdown-item" href="#">Presentation</a>
+                      <a class="dropdown-item" href="#">Attachement</a>
+                    </div>
+                  </div>
+                </div>
+                <div class="row my-4">
+                  <div class="col-md-3">
+                    <button type="submit" class="btn btn-primary">Save</button>
+                  </div>
+                  <div class="col-md-5 ">
+                    <button type="button" class="btn btn-info" data-dismiss="modal">Discard changes</button>
+                  </div>
+                  <div class="col-md-3">
+                    <a href="#" class="btn btn-outline-danger">Delete file</a>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="bg-light text-muted py-2" style="border-top: 1px solid rgba(0, 0, 0, 0.125);">
+    <div class="container">
+      <div class="row">
+        <div class="align-self-center col-md-2">
+          <a href="https://www.fit.vutbr.cz/" target="_blank">
+            <img class="d-block" src="../fit.png"> </a>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="text-center m-0"> Božetěchova 1/2 • 612 66 Brno • Czech Republic </p>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="m-0 text-right"> © Faculty of Information Technology, BUT </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+</body>
+
+</html>

BIN
www/mockup/dashboard/pool.PNG


+ 52 - 0
www/mockup/dashboard/pool.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+  <link rel="stylesheet" href="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-beta.1.css" type="text/css">
+  <link rel="stylesheet" href="edit-video.css"> </head>
+
+<body class="" style="background: url('pool_bg.PNG') no-repeat fixed #BEC0BD">
+  <div class="text-center m-5 bg-light border border-primary">
+    <div class="container">
+      <div class="row my-2">
+        <div class="col-md-12">
+          <div class="row border border-light">
+            <div class="col-md-8 align-self-end">
+              <h1 class="text-left text-dark">Select file:</h1>
+            </div>
+            <div class="col-md-4 text-right align-self-start">
+              <p class="lead m-0">Close<i class="fa fa-times fa-2x"></i></p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-4">
+          <ul class="list-group text-left">
+            <li class="list-group-item bg-info text-white">Media library</li>
+            <li class="list-group-item">Upload file</li>
+            <li class="list-group-item">Upload via URL</li>
+          </ul>
+        </div>
+        <div class="col-md-8">
+          <img class="img-fluid" src="pool.PNG"> </div>
+      </div>
+      <div class="row my-4">
+        <div class="col-md-4 text-right">
+          <a class="btn disabled btn-primary" href="">Use selected</a>
+        </div>
+        <div class="col-md-8 text-left">
+          <button class="btn btn-outline-primary" data-toggle="" type="button">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+</body>
+
+</html>

BIN
www/mockup/dashboard/pool_bg.PNG


+ 125 - 0
www/mockup/dashboard/processes.html

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+  <link rel="stylesheet" href="edit-video.css"> </head>
+
+<body class="">
+  <div class="">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="active nav-link"> <i class="fa fa-flag"></i>&nbsp;English</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Česky</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="nav-link active"> <i class="fa fa-tachometer"></i>&nbsp;Dashboard</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../main.html">Website</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="py-3">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-5">
+          <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed">
+            <img class="img-fluid d-block" src="https://medusa.fit.vutbr.cz/traffic/wp-content/logos/fit.png"> </a>
+        </div>
+        <div class="col-md-6">
+          <h1 class="display-2 text-secondary m-0 p-0">Administration</h1>
+        </div>
+      </div>
+    </div>
+  </div>
+  <nav class="navbar navbar-expand-md bg-primary navbar-dark p-1">
+    <div class="container">
+      <a class="navbar-brand text-white"><i class="fa d-inline fa-lg fa-user"></i><b>  User: <span style="font-weight: normal;">xkudla15</span></b></a>
+      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent"
+        aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
+      <div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
+        <a class="btn navbar-btn ml-2 text-white btn-secondary" href="../main.html"><i class="fa d-inline fa-lg fa-sign-out"></i>&nbsp;Sign out</a>
+      </div>
+    </div>
+  </nav>
+  <div class="py-4">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-3">
+          <h2 class="">Administration:</h2>
+          <ul class="list-group">
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed?ui=0" class="text-dark d-block"> Educational videos </a>
+            </li>
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/aaf7a1106?ui=0" class="text-dark d-block">Lectures records</a>
+            </li>
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/aa8bb2077?ui=0" class="text-dark d-block">Files</a>
+            </li>
+            <li class="list-group-item bg-info">
+              <a href="processes.html" class="text-white d-block">Processes and templates</a>
+            </li>
+            <li class="list-group-item">
+              <a href="../main.html" class="text-dark d-block"><i class="d-block  fa fa-share" style="font-size: 1rem; display: inline !important;"><span style="font-size: 1.25rem;">&nbsp;</span></i>back to videoportal</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-9">
+          <h1 class="">Processes and templates:</h1>
+          <ul class="nav nav-tabs my-3">
+            <li class="nav-item bg-info">
+              <a href="processes.html" class="nav-link text-white"><i class="fa fa-cogs"></i>&nbsp;Processes</a>
+            </li>
+            <li class="nav-item mx-2">
+              <a class="nav-link text-dark" href="tokens.html"><i class="fa fa-files-o"></i>&nbsp;Tokens</a>
+            </li>
+            <li class="nav-item">
+              <a href="templates.html" class="nav-link text-dark"><i class="fa fa-book"></i>&nbsp;Templates</a>
+            </li>
+          </ul>
+          <div class="row">
+            <div class="col-md-12">
+              <img class="d-block img-fluid" src="processes.png"> </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="bg-light text-muted py-2" style="border-top: 1px solid rgba(0, 0, 0, 0.125);">
+    <div class="container">
+      <div class="row">
+        <div class="align-self-center col-md-2">
+          <a href="https://www.fit.vutbr.cz/" target="_blank">
+            <img class="d-block" src="../fit.png"> </a>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="text-center m-0"> Božetěchova 1/2 • 612 66 Brno • Czech Republic </p>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="m-0 text-right"> © Faculty of Information Technology, BUT </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+</body>
+
+</html>

BIN
www/mockup/dashboard/processes.png


+ 124 - 0
www/mockup/dashboard/templates.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+  <link rel="stylesheet" href="edit-video.css"> </head>
+
+<body class="">
+  <div class="">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="active nav-link"> <i class="fa fa-flag"></i>&nbsp;English</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Česky</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="nav-link active"> <i class="fa fa-tachometer"></i>&nbsp;Dashboard</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../main.html">Website</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="py-3">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-5">
+          <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed">
+            <img class="img-fluid d-block" src="https://medusa.fit.vutbr.cz/traffic/wp-content/logos/fit.png"> </a>
+        </div>
+        <div class="col-md-6">
+          <h1 class="display-2 text-secondary m-0 p-0">Administration</h1>
+        </div>
+      </div>
+    </div>
+  </div>
+  <nav class="navbar navbar-expand-md bg-primary navbar-dark p-1">
+    <div class="container">
+      <a class="navbar-brand text-white"><i class="fa d-inline fa-lg fa-user"></i><b>  User: <span style="font-weight: normal;">xkudla15</span></b></a>
+      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent"
+        aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
+      <div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
+        <a class="btn navbar-btn ml-2 text-white btn-secondary" href="../main.html"><i class="fa d-inline fa-lg fa-sign-out"></i>&nbsp;Sign out</a>
+      </div>
+    </div>
+  </nav>
+  <div class="py-4">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-3">
+          <h2 class="">Administration:</h2>
+          <ul class="list-group">
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed?ui=0" class="text-dark"> Educational videos </a>
+            </li>
+            <li class="list-group-item">Lectures records</li>
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/aa8bb2077?ui=0" class="text-dark">Files</a>
+            </li>
+            <li class="list-group-item bg-info">
+              <a href="processes.html" class="text-white">Processes and templates</a>
+            </li>
+            <li class="list-group-item">
+              <a href="../main.html" class="text-dark"><i class="d-block  fa fa-share" style="font-size: 1rem; display: inline !important;"><span style="font-size: 1.25rem;">&nbsp;</span></i>back to videoportal</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-9">
+          <h1 class="">Processes and templates:</h1>
+          <ul class="nav nav-tabs my-3">
+            <li class="nav-item">
+              <a href="processes.html" class="nav-link text-dark"><i class="fa fa-cogs"></i>&nbsp;Processes</a>
+            </li>
+            <li class="nav-item mx-2">
+              <a class="nav-link text-dark" href="tokens.html"><i class="fa fa-files-o"></i>&nbsp;Tokens</a>
+            </li>
+            <li class="nav-item bg-info">
+              <a href="templates.html" class="nav-link text-white"><i class="fa fa-book"></i>&nbsp;Templates</a>
+            </li>
+          </ul>
+          <div class="row">
+            <div class="col-md-12">
+              <img class="d-block img-fluid" src="templates.png"> </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="bg-light text-muted py-2" style="border-top: 1px solid rgba(0, 0, 0, 0.125);">
+    <div class="container">
+      <div class="row">
+        <div class="align-self-center col-md-2">
+          <a href="https://www.fit.vutbr.cz/" target="_blank">
+            <img class="d-block" src="../fit.png">
+          </a>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="text-center m-0"> Božetěchova 1/2 • 612 66 Brno • Czech Republic </p>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="m-0 text-right"> © Faculty of Information Technology, BUT </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+</body>
+
+</html>

BIN
www/mockup/dashboard/templates.png


+ 124 - 0
www/mockup/dashboard/tokens.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+  <link rel="stylesheet" href="edit-video.css"> </head>
+
+<body class="">
+  <div class="">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="active nav-link"> <i class="fa fa-flag"></i>&nbsp;English</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Česky</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="nav-link active"> <i class="fa fa-tachometer"></i>&nbsp;Dashboard</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../main.html">Website</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="py-3">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-5">
+          <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed">
+            <img class="img-fluid d-block" src="https://medusa.fit.vutbr.cz/traffic/wp-content/logos/fit.png"> </a>
+        </div>
+        <div class="col-md-6">
+          <h1 class="display-2 text-secondary m-0 p-0">Administration</h1>
+        </div>
+      </div>
+    </div>
+  </div>
+  <nav class="navbar navbar-expand-md bg-primary navbar-dark p-1">
+    <div class="container">
+      <a class="navbar-brand text-white"><i class="fa d-inline fa-lg fa-user"></i><b>  User: <span style="font-weight: normal;">xkudla15</span></b></a>
+      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent"
+        aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
+      <div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
+        <a class="btn navbar-btn ml-2 text-white btn-secondary" href="../main.html"><i class="fa d-inline fa-lg fa-sign-out"></i>&nbsp;Sign out</a>
+      </div>
+    </div>
+  </nav>
+  <div class="py-4">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-3">
+          <h2 class="">Administration:</h2>
+          <ul class="list-group">
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed?ui=0" class="text-dark"> Educational videos </a>
+            </li>
+            <li class="list-group-item">Lectures records</li>
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/aa8bb2077?ui=0" class="text-dark">Files</a>
+            </li>
+            <li class="list-group-item bg-info">
+              <a href="processes.html" class="text-white">Processes and templates</a>
+            </li>
+            <li class="list-group-item">
+              <a href="../main.html" class="text-dark"><i class="d-block  fa fa-share" style="font-size: 1rem; display: inline !important;"><span style="font-size: 1.25rem;">&nbsp;</span></i>back to videoportal</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-9">
+          <h1 class="">Processes and templates:</h1>
+          <ul class="nav nav-tabs my-3">
+            <li class="nav-item">
+              <a href="processes.html" class="nav-link text-dark"><i class="fa fa-cogs"></i>&nbsp;Processes</a>
+            </li>
+            <li class="nav-item mx-2 bg-info">
+              <a class="nav-link text-white" href="tokens.html"><i class="fa fa-files-o"></i>&nbsp;Tokens</a>
+            </li>
+            <li class="nav-item">
+              <a href="templates.html" class="nav-link text-dark"><i class="fa fa-book"></i>&nbsp;Templates</a>
+            </li>
+          </ul>
+          <div class="row">
+            <div class="col-md-12">
+              <img class="d-block img-fluid" src="tokens.png"> </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="bg-light text-muted py-2" style="border-top: 1px solid rgba(0, 0, 0, 0.125);">
+    <div class="container">
+      <div class="row">
+        <div class="align-self-center col-md-2">
+          <a href="https://www.fit.vutbr.cz/" target="_blank">
+            <img class="d-block" src="../fit.png">
+          </a>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="text-center m-0"> Božetěchova 1/2 • 612 66 Brno • Czech Republic </p>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="m-0 text-right"> © Faculty of Information Technology, BUT </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+</body>
+
+</html>

BIN
www/mockup/dashboard/tokens.png


BIN
www/mockup/dashboard/vid-thumb.PNG


+ 180 - 0
www/mockup/dashboard/video-editor.html

@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+  <link rel="stylesheet" href="edit-video.css"> </head>
+
+<body class="">
+  <div class="">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="active nav-link"> <i class="fa fa-flag"></i>&nbsp;English</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Česky</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="nav-link active"> <i class="fa fa-tachometer"></i>&nbsp;Dashboard</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../main.html">Website</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="py-3">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-5">
+          <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed">
+            <img class="img-fluid d-block" src="https://medusa.fit.vutbr.cz/traffic/wp-content/logos/fit.png"> </a>
+        </div>
+        <div class="col-md-6">
+          <h1 class="display-2 text-secondary m-0 p-0">Administration</h1>
+        </div>
+      </div>
+    </div>
+  </div>
+  <nav class="navbar navbar-expand-md bg-primary navbar-dark p-1">
+    <div class="container">
+      <a class="navbar-brand text-white"><i class="fa d-inline fa-lg fa-user"></i><b>  User: <span style="font-weight: normal;">xkudla15</span></b></a>
+      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent"
+        aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
+      <div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
+        <a class="btn navbar-btn ml-2 text-white btn-secondary" href="../main.html"><i class="fa d-inline fa-lg fa-sign-out"></i>&nbsp;Sign out</a>
+      </div>
+    </div>
+  </nav>
+  <div class="py-4">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-3">
+          <h2 class="">Administration:</h2>
+          <ul class="list-group">
+            <li class="list-group-item bg-info text-white">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed?ui=0" class="text-white"> Educational videos </a>
+            </li>
+            <li class="list-group-item">Lectures records</li>
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/aa8bb2077?ui=0" class="text-dark">Files</a>
+            </li>
+            <li class="list-group-item">
+              <a href="processes.html" class="text-dark">Processes and templates</a>
+            </li>
+            <li class="list-group-item">
+              <a href="../main.html" class="text-dark"><i class="d-block  fa fa-share" style="font-size: 1rem; display: inline !important;"><span style="font-size: 1.25rem;">&nbsp;</span></i>back to videoportal</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-9">
+          <h1 class="">Video editor:</h1>
+          <div class="row">
+            <div class="col-md-6">
+              <div class="embed-responsive embed-responsive-4by3">
+                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/i__1Z5a9Sak?autoplay=0" allowfullscreen=""> </iframe>
+              </div>
+              <div class="form-group my-2"> <label><b>Subtitles:</b></label>
+                <div class="row">
+                  <div class="col-md-12">
+                    <p class="m-0">no subtitles</p>
+                  </div>
+                </div>
+                <a href="pool.html" class="btn btn-outline-primary my-2" target="_blank">Select file</a>
+              </div>
+              <div class="form-group"> <label><b>Slideshow:</b></label>
+                <p class="m-0">Prezentace gramatiky XAN/BAN4</p>
+                <a href="#" class="btn btn-outline-primary my-2">Remove slideshow</a>
+              </div>
+            </div>
+            <div class="col-md-6">
+              <h4 class="">Time: 3:27 / 50:32</h4>
+              <div class="row my-2">
+                <div class="col-md-4">
+                  <a href="#" class="btn btn-outline-primary">Start here</a>
+                </div>
+                <div class="col-md-4">
+                  <a href="#" class="btn btn-outline-primary">Split here</a>
+                </div>
+                <div class="col-md-4">
+                  <a href="#" class="btn btn-outline-primary">End here</a>
+                </div>
+              </div>
+              <div class="row my-3 py-2 bg-light">
+                <div class="col-md-4"> <i class="d-block  fa fa-lg fa-arrows"></i>
+                  <img class="d-block img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg">
+                  <div class="row">
+                    <div class="col-md-4"><i class="d-block  fa fa-times-circle fa-lg"></i></div>
+                    <div class="col-md-8 text-right">
+                      <p class="text-right">2:50</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-md-4"> <i class="d-block  fa fa-arrows fa-lg"></i>
+                  <img class="img-fluid d-block my-2" src="vid-thumb.PNG">
+                  <div class="row">
+                    <div class="col-md-6 text-center"><i class="d-block  fa fa-lg fa-times-circle"></i></div>
+                    <div class="col-md-6">
+                      <p class="">30:23</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-md-4"> <i class="d-block  fa fa-lg fa-arrows"></i>
+                  <img class="img-fluid d-block" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg">
+                  <div class="row">
+                    <div class="col-md-6"><i class="d-block  fa fa-times-circle fa-lg"></i></div>
+                    <div class="col-md-5">
+                      <p class="">7:19</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="form-group"> <label><b>Insert file:</b></label>
+                <br>
+                <a href="pool.html" class="btn btn-outline-primary" target="_blank">Select file</a>
+              </div>
+            </div>
+          </div>
+          <a href="edit-video.html">
+            <button type="button" class="btn btn-primary my-3">Save changes</button>
+          </a>
+          <a href="edit-video.html">
+            <button type="button" class="btn btn-info mx-4" data-dismiss="modal">Discard changes</button>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="bg-light text-muted py-2" style="border-top: 1px solid rgba(0, 0, 0, 0.125);">
+    <div class="container">
+      <div class="row">
+        <div class="align-self-center col-md-2">
+          <a href="https://www.fit.vutbr.cz/" target="_blank">
+            <img class="d-block" src="../fit.png"> </a>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="text-center m-0"> Božetěchova 1/2 • 612 66 Brno • Czech Republic </p>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="m-0 text-right"> © Faculty of Information Technology, BUT </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+</body>
+
+</html>

BIN
www/mockup/fit.png


+ 28 - 0
www/mockup/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<body>
+<h1>Start here:</h1>
+<a href="http://www.prednasky.com/mockup/main.html">http://www.prednasky.com/mockup/main.html</a>
+
+<h3>Available pages:</h3>
+<ul>
+	<li><a href="main.html">/</a></li>
+	<li><a href="video.html">/Video</li>
+	<li><a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed?ui=0">/dashboard/Educational videos</a></li>
+	<li><a href="dashboard/edit-video.html">/dashboard/Edit video (Basic informations)</a></li>
+	<li><a href="dashboard/edit-video-attachements.html">/dashboard/Edit video (Attachements)</a></li>
+	<li><a href="dashboard/edit-video-links.html">/dashboard/Edit video (Related videos)</a></li>
+	<li><a href="dashboard/video-editor.html">/dashboard/Video editor</a></li>
+	<li><a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/aaf7a1106">/dashboard/Lectures records</a></li>
+	<li><a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/aa8bb2077?ui=0">/dashboard/Files</a></li>
+	<li><a href="dashboard/file.html">/dashboard/Edit file</a></li>
+	<li><a href="dashboard/processes.html">/dashboard/Processes and templates (Processes)
+	<li><a href="dashboard/tokens.html">/dashboard/Processes and templates (Tokens)
+	<li><a href="dashboard/templates.html">/dashboard/Processes and templates (Templates)</a></li>
+	<li><a href="http://www.prednasky.com/mockup/dashboard/pool.html">Dialog - Select file</li>
+</ul>
+</html>

+ 138 - 0
www/mockup/main.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+  <link rel="stylesheet" href="video.css"> </head>
+
+<body>
+  <div class="">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="active nav-link"> <i class="fa fa-flag"></i>&nbsp;English</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Česky</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="active nav-link"> <i class="fa fa-home"></i>&nbsp;Website</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed?ui=0">Dashboard</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="py-3">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-5">
+          <a href="main.html">
+            <img class="img-fluid d-block" src="https://medusa.fit.vutbr.cz/traffic/wp-content/logos/fit.png"> </a>
+        </div>
+        <div class="col-md-6">
+          <h1 class="display-2 text-secondary p-0 m-0">Videoportal</h1>
+        </div>
+      </div>
+    </div>
+  </div>
+  <nav class="navbar navbar-expand-md bg-primary navbar-dark p-1">
+    <div class="container">
+      <a class="navbar-brand" href="#"><i class="fa d-inline fa-lg fa-user"></i><b>&nbsp;User: <span style="font-weight: normal;">Not logged</span><br></b></a>
+      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent"
+        aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
+      <div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
+        <a class="btn navbar-btn ml-2 text-white btn-secondary" href="https://cas.fit.vutbr.cz/?cosign-FIT-VIDEO1&amp;https://video1.fit.vutbr.cz/av/"><i class="fa d-inline fa-lg fa-sign-in"></i>&nbsp;Sign in</a>
+      </div>
+    </div>
+  </nav>
+  <div class="py-4">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-3">
+          <h2 class="">Semester:</h2>
+          <ul class="list-group">
+            <li class="list-group-item">2017 zima</li>
+            <li class="list-group-item">2017 léto</li>
+            <li class="list-group-item">2016 zima</li>
+            <li class="list-group-item">2016 léto</li>
+          </ul>
+        </div>
+        <div class="col-md-9">
+          <div class="row">
+            <div class="col-md-4">
+              <h1 class="">New videos:
+                <br> </h1>
+            </div>
+            <div class="text-center align-self-center col-md-5">
+              <div class="row">
+                <div class="col-md-9">
+                  <input class="form-control mr-2" type="text" placeholder="Search"> </div>
+                <div class="text-right offset-md-2 col-md-3">
+                  <button class="btn btn-primary" type="submit">Search</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <a href="http://www.prednasky.com/mockup/video.html">
+            <img class="d-block img-fluid py-2" src="video-grid.PNG"> </a>
+          <div class="col-md-12 text-center">
+            <ul class="pagination text-center">
+              <li class="page-item">
+                <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a>
+              </li>
+              <li class="page-item">
+                <a class="page-link" href="#">1</a>
+              </li>
+              <li class="page-item">
+                <a class="page-link" href="#">2</a>
+              </li>
+              <li class="page-item">
+                <a class="page-link" href="#">3</a>
+              </li>
+              <li class="page-item">
+                <a class="page-link" href="#">4</a>
+              </li>
+              <li class="page-item">
+                <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="bg-light text-muted py-2" style="border-top: 1px solid rgba(0, 0, 0, 0.125);">
+    <div class="container">
+      <div class="row">
+        <div class="align-self-center col-md-2">
+          <a href="https://www.fit.vutbr.cz/" target="_blank">
+            <img class="d-block" src="fit.png">
+          </a>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="text-center m-0"> Božetěchova 1/2 • 612 66 Brno • Czech Republic </p>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="m-0 text-right"> © Faculty of Information Technology, BUT </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+</body>
+
+</html>

BIN
www/mockup/player.PNG


BIN
www/mockup/video-grid.PNG


File diff suppressed because it is too large
+ 5580 - 0
www/mockup/video.css


+ 146 - 0
www/mockup/video.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+  <link rel="stylesheet" href="video.css"> </head>
+
+<body>
+  <div class="">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="#" class="active nav-link"> <i class="fa fa-flag"></i>&nbsp;English</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Česky</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-6">
+          <ul class="nav nav-pills">
+            <li class="nav-item">
+              <a href="main.html" class="active nav-link"> <i class="fa fa-home"></i>&nbsp;Website</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view/page/a543651ed?ui=0">Dashboard</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="py-3">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-5">
+          <a href="main.html">
+            <img class="img-fluid d-block" src="https://medusa.fit.vutbr.cz/traffic/wp-content/logos/fit.png">
+          </a>
+        </div>
+        <div class="col-md-6 align-self-center">
+          <h1 class="text-secondary m-0 p-0 display-2">Videoportal</h1>
+        </div>
+      </div>
+    </div>
+  </div>
+  <nav class="navbar navbar-expand-md bg-primary navbar-dark p-1">
+    <div class="container">
+      <a class="navbar-brand" href="#"><i class="fa d-inline fa-lg fa-user"></i><b>  User: <span style="font-weight: normal;">Not logged</span></b></a>
+      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent"
+        aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
+      <div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
+        <a class="btn navbar-btn ml-2 text-white btn-secondary" href="https://cas.fit.vutbr.cz/?cosign-FIT-VIDEO1&amp;https://video1.fit.vutbr.cz/av/"><i class="fa d-inline fa-lg fa-sign-in"></i>&nbsp;Sign in</a>
+      </div>
+    </div>
+  </nav>
+  <div class="py-4">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-3">
+          <h2 class="">Course:</h2>
+          <ul class="list-group">
+            <li class="list-group-item bg-info text-white">ACH</li>
+            <li class="list-group-item">IZP</li>
+            <li class="list-group-item">IMA</li>
+            <li class="list-group-item">IDS</li>
+            <li class="list-group-item">
+              <a href="https://app.moqups.com/vladankudlac@gmail.com/k4216TvJ5c/view?ui=0" class="text-dark"><i class="fa fa-share"></i>&nbsp;up to Semestr</a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-9">
+          <h1 class="">ACH – ACH Architektura procesorů</h1>
+          <img class="img-fluid d-block" src="player.PNG">
+          <div class="row">
+            <div class="col-md-6">
+              <p class="lead">Published: 22. 11. 2017 - 10:32
+                <br>Recorded: 7. 11. 2017 - 8:00-10:00</p>
+            </div>
+            <div class="col-md-6">
+              <p class="lead">Duration: 1:40:59</p>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-4">
+              <p class="lead">Course: ACH</p>
+            </div>
+            <div class="col-md-4">
+              <p class="lead">Semester: 2016 zima</p>
+            </div>
+            <div class="col-md-4">
+              <p class="lead">Garant: Joanmarie Diggs</p>
+            </div>
+          </div>
+          <p class="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Aliquam erat volutpat. Aenean vel massa quis mauris vehicula lacinia. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Donec quis nibh
+            at felis congue commodo. Etiam dictum tincidunt diam. Mauris tincidunt sem sed arcu. Nullam faucibus mi quis velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Duis pulvinar. Aliquam ante. Etiam dictum tincidunt diam. Fusce
+            nibh. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+          <h3 class="">Files:</h3>
+          <ul class="">
+            <li class="text-primary">Introductory presentation - Šedrlová (25 MB)</li>
+            <li class="text-primary">Slovníček a přehled mluvnice (723 kB)</li>
+            <li class="text-primary">Cvičení na slovní zásobu (28 B)</li>
+          </ul>
+          <div class="row">
+            <div class="col-md-6">
+              <h3 class="">Previous video:</h3>
+              <a href="video.html">
+                <img class="d-block img-fluid" src="video_prev.PNG"> </a>
+            </div>
+            <div class="col-md-6">
+              <h3 class="">Next video:</h3>
+              <a href="video.html">
+                <img class="img-fluid d-block" src="video_next.PNG"> </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="bg-light text-muted py-2" style="border-top: 1px solid rgba(0, 0, 0, 0.125);">
+    <div class="container">
+      <div class="row">
+        <div class="align-self-center col-md-2">
+          <a href="https://www.fit.vutbr.cz/" target="_blank">
+            <img class="d-block" src="fit.png">
+          </a>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="text-center m-0"> Božetěchova 1/2 • 612 66 Brno • Czech Republic </p>
+        </div>
+        <div class="align-self-center col-md-5">
+          <p class="m-0 text-right"> © Faculty of Information Technology, BUT </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+</body>
+
+</html>

+ 96 - 0
www/mockup/video.scss

@@ -0,0 +1,96 @@
+
+
+// Semantic color scheme
+$theme-colors: (
+  primary: #007bff,
+  secondary: #004EA3,
+  success: #28a745,
+  info: #428bca,
+  warning: #ffc107,
+  danger: #dc3545,
+  light: #f8f9fa,
+  dark: #343a40
+);
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+ 
+$enable-rounded:            true !default;
+$enable-shadows:            false;
+$enable-gradients:          false;
+$enable-transitions:        true !default;
+$enable-hover-media-query:  false !default;
+$enable-grid-classes:       true !default;
+$enable-print-styles:       true !default;
+
+// Variables
+//
+// Theme settings.
+
+$body-bg: white;
+$body-color: #292b2c;
+$body-color-inverse: invert($body-color) !default;
+$link-color: #007bff;
+
+
+$font-family-base: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+$headings-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+
+$font-size-base: 1rem; // Assumes the browser default, typically `16px`
+$font-size-h1: 2.5 * $font-size-base;
+$font-size-h2: 2 * $font-size-base;
+$font-size-h3: 1.75 * $font-size-base;
+$font-size-h4: 1.5 * $font-size-base;
+$font-size-h5: 1.25 * $font-size-base;
+$font-size-h6: $font-size-base;
+
+$display1-size: 6 * $font-size-base;
+$display2-size: 5.5 * $font-size-base;
+$display3-size: 4.5 * $font-size-base;
+$display4-size: 3.5 * $font-size-base;
+
+$border-radius: .25rem;
+
+
+@import 'bootstrap-4.0.0-beta.1';
+
+
+body > * {
+  background-size: cover;
+}
+
+.opaque-overlay {
+  overflow: hidden;
+  position: relative; 
+  > *:first-child:before {
+    content: '';
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: absolute;
+    left: 0px;
+    top: 0px; 
+    pointer-events:none;
+    background: rgba(map-get($theme-colors, 'dark'), 0.25);
+  }
+}
+
+
+.gradient-overlay {
+  overflow: hidden;
+  position: relative; 
+  > *:first-child:before {
+    content: '';
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: absolute;
+    left: 0px;
+    top: 0px; 
+    pointer-events:none;
+    background: linear-gradient(to top , map-get($theme-colors, 'dark') 0%, transparent 100%);
+
+  }
+}
+

BIN
www/mockup/video_next.PNG


BIN
www/mockup/video_prev.PNG


+ 0 - 0
www/robots.txt