first commit

docs/api-ui/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light">
+  <title>MikroTik Backup System — API documentation</title>
+  <link rel="stylesheet" href="/assets/docs.css">
+  <script src="/assets/docs.js" defer></script>
+</head>
+
+<body>
+  <header class="docs-header">
+    <a href="/">MikroTik Backup System</a>
+    <nav aria-label="Documentation"><a href="/openapi.json" download="mikrotik-backup-openapi.json">OpenAPI JSON</a><a
+        href="/">Back to the application</a></nav>
+  </header>
+  <main id="swagger-ui" aria-label="API documentation"></main>
+  <noscript>Enable JavaScript to use the interactive documentation. The JSON specification is available at
+    /openapi.json.</noscript>
+</body>
+
+</html>

docs/api-ui/init.js

@@ -0,0 +1,23 @@
+(function () {
+  'use strict';
+  window.apiDocs = SwaggerUIBundle({
+    url: '/openapi.json',
+    dom_id: '#swagger-ui',
+    deepLinking: true,
+    displayRequestDuration: true,
+    docExpansion: 'list',
+    filter: true,
+    defaultModelsExpandDepth: 0,
+    persistAuthorization: false,
+    validatorUrl: null,
+    queryConfigEnabled: false,
+    supportedSubmitMethods: ['get', 'post', 'put', 'delete'],
+    requestInterceptor: function (request) {
+      if (new URL(request.url, location.href).origin !== location.origin) {
+        throw new Error('API documentation can send requests only to this instance.');
+      }
+      return request;
+    }
+  });
+  window.apiDocs.initOAuth({ clientId: 'swagger-ui', appName: 'MikroTik Backup System' });
+}());

docs/api-ui/style.css

@@ -0,0 +1,92 @@
+html {
+    background: #fafafa;
+    color: #1b2734;
+    color-scheme: light
+}
+
+body {
+    margin: 0;
+    font-family: system-ui, sans-serif
+}
+
+.docs-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    padding: 17px 24px;
+    background: #101e2b;
+    color: #e4edf5
+}
+
+.docs-header a {
+    color: inherit;
+    text-decoration: none;
+    font-size: 14px
+}
+
+.docs-header>a {
+    font-weight: 600
+}
+
+.docs-header nav {
+    display: flex;
+    gap: 22px
+}
+
+.docs-header a:focus-visible {
+    outline: 2px solid #36b8f4;
+    outline-offset: 5px
+}
+
+.docs-header a:hover {
+    text-decoration: underline
+}
+
+.swagger-ui .info {
+    margin: 30px 0
+}
+
+.swagger-ui .wrapper {
+    max-width: 1440px
+}
+
+.swagger-ui .info .description p {
+    line-height: 1.6
+}
+
+.swagger-ui .scheme-container {
+    box-shadow: none;
+    border-top: 1px solid #dce1e6;
+    border-bottom: 1px solid #dce1e6
+}
+
+noscript {
+    display: block;
+    padding: 24px
+}
+
+@media(max-width:640px) {
+    .docs-header {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 12px;
+        padding: 16px
+    }
+
+    .docs-header nav {
+        gap: 18px
+    }
+
+    .docs-header a {
+        font-size: 12px
+    }
+
+    .swagger-ui .info .title {
+        font-size: 26px
+    }
+
+    .swagger-ui .wrapper {
+        padding: 0 12px
+    }
+}