Работа над CSS

src/css/grades.css

@@ -0,0 +1,37 @@
+table {
+	border: 1px solid #404040;
+	box-shadow: 0px 0px 5px 5px #404040;
+	border-radius: 10px;
+	margin: 0 auto;
+	border-collapse: collapse;
+	font-size: 16pt;
+}
+
+td, th {
+	padding: 0.5em;
+}
+
+tr {
+	color: #ccc;
+}
+
+tr:nth-child(even) {
+  background: #2B2B2B;
+}
+tr:nth-child(odd) {
+  background: #303030;
+}
+
+.problem:nth-child(even) {
+  background: linear-gradient(to right, #2B2B2B, #DC1E1E);
+}
+.problem:nth-child(odd) {
+  background: linear-gradient(to right, #303030, #D22828);
+}
+
+.perfect:nth-child(even) {
+  background: linear-gradient(to right, #2B2B2B, #A028B4);
+}
+.perfect:nth-child(odd) {
+  background: linear-gradient(to right, #303030, #9628C8);
+}

src/css/home.css

@@ -0,0 +1,4 @@
+body {
+  background-image: url('/img/wallpapers/train.jpg');
+  background-color: #396690;
+}

src/css/pockit.css

@@ -0,0 +1,179 @@
+:root {
+	--bg: #252525;
+	--fg: #ffffff;
+
+	--fg-5: #ccc;
+
+	--gray-6: #4f4f4f;
+	--gray-5: #404040;
+	--gray-4: #333;
+	--gray-3: #252525;
+
+	--card-border: #396690;
+}
+
+@font-face {
+	font-family: 'Finlandica';
+	src: url('/fonts/Finlandica-Regular.otf')
+} 
+
+body {
+	background-color: var(--bg);
+	color: var(--fg);
+	font-family: 'Finlandica';
+	font-size: 18px;
+	margin: 0;
+}
+
+/* Buttons */
+button {
+	background-color: var(--gray-4);
+	border: 1px solid var(--gray-5);
+	padding: 0.25em;
+	color: var(--fg-5);
+	font-size: 18px;
+}
+
+button:hover {
+	background-color: var(--gray-6);
+}
+
+a {
+	text-decoration: underline;
+}
+
+a:hover {
+	text-decoration: none;
+}
+
+.text-center {
+	text-align: center;
+}
+
+.actions {
+	display: flex;
+}
+
+.actions-row {
+	display: flex;
+	flex-flow: row;
+	width: 100%;
+	justify-content: center;
+}
+
+.action {
+	display: flex;
+	flex-flow: column;
+	text-align: center;
+	position: relative;
+	background-color: transparent;
+	border-radius: 10px;
+	padding: 1em;
+	transition: 100ms;
+}
+
+.action:hover {
+	background-color: rgba(255, 255, 255, 0.3);
+}
+
+.action > img {
+	max-width: 128px;
+	margin-top: 1em;
+}
+
+.action > a {
+	display: block;
+	width: 100%;
+	height: 100%;
+	color: var(--fg);
+}
+
+.stretched-link {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	z-index: 1;
+}
+
+/* Breadcrumbs */
+.breadcrumb {
+	padding: 0 .5rem;
+}
+
+.breadcrumb ul {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.breadcrumb li:not(:last-child)::after {
+  display: inline-block;
+  margin: 0 .25rem;
+  content: "→";
+  color: #808080;
+}
+
+.breadcrumb-item a {
+	color: #006DFF;
+}
+
+.breadcrumb-item.active {
+	color: #808080;
+}
+
+/* End Breadcrumbs */
+
+/* Cards */
+.card {
+	border: 2px solid var(--card-border);
+	border-radius: 15px;
+	background-color: #2f2f2f;
+	padding: 1em;
+	margin: 2em auto;
+	width: 80%;
+}
+
+.card.error {
+	background-color: #4B2224;
+	border-color: red;
+	color: #f9fbf8;
+}
+/* End Cards */
+
+/* Forms */
+
+.form-control-container {
+	margin: 1em auto;
+	position: relative;
+	display: grid;
+	grid-template-columns: 50% 50%;
+}
+
+label {
+	padding: 0.5em;
+}
+
+.form-control {
+	padding: 0.5em;
+	background-color: var(--bg);
+	color: var(--fg);
+	outline: none;
+	border: 1.5px solid transparent;
+	border-radius: 5px;
+	font-size: 14pt;
+}
+
+.form-control:focus {
+	border: 1.5px solid var(--card-border);
+	box-shadow: 0px 0px 2px 2px var(--card-border);
+}
+
+.form-control:hover {
+	box-shadow: 0px 0px 2px 2px var(--card-border);
+}
+
+/* End Forms */

src/css/regen-report.css

@@ -1,43 +1,43 @@
-#markup {
-	display: flex;
-	justify-content: center;
+#controls > textarea {
+	width: -moz-available;
+	resize: vertical;
+	background-color: #404040;
+	outline: none;
+	border: 1px solid var(--card-border);
+	color: var(--fg);
 }
 
-#markuparea {
-	width: 95%;
-	height: 100%;
-	resize: vertical;
+#control-buttons {
+	margin-bottom: 1em;
 }
 
-/*https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space*/
-#previewdiv {
+#preview {
 	font-family: timesnewroman;
 	background-color: #383838;
 	color: #aaa;
 	font-size: 12pt;
-	margin:0;
-	height: 70vh;
+	margin: 0;
 	overflow: scroll;
 }
 
-.preview span {
+#preview span {
 	position: absolute;
 	font-size: 12px;
 	user-select: none;
 }
 
 /* Контейнер страницы */
-.preview .page-container {
+#preview .page-container {
 	padding: 16px;
 }
 
 /* Разделитель */
-.preview hr {
+#preview hr {
 	width: 50%;
 }
 
 /* Все страницы */
-.preview .page {
+#preview .page {
 	background-position:2cm 1cm;
 	background-size: 18.5cm 28.2cm;
 	box-sizing: border-box;
@@ -53,37 +53,37 @@
 }
 
 /* Страницы с большой рамкой */
-.preview .page.big {
+#preview .page.big {
 	background-image: url(/img/regen/bigframe.gif);
 }
 
 /* Страницы с маленькой рамкой */
-.preview .page.small {
+#preview .page.small {
 	background-image: url(/img/regen/smallframe.gif);
 }
 
 /* Страницы без рамки */
-#previewdiv .page.tpage,
-#previewdiv .page.apage {
+#preview .page.tpage,
+#preview .page.apage {
 	padding: 2cm
 }
 
 /* Заголовок (по центру) */
-.preview .page .title {
+#preview .page .title {
 	text-align:center;
 	text-align-last:center;
 	text-indent:0cm;
 }
 
 /* Текст по правому краю */
-.preview .page .r {
+#preview .page .r {
 	text-align:right;
 	text-align-last:right;
 	text-indent:0cm;
 }
 
 /* Обычный текст */
-.preview .page p {
+#preview .page p {
 	line-height: 1.5;
 	padding: 0;
 	margin: 0;
@@ -93,12 +93,12 @@
 }
 
 /* Заголовок таблицы */
-.preview .page .tt {
+#preview .page .tt {
 	text-indent:0;
 }
 
 /* Изображение */
-.preview img {
+#preview img {
 	max-width: 12cm;
 	margin:0.5cm auto 0.25cm auto;
 	display:block;
@@ -112,67 +112,65 @@ td {padding: 0 0.3cm;vertical-align:top;}
 th {text-align:center !important;font-weight:normal}
 
 /* Текст в рамках */
-.preview .iz::after {content: "Изм.";}
-.preview .ls::after,
-.preview .pl::after {content: "Лист";}
-.preview .nd::after {content: "№ докум.";}
-.preview .pd::after {content: "Подпись";}
-.preview .dt::after {content: "Дата";}
-.preview .rz::after {content: "Разраб.";}
-.preview .lt::after {content: "Лит.";}
-.preview .al::after {content: "Листов";}
-.preview .pr::after {content: "Провер.";}
-.preview .nc::after {content: "Н. Контр.";}
-.preview .ut::after {content: "Утверд.";}
-
-.preview .page.big .co {left:9.2cm; bottom: 3.5cm; right:0.6cm;font-size:22px;text-align:center;}
-.preview .page.big .iz {left:2.1cm;bottom:3.1cm;}
-.preview .page.big .ls {left:3.15cm;bottom:3.1cm;}
-.preview .page.big .nd {left:4.7cm;bottom:3.1cm;}
-.preview .page.big .pd {left:6.6cm;bottom:3.1cm;}
-.preview .page.big .dt {left:8.24cm;bottom:3.1cm;}
-.preview .page.big .rz {left:2.15cm;bottom:2.6cm;}
-.preview .page.big .sr {left:4.13cm; bottom:2.6cm;}
-.preview .page.big .lt {left:15.6cm;bottom:2.6cm;}
-.preview .page.big .pl {left:17.1cm;bottom:2.6cm;}
-.preview .page.big .al {left:18.8cm;bottom:2.6cm;}
-.preview .page.big .pr {left:2.15cm;bottom:2.1cm;}
-.preview .page.big .st {left:4.13cm; bottom:2.1cm;}
-.preview .page.big .cp {left:16.71cm;right:2.9cm;bottom:2.1cm;text-align:center;}
-.preview .page.big .pc {left:18.1cm;right:0.6cm;bottom:2.1cm;text-align:center;}
-.preview .page.big .nm {left:9.1cm;bottom:1.6cm;right:5.85cm;font-size:16px;text-align:center;}
-.preview .page.big .gr {left:15.25cm;right:0.6cm;bottom:1cm;text-align:center;font-size:20px;}
-.preview .page.big .nc {left:2.15cm;bottom:1.1cm;}
-.preview .page.big .ut {left:2.15cm;bottom:0.6cm;}
-
-.preview .page.small .iz {left:2.15cm;bottom:0.6cm;}
-.preview .page.small .ls {left:3.15cm;bottom:0.6cm;}
-.preview .page.small .nd {left:4.61cm;bottom:0.6cm;}
-.preview .page.small .pd {left:6.6cm;bottom:0.6cm;}
-.preview .page.small .dt {left:8.25cm;bottom:0.6cm;}
-.preview .page.small .co {left:9.1cm;bottom:1.0cm;right:1.5cm;font-size:22px;text-align:center;}
-.preview .page.small .pl {left:19.55cm;bottom:1.55cm;}
-.preview .page.small .cp {left:19.5cm;bottom:0.90cm;right:0.5cm;text-align:center;}
+#preview .iz::after {content: "Изм.";}
+#preview .ls::after,
+#preview .pl::after {content: "Лист";}
+#preview .nd::after {content: "№ докум.";}
+#preview .pd::after {content: "Подпись";}
+#preview .dt::after {content: "Дата";}
+#preview .rz::after {content: "Разраб.";}
+#preview .lt::after {content: "Лит.";}
+#preview .al::after {content: "Листов";}
+#preview .pr::after {content: "Провер.";}
+#preview .nc::after {content: "Н. Контр.";}
+#preview .ut::after {content: "Утверд.";}
+
+#preview .page.big .co {left:9.2cm; bottom: 3.5cm; right:0.6cm;font-size:22px;text-align:center;}
+#preview .page.big .iz {left:2.1cm;bottom:3.1cm;}
+#preview .page.big .ls {left:3.15cm;bottom:3.1cm;}
+#preview .page.big .nd {left:4.7cm;bottom:3.1cm;}
+#preview .page.big .pd {left:6.6cm;bottom:3.1cm;}
+#preview .page.big .dt {left:8.24cm;bottom:3.1cm;}
+#preview .page.big .rz {left:2.15cm;bottom:2.6cm;}
+#preview .page.big .sr {left:4.13cm; bottom:2.6cm;}
+#preview .page.big .lt {left:15.6cm;bottom:2.6cm;}
+#preview .page.big .pl {left:17.1cm;bottom:2.6cm;}
+#preview .page.big .al {left:18.8cm;bottom:2.6cm;}
+#preview .page.big .pr {left:2.15cm;bottom:2.1cm;}
+#preview .page.big .st {left:4.13cm; bottom:2.1cm;}
+#preview .page.big .cp {left:16.71cm;right:2.9cm;bottom:2.1cm;text-align:center;}
+#preview .page.big .pc {left:18.1cm;right:0.6cm;bottom:2.1cm;text-align:center;}
+#preview .page.big .nm {left:9.1cm;bottom:1.6cm;right:5.85cm;font-size:16px;text-align:center;}
+#preview .page.big .gr {left:15.25cm;right:0.6cm;bottom:1cm;text-align:center;font-size:20px;}
+#preview .page.big .nc {left:2.15cm;bottom:1.1cm;}
+#preview .page.big .ut {left:2.15cm;bottom:0.6cm;}
+
+#preview .page.small .iz {left:2.15cm;bottom:0.6cm;}
+#preview .page.small .ls {left:3.15cm;bottom:0.6cm;}
+#preview .page.small .nd {left:4.61cm;bottom:0.6cm;}
+#preview .page.small .pd {left:6.6cm;bottom:0.6cm;}
+#preview .page.small .dt {left:8.25cm;bottom:0.6cm;}
+#preview .page.small .co {left:9.1cm;bottom:1.0cm;right:1.5cm;font-size:22px;text-align:center;}
+#preview .page.small .pl {left:19.55cm;bottom:1.55cm;}
+#preview .page.small .cp {left:19.5cm;bottom:0.90cm;right:0.5cm;text-align:center;}
 
 .opt {display:block;text-align:center !important;font-size:18px;color:white;font-family:sans;margin: 8px 0px;user-select:none;}
 .opt:hover {color:#005BFF;}
 
 @media print {
-
-	#tabs,
-	#printReportButton,
 	nav,
-	#printpreview hr {
+	#markuparea,
+	button,
+	#preview hr {
 		display: none;
 	}
 
-	#printpreview .page-container {
+	#preview .page-container {
 		padding: 0;
 	}
 
-	#printpreview .page {
-		background-color:#fff;
-		color:#000
+	#preview .page {
+		background-color: white;
+		color: black;
 	}
-
 }

src/fonts/.uuid

@@ -0,0 +1 @@
+7e5cae14-c32b-43da-8501-0943fa2a93f0

src/js/regenpreview.js

@@ -1,46 +1,36 @@
-$(document).ready(function() {
-
-	$("#tabs").tabs({
-		beforeActivate: function(e, ui) {
-			if (ui.newPanel.attr('id') == 'preview') {
-				// Открывается вкладка просмотра превью
-				// Отправляем запрос на сервер для генерации HTML
-				writePreview("#previewdiv");
-			}
-		}
-	});
+// Текущее состояние страницы
+// 0 - режим редактирования
+// 1 - режим просмотра превью
+var current_state = 0;
 
-	const elem = document.getElementById("markuparea");
-	textAreaAdjust(elem);
-	
+$(document).ready(function() {
+	textAreaAdjust(document.getElementById("markuparea"));
 });
 
 // При печати текста заставляет textbox расширяться
 function textAreaAdjust(element) {
-  element.style.height = "1px";
-  element.style.height = (25+element.scrollHeight)+"px";
+	element.style.height = "1px";
+	element.style.height = (25+element.scrollHeight)+"px";
 }
 
-function writePreview(selector, then_print=false) {
+function updatePreview() {
+	let new_text = $("#markuparea").val();
+	if (new_text == old_text) {
+		return;
+	}
+	old_text = new_text;
+
 	const str = document.location.toString();
 	const slash_idx = str.lastIndexOf('/');
 	const report_id = str.substring(slash_idx + 1);
 	$.post(
 		"/regen/gethtml",
 		{
-			markup: $("#markuparea").val(),
+			markup: new_text,
 			report_id: report_id
 		},
 		function (data, textStatus, xhr) {
-			$(selector).html(data);
-			if (then_print) {
-				window.print();
-				$("#printpreview").html("");
-			}
+			$("#preview").html(data);
 		}
 	);
-}
-
-function printReport() {
-	writePreview("#printpreview", true);
 }

src/views/GradesView.php

@@ -3,9 +3,13 @@
 
 class GradesView extends LayoutView {
 
+	public function customHead() { ?>
+<link rel='stylesheet' href='/css/grades.css'>
+	<?php }
+
 	public function content():void { ?>
 
-<h1>Оценки</h1>
+<h1 class='text-center'>Оценки</h1>
 
 <svg id="loading" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:transparent;display:block;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
 <g transform="translate(80,50)">

src/views/HomeView.php

@@ -3,48 +3,34 @@
 
 class HomeView extends LayoutView {
 	protected $welcome_text;
-	public function content():void { ?>
 
-<!--Добро пожаловать-->
-<h1><?= $this->welcome_text ?></h1>
-<h3>Выбери действие</h3>
+	protected function customHead() { ?>
+<link rel="stylesheet" href="/css/home.css">
+	<?php }
+	
+	public function content():void { ?>
 
-<div>
-	<div>
-		<p><a href="/regen/new">Создать отчёт</a></p>
-		<p><a href="/regen/new">Архив отчёт</a></p>
-		<p><a href="/grades">Оценки</a></p>
-	</div>
+<div class='text-center'>
+	<h1><?= $this->welcome_text ?></h1>
+	<h3>Выбери действие</h3>
 </div>
 
-<!--Меню действий-->
-<!--
-<div id='home-actions'>
-	<div class='home-action'>
-		<img src="/img/home-actions/file.png">
-		<a class='full-link' href="/regen/new" target="_blank">Создать отчёт<span></span></a>
-	</div>
-	<div class='home-action'>
-		<img src="/img/home-actions/archive.png">
-		<a class='full-link' href="/regen/archive">Архив отчётов<span></span></a>
-	</div>
-	<div class='home-action'>
-		<img src="/img/home-actions/table.png">
-		<a class='full-link' href="/regen/tabgen">Генератор таблиц<span></span></a>
-	</div>
-	<div class='home-action'>
-		<img src="/img/home-actions/settings.png">
-		<a class='full-link' href="#">Настройки<span></span></a>
-	</div>
-	<div class='home-action'>
-		<img src="/img/home-actions/lock.png">
-		<a class='full-link' href="/passwords">Менеджер паролей<span></span></a>
-	</div>
-	<div class='home-action'>
-		<img src="/img/home-actions/search.png">
-		<a class='full-link' href="/knowledge">Учебные материалы<span></span></a>
+<div class='actions' style='width: 50%; margin: auto;'>
+	<div class='actions-row'>
+		<div class='action'>
+			<img src="/img/actions/file.png">
+			<a href="/regen/new">Создать отчёт<span class='stretched-link'></span></a>
+		</div>
+		<div class='action'>
+			<img src="/img/actions/archive.png">
+			<a href="/regen/new">Архив отчётов<span class='stretched-link'></span></a>
+		</div>
+		<div class='action'>
+			<img src="/img/actions/exam.png">
+			<a href="/grades">Оценки<span class='stretched-link'></span></a>
+		</div>
 	</div>
 </div>
--->
 		
-<?php }}
+<?php }
+}

src/views/LayoutView.php

@@ -6,16 +6,16 @@ class LayoutView extends View {
 	protected $crumbs = array();
 
 	protected function breadcrumbs() { ?>
-<nav aria-label="breadcrumb">
-	<ol class="breadcrumb" style="--bs-breadcrumb-divider-color:var(--bs-light)">
+<nav class="breadcrumb">
+	<ul>
 	<?php foreach ($this->crumbs as $crumb => $url) {
 		if ($crumb === array_key_last($this->crumbs)) { ?>
-			<li class="text-light breadcrumb-item"><?= $crumb ?></li>
+			<li class="breadcrumb-item active"><?= $crumb ?></li>
 		<?php } else { ?>
-			<li class="breadcrumb-item active"><a href="<?= $url ?>"><?= $crumb ?></a></li>
+			<li class="breadcrumb-item"><a href="<?= $url ?>"><?= $crumb ?></a></li>
 		<?php } ?>
 	<?php } ?>
-	</ol>
+	</ul>
 </nav>
 <?php }
 
@@ -32,12 +32,13 @@ class LayoutView extends View {
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title><?= $this->page_title ?></title>
 		<link rel="stylesheet" href="/jqueryui/themes/base/jquery-ui.min.css">
+		<link rel="stylesheet" href="/css/pockit.css">
 		<script src="/jquery/jquery.min.js"></script>
 		<script src="/jqueryui/jquery-ui.min.js"></script>
 
 		<?php $this->customHead() ?>
 	</head>
-	<body class="container bg-dark text-light">
+	<body>
 		<?php $this->breadcrumbs(); ?>
 		<?php $this->content(); ?>
 	</body>

src/views/RegenEditView.php

@@ -10,24 +10,17 @@ class RegenEditView extends LayoutView {
 
 	public function content():void { ?>
 
-<div id="tabs">
-	<ul>
-		<li><a href="#markup"><span>Разметка</span></a></li>
-		<li><a href="#preview"><span>Превью</span></a></li>
-	</ul>
-
-	<div id="markup">
-		<textarea onkeyup="textAreaAdjust(this)" id="markuparea" autocomplete="off"><?= $this->markup ?></textarea>
+<div class='card' id="controls">
+	<div id='control-buttons'>
+		<button id='switchMarkup'>Разметка</button>
+		<button id='switchPreview'>Превью</button>
+		<button id='printReportButton' onclick="printReport()">Печать</button>
 	</div>
 
-	<div id="preview">
-		<div class='preview' id="previewdiv"></div>
-	</div>
+	<textarea onkeyup="textAreaAdjust(this)" id="markuparea" autocomplete="off"><?= $this->markup ?></textarea>
+	<div id="preview"></div>
 </div>
 
-<button id='printReportButton' onclick="printReport()">Печать</button>
-
-<div class='preview' id="printpreview"></div>
  
 <script src="/js/regenpreview.js"></script>
 <?php }

src/views/RegenNewReportView.php

@@ -7,7 +7,8 @@ class RegenNewReportView extends LayoutView {
 	protected $error_text;
 
 	protected function content():void { ?>
-<h1 class='page-title'>Создание отчёта</h1>
+
+<h1 class='text-center'>Создание отчёта</h1>
 
 <?php if (isset($this->error_text)) {?>
 	<div class='card error'>