Improve appearance of build instructions generator (#1689)
This commit is contained in:
Mammad
GitHub
parent
a58b4dc302
commit
3272888be1
241
build.html
241
build.html
@ -2,18 +2,208 @@
|
|||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>TDLib build instructions</title>
|
<title>TDLib build instructions</title>
|
||||||
<style>
|
<style>
|
||||||
.hide { display: none; }
|
:root {
|
||||||
div.main { max-width:1200px; margin: auto; font-size: x-large; }
|
--background: #fafafa;
|
||||||
select.large { font-size: large; }
|
--color: black;
|
||||||
</style>
|
--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>
|
</head>
|
||||||
|
|
||||||
<body onload="onLoad(true)" onpopstate="onLoad(false)">
|
<body onload="onLoad(true)" onpopstate="onLoad(false)">
|
||||||
|
|
||||||
<div class="main">
|
<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>
|
<p>Choose a programming language, from which you want to use TDLib:</p>
|
||||||
<select id="languageSelect" onchange="onLanguageChanged(false)" autofocus class="large">
|
<select id="languageSelect" onchange="onLanguageChanged(false)" autofocus class="large">
|
||||||
<option>Choose a programming language:</option>
|
<option>Choose a programming language:</option>
|
||||||
@ -44,7 +234,7 @@ select.large { font-size: large; }
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</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>
|
<p>Choose an operating system, on which you want to use TDLib:</p>
|
||||||
<select id="osSelect" onchange="onOsChanged()" class="large">
|
<select id="osSelect" onchange="onOsChanged()" class="large">
|
||||||
<option>Choose an operating system:</option>
|
<option>Choose an operating system:</option>
|
||||||
@ -52,7 +242,7 @@ select.large { font-size: large; }
|
|||||||
<p></p>
|
<p></p>
|
||||||
</div>
|
</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>
|
<p>Choose a Linux distro, on which you want to use TDLib:</p>
|
||||||
<select id="linuxSelect" onchange="onOsChanged()" class="large">
|
<select id="linuxSelect" onchange="onOsChanged()" class="large">
|
||||||
<option>Choose a Linux distro:</option>
|
<option>Choose a Linux distro:</option>
|
||||||
@ -71,7 +261,7 @@ select.large { font-size: large; }
|
|||||||
<p></p>
|
<p></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="buildOptionsDiv" class="hide" style="text-align:center;">
|
<div id="buildOptionsDiv" class="hide">
|
||||||
<div id="buildLtoDiv" 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>
|
<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>
|
</div>
|
||||||
@ -133,14 +323,18 @@ select.large { font-size: large; }
|
|||||||
<p></p>
|
<p></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="buildTextDiv" class="hide" style="text-align:center;">
|
<div id="buildTextDiv" class="hide">
|
||||||
<p id="buildText">Hidden text</p>
|
<p id="buildText">Hidden text</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="buildCommandsDiv" class="hide" style="text-align:left;">
|
<div id="buildCommandsDiv" class="hide">
|
||||||
<p id="buildCommandsHeader" style="text-align:center;">Here is complete instruction for TDLib binaries building:</p>
|
<p id="buildCommandsHeader">Here is complete instruction for TDLib binaries building:</p>
|
||||||
<p id="buildPre">Hidden text</p>
|
<p id="buildPre">Hidden text</p>
|
||||||
<code id="buildCommands">Empty commands</code>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -902,7 +1096,26 @@ function onOptionsChanged() {
|
|||||||
}
|
}
|
||||||
commands.push((use_powershell ? 'dir ' : 'ls -l ') + install_dir);
|
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>
|
</script>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user