diff options
-rw-r--r-- | css/cgit-dark.css | 1125 | ||||
-rw-r--r-- | css/header.css | 21 | ||||
-rw-r--r-- | css/isso.css | 324 | ||||
-rw-r--r-- | css/main.css | 254 | ||||
-rw-r--r-- | css/responsivity.css | 193 | ||||
-rw-r--r-- | css/theme.css | 85 | ||||
-rw-r--r-- | css/third-party.css | 15 | ||||
-rw-r--r-- | favicon.ico | 0 | ||||
-rw-r--r-- | favicon.png | 0 | ||||
-rw-r--r-- | favicon.svg | 0 | ||||
-rw-r--r-- | index.html | 210 | ||||
-rw-r--r-- | quantorium-presentation-2024-2025.html | 204 | ||||
-rw-r--r-- | status.php | 320 |
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> |