diff options
| -rw-r--r-- | web/kvm/index.html | 47 | ||||
| -rw-r--r-- | web/share/css/kvm/about.css | 5 | ||||
| -rw-r--r-- | web/share/css/tabs.css | 47 |
3 files changed, 95 insertions, 4 deletions
diff --git a/web/kvm/index.html b/web/kvm/index.html index 1bcbe55b..6f844834 100644 --- a/web/kvm/index.html +++ b/web/kvm/index.html @@ -44,6 +44,7 @@ <link rel="stylesheet" href="../share/css/switch.css"> <link rel="stylesheet" href="../share/css/progress.css"> <link rel="stylesheet" href="../share/css/keypad.css"> + <link rel="stylesheet" href="../share/css/tabs.css"> <link rel="stylesheet" href="../share/css/kvm/stream.css"> <link rel="stylesheet" href="../share/css/kvm/hid.css"> <link rel="stylesheet" href="../share/css/kvm/msd.css"> @@ -664,11 +665,49 @@ </td> </tr> </table> - <hr> - <div id="about-meta" class="code"> - <span class="code-comment">No data</span> + <div class="tabs"> + <input type="radio" name="about-tab-button" id="about-tab-info-button" value="" checked> + <label for="about-tab-info-button">Info</label> + + <input type="radio" name="about-tab-button" id="about-tab-thanks-button" value=""> + <label for="about-tab-thanks-button">Thanks</label> + + <div id="about-tab-info-content"> + <div id="about-meta" class="code"> + <span class="code-comment">No data</span> + </div> + </div> + <div id="about-tab-thanks-content"> + <div class="code" style="max-height: 300px"> + <span class="code-comment"> + // These kind people donated money to the Pi-KVM project<br> + // and supported the work on it. We are very grateful<br> + // for their help, and memorializing their names<br> + // is the least we can do in gratitude.<br> + // If you also want to support this project,<br> + // you can use one of these services: + <a target="_blank" href="https://www.patreon.com/pikvm">Patreon</a> + or <a target="_blank" href="https://www.paypal.me/mdevaev">PayPal</a>. + </span> + <ul> + <li>Arthur Woimbée</li> + <li>Branden Shaulis</li> + <li>Christof Maluck</li> + <li>David Howell</li> + <li>Denis Yatsenko</li> + <li>Ge Men</li> + <li>Grey Cynic</li> + <li>Jason Toland</li> + <li>John McGovern</li> + <li>Mauricio Allende</li> + <li>Samed Ozoglu</li> + <li>Truman Kilen</li> + <li>Walter_Ego</li> + </ul> + </div> + </div> </div> - <hr> + <br> <p class="text"> Full documentation, source code, hardware schematics and legal information can be found in our <a target="_blank" href="https://pikvm.org">official website</a>. diff --git a/web/share/css/kvm/about.css b/web/share/css/kvm/about.css index 83ba6091..306f0a73 100644 --- a/web/share/css/kvm/about.css +++ b/web/share/css/kvm/about.css @@ -48,3 +48,8 @@ div#about tr.version { div#about div#about-meta { height: 200px; } + +#about-tab-info-button:checked~#about-tab-info-content, +#about-tab-thanks-button:checked~#about-tab-thanks-content { + display: block; +} diff --git a/web/share/css/tabs.css b/web/share/css/tabs.css new file mode 100644 index 00000000..46c46b4b --- /dev/null +++ b/web/share/css/tabs.css @@ -0,0 +1,47 @@ +/***************************************************************************** +# # +# KVMD - The main Pi-KVM daemon. # +# # +# Copyright (C) 2018 Maxim Devaev <[email protected]> # +# # +# 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 <https://www.gnu.org/licenses/>. # +# # +*****************************************************************************/ + + +div.tabs>input[type="radio"] { + display: none; +} + +div.tabs>div { + display: none; + border: var(--border-default-thin); + padding: 10px 10px; +} + +div.tabs>label { + display: inline-block; + text-align: center; + vertical-align: middle; + user-select: none; + border: var(--border-default-thin); + padding: 4px 8px; + cursor: pointer; + position: relative; + top: 1px; +} + +div.tabs>input[type="radio"]:checked+label { + background-color: var(--cs-control-default-bg); +} |