aboutsummaryrefslogtreecommitdiffhomepage
path: root/build.html
diff options
context:
space:
mode:
authorMammad <67197540+Mammad900@users.noreply.github.com>2021-11-20 18:44:08 +0330
committerGitHub <noreply@github.com>2021-11-20 18:14:08 +0300
commit3272888be1b8b9a01c3d895df1483f8dea1ce993 (patch)
tree59c5905ee7d8db053f9dd69a36312aec35c9872b /build.html
parenta58b4dc302b1f5cb0005082bb2a35987bedba205 (diff)
Improve appearance of build instructions generator (#1689)
Diffstat (limited to 'build.html')
-rw-r--r--build.html241
1 files changed, 227 insertions, 14 deletions
diff --git a/build.html b/build.html
index cd2770703..546b32c3c 100644
--- a/build.html
+++ b/build.html
@@ -2,18 +2,208 @@
<html>
<head>
-<title>TDLib build instructions</title>
-<style>
-.hide { display: none; }
-div.main { max-width:1200px; margin: auto; font-size: x-large; }
-select.large { font-size: large; }
-</style>
+ <title>TDLib build instructions</title>
+ <style>
+ :root {
+ --background: #fafafa;
+ --color: black;
+ --color-primary: #0088ff;
+ --color-code-block: #ebf9ff;
+ --color-select-border: rgb(211, 211, 211);
+ --color-checkbox-background: rgb(211, 211, 211);
+ --color-checkbox-tick: #ffffff;
+ --color-copy-success-background: #c1ffc6;
+ --color-copy-success-border: rgb(0, 255, 0);
+ --color-copy-fail-background: #ffcbcb;
+ --color-copy-fail-border: rgb(255, 0, 0);
+ --color-copy-warning: orange;
+
+ color: var(--color);
+ background: var(--background);
+ }
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --background: #0e0e0e;
+ --color: rgb(190, 190, 190);
+ --color-primary: #0088ff;
+ --color-code-block: #101315;
+ --color-select-border: rgb(54, 54, 54);
+ --color-checkbox-background: rgb(51, 51, 51);
+ --color-checkbox-tick: #ffffff;
+ --color-copy-success-background: #001f00;
+ --color-copy-success-border: rgb(0, 255, 0);
+ --color-copy-fail-background: #1f0000;
+ --color-copy-fail-border: rgb(255, 0, 0);
+ }
+ }
+ body {
+ font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
+ }
+ :focus {
+ outline: none;
+ }
+ .hide {
+ display: none;
+ }
+ div.main {
+ max-width: 1250px;
+ padding: 25px;
+ margin: auto;
+ font-size: 16px;
+ }
+
+ p {
+ margin: 0;
+ }
+ .main > div {
+ margin-bottom: 20px;
+ }
+
+ #buildCommands {
+ font-family: Consolas, monospace;
+ margin-left: 40px;
+ background: var(--color-code-block);
+ padding: 5px;
+ margin-bottom: 0;
+ display: block;
+ }
+ #buildCommands ul {
+ list-style: none;
+ }
+ #buildCommands ul li::before {
+ content: "$";
+ color: var(--color-copy-warning);
+ font-weight: bold;
+ display: inline-block;
+ width: 1em;
+ margin-left: -1em;
+ opacity: .4;
+ }
+
+ a {
+ color: var(--color-primary);
+ text-decoration-color: transparent;
+ transition: text-decoration-color 200ms;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+ select, button {
+ border: 1px solid var(--color-select-border);
+ background-color: var(--background);
+ color: var(--color);
+ padding: 5px;
+ margin-top: 5px;
+ transition: border 200ms, padding 200ms;
+ border-radius: 999em;
+ font-size: 16px;
+ cursor: pointer;
+ }
+
+ select:focus, button:focus {
+ border-color: var(--color-primary);
+ border-width: 2px;
+ padding: 4px;
+ }
+
+ label * {
+ vertical-align: middle;
+ }
+
+ input[type=checkbox] {
+ margin-right: 5px;
+ appearance: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ background-color: var(--color-checkbox-background);
+ height: 20px;
+ width: 20px;
+ border-radius: 3px;
+ position: relative;
+ transition: background-color 200ms;
+ }
+ input[type=checkbox]::after {
+ content: "";
+ transition: border-color 200ms;
+ position: absolute;
+ left: 6px;
+ top: 2px;
+ width: 5px;
+ height: 10px;
+ border: solid transparent;
+ border-width: 0 3px 3px 0;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ }
+ input[type=checkbox]:checked {
+ background-color: var(--color-primary);
+ }
+ input[type=checkbox]:checked::after {
+ border-color: var(--color-checkbox-tick);
+ }
+
+ input[type=radio] {
+ margin-right: 5px;
+ appearance: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ background-color: var(--color-checkbox-background);
+ height: 20px;
+ width: 20px;
+ border-radius: 100%;
+ position: relative;
+ transition: background-color 200ms;
+ }
+ input[type=radio]::after {
+ content: "";
+ transition: border-color 200ms;
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ width: 0;
+ height: 0;
+ border-radius: 100%;
+ background-color: transparent;
+ transition: width 200ms, height 200ms, left 200ms, top 200ms, background-color 100ms;
+ }
+ input[type=radio]:checked::after {
+ background-color: var(--color-primary);
+ left: 2px;
+ top: 2px;
+ width: 16px;
+ height: 16px;
+ }
+
+ #copyBuildCommandsButton {
+ margin-left: 40px;
+ }
+ #copyBuildCommandsButton.success {
+ background: var(--color-copy-success-background);
+ border-color: var(--color-copy-success-border);
+ }
+ #copyBuildCommandsButton.fail {
+ background: var(--color-copy-fail-background);
+ border-color: var(--color-copy-fail-border);
+ }
+ #copyBuildCommandsButton .notice {
+ font-size: 14px;
+ font-weight: bold;
+ margin-left: 5px;
+ color: var(--color-copy-warning);
+ display: none;
+ }
+ #copyBuildCommandsButton:hover .notice,
+ #copyBuildCommandsButton:focus .notice {
+ display: inline;
+ }
+ </style>
</head>
<body onload="onLoad(true)" onpopstate="onLoad(false)">
<div class="main">
- <div id="languageSelectDiv" style="text-align:center;">
+ <div id="languageSelectDiv">
<p>Choose a programming language, from which you want to use TDLib:</p>
<select id="languageSelect" onchange="onLanguageChanged(false)" autofocus class="large">
<option>Choose a programming language:</option>
@@ -44,7 +234,7 @@ select.large { font-size: large; }
</select>
</div>
- <div id="osSelectDiv" class="hide" style="text-align:center;">
+ <div id="osSelectDiv" class="hide">
<p>Choose an operating system, on which you want to use TDLib:</p>
<select id="osSelect" onchange="onOsChanged()" class="large">
<option>Choose an operating system:</option>
@@ -52,7 +242,7 @@ select.large { font-size: large; }
<p></p>
</div>
- <div id="linuxSelectDiv" class="hide" style="text-align:center;">
+ <div id="linuxSelectDiv" class="hide">
<p>Choose a Linux distro, on which you want to use TDLib:</p>
<select id="linuxSelect" onchange="onOsChanged()" class="large">
<option>Choose a Linux distro:</option>
@@ -71,7 +261,7 @@ select.large { font-size: large; }
<p></p>
</div>
- <div id="buildOptionsDiv" class="hide" style="text-align:center;">
+ <div id="buildOptionsDiv" class="hide">
<div id="buildLtoDiv" class="hide">
<label><input type="checkbox" id="buildLtoCheckbox" onchange="onOptionsChanged()"/>Enable Link Time Optimization (requires CMake >= 3.9.0). It can significantly reduce binary size and increase performance, but sometimes it can lead to build failures.</label>
</div>
@@ -133,14 +323,18 @@ select.large { font-size: large; }
<p></p>
</div>
- <div id="buildTextDiv" class="hide" style="text-align:center;">
+ <div id="buildTextDiv" class="hide">
<p id="buildText">Hidden text</p>
</div>
- <div id="buildCommandsDiv" class="hide" style="text-align:left;">
- <p id="buildCommandsHeader" style="text-align:center;">Here is complete instruction for TDLib binaries building:</p>
+ <div id="buildCommandsDiv" class="hide">
+ <p id="buildCommandsHeader">Here is complete instruction for TDLib binaries building:</p>
<p id="buildPre">Hidden text</p>
<code id="buildCommands">Empty commands</code>
+ <button id="copyBuildCommandsButton" onclick="copyBuildInstructions()">
+ <span id="copyBuildCommandsText">Copy</span>
+ <span class="notice">Notice: Not all build instructions can be just copied and pasted</span>
+ </button>
</div>
</div>
@@ -902,7 +1096,26 @@ function onOptionsChanged() {
}
commands.push((use_powershell ? 'dir ' : 'ls -l ') + install_dir);
}
- document.getElementById('buildCommands').innerHTML = '<ul><li>' + commands.join('</li><li>') + '</li></ul>';
+ document.getElementById('buildCommands').innerHTML = '<ul><li>' + commands.join('</li><li>') + '</li></ul>'
+}
+
+function copyBuildInstructions() {
+ var text= document.getElementById('buildCommands').innerText;
+
+ function resetButtonState (state) {
+ document.getElementById('copyBuildCommandsButton').classList.remove(state);
+ document.getElementById('copyBuildCommandsText').innerText= "Copy"
+ }
+
+ navigator.clipboard.writeText(text).then(result => {
+ document.getElementById('copyBuildCommandsButton').classList.add('success');
+ document.getElementById('copyBuildCommandsText').innerText= "Copied!"
+ setTimeout(()=> resetButtonState('success'), 5000);
+ }, error => {
+ document.getElementById('copyBuildCommandsButton').classList.add('fail');
+ document.getElementById('copyBuildCommandsText').innerText= "Couldn't copy :("
+ setTimeout(()=> resetButtonState('fail'), 5000);
+ })
}
</script>
generated by cgit v1.2.3 (git 2.46.0) at 2026-08-22 22:33:55 +0000