added page for API documentation,

added content for page About

webapp/public/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

webapp/src/App.vue

@@ -1,15 +1,17 @@
 <template>
 	<div id="header">
-		<div>
+		<div class="logo">
 			<router-link to="/">
 				<img src="public/bugreport.svg" height="48" width="48" />
-				&nbsp;&nbsp;&nbsp;
+			</router-link>
+			<router-link to="/">
 				<h1>Bug Report</h1>
 			</router-link>
 		</div>
 		<div class="menu">
 			<router-link to="/add">Pridať bug</router-link>
 			<router-link to="/archive">Archív</router-link>
+			<router-link to="/api">API</router-link>
 			<router-link to="/about">O aplikácii</router-link>
 		</div>
 	</div>

webapp/src/assets/css/style.css

@@ -8,12 +8,12 @@
 	01 - GENERAL
 	02 - HEADER
 	03 - DASHBOARD
+	06 - API
+	07 - ABOUT
 	99 - LIGHT MODE
 
 */
 
-
-
 /* ----------------------------------------------------
    01 - GENERAL
    */
@@ -28,25 +28,27 @@
 	-moz-osx-font-smoothing: grayscale;
 
 	--color-bg: #242424;
-	--color-bg0: #0D5EAF;
+	--color-bg0: #0d5eaf;
 	--color-bg1: #449ef8;
 	--color-bg2: #449ef820;
 	--color-text0: #fff;
 	--color-text1: rgb(11, 11, 104);
+	--color-text2: #449ef8;
+	--color-text3: #7bb8f5;
 
 	/* color-scheme: light dark; */
 	color: var(--color-text0);
 	background-color: var(--color-bg);
-
 }
 
 a {
 	font-weight: 500;
-	color: #646cff;
+	color: var(--color-text2);
 	text-decoration: inherit;
 }
 a:hover {
-	color: #535bf2;
+	color: var(--color-text3);
+	text-shadow: 1px 1px 5px var(--color-bg1);
 }
 
 body {
@@ -112,6 +114,11 @@ button:focus-visible {
 #header a:visited {
 	color: var(--color-text0);
 }
+#header .logo {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
 #header .menu a,
 #header .menu a:visited {
 	border: 1px solid var(--color-text0);
@@ -169,7 +176,6 @@ button:focus-visible {
 	cursor: grab;
 }
 #dashboard .report .report-header .report-title {
-
 }
 #dashboard .report .report-header h3 {
 	margin: 0px;
@@ -191,6 +197,23 @@ button:focus-visible {
 	filter: brightness(1.2);
 }
 
+/* ----------------------------------------------------
+   06 - API
+   */
+#api {
+	margin: 0 auto;
+	padding: 20px;
+}
+
+/* ----------------------------------------------------
+   07 - ABOUT
+   */
+#about {
+	margin: 0 auto;
+	padding: 10px;
+	text-align: center;
+}
+
 /* ----------------------------------------------------
    99 - LIGHT MODE
    */

webapp/src/components/Report.vue

@@ -1,9 +1,9 @@
 <script setup>
 defineProps({
-  title: String,
-  description: String,
-  date: String
-})
+	title: String,
+	description: String,
+	date: String,
+});
 </script>
 <template>
 	<div class="report">

webapp/src/router.js

@@ -4,12 +4,14 @@ import Dashboard from "./views/Dashboard.vue";
 import About from "./views/About.vue";
 import BugAdd from "./views/BugAdd.vue";
 import Archive from "./views/Archive.vue";
+import API from "./views/API.vue";
 
 const routes = [
 	{ path: "/", component: Dashboard },
 	{ path: "/about", component: About },
 	{ path: "/add", component: BugAdd },
 	{ path: "/archive", component: Archive },
+	{ path: "/api", component: API },
 ];
 
 export const router = createRouter({

webapp/src/views/API.vue

@@ -0,0 +1,19 @@
+<template>
+	<div id="api">
+		<h1>API</h1>
+		<p>
+			API prípojny bod je dostupná na adrese
+			<a href="{{ api_endpoint }}">{{ api_endpoint }}</a
+			>.
+		</p>
+	</div>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			api_endpoint: window.location.origin + __SUBPATH__ + "api.php",
+		};
+	},
+};
+</script>

webapp/src/views/About.vue

@@ -1,6 +1,40 @@
 <template>
-	<div>
-		<h1>O aplikácii</h1>
-		<router-link to="/">Späť domov</router-link>
+	<div id="about">
+		<div>
+			<h1>O aplikácii</h1>
+			<img src="public/bugreport.svg" height="100" alt="" />
+			<h2>Bug Report</h2>
+			<p>Verzia aplikácie: {{ version }} &nbsp;|&nbsp; Zostavené: {{ build }}</p>
+			<p>Autor: <a href="mailto:mino@tpsoft.org">Ing. Igor Miňo</a></p>
+			<p>
+				Backend:
+				<a href="https://www.php.net" target="_blank"
+					><img src="public/php-power-micro.png" alt="" /> PHP 8.2</a
+				>
+				&nbsp;|&nbsp; Databaza:
+				<a href="https://www.sqlite.org" target="_blank"
+					><img src="public/SQLite370.svg" height="20" alt="" /> SQLite</a
+				>
+				&nbsp;|&nbsp; Frontend:
+				<a href="https://vuejs.org" target="_blank"><img src="public/vue.svg" height="20" alt="" /> Vue 3</a>
+			</p>
+			<p>
+				Zdrojové kódy:
+				<a href="https://git.tpsoft.org/bugreport" target="_blank"
+					>https://git.tpsoft.org/bugreport</a
+				>
+			</p>
+		</div>
 	</div>
 </template>
+
+<script>
+export default {
+	data() {
+		return {
+			version: __APP_VERSION__,
+			build: __BUILD_DATE__,
+		};
+	},
+};
+</script>

webapp/vite.config.js

@@ -1,10 +1,17 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import pkg from "./package.json";
 
-export const baseUrl = '/bugreport/webapp/dist/';
+const subpath = "/bugreport/";
+export const baseUrl = subpath + "webapp/dist/";
 
 // https://vite.dev/config/
 export default defineConfig({
 	base: baseUrl,
 	plugins: [vue()],
+	define: {
+		__APP_VERSION__: JSON.stringify(pkg.version),
+		__BUILD_DATE__: JSON.stringify(new Date().toISOString()),
+		__SUBPATH__: JSON.stringify(subpath),
+	},
 });