Веб-сайт самохостера Lotigara

summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--css/cgit-dark.css1125
-rw-r--r--css/header.css21
-rw-r--r--css/isso.css324
-rw-r--r--css/main.css254
-rw-r--r--css/responsivity.css193
-rw-r--r--css/theme.css85
-rw-r--r--css/third-party.css15
-rw-r--r--favicon.ico0
-rw-r--r--favicon.png0
-rw-r--r--favicon.svg0
-rw-r--r--index.html210
-rw-r--r--quantorium-presentation-2024-2025.html204
-rw-r--r--status.php320
13 files changed, 2751 insertions, 0 deletions
diff --git a/css/cgit-dark.css b/css/cgit-dark.css
new file mode 100644
index 0000000..e5c74fd
--- /dev/null
+++ b/css/cgit-dark.css
@@ -0,0 +1,1125 @@
+/* cgit-dark - Dark theme based on CSS media selectors
+ * Copyright (C) 2024 Joe Banks <joe@jb3.dev>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+/* Based on the cgit.css file distributed with cgit version 1.2.3 */
+
+:root {
+ --background: white;
+ --color: #333;
+ --link-color: blue;
+ --link-hover: #00f;
+ --table-row: white;
+ --table-row-alt: #f7f7f7;
+ --path: #000;
+ --path-background: #eee;
+ --table-link: #000;
+ --reposection: #888;
+ --sub: #777;
+ --table-hover: #eee;
+ --tabs-border: #ccc;
+ --tabs-active-text: #000;
+ --tabs-text: #777;
+ --main-link: #000;
+ --stats-total: #c00;
+ --diffstat-background: #f7f7f7;
+ --diff-color: #000;
+ --diff-hunk: #009;
+ --diff-del: red;
+ --diff-add: green;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --background: #333;
+ --color: white;
+ --link-color: #7b9cf8;
+ --link-hover: #bcbcff;
+ --table-row: #444;
+ --table-row-alt: #333;
+ --path: #ccc;
+ --path-background: #444;
+ --table-link: #f3f3f3;
+ --reposection: #c5c5c5;
+ --sub: #bbb;
+ --table-hover: #555;
+ --tabs-border: #666;
+ --tabs-active-text: #fff;
+ --tabs-text: #bbb;
+ --main-link: #fff;
+ --stats-total: #eb8383;
+ --diffstat-background: #444;
+ --diff-color: #ccc;
+ --diff-hunk: #4f90f1;
+ --diff-del: #ffa8a8;
+ --diff-add: #9cf39c;
+ }
+
+ /* cgit by default constrains itself to a container and themes that,
+ * we have to break some of that isolation if we want the whole page
+ * to be dark themed */
+ body {
+ background-color: var(--background);
+ }
+
+ /* the deco tags will never work in dark mode, so let's just keep the text
+ * as black */
+ div#cgit a.deco,
+ div#cgit a.branch-deco,
+ div#cgit a.tag-deco,
+ div#cgit a.tag-annotated-deco,
+ div#cgit a.remote-deco {
+ color: #000 !important;
+ }
+}
+
+div#cgit {
+ padding: 0em;
+ margin: 0em;
+ font-family: sans-serif;
+ font-size: 10pt;
+ color: var(--color);
+ background: var(--background);
+ padding: 4px;
+}
+
+div#cgit a {
+ color: var(--link-color);
+ text-decoration: none;
+}
+
+div#cgit a:hover {
+ text-decoration: underline;
+}
+
+div#cgit table {
+ border-collapse: collapse;
+}
+
+div#cgit table#header {
+ width: 100%;
+ margin-bottom: 1em;
+}
+
+div#cgit table#header td.logo {
+ width: 96px;
+ vertical-align: top;
+}
+
+div#cgit table#header td.main {
+ font-size: 250%;
+ padding-left: 10px;
+ white-space: nowrap;
+}
+
+div#cgit table#header td.main a {
+ color: var(--main-link);
+}
+
+div#cgit table#header td.form {
+ text-align: right;
+ vertical-align: bottom;
+ padding-right: 1em;
+ padding-bottom: 2px;
+ white-space: nowrap;
+}
+
+div#cgit table#header td.form form,
+div#cgit table#header td.form input,
+div#cgit table#header td.form select {
+ font-size: 90%;
+}
+
+div#cgit table#header td.sub {
+ color: var(--sub);
+ border-top: solid 1px var(--tabs-border);
+ padding-left: 10px;
+}
+
+div#cgit table.tabs {
+ border-bottom: solid 3px var(--tabs-border);
+ border-collapse: collapse;
+ margin-top: 2em;
+ margin-bottom: 0px;
+ width: 100%;
+}
+
+div#cgit table.tabs td {
+ padding: 0px 1em;
+ vertical-align: bottom;
+}
+
+div#cgit table.tabs td a {
+ padding: 2px 0.75em;
+ color: var(--tabs-text);
+ font-size: 110%;
+}
+
+div#cgit table.tabs td a.active {
+ color: var(--tabs-active-text);
+ background-color: var(--tabs-border);
+}
+
+div#cgit table.tabs a[href^="http://"]:after,
+div#cgit table.tabs a[href^="https://"]:after {
+ content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgAhcJDQY+gm2TAAAAHWlUWHRDb21tZW50AAAAAABDcmVhdGVkIHdpdGggR0lNUGQuZQcAAABbSURBVAhbY2BABs4MU4CwhYHBh2Erww4wrGFQZHjI8B8IgUIscJWyDHcggltQhI4zGDCcRwhChPggHIggP1QoAVmQkSETrGoHsiAEsACtBYN0oDAMbgU6EBcAAL2eHUt4XUU4AAAAAElFTkSuQmCC);
+ opacity: 0.5;
+ margin: 0 0 0 5px;
+}
+
+div#cgit table.tabs td.form {
+ text-align: right;
+}
+
+div#cgit table.tabs td.form form {
+ padding-bottom: 2px;
+ font-size: 90%;
+ white-space: nowrap;
+}
+
+div#cgit table.tabs td.form input,
+div#cgit table.tabs td.form select {
+ font-size: 90%;
+}
+
+div#cgit div.path {
+ margin: 0px;
+ padding: 5px 2em 2px 2em;
+ color: var(--path);
+ background-color: var(--path-background);
+}
+
+div#cgit div.content {
+ margin: 0px;
+ padding: 2em;
+ border-bottom: solid 3px #ccc;
+}
+
+
+div#cgit table.list {
+ width: 100%;
+ border: none;
+ border-collapse: collapse;
+}
+
+div#cgit table.list tr {
+ background: var(--table-row);
+}
+
+div#cgit table.list tr.logheader {
+ background: #eee;
+}
+
+div#cgit table.list tr:nth-child(even) {
+ background: var(--table-row-alt);
+}
+
+div#cgit table.list tr:nth-child(odd) {
+ background: var(--table-row);
+}
+
+div#cgit table.list tr:hover {
+ background: var(--table-hover);
+}
+
+div#cgit table.list tr.nohover {
+ background: var(--table-row);
+}
+
+div#cgit table.list tr.nohover:hover {
+ background: var(--table-row);
+}
+
+div#cgit table.list tr.nohover-highlight:hover:nth-child(even) {
+ background: var(--table-row-alt);
+}
+
+div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) {
+ background: var(--table-row);
+}
+
+div#cgit table.list th {
+ font-weight: bold;
+ /* color: #888;
+ border-top: dashed 1px #888;
+ border-bottom: dashed 1px #888;
+ */
+ padding: 0.1em 0.5em 0.05em 0.5em;
+ vertical-align: baseline;
+}
+
+div#cgit table.list td {
+ border: none;
+ padding: 0.1em 0.5em 0.1em 0.5em;
+}
+
+div#cgit table.list td.commitgraph {
+ font-family: monospace;
+ white-space: pre;
+}
+
+div#cgit table.list td.commitgraph .column1 {
+ color: #a00;
+}
+
+div#cgit table.list td.commitgraph .column2 {
+ color: #0a0;
+}
+
+div#cgit table.list td.commitgraph .column3 {
+ color: #aa0;
+}
+
+div#cgit table.list td.commitgraph .column4 {
+ color: #00a;
+}
+
+div#cgit table.list td.commitgraph .column5 {
+ color: #a0a;
+}
+
+div#cgit table.list td.commitgraph .column6 {
+ color: #0aa;
+}
+
+@media (prefers-color-scheme: dark) {
+ div#cgit table.list td.commitgraph .column1 {
+ color: rgb(255, 104, 104);
+ }
+
+ div#cgit table.list td.commitgraph .column2 {
+ color: rgb(148, 233, 148);
+ }
+
+ div#cgit table.list td.commitgraph .column3 {
+ color: rgb(255, 255, 104);
+ }
+
+ div#cgit table.list td.commitgraph .column4 {
+ color: rgb(155, 155, 241);
+ }
+
+ div#cgit table.list td.commitgraph .column5 {
+ color: rgb(255, 104, 255);
+ }
+
+ div#cgit table.list td.commitgraph .column6 {
+ color: rgb(148, 233, 233);
+ }
+}
+
+div#cgit table.list td.logsubject {
+ font-family: monospace;
+ font-weight: bold;
+}
+
+div#cgit table.list td.logmsg {
+ font-family: monospace;
+ white-space: pre;
+ padding: 0 0.5em;
+}
+
+div#cgit table.list td a {
+ color: var(--table-link);
+}
+
+div#cgit table.list td a.ls-dir {
+ font-weight: bold;
+ color: var(--link-color)
+}
+
+div#cgit table.list td a:hover {
+ color: var(--link-hover);
+}
+
+div#cgit img {
+ border: none;
+}
+
+div#cgit input#switch-btn {
+ margin: 2px 0px 0px 0px;
+}
+
+div#cgit td#sidebar input.txt {
+ width: 100%;
+ margin: 2px 0px 0px 0px;
+}
+
+div#cgit table#grid {
+ margin: 0px;
+}
+
+div#cgit td#content {
+ vertical-align: top;
+ padding: 1em 2em 1em 1em;
+ border: none;
+}
+
+div#cgit div#summary {
+ vertical-align: top;
+ margin-bottom: 1em;
+}
+
+div#cgit table#downloads {
+ float: right;
+ border-collapse: collapse;
+ border: solid 1px #777;
+ margin-left: 0.5em;
+ margin-bottom: 0.5em;
+}
+
+div#cgit table#downloads th {
+ background-color: #ccc;
+}
+
+div#cgit div#blob {
+ border: solid 1px black;
+}
+
+div#cgit div.error {
+ color: red;
+ font-weight: bold;
+ margin: 1em 2em;
+}
+
+div#cgit a.ls-blob,
+div#cgit a.ls-dir,
+div#cgit .ls-mod {
+ font-family: monospace;
+}
+
+div#cgit td.ls-size {
+ text-align: right;
+ font-family: monospace;
+ width: 10em;
+}
+
+div#cgit td.ls-mode {
+ font-family: monospace;
+ width: 10em;
+}
+
+div#cgit table.blob {
+ margin-top: 0.5em;
+ border-top: solid 1px black;
+}
+
+div#cgit table.blob td.hashes,
+div#cgit table.blob td.lines {
+ margin: 0;
+ padding: 0 0 0 0.5em;
+ vertical-align: top;
+ color: black;
+}
+
+div#cgit table.blob td.linenumbers {
+ margin: 0;
+ padding: 0 0.5em 0 0.5em;
+ vertical-align: top;
+ text-align: right;
+ border-right: 1px solid gray;
+}
+
+div#cgit table.blob pre {
+ padding: 0;
+ margin: 0;
+}
+
+div#cgit table.blob td.linenumbers a,
+div#cgit table.ssdiff td.lineno a {
+ color: gray;
+ text-align: right;
+ text-decoration: none;
+}
+
+div#cgit table.blob td.linenumbers a:hover,
+div#cgit table.ssdiff td.lineno a:hover {
+ color: black;
+}
+
+div#cgit table.blame td.hashes,
+div#cgit table.blame td.lines,
+div#cgit table.blame td.linenumbers {
+ padding: 0;
+}
+
+div#cgit table.blame td.hashes div.alt,
+div#cgit table.blame td.lines div.alt {
+ padding: 0 0.5em 0 0.5em;
+}
+
+div#cgit table.blame td.linenumbers div.alt {
+ padding: 0 0.5em 0 0;
+}
+
+div#cgit table.blame div.alt:nth-child(even) {
+ background: #eee;
+}
+
+div#cgit table.blame div.alt:nth-child(odd) {
+ background: white;
+}
+
+div#cgit table.blame td.lines>div {
+ position: relative;
+}
+
+div#cgit table.blame td.lines>div>pre {
+ padding: 0 0 0 0.5em;
+ position: absolute;
+ top: 0;
+}
+
+div#cgit table.blame .oid {
+ font-size: 100%;
+}
+
+div#cgit table.bin-blob {
+ margin-top: 0.5em;
+ border: solid 1px black;
+}
+
+div#cgit table.bin-blob th {
+ font-family: monospace;
+ white-space: pre;
+ border: solid 1px #777;
+ padding: 0.5em 1em;
+}
+
+div#cgit table.bin-blob td {
+ font-family: monospace;
+ white-space: pre;
+ border-left: solid 1px #777;
+ padding: 0em 1em;
+}
+
+div#cgit table.nowrap td {
+ white-space: nowrap;
+}
+
+div#cgit table.commit-info {
+ border-collapse: collapse;
+ margin-top: 1.5em;
+}
+
+div#cgit div.cgit-panel {
+ float: right;
+ margin-top: 1.5em;
+}
+
+div#cgit div.cgit-panel table {
+ border-collapse: collapse;
+ border: solid 1px #aaa;
+ background-color: #eee;
+}
+
+div#cgit div.cgit-panel th {
+ text-align: center;
+}
+
+div#cgit div.cgit-panel td {
+ padding: 0.25em 0.5em;
+}
+
+div#cgit div.cgit-panel td.label {
+ padding-right: 0.5em;
+}
+
+div#cgit div.cgit-panel td.ctrl {
+ padding-left: 0.5em;
+}
+
+div#cgit table.commit-info th {
+ text-align: left;
+ font-weight: normal;
+ padding: 0.1em 1em 0.1em 0.1em;
+ vertical-align: top;
+}
+
+div#cgit table.commit-info td {
+ font-weight: normal;
+ padding: 0.1em 1em 0.1em 0.1em;
+}
+
+div#cgit div.commit-subject {
+ font-weight: bold;
+ font-size: 125%;
+ margin: 1.5em 0em 0.5em 0em;
+ padding: 0em;
+}
+
+div#cgit div.commit-msg {
+ white-space: pre;
+ font-family: monospace;
+}
+
+div#cgit div.notes-header {
+ font-weight: bold;
+ padding-top: 1.5em;
+}
+
+div#cgit div.notes {
+ white-space: pre;
+ font-family: monospace;
+ border: solid 1px #ee9;
+ background-color: #ffd;
+ padding: 0.3em 2em 0.3em 1em;
+ float: left;
+}
+
+div#cgit div.notes-footer {
+ clear: left;
+}
+
+div#cgit div.diffstat-header {
+ font-weight: bold;
+ padding-top: 1.5em;
+}
+
+div#cgit table.diffstat {
+ border-collapse: collapse;
+ border: solid 1px #aaa;
+ background-color: var(--diffstat-background);
+}
+
+div#cgit table.diffstat th {
+ font-weight: normal;
+ text-align: left;
+ text-decoration: underline;
+ padding: 0.1em 1em 0.1em 0.1em;
+ font-size: 100%;
+}
+
+div#cgit table.diffstat td {
+ padding: 0.2em 0.2em 0.1em 0.1em;
+ font-size: 100%;
+ border: none;
+}
+
+div#cgit table.diffstat td.mode {
+ white-space: nowrap;
+}
+
+div#cgit table.diffstat td span.modechange {
+ padding-left: 1em;
+ color: red;
+}
+
+div#cgit table.diffstat td.add a {
+ color: green;
+}
+
+div#cgit table.diffstat td.del a {
+ color: red;
+}
+
+div#cgit table.diffstat td.upd a {
+ color: blue;
+}
+
+@media (prefers-color-scheme: dark) {
+ div#cgit table.diffstat td.add a {
+ color: rgb(148, 233, 148);
+ }
+
+ div#cgit table.diffstat td.del a {
+ color: rgb(255, 104, 104);
+ }
+
+ div#cgit table.diffstat td.upd a {
+ color: rgb(155, 155, 241);
+ }
+}
+
+div#cgit table.diffstat td.graph {
+ width: 500px;
+ vertical-align: middle;
+}
+
+div#cgit table.diffstat td.graph table {
+ border: none;
+}
+
+div#cgit table.diffstat td.graph td {
+ padding: 0px;
+ border: 0px;
+ height: 7pt;
+}
+
+div#cgit table.diffstat td.graph td.add {
+ background-color: #5c5;
+}
+
+div#cgit table.diffstat td.graph td.rem {
+ background-color: #c55;
+}
+
+div#cgit div.diffstat-summary {
+ color: #888;
+ padding-top: 0.5em;
+}
+
+div#cgit table.diff {
+ width: 100%;
+}
+
+div#cgit table.diff td {
+ font-family: monospace;
+ white-space: pre;
+}
+
+div#cgit table.diff td div.head {
+ font-weight: bold;
+ margin-top: 1em;
+ color: var(--diff-color);
+}
+
+div#cgit table.diff td div.hunk {
+ color: var(--diff-hunk);
+}
+
+div#cgit table.diff td div.add {
+ color: var(--diff-add);
+}
+
+div#cgit table.diff td div.del {
+ color: var(--diff-del);
+}
+
+div#cgit .oid {
+ font-family: monospace;
+ font-size: 90%;
+}
+
+div#cgit .left {
+ text-align: left;
+}
+
+div#cgit .right {
+ text-align: right;
+}
+
+div#cgit table.list td.reposection {
+ font-style: italic;
+ color: var(--reposection);
+}
+
+div#cgit a.button {
+ font-size: 80%;
+ padding: 0em 0.5em;
+}
+
+div#cgit a.primary {
+ font-size: 100%;
+}
+
+div#cgit a.secondary {
+ font-size: 90%;
+}
+
+div#cgit td.toplevel-repo {}
+
+div#cgit table.list td.sublevel-repo {
+ padding-left: 1.5em;
+}
+
+div#cgit ul.pager {
+ list-style-type: none;
+ text-align: center;
+ margin: 1em 0em 0em 0em;
+ padding: 0;
+}
+
+div#cgit ul.pager li {
+ display: inline-block;
+ margin: 0.25em 0.5em;
+}
+
+div#cgit ul.pager a {
+ color: #777;
+}
+
+div#cgit ul.pager .current {
+ font-weight: bold;
+}
+
+div#cgit span.age-mins {
+ font-weight: bold;
+ color: #080;
+}
+
+div#cgit span.age-hours {
+ color: #080;
+}
+
+div#cgit span.age-days {
+ color: #040;
+}
+
+div#cgit span.age-weeks {
+ color: #444;
+}
+
+div#cgit span.age-months {
+ color: #888;
+}
+
+div#cgit span.age-years {
+ color: #bbb;
+}
+
+div#cgit span.insertions {
+ color: #080;
+}
+
+div#cgit span.deletions {
+ color: #800;
+}
+
+@media (prefers-color-scheme: dark) {
+ div#cgit span.age-mins {
+ color: rgb(179, 250, 179);
+ }
+
+ div#cgit span.age-hours {
+ color: rgb(135, 207, 135);
+ }
+
+ div#cgit span.age-days {
+ color: rgb(119, 168, 119);
+ }
+
+ div#cgit span.age-weeks {
+ color: rgb(86, 119, 86);
+ }
+
+ div#cgit span.age-months {
+ color: rgb(136, 139, 137);
+ }
+
+ div#cgit span.age-years {
+ color: rgb(139, 139, 139);
+ }
+
+ div#cgit span.insertions {
+ color: rgb(148, 233, 148);
+ }
+
+ div#cgit span.deletions {
+ color: rgb(255, 104, 104);
+ }
+}
+
+div#cgit div.footer {
+ margin-top: 0.5em;
+ text-align: center;
+ font-size: 80%;
+ color: #ccc;
+}
+
+div#cgit div.footer a {
+ color: #ccc;
+ text-decoration: none;
+}
+
+div#cgit div.footer a:hover {
+ text-decoration: underline;
+}
+
+div#cgit a.branch-deco {
+ color: #000;
+ margin: 0px 0.5em;
+ padding: 0px 0.25em;
+ background-color: #88ff88;
+ border: solid 1px #007700;
+}
+
+div#cgit a.tag-deco {
+ color: #000;
+ margin: 0px 0.5em;
+ padding: 0px 0.25em;
+ background-color: #ffff88;
+ border: solid 1px #777700;
+}
+
+div#cgit a.tag-annotated-deco {
+ color: #000;
+ margin: 0px 0.5em;
+ padding: 0px 0.25em;
+ background-color: #ffcc88;
+ border: solid 1px #777700;
+}
+
+div#cgit a.remote-deco {
+ color: #000;
+ margin: 0px 0.5em;
+ padding: 0px 0.25em;
+ background-color: #ccccff;
+ border: solid 1px #000077;
+}
+
+div#cgit a.deco {
+ color: #000;
+ margin: 0px 0.5em;
+ padding: 0px 0.25em;
+ background-color: #ff8888;
+ border: solid 1px #770000;
+}
+
+div#cgit div.commit-subject a.branch-deco,
+div#cgit div.commit-subject a.tag-deco,
+div#cgit div.commit-subject a.tag-annotated-deco,
+div#cgit div.commit-subject a.remote-deco,
+div#cgit div.commit-subject a.deco {
+ margin-left: 1em;
+ font-size: 75%;
+}
+
+div#cgit table.stats {
+ border: solid 1px var(--color);
+ border-collapse: collapse;
+}
+
+div#cgit table.stats th {
+ text-align: left;
+ padding: 1px 0.5em;
+ background-color: var(--background);
+ border: solid 1px var(--color);
+}
+
+div#cgit table.stats td {
+ text-align: right;
+ padding: 1px 0.5em;
+ border: solid 1px var(--color);
+}
+
+div#cgit table.stats td.total {
+ font-weight: bold;
+ text-align: left;
+}
+
+div#cgit table.stats td.sum {
+ color: var(--stats-total);
+ font-weight: bold;
+ /* background-color: #eee; */
+}
+
+div#cgit table.stats td.left {
+ text-align: left;
+}
+
+div#cgit table.vgraph {
+ border-collapse: separate;
+ border: solid 1px black;
+ height: 200px;
+}
+
+div#cgit table.vgraph th {
+ background-color: #eee;
+ font-weight: bold;
+ border: solid 1px white;
+ padding: 1px 0.5em;
+}
+
+div#cgit table.vgraph td {
+ vertical-align: bottom;
+ padding: 0px 10px;
+}
+
+div#cgit table.vgraph div.bar {
+ background-color: #eee;
+}
+
+div#cgit table.hgraph {
+ border: solid 1px black;
+ width: 800px;
+}
+
+div#cgit table.hgraph th {
+ background-color: #eee;
+ font-weight: bold;
+ border: solid 1px black;
+ padding: 1px 0.5em;
+}
+
+div#cgit table.hgraph td {
+ vertical-align: middle;
+ padding: 2px 2px;
+}
+
+div#cgit table.hgraph div.bar {
+ background-color: #eee;
+ height: 1em;
+}
+
+div#cgit table.ssdiff {
+ width: 100%;
+}
+
+div#cgit table.ssdiff td {
+ font-size: 75%;
+ font-family: monospace;
+ white-space: pre;
+ padding: 1px 4px 1px 4px;
+ border-left: solid 1px #aaa;
+ border-right: solid 1px #aaa;
+}
+
+div#cgit table.ssdiff td.add {
+ color: black;
+ background: #cfc;
+ min-width: 50%;
+}
+
+div#cgit table.ssdiff td.add_dark {
+ color: black;
+ background: #aca;
+ min-width: 50%;
+}
+
+div#cgit table.ssdiff span.add {
+ background: #cfc;
+ font-weight: bold;
+}
+
+div#cgit table.ssdiff td.del {
+ color: black;
+ background: #fcc;
+ min-width: 50%;
+}
+
+div#cgit table.ssdiff td.del_dark {
+ color: black;
+ background: #caa;
+ min-width: 50%;
+}
+
+div#cgit table.ssdiff span.del {
+ background: #fcc;
+ font-weight: bold;
+}
+
+div#cgit table.ssdiff td.changed {
+ color: black;
+ background: #ffc;
+ min-width: 50%;
+}
+
+div#cgit table.ssdiff td.changed_dark {
+ color: black;
+ background: #cca;
+ min-width: 50%;
+}
+
+div#cgit table.ssdiff td.lineno {
+ color: black;
+ background: #eee;
+ text-align: right;
+ width: 3em;
+ min-width: 3em;
+}
+
+div#cgit table.ssdiff td.hunk {
+ color: black;
+ background: #ccf;
+ border-top: solid 1px #aaa;
+ border-bottom: solid 1px #aaa;
+}
+
+div#cgit table.ssdiff td.head {
+ border-top: solid 1px #aaa;
+ border-bottom: solid 1px #aaa;
+}
+
+div#cgit table.ssdiff td.head div.head {
+ font-weight: bold;
+ color: black;
+}
+
+div#cgit table.ssdiff td.foot {
+ border-top: solid 1px #aaa;
+ border-left: none;
+ border-right: none;
+ border-bottom: none;
+}
+
+div#cgit table.ssdiff td.space {
+ border: none;
+}
+
+div#cgit table.ssdiff td.space div {
+ min-height: 3em;
+}
+
+/* Style definition file generated by highlight 3.9, http://www.andre-simon.de/ */
+/* Highlighting theme: Kwrite Editor */
+/* adapted for cgit */
+div#cgit table.blob .num {
+ color: #b07e00;
+}
+
+div#cgit table.blob .esc {
+ color: #ff00ff;
+}
+
+div#cgit table.blob .str {
+ color: #bf0303;
+}
+
+div#cgit table.blob .pps {
+ color: #818100;
+}
+
+div#cgit table.blob .slc {
+ color: #838183;
+ font-style: italic;
+}
+
+div#cgit table.blob .com {
+ color: #838183;
+ font-style: italic;
+}
+
+div#cgit table.blob .ppc {
+ color: #008200;
+}
+
+div#cgit table.blob .opt {
+ color: #000000;
+}
+
+div#cgit table.blob .lin {
+ color: #555555;
+}
+
+div#cgit table.blob .kwa {
+ color: #000000;
+ font-weight: bold;
+}
+
+div#cgit table.blob .kwb {
+ color: #0057ae;
+}
+
+div#cgit table.blob .kwc {
+ color: #000000;
+ font-weight: bold;
+}
+
+div#cgit table.blob .kwd {
+ color: #010181;
+}
diff --git a/css/header.css b/css/header.css
new file mode 100644
index 0000000..4830f72
--- /dev/null
+++ b/css/header.css
@@ -0,0 +1,21 @@
+div.page_header {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+
+ background-color: var(--theme-color);
+ border-radius: 15px 15px 0 0;
+}
+
+.floating_element {
+ color: var(--bg-color);
+ position: relative;
+ background-color: var(--theme-color);
+ border-radius: 0px 0px 20px 20px;
+ text-align: center;
+
+ img {
+ max-width: 13%;
+ display: block;
+ }
+}
diff --git a/css/isso.css b/css/isso.css
new file mode 100644
index 0000000..d8b3f00
--- /dev/null
+++ b/css/isso.css
@@ -0,0 +1,324 @@
+/* ========================================================================== */
+/* Generic styling */
+/* ========================================================================== */
+#isso-thread * {
+ /* Reset */
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+/* ========================================================================== */
+/* Thread heading area */
+/* ========================================================================== */
+#isso-thread {
+ padding: 4px 8px 4px 8px;
+ margin: 0;
+ text-align: left;
+ color: var(--text-color);
+}
+h4.isso-thread-heading {
+ padding-bottom: 8px;
+ color: var(--gray-color);
+ font-weight: bold;
+}
+.isso-feedlink {
+ padding-bottom: 8px;
+ float: right;
+ padding-left: 1em;
+}
+.isso-feedlink a {
+ font-size: 0.8em;
+ vertical-align: bottom;
+}
+
+/* ========================================================================== */
+/* Comments */
+/* ========================================================================== */
+
+.isso-comment {
+ max-width: 68em;
+ margin: 0 auto;
+}
+.isso-preview .isso-comment {
+ padding-top: 0;
+ margin: 0;
+}
+.isso-comment:not(:first-of-type),
+.isso-follow-up .isso-comment {
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+ margin-bottom: 0.5em;
+}
+.isso-avatar {
+ display: block;
+ float: left;
+ margin: 0.95em 0.95em 0;
+}
+.isso-avatar svg {
+ max-width: 48px;
+ max-height: 48px;
+ width: 100%;
+ height: 100%;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 3px;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.isso-text-wrapper {
+ display: block;
+ padding: 0.95em;
+}
+.isso-follow-up {
+ padding-left: calc(7% + 20px);
+}
+.isso-comment-footer {
+ font-size: 0.95em;
+}
+.isso-comment-header {
+ font-size: 0.85em;
+}
+.isso-comment-header a {
+ text-decoration: none;
+}
+/* Only for comment header, spacer between up-/downvote should have no padding */
+.isso-comment-header .isso-spacer {
+ padding: 0 6px;
+}
+.isso-spacer,
+.isso-permalink,
+.isso-note,
+.isso-parent {
+ color: gray;
+ font-weight: normal;
+ text-shadow: none;
+}
+.isso-spacer:hover,
+.isso-permalink:hover,
+.isso-note:hover,
+.isso-parent:hover {
+ color: #606060;
+}
+.isso-note {
+ float: right;
+}
+.isso-author {
+ font-weight: bold;
+ color: var(--gray-color);
+}
+.isso-page-author-suffix {
+ font-weight: bold;
+ color: #2c2c2c;
+}
+.isso-textarea,
+.isso-preview {
+ margin-top: 0.2em;
+ width: 100%;
+ border: 1px solid #f0f0f0;
+ border-radius: 2px;
+ box-shadow: 0 0 2px #888;
+}
+.isso-text p {
+ margin-top: 0.2em;
+}
+.isso-text p:last-child {
+ margin-bottom: 0.2em;
+}
+.isso-text h1,
+.isso-text h2,
+.isso-text h3,
+.isso-text h4,
+.isso-text h5,
+.isso-text h6 {
+ font-size: 130%;
+ font-weight: bold;
+}
+.isso-comment-footer {
+ font-size: 0.80em;
+ color: gray;
+ clear: left;
+}
+.isso-feedlink,
+.isso-comment-footer a {
+ font-weight: bold;
+ text-decoration: none;
+}
+.isso-feedlink:hover,
+.isso-comment-footer a:hover {
+ color: #111111;
+ text-shadow: #aaaaaa 0 0 1px;
+}
+.isso-comment-footer > a {
+ position: relative;
+ top: .2em;
+}
+.isso-comment-footer > a + a {
+ padding-left: 1em;
+}
+.isso-comment-footer .isso-votes {
+ color: gray;
+}
+.isso-upvote svg,
+.isso-downvote svg {
+ position: relative;
+ top: .2em;
+}
+/* Reply postbox under existing comment */
+.isso-comment .isso-postbox {
+ margin-top: 0.8em;
+}
+.isso-comment.isso-no-votes > * > .isso-comment-footer .isso-votes {
+ display: none;
+}
+
+/* ========================================================================== */
+/* Postbox */
+/* ========================================================================== */
+.isso-postbox {
+ max-width: 68em;
+ margin: 0 auto;
+ clear: right;
+}
+.isso-form-wrapper {
+ display: block;
+ padding: 0;
+ background: var(--bg-color);
+ color: var(--text-color);
+}
+.isso-textarea,
+.isso-preview {
+ margin: 0 0 .3em;
+ padding: .4em .8em;
+ border-radius: 3px;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.isso-textarea {
+ outline: 0;
+ width: 100%;
+ resize: none;
+ background: var(--bg-color);
+ color: var(--text-color);
+}
+.isso-form-wrapper input[type=checkbox] {
+ vertical-align: middle;
+ position: relative;
+ accent-color: var(--theme-color);
+ background: var(--bg-color);
+ margin-left: 0;
+ margin-right: 4px;
+}
+.isso-notification-section {
+ font-size: 0.90em;
+ padding-top: .3em;
+ display: none;
+ padding-bottom: 10px;
+}
+.isso-auth-section {
+ display: block;
+}
+.isso-textarea:focus,
+.isso-auth-section input:focus {
+ border-color: rgba(0, 0, 0, 0.8);
+}
+.isso-input-wrapper {
+ display: inline-block;
+ position: relative;
+ max-width: 25%;
+ margin: 0;
+}
+.isso-input-wrapper input {
+ padding: .3em 10px;
+ max-width: 100%;
+ border-radius: 3px;
+ line-height: 1.4em;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ background: var(--bg-color);
+ color: var(--text-color);
+}
+.isso-input-wrapper label {
+ display: inline-block;
+ line-height: 1.4em;
+ height: 1.4em;
+}
+.isso-post-action {
+ display: block;
+ float: right;
+ margin: 1.4em 0 0 5px;
+}
+.isso-post-action > input {
+ padding: calc(.3em - 1px);
+ border-radius: 2px;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ cursor: pointer;
+ outline: 0;
+ line-height: 1.4em;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ background: var(--bg-color);
+ color: var(--text-color);
+}
+.isso-post-action > input:hover {
+ background-color: var(--gray-color);
+}
+.isso-post-action > input:active {
+ background-color: var(--theme-color);
+}
+
+/* ========================================================================== */
+/* Postbox (preview mode) */
+/* ========================================================================== */
+.isso-preview,
+.isso-post-action input[name="edit"],
+.isso-postbox.isso-preview-mode > .isso-form-wrapper input[name="preview"],
+.isso-postbox.isso-preview-mode > .isso-form-wrapper .isso-textarea {
+ display: none;
+}
+.isso-postbox.isso-preview-mode > .isso-form-wrapper .isso-preview {
+ display: block;
+}
+.isso-postbox.isso-preview-mode > .isso-form-wrapper input[name="edit"] {
+ display: inline;
+}
+.isso-preview {
+ /*background-color: #f8f8f8;
+ background: repeating-linear-gradient(
+ -45deg,
+ #f8f8f8,
+ #f8f8f8 10px,
+ #fff 10px,
+ #fff 20px
+ );*/
+}
+
+/* ========================================================================== */
+/* Animations */
+/* ========================================================================== */
+
+/* "target" means the comment that's being linked to, for example:
+ * https://example.com/blog/example/#isso-15
+ */
+.isso-target {
+ animation: isso-target-fade 5s ease-out;
+}
+@keyframes isso-target-fade {
+ 0% { background-color: #eee5a1; }
+ /* This color should be changed when used on a dark background,
+ * maybe #3f3c1c for example
+ */
+}
+
+/* ========================================================================== */
+/* Media queries */
+/* ========================================================================== */
+@media screen and (max-width:600px) {
+ .isso-input-wrapper {
+ display: block;
+ max-width: 100%;
+ margin: 0 0 .3em;
+ }
+ .isso-input-wrapper input {
+ width: 100%;
+ }
+ .isso-post-action {
+ margin-top: 0;
+ }
+}
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..d6c0d76
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,254 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ hyphens: auto;
+ /*word-break: break-all;*/
+}
+
+html {
+ min-height: 100%;
+ min-width: 100%;
+
+ display: flex;
+ flex-direction: column;
+}
+
+body {
+ min-height: 100%;
+ width: 100%;
+
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+
+ font-family: Verdana, sans-serif;
+ font-size: 11pt;
+
+ text-align: center;
+}
+
+div#page, div#divbodyholder, div#cgit {
+ background-color: var(--bg-color);
+
+ padding: 3px 0px 3px 0px;
+
+ min-height: 100%;
+ width: 100%;
+
+ flex-grow: 1;
+
+ /*background-image: url(/icons/collage.png);
+ background-size: contain;
+ background-attachment: fixed;
+ background-repeat: repeat;*/
+}
+
+div.inner_page {
+ position: relative;
+
+ width: 65%;
+
+ align-items: center;
+ justify-content: center;
+
+ margin: 0px auto 0px auto;
+
+ border-width: 0px;
+ border-color: var(--theme-color);
+ border-style: solid;
+ border-radius: 15px;
+
+ box-shadow: 0px 0px 33px 14px #000000;
+}
+
+div.page_header {
+ padding-top: 2em;
+ padding-bottom: 2em;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+
+ background-color: var(--theme-color);
+ border-radius: 15px 15px 0 0;
+}
+
+
+div.page_header img {
+ margin: 3px 0px 0px 40px;
+
+ border: 0px 0px 0px;
+}
+
+div.table_of_contents {
+ clear: center;
+
+ min-width: 200px;
+
+ margin: 3px 3px 3px 3px;
+ padding: 10px;
+
+ background-color: var(--bg-color);
+
+ text-align: center;
+}
+
+div.table_of_contents_item {
+ clear: center;
+ text-align: center;
+
+ width: 100%;
+ margin: 4px 0px 0px 0px;
+
+ background-color: var(--bg-color);
+ color: var(--text-color);
+}
+
+div.table_of_contents_item a {
+ margin: 6px 0px 0px 6px;
+}
+
+div.content_section, div.content {
+ margin: 3px 3px 3px 3px;
+ background-color: var(--bg-color);
+ text-align: left;
+}
+
+div.content_section_text, div.content {
+ padding: 4px 8px 4px 8px;
+ color: var(--text-color);
+}
+
+a.ablack {
+ color: var(--bg-color);
+ text-decoration: none;
+}
+
+div.subtitle {
+ margin-bottom: 2ex;
+ text-align: center;
+}
+
+div#footer {
+ padding-top: 5px;
+ color: var(--text-color);
+}
+
+div.content_section_text pre {
+ margin: 8px 0px 8px 0px;
+ padding: 8px 8px 8px 8px;
+
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--text-color);
+
+ background-color: var(--bg-color);
+
+ font-style: italic;
+}
+
+div.content_section_text p,
+div.content p {
+ margin-bottom: 6px;
+ text-align: left;
+}
+
+div.content_section_text p:first-letter,
+div.content:first-letter {
+ font-size: 15pt;
+}
+
+ul, ol {
+ padding: 4px 8px 4px 16px;
+ margin-left: 1%;
+
+ text-align: left;
+}
+
+div.section_header,
+summary.section_header {
+ padding: 3px 6px 3px 6px;
+ border-radius: 15px;
+
+ background-color: var(--theme-color);
+
+ color: var(--bg-color);
+ font-weight: bold;
+ font-size: 112%;
+ text-align: center;
+}
+
+div.section_header_last {
+ border-radius: 0px 0px 15px 15px;
+}
+
+.floating_element {
+ color: var(--bg-color);
+ position: relative;
+ background-color: var(--theme-color);
+ border-radius: 0px 0px 20px 20px;
+
+ img {
+ max-width: 13%;
+ display: block;
+ }
+}
+
+table.services_table {
+ border-collapse: collapse;
+
+ padding: 5px 20px 15px 20px;
+ margin: 10px auto 10px auto;
+}
+
+tr.services_table_item {
+ border-top: 1px solid var(--text-color);
+ border-bottom: 1px solid var(--text-color);
+}
+
+td:nth-of-type(5) {
+ word-break: break-all;
+}
+
+/*img.floating_element {
+ justify-content: center;
+ position: relative;
+ float: left;
+ max-width: 13%;
+}*/
+
+a {
+ color: var(--text-color);
+ word-break: break-all;
+}
+
+a:hover {
+ text-decoration: underline;
+ font-weight: bold;
+ color: var(--text-color);
+}
+
+div.section_header_last a:visited,
+div.section_header_last a:link,
+div.section_header_last a:active {
+ font-weight: initial;
+}
+
+div.section_header_last a:hover {
+ text-decoration: underline;
+ font-weight: bold;
+ color: var(--text-color);
+}
+
+.word-break {
+ word-break: all;
+}
+
+div.validator {
+}
+
+/*
+ * There was a CSS snippet to reset custom browser behaviour
+ * https://stackoverflow.com/a/19184796
+ *
+ */
diff --git a/css/responsivity.css b/css/responsivity.css
new file mode 100644
index 0000000..58fc1f3
--- /dev/null
+++ b/css/responsivity.css
@@ -0,0 +1,193 @@
+@media (max-width: 1024px) and (min-width: 401px) and (orientation: portrait){
+ div.inner_page {
+ width: 95%;
+ }
+
+ body {
+ font-size: 32pt;
+ }
+
+ div.content_section_text p::first-letter,div.content::first-letter {
+ font-size: 37pt;
+ }
+
+ /* https://css-tricks.com/responsive-data-tables/ */
+
+ /*
+ * Force table to not be like tables anymore
+ */
+ table, thead, tbody, th, td, tr {
+ display: block;
+ }
+
+ /*
+ * Hide table headers (but not display: none;, for accessibility)
+ */
+ thead tr {
+ position: absolute;
+ top: -9999%;
+ left: -9999%;
+ }
+
+ td {
+ /* Behave like a "row" */
+ border: none;
+ position: relative;
+ padding-left: 50%;
+ }
+
+ td::before {
+ /* Now like a table header */
+ position: absolute;
+ /* Top/left values mimic padding */
+ top: 6px;
+ left: 6px;
+ width: 45%;
+ padding-right: 10px;
+ white-space: nowrap;
+ }
+}
+
+/* iframe */
+@media (width: 400px) and (height: 250px) {
+ div.inner_page {
+ width: 95%;
+ }
+
+ body {
+ font-size: 11pt;
+ }
+
+ div.content_section_text p::first-letter,div.content::first-letter {
+ font-size: 15pt;
+ }
+
+ /*
+ * Force table to not be like tables anymore
+ */
+ table, thead, tbody, th, td, tr {
+ display: block;
+ }
+
+ /*
+ * Hide table headers (but not display: none;, for accessibility)
+ */
+ thead tr {
+ position: absolute;
+ top: -9999%;
+ left: -9999%;
+ }
+
+ td {
+ /* Behave like a "row" */
+ border: none;
+ position: relative;
+ padding-left: 50%;
+ }
+
+ td::before {
+ /* Now like a table header */
+ position: absolute;
+ /* Top/left values mimic padding */
+ left: 6px;
+ width: 45%;
+ padding-right: 10px;
+ white-space: nowrap;
+ }
+}
+
+@media (max-width: 400px) and (orientation: portrait){
+ div.inner_page {
+ width: 100%;
+ margin: 0;
+ }
+
+ body {
+ font-size: 24pt;
+ }
+}
+@media only screen and (orientation: landscape)
+ and (min-width: 992px)
+ and (max-width: 1199px) {
+ body { font-size: 14pt; }
+ }
+ @media only screen and (orientation: landscape)
+ and (min-width: 768px)
+ and (max-width: 991px) {
+ body { font-size: 14pt; }
+ }
+ @media only screen and (orientation: landscape)
+ and (min-width: 480px)
+ and (max-width: 767px) {
+ body { font-size: 11pt; }
+ }
+ @media only screen and (orientation: landscape)
+ and (max-width: 479px) {
+ body { font-size: 8pt; }
+ }
+ @media only screen and (orientation: landscape)
+ and (min-device-width : 375px)
+ and (max-device-width : 667px) {
+ body { font-size: 9.5pt; }
+ }
+
+/* https://css-tricks.com/responsive-data-tables/ */
+/*
+Max width before this PARTICULAR table gets nasty
+This query will take effect for any screen smaller than 760px
+and also iPads specifically.
+*/
+/*@media
+only screen and (max-width: 760px),
+(min-device-width: 768px) and (max-device-width: 1024px) {*/
+@media (max-width: 1024px) and (min-width: 401px) {
+ div.inner_page {
+ width: 95%;
+ }
+
+ body {
+ font-size: 32pt;
+ }
+
+ div.content_section_text p::first-letter,div.content::first-letter {
+ font-size: 37pt;
+ }
+
+ /*
+ * Force table to not be like tables anymore
+ */
+ table, thead, tbody, th, td, tr {
+ display: block;
+ }
+
+ /*
+ * Hide table headers (but not display: none;, for accessibility)
+ */
+ thead tr {
+ position: absolute;
+ top: -9999%;
+ left: -9999%;
+ }
+
+ tbody tr {
+ border-top: 5px solid var(--gray-color);
+ border-bottom: 5px solid var(--gray-color);
+ }
+
+ td {
+ /* Behave like a "row" */
+ border: none;
+ position: relative;
+ padding-left: 50%;
+ }
+
+ td::before {
+ /* Now like a table header */
+ position: absolute;
+ /* Top/left values mimic padding */
+ left: 6px;
+ width: 45%;
+ padding-right: 10px;
+ white-space: nowrap;
+ }
+}
diff --git a/css/theme.css b/css/theme.css
new file mode 100644
index 0000000..2d15bc5
--- /dev/null
+++ b/css/theme.css
@@ -0,0 +1,85 @@
+/* Thanks to https://alexandersandberg.com/articles/creating-a-website-theme-switcher-with-css-only */
+:root {
+ /* Light mode */
+ --light-text: #222430;
+ --light-bg: #f5f6f7;
+ --light-theme: #1f9aff;
+ --light-gray: #707070;
+
+ /* Dark mode */
+ --dark-text: #f7f7f7;
+ --dark-bg: #222430;
+ --dark-theme: #bd93f9;
+ --dark-gray: #838383;
+
+ /* Default mode */
+ --text-color: var(--dark-text);
+ --bg-color: var(--dark-bg);
+ --theme-color: var(--dark-theme);
+ --gray-color: var(--dark-gray);
+}
+
+#theme-switch:checked ~ #page {
+ --text-color: var(--light-text);
+ --bg-color: var(--light-bg);
+ --theme-color: var(--light-theme);
+ --gray-color: var(--light-gray);
+}
+
+#theme-switch:checked ~ #divbodyholder {
+ --text-color: var(--light-text);
+ --bg-color: var(--light-bg);
+ --theme-color: var(--light-theme);
+ --gray-color: var(--light-gray);
+}
+
+:root {
+ /* Light mode */
+ --light-switch-text: "тёмный|dark";
+
+ /* Dark mode */
+ --dark-switch-text: "светлый|light";
+
+ /* Default mode */
+ --switch-text: var(--dark-switch-text);
+}
+
+#theme-switch:checked ~ #page {
+ --switch-text: var(--light-switch-text);
+}
+
+#theme-switch:checked ~ #divbodyholder {
+ --switch-text: var(--light-switch-text);
+}
+
+#switch-label::after {
+ content: var(--switch-text);
+}
+
+#theme-switch {
+ position: absolute !important;
+ height: 0px;
+ width: 0px;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --switch-text: var(--dark-switch-text);
+ --text-color: var(--dark-text);
+ --bg-color: var(--dark-bg);
+ --theme-color: var(--dark-theme);
+ --gray-color: var(--dark-gray);
+ }
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ --switch-text: var(--light-switch-text);
+ --text-color: var(--light-text);
+ --bg-color: var(--light-bg);
+ --theme-color: var(--light-theme);
+ --gray-color: var(--light-gray);
+ }
+}
diff --git a/css/third-party.css b/css/third-party.css
new file mode 100644
index 0000000..454ef1f
--- /dev/null
+++ b/css/third-party.css
@@ -0,0 +1,15 @@
+.spoiler, .spoiler a {
+ color: black;
+ background-color: black;
+}
+
+.spoiler:hover, .spoiler:hover a {
+ color: gray;
+}
+
+/* https://flaviocopes.com/css-system-fonts */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+ "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+ "Segoe UI Emoji", "Segoe UI Symbol";
+}
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/favicon.ico
diff --git a/favicon.png b/favicon.png
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/favicon.png
diff --git a/favicon.svg b/favicon.svg
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/favicon.svg
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..71c0e07
--- /dev/null
+++ b/index.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>Веб-сайт самохостера Lotigara</title>
+ <link href="/css/main.css" rel="stylesheet" />
+ <link href="/css/theme.css" rel="stylesheet" />
+ <link href="/css/third-party.css" rel="stylesheet" />
+ <link href="/css/responsivity.css" rel="stylesheet" />
+
+ <style>
+ @media (max-width: 1024px) {
+ td:nth-of-type(1):before { content: "Название"; }
+ td:nth-of-type(2):before { content: "Адрес"; }
+ td:nth-of-type(3):before { content: "Состояние"; }
+ td:nth-of-type(4):before { content: "Работает на"; }
+ td:nth-of-type(5):before { content: "Заметки"; }
+ }
+ </style>
+ </head>
+ <body>
+ <input type="checkbox" id="theme-switch">
+ <div id="page">
+ <div class="inner_page">
+ <div class="page_header floating_element">
+ <h1 class="floating_element">Веб-сайт самохостера Lotigara</h1>
+ </div>
+ <div class="floating_element">
+ <p style="display:inline">главная|main page</p>
+ <h4 style="display:inline"><a style="color:white" href="/status.php">состояние|status</a></h4>
+ <h4 style="display:inline"><a style="color:white" href="/blog">журнал|journal</a></h4>
+ <h4 style="display:inline"><a style="color:white" href="/files">файлы|files</a></h4>
+ <h4 style="display:inline"><a style="color:white" href="https://git.lotigara.ru">программы|software</a></h4>
+ <label id="switch-label" for="theme-switch"></label>
+ </div>
+ <div class="table_of_contents floating_element">
+ <details>
+ <summary class="section_header section_header_last">
+ Содержание
+ </summary>
+ <div class="table_of_contents_item floating_element">
+ <a href="#about">Кто я?</a>
+ </div>
+ <div class="table_of_contents_item floating_element">
+ <a href="#what-i-run">Что здесь?</a>
+ </div>
+ <div class="table_of_contents_item floating_element">
+ <a href="#bugs">Связаться</a>
+ </div>
+ <div class="table_of_contents_item floating_element">
+ <a href="#license">Лицензия</a>
+ </div>
+ </details>
+ </div>
+
+ <div class="content_section floating_element">
+ <div class="section_header">
+ <div id="about"></div>
+ Кто я?
+ </div>
+ <div class="content_section_text">
+ <p>
+ Я - обычный семиклассник, мне нравятся компьютеры и свободное программное
+ обеспечение. Также меня привлекает движение хакеров.
+ </p>
+ <p>
+ Конкретно сейчас я интересуюсь системным администрированием UNIX-систем,
+ в частности различных вариантов GNU/Linux <span class="spoiler">(то есть Debian)</span>. Подробнее про мой сервер
+ можете узнать в разделе <a href="/status.php"><b>Техническая информация</b></a>.
+ </p>
+
+ </div>
+ <div class="section_header">
+ <div id="what-i-run"></div>
+ А что здесь есть?
+ </div>
+ <div class="content_section_text">
+ <p>
+ Сейчас здесь работают следующие сервисы:
+ </p>
+ <table class="services_table">
+ <thead>
+ <tr>
+ <th>Название</th>
+ <th>Адрес</th>
+ <th>Состояние</th>
+ <th>Работает на</th>
+ <th>Заметки</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="services_table_item">
+ <td>Веб-сервер</td>
+ <td><a href="https://www.lotigara.ru">www.lotigara.ru</a></td>
+ <td>Работает!</td>
+ <td><a href="https://nginx.org">Nginx</a></td>
+ <td>Используется пакет <tt>nginx-full</tt></td>
+ </tr>
+ <tr class="services_table_item">
+ <td>Сервер комментариев</td>
+ <td><a href="https://isso.lotigara.ru">isso.lotigara.ru</a></td>
+ <td>Работает!</td>
+ <td><a href="https://isso-comments.de">Isso</a></td>
+ <td>Установка шла по инструкции с <a href="https://comfy.guide/server/isso/">Comfy.Guide</a>. Комментарии можно попробовать в действии в <a href="https://www.lotigara.ru/blog">журнале</a>.</td>
+ </tr>
+ <tr class="services_table_item">
+ <td><b>Git-сервер</b></td>
+ <td><a href="https://git.lotigara.ru">git.lotigara.ru</a></td>
+ <td>Работает!</td>
+ <td><a href="https://git.zx2c4.com/cgit">Cgit</a></td>
+ <td>Установка шла по <a href="https://landchad.net/cgit">инструкции с LandChad</a></td>
+ </tr>
+ <tr class="services_table_item">
+ <td>DNS-сервер</td>
+ <td><tt>ns1.lotigara.ru</tt></td>
+ <td>Работает!</td>
+ <td><a href="https://bind9.net">Bind 9</a></td>
+ <td>Установка шла приблизительно по <a href="https://zwischenzugs.com/2018/01/26/how-and-why-i-run-my-own-dns-servers/">инструкции с «Zwischenzugs»</a> (используется только один сервер)</td>
+ </tr>
+ <tr class="services_table_item">
+ <td>XMPP-сервер</td>
+ <td><tt>lotigara.ru</tt></td>
+ <td>Работает!</td>
+ <td><a href="https://prosody.im">Prosody</a></td>
+ <td>Установка шла по <a href="https://landchad.net/prosody">инструкциям с LandChad</a>. Авторизация через PAM описана <a href="https://blog.desdelinux.net/en/prosody-im-local-users-SME-networks">здесь</a></td>
+ </tr>
+ <tr class="services_table_item">
+ <td>XMPP-транспорты</td>
+ <td><tt>lotigara.ru</tt></td>
+ <td>Работает!</td>
+ <td><a href="https://slidge.im">Slidge</a></td>
+ <td>Используются транспорты для <a href="https://www.whatsapp.com">WhatsApp</a> и <a href="https://www.telegram.org">Telegram</a>. Slidge устанавливался как пакет Debian, см. оф. сайт</td>
+ </tr>
+ <tr class="services_table_item">
+ <td>Веб-клиент XMPP</td>
+ <td><a href="https://chat.lotigara.ru">chat.lotigara.ru</a></td>
+ <td>Работает!</td>
+ <td><a href="https://conversejs.org">Converse.js</a></td>
+ <td>Является дополнением к Prosody</td>
+ </tr>
+ <tr class="services_table_item">
+ <td>Почтовый сервер</td>
+ <td>mail.lotigara.ru</td>
+ <td>Работает!</td>
+ <td><a href="https://www.dovecot.org">Dovecot</a> и <a href="https://www.postfix.org">Postfix</a></td>
+ <td>Установка шла по <a href="https://landchad.net/mail">инструкциям с LandChad</a>. Авторизация через PAM</td>
+ </tr>
+ <tr class="services_table_item">
+ <td>Почтовый анти-спам сервер</td>
+ <td>mail.lotigara.ru</td>
+ <td>Работает, но не весь спам попадает в соответствующую папку.</td>
+ <td><a href="https://spamassasin.apache.org">SpamAssasin</a></td>
+ <td>Используется спам-фильтр с <a href="https://sa-russian.narod.ru/downloads.html">sa-russian.narod.ru</a></td>
+ </tr>
+ <tr class="services_table_item">
+ <td>Веб-клиент электронной почты</td>
+ <td><a href="https://mail.lotigara.ru">mail.lotigara.ru</a></td>
+ <td>Работает!</td>
+ <td><a href="https://git.sr.ht/~migadu/alps">Alps</a></td>
+ <td>Установка шла по <a href="https://landchad.net/alps">инструкции с LandChad</a></td>
+ </tr>
+ <tr class="services_table_item">
+ <td>Card- и CalDAV сервер</td>
+ <td><a href="https://dav.lotigara.ru">dav.lotigara.ru</a></td>
+ <td>Работает!</td>
+ <td><a href="https://radicale.org">Radicale</a></td>
+ <td>Установка шла по <a href="https://landchad.net/radicale">инструкции с LandChad</a>. Авторизация через почтовый сервер</td>
+ </tr>
+ <tr class="services_table_item">
+ <td>Переводчик</td>
+ <td><a href="https://tr.lotigara.ru">tr.lotigara.ru</a></td>
+ <td>Работает!</td>
+ <td><a href="https://github.com/LibreTranslate/LibreTranslate">LibreTranslate</a></td>
+ <td>Используется скрипт <a href="https://github.com/argosopentech/LibreTranslate-init">LibreTranslate-init</a>. Надо переключиться на использование видеокарты (<a href="https://github.com/argosopentech/argos-translate/issues/296">github.com/argosopentech/argos-translate/issues/296</a>). Находится в отдельном контейнере для больших языковых моделей</td>
+ </tr>
+ <tr class="services_table_item">
+ <td>Веб-интерфейс для больших языковых моделей</td>
+ <td><a href="https://llm.lotigara.ru">llm.lotigara.ru</a></td>
+ <td>Работает!</td>
+ <td><a href="https://docs.openwebui.com">Open WebUI</a></td>
+ <td>Использовался <a href="https://community-scripts.github.io/ProxmoxVE/scripts?id=openwebui">скрипт с Community Scripts</a>, но движок Ollama был переустановлен для использования с видеокартой. Находится в отдельном контейнере для больших языковых моделей</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <p>
+ Некоторые программы выше были установлены по инструкциям с замечательного веб-сайта <a href="https://landchad.net">LandChad</a>, большое спасибо его авторам!
+ </div>
+
+ <div class="section_header">
+ <div id="bugs"></div>
+ Где меня можно найти или связаться со мной?
+ </div>
+ <div class="content_section_text">
+ <ul>
+ <li>E-mail: <a href="mailto:lotigara@lotigara.ru">lotigara@lotigara.ru</a></li>
+ <li><a href="https://xmpp.org">XMPP/Jabber</a>: <a href="xmpp:lotigara@lotigara.ru">lotigara@lotigara.ru</a></li>
+ <li>Monero: <a class="word-break" href="monero:83f3JPPoCwp9WMVrAhEnGD2WNwLXPFZGySey1YRjBBYuXQNBNyDcbE2SGiQXorTd5J7PipaBrV5dMX1iX2B2fgh8QqXYdem">83f...dem</a></li>
+ <li>Keyoxide: <a class="word-break" href="https://keyoxide.org/aspe:keyoxide.org:2DESATMHSSUVHC3BWDVZMG4L4Y">aspe:keyoxide.org:2DE...L4Y</a></li>
+ </ul>
+ </div>
+ <div class="section_header section_header_last">
+ <div id="license"></div>
+ (c) Ivan Davydov 2024-2025. Делайте с этим документом всё, что хотите!
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/quantorium-presentation-2024-2025.html b/quantorium-presentation-2024-2025.html
new file mode 100644
index 0000000..f58d142
--- /dev/null
+++ b/quantorium-presentation-2024-2025.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>Презентация «Мой личный веб-сайт»</title>
+ <link href="/css/main.css" rel="stylesheet" />
+ <link href="/css/theme.css" rel="stylesheet" />
+ <link href="/css/third-party.css" rel="stylesheet" />
+ <link href="/css/responsivity.css" rel="stylesheet" />
+
+ <style>
+ iframe.website {
+ width: 400px;
+ height: 250px;
+ transition: 0.5s;
+
+ /* https://stackoverflow.com/a/3131624 */
+ /*-ms-zoom: 0.25;
+ -moz-transform: scale(0.25);
+ -moz-transform-origin: 0 0;
+ -o-transform: scale(0.25);
+ -o-transform-origin: 0 0;
+ -webkit-transform: scale(0.25);
+ -webkit-transform-origin: 0 0;*/
+
+ border-width: 0px;
+ border-color: var(--theme-color);
+ border-style: solid;
+ border-radius: 5px;
+ box-shadow: 0px 0px 8px 7px #000000;
+ }
+
+ iframe.website:hover {
+ transform: rotateZ(360deg) translateY(-100px);
+ transition: 0.5s;
+ width: 1000px;
+ height: 840px;
+ }
+
+ div.frame_wrapper {
+ margin: 5%;
+
+ height: 100%;
+ width: 100%;
+ }
+
+ body {
+ font-size: 29pt;
+ }
+
+ div.inner_page {
+ margin: 0;
+ width: 100%;
+ }
+
+ div.content_section_text p::first-letter, div.content::first-letter {
+ font-size: 33pt !important;
+ }
+
+ div.table_of_contents {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+
+ /*font-size: 11pt;*/
+
+ border-width: 0px;
+ border-color: var(--theme-color);
+ border-style: solid;
+ border-radius: 5px;
+ box-shadow: 0px 0px 8px 7px #000000;
+ }
+
+ #theme-switch:checked ~ #page {
+ --text-color: var(--dark-text);
+ --bg-color: var(--dark-bg);
+ --theme-color: var(--dark-theme);
+ --gray-color: var(--dark-gray);
+ }
+
+ :root {
+ --light-text: #222430;
+ --light-bg: #f5f6f7;
+ --light-theme: #e0b472;
+ --light-gray: #dcdfe6;
+
+ --dark-text: #f7f7f7;
+ --dark-bg: #222430;
+ --dark-theme: #bd93f9;
+ --dark-gray: #838383;
+
+ --text-color: var(--light-text);
+ --bg-color: var(--light-bg);
+ --theme-color: var(--light-theme);
+ --gray-color: var(--light-gray);
+ }
+ </style>
+ </head>
+ <body>
+ <input type="checkbox" id="theme-switch">
+ <div id="page">
+ <div class="inner_page">
+ <div class="page_header floating_element">
+ <h1 class="floating_element">Мой личный веб-сайт</h1>
+ </div>
+ <div class="floating_element">
+ <h3>Выполнил Иван Давыдов из группы И1</h3>
+ <label id="switch-label" for="theme-switch"></label>
+ </div>
+
+ <div class="content_section floating_element" style="display:inline-flex;">
+ <div style="display:initial;">
+ <div class="section_header">
+ <div id="about"></div>
+ О проекте
+ </div>
+ <div class="content_section_text" style="display:inline-flex;">
+ <div class="frame_wrapper">
+ <iframe class="website" src="https://www.lotigara.ru" title="Главная страница"></iframe>
+ </div>
+ <div style="display:initial;width:100%;">
+ <p>
+ «Веб-сайт самохостера Lotigara» - это мой личный веб-сайт,
+ на котором есть краткое описание сервера и установленного ПО, задач
+ и блог.
+ </p>
+
+ <p>Технологии, которые были использованы:</p>
+ <ul>
+ <li>HTML 5</li>
+ <li>CSS 3</li>
+ </ul>
+
+ <p>Ресурсы, которые были использованы:</p>
+ <ul>
+ <li>MDN</li>
+ <li>W3Schools</li>
+ <li>LandChad</li>
+ </ul>
+ </div>
+ </div>
+ <div class="section_header">
+ <div id="reasons-n-causes"></div>
+ Причины и поводы
+ </div>
+ <div class="content_section_text" style="display:inline-flex;">
+ <div class="frame_wrapper">
+ <iframe class="website" src="https://www.lotigara.ru/status.php" title="Состояние"></iframe>
+ </div>
+ <div style="display:initial;width:100%;">
+ <p>Причины:</p>
+ <ol>
+ <li>Интересно изучать, как работает Web, ОС типа Unix.</li>
+ </ol>
+
+ <p>Поводы:</p>
+ <ol>
+ <li>Появление мощной ЭВМ, у которой хватает мощности выполнять полный набор серверного ПО.</li>
+ </ol>
+ </div>
+ </div>
+
+ <div class="section_header">
+ <div id="plans"></div>
+ Планы на будущее
+ </div>
+ <div class="content_section_text" style="display:inline-flex;">
+ <ul style="display:initial;">
+ <li>Присоединение блога к децентрализованной соц. сети XMPP и добавление комментариев через XMPP</li>
+ <li>Больше публикаций в журнале</li>
+ <li>Настройка внешнего вида Git-сервера</li>
+ <li>Присоединить веб-сайт к системе управления версиями Git</li>
+ </ul>
+ <div class="frame_wrapper">
+ <iframe class="website" src="https://www.lotigara.ru/blog" title="Журнал"></iframe>
+ </div>
+ </div>
+
+ <div class="section_header">
+ <div id="drawbacks"></div>
+ Недостатки
+ </div>
+ <div class="content_section_text" style="display:inline-flex;">
+ <div class="frame_wrapper">
+ <iframe class="website" src="https://git.lotigara.ru" title="Блог"></iframe>
+ </div>
+ <ul style="display:initial;">
+ <li>Так как я из принципа не использую JavaScript, мой вебсайт <i>может</i> выглядеть и ощущаться не таким «живым», как другие веб-сайты.</li>
+ </ul>
+ </div>
+ </div>
+ <div class="table_of_contents floating_element">
+ <ul>
+ <li><a href="#about">Общая информация</a></li>
+ <li><a href="#reasons-n-causes">Причины и поводы</a></li>
+ <li><a href="#plans">Планы</a></li>
+ <li><a href="#drawbacks">Недостатки</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/status.php b/status.php
new file mode 100644
index 0000000..5946dcc
--- /dev/null
+++ b/status.php
@@ -0,0 +1,320 @@
+<!DOCTYPE html>
+<html lang="ru">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>Техническая информация | Веб-сайт самохостера Lotigara</title>
+ <link href="/css/main.css" rel="stylesheet" />
+ <link href="/css/theme.css" rel="stylesheet" />
+ <link href="/css/third-party.css" rel="stylesheet" />
+ <link href="/css/responsivity.css" rel="stylesheet" />
+
+ <style>
+ @media (max-width: 1024px) {
+ tr.services_table_item td:nth-of-type(1):before { content: "Название"; }
+ tr.services_table_item td:nth-of-type(2):before { content: "Порт"; }
+ tr.services_table_item td:nth-of-type(3):before { content: "Состояние"; }
+
+ tr.status_table_item td:nth-of-type(1):before { content: "Средняя загрузка"; }
+ tr.status_table_item td:nth-of-type(2):before { content: "Время работы"; }
+ tr.status_table_item td:nth-of-type(3):before { content: "Свободно ОЗУ"; }
+ }
+ </style>
+ </head>
+ <body>
+ <input type="checkbox" id="theme-switch">
+ <div id="page"><div class="inner_page">
+ <div class="page_header floating_element"><h1 class="floating_element">Техническая информация</h1></div>
+ <div class="floating_element">
+ <h4 style="display:inline"><a style="color:white" href="/">главная|main page</a></h4>
+ <p style="display:inline">состояние|status</p>
+ <h4 style="display:inline"><a style="color:white" href="/blog">журнал|journal</a></h4>
+ <h4 style="display:inline"><a style="color:white" href="/files">файлы|files</a></h4>
+ <h4 style="display:inline"><a style="color:white" href="https://git.lotigara.ru">программы|software</a></h4>
+ <label id="switch-label" for="theme-switch"></label>
+ </div>
+ <div class="table_of_contents floating_element">
+ <details>
+ <summary class="section_header section_header_last">
+ Содержание
+ </summary>
+ <div class="table_of_contents_item floating_element">
+ <a href="#net-daemons">Состояние сетевых демонов</a>
+ <div class="table_of_contents_item floating_element">
+ <a href="#server-info">Информация о сервере</a>
+ </div>
+ <div class="table_of_contents_item floating_element">
+ <a href="#license">Лицензия</a>
+ </div>
+ </details>
+ </div>
+ <div class="content_section floating_element">
+<?php
+/*
+
+ *
+ * @author Trường An Phạm Nguyễn, Ivan Davydov
+ * @copyright 2019, 2024, The authors
+ * @license GNU AFFERO GENERAL PUBLIC LICENSE
+ * http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Jul 27, 2013
+
+Original author:
+* Disclaimer Notice(s)
+* ex: This code is freely given to you and given "AS IS", SO if it damages
+* your computer, formats your HDs, or burns your house I am not the one to
+* blame.
+* Moreover, don't forget to include my copyright notices and name.
+* +------------------------------------------------------------------------------+
+* Author(s): Crooty.co.uk (Adam C)
+* +------------------------------------------------------------------------------+
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program. If not, see <http://www.gnu.org/licenses/>.
+*/
+
+$data = "";
+$data .= '<div class="section_header"><div id="server-info"></div>Состояние сетевых демонов</div><div class="content_section_text">';
+
+
+//configure script
+$timeout = "1";
+
+//set service checks
+/*
+The script will open a socket to the following service to test for connection.
+Does not test the fucntionality, just the ability to connect
+Each service can have a name, port and the Unix domain it run on (default to localhost)
+*/
+$services = array();
+
+
+$services[] = array("port" => "80", "service" => "Nginx", "ip" => "") ;
+$services[] = array("port" => "5222", "service" => "Prosody", "ip" => "") ;
+$services[] = array("port" => "5281", "service" => "Веб-сервер Prosody", "ip" => "") ;
+$services[] = array("port" => "25", "service" => "Postfix", "ip" => "") ;
+$services[] = array("port" => "143", "service" => "Dovecot", "ip" => "") ;
+$services[] = array("port" => "1323", "service" => "Alps", "ip" => "") ;
+$services[] = array("port" => "5232", "service" => "Radicale", "ip" => "") ;
+$services[] = array("port" => "80", "service" => "Yandex", "ip" => "ya.ru") ;
+
+
+//begin table for status
+$data .= "<table class='services_table'><thead><tr><th>Название</th><th>Порт</th><th>Состояние</th></tr></thead><tbody>";
+foreach ($services as $service) {
+ if($service['ip']==""){
+ $service['ip'] = "localhost";
+ }
+ $data .= "<tr class='services_table_item'><td>" . $service['service'] . "</td><td>". $service['port'];
+
+ $fp = @fsockopen($service['ip'], $service['port'], $errno, $errstr, $timeout);
+ if (!$fp) {
+ $data .= "</td><td>Не работает </td></tr>";
+ //fclose($fp);
+ } else {
+ $data .= "</td><td>Работает</td></tr>";
+ fclose($fp);
+ }
+
+}
+//close table
+$data .= "</tbody></table>";
+$data .= '</div>';
+echo $data;
+
+
+/* =====================================================================
+//
+// ////////////////// SERVER INFORMATION /////////////////////////////////
+//
+//
+* =======================================================================/*/
+
+$data1 = "";
+$data1 .= '<div class="section_header"><div id="server-info"></div>Информация о сервере</div><div class="content_section_text">';
+
+$data1 .= "<table class='status_table'><thead><tr><th>Средняя загрузка</th><th>Время работы</th><th>Свободно ОЗУ</th></tr></thead><tbody>";
+// $data1 .= "<div class='table-responsive'><table class='table table-sm mb-0'>";
+
+//GET SERVER LOADS
+$loadresult = @exec('uptime');
+preg_match("/averages?: ([0-9\.]+),[\s]+([0-9\.]+),[\s]+([0-9\.]+)/",$loadresult,$avgs);
+
+
+//GET SERVER UPTIME
+$uptime = explode(' up ', $loadresult);
+$uptime = explode(',', $uptime[1]);
+$uptime = $uptime[0].', '.$uptime[1];
+
+//Get the disk space
+function getSymbolByQuantity($bytes) {
+ $symbol = array('B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB');
+ $exp = floor(log($bytes)/log(1024));
+
+ return sprintf('%.2f'.$symbol[$exp].'', ($bytes/pow(1024, floor($exp))));
+}
+function percent_to_color($p){
+ if($p < 30) return 'success';
+ if($p < 45) return 'info';
+ if($p < 60) return 'primary';
+ if($p < 75) return 'warning';
+ return 'danger';
+}
+function format_storage_info($disk_space, $disk_free, $disk_name){
+ $str = "";
+ $disk_free_precent = 100 - round($disk_free*1.0 / $disk_space*100, 2);
+ $str .= '<div class="col p-0 d-inline-flex">';
+ $str .= "<span class='mr-2'>" . badge($disk_name,'secondary') .' '. getSymbolByQuantity($disk_free) . '/'. getSymbolByQuantity($disk_space) ."</span>";
+ $str .= '
+<div class="progress flex-grow-1 align-self-center">
+ <div class="progress-bar progress-bar-striped progress-bar-animated ';
+ $str .= 'bg-' . percent_to_color($disk_free_precent) .'
+ " role="progressbar" style="width: '.$disk_free_precent.'%;" aria-valuenow="'.$disk_free_precent.'" aria-valuemin="0" aria-valuemax="100">'.$disk_free_precent.'%</div>
+</div>
+</div> ';
+
+ return $str;
+
+}
+
+function get_disk_free_status($disks){
+ $str="";
+ $max = 5;
+ foreach($disks as $disk){
+ if(strlen($disk["name"]) > $max)
+ $max = strlen($disk["name"]);
+ }
+
+ foreach($disks as $disk){
+ $disk_space = disk_total_space($disk["path"]);
+ $disk_free = disk_free_space($disk["path"]);
+
+ $str .= format_storage_info($disk_space, $disk_free, $disk['name']);
+
+ }
+ return $str;
+}
+function badge($str, $type){
+ return "<span class='badge badge-" . $type . " ' >$str</span>";
+}
+
+//Get ram usage
+$total_mem = preg_split('/ +/', @exec('grep MemTotal /proc/meminfo'));
+$total_mem = $total_mem[1];
+$free_mem = preg_split('/ +/', @exec('grep MemFree /proc/meminfo'));
+$cache_mem = preg_split('/ +/', @exec('grep ^Cached /proc/meminfo'));
+
+$free_mem = $free_mem[1] + $cache_mem[1];
+
+
+//Get top mem usage
+$tom_mem_arr = array();
+$top_cpu_use = array();
+
+//-- The number of processes to display in Top RAM user
+$i = 5;
+
+
+/* ps command:
+-e to display process from all user
+-k to specify sorting order: - is desc order follow by column name
+-o to specify output format, it's a list of column name. = suppress the display of column name
+head to get only the first few lines
+*/
+/*exec("ps -e k-rss -o rss,args | head -n $i", $tom_mem_arr, $status);
+exec("ps -e k-pcpu -o pcpu,args | head -n $i", $top_cpu_use, $status);
+
+
+$top_mem = implode('<br/>', $tom_mem_arr );
+$top_mem = "<pre class='mb-0 '><code>" . $top_mem . "</code></pre>";
+
+$top_cpu = implode('<br/>', $top_cpu_use );
+$top_cpu = "<pre class='mb-0 '><code>" . $top_cpu. "</code></pre>";*/
+
+$data1 .= "<tr class='status_table_item'><td><b>". $avgs[1]. ' ' .$avgs[2] . ' ' . $avgs[3] . " </b></td>\n";
+$data1 .= "<td>$uptime</td>";
+
+
+$disks = array();
+
+/*
+* The disks array list all mountpoint you wan to check freespace
+* Display name and path to the moutpoint have to be provide, you can
+*/
+$disks[] = array("name" => "local" , "path" => getcwd()) ;
+// $disks[] = array("name" => "Your disk name" , "path" => '/mount/point/to/that/disk') ;
+
+
+/*$data1 .= "<tr><td>Disk free </td><td>" . get_disk_free_status($disks) . "</td></tr>";*/
+
+$data1 .= "<td>". format_storage_info($total_mem *1024, $free_mem *1024, '') ."</td>";
+/*$data1 .= "<tr><td>Top RAM user </td><td><small>$top_mem</small></td></tr>";
+$data1 .= "<tr><td>Top CPU user </td><td><small>$top_cpu</small></td></tr>";*/
+$data1 .= "<hr>";
+
+$data1 .= "</tr>";
+$data1 .= "</tbody>";
+$data1 .= "</table>";
+$data1 .= '</div>';
+echo $data1;
+
+/* =============================================================================
+*
+* DISPLAY BANDWIDTH STATISTIC, REQUIRE VNSTAT INSTALLED AND PROPERLY CONFIGURED.
+*
+* ===============================================================================s
+*/
+
+
+/*if (!isset($_GET['showtraffic']) || $_GET['showtraffic'] == false) die();
+
+$data2 = "";
+$data2 .= '
+<div class="card mb-2">
+ <h4 class="card-header text-center">
+ vnstat Network traffic
+ </h4>
+ <div class="card-body text-center">
+';
+
+
+$data2 .="<span class=' d-block'><pre class='d-inline-block text-left'><small>";
+$traffic_arr = array();
+exec('vnstat -' . escapeshellarg( $_GET['showtraffic'] ), $traffic_arr, $status);
+
+///for testing
+$traffic = "
+enp0s20 / monthly
+
+month rx | tx | total | avg. rate
+------------------------+-------------+-------------+---------------
+Sep '18 36.60 GiB | 7.04 GiB | 43.64 GiB | 144.62 kbit/s
+Oct '18 400.69 GiB | 1.19 TiB | 1.58 TiB | 5.19 Mbit/s
+Nov '18 393.52 GiB | 2.19 TiB | 2.57 TiB | 8.72 Mbit/s
+Dec '18 507.28 GiB | 2.05 TiB | 2.55 TiB | 8.37 Mbit/s
+Jan '19 269.01 GiB | 1.39 TiB | 1.65 TiB | 7.51 Mbit/s
+------------------------+-------------+-------------+---------------
+estimated 371.92 GiB | 1.92 TiB | 2.29 TiB |
+";
+/// for real
+$traffic = implode("\n", $traffic_arr);
+
+$data2 .="$traffic</small></pre></span>";
+
+echo $data2;*/
+?>
+<div class="section_header section_header_last">
+ <div id="license"></div>
+ См. лицензию и исходный код в <a style="color: white;" href="/files/status.php.txt">этом</a> файле
+</div>
+</div></div></body></html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-07-11 17:14:40 +0000