thanks

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);
+}